diff --git a/.changeset/fiery-emus-agree.md b/.changeset/fiery-emus-agree.md new file mode 100644 index 000000000..810a562b6 --- /dev/null +++ b/.changeset/fiery-emus-agree.md @@ -0,0 +1,5 @@ +--- +'@fuzdev/fuz_css': patch +--- + +fix: bug with interpreter disallowing class names matching modifiers diff --git a/.changeset/rare-cars-prove.md b/.changeset/rare-cars-prove.md new file mode 100644 index 000000000..7b378c94a --- /dev/null +++ b/.changeset/rare-cars-prove.md @@ -0,0 +1,5 @@ +--- +'@fuzdev/fuz_css': minor +--- + +feat: replace `.compact` with `.sm` and add `.xs-.xl` diff --git a/CLAUDE.md b/CLAUDE.md index 507323c08..25f47785c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -114,8 +114,8 @@ See `GenFuzCssOptions` and `VitePluginFuzCssOptions` types for configuration. - **Token classes** - Map to style variables: `p_md`, `color_a_50`, `gap_lg` - **Composite classes** - Multi-property shortcuts: `box`, `column`, `row`, `ellipsis`, `pixelated`, `circular`, `selectable`, `clickable`, `pane`, - `panel`, `compact` (consider `.loose`/`.spacious` counterpart), `icon_button`, - `plain`, `menuitem`, `chevron`, `chip` + `panel`, `sm` (tighter sizing), `md` (default sizing / cascade reset), + `icon_button`, `plain`, `menuitem`, `chevron`, `chip` - **Literal classes** - CSS `property:value` syntax: `display:flex`, `opacity:50%` All class types support modifiers: responsive (`md:`), state (`hover:`), diff --git a/src/lib/css_class_composites.ts b/src/lib/css_class_composites.ts index fa0accd33..f464408b3 100644 --- a/src/lib/css_class_composites.ts +++ b/src/lib/css_class_composites.ts @@ -108,8 +108,7 @@ export const css_class_composites: Record> => { * Custom properties (--*) always return true. * * @param property - the CSS property name to validate - * @param properties - Set of valid CSS properties from `load_css_properties()`. + * @param properties - Set of valid CSS properties from `load_css_properties()` * Pass `null` to skip validation. * @returns true if valid CSS property or custom property */ @@ -140,7 +140,7 @@ const find_closest_match = (typo: string, candidates: Iterable): string * Suggests a correct property name for a typo using Levenshtein distance. * * @param typo - the mistyped property name - * @param properties - Set of valid CSS properties from `load_css_properties()`. + * @param properties - Set of valid CSS properties from `load_css_properties()` * Pass `null` to skip suggestions. * @returns the suggested property or null if no close match (Levenshtein distance > 2) */ @@ -444,7 +444,7 @@ export const extract_and_validate_modifiers = ( * Parses a CSS-literal class name into its components. * * @param class_name - the class name to parse - * @param css_properties - Set of valid CSS properties from `load_css_properties()`. + * @param css_properties - Set of valid CSS properties from `load_css_properties()` * Pass `null` to skip property validation. * @returns `CssLiteralParseResult` with parsed data or error */ @@ -594,7 +594,7 @@ export interface CssLiteralOutput { * * @param class_name - the class name to interpret * @param escaped_class_name - the CSS-escaped version of the class name - * @param css_properties - Set of valid CSS properties from `load_css_properties()`. + * @param css_properties - Set of valid CSS properties from `load_css_properties()` * Pass `null` to skip property validation. * @returns result with output and warnings on success, or error on failure */ diff --git a/src/lib/style.css b/src/lib/style.css index a0fa389d7..942b12526 100644 --- a/src/lib/style.css +++ b/src/lib/style.css @@ -149,7 +149,7 @@ Respects `hidden="until-found"` for find-in-page support. } /* heading margins use calc multipliers on --flow_margin so they scale proportionally - with .compact while preserving hierarchy. multipliers are derived from the space + with .sm while preserving hierarchy. multipliers are derived from the space scale (sqrt(GR) ≈ 1.272 per step). margin-top is 2 steps above margin-bottom. */ :where(h1:not(.unstyled)) { --font_size: var(--font_size_xl3); @@ -255,7 +255,7 @@ currently can break based on DOM structure - https://developer.mozilla.org/en-US -webkit-hyphens: none; hyphens: none; color: var(--text_color); - background-color: var(--fg_10); + background-color: var(--fg_05); padding: 0 var(--space_xs2); border-radius: var(--border_radius, var(--border_radius_xs)); } @@ -348,7 +348,7 @@ so for consistent visuals we opt to include no active state */ height: var(--input_height_sm); min-width: var(--input_height_sm); min-height: var(--input_height_sm); - --border_radius: var(--border_radius_xs); + border-radius: var(--border_radius, var(--border_radius_xs)); --input_padding_x: 0; --checkbox_content: var(--checkbox_content_empty, ''); } diff --git a/src/routes/docs/buttons/+page.svelte b/src/routes/docs/buttons/+page.svelte index 608dca167..5fea660ff 100644 --- a/src/routes/docs/buttons/+page.svelte +++ b/src/routes/docs/buttons/+page.svelte @@ -226,49 +226,49 @@ - - With .compact + + With .sm

- The .compact + The .sm composite class sizes things more tightly with smaller fonts, inputs, padding, border radii, and flow margins.

- compact`} /> + normal\n`} />
- +
-

.compact with .plain and .icon_button:

+

.sm with .plain and .icon_button:

+++\n\n\n\n`} + content={`\n\n\n\n`} />
- - - - + + + +
-

.compact with colors:

+

.sm with colors:

color_h\n\n`} + content={`\n\n`} />
- - - + + +

- .compact overrides custom properties, so children inherit compactness: + .sm overrides custom properties, so children inherit the sizing:

\n\t\n\t\n\t\n`} + content={`
\n\t\n\t\n\t\n
`} /> -
+
- +
diff --git a/src/routes/docs/chips/+page.svelte b/src/routes/docs/chips/+page.svelte index e5c2d72b1..d6c914c92 100644 --- a/src/routes/docs/chips/+page.svelte +++ b/src/routes/docs/chips/+page.svelte @@ -63,34 +63,35 @@ - - With .compact + + With .sm

- The .compact - composite class provides tighter sizing + The .sm + composite class applies tighter sizing with smaller fonts, inputs, padding, border radii, and flow margins.

- compact`} /> + normal\nsmall`} />
- compact normal + small
color_a\ncolor_b\ncolor_c`} + content={`normal\ncolor_a\ncolor_b\ncolor_c`} />
- color_a - color_b - color_c + normal + color_a + color_b + color_c

