feat(figma-variables): Figma variables exported 2026-06-16 09:00 CET - #453
feat(figma-variables): Figma variables exported 2026-06-16 09:00 CET#453Luko248 wants to merge 1 commit into
Conversation
Format: CSS variables Exported themes: 4 themes (light, dark, neo, neo-dark) Base branch: master
|
Review changes with Changed Files
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds two new Figma-exported CSS token files for Neo and Neo Dark themes, each defining ~1,792 lines of ChangesFigma Design Token Updates
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
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 |
Storybook A11y Report
LightNo a11y report JSON found for light. Storybook test-runner likely failed before reporting. DarkNo a11y report JSON found for dark. Storybook test-runner likely failed before reporting. |
Greptile SummaryThis PR adds two new Figma-exported theme files (
Confidence Score: 3/5The neo-dark and the existing light/dark files are safe; the neo light theme should not be merged as-is because primary buttons will render identically to danger/error elements. The neo light theme exports the entire primary colour scale with the same red/orange oklch values as the danger scale. Any component that relies on visual distinction between primary and danger — buttons, form borders, status indicators — will produce incorrect UI in that theme. The neo-dark theme is unaffected, and the light/dark changes are trivial timestamp updates. libs/ui/src/tokens/figma/neo/variables.css — the primary colour palette needs to be corrected in Figma and re-exported before this file is merged. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
F["Figma Variables Export\n2026-06-16T08:00"] --> L["light/variables.css\n(timestamp bump only)"]
F --> D["dark/variables.css\n(timestamp bump only)"]
F --> N["neo/variables.css\n(NEW — 1792 lines)"]
F --> ND["neo-dark/variables.css\n(NEW — 1792 lines)"]
N --> NP["--color-primary-100…900\nhue ≈ 17–28 (red/orange)"]
N --> NDP["--color-danger-100…900\nhue ≈ 17–28 (red/orange)"]
NP -. "IDENTICAL VALUES" .-> NDP
ND --> NDP2["--color-primary-100…900\nhue ≈ 17–28 (red/orange)"]
ND --> NDIP["--color-danger-100…900\nhue ≈ 17–28 (shifted)"]
NDP2 --"values differ"--> NDIP
style NP fill:#ff4444,color:#fff
style NDP fill:#ff4444,color:#fff
%%{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
F["Figma Variables Export\n2026-06-16T08:00"] --> L["light/variables.css\n(timestamp bump only)"]
F --> D["dark/variables.css\n(timestamp bump only)"]
F --> N["neo/variables.css\n(NEW — 1792 lines)"]
F --> ND["neo-dark/variables.css\n(NEW — 1792 lines)"]
N --> NP["--color-primary-100…900\nhue ≈ 17–28 (red/orange)"]
N --> NDP["--color-danger-100…900\nhue ≈ 17–28 (red/orange)"]
NP -. "IDENTICAL VALUES" .-> NDP
ND --> NDP2["--color-primary-100…900\nhue ≈ 17–28 (red/orange)"]
ND --> NDIP["--color-danger-100…900\nhue ≈ 17–28 (shifted)"]
NDP2 --"values differ"--> NDIP
style NP fill:#ff4444,color:#fff
style NDP fill:#ff4444,color:#fff
Reviews (1): Last reviewed commit: "feat(figma-variables): Figma variables e..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.github.com/in/867647?s=60&v=4){kind=small}
| --color-rating-ring: var(--color-ring-default); | ||
| --color-ring: var(--default-ring-color); | ||
| --color-ring-default: var(--color-black); | ||
| --color-search-form-bg-base: var(--color-form-control-bg); | ||
| --color-search-form-bg-disabled: var(--color-bg-disabled); | ||
| --color-search-form-bg-focus: var(--color-form-control-bg); | ||
| --color-search-form-border-base: var(--color-form-control-border); | ||
| --color-search-form-border-disabled: var(--color-border-disabled); | ||
| --color-search-form-border-focus: var(--color-input-border-focus); |
There was a problem hiding this comment.
Every value in --color-primary-100 through --color-primary-900 is identical to --color-danger-100 through --color-danger-900 (all in the red/orange hue range, ~17–28 in oklch). In the neo light theme this means primary buttons, active states, and any component that visually distinguishes primary from danger will render identically — primary CTAs will appear as solid red, indistinguishable from error indicators.
Compare the neo primary palette to the existing light/variables.css where primaries use hue ≈ 250–265 (blue). The neo-dark counterpart file does NOT share this issue — its primary palette is shifted correctly. This looks like the wrong colour scale was bound to the primary alias in Figma before export.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with 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.
Inline comments:
In `@libs/ui/src/tokens/figma/neo/variables.css`:
- Line 6: The token files libs/ui/src/tokens/figma/neo/variables.css (line 6)
and libs/ui/src/tokens/figma/neo-dark/variables.css (line 6) are currently
exporting flat :root dumps with variables that use `-bg`, `-fg`, and `-border`
suffixes. Replace the flat :root structure with `@theme` static declarations and
implement a two-layer token system: create a reference layer with base token
variables (without the `-bg`/`-fg`/`-border` suffixes) and a derived layer that
consumes the reference layer and applies the appropriate `-bg`, `-fg`, `-border`
suffixes to the exported variables. This ensures tokens follow the established
pipeline and maintain the proper semantic separation between reference and
derived token layers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e90da92f-b5ad-425c-aac7-cdc99d111539
📒 Files selected for processing (4)
libs/ui/src/tokens/figma/dark/variables.csslibs/ui/src/tokens/figma/light/variables.csslibs/ui/src/tokens/figma/neo-dark/variables.csslibs/ui/src/tokens/figma/neo/variables.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: storybook-a11y / storybook-a11y
- GitHub Check: main
- GitHub Check: Greptile Review
- GitHub Check: Kilo Code Review
- GitHub Check: Analyze (javascript-typescript)
🧰 Additional context used
📓 Path-based instructions (2)
libs/ui/src/tokens/**/*.css
📄 CodeRabbit inference engine (libs/ui/AGENTS.md)
libs/ui/src/tokens/**/*.css: Use@themestatic for tokens in CSS files
Implement two-layer tokens (reference layer → derived layer) with reference layer omitting-bg/-fg/-borderand derived layer requiring these suffixes
Token naming rules: use prefixes like--color-,--spacing-,--padding-,--gap-,--text-,--font-weight-,--radius-,--border-width-,--shadow-,--opacity-; no abbreviations in component names
Files:
libs/ui/src/tokens/figma/dark/variables.csslibs/ui/src/tokens/figma/light/variables.csslibs/ui/src/tokens/figma/neo/variables.csslibs/ui/src/tokens/figma/neo-dark/variables.css
libs/**
📄 CodeRabbit inference engine (AGENTS.md)
Use RSLib for building libraries in the monorepo
Files:
libs/ui/src/tokens/figma/dark/variables.csslibs/ui/src/tokens/figma/light/variables.csslibs/ui/src/tokens/figma/neo/variables.csslibs/ui/src/tokens/figma/neo-dark/variables.css
🧠 Learnings (1)
📚 Learning: 2026-06-12T05:11:49.945Z
Learnt from: Luko248
Repo: TechsioCZ/new-engine PR: 439
File: libs/ui/src/tokens/figma/dark/variables.css:1727-1729
Timestamp: 2026-06-12T05:11:49.945Z
Learning: In the Figma-generated token CSS variable files (e.g., dark/light/merged under `libs/ui/src/tokens/figma/**/variables.css`), treat the `--text-*-min` and `--text-*-max` CSS custom properties (like `--text-sm-min`/`--text-sm-max`) as reserved placeholders for a future fluid `clamp()` implementation. They are not consumed at runtime right now, so an inverted min/max does not affect rendering short-term, but the scale contract must still be kept correct for future wiring: ensure `min <= base <= max` (where `base` is the corresponding `--text-*-base` value) to avoid breaking behavior when clamp-based fluid typography is enabled.
Applied to files:
libs/ui/src/tokens/figma/dark/variables.csslibs/ui/src/tokens/figma/light/variables.csslibs/ui/src/tokens/figma/neo/variables.csslibs/ui/src/tokens/figma/neo-dark/variables.css
🔇 Additional comments (3)
libs/ui/src/tokens/figma/neo/variables.css (1)
1584-1590: Unable to verify text scale token definitions due to repository access constraints.I was unable to access the repository to confirm whether base tokens
--text-3xland--text-4xlexist in either CSS file. The concern raised—that--text-3xl-min/maxand--text-4xl-min/maxare defined without corresponding base tokens, violating the expectedmin ≤ base ≤ maxcontract for futureclamp()implementations—cannot be confirmed or refuted without direct inspection of the files.Please verify manually whether:
--text-3xland--text-4xlbase tokens exist anywhere in the files- The pattern holds consistently across all text scale tiers (1xl, 2xl, 3xl, 4xl)
- This aligns with the intended token design for fluid typography
libs/ui/src/tokens/figma/dark/variables.css (1)
3-3: LGTM!libs/ui/src/tokens/figma/light/variables.css (1)
3-3: LGTM!
| * Exported at: 2026-06-16T08:00:16.918Z | ||
| * Format: Raw CSS variables grouped by kind | ||
| */ | ||
| :root { |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
Use @theme static and split the tokens into reference/derived layers.
These exports are flat :root dumps, but libs/ui/src/tokens/**/*.css is supposed to publish tokens through @theme static with a reference layer feeding a derived layer. As written, the files bypass that pipeline and flatten the -bg/-fg/-border contract into global variables.
As per coding guidelines: libs/ui/src/tokens/**/*.css → use @theme static; implement two-layer tokens (reference layer omitting -bg/-fg/-border, derived layer requiring these suffixes).
📍 Affects 2 files
libs/ui/src/tokens/figma/neo/variables.css#L6-L6(this comment)libs/ui/src/tokens/figma/neo-dark/variables.css#L6-L6
🤖 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 `@libs/ui/src/tokens/figma/neo/variables.css` at line 6, The token files
libs/ui/src/tokens/figma/neo/variables.css (line 6) and
libs/ui/src/tokens/figma/neo-dark/variables.css (line 6) are currently exporting
flat :root dumps with variables that use `-bg`, `-fg`, and `-border` suffixes.
Replace the flat :root structure with `@theme` static declarations and implement a
two-layer token system: create a reference layer with base token variables
(without the `-bg`/`-fg`/`-border` suffixes) and a derived layer that consumes
the reference layer and applies the appropriate `-bg`, `-fg`, `-border` suffixes
to the exported variables. This ensures tokens follow the established pipeline
and maintain the proper semantic separation between reference and derived token
layers.
Source: Coding guidelines
Code Review SummaryStatus: 4 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Other Observations (not in diff)These are auto-generated Figma export files. The forward references are technically valid CSS (custom properties can reference others later in the cascade) but represent poor code organization. Consider fixing the export pipeline to define variables before they are referenced. Files Reviewed (4)
Reviewed by laguna-m.1-20260312:free · 2,421,352 tokens |
![kilo-code-bot[bot]](https://avatars.github.com/in/2193792?s=60&v=4){kind=small}
| --color-bg-secondary-base: var(--color-secondary-500); | ||
| --color-bg-secondary-hover: oklch(0.881 0.181 94.02); | ||
| --color-bg-success: var(--color-success-300); | ||
| --color-bg-tertiary-active: oklch(0.769 0.142 7.776); |
There was a problem hiding this comment.
WARNING: Forward reference - --color-bg-success references --color-success-300 which is defined later in the file (line 740).
While technically valid CSS (custom properties can reference others later in the cascade), this indicates poor code organization and may cause confusion when reading the file. Consider reordering the export to define --color-success-300 before it's referenced.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| --color-link-fg-base: var(--color-link-base); | ||
| --color-link-fg-disabled: var(--color-fg-disabled); | ||
| --color-link-fg-hover: var(--color-link-hover); | ||
| --color-link-fg-visited: var(--color-link-visited); |
There was a problem hiding this comment.
WARNING: Forward references - --color-link-fg-hover and --color-link-fg-visited reference --color-link-hover and --color-link-visited which are defined after them (lines 380-381).
While technically valid CSS, this indicates poor code organization. Consider reordering the Figma export to define variables before they are referenced.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| --color-bg-secondary-base: var(--color-secondary-500); | ||
| --color-bg-secondary-hover: oklch(0.628 0.201 39.026); | ||
| --color-bg-success: var(--color-success-500); | ||
| --color-bg-tertiary-active: oklch(0.704 0.119 346.312); |
There was a problem hiding this comment.
WARNING: Forward reference - --color-bg-success references --color-success-500 which is defined later in the file (line 710).
While technically valid CSS (custom properties can reference others later in the cascade), this indicates poor code organization and may cause confusion when reading the file. Consider reordering the export to define --color-success-500 before it's referenced.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| --color-link-fg-base: var(--color-link-base); | ||
| --color-link-fg-disabled: var(--color-fg-disabled); | ||
| --color-link-fg-hover: var(--color-link-hover); | ||
| --color-link-fg-visited: var(--color-link-visited); |
There was a problem hiding this comment.
WARNING: Forward references - --color-link-fg-hover and --color-link-fg-visited reference --color-link-hover and --color-link-visited which are defined after them (lines 380-381).
While technically valid CSS, this indicates poor code organization. Consider reordering the Figma export to define variables before they are referenced.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
1 participant
Format: CSS variables
Exported themes: 4 themes (light, dark, neo, neo-dark)
Base branch: master
Summary by CodeRabbit
New Features
Chores