Skip to content

Commit dbdab11

Browse files
echobtechobt
committed
feat(design-tokens): align CSS design tokens with Figma design system
Update all CSS design tokens from legacy JetBrains/VS Code defaults to values extracted from the Figma design system (file 4hKtI49khKHjribAGpFUkW). Colors: - Background: #1e1e1e → #141415 - Surface/panel: #252526 → #1C1C1D - Border: #3c3c3c → #2E2F31 - Accent: #007acc → #B2FF22 - Text primary: #cccccc → #FCFCFC - Text secondary: #9d9d9d → #8C8D8F - Scrollbar thumb: #43454A → #3C3D40 - Scrollbar thumb hover: #5A5D63 → #4C4C4D Typography: - Primary font: Figtree → Inter (Figtree as fallback) - Base font-size: 13px → 14px - Text scale: base=14, lg=16, xl=20, 2xl=24, 3xl=32 Border radius: - sm: 6px → 8px (buttons) - md: 10px → 12px (panels) - lg: 12px → 16px (windows) Tailwind v4: - Add @theme block in index.css mapping Figma color tokens, radii, typography scale, and font families to Tailwind utility classes Files changed: - index.html: critical inline CSS for FOUC prevention - src/styles/index.css: Tailwind v4 @theme configuration - src/styles/design-tokens.css: legacy radius, typography, scrollbar - src/styles/cortex-tokens.css: font stack, scrollbar component tokens - src/styles/base.css: document base font, scrollbar styling - src/styles/scrollbar.css: scrollbar color tokens and selectors - src/styles/floating-panels.css: scrollbar thumb references - src/styles/layout.css: scrollbar thumb references - src/styles/animations.css: grid sash accent fallback
1 parent ac7f774 commit dbdab11

File tree

9 files changed

+107
-63
lines changed

9 files changed

+107
-63
lines changed

‎index.html‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@
1515
<link rel="stylesheet" href="/fonts/dm-sans.css">
1616
<link rel="stylesheet" href="/fonts/inter.css">
1717

18-
<!-- Critical CSS - Inline for instant first paint -->
18+
<!-- Critical CSS - Inline for instant first paint (Figma Design System) -->
1919
<style>
2020
:root {
21-
--background: #1e1e1e;
22-
--foreground: #cccccc;
23-
--text-primary: #cccccc;
24-
--text-secondary: #9d9d9d;
25-
--text-muted: #6d6d6d;
26-
--surface-base: #1e1e1e;
27-
--surface-card: #191a1c;
28-
--surface-panel: #252526;
29-
--surface-hover: #2a2d2e;
30-
--surface-active: #37373d;
31-
--accent: #007acc;
32-
--accent-hover: #1c8cd9;
33-
--border: #3c3c3c;
34-
--border-subtle: #2d2d2d;
21+
--background: #141415;
22+
--foreground: #FCFCFC;
23+
--text-primary: #FCFCFC;
24+
--text-secondary: #8C8D8F;
25+
--text-muted: #808080;
26+
--surface-base: #141415;
27+
--surface-card: #1C1C1D;
28+
--surface-panel: #1C1C1D;
29+
--surface-hover: #252628;
30+
--surface-active: #252628;
31+
--accent: #B2FF22;
32+
--accent-hover: #6C8A2C;
33+
--border: #2E2F31;
34+
--border-subtle: #2E2F31;
3535
}
3636