- .compact overrides custom properties, so children are compact too: + .sm overrides custom properties, so children inherit the sizing:

\n\tone\n\ttwo\n\tthree\n
`} + content={`
\n\tone\n\ttwo\n\tthree\n
`} /> -
+
one two diff --git a/src/routes/docs/classes/+page.svelte b/src/routes/docs/classes/+page.svelte index 71ae8d64e..6cce92f49 100644 --- a/src/routes/docs/classes/+page.svelte +++ b/src/routes/docs/classes/+page.svelte @@ -1055,7 +1055,8 @@ export const gen = gen_fuz_css({
  • .icon_button - icon button styling
  • .pixelated - crisp pixel-art rendering
  • .circular - 50% border-radius
    • -
  • .compact - tighter sizing, cascading to children
    • +
  • .sm - tighter sizing, cascading to children
    • +
  • .md - default sizing, cascade reset
  • .mb_flow - flow-aware margin-bottom
  • .mt_flow - flow-aware margin-top
    • diff --git a/src/routes/docs/colors/+page.svelte b/src/routes/docs/colors/+page.svelte index fb840a111..eeb4b00ab 100644 --- a/src/routes/docs/colors/+page.svelte +++ b/src/routes/docs/colors/+page.svelte @@ -26,13 +26,13 @@ 'primary', 'success', 'error/danger', - 'secondary/accent', - 'tertiary/highlight', - 'quaternary/muted', - 'quinary/decorative', - 'senary/caution', - 'septenary/info', - 'octonary/flourish', + 'accent/secondary', + 'highlight/tertiary', + 'muted/quaternary', + 'decorative/quinary', + 'caution/senary', + 'info/septenary', + 'flourish/octonary', ]; diff --git a/src/routes/docs/forms/+page.svelte b/src/routes/docs/forms/+page.svelte index b04785b39..5f1cc30a2 100644 --- a/src/routes/docs/forms/+page.svelte +++ b/src/routes/docs/forms/+page.svelte @@ -205,25 +205,25 @@ - - With .compact + + With .sm

    - The .compact + The .sm composite class provides tighter sizing with smaller fonts, inputs, padding, border radii, and flow margins. Apply directly or on a container to cascade to children.

    + content={`
    ...
    `} />
    -
    +
    - .compact + .sm
    `} + content={`
    \n\t

    small heading

    \n\t

    small paragraph

    \n\t

    small paragraph

    \n
    `} />
    -
    -

    compact

    -

    Paragraph in a compact container with tighter flow margins between elements.

    -

    Another paragraph showing the reduced spacing.

    +
    +

    small

    +

    Paragraph in a small container with tighter flow margins between elements.

    +

    Another paragraph with the reduced spacing.

    • list item one
    • list item two
    -

    normal

    +

    normal

    Paragraph in a normal container with default flow margins between elements.

    -

    Another paragraph showing the default spacing.

    +

    Another paragraph with the default spacing.

    • list item one
    • list item two
      • @@ -240,6 +241,36 @@
    + + + + Reset with .md + +

    + The .md + composite class resets sizing to the + defaults. Use it inside a sized container to restore normal sizing for a subtree. +

    + \n\t

    small text

    \n\t
    \n\t\t

    back to normal

    \n\t
    \n
    `} + /> +
    +
    +

    small region

    +

    Everything here is small.

    +
    +

    normal nested inside

    +

    + This region is back to default sizing despite the parent + having .sm. +

    +
    +
    +
    + Paragraph text currently doesn't respond to .sm, but should it? Headings? +