@rowkit/tokens 0.2.0 → 0.3.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.
Files changed (10) hide show
  1. package/README.md +1 -1
  2. package/dist/color.d.ts +57 -32
  3. package/dist/index.d.ts +25 -19
  4. package/dist/index.js +39 -32
  5. package/dist/index.js.map +1 -1
  6. package/dist/radius.d.ts +16 -10
  7. package/dist/reference.html +93 -90
  8. package/dist/tokens.css +35 -32
  9. package/dist/typography.d.ts +11 -4
  10. package/package.json +1 -1
package/dist/reference.html CHANGED
@@ -25,8 +25,11 @@
25
25
  --color-gray-972: oklch(0.972 0.003 264);
26
26
  --color-gray-985: oklch(0.985 0 0);
27
27
  --color-gray-988: oklch(0.988 0.002 264);
28
+ --color-red-260: oklch(0.32 0.045 25);
29
+ --color-red-350: oklch(0.38 0.055 25);
28
30
  --color-red-520: oklch(0.52 0.212 27.325);
29
31
  --color-red-577: oklch(0.577 0.235 27.325);
32
+ --color-red-850: oklch(0.85 0.08 25);
30
33
  --color-green-260: oklch(0.26 0.068 152);
31
34
  --color-green-350: oklch(0.35 0.092 152);
32
35
  --color-green-400: oklch(0.4 0.105 152);
@@ -57,17 +60,17 @@
57
60
  --color-neutral-800: oklch(0.279 0.03 264);
58
61
  --color-neutral-900: oklch(0.21 0.033 264);
59
62
  --color-neutral-950: oklch(0.13 0.036 264);
60
- --color-primary-50: oklch(0.97 0.014 259);
61
- --color-primary-100: oklch(0.936 0.03 259);
62
- --color-primary-200: oklch(0.885 0.055 259);
63
- --color-primary-300: oklch(0.809 0.095 259);
64
- --color-primary-400: oklch(0.715 0.147 259);
65
- --color-primary-500: oklch(0.623 0.201 259);
66
- --color-primary-600: oklch(0.546 0.209 259);
67
- --color-primary-700: oklch(0.488 0.187 259);
68
- --color-primary-800: oklch(0.442 0.165 259);
69
- --color-primary-900: oklch(0.396 0.135 259);
70
- --color-primary-950: oklch(0.282 0.086 259);
63
+ --color-primary-50: oklch(0.975 0.01 48);
64
+ --color-primary-100: oklch(0.95 0.014 48);
65
+ --color-primary-200: oklch(0.90 0.02 48);
66
+ --color-primary-300: oklch(0.80 0.026 48);
67
+ --color-primary-400: oklch(0.68 0.032 48);
68
+ --color-primary-500: oklch(0.50 0.036 48);
69
+ --color-primary-600: oklch(0.40 0.037 48);
70
+ --color-primary-700: oklch(0.35 0.037 48);
71
+ --color-primary-800: oklch(0.31 0.038 48);
72
+ --color-primary-900: oklch(0.26 0.032 48);
73
+ --color-primary-950: oklch(0.18 0.024 48);
71
74
  --color-success-50: oklch(0.97 0.014 152);
72
75
  --color-success-100: oklch(0.936 0.036 152);
73
76
  --color-success-200: oklch(0.885 0.064 152);
@@ -116,8 +119,8 @@
116
119
  --color-border: var(--color-gray-940);
117
120
  --color-border-strong: var(--color-gray-905);
118
121
  --color-border-subtle: var(--color-gray-972);
119
- --color-input: var(--color-gray-642);
120
- --color-ring: var(--color-primary-600);
122
+ --color-input: var(--color-gray-870);
123
+ --color-ring: var(--color-gray-708);
121
124
  --color-shadow: var(--color-black);
122
125
  --color-neutral-solid: var(--color-gray-972);
123
126
  --color-neutral-solid-hover: var(--color-gray-940);
@@ -125,11 +128,11 @@
125
128
  --color-neutral-subtle: var(--color-gray-972);
126
129
  --color-neutral-on-subtle: var(--color-gray-205);