3737
* {
@@ -45,8 +45,8 @@
4545
padding: 0;
4646
background: var(--background) !important;
4747
color: var(--foreground) !important;
48-
font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
49-
font-size: 13px;
48+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
49+
font-size: 14px;
5050
line-height: 1.5;
5151
-webkit-font-smoothing: antialiased;
5252
-moz-osx-font-smoothing: grayscale;
@@ -100,26 +100,30 @@
100100

101101
/* Prevent FOUC */
102102
html {
103-
background-color: #1e1e1e;
103+
background-color: #141415;
104104
}
105105

106-
/* Scrollbar styling */
106+
/* Scrollbar styling (Figma custom scrollbar) */
107107
::-webkit-scrollbar {
108-
width: 10px;
109-
height: 10px;
108+
width: 8px;
109+
height: 8px;
110110
}
111111

112112
::-webkit-scrollbar-track {
113113
background: transparent;
114114
}
115115

116116
::-webkit-scrollbar-thumb {
117-
background: var(--border);
118-
border-radius: 5px;
117+
background: #3C3D40;
118+
border-radius: 4px;
119119
}
120120

121121
::-webkit-scrollbar-thumb:hover {
122-
background: var(--text-muted);
122+
background: #4C4C4D;
123+
}
124+
125+
::-webkit-scrollbar-corner {
126+
background: transparent;
123127
}
124128
</style>
125129
</head>

‎src/styles/animations.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -906,11 +906,11 @@
906906
}
907907

