feat(figma-variables): Figma variables exported 2026-05-15 08:51 CET - #408
Conversation
Format: CSS variables Exported themes: 2 themes (light, dark) Base branch: master
|
Review changes with Changed Files
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughTwo generated CSS files export Figma design tokens as CSS custom properties for dark and light themes. Each file declares colour palettes, font weight tokens, and layout measures (borders, radii, sizes, spacing, text metrics, and durations) under ChangesDesign Token Exports
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
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
libs/ui/src/tokens/figma/light/variables.cssOops! Something went wrong! :( ESLint: 9.39.1 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by libs/ui/src/tokens/figma/dark/variables.cssOops! Something went wrong! :( ESLint: 9.39.1 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| --width-header-max: 0rem; | ||
| --width-numeric-input-lg: 2.75rem; | ||
| --width-numeric-input-md: 2.5rem; | ||
| --width-numeric-input-sm: 2.25rem; |
There was a problem hiding this comment.
WARNING: Duplicate CSS variable definition
The variable --text-xl is defined twice on consecutive lines. This could cause confusion and the second definition will override the first. Please remove the duplicate.
| --width-numeric-input-md: 2.5rem; | ||
| --width-numeric-input-sm: 2.25rem; | ||
| --width-product-card-image-max: 12rem; | ||
| --width-product-card-image-min: 8rem; |
There was a problem hiding this comment.
WARNING: Duplicate CSS variable definition
The variable --text-xs is defined twice on consecutive lines. This could cause confusion and the second definition will override the first. Please remove the duplicate.
Greptile SummaryThis PR adds two new Figma-exported CSS variable files — one for the dark theme and one for the light theme — each containing ~1 400 raw
Confidence Score: 3/5Safe to merge only after cleaning up the duplicate and misplaced declarations; as-is the files carry stale/misleading token entries that will create noise in every future diff. Both files have a border-width token placed inside the Colors section that is also redeclared in the correct Measures section — the first declaration is both structurally wrong and redundant. Six typographic scale tokens are also emitted twice consecutively, appearing to be Figma export artefacts. Both dark and light variables.css files need the duplicate --border-width-color-select on line 8 removed and the six consecutively-duplicated --text-* scale tokens de-duped. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
F[Figma Variables] -->|Export| D[figma/dark/variables.css]
F -->|Export| L[figma/light/variables.css]
D --> R1[root dark - Colors, Fonts, Measures, Spacing, Typography]
L --> R2[root light - Colors, Fonts, Measures, Spacing, Typography]
R1 -->|Reference| T[tokens/components]
R2 -->|Reference| T
T -->|theme static| TW[Tailwind v4 utility classes]
TW -->|tv slots| C[React Components]
Reviews (1): Last reviewed commit: "feat(figma-variables): Figma variables e..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| */ | ||
| :root { | ||
| /* Colors */ | ||
| --border-width-color-select: 0.13rem; |
There was a problem hiding this comment.
--border-width-color-select misplaced in Colors section and duplicated
This token appears on line 8 inside the /* Colors */ block and again at line 751 inside the /* Measures */ section (where it belongs). In CSS the second declaration silently overrides the first, so the value is technically correct, but the orphaned declaration in the Colors block is misleading and inconsistent with the rest of the file structure. The same issue exists in libs/ui/src/tokens/figma/light/variables.css (line 8 and line 751). The declaration on line 8 in both files should be removed.
| --text-2xl: 2.44rem; | ||
| --text-2xl: 2.44rem; |
There was a problem hiding this comment.
Several generic typographic scale tokens are emitted twice consecutively in both files: --text-2xl (lines 1222–1223), --text-lg (1288–1289), --text-md (1291–1292), --text-sm (1346–1347), --text-xl (1396–1397), and --text-xs (1398–1399). Since both copies carry the same value, the second silently shadows the first. The duplicates appear to be a Figma export artefact. Each duplicate declaration should be removed from both theme files to keep the output canonical and to avoid confusion during future diffs.
| --width-header-max: 0rem; | ||
| --width-numeric-input-lg: 2.75rem; | ||
| --width-numeric-input-md: 2.5rem; | ||
| --width-numeric-input-sm: 2.25rem; |
There was a problem hiding this comment.
WARNING: Duplicate CSS variable definition
The variable --text-xl is defined twice on consecutive lines. This could cause confusion and the second definition will override the first. Please remove the duplicate.
| --width-numeric-input-md: 2.5rem; | ||
| --width-numeric-input-sm: 2.25rem; | ||
| --width-product-card-image-max: 12rem; | ||
| --width-product-card-image-min: 8rem; |
There was a problem hiding this comment.
WARNING: Duplicate CSS variable definition
The variable --text-xs is defined twice on consecutive lines. This could cause confusion and the second definition will override the first. Please remove the duplicate.
Code Review SummaryStatus: 4 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
The variable The variable The variable The variable Files Reviewed (2 files)
Reviewed by nemotron-3-super-120b-a12b-20230311:free · 583,886 tokens |
1 participant
Format: CSS variables
Exported themes: 2 themes (light, dark)
Base branch: master
Summary by CodeRabbit