Skip to content

Fix layout utilities and dark mode color tokens #15

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 4 commits into from
May 18, 2026
Merged

Fix layout utilities and dark mode color tokens #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6a54d62
fix: CSS token bugs — dark mode visibility, cluster modifier, animati…
claude May 18, 2026
66df49a
fix(demo): sidebar width — remove flex:1 override, narrow nav to 12rem
claude May 18, 2026
5ef2e76
docs(base): note that both dark mode blocks must be kept in sync
claude May 18, 2026
eee251f
feat(tokens): auto-contrast on-color text + clamp robustness for cust…
claude May 18, 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
55 changes: 55 additions & 0 deletions core/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,31 @@
--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 — inverted direction for dark backgrounds, clamped for any neutral value */
--sf-color-text: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25), 1) c h);
--sf-color-text--secondary: oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1), 0.90) c h);
--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h);
--sf-color-text--disabled: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h);
--sf-color-text--inverse: oklch(from var(--sf-color-neutral) calc(l - 0.4) c h);
--sf-color-heading: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25), 1) c h);

/* Borders — adjusted for dark backgrounds, clamped for any neutral value */
--sf-color-border: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h);
--sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h);
--sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h);
--sf-color-border--disabled: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h);
--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / 0.15);

/* Shadow strength — more visible on dark surfaces */
--sf-shadow-strength: 0.25;

/* Status text — lightened for dark backgrounds, clamped */
--sf-status-success-text: oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-warning-text: oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h);
--sf-status-error-text: oklch(from var(--sf-color-error) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-info-text: oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-danger-text: var(--sf-status-error-text);
}
}

Expand All @@ -49,6 +74,11 @@
/* ----------------------------------------------------------
Dark mode — swap brand & status colors to -dark variants.
Works on :root (whole page) or any element (section-level).

NOTE: The derived semantic overrides (text, border, shadow,
status text) are duplicated in the @media block above.
CSS has no syntax to share declarations across a media
condition and a selector — keep both blocks in sync.
---------------------------------------------------------- */

[data-theme="dark"] {
Expand All @@ -64,6 +94,31 @@
--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 — inverted direction for dark backgrounds, clamped for any neutral value */
--sf-color-text: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25), 1) c h);
--sf-color-text--secondary: oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1), 0.90) c h);
--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h);
--sf-color-text--disabled: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h);
--sf-color-text--inverse: oklch(from var(--sf-color-neutral) calc(l - 0.4) c h);
--sf-color-heading: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25), 1) c h);

/* Borders — adjusted for dark backgrounds, clamped for any neutral value */
--sf-color-border: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h);
--sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h);
--sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h);
--sf-color-border--disabled: oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h);
--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / 0.15);

/* Shadow strength — more visible on dark surfaces */
--sf-shadow-strength: 0.25;

/* Status text — lightened for dark backgrounds, clamped */
--sf-status-success-text: oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-warning-text: oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h);
--sf-status-error-text: oklch(from var(--sf-color-error) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-info-text: oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h);
--sf-status-danger-text: var(--sf-status-error-text);
}

/* ----------------------------------------------------------
Expand Down
1 change: 1 addition & 0 deletions core/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
.sf-cluster--2xs { gap: var(--sf-space-2xs); }
.sf-cluster--xs { gap: var(--sf-space-xs); }
.sf-cluster--s { gap: var(--sf-space-s); }
.sf-cluster--m { gap: var(--sf-space-m); }
.sf-cluster--l { gap: var(--sf-space-l); }
.sf-cluster--xl { gap: var(--sf-space-xl); }

Expand Down
45 changes: 25 additions & 20 deletions core/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,41 +63,46 @@

/* ----------------------------------------------------------
Text — derived from --sf-color-neutral
clamp() ensures safe output for any neutral value.
---------------------------------------------------------- */
--sf-color-text: oklch(from var(--sf-color-neutral) calc(l - 0.4) c h);
--sf-color-text--secondary: oklch(from var(--sf-color-neutral) calc(l - 0.25) c h);
--sf-color-text: oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h);
--sf-color-text--secondary: oklch(from var(--sf-color-neutral) clamp(0.15, calc(l - 0.25), 0.45) c h);
--sf-color-text--muted: var(--sf-color-neutral);
--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) calc(l + 0.15) c h);
--sf-color-text--disabled: oklch(from var(--sf-color-neutral) calc(l + 0.25) c h);
--sf-color-text--placeholder: oklch(from var(--sf-color-neutral) clamp(0.45, calc(l + 0.15), 0.75) c h);
--sf-color-text--disabled: oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.25), 0.82) c h);
--sf-color-text--inverse: oklch(from var(--sf-color-neutral) calc(l + 0.4) c h);
--sf-color-heading: oklch(from var(--sf-color-neutral) calc(l - 0.4) c h);
--sf-color-heading: oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h);


/* ----------------------------------------------------------
Text-on-color — white or dark based on luminance
Text-on-color — auto white or dark based on source luminance.
sign(0.6 - l): +1 when dark bg (l<0.6) → light text (0.95),
-1 when light bg (l>0.6) → dark text (0.10).
Works automatically in dark mode: tokens reference the active
color which is already swapped to its -dark variant.
---------------------------------------------------------- */
--sf-color-text--on-primary: oklch(1 0 0);
--sf-color-text--on-secondary: oklch(0.97 0.005 260);
--sf-color-text--on-tertiary: oklch(1 0 0);
--sf-color-text--on-action: oklch(1 0 0);
--sf-color-text--on-neutral: oklch(1 0 0);
--sf-color-text--on-primary: oklch(from var(--sf-color-primary) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-secondary: oklch(from var(--sf-color-secondary) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-tertiary: oklch(from var(--sf-color-tertiary) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-action: oklch(from var(--sf-color-action) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-neutral: oklch(from var(--sf-color-neutral) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-base: var(--sf-color-text);
--sf-color-text--on-inverse: var(--sf-color-text--inverse);
--sf-color-text--on-success: oklch(1 0 0);
--sf-color-text--on-warning: oklch(0.2 0.02 70);
--sf-color-text--on-error: oklch(1 0 0);
--sf-color-text--on-info: oklch(1 0 0);
--sf-color-text--on-danger: oklch(1 0 0);
--sf-color-text--on-success: oklch(from var(--sf-color-success) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-warning: oklch(from var(--sf-color-warning) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-error: oklch(from var(--sf-color-error) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-info: oklch(from var(--sf-color-info) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);
--sf-color-text--on-danger: oklch(from var(--sf-color-danger) clamp(0.1, sign(0.6 - l) * 999, 0.95) 0 0);


/* ----------------------------------------------------------
Borders — derived from --sf-color-neutral
---------------------------------------------------------- */
--sf-color-border: oklch(from var(--sf-color-neutral) calc(l + 0.35) 0.005 h);
--sf-color-border--subtle: oklch(from var(--sf-color-neutral) calc(l + 0.4) 0.005 h);
--sf-color-border--strong: oklch(from var(--sf-color-neutral) calc(l + 0.1) 0.02 h);
--sf-color-border: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h);
--sf-color-border--subtle: oklch(from var(--sf-color-neutral) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h);
--sf-color-border--strong: oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h);
--sf-color-border--focus: var(--sf-color-action);
--sf-color-border--disabled: oklch(from var(--sf-color-neutral) calc(l + 0.35) 0.005 h);
--sf-color-border--disabled: oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h);
--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / 0.15);


Expand Down
Loading