908908
.grid-sash:hover {
909-
background-color: var(--accent, #007acc);
909+
background-color: var(--accent, #B2FF22);
910910
}
911911

912912
.grid-sash[data-dragging="true"] {
913-
background-color: var(--accent, #007acc);
913+
background-color: var(--accent, #B2FF22);
914914
}
915915

916916
/* Grid cell entering animation */

‎src/styles/base.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ body,
6565
background: var(--cortex-bg-primary, #141415) !important;
6666
color: var(--cortex-text-primary, #FCFCFC) !important;
6767
font-family: var(--cortex-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
68-
font-size: 13px;
68+
font-size: 14px;
6969
line-height: 1.4;
7070
font-weight: 400;
7171
letter-spacing: 0;
@@ -230,12 +230,12 @@ code, pre {
230230
--cortex-scrollbar-width-thin: 6px;
231231
--cortex-scrollbar-slider-min-size: 20px;
232232

233-
/* Scrollbar Colors - Figma Scroll Bar component */
233+
/* Scrollbar Colors - Figma design system */
234234
--cortex-scrollbar-shadow: rgba(0, 0, 0, 0.35);
235235
--cortex-scrollbar-track-bg: transparent;
236-
--cortex-scrollbar-thumb-bg: var(--cortex-scrollbar-thumb, rgba(252, 252, 252, 0.12));
237-
--cortex-scrollbar-thumb-hover-bg: var(--cortex-scrollbar-thumb-hover, rgba(252, 252, 252, 0.24));
238-
--cortex-scrollbar-thumb-active-bg: var(--cortex-scrollbar-thumb-hover, rgba(252, 252, 252, 0.24));
236+
--cortex-scrollbar-thumb-bg: #3C3D40;
237+
--cortex-scrollbar-thumb-hover-bg: #4C4C4D;
238+
--cortex-scrollbar-thumb-active-bg: #4C4C4D;
239239

240240
/* Scrollbar Timing */
241241
--cortex-scrollbar-hide-timeout: 500ms;
@@ -256,7 +256,7 @@ code, pre {
256256
10. BASE SCROLLBAR STYLES
257257
============================================================================= */
258258

259-
/* Default scrollbar styling */
259+
/* Default scrollbar styling (Figma custom scrollbar) */
260260
::-webkit-scrollbar {
261261
width: 8px;
262262
height: 8px;
@@ -267,12 +267,12 @@ code, pre {
267267
}
268268

269269
::-webkit-scrollbar-thumb {
270-
background: var(--cortex-scrollbar-thumb-bg);
271-
border-radius: 999px;
270+
background: var(--cortex-scrollbar-thumb-bg, #3C3D40);
271+
border-radius: 4px;
272272
}
273273

274274
::-webkit-scrollbar-thumb:hover {
275-
background: var(--cortex-scrollbar-thumb-hover-bg);
275+
background: var(--cortex-scrollbar-thumb-hover-bg, #4C4C4D);
276276
}
277277

278278
::-webkit-scrollbar-corner {

‎src/styles/cortex-tokens.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,9 @@
192192
TYPOGRAPHY
193193
=========================================================================== */
194194

195-
/* Font Families (Inter, JetBrains Mono, Habibi) */
196-
--cortex-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
197-
--cortex-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
195+
/* Font Families (Figma: Inter primary, Figtree fallback, Geist display) */
196+
--cortex-font-sans: 'Inter', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
197+
--cortex-font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
198198
--cortex-font-mono: 'JetBrains Mono', 'Source Code Pro', 'Fira Code', 'SF Mono', 'Consolas', monospace;
199199
--cortex-font-serif: 'Habibi', Georgia, serif;
200200

@@ -493,8 +493,8 @@
493493
COMPONENT TOKENS: SCROLLBAR
494494
=========================================================================== */
495495
--cortex-scrollbar-track: transparent;
496-
--cortex-scrollbar-thumb: rgba(252, 252, 252, 0.12);
497-
--cortex-scrollbar-thumb-hover: rgba(252, 252, 252, 0.24);
496+
--cortex-scrollbar-thumb: #3C3D40;
497+
--cortex-scrollbar-thumb-hover: #4C4C4D;
498498
--cortex-scrollbar-width: 8px;
499499
--cortex-scrollbar-radius: var(--cortex-radius-full);
500500

‎src/styles/design-tokens.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,9 @@
129129
RAYONS DE BORDURE
130130
@deprecated — Use --cortex-radius-*
131131
=========================================================================== */
132-
--radius-sm: 6px;
133-
--radius-md: 10px;
134-
--radius-lg: 12px;
132+
--radius-sm: 8px;
133+
--radius-md: 12px;
134+
--radius-lg: 16px;
135135
--radius-full: 9999px;
136136

137137
/* ===========================================================================
@@ -158,11 +158,11 @@
158158

159159
--text-xs: 11px;
160160
--text-sm: 12px;
161-
--text-base: 13px;
162-
--text-lg: 14px;
163-
--text-xl: 16px;
164-
--text-2xl: 18px;
165-
--text-3xl: 24px;
161+
--text-base: 14px;
162+
--text-lg: 16px;
163+
--text-xl: 20px;
164+
--text-2xl: 24px;
165+
--text-3xl: 32px;
166166

167167
--font-normal: 400;
168168
--font-medium: 500;
@@ -300,8 +300,8 @@
300300
COMPOSANT: SCROLLBAR
301301
@deprecated — Use --cortex-scrollbar-*
302302
=========================================================================== */
303-
--scrollbar-thumb: var(--palette-gray-600);
304-
--scrollbar-thumb-hover: var(--palette-gray-500);
303+
--scrollbar-thumb: #3C3D40;
304+
--scrollbar-thumb-hover: #4C4C4D;
305305
--scrollbar-track: transparent;
306306
--scrollbar-width: 8px;
307307

‎src/styles/floating-panels.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -308,12 +308,12 @@
308308
}
309309

310310
::-webkit-scrollbar-thumb {
311-
background: var(--cortex-scrollbar-thumb-bg);
312-
border-radius: 999px;
311+
background: var(--cortex-scrollbar-thumb-bg, #3C3D40);
312+
border-radius: 4px;
313313
}
314314

315315
::-webkit-scrollbar-thumb:hover {
316-
background: var(--cortex-scrollbar-thumb-hover-bg);
316+
background: var(--cortex-scrollbar-thumb-hover-bg, #4C4C4D);
317317
}
318318

319319
/* =============================================================================

‎src/styles/index.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,46 @@
1919
/* Tailwind MUST come first, then our tokens override it */
2020
@import "tailwindcss";
2121

22+
/* =============================================================================
23+
Tailwind v4 Theme Configuration — Figma Design System Tokens
24+
Maps Figma-extracted colors, radii, and typography to Tailwind utilities.
25+
============================================================================= */
26+
@theme {
27+
/* Colors — Figma palette */
28+
--color-bg-primary: #141415;
29+
--color-bg-secondary: #1C1C1D;
30+
--color-bg-elevated: #252628;
31+
--color-surface: #1C1C1D;
32+
--color-surface-hover: #252628;
33+
34+
--color-text-primary: #FCFCFC;
35+
--color-text-secondary: #8C8D8F;
36+
--color-text-muted: #808080;
37+
38+
--color-border-default: #2E2F31;
39+
--color-border-hover: #3C3D40;
40+
41+
--color-accent: #B2FF22;
42+
--color-accent-hover: #6C8A2C;
43+
--color-accent-purple: #8A38F5;
44+
45+
/* Border radius — Figma component scale */
46+
--radius-sm: 8px;
47+
--radius-md: 12px;
48+
--radius-lg: 16px;
49+
50+
/* Typography — Figma text scale */
51+
--font-size-xs: 11px;
52+
--font-size-sm: 12px;
53+
--font-size-base: 14px;
54+
--font-size-lg: 16px;
55+
--font-size-xl: 18px;
56+
57+
/* Font families */
58+
--font-sans: 'Inter', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
59+
--font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
60+
}
61+
2262
/* Global base styles */
2363
@import "./globals.css";
2464

‎src/styles/layout.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1124,12 +1124,12 @@ html:fullscreen .window-resizer {
11241124
}
11251125

11261126
::-webkit-scrollbar-thumb {
1127-
background: var(--cortex-scrollbar-thumb-bg);
1128-
border-radius: 999px;
1127+
background: var(--cortex-scrollbar-thumb-bg, #3C3D40);
1128+
border-radius: 4px;
11291129
}
11301130

11311131
::-webkit-scrollbar-thumb:hover {
1132-
background: var(--cortex-scrollbar-thumb-hover-bg);
1132+
background: var(--cortex-scrollbar-thumb-hover-bg, #4C4C4D);
11331133
}
11341134

11351135
/* =============================================================================

‎src/styles/scrollbar.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@
3131
--cortex-scrollbar-width-thin: 6px;
3232
--cortex-scrollbar-slider-min-size: 20px;
3333

34-
/* Scrollbar Colors - Figma Scroll Bar component */
34+
/* Scrollbar Colors - Figma design system */
3535
--cortex-scrollbar-shadow: rgba(0, 0, 0, 0.35);
3636
--cortex-scrollbar-track-bg: transparent;
37-
--cortex-scrollbar-thumb-bg: var(--cortex-scrollbar-thumb, rgba(252, 252, 252, 0.12));
38-
--cortex-scrollbar-thumb-hover-bg: var(--cortex-scrollbar-thumb-hover, rgba(252, 252, 252, 0.24));
39-
--cortex-scrollbar-thumb-active-bg: var(--cortex-scrollbar-thumb-hover, rgba(252, 252, 252, 0.24));
37+
--cortex-scrollbar-thumb-bg: #3C3D40;
38+
--cortex-scrollbar-thumb-hover-bg: #4C4C4D;
39+
--cortex-scrollbar-thumb-active-bg: #4C4C4D;
4040

4141
/* Scrollbar Timing */
4242
--cortex-scrollbar-hide-timeout: 500ms;
@@ -71,12 +71,12 @@
7171
}
7272

7373
::-webkit-scrollbar-thumb {
74-
background: var(--cortex-scrollbar-thumb-bg);
75-
border-radius: 999px;
74+
background: var(--cortex-scrollbar-thumb-bg, #3C3D40);
75+
border-radius: 4px;
7676
}
7777

7878
::-webkit-scrollbar-thumb:hover {
79-
background: var(--cortex-scrollbar-thumb-hover-bg);
79+
background: var(--cortex-scrollbar-thumb-hover-bg, #4C4C4D);
8080
}
8181

8282
::-webkit-scrollbar-corner {

0 commit comments

Comments
 (0)