127
130
  --color-neutral-border: var(--color-gray-940);
128
- --color-primary-solid: var(--color-primary-600);
129
- --color-primary-solid-hover: var(--color-primary-700);
130
- --color-primary-on-solid: var(--color-white);
131
+ --color-primary-solid: var(--color-primary-800);
132
+ --color-primary-solid-hover: var(--color-primary-900);
133
+ --color-primary-on-solid: var(--color-gray-985);
131
134
  --color-primary-subtle: var(--color-primary-50);
132
- --color-primary-on-subtle: var(--color-primary-700);
135
+ --color-primary-on-subtle: var(--color-primary-900);
133
136
  --color-primary-border: var(--color-primary-200);
134
137
  --color-success-solid: var(--color-green-550);
135
138
  --color-success-solid-hover: var(--color-green-520);
@@ -146,7 +149,7 @@
146
149
  --color-danger-solid: var(--color-red-577);
147
150
  --color-danger-solid-hover: var(--color-red-520);
148
151
  --color-danger-on-solid: var(--color-white);
149
- --color-danger-subtle: var(--color-danger-50);
152
+ --color-danger-subtle: var(--color-danger-100);
150
153
  --color-danger-on-subtle: var(--color-danger-700);
151
154
  --color-danger-border: var(--color-danger-200);
152
155
  --spacing-0: 0rem;
@@ -164,11 +167,11 @@
164
167
  --spacing-24: 6rem;
165
168
  --spacing-px: 1px;
166
169
  --radius-none: 0rem;
167
- --radius-xs: 0.25rem;
168
- --radius-sm: 0.375rem;
169
- --radius-md: 0.5rem;
170
- --radius-lg: 0.625rem;
171
- --radius-xl: 0.875rem;
170
+ --radius-xs: 0.2rem;
171
+ --radius-sm: 0.3rem;
172
+ --radius-md: 0.4rem;
173
+ --radius-lg: 0.5rem;
174
+ --radius-xl: 0.7rem;
172
175
  --radius-full: 9999px;
173
176
  --shadow-none: none;
174
177
  --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
@@ -194,8 +197,8 @@
194
197
  --z-index-popover: 500;
195
198
  --z-index-toast: 600;
196
199
  --z-index-tooltip: 700;
197
- --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
198
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
200
+ --font-sans: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
201
+ --font-mono: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
199
202
  --text-xs: 0.75rem;
200
203
  --text-xs--line-height: 1rem;
201
204
  --text-sm: 0.875rem;
@@ -229,7 +232,7 @@
229
232
  --color-muted: var(--color-gray-269);
230
233
  --color-accent: var(--color-gray-269);
231
234
  --color-surface-active: var(--color-gray-371);
232
- --color-surface-selected: var(--color-primary-950);
235
+ --color-surface-selected: var(--color-gray-269);
233
236
  --color-surface-disabled: var(--color-gray-269);
234
237
  --color-skeleton: var(--color-gray-269);
235
238
  --color-foreground: var(--color-gray-985);
@@ -240,7 +243,7 @@
240
243
  --color-border-strong: var(--color-white-alpha-15);
241
244
  --color-border-subtle: var(--color-white-alpha-8);
242
245
  --color-input: var(--color-white-alpha-15);
243
- --color-ring: var(--color-primary-400);
246
+ --color-ring: var(--color-white-alpha-15);
244
247
  --color-shadow: var(--color-black);
245
248
  --color-neutral-solid: var(--color-gray-269);
246
249
  --color-neutral-solid-hover: var(--color-gray-371);
@@ -248,12 +251,12 @@
248
251
  --color-neutral-subtle: var(--color-gray-269);
249
252
  --color-neutral-on-subtle: var(--color-gray-985);
250
253
  --color-neutral-border: var(--color-gray-371);
