Consolidate example CSS files into single customize-example.css - #617
Conversation
.theme-transition (optional/theme-example.css) was an unbundled, example-only helper (bundles: []) that never shipped in any dist bundle — the full-API audit had already flagged its demo tile as inert (finding F4). The real, shipped API is .sf-theme-transition (core/themes.css), which is more complete (transitions all registered color tokens, tuned by --sf-theme-transition-duration, respects prefers-reduced-motion). Drop the dead example and point docs at the real helper; regenerate docs/registry/configurator artifacts.
Consolidate config-example.css, theme-example.css, and the never-filled overrides-example.css stub into a single optional/customize-example.css. It carries both @layer blocks (slashed.themes for brand tokens/fluid engine/dark-mode/multi-brand, slashed.overrides for real element/class/ third-party/opt-in override examples — the old overrides-example.css had only section-header comments, no actual code). Update every doc and script reference accordingly; regenerate docs/registry/configurator artifacts.
|
Warning Review limit reached
Next review available in: 28 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (14)
📝 WalkthroughWalkthroughThe separate theme, configuration, and override examples were replaced by ChangesTheme customization consolidation
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR consolidates three separate optional example CSS files (
Confidence Score: 5/5Safe to merge — the framework bundles are untouched; only the unbundled example file and docs are affected. The consolidation is mechanically clean: all three source files are faithfully folded into the new file, every registry entry, count, and documentation link was updated in lock-step, and the scripts that scan for framework classes correctly exclude the new example file. The only references still naming the old files are CHANGELOG.md (historical record, expected) and analysis/gap-analysis.md (explicitly marked as a frozen one-off snapshot). No functional framework CSS was changed. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
subgraph Before
A[optional/theme-example.css
slashed.themes
rebrand + dark-mode + .theme-transition]
B[optional/config-example.css
slashed.themes
fluid engine + scale multipliers]
C[optional/overrides-example.css
slashed.overrides
escape-hatch stubs]
end
subgraph After
D[optional/customize-example.css
slashed.themes + slashed.overrides
Sections 1-6: brand tokens, fluid engine,
dark-mode, multi-brand
Sections 7-12: override examples]
end
subgraph Superseded
E[.theme-transition
removed from all registries]
F[.sf-theme-transition
in core/themes.css
bundled opt-in helper]
end
A -->|merged| D
B -->|merged| D
C -->|merged| D
A -.->|class removed| E
E -.->|superseded by| F
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
subgraph Before
A[optional/theme-example.css
slashed.themes
rebrand + dark-mode + .theme-transition]
B[optional/config-example.css
slashed.themes
fluid engine + scale multipliers]
C[optional/overrides-example.css
slashed.overrides
escape-hatch stubs]
end
subgraph After
D[optional/customize-example.css
slashed.themes + slashed.overrides
Sections 1-6: brand tokens, fluid engine,
dark-mode, multi-brand
Sections 7-12: override examples]
end
subgraph Superseded
E[.theme-transition
removed from all registries]
F[.sf-theme-transition
in core/themes.css
bundled opt-in helper]
end
A -->|merged| D
B -->|merged| D
C -->|merged| D
A -.->|class removed| E
E -.->|superseded by| F
Reviews (1): Last reviewed commit: "chore(optional): merge config/theme/over..." | Re-trigger Greptile |
…hild) Same word, different scope: --tall/--compact resize every row in the grid, -tall/-wide/-full/-featured resize a single child item. Document the distinction in docs/layout.md and add an inline comment at the child-modifier definitions in core/layout.css so it's not missed at either read site. No class renamed — public API unchanged.
…--row-tall The container-level row-height modifiers collided visually with the unrelated child modifier .sf-bento-tall (spans one item over 2 rows) — same word, one dash apart. Rename the container modifiers to match the --sf-bento-row-compact/-tall tokens they already set, so the two modifier families read distinctly. Child span classes (.sf-bento-wide/-full/-tall/-featured) are unchanged. See docs/migration.md.
full.min.css was already at the 22kB edge; the .sf-bento--row-compact/ --row-tall rename (f90961d) added just enough bytes to tip it over in CI (22.0029kB measured there vs 21.99kB locally — cross-environment gzip variance at the margin). Small, documented headroom bump, consistent with how this budget has been adjusted before.
2 participants
Summary
Consolidates three separate example CSS files (
theme-example.css,config-example.css, andoverrides-example.css) into a single, comprehensivecustomize-example.cssstarter file. This reduces cognitive load for users by providing one well-organized reference for all customization patterns (brand tokens, fluid engine config, dark mode, multi-brand theming, and override escape hatches) rather than requiring them to juggle three separate files.The new file uses numbered sections and detailed comments to guide users through each customization layer, from basic brand colors through advanced overrides. Removes the
.theme-transitionhelper class (now superseded by the.sf-theme-transitionopt-in pattern incore/themes.css).Type
Changes
optional/customize-example.css— unified copy-and-customize starter combining all three previous example files with improved organization and documentationoptional/theme-example.css,optional/config-example.css,optional/overrides-example.css.theme-transitionclass (superseded by.sf-theme-transitionin core)docs/theming.md,docs/architecture.md,docs/motion.md,user-manual/colors.md, anddocs/llm-guide.mdto point to the new consolidated filedocs/api-index.json,docs/api-index.md,docs/registry.json,configurator/src/data/classes.generated.json,scripts/gen-class-reference.js,scripts/lib/api-index/extract.js,scripts/registry-sources.js) to reflect removal of theme-example category and.theme-transitionclassChecklist
npm run lint:csspassesnpm run buildrebuilds generated artifactsnpm run check:registry,npm run audit:check)docs/llm-guide.mdreferences updated)Notes
This is a pure consolidation with no functional changes to the framework itself. The
.theme-transitionclass removal is non-breaking since it was an optional example helper; users should migrate to the.sf-theme-transitionpattern documented incore/themes.cssanddocs/motion.md.https://claude.ai/code/session_01GpaNFRtJE2BKNW457w3cVa
Summary by CodeRabbit
New Features
customize-example.csstemplate combining theme settings and customization examples, including dark mode and brand-specific overrides.Documentation
Cleanup