Skip to content

feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackgranatowski merged 9 commits into from
Jun 17, 2026
Merged

feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9ecac6d
feat(layout): add .sf-cq and refactor .sf-equal to RAM pattern
claude Jun 17, 2026
8835d0e
fix(tokens,layout,macros): pre-freeze audit fixes — overflow fallback…
claude Jun 17, 2026
3ca5a27
fix(tokens): computed color mirrors resolve via -light tokens, not ha…
claude Jun 17, 2026
40e80d3
fix(tokens): remove @property registration for computed color tokens
claude Jun 17, 2026
4989a61
fix(tokens,themes): re-enable @property <color> for computed tokens v…
claude Jun 17, 2026
68217d9
fix(tests): add 11 -dark @property tokens to token-api snapshot
claude Jun 17, 2026
7e1e21b
fix(tokens,tests,docs): register -dark tokens as @property <color> an…
claude Jun 17, 2026
e60b0d9
fix(themes): re-declare surface and on-colour tokens in [data-theme="…
claude Jun 17, 2026
ee352be
fix(themes,tokens): add [data-theme="light"] scoped token re-declarat…
claude Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
522 changes: 453 additions & 69 deletions configurator/src/data/api-index.generated.json
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 24 additions & 11 deletions core/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,18 @@
.sf-container--wide { max-width: var(--sf-container-wide); }
.sf-container--full { max-width: var(--sf-container-full); }

/* -- Container query context --------------------------------
Lightweight CQ scope. Establishes container-type: inline-size
so anonymous @container queries on descendants respond to THIS
element's width — without the max-width and centering of
.sf-container. No visual styles.
Use when .sf-container is not available in the ancestor tree
and a CQ-dependent primitive needs a container to query.
---------------------------------------------------------- */
.sf-cq {
container-type: inline-size;
}

/* -- Stack ---------------------------------------------------
Flex column with even vertical spacing between children.
Override: style="--sf-stack-gap: 2rem"
Expand Down Expand Up @@ -505,22 +517,23 @@
.sf-grid-cols-3-1 { grid-template-columns: 3fr 1fr; }
}

/* -- Fixed columns ------------------------------------------
Fixed N-column grid. Column count NEVER collapses — unlike
.sf-grid-cols-N which stacks at narrow container widths.
Use when the layout must stay N columns at all widths; the
caller is responsible for overflow handling.
Override: style="--sf-equal-cols: 3"
/* -- Equal columns (intrinsically responsive) ----------------
RAM-pattern grid (Repeat, Auto-fit, Minmax). Columns wrap
automatically when they would shrink below --sf-equal-min-col.
No container ancestor required — intrinsically responsive.
Modifiers set the target min-col width for ~N equal columns
at typical container widths; exact count emerges from layout.
Override: style="--sf-equal-min-col: 14rem"
---------------------------------------------------------- */
.sf-equal {
display: grid;
grid-template-columns: repeat(var(--sf-equal-cols), 1fr);
grid-template-columns: repeat(auto-fit, minmax(min(var(--sf-equal-min-col), 100%), 1fr));
gap: var(--sf-equal-gap);
}
.sf-equal--2 { --sf-equal-cols: 2; }
.sf-equal--3 { --sf-equal-cols: 3; }
.sf-equal--4 { --sf-equal-cols: 4; }
.sf-equal--6 { --sf-equal-cols: 6; }
.sf-equal--2 { --sf-equal-min-col: var(--sf-equal-min-col-2); }
.sf-equal--3 { --sf-equal-min-col: var(--sf-equal-min-col-3); }
.sf-equal--4 { --sf-equal-min-col: var(--sf-equal-min-col-4); }
.sf-equal--6 { --sf-equal-min-col: var(--sf-equal-min-col-6); }

/* -- Content grid (breakout pattern) -------------------------
Full-width grid that lets items break out to breakout or full
Expand Down
4 changes: 2 additions & 2 deletions core/macros.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
.sf-prose hr { margin-block: var(--sf-prose-hr-margin); }
.sf-prose figure { margin-block: var(--sf-prose-figure-margin); }
.sf-prose figcaption { font-size: var(--sf-prose-figcaption-size); color: var(--sf-color-text--muted); margin-block-start: var(--sf-prose-list-gap); }
.sf-prose table { margin-block: var(--sf-prose-block-margin); display: block; overflow-inline: auto; inline-size: 100%; max-inline-size: 100%; }
.sf-prose table { margin-block: var(--sf-prose-block-margin); display: block; overflow-x: auto; overflow-inline: auto; inline-size: 100%; max-inline-size: 100%; }
.sf-prose :is(th, td) { padding: var(--sf-prose-table-pad); }
.sf-prose video { margin-block: var(--sf-prose-media-margin); border-radius: var(--sf-prose-media-radius); }

Expand All @@ -72,7 +72,7 @@
.sf-prose .sf-not-prose img { margin-block: 0; border-radius: 0; }
.sf-prose .sf-not-prose figure { margin-block: 0; }
.sf-prose .sf-not-prose figcaption { font-size: inherit; color: inherit; margin-block-start: 0; }
.sf-prose .sf-not-prose table { margin-block: 0; display: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
.sf-prose .sf-not-prose table { margin-block: 0; display: revert; overflow-x: revert; overflow-inline: revert; inline-size: revert; max-inline-size: revert; }
.sf-prose .sf-not-prose :is(th,td) { padding: revert; }
.sf-prose .sf-not-prose video { margin-block: 0; border-radius: 0; }

Expand Down
88 changes: 75 additions & 13 deletions core/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,24 +162,48 @@

@supports (color: oklch(from red l c h)) {

/* ── -dark source tokens — auto-computed from -light, user-overridable ── */
:root {
--sf-color-primary-dark: oklch(from var(--sf-color-primary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-secondary-dark: oklch(from var(--sf-color-secondary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-tertiary-dark: oklch(from var(--sf-color-tertiary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-action-dark: oklch(from var(--sf-color-action-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-neutral-dark: oklch(from var(--sf-color-neutral-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-base-dark: oklch(from var(--sf-color-base-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h);
--sf-color-success-dark: oklch(from var(--sf-color-success-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-warning-dark: oklch(from var(--sf-color-warning-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-error-dark: oklch(from var(--sf-color-error-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-info-dark: oklch(from var(--sf-color-info-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
--sf-color-danger-dark: oklch(from var(--sf-color-danger-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h);
}

/* ── [data-theme="dark"] — explicit dark values ──────────── */
[data-theme="dark"] {

/* Brand — dark formula or explicit -dark override */
--sf-color-primary: var(--sf-color-primary-dark, oklch(from var(--sf-color-primary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-secondary: var(--sf-color-secondary-dark, oklch(from var(--sf-color-secondary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-tertiary: var(--sf-color-tertiary-dark, oklch(from var(--sf-color-tertiary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-action: var(--sf-color-action-dark, oklch(from var(--sf-color-action-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-neutral: var(--sf-color-neutral-dark, oklch(from var(--sf-color-neutral-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-base: var(--sf-color-base-dark, oklch(from var(--sf-color-base-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h));
/* Brand — simple var reference; -dark tokens defined on :root above.
Override --sf-color-X-dark anywhere in the cascade to customise. */
--sf-color-primary: var(--sf-color-primary-dark);
--sf-color-secondary: var(--sf-color-secondary-dark);
--sf-color-tertiary: var(--sf-color-tertiary-dark);
--sf-color-action: var(--sf-color-action-dark);
--sf-color-neutral: var(--sf-color-neutral-dark);
--sf-color-base: var(--sf-color-base-dark);
--sf-color-surface: var(--sf-color-base);

/* Status — dark formula or explicit -dark override */
--sf-color-success: var(--sf-color-success-dark, oklch(from var(--sf-color-success-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-warning: var(--sf-color-warning-dark, oklch(from var(--sf-color-warning-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-error: var(--sf-color-error-dark, oklch(from var(--sf-color-error-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-info: var(--sf-color-info-dark, oklch(from var(--sf-color-info-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
--sf-color-danger: var(--sf-color-danger-dark, oklch(from var(--sf-color-danger-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h));
/* Surface scale — re-derive from dark --sf-color-base so scoped dark
sections are not stuck with the light-baked var() text from :root. */
--sf-color-bg: oklch(from var(--sf-color-base) calc(l + 0.02) c h);
--sf-color-inset: oklch(from var(--sf-color-base) calc(l - 0.02) c h);
--sf-color-raised: oklch(from var(--sf-color-base) calc(l + 0.04) c h);
--sf-color-overlay: oklch(from var(--sf-color-base) l c h / 0.9);
--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);

/* Status */
--sf-color-success: var(--sf-color-success-dark);
--sf-color-warning: var(--sf-color-warning-dark);
--sf-color-error: var(--sf-color-error-dark);
--sf-color-info: var(--sf-color-info-dark);
--sf-color-danger: var(--sf-color-danger-dark);

/* Text — dark formula (references --sf-color-neutral re-declared above) */
--sf-color-text: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h);
Expand Down Expand Up @@ -223,6 +247,14 @@
--sf-color-base: var(--sf-color-base-light);
--sf-color-surface: var(--sf-color-base);

/* Surface scale — re-derive from light --sf-color-base so scoped light
sections inside a dark root are not stuck with the dark-baked value. */
--sf-color-bg: oklch(from var(--sf-color-base) calc(l + 0.02) c h);
--sf-color-inset: oklch(from var(--sf-color-base) calc(l - 0.02) c h);
--sf-color-raised: oklch(from var(--sf-color-base) calc(l + 0.04) c h);
--sf-color-overlay: oklch(from var(--sf-color-base) l c h / 0.9);
--sf-color-inverse: oklch(from var(--sf-color-base) calc(1 - l) c h);

/* Status — explicit light values */
--sf-color-success: var(--sf-color-success-light);
--sf-color-warning: var(--sf-color-warning-light);
Expand Down Expand Up @@ -262,4 +294,34 @@

} /* end @supports (color: oklch(from red l c h)) */

/* On-colour text tokens need sign() in addition to relative-color syntax. */
@supports (color: oklch(from red l c h)) and (width: calc(1px * sign(1))) {
[data-theme="dark"] {
--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-error: oklch(from var(--sf-color-error) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
}
[data-theme="light"] {
--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-error: oklch(from var(--sf-color-error) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
--sf-color-text--on-inverse: oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0);
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

}
Loading