251
- --color-primary-solid: var(--color-primary-400);
252
- --color-primary-solid-hover: var(--color-primary-300);
253
- --color-primary-on-solid: var(--color-gray-145);
254
- --color-primary-subtle: var(--color-primary-950);
255
- --color-primary-on-subtle: var(--color-primary-300);
256
- --color-primary-border: var(--color-primary-800);
254
+ --color-primary-solid: var(--color-primary-100);
255
+ --color-primary-solid-hover: var(--color-primary-50);
256
+ --color-primary-on-solid: var(--color-primary-900);
257
+ --color-primary-subtle: var(--color-primary-900);
258
+ --color-primary-on-subtle: var(--color-primary-200);
259
+ --color-primary-border: var(--color-primary-700);
257
260
  --color-success-solid: var(--color-green-550);
258
261
  --color-success-solid-hover: var(--color-green-520);
259
262
  --color-success-on-solid: var(--color-white);
@@ -269,9 +272,9 @@
269
272
  --color-danger-solid: var(--color-red-577);
270
273
  --color-danger-solid-hover: var(--color-red-520);
271
274
  --color-danger-on-solid: var(--color-white);
272
- --color-danger-subtle: var(--color-danger-950);
273
- --color-danger-on-subtle: var(--color-danger-300);
274
- --color-danger-border: var(--color-danger-800);
275
+ --color-danger-subtle: var(--color-red-260);
276
+ --color-danger-on-subtle: var(--color-red-850);
277
+ --color-danger-border: var(--color-red-350);
275
278
  }
276
279
  * { box-sizing: border-box; }
277
280
  body {
@@ -374,7 +377,7 @@
374
377
  <td><code>--color-surface-selected</code></td>
375
378
  <td><span class="dot" style="background: var(--color-surface-selected)"></span></td>
376
379
  <td><code class="ref">var(--color-primary-50)</code></td>
377
- <td><code class="ref">var(--color-primary-950)</code></td>
380
+ <td><code class="ref">var(--color-gray-269)</code></td>
378
381
  </tr>
379
382
  <tr>
380
383
  <td><code>--color-surface-disabled</code></td>
@@ -433,14 +436,14 @@
433
436
  <tr>
434
437
  <td><code>--color-input</code></td>
435
438
  <td><span class="dot" style="background: var(--color-input)"></span></td>
436
- <td><code class="ref">var(--color-gray-642)</code></td>
439
+ <td><code class="ref">var(--color-gray-870)</code></td>
437
440
  <td><code class="ref">var(--color-white-alpha-15)</code></td>
438
441
  </tr>
439
442
  <tr>
440
443
  <td><code>--color-ring</code></td>
441
444
  <td><span class="dot" style="background: var(--color-ring)"></span></td>
442
- <td><code class="ref">var(--color-primary-600)</code></td>
443
- <td><code class="ref">var(--color-primary-400)</code></td>
445
+ <td><code class="ref">var(--color-gray-708)</code></td>
446
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
444
447
  </tr>
445
448
  <tr>
446
449
  <td><code>--color-shadow</code></td>
@@ -487,38 +490,38 @@
487
490
  <tr>
488
491
  <td><code>--color-primary-solid</code></td>
489
492
  <td><span class="dot" style="background: var(--color-primary-solid)"></span></td>
490
- <td><code class="ref">var(--color-primary-600)</code></td>
491
- <td><code class="ref">var(--color-primary-400)</code></td>
493
+ <td><code class="ref">var(--color-primary-800)</code></td>
494
+ <td><code class="ref">var(--color-primary-100)</code></td>
492
495
  </tr>
493
496
  <tr>
494
497
  <td><code>--color-primary-solid-hover</code></td>
495
498
  <td><span class="dot" style="background: var(--color-primary-solid-hover)"></span></td>
496
- <td><code class="ref">var(--color-primary-700)</code></td>
497
- <td><code class="ref">var(--color-primary-300)</code></td>
499
+ <td><code class="ref">var(--color-primary-900)</code></td>
500
+ <td><code class="ref">var(--color-primary-50)</code></td>
498
501
  </tr>
499
502
  <tr>
500
503
  <td><code>--color-primary-on-solid</code></td>
501
504
  <td><span class="dot" style="background: var(--color-primary-on-solid)"></span></td>
502
- <td><code class="ref">var(--color-white)</code></td>
503
- <td><code class="ref">var(--color-gray-145)</code></td>
505
+ <td><code class="ref">var(--color-gray-985)</code></td>
506
+ <td><code class="ref">var(--color-primary-900)</code></td>
504
507
  </tr>
505
508
  <tr>
506
509
  <td><code>--color-primary-subtle</code></td>
507
510
  <td><span class="dot" style="background: var(--color-primary-subtle)"></span></td>
508
511
  <td><code class="ref">var(--color-primary-50)</code></td>
509
- <td><code class="ref">var(--color-primary-950)</code></td>
512
+ <td><code class="ref">var(--color-primary-900)</code></td>
510
513
  </tr>
511
514
  <tr>
512
515
  <td><code>--color-primary-on-subtle</code></td>
513
516
  <td><span class="dot" style="background: var(--color-primary-on-subtle)"></span></td>
514
- <td><code class="ref">var(--color-primary-700)</code></td>
515
- <td><code class="ref">var(--color-primary-300)</code></td>
517
+ <td><code class="ref">var(--color-primary-900)</code></td>
518
+ <td><code class="ref">var(--color-primary-200)</code></td>
516
519
  </tr>
517
520
  <tr>
518
521
  <td><code>--color-primary-border</code></td>
519
522
  <td><span class="dot" style="background: var(--color-primary-border)"></span></td>
520
523
  <td><code class="ref">var(--color-primary-200)</code></td>
521
- <td><code class="ref">var(--color-primary-800)</code></td>
524
+ <td><code class="ref">var(--color-primary-700)</code></td>
522
525
  </tr>
523
526
  <tr>
524
527
  <td><code>--color-success-solid</code></td>
@@ -613,20 +616,20 @@
613
616
  <tr>
614
617
  <td><code>--color-danger-subtle</code></td>
615
618
  <td><span class="dot" style="background: var(--color-danger-subtle)"></span></td>
616
- <td><code class="ref">var(--color-danger-50)</code></td>
617
- <td><code class="ref">var(--color-danger-950)</code></td>
619
+ <td><code class="ref">var(--color-danger-100)</code></td>
620
+ <td><code class="ref">var(--color-red-260)</code></td>
618
621
  </tr>
619
622
  <tr>
620
623
  <td><code>--color-danger-on-subtle</code></td>
621
624
  <td><span class="dot" style="background: var(--color-danger-on-subtle)"></span></td>
622
625
  <td><code class="ref">var(--color-danger-700)</code></td>
623
- <td><code class="ref">var(--color-danger-300)</code></td>
626
+ <td><code class="ref">var(--color-red-850)</code></td>
624
627
  </tr>
625
628
  <tr>
626
629
  <td><code>--color-danger-border</code></td>
627
630
  <td><span class="dot" style="background: var(--color-danger-border)"></span></td>
628
631
  <td><code class="ref">var(--color-danger-200)</code></td>
629
- <td><code class="ref">var(--color-danger-800)</code></td>
632
+ <td><code class="ref">var(--color-red-350)</code></td>
630
633
  </tr></tbody>
631
634
  </table>
632
635
 
@@ -688,59 +691,59 @@
688
691
  <code class="val">oklch(0.13 0.036 264)</code>
689
692
  </div></div></section><section><h3>primary</h3><div class="scale">
690
693
  <div class="swatch">
691
- <div class="chip" style="background: oklch(0.97 0.014 259)"></div>
694
+ <div class="chip" style="background: oklch(0.975 0.01 48)"></div>
692
695
  <code class="step">primary-50</code>
693
- <code class="val">oklch(0.97 0.014 259)</code>
696
+ <code class="val">oklch(0.975 0.01 48)</code>
694
697
  </div>
695
698
  <div class="swatch">
696
- <div class="chip" style="background: oklch(0.936 0.03 259)"></div>
699
+ <div class="chip" style="background: oklch(0.95 0.014 48)"></div>
697
700
  <code class="step">primary-100</code>
698
- <code class="val">oklch(0.936 0.03 259)</code>
701
+ <code class="val">oklch(0.95 0.014 48)</code>
699
702
  </div>
700
703
  <div class="swatch">
701
- <div class="chip" style="background: oklch(0.885 0.055 259)"></div>
704
+ <div class="chip" style="background: oklch(0.90 0.02 48)"></div>
702
705
  <code class="step">primary-200</code>
703
- <code class="val">oklch(0.885 0.055 259)</code>
706
+ <code class="val">oklch(0.90 0.02 48)</code>
704
707
  </div>
705
708
  <div class="swatch">
706
- <div class="chip" style="background: oklch(0.809 0.095 259)"></div>
709
+ <div class="chip" style="background: oklch(0.80 0.026 48)"></div>
707
710
  <code class="step">primary-300</code>
708
- <code class="val">oklch(0.809 0.095 259)</code>
711
+ <code class="val">oklch(0.80 0.026 48)</code>
709
712
  </div>
710
713
  <div class="swatch">
711
- <div class="chip" style="background: oklch(0.715 0.147 259)"></div>
714
+ <div class="chip" style="background: oklch(0.68 0.032 48)"></div>
712
715
  <code class="step">primary-400</code>
713
- <code class="val">oklch(0.715 0.147 259)</code>
716
+ <code class="val">oklch(0.68 0.032 48)</code>
714
717
  </div>
715
718
  <div class="swatch">
716
- <div class="chip" style="background: oklch(0.623 0.201 259)"></div>
719
+ <div class="chip" style="background: oklch(0.50 0.036 48)"></div>
717
720
  <code class="step">primary-500</code>
718
- <code class="val">oklch(0.623 0.201 259)</code>
721
+ <code class="val">oklch(0.50 0.036 48)</code>
719
722
  </div>
720
723
  <div class="swatch">
721
- <div class="chip" style="background: oklch(0.546 0.209 259)"></div>
724
+ <div class="chip" style="background: oklch(0.40 0.037 48)"></div>
722
725
  <code class="step">primary-600</code>
723
- <code class="val">oklch(0.546 0.209 259)</code>
726
+ <code class="val">oklch(0.40 0.037 48)</code>
724
727
  </div>
725
728
  <div class="swatch">
726
- <div class="chip" style="background: oklch(0.488 0.187 259)"></div>
729
+ <div class="chip" style="background: oklch(0.35 0.037 48)"></div>
727
730
  <code class="step">primary-700</code>
728
- <code class="val">oklch(0.488 0.187 259)</code>
731
+ <code class="val">oklch(0.35 0.037 48)</code>
729
732
  </div>
730
733
  <div class="swatch">
731
- <div class="chip" style="background: oklch(0.442 0.165 259)"></div>
734
+ <div class="chip" style="background: oklch(0.31 0.038 48)"></div>
732
735
  <code class="step">primary-800</code>
733
- <code class="val">oklch(0.442 0.165 259)</code>
736
+ <code class="val">oklch(0.31 0.038 48)</code>
734
737
  </div>
735
738
  <div class="swatch">
736
- <div class="chip" style="background: oklch(0.396 0.135 259)"></div>
739
+ <div class="chip" style="background: oklch(0.26 0.032 48)"></div>
737
740
  <code class="step">primary-900</code>
738
- <code class="val">oklch(0.396 0.135 259)</code>
741
+ <code class="val">oklch(0.26 0.032 48)</code>
739
742
  </div>
740
743
  <div class="swatch">
741
- <div class="chip" style="background: oklch(0.282 0.086 259)"></div>
744
+ <div class="chip" style="background: oklch(0.18 0.024 48)"></div>
742
745
  <code class="step">primary-950</code>
743
- <code class="val">oklch(0.282 0.086 259)</code>
746
+ <code class="val">oklch(0.18 0.024 48)</code>
744
747
  </div></div></section><section><h3>success</h3><div class="scale">
745
748
  <div class="swatch">
746
749
  <div class="chip" style="background: oklch(0.97 0.014 152)"></div>
@@ -1084,13 +1087,13 @@
1084
1087
  <section><h3>font family</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1085
1088
  <tr>
1086
1089
  <td><code>--font-sans</code></td>
1087
- <td><code class="ref">ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif</code></td>
1088
- <td><span style="font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif">Rows 1&ndash;50</span></td>
1090
+ <td><code class="ref">"Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif</code></td>
1091
+ <td><span style="font-family: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif">Rows 1&ndash;50</span></td>
1089
1092
  </tr>
1090
1093
  <tr>
1091
1094
  <td><code>--font-mono</code></td>
1092
- <td><code class="ref">ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace</code></td>
1093
- <td><span style="font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace">Rows 1&ndash;50</span></td>
1095
+ <td><code class="ref">"Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace</code></td>
1096
+ <td><span style="font-family: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace">Rows 1&ndash;50</span></td>
1094
1097
  </tr></tbody></table></section>
1095
1098
 
1096
1099
  <h2>Radii</h2>
@@ -1102,28 +1105,28 @@
1102
1105
  </tr>
1103
1106
  <tr>
1104
1107
  <td><code>--radius-xs</code></td>
1105
- <td><code class="ref">0.25rem</code></td>
1106
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.25rem"></div></td>
1108
+ <td><code class="ref">0.2rem</code></td>
1109
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.2rem"></div></td>
1107
1110
  </tr>
1108
1111
  <tr>
1109
1112
  <td><code>--radius-sm</code></td>
1110
- <td><code class="ref">0.375rem</code></td>
1111
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.375rem"></div></td>
1113
+ <td><code class="ref">0.3rem</code></td>
1114
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.3rem"></div></td>
1112
1115
  </tr>
1113
1116
  <tr>
1114
1117
  <td><code>--radius-md</code></td>
1115
- <td><code class="ref">0.5rem</code></td>
1116
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.5rem"></div></td>
1118
+ <td><code class="ref">0.4rem</code></td>
1119
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.4rem"></div></td>
1117
1120
  </tr>
1118
1121
  <tr>
1119
1122
  <td><code>--radius-lg</code></td>
1120
- <td><code class="ref">0.625rem</code></td>
1121
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.625rem"></div></td>
1123
+ <td><code class="ref">0.5rem</code></td>
1124
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.5rem"></div></td>
1122
1125
  </tr>
1123
1126
  <tr>
1124
1127
  <td><code>--radius-xl</code></td>
1125
- <td><code class="ref">0.875rem</code></td>
1126
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.875rem"></div></td>
1128
+ <td><code class="ref">0.7rem</code></td>
1129
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.7rem"></div></td>
1127
1130
  </tr>
1128
1131
  <tr>
1129
1132
  <td><code>--radius-full</code></td>
package/dist/tokens.css CHANGED
@@ -29,8 +29,11 @@
29
29
  --color-gray-972: oklch(0.972 0.003 264);
30
30
  --color-gray-985: oklch(0.985 0 0);
31
31
  --color-gray-988: oklch(0.988 0.002 264);
32
+ --color-red-260: oklch(0.32 0.045 25);
33
+ --color-red-350: oklch(0.38 0.055 25);
32
34
  --color-red-520: oklch(0.52 0.212 27.325);
33
35
  --color-red-577: oklch(0.577 0.235 27.325);
36
+ --color-red-850: oklch(0.85 0.08 25);
34
37
  --color-green-260: oklch(0.26 0.068 152);
35
38
  --color-green-350: oklch(0.35 0.092 152);
36
39
  --color-green-400: oklch(0.4 0.105 152);
@@ -61,17 +64,17 @@
61
64
  --color-neutral-800: oklch(0.279 0.03 264);
62
65
  --color-neutral-900: oklch(0.21 0.033 264);
63
66
  --color-neutral-950: oklch(0.13 0.036 264);
64
- --color-primary-50: oklch(0.97 0.014 259);
65
- --color-primary-100: oklch(0.936 0.03 259);
66
- --color-primary-200: oklch(0.885 0.055 259);
67
- --color-primary-300: oklch(0.809 0.095 259);
68
- --color-primary-400: oklch(0.715 0.147 259);
69
- --color-primary-500: oklch(0.623 0.201 259);
70
- --color-primary-600: oklch(0.546 0.209 259);
71
- --color-primary-700: oklch(0.488 0.187 259);
72
- --color-primary-800: oklch(0.442 0.165 259);
73
- --color-primary-900: oklch(0.396 0.135 259);
74
- --color-primary-950: oklch(0.282 0.086 259);
67
+ --color-primary-50: oklch(0.975 0.01 48);
68
+ --color-primary-100: oklch(0.95 0.014 48);
69
+ --color-primary-200: oklch(0.90 0.02 48);
70
+ --color-primary-300: oklch(0.80 0.026 48);
71
+ --color-primary-400: oklch(0.68 0.032 48);
72
+ --color-primary-500: oklch(0.50 0.036 48);
73
+ --color-primary-600: oklch(0.40 0.037 48);
74
+ --color-primary-700: oklch(0.35 0.037 48);
75
+ --color-primary-800: oklch(0.31 0.038 48);
76
+ --color-primary-900: oklch(0.26 0.032 48);
77
+ --color-primary-950: oklch(0.18 0.024 48);
75
78
  --color-success-50: oklch(0.97 0.014 152);
76
79
  --color-success-100: oklch(0.936 0.036 152);
77
80
  --color-success-200: oklch(0.885 0.064 152);
@@ -122,8 +125,8 @@
122
125
  --color-border: var(--color-gray-940);
123
126
  --color-border-strong: var(--color-gray-905);
124
127
  --color-border-subtle: var(--color-gray-972);
125
- --color-input: var(--color-gray-642);
126
- --color-ring: var(--color-primary-600);
128
+ --color-input: var(--color-gray-870);
129
+ --color-ring: var(--color-gray-708);
127
130
  --color-shadow: var(--color-black);
128
131
  --color-neutral-solid: var(--color-gray-972);
129
132
  --color-neutral-solid-hover: var(--color-gray-940);
@@ -131,11 +134,11 @@
131
134
  --color-neutral-subtle: var(--color-gray-972);
132
135
  --color-neutral-on-subtle: var(--color-gray-205);
133
136
  --color-neutral-border: var(--color-gray-940);
134
- --color-primary-solid: var(--color-primary-600);
135
- --color-primary-solid-hover: var(--color-primary-700);
136
- --color-primary-on-solid: var(--color-white);
137
+ --color-primary-solid: var(--color-primary-800);
138
+ --color-primary-solid-hover: var(--color-primary-900);
139
+ --color-primary-on-solid: var(--color-gray-985);
137
140
  --color-primary-subtle: var(--color-primary-50);
138
- --color-primary-on-subtle: var(--color-primary-700);
141
+ --color-primary-on-subtle: var(--color-primary-900);
139
142
  --color-primary-border: var(--color-primary-200);
140
143
  --color-success-solid: var(--color-green-550);
141
144
  --color-success-solid-hover: var(--color-green-520);
@@ -152,7 +155,7 @@
152
155
  --color-danger-solid: var(--color-red-577);
153
156
  --color-danger-solid-hover: var(--color-red-520);
154
157
  --color-danger-on-solid: var(--color-white);
155
- --color-danger-subtle: var(--color-danger-50);
158
+ --color-danger-subtle: var(--color-danger-100);
156
159
  --color-danger-on-subtle: var(--color-danger-700);
157
160
  --color-danger-border: var(--color-danger-200);
158
161
 
@@ -174,8 +177,8 @@
174
177
  --spacing-px: 1px;
175
178
 
176
179
  /* typography */
177
- --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
178
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
180
+ --font-sans: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
181
+ --font-mono: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
179
182
  --text-xs: 0.75rem;
180
183
  --text-xs--line-height: 1rem;
181
184
  --text-sm: 0.875rem;
@@ -248,7 +251,7 @@
248
251
 
249
252
  /* The one length the radius scale multiplies. Override to retune every corner. */
250
253
  :root {
251
- --radius: 0.625rem;
254
+ --radius: 0.5rem;
252
255
  }
253
256
 
254
257
  /* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */
@@ -258,7 +261,7 @@
258
261
  --color-muted: var(--color-gray-269);
259
262
  --color-accent: var(--color-gray-269);
260
263
  --color-surface-active: var(--color-gray-371);
261
- --color-surface-selected: var(--color-primary-950);
264
+ --color-surface-selected: var(--color-gray-269);
262
265
  --color-surface-disabled: var(--color-gray-269);
263
266
  --color-skeleton: var(--color-gray-269);
264
267
  --color-foreground: var(--color-gray-985);
@@ -269,7 +272,7 @@
269
272
  --color-border-strong: var(--color-white-alpha-15);
270
273
  --color-border-subtle: var(--color-white-alpha-8);
271
274
  --color-input: var(--color-white-alpha-15);
272
- --color-ring: var(--color-primary-400);
275
+ --color-ring: var(--color-white-alpha-15);
273
276
  --color-shadow: var(--color-black);
274
277
  --color-neutral-solid: var(--color-gray-269);
275
278
  --color-neutral-solid-hover: var(--color-gray-371);
@@ -277,12 +280,12 @@
277
280
  --color-neutral-subtle: var(--color-gray-269);
278
281
  --color-neutral-on-subtle: var(--color-gray-985);
279
282
  --color-neutral-border: var(--color-gray-371);
280
- --color-primary-solid: var(--color-primary-400);
281
- --color-primary-solid-hover: var(--color-primary-300);
282
- --color-primary-on-solid: var(--color-gray-145);
283
- --color-primary-subtle: var(--color-primary-950);
284
- --color-primary-on-subtle: var(--color-primary-300);
285
- --color-primary-border: var(--color-primary-800);
283
+ --color-primary-solid: var(--color-primary-100);
284
+ --color-primary-solid-hover: var(--color-primary-50);
285
+ --color-primary-on-solid: var(--color-primary-900);
286
+ --color-primary-subtle: var(--color-primary-900);
287
+ --color-primary-on-subtle: var(--color-primary-200);
288
+ --color-primary-border: var(--color-primary-700);
286
289
  --color-success-solid: var(--color-green-550);
287
290
  --color-success-solid-hover: var(--color-green-520);
288
291
  --color-success-on-solid: var(--color-white);
@@ -298,7 +301,7 @@
298
301
  --color-danger-solid: var(--color-red-577);
299
302
  --color-danger-solid-hover: var(--color-red-520);
300
303
  --color-danger-on-solid: var(--color-white);
301
- --color-danger-subtle: var(--color-danger-950);
302
- --color-danger-on-subtle: var(--color-danger-300);
303
- --color-danger-border: var(--color-danger-800);
304
+ --color-danger-subtle: var(--color-red-260);
305
+ --color-danger-on-subtle: var(--color-red-850);
306
+ --color-danger-border: var(--color-red-350);
304
307
  }
