Skip to content

fix(tokens): correct raised surface level, on-inverse text, shadow glow, space-scale integration; clarify cq breakpoint tokens - #13

Merged
jackgranatowski merged 2 commits into
mainfrom
claude/fix-design-tokens-ZuqEf
May 18, 2026
Merged

fix(tokens): correct raised surface level, on-inverse text, shadow glow, space-scale integration; clarify cq breakpoint tokens#13
jackgranatowski merged 2 commits into
mainfrom
claude/fix-design-tokens-ZuqEf

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented May 18, 2026

Copy link
Copy Markdown
Contributor
  • --sf-color-raised: l+0.02 → l+0.04 so hierarchy well < surface < bg < raised is correct
  • --sf-color-text--on-inverse: var(--sf-color-text) → var(--sf-color-text--inverse) — dark text on dark inverse surface was unreadable in light mode
  • --sf-shadow-glow: replace color-mix(calc%) with oklch relative color syntax — calc() inside color-mix() percentage is not guaranteed by spec across browsers
  • --sf-space-*: wrap fluid clamp() in calc(... * var(--sf-space-scale)) — makes space-scale a working multiplier like radius-scale and motion-scale
  • --sf-cq-*: add comment explaining custom properties cannot be used in @container/@media queries; values are JS-readable reference constants

https://claude.ai/code/session_01EwbavhVkyG2whvrf376rei

Summary by CodeRabbit

  • Style

    • Updated design tokens: adjusted raised surface color, on-inverse text color, refined shadow glow (including alpha computation), and made spacing tokens fluid via the spacing scale for improved color consistency, surface rendering, and layout flexibility.
  • Documentation

    • Removed container-query breakpoint variables and clarified container query usage and recommended approaches.

Review Change Stack

…ow, space-scale integration; clarify cq breakpoint tokens

- --sf-color-raised: l+0.02 → l+0.04 so hierarchy well < surface < bg < raised is correct
- --sf-color-text--on-inverse: var(--sf-color-text) → var(--sf-color-text--inverse) — dark text on dark inverse surface was unreadable in light mode
- --sf-shadow-glow: replace color-mix(calc%) with oklch relative color syntax — calc() inside color-mix() percentage is not guaranteed by spec across browsers
- --sf-space-*: wrap fluid clamp() in calc(... * var(--sf-space-scale)) — makes space-scale a working multiplier like radius-scale and motion-scale
- --sf-cq-*: add comment explaining custom properties cannot be used in @container/@media queries; values are JS-readable reference constants

https://claude.ai/code/session_01EwbavhVkyG2whvrf376rei
@coderabbitai

coderabbitai Bot commented May 18, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: fa4dc1df-be09-46eb-b469-ad25fc8213ee

📥 Commits

Reviewing files that changed from the base of the PR and between 7ca608c and e5b16cd.

⛔ Files ignored due to path filters (1)
  • dist/slashed.essential.css is excluded by !**/dist/**
📒 Files selected for processing (1)
  • core/tokens.css

📝 Walkthrough

Walkthrough

Updated core/tokens.css: color tokens (--sf-color-raised, --sf-color-text--on-inverse, --sf-shadow-glow) changed their computations; fluid spacing tokens now multiply their clamp() results by var(--sf-space-scale); container query breakpoint custom properties were removed.

Changes

Design Token Updates

Layer / File(s) Summary
Color and shadow token adjustments
core/tokens.css
--sf-color-raised luminance offset adjusted; --sf-color-text--on-inverse now references --sf-color-text--inverse; --sf-shadow-glow rewritten from color-mix() to oklch() with updated alpha math.
Fluid spacing with dynamic scaling
core/tokens.css
Fluid spacing tokens (--sf-space-2xs--sf-space-4xl) now multiply their clamp() results by var(--sf-space-scale).
Remove container query breakpoint declarations
core/tokens.css
Container query breakpoint block and --sf-cq-* custom properties were removed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#7: Related core/tokens.css theming/token rework using oklch() for color and shadow semantics.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title comprehensively summarizes all main changes: corrected color tokens (raised, on-inverse, glow), space-scale integration, and clarification of cq breakpoint tokens.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/fix-design-tokens-ZuqEf

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


Comment @coderabbitai help to get the list of available commands and usage tips.

Custom properties cannot be used in @container/@media queries, and
nothing in the codebase reads them. layout.css hardcodes the same
values directly where needed.

https://claude.ai/code/session_01EwbavhVkyG2whvrf376rei
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants