@oneqode/design-system 0.4.3 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/css/remake/tokens.css +88 -54
- package/package.json +1 -1
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
--color-border-error: #ef4444; /** Error border */
|
|
12
12
|
--color-border-focus: #2a8dff; /** Focus ring border */
|
|
13
13
|
--color-border-information: #2a8dff; /** Informational border */
|
|
14
|
-
--color-border-inverse: #
|
|
14
|
+
--color-border-inverse: #ffffff; /** Border on inverse surfaces */
|
|
15
|
+
--color-border-strong: #333333; /** Strong/emphasized border - bolder dividers (Figma) */
|
|
15
16
|
--color-border-subtle: #0d0d0d; /** Subtle border - hairline dividers */
|
|
16
17
|
--color-border-success: #22c55e; /** Success border */
|
|
17
18
|
--color-border-warning: #f59e0b; /** Warning border */
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
--color-blue-700: #125bb5;
|
|
26
27
|
--color-blue-800: #124a91;
|
|
27
28
|
--color-blue-900: #133f73;
|
|
28
|
-
--color-blue-950: #
|
|
29
|
+
--color-blue-950: #0b2648;
|
|
29
30
|
--color-red-50: #fef2f2;
|
|
30
31
|
--color-red-100: #fee2e2;
|
|
31
32
|
--color-red-200: #fecaca;
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
--color-red-800: #991b1b;
|
|
38
39
|
--color-red-900: #7f1d1d;
|
|
39
40
|
--color-red-950: #450a0a;
|
|
40
|
-
--color-green-50: #
|
|
41
|
+
--color-green-50: #f0fdf4;
|
|
41
42
|
--color-green-100: #dcfce7;
|
|
42
43
|
--color-green-200: #bbf7d0;
|
|
43
44
|
--color-green-300: #86efac;
|
|
@@ -68,17 +69,18 @@
|
|
|
68
69
|
--color-neutral-600: #555555;
|
|
69
70
|
--color-neutral-700: #333333;
|
|
70
71
|
--color-neutral-800: #1f1f1f;
|
|
72
|
+
--color-neutral-850: #141414; /** Between 800 and 900 - used for muted dark surfaces */
|
|
71
73
|
--color-neutral-900: #0d0d0d;
|
|
72
74
|
--color-neutral-950: #050505;
|
|
73
75
|
--color-black: #000000;
|
|
74
76
|
--color-white: #ffffff;
|
|
75
|
-
--color-surface-accent: #2a8dff; /** Brand-accent surface - feature highlights,
|
|
76
|
-
--color-surface-
|
|
77
|
-
--color-surface-action-hover: #4aa2ff; /** Primary action surface - hover state */
|
|
77
|
+
--color-surface-accent: #2a8dff; /** Brand-accent surface - CTA buttons, feature highlights, active states */
|
|
78
|
+
--color-surface-accent-hover: #4aa2ff; /** Accent surface - hover state */
|
|
78
79
|
--color-surface-bg: #000000; /** Page background - foundation black/white */
|
|
79
80
|
--color-surface-default: #050505; /** Default card/component surface */
|
|
80
81
|
--color-surface-disabled: #0d0d0d; /** Disabled component surface */
|
|
81
82
|
--color-surface-inverse: #ffffff; /** Inverted surface - white card on dark, black card on light */
|
|
83
|
+
--color-surface-muted: #141414; /** Muted surface - subtle backgrounds, group panels */
|
|
82
84
|
--color-surface-raised: #0d0d0d; /** Raised surface - modals, popovers, ghost-button hover */
|
|
83
85
|
--color-alias-accent-50: #eef7ff;
|
|
84
86
|
--color-alias-accent-100: #d9ecff;
|
|
@@ -90,8 +92,9 @@
|
|
|
90
92
|
--color-alias-accent-700: #125bb5;
|
|
91
93
|
--color-alias-accent-800: #124a91;
|
|
92
94
|
--color-alias-accent-900: #133f73;
|
|
93
|
-
--color-alias-accent-950: #
|
|
95
|
+
--color-alias-accent-950: #0b2648;
|
|
94
96
|
--color-alias-accent-default: #2a8dff;
|
|
97
|
+
--color-alias-accent-line: #2a8dff;
|
|
95
98
|
--color-alias-information-50: #eef7ff;
|
|
96
99
|
--color-alias-information-100: #d9ecff;
|
|
97
100
|
--color-alias-information-200: #b6daff;
|
|
@@ -102,7 +105,7 @@
|
|
|
102
105
|
--color-alias-information-700: #125bb5;
|
|
103
106
|
--color-alias-information-800: #124a91;
|
|
104
107
|
--color-alias-information-900: #133f73;
|
|
105
|
-
--color-alias-information-950: #
|
|
108
|
+
--color-alias-information-950: #0b2648;
|
|
106
109
|
--color-alias-information-default: #1774e0;
|
|
107
110
|
--color-alias-error-50: #fef2f2;
|
|
108
111
|
--color-alias-error-100: #fee2e2;
|
|
@@ -116,7 +119,7 @@
|
|
|
116
119
|
--color-alias-error-900: #7f1d1d;
|
|
117
120
|
--color-alias-error-950: #450a0a;
|
|
118
121
|
--color-alias-error-default: #dc2626;
|
|
119
|
-
--color-alias-success-50: #
|
|
122
|
+
--color-alias-success-50: #f0fdf4;
|
|
120
123
|
--color-alias-success-100: #dcfce7;
|
|
121
124
|
--color-alias-success-200: #bbf7d0;
|
|
122
125
|
--color-alias-success-300: #86efac;
|
|
@@ -149,6 +152,7 @@
|
|
|
149
152
|
--color-alias-neutral-600: #555555;
|
|
150
153
|
--color-alias-neutral-700: #333333;
|
|
151
154
|
--color-alias-neutral-800: #1f1f1f;
|
|
155
|
+
--color-alias-neutral-850: #141414;
|
|
152
156
|
--color-alias-neutral-900: #0d0d0d;
|
|
153
157
|
--color-alias-neutral-950: #050505;
|
|
154
158
|
--color-alias-black: #000000;
|
|
@@ -175,7 +179,12 @@
|
|
|
175
179
|
--color-text-success: #4ade80; /** Success/positive text */
|
|
176
180
|
--color-text-tertiary: #777777; /** Tertiary/auxiliary text - mid grey, mode-agnostic */
|
|
177
181
|
--color-text-warning: #fbbf24; /** Warning/caution text */
|
|
178
|
-
--radius: 0.5rem; /**
|
|
182
|
+
--radius: 0.5rem; /** Alias for radius.lg - kept for backwards compatibility, emits --radius */
|
|
183
|
+
--radius-none: 0; /** 0 - no rounding (Figma border-radius.none) */
|
|
184
|
+
--radius-sm: 0.125rem; /** 2px - small rounding (Figma border-radius.sm) */
|
|
185
|
+
--radius-md: 0.25rem; /** 4px - medium rounding (Figma border-radius.md) */
|
|
186
|
+
--radius-lg: 0.5rem; /** 8px - large rounding (Figma border-radius.lg); default for cards and inputs */
|
|
187
|
+
--radius-xl: 0.75rem; /** 12px - extra-large rounding (Figma border-radius.xl) */
|
|
179
188
|
--shadow-dropdown: 0 8px 40px rgba(255, 255, 255, 0.06); /** Dropdown panel shadow */
|
|
180
189
|
--shadow-avatar-glow: inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59; /** Avatar/icon glow effect */
|
|
181
190
|
--container-wide: 1400px; /** Wide layouts (3-col grids, special sections) */
|
|
@@ -196,6 +205,7 @@
|
|
|
196
205
|
--spacing-10: 2.5rem; /** 40px */
|
|
197
206
|
--spacing-12: 3rem; /** 48px */
|
|
198
207
|
--spacing-16: 4rem; /** 64px */
|
|
208
|
+
--spacing-20: 5rem; /** 80px */
|
|
199
209
|
--spacing-section: 5rem; /** Standard spacing between page sections */
|
|
200
210
|
--spacing-section-lg: 10rem; /** Large section block padding - 160px (used for major page sections per Figma) */
|
|
201
211
|
--spacing-inset: 1.5rem; /** Standard inner padding for sections and cards - 24px */
|
|
@@ -206,38 +216,28 @@
|
|
|
206
216
|
--font-size-14: 0.875rem; /** 14px - text-sm (body small / dense UI) */
|
|
207
217
|
--font-size-16: 1rem; /** 16px - text-md (body default) */
|
|
208
218
|
--font-size-18: 1.125rem; /** 18px - text-lg (lead paragraph), h6 mobile */
|
|
209
|
-
--font-size-20: 1.25rem; /** 20px - h6 desktop */
|
|
210
|
-
--font-size-
|
|
211
|
-
--font-size-
|
|
212
|
-
--font-size-
|
|
213
|
-
--font-size-
|
|
214
|
-
--font-size-32: 2rem; /** 32px - h3 mobile and desktop */
|
|
215
|
-
--font-size-40: 2.5rem; /** 40px - h2 mobile */
|
|
219
|
+
--font-size-20: 1.25rem; /** 20px - h4 mobile, h5 mobile, h6 desktop */
|
|
220
|
+
--font-size-24: 1.5rem; /** 24px - h3 mobile, h5 desktop */
|
|
221
|
+
--font-size-28: 1.75rem; /** 28px - h2 mobile, h4 desktop */
|
|
222
|
+
--font-size-32: 2rem; /** 32px - h3 desktop */
|
|
223
|
+
--font-size-40: 2.5rem; /** 40px - h1 mobile */
|
|
216
224
|
--font-size-44: 2.75rem; /** 44px - h2 desktop */
|
|
217
|
-
--font-size-52: 3.25rem; /** 52px - h1 mobile */
|
|
218
225
|
--font-size-64: 4rem; /** 64px - h1 desktop */
|
|
219
226
|
--font-weight-normal: 400; /** Normal body text */
|
|
220
227
|
--font-weight-medium: 500; /** Medium emphasis */
|
|
221
228
|
--font-weight-semibold: 600; /** Buttons, labels, subheadings */
|
|
222
229
|
--font-weight-bold: 700; /** Headings, strong emphasis */
|
|
223
|
-
--font-letter-spacing-heading: -0.02em; /**
|
|
230
|
+
--font-letter-spacing-heading: -0.02em; /** Headings - -2% tracking (Figma desktop h1/h2/h4/h5/h6 and mobile h2-h5) */
|
|
231
|
+
--font-letter-spacing-h3-desktop: -0.0225em; /** H3 desktop - -0.72/32 = -2.25% (Figma) */
|
|
232
|
+
--font-letter-spacing-h1-mobile: -0.022em; /** H1 mobile - -0.88/40 (Figma) */
|
|
233
|
+
--font-letter-spacing-h6-mobile: -0.0222em; /** H6 mobile - -0.4/18 (Figma) */
|
|
224
234
|
--font-letter-spacing-body: -0.01em; /** Body text (text-lg, text-md, text-sm, text-xs) - -1% tracking */
|
|
225
235
|
--font-letter-spacing-mono: 0; /** Mono (text-mono) - no tracking */
|
|
226
|
-
--font-
|
|
227
|
-
--font-letter-spacing-h2-mobile: -0.0375em; /** H2 mobile - -1.5/40 */
|
|
228
|
-
--font-letter-spacing-h3-mobile: -0.03125em; /** H3 mobile - -1/32 */
|
|
229
|
-
--font-letter-spacing-h4-mobile: -0.0192em; /** H4 mobile - -0.5/26 */
|
|
230
|
-
--font-letter-spacing-h5-mobile: -0.0114em; /** H5 mobile - -0.25/22 */
|
|
231
|
-
--font-letter-spacing-h6-mobile: 0; /** H6 mobile - none specified */
|
|
232
|
-
--font-line-height-tight: 1.2; /** Desktop headings (H2-H6) - 1.2 ratio */
|
|
236
|
+
--font-line-height-tight: 1.2; /** Headings - 1.2 ratio (Figma desktop h2-h6 and mobile h3-h6) */
|
|
233
237
|
--font-line-height-body: 1.5; /** All body text (text-lg, text-md, text-sm, text-xs, text-mono) - 1.5 ratio */
|
|
234
|
-
--font-line-height-h1-desktop: 1.0625; /** H1 desktop - 68/64 */
|
|
235
|
-
--font-line-height-h1-mobile: 1.
|
|
236
|
-
--font-line-height-h2-mobile: 1.
|
|
237
|
-
--font-line-height-h3-mobile: 1.125; /** H3 mobile - 36/32 */
|
|
238
|
-
--font-line-height-h4-mobile: 1.2308; /** H4 mobile - 32/26 */
|
|
239
|
-
--font-line-height-h5-mobile: 1.2727; /** H5 mobile - 28/22 */
|
|
240
|
-
--font-line-height-h6-mobile: 1.3333; /** H6 mobile - 24/18 */
|
|
238
|
+
--font-line-height-h1-desktop: 1.0625; /** H1 desktop - 68/64 (Figma) */
|
|
239
|
+
--font-line-height-h1-mobile: 1.1; /** H1 mobile - 44/40 (Figma) */
|
|
240
|
+
--font-line-height-h2-mobile: 1.1428; /** H2 mobile - 32/28 (Figma) */
|
|
241
241
|
--component-badge-background: #ffffff; /** Annotation chip background - white */
|
|
242
242
|
--component-badge-text: #111111; /** Annotation chip text - near black */
|
|
243
243
|
--component-badge-radius: 9999px; /** Annotation chip radius - full pill */
|
|
@@ -290,10 +290,13 @@
|
|
|
290
290
|
--component-tag-outline-bg: transparent; /** Mono tag - outline variant has no fill */
|
|
291
291
|
--component-tag-outline-text: #ffffff; /** Mono tag - outline variant text (white) */
|
|
292
292
|
--component-tag-outline-border: #1f1f1f; /** Mono tag - outline variant border color */
|
|
293
|
+
--border-width-none: 0; /** 0 - no border (Figma border-width.none) */
|
|
294
|
+
--border-width-sm: 1px; /** 1px - hairline border (Figma border-width.sm) */
|
|
295
|
+
--border-width-md: 2px; /** 2px - medium border (Figma border-width.md) */
|
|
296
|
+
--border-width-lg: 4px; /** 4px - heavy border (Figma border-width.lg) */
|
|
293
297
|
--gradient-card-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%); /** Bottom-fade scrim on image cards (feature triptych) for text legibility */
|
|
294
298
|
--gradient-hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%); /** Top-to-bottom darken on hero imagery - keeps headline legible without flattening the photo */
|
|
295
299
|
--pattern-hatch: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, 0.06) 4px 5px); /** Diagonal hairline hatch decoration - section frame on case studies and feature card borders */
|
|
296
|
-
--layout-padding-xy: 1.25rem; /** Mobile horizontal padding for direct section children of <main> - 20px */
|
|
297
300
|
--motion-duration-fast: 150ms; /** Snappy interactions - button/link hover, icon swaps */
|
|
298
301
|
--motion-duration-base: 250ms; /** Default UI transition - default for most state changes */
|
|
299
302
|
--motion-duration-slow: 400ms; /** Deliberate transition - card/image reveals, dropdown open */
|
|
@@ -302,24 +305,24 @@
|
|
|
302
305
|
--motion-easing-in: cubic-bezier(0.4, 0, 1, 1); /** Ease-in - elements leaving the screen */
|
|
303
306
|
|
|
304
307
|
/* Typography roles - mobile defaults; desktop overrides at min-width: 768px */
|
|
305
|
-
--type-h1-size:
|
|
306
|
-
--type-h1-line-height: 1.
|
|
307
|
-
--type-h1-letter-spacing: -0.
|
|
308
|
-
--type-h2-size:
|
|
309
|
-
--type-h2-line-height: 1.
|
|
310
|
-
--type-h2-letter-spacing: -0.
|
|
311
|
-
--type-h3-size:
|
|
312
|
-
--type-h3-line-height: 1.
|
|
313
|
-
--type-h3-letter-spacing: -0.
|
|
314
|
-
--type-h4-size: 1.
|
|
315
|
-
--type-h4-line-height: 1.
|
|
316
|
-
--type-h4-letter-spacing: -0.
|
|
317
|
-
--type-h5-size: 1.
|
|
318
|
-
--type-h5-line-height: 1.
|
|
319
|
-
--type-h5-letter-spacing: -0.
|
|
308
|
+
--type-h1-size: 2.5rem;
|
|
309
|
+
--type-h1-line-height: 1.1;
|
|
310
|
+
--type-h1-letter-spacing: -0.022em;
|
|
311
|
+
--type-h2-size: 1.75rem;
|
|
312
|
+
--type-h2-line-height: 1.1428;
|
|
313
|
+
--type-h2-letter-spacing: -0.02em;
|
|
314
|
+
--type-h3-size: 1.5rem;
|
|
315
|
+
--type-h3-line-height: 1.2;
|
|
316
|
+
--type-h3-letter-spacing: -0.02em;
|
|
317
|
+
--type-h4-size: 1.25rem;
|
|
318
|
+
--type-h4-line-height: 1.2;
|
|
319
|
+
--type-h4-letter-spacing: -0.02em;
|
|
320
|
+
--type-h5-size: 1.25rem;
|
|
321
|
+
--type-h5-line-height: 1.2;
|
|
322
|
+
--type-h5-letter-spacing: -0.02em;
|
|
320
323
|
--type-h6-size: 1.125rem;
|
|
321
|
-
--type-h6-line-height: 1.
|
|
322
|
-
--type-h6-letter-spacing: 0;
|
|
324
|
+
--type-h6-line-height: 1.2;
|
|
325
|
+
--type-h6-letter-spacing: -0.0222em;
|
|
323
326
|
--type-text-lg-size: 1.125rem;
|
|
324
327
|
--type-text-lg-line-height: 1.5;
|
|
325
328
|
--type-text-lg-letter-spacing: -0.01em;
|
|
@@ -335,6 +338,22 @@
|
|
|
335
338
|
--type-text-mono-size: 0.75rem;
|
|
336
339
|
--type-text-mono-line-height: 1.5;
|
|
337
340
|
--type-text-mono-letter-spacing: 0;
|
|
341
|
+
|
|
342
|
+
/* Layout - mobile defaults; desktop overrides at min-width: 768px */
|
|
343
|
+
--layout-canvas-width: 393px;
|
|
344
|
+
--layout-content-max-width: 350px;
|
|
345
|
+
--layout-grid-column-count: 4;
|
|
346
|
+
--layout-grid-column-width: 77px;
|
|
347
|
+
--layout-grid-gutter-width: 15px;
|
|
348
|
+
--layout-padding-xy: 1.25rem;
|
|
349
|
+
--layout-section-padding-y: 5rem;
|
|
350
|
+
--layout-section-padding-y-sm: 3.75rem;
|
|
351
|
+
--layout-component-y: 1.25rem;
|
|
352
|
+
--layout-content-gap: 2.5rem;
|
|
353
|
+
--layout-label-spacing: 0.75rem;
|
|
354
|
+
--layout-title-to-paragraph-sm: 0.5rem;
|
|
355
|
+
--layout-title-to-paragraph: 1.25rem;
|
|
356
|
+
--layout-title-to-paragraph-xl: 2rem;
|
|
338
357
|
}
|
|
339
358
|
|
|
340
359
|
|
|
@@ -349,16 +368,17 @@
|
|
|
349
368
|
--color-border-focus: #1774e0;
|
|
350
369
|
--color-border-information: #1774e0;
|
|
351
370
|
--color-border-inverse: #1f1f1f;
|
|
371
|
+
--color-border-strong: #f2f2f2;
|
|
352
372
|
--color-border-subtle: #f2f2f2;
|
|
353
373
|
--color-border-success: #16a34a;
|
|
354
374
|
--color-border-warning: #d97706;
|
|
355
375
|
--color-surface-accent: #1774e0;
|
|
356
|
-
--color-surface-
|
|
357
|
-
--color-surface-action-hover: #125bb5;
|
|
376
|
+
--color-surface-accent-hover: #125bb5;
|
|
358
377
|
--color-surface-bg: #ffffff;
|
|
359
378
|
--color-surface-default: #ffffff;
|
|
360
379
|
--color-surface-disabled: #f2f2f2;
|
|
361
380
|
--color-surface-inverse: #000000;
|
|
381
|
+
--color-surface-muted: #f2f2f2;
|
|
362
382
|
--color-surface-raised: #fafafa;
|
|
363
383
|
--color-icon-accent: #1774e0;
|
|
364
384
|
--color-icon-action: #1774e0;
|
|
@@ -396,7 +416,7 @@
|
|
|
396
416
|
--type-h2-letter-spacing: -0.02em;
|
|
397
417
|
--type-h3-size: 2rem;
|
|
398
418
|
--type-h3-line-height: 1.2;
|
|
399
|
-
--type-h3-letter-spacing: -0.
|
|
419
|
+
--type-h3-letter-spacing: -0.0225em;
|
|
400
420
|
--type-h4-size: 1.75rem;
|
|
401
421
|
--type-h4-line-height: 1.2;
|
|
402
422
|
--type-h4-letter-spacing: -0.02em;
|
|
@@ -406,5 +426,19 @@
|
|
|
406
426
|
--type-h6-size: 1.25rem;
|
|
407
427
|
--type-h6-line-height: 1.2;
|
|
408
428
|
--type-h6-letter-spacing: -0.02em;
|
|
429
|
+
--layout-canvas-width: 1512px;
|
|
430
|
+
--layout-content-max-width: 1700px;
|
|
431
|
+
--layout-grid-column-count: 12;
|
|
432
|
+
--layout-grid-column-width: 90px;
|
|
433
|
+
--layout-grid-gutter-width: 20px;
|
|
434
|
+
--layout-padding-xy: 1.5rem;
|
|
435
|
+
--layout-section-padding-y: 10rem;
|
|
436
|
+
--layout-section-padding-y-sm: 6.25rem;
|
|
437
|
+
--layout-component-y: 3rem;
|
|
438
|
+
--layout-content-gap: 3.75rem;
|
|
439
|
+
--layout-label-spacing: 1.5rem;
|
|
440
|
+
--layout-title-to-paragraph-sm: 1rem;
|
|
441
|
+
--layout-title-to-paragraph: 2rem;
|
|
442
|
+
--layout-title-to-paragraph-xl: 3rem;
|
|
409
443
|
}
|
|
410
444
|
}
|
package/package.json
CHANGED