Skip to content

fix(lumlocker): scope to 4 brand colors, fix section-theme bypass #335

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 6 commits into from
Jun 16, 2026
Merged

fix(lumlocker): scope to 4 brand colors, fix section-theme bypass #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
866a9a9
fix(lumlocker): scope to 4 brand colors, fix section-theme bypass
claude Jun 16, 2026
6881695
fix(bento): remove redundant .sf-bento--3
claude Jun 16, 2026
8e42ead
feat(bento): default 4 cols, add child span modifiers (School 1)
claude Jun 16, 2026
249469f
fix(ci): sync docs and registry with bento API changes
claude Jun 16, 2026
93c4e11
fix(ci): sync configurator api-index.generated.json
claude Jun 16, 2026
2b80999
fix(docs): update sf-grid-cols-1 description to reflect no container …
claude Jun 16, 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
6 changes: 3 additions & 3 deletions configurator/src/data/api-index.generated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"_sync": {
"generatedBy": "configurator/scripts/sync-api.mjs",
"source": "docs/api-index.json",
"tokensHash": "e5e711cd49af",
"tokensHash": "68fb960217b8",
"bundles": [
"essential",
"full",
Expand Down Expand Up @@ -565,7 +565,7 @@
"group": "Bento grid",
"description": "Configuration tokens for the bento-grid layout primitive.",
"note": "Default column count for the bento grid.",
"value": "3",
"value": "4",
"aliasOf": null,
"registered": false,
"syntax": null,
Expand Down Expand Up @@ -12461,7 +12461,7 @@
"namespace": "lumlocker",
"category": "Core tokens",
"group": "LumLocker",
"description": "OKLCH L value used by the :root[data-lumlocker] override in core/themes.css. Locks all 5 brand colors (primary, secondary, tertiary, action, neutral) to one shared lightness while keeping their individual hue and chroma. Base is excluded — it must remain near-white in light…",
"description": "OKLCH L value used by the :root[data-lumlocker] override in core/themes.css. Locks the 4 brand colors (primary, secondary, tertiary, action) to one shared lightness while keeping their individual hue and chroma. Neutral and base are excluded — neutral is a desaturated grey…",
"note": "",
"value": "0.65",
"aliasOf": null,
Expand Down
47 changes: 43 additions & 4 deletions core/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,18 @@
min-height: 100dvh;
}

/* -- Single-column grid --------------------------------------
Plain single-column grid. No container context — it never
needs CQ breakpoints (there's only one column). Use when you
want consistent gap spacing without affecting container queries
on child elements.
---------------------------------------------------------- */

.sf-grid-cols-1 {
display: grid;
gap: var(--sf-grid-gap);
}

/* -- Fixed column grids (container-query responsive) ---------
Responsive fixed-column grids with no media queries.

Expand All @@ -454,7 +466,7 @@
Wrap in .sf-container (or any element with container-type: inline-size).
---------------------------------------------------------- */

.sf-grid-cols-1, .sf-grid-cols-2, .sf-grid-cols-3, .sf-grid-cols-4, .sf-grid-cols-6 {
.sf-grid-cols-2, .sf-grid-cols-3, .sf-grid-cols-4, .sf-grid-cols-6 {
display: grid;
gap: var(--sf-grid-gap);
container: sf-grid / inline-size;
Expand Down Expand Up @@ -535,7 +547,23 @@

/* -- Bento grid ----------------------------------------------
Free-form grid with auto-flow dense, responsive via CQ.
Override: style="--sf-bento-cols: 4; --sf-bento-row: 12rem"
Default: 4 columns (4 divides evenly for 1+3, 2+2, 3+1, 2×2).
Override: style="--sf-bento-cols: 6; --sf-bento-row: 12rem"

Column modifiers (on container):
.sf-bento--2 → 2 columns
.sf-bento--3 → 3 columns
.sf-bento--6 → 6 columns

Row height modifiers (on container):
.sf-bento--compact → shorter rows
.sf-bento--tall → taller rows

Span modifiers (on children):
.sf-bento-wide → span 2 columns
.sf-bento-full → span all columns
.sf-bento-tall → span 2 rows
.sf-bento-featured → span 2 columns × 2 rows
---------------------------------------------------------- */

.sf-bento {
Expand All @@ -552,16 +580,27 @@
.sf-bento { grid-template-columns: 1fr; }
}

/* CQ breakpoints S/L — 30em / 48em. Cannot use var() inside @container per CSS spec. */
/* CQ breakpoint S — 30em–47.99em. 2 columns regardless of modifier. */
@container (min-width: 30em) and (max-width: 47.99em) {
.sf-bento { grid-template-columns: repeat(2, 1fr); }
}

/* Container column modifiers */
.sf-bento--2 { --sf-bento-cols: 2; }
.sf-bento--4 { --sf-bento-cols: 4; }
.sf-bento--3 { --sf-bento-cols: 3; }
.sf-bento--6 { --sf-bento-cols: 6; }

/* Container row height modifiers */
.sf-bento--compact { --sf-bento-row: var(--sf-bento-row-compact); }
.sf-bento--tall { --sf-bento-row: var(--sf-bento-row-tall); }
Comment on lines +588 to 595

@coderabbitai coderabbitai Bot Jun 16, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for references to the removed .sf-bento--4 modifier
rg -n 'sf-bento--4' docs/ tests/

Repository: codeslash-dev/SLASHED

Length of output: 1006

🏁 Script executed:

#!/bin/bash
# Read the specific lines in core/layout.css to verify the current state
sed -n '575,595p' core/layout.css

Repository: codeslash-dev/SLASHED

Length of output: 941

🏁 Script executed:

#!/bin/bash
# Search for all .sf-bento-- modifier definitions in the CSS file
rg -n 'sf-bento--' core/layout.css | head -20

Repository: codeslash-dev/SLASHED

Length of output: 562

Update documentation to remove .sf-bento--4 references.

The .sf-bento--4 modifier was removed from CSS (lines 582–584 now contain only --2, --3, --6), but multiple documentation files still list it as a supported modifier. Update the following to reflect the current set: docs/demo.html, docs/api-index.md, docs/classes.md, docs/api-index.json, docs/registry.json, and docs/test-coverage-3-layout.html. Since 3 columns is now the default, consumers explicitly using .sf-bento--4 should simply remove that class.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@core/layout.css` around lines 581 - 588, The `.sf-bento--4` column modifier
has been removed from the CSS in core/layout.css (now only supporting `--2`,
`--3`, and `--6`), but this modifier is still referenced in multiple
documentation and configuration files. Remove all references to the
`.sf-bento--4` modifier from docs/demo.html, docs/api-index.md, docs/classes.md,
docs/api-index.json, docs/registry.json, and docs/test-coverage-3-layout.html to
ensure documentation accurately reflects the current set of supported modifiers.


/* Child span modifiers — place on individual bento items.
grid-auto-flow: dense on the parent fills gaps automatically. */
.sf-bento-wide { grid-column: span 2; }
.sf-bento-full { grid-column: 1 / -1; }
.sf-bento-tall { grid-row: span 2; }
.sf-bento-featured { grid-column: span 2; grid-row: span 2; }

/* -- Subgrid -------------------------------------------------
A grid child that inherits its parent's tracks.
---------------------------------------------------------- */
Expand Down
48 changes: 35 additions & 13 deletions core/themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,17 @@
}

/* LumLocker — opt-in via [data-lumlocker] on :root.
Locks the 5 brand colors (primary, secondary, tertiary, action,
neutral) to one shared OKLCH L value (--sf-lumlocker,
default 0.65 in core/tokens.css), keeping each color's own hue
and chroma. Useful when a brand picker produces colors with
wildly different L values that look mismatched in weight.

Base is excluded by design — it is the source token for the
page-surface ladder, and locking it would distort the derived page
background and related surface levels.
Locks the 4 brand colors (primary, secondary, tertiary, action)
to one shared OKLCH L value (--sf-lumlocker, default 0.65 in
core/tokens.css), keeping each color's own hue and chroma.
Useful when a brand picker produces colors with wildly different
L values that look mismatched in weight.

Neutral is excluded by design — it is semantically a desaturated
grey, and forcing it to the same L as saturated brand colors would
make it appear chromatic and break its design role.
Base is also excluded — it is the source token for the page-surface
ladder, and locking it would distort derived backgrounds.

Default state: OFF. Without the attribute, every brand keeps its
own L. Add :root[data-lumlocker] (or set via JS) to enable.
Expand All @@ -83,6 +85,11 @@
The dark-side input falls back to -light when -dark isn't
explicitly set, so this works even without per-mode overrides.

Section-level [data-theme] fix: the combinator rules below
re-apply the lock inside nested [data-theme] subtrees, which
would otherwise bypass the :root-level locked value because
light-dark() resolves at declaration time, not inheritance time.

Requires CSS relative color syntax (Chrome 119+, Safari 16.4+,
Firefox 128+). Wrapped in @supports — unsupporting engines skip
the block silently; brand colors remain unmodified. */
Expand All @@ -104,10 +111,25 @@
oklch(from var(--sf-color-action-light) var(--sf-lumlocker) c h),
oklch(from var(--sf-color-action-dark, var(--sf-color-action-light)) var(--sf-lumlocker) c h)
);
--sf-color-neutral: light-dark(
oklch(from var(--sf-color-neutral-light) var(--sf-lumlocker) c h),
oklch(from var(--sf-color-neutral-dark, var(--sf-color-neutral-light)) var(--sf-lumlocker) c h)
);
}

/* Re-apply lock inside section-level [data-theme] subtrees.
The section re-theme block above (slashed.themes @supports) sets
brand colors from source tokens directly, bypassing the lumlocked
value on :root. These higher-specificity rules (2 attr selectors)
restore the lock for any [data-theme] descendant when lumlocker is
active. The -dark token falls back to -light if not set. */
:root[data-lumlocker] [data-theme="dark"] {
--sf-color-primary: oklch(from var(--sf-color-primary-dark, var(--sf-color-primary-light)) var(--sf-lumlocker) c h);
--sf-color-secondary: oklch(from var(--sf-color-secondary-dark, var(--sf-color-secondary-light)) var(--sf-lumlocker) c h);
--sf-color-tertiary: oklch(from var(--sf-color-tertiary-dark, var(--sf-color-tertiary-light)) var(--sf-lumlocker) c h);
--sf-color-action: oklch(from var(--sf-color-action-dark, var(--sf-color-action-light)) var(--sf-lumlocker) c h);
}
:root[data-lumlocker] [data-theme="light"] {
--sf-color-primary: oklch(from var(--sf-color-primary-light) var(--sf-lumlocker) c h);
--sf-color-secondary: oklch(from var(--sf-color-secondary-light) var(--sf-lumlocker) c h);
--sf-color-tertiary: oklch(from var(--sf-color-tertiary-light) var(--sf-lumlocker) c h);
--sf-color-action: oklch(from var(--sf-color-action-light) var(--sf-lumlocker) c h);
}
} /* end @supports (color: oklch(from red l c h)) */

Expand Down
9 changes: 5 additions & 4 deletions core/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,10 +316,11 @@
/* ----------------------------------------------------------
LumLocker — OKLCH L value used by the
:root[data-lumlocker] override in core/themes.css.
Locks all 5 brand colors (primary, secondary, tertiary,
action, neutral) to one shared lightness while keeping their
individual hue and chroma. Base is excluded — it must remain
near-white in light mode for the page background.
Locks the 4 brand colors (primary, secondary, tertiary, action)
to one shared lightness while keeping their individual hue and
chroma. Neutral and base are excluded — neutral is a desaturated
grey (locking it to a brand L would make it chromatic) and base
must remain near-white in light mode for the page background.
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Override to change the locked lightness:
:root { --sf-lumlocker: 0.55 }
---------------------------------------------------------- */
Expand Down
2 changes: 1 addition & 1 deletion core/tokens.layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
/* ----------------------------------------------------------
Bento grid
---------------------------------------------------------- */
--sf-bento-cols-default: 3;
--sf-bento-cols-default: 4;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
--sf-bento-row-default: 10rem;
--sf-bento-row-compact: 6rem;
--sf-bento-row-tall: 16rem;
Expand Down
2 changes: 1 addition & 1 deletion dist/badge-essential.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"schemaVersion": 1,
"label": "essential",
"message": "15.7 kB gzip",
"message": "54.9 kB gzip",
"color": "brightgreen",
"namedLogo": "css3"
}
2 changes: 1 addition & 1 deletion dist/badge-optimal.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"schemaVersion": 1,
"label": "optimal",
"message": "19.5 kB gzip",
"message": "65.8 kB gzip",
"color": "brightgreen",
"namedLogo": "css3"
}
Loading