package/dist/typography.d.ts CHANGED
@@ -5,7 +5,14 @@
5
5
  * between 12px and 16px, and the sizes above `xl` exist for empty states and
6
6
  * page titles rather than for data.
7
7
  */
8
- /** Font families. Both stacks start with a system font — no webfont request. */
8
+ /**
9
+ * Font families.
10
+ *
11
+ * rowkit's face is **Geist** — designed for tools, not marketing pages. The
12
+ * stack names the webfont first; system fallbacks keep layout honest before
13
+ * the file lands. Loading the font is the app's job (one import from
14
+ * `@fontsource-variable/geist`); without it, the stack falls through cleanly.
15
+ */
9
16
  export declare const fontFamily: {
10
17
  /** UI and body text. */
11
18
  readonly sans: string;
@@ -60,11 +67,11 @@ export declare const fontSize: {
60
67
  export declare const fontWeight: {
61
68
  /** Body text. */
62
69
  readonly normal: "400";
63
- /** Column headers, subtle emphasis. */
70
+ /** Buttons, labels, card titles — prefer this over semibold in dense UI. */
64
71
  readonly medium: "500";
65
- /** Buttons, card titles. */
72
+ /** Page titles and dialog headings. */
66
73
  readonly semibold: "600";
67
- /** Page titles. */
74
+ /** Display only. Rarely needed in data views. */
68
75
  readonly bold: "700";
69
76
  };
70
77
  /** Letter spacing. Tightening only pays off at display sizes. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rowkit/tokens",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Design tokens for rowkit — consumable without importing components.",
5
5
  "license": "MIT",
6
6
  "author": "Nikolai Kushner",