Skip to content

Codex/design style library - #2

Merged
pandaofwild merged 10 commits into
mainfrom
codex/design-style-library
Jun 3, 2026
Merged

Codex/design style library#2
pandaofwild merged 10 commits into
mainfrom
codex/design-style-library

Conversation

@pandaofwild

Copy link
Copy Markdown
Owner

No description provided.

pandaofwild and others added 10 commits June 3, 2026 19:57
- Create README.en.md as a full English translation
- Add language nav links at the top of both READMEs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace hardcoded hex colors in LayoutPreviewRenderer with
--style-* CSS variables, so layout previews update in real
time when a design style is selected.

- bg/text/border: use var(--style-primary/text/accent/etc.)
- Opacity variants: use rgb(var(--style-*-rgb) / N) form
- Dark panels (sidebar, sticky scene): use AnnotatedRegion
  directly to avoid bg-class conflict with Region default
- SoftScene before/after pseudo-elements now use CSS variable
  form, fixing incorrect background overrides from globals.css
  class-name pattern selectors
- MapList grid pattern converted to inline style for reliable
  CSS variable interpolation

Plan: mark Task 5 steps 1-3 and verification checklist done.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Captures the full vision: a design dictionary that combines
Style x Layout into previewable webs, expandable to a
component-level dictionary, with code/prompt copy later.

- Concept model: Style / Layout / Web / Component
- Token system architecture (StyleTokens via CSS variables)
- Route map with new /studio combine view
- 6-phase roadmap (approach C: token system first)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
8-phase plan: token foundation, CSS pipeline, layout renderer
tokenization, /studio combine view, route restructure, fill
88 styles, copy feature, component dictionary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…uppress warning

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…igration

Tasks 1-4: StyleTokens type with color/typography/shape/space/decoration/layout,
per-category defaults for all 10 categories, initial per-style overrides for 5
representative styles, tokens.color derived from palette in buildStyle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
organic-design, streetwear, editorial-design, glassmorphism, y2k,
maximalism, swiss-design — shape/typography/space/decoration tokens
set to make each visually distinct from its category default.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
All style tokens (color, typography, shape, space, decoration, layout)
emitted as --st-* CSS variables on .style-preset-root alongside
existing --style-* legacy vars. data-st-effect and data-st-density
attributes added for CSS targeting. useStyleTokens() hook added.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
.st-surface, .st-card, .st-display, .st-body, .st-accent utilities.
Effect layers for glow, grain, scanline, gradient, glitch keyed on
data-st-effect attribute. Density modifiers for tight/airy spacing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@pandaofwild
pandaofwild merged commit b55991c into main Jun 3, 2026
pandaofwild added a commit that referenced this pull request Jun 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant