@oneqode/design-system 0.4.4 → 0.5.1
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 +91 -55
- 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) */
|
|
@@ -207,39 +216,28 @@
|
|
|
207
216
|
--font-size-14: 0.875rem; /** 14px - text-sm (body small / dense UI) */
|
|
208
217
|
--font-size-16: 1rem; /** 16px - text-md (body default) */
|
|
209
218
|
--font-size-18: 1.125rem; /** 18px - text-lg (lead paragraph), h6 mobile */
|
|
210
|
-
--font-size-20: 1.25rem; /** 20px - h6 desktop */
|
|
211
|
-
--font-size-
|
|
212
|
-
--font-size-
|
|
213
|
-
--font-size-
|
|
214
|
-
--font-size-
|
|
215
|
-
--font-size-32: 2rem; /** 32px - h3 mobile and desktop */
|
|
216
|
-
--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 */
|
|
217
224
|
--font-size-44: 2.75rem; /** 44px - h2 desktop */
|
|
218
|
-
--font-size-52: 3.25rem; /** 52px - h1 mobile */
|
|
219
225
|
--font-size-64: 4rem; /** 64px - h1 desktop */
|
|
220
226
|
--font-weight-normal: 400; /** Normal body text */
|
|
221
227
|
--font-weight-medium: 500; /** Medium emphasis */
|
|
222
228
|
--font-weight-semibold: 600; /** Buttons, labels, subheadings */
|
|
223
229
|
--font-weight-bold: 700; /** Headings, strong emphasis */
|
|
224
|
-
--font-letter-spacing-heading: -0.02em; /**
|
|
225
|
-
--font-letter-spacing-h3-desktop: -0.0225em; /** H3 desktop - -0.72/32
|
|
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) */
|
|
226
234
|
--font-letter-spacing-body: -0.01em; /** Body text (text-lg, text-md, text-sm, text-xs) - -1% tracking */
|
|
227
235
|
--font-letter-spacing-mono: 0; /** Mono (text-mono) - no tracking */
|
|
228
|
-
--font-
|
|
229
|
-
--font-letter-spacing-h2-mobile: -0.0375em; /** H2 mobile - -1.5/40 */
|
|
230
|
-
--font-letter-spacing-h3-mobile: -0.03125em; /** H3 mobile - -1/32 */
|
|
231
|
-
--font-letter-spacing-h4-mobile: -0.0192em; /** H4 mobile - -0.5/26 */
|
|
232
|
-
--font-letter-spacing-h5-mobile: -0.0114em; /** H5 mobile - -0.25/22 */
|
|
233
|
-
--font-letter-spacing-h6-mobile: 0; /** H6 mobile - none specified */
|
|
234
|
-
--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) */
|
|
235
237
|
--font-line-height-body: 1.5; /** All body text (text-lg, text-md, text-sm, text-xs, text-mono) - 1.5 ratio */
|
|
236
|
-
--font-line-height-h1-desktop: 1.
|
|
237
|
-
--font-line-height-h1-mobile: 1.
|
|
238
|
-
--font-line-height-h2-mobile: 1.
|
|
239
|
-
--font-line-height-h3-mobile: 1.125; /** H3 mobile - 36/32 */
|
|
240
|
-
--font-line-height-h4-mobile: 1.2308; /** H4 mobile - 32/26 */
|
|
241
|
-
--font-line-height-h5-mobile: 1.2727; /** H5 mobile - 28/22 */
|
|
242
|
-
--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) */
|
|
243
241
|
--component-badge-background: #ffffff; /** Annotation chip background - white */
|
|
244
242
|
--component-badge-text: #111111; /** Annotation chip text - near black */
|
|
245
243
|
--component-badge-radius: 9999px; /** Annotation chip radius - full pill */
|
|
@@ -292,10 +290,13 @@
|
|
|
292
290
|
--component-tag-outline-bg: transparent; /** Mono tag - outline variant has no fill */
|
|
293
291
|
--component-tag-outline-text: #ffffff; /** Mono tag - outline variant text (white) */
|
|
294
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) */
|
|
295
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 */
|
|
296
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 */
|
|
297
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 */
|
|
298
|
-
--layout-padding-xy: 1.25rem; /** Mobile horizontal padding for direct section children of <main> - 20px */
|
|
299
300
|
--motion-duration-fast: 150ms; /** Snappy interactions - button/link hover, icon swaps */
|
|
300
301
|
--motion-duration-base: 250ms; /** Default UI transition - default for most state changes */
|
|
301
302
|
--motion-duration-slow: 400ms; /** Deliberate transition - card/image reveals, dropdown open */
|
|
@@ -304,24 +305,24 @@
|
|
|
304
305
|
--motion-easing-in: cubic-bezier(0.4, 0, 1, 1); /** Ease-in - elements leaving the screen */
|
|
305
306
|
|
|
306
307
|
/* Typography roles - mobile defaults; desktop overrides at min-width: 768px */
|
|
307
|
-
--type-h1-size:
|
|
308
|
-
--type-h1-line-height: 1.
|
|
309
|
-
--type-h1-letter-spacing: -0.
|
|
310
|
-
--type-h2-size:
|
|
311
|
-
--type-h2-line-height: 1.
|
|
312
|
-
--type-h2-letter-spacing: -0.
|
|
313
|
-
--type-h3-size:
|
|
314
|
-
--type-h3-line-height: 1.
|
|
315
|
-
--type-h3-letter-spacing: -0.
|
|
316
|
-
--type-h4-size: 1.
|
|
317
|
-
--type-h4-line-height: 1.
|
|
318
|
-
--type-h4-letter-spacing: -0.
|
|
319
|
-
--type-h5-size: 1.
|
|
320
|
-
--type-h5-line-height: 1.
|
|
321
|
-
--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;
|
|
322
323
|
--type-h6-size: 1.125rem;
|
|
323
|
-
--type-h6-line-height: 1.
|
|
324
|
-
--type-h6-letter-spacing: 0;
|
|
324
|
+
--type-h6-line-height: 1.2;
|
|
325
|
+
--type-h6-letter-spacing: -0.0222em;
|
|
325
326
|
--type-text-lg-size: 1.125rem;
|
|
326
327
|
--type-text-lg-line-height: 1.5;
|
|
327
328
|
--type-text-lg-letter-spacing: -0.01em;
|
|
@@ -337,6 +338,24 @@
|
|
|
337
338
|
--type-text-mono-size: 0.75rem;
|
|
338
339
|
--type-text-mono-line-height: 1.5;
|
|
339
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-padding-xy-2x: 2.5rem;
|
|
350
|
+
--layout-padding-xy-05x: 0.625rem;
|
|
351
|
+
--layout-section-padding-y: 5rem;
|
|
352
|
+
--layout-section-padding-y-sm: 3.75rem;
|
|
353
|
+
--layout-component-y: 1.25rem;
|
|
354
|
+
--layout-content-gap: 2.5rem;
|
|
355
|
+
--layout-label-spacing: 0.75rem;
|
|
356
|
+
--layout-title-to-paragraph-sm: 0.5rem;
|
|
357
|
+
--layout-title-to-paragraph: 1.25rem;
|
|
358
|
+
--layout-title-to-paragraph-xl: 2rem;
|
|
340
359
|
}
|
|
341
360
|
|
|
342
361
|
|
|
@@ -351,16 +370,17 @@
|
|
|
351
370
|
--color-border-focus: #1774e0;
|
|
352
371
|
--color-border-information: #1774e0;
|
|
353
372
|
--color-border-inverse: #1f1f1f;
|
|
373
|
+
--color-border-strong: #f2f2f2;
|
|
354
374
|
--color-border-subtle: #f2f2f2;
|
|
355
375
|
--color-border-success: #16a34a;
|
|
356
376
|
--color-border-warning: #d97706;
|
|
357
377
|
--color-surface-accent: #1774e0;
|
|
358
|
-
--color-surface-
|
|
359
|
-
--color-surface-action-hover: #125bb5;
|
|
378
|
+
--color-surface-accent-hover: #125bb5;
|
|
360
379
|
--color-surface-bg: #ffffff;
|
|
361
380
|
--color-surface-default: #ffffff;
|
|
362
381
|
--color-surface-disabled: #f2f2f2;
|
|
363
382
|
--color-surface-inverse: #000000;
|
|
383
|
+
--color-surface-muted: #f2f2f2;
|
|
364
384
|
--color-surface-raised: #fafafa;
|
|
365
385
|
--color-icon-accent: #1774e0;
|
|
366
386
|
--color-icon-action: #1774e0;
|
|
@@ -391,7 +411,7 @@
|
|
|
391
411
|
@media (min-width: 768px) {
|
|
392
412
|
:root {
|
|
393
413
|
--type-h1-size: 4rem;
|
|
394
|
-
--type-h1-line-height: 1.
|
|
414
|
+
--type-h1-line-height: 1.0625;
|
|
395
415
|
--type-h1-letter-spacing: -0.02em;
|
|
396
416
|
--type-h2-size: 2.75rem;
|
|
397
417
|
--type-h2-line-height: 1.2;
|
|
@@ -408,5 +428,21 @@
|
|
|
408
428
|
--type-h6-size: 1.25rem;
|
|
409
429
|
--type-h6-line-height: 1.2;
|
|
410
430
|
--type-h6-letter-spacing: -0.02em;
|
|
431
|
+
--layout-canvas-width: 1512px;
|
|
432
|
+
--layout-content-max-width: 1700px;
|
|
433
|
+
--layout-grid-column-count: 12;
|
|
434
|
+
--layout-grid-column-width: 90px;
|
|
435
|
+
--layout-grid-gutter-width: 20px;
|
|
436
|
+
--layout-padding-xy: 1.5rem;
|
|
437
|
+
--layout-padding-xy-2x: 3rem;
|
|
438
|
+
--layout-padding-xy-05x: 0.75rem;
|
|
439
|
+
--layout-section-padding-y: 10rem;
|
|
440
|
+
--layout-section-padding-y-sm: 6.25rem;
|
|
441
|
+
--layout-component-y: 3rem;
|
|
442
|
+
--layout-content-gap: 3.75rem;
|
|
443
|
+
--layout-label-spacing: 1.5rem;
|
|
444
|
+
--layout-title-to-paragraph-sm: 1rem;
|
|
445
|
+
--layout-title-to-paragraph: 2rem;
|
|
446
|
+
--layout-title-to-paragraph-xl: 3rem;
|
|
411
447
|
}
|
|
412
448
|
}
|
package/package.json
CHANGED