@rowkit/tokens 0.1.1 → 0.2.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 (11) hide show
  1. package/README.md +5 -3
  2. package/dist/blur.d.ts +18 -0
  3. package/dist/color.d.ts +252 -33
  4. package/dist/index.d.ts +116 -23
  5. package/dist/index.js +267 -184
  6. package/dist/index.js.map +1 -1
  7. package/dist/radius.d.ts +61 -15
  8. package/dist/reference.html +231 -187
  9. package/dist/shadow.d.ts +12 -1
  10. package/dist/tokens.css +128 -81
  11. package/package.json +1 -1
package/dist/shadow.d.ts CHANGED
@@ -23,7 +23,18 @@ export declare const shadow: {
23
23
  /** Modal dialogs. */
24
24
  readonly xl: "0 20px 25px -5px color-mix(in oklab, var(--color-shadow) 12%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--color-shadow) 12%, transparent)";
25
25
  /** Horizontal-scroll affordance on a sticky table column. */
26
- readonly 'scroll-x': "8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)";
26
+ readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
27
+ /**
28
+ * The rule under a sticky table header, drawn as a shadow rather than a
29
+ * border.
30
+ *
31
+ * Under `border-collapse` a border belongs to the table's grid, not to any
32
+ * cell, so a `position: sticky` header leaves its border behind and scrolls
33
+ * away from it — the rows then slide under a header with nothing between
34
+ * them, which is the one thing a sticky header exists to prevent. A shadow
35
+ * belongs to the element and travels with it.
36
+ */
37
+ readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
27
38
  };
28
39
  /** Names of every shadow token. */
29
40
  export type ShadowName = keyof typeof shadow;
package/dist/tokens.css CHANGED
@@ -12,6 +12,44 @@
12
12
  /* colour primitives — the only literal colours in rowkit */
13
13
  --color-white: oklch(1 0 0);
14
14
  --color-black: oklch(0 0 0);
15
+ --color-gray-145: oklch(0.145 0 0);
16
+ --color-gray-205: oklch(0.205 0 0);
17
+ --color-gray-269: oklch(0.269 0 0);
18
+ --color-gray-371: oklch(0.371 0 0);
19
+ --color-gray-535: oklch(0.535 0 0);
20
+ --color-gray-556: oklch(0.556 0 0);
21
+ --color-gray-635: oklch(0.635 0 0);
22
+ --color-gray-642: oklch(0.642 0.012 264);
23
+ --color-gray-708: oklch(0.708 0 0);
24
+ --color-gray-870: oklch(0.87 0 0);
25
+ --color-gray-905: oklch(0.905 0.006 264);
26
+ --color-gray-922: oklch(0.922 0 0);
27
+ --color-gray-940: oklch(0.940 0.004 264);
28
+ --color-gray-970: oklch(0.97 0 0);
29
+ --color-gray-972: oklch(0.972 0.003 264);
30
+ --color-gray-985: oklch(0.985 0 0);
31
+ --color-gray-988: oklch(0.988 0.002 264);
32
+ --color-red-520: oklch(0.52 0.212 27.325);
33
+ --color-red-577: oklch(0.577 0.235 27.325);
34
+ --color-green-260: oklch(0.26 0.068 152);
35
+ --color-green-350: oklch(0.35 0.092 152);
36
+ --color-green-400: oklch(0.4 0.105 152);
37
+ --color-green-520: oklch(0.52 0.136 152);
38
+ --color-green-550: oklch(0.55 0.144 152);
39
+ --color-green-850: oklch(0.85 0.12 152);
40
+ --color-green-880: oklch(0.88 0.05 152);
41
+ --color-green-950: oklch(0.95 0.05 152);
42
+ --color-amber-260: oklch(0.26 0.055 75);
43
+ --color-amber-350: oklch(0.35 0.074 75);
44
+ --color-amber-400: oklch(0.4 0.084 75);
45
+ --color-amber-520: oklch(0.52 0.109 75);
46
+ --color-amber-550: oklch(0.55 0.116 75);
47
+ --color-amber-850: oklch(0.85 0.12 75);
48
+ --color-amber-880: oklch(0.88 0.05 75);
49
+ --color-amber-950: oklch(0.95 0.04 75);
50
+ --color-white-alpha-8: oklch(1 0 0 / 8%);
51
+ --color-white-alpha-10: oklch(1 0 0 / 10%);
52
+ --color-white-alpha-15: oklch(1 0 0 / 15%);
15
53
  --color-neutral-50: oklch(0.984 0.003 264);
16
54
  --color-neutral-100: oklch(0.968 0.004 264);
17
55
  --color-neutral-200: oklch(0.928 0.006 264);
@@ -69,50 +107,50 @@
69
107
  --color-danger-950: oklch(0.282 0.086 25);
70
108
 
71
109
  /* semantic colours — light (defaults) */
72
- --color-background: var(--color-neutral-50);
73
- --color-surface: var(--color-white);
74
- --color-surface-subtle: var(--color-neutral-100);
75
- --color-surface-hover: var(--color-neutral-100);
76
- --color-surface-active: var(--color-neutral-200);
110
+ --color-background: var(--color-gray-988);
111
+ --color-card: var(--color-white);
112
+ --color-muted: var(--color-gray-972);
113
+ --color-accent: var(--color-gray-972);
114
+ --color-surface-active: var(--color-gray-940);
77
115
  --color-surface-selected: var(--color-primary-50);
78
- --color-surface-disabled: var(--color-neutral-100);
79
- --color-skeleton: var(--color-neutral-200);
80
- --color-text: var(--color-neutral-900);
81
- --color-text-muted: var(--color-neutral-600);
82
- --color-text-subtle: var(--color-neutral-400);
83
- --color-text-disabled: var(--color-neutral-400);
84
- --color-border: var(--color-neutral-200);
85
- --color-border-strong: var(--color-neutral-300);
86
- --color-border-subtle: var(--color-neutral-100);
87
- --color-border-control: var(--color-neutral-500);
88
- --color-focus-ring: var(--color-primary-600);
89
- --color-shadow: var(--color-neutral-950);
90
- --color-neutral-solid: var(--color-neutral-700);
91
- --color-neutral-solid-hover: var(--color-neutral-800);
92
- --color-neutral-on-solid: var(--color-white);
93
- --color-neutral-subtle: var(--color-neutral-100);
94
- --color-neutral-on-subtle: var(--color-neutral-700);
95
- --color-neutral-border: var(--color-neutral-200);
116
+ --color-surface-disabled: var(--color-gray-972);
117
+ --color-skeleton: var(--color-gray-972);
118
+ --color-foreground: var(--color-gray-145);
119
+ --color-muted-foreground: var(--color-gray-535);
120
+ --color-text-subtle: var(--color-gray-635);
121
+ --color-text-disabled: var(--color-gray-708);
122
+ --color-border: var(--color-gray-940);
123
+ --color-border-strong: var(--color-gray-905);
124
+ --color-border-subtle: var(--color-gray-972);
125
+ --color-input: var(--color-gray-642);
126
+ --color-ring: var(--color-primary-600);
127
+ --color-shadow: var(--color-black);
128
+ --color-neutral-solid: var(--color-gray-972);
129
+ --color-neutral-solid-hover: var(--color-gray-940);
130
+ --color-neutral-on-solid: var(--color-gray-205);
131
+ --color-neutral-subtle: var(--color-gray-972);
132
+ --color-neutral-on-subtle: var(--color-gray-205);
133
+ --color-neutral-border: var(--color-gray-940);
96
134
  --color-primary-solid: var(--color-primary-600);
97
135
  --color-primary-solid-hover: var(--color-primary-700);
98
136
  --color-primary-on-solid: var(--color-white);
99
137
  --color-primary-subtle: var(--color-primary-50);
100
138
  --color-primary-on-subtle: var(--color-primary-700);
101
139
  --color-primary-border: var(--color-primary-200);
102
- --color-success-solid: var(--color-success-600);
103
- --color-success-solid-hover: var(--color-success-700);
140
+ --color-success-solid: var(--color-green-550);
141
+ --color-success-solid-hover: var(--color-green-520);
104
142
  --color-success-on-solid: var(--color-white);
105
- --color-success-subtle: var(--color-success-50);
106
- --color-success-on-subtle: var(--color-success-700);
107
- --color-success-border: var(--color-success-200);
108
- --color-warning-solid: var(--color-warning-600);
109
- --color-warning-solid-hover: var(--color-warning-500);
110
- --color-warning-on-solid: var(--color-neutral-900);
111
- --color-warning-subtle: var(--color-warning-50);
112
- --color-warning-on-subtle: var(--color-warning-700);
113
- --color-warning-border: var(--color-warning-200);
114
- --color-danger-solid: var(--color-danger-600);
115
- --color-danger-solid-hover: var(--color-danger-700);
143
+ --color-success-subtle: var(--color-green-950);
144
+ --color-success-on-subtle: var(--color-green-400);
145
+ --color-success-border: var(--color-green-880);
146
+ --color-warning-solid: var(--color-amber-550);
147
+ --color-warning-solid-hover: var(--color-amber-520);
148
+ --color-warning-on-solid: var(--color-white);
149
+ --color-warning-subtle: var(--color-amber-950);
150
+ --color-warning-on-subtle: var(--color-amber-400);
151
+ --color-warning-border: var(--color-amber-880);
152
+ --color-danger-solid: var(--color-red-577);
153
+ --color-danger-solid-hover: var(--color-red-520);
116
154
  --color-danger-on-solid: var(--color-white);
117
155
  --color-danger-subtle: var(--color-danger-50);
118
156
  --color-danger-on-subtle: var(--color-danger-700);
@@ -165,15 +203,18 @@
165
203
  --leading-normal: 1.5;
166
204
  --leading-relaxed: 1.625;
167
205
 
168
- /* radii */
206
+ /* radii — multiples of --radius, declared in :root below */
169
207
  --radius-none: 0rem;
170
- --radius-xs: 0.125rem;
171
- --radius-sm: 0.25rem;
172
- --radius-md: 0.375rem;
173
- --radius-lg: 0.5rem;
174
- --radius-xl: 0.75rem;
208
+ --radius-xs: calc(var(--radius) * 0.4);
209
+ --radius-sm: calc(var(--radius) * 0.6);
210
+ --radius-md: calc(var(--radius) * 0.8);
211
+ --radius-lg: var(--radius);
212
+ --radius-xl: calc(var(--radius) * 1.4);
175
213
  --radius-full: 9999px;
176
214
 
215
+ /* blur */
216
+ --blur-overlay: 4px;
217
+
177
218
  /* shadows */
178
219
  --shadow-none: none;
179
220
  --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
@@ -181,7 +222,8 @@
181
222
  --shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--color-shadow) 9%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--color-shadow) 9%, transparent);
182
223
  --shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--color-shadow) 10%, transparent);
183
224
  --shadow-xl: 0 20px 25px -5px color-mix(in oklab, var(--color-shadow) 12%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--color-shadow) 12%, transparent);
184
- --shadow-scroll-x: 8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent);
225
+ --shadow-scroll-x: 12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent);
226
+ --shadow-sticky-header: inset 0 -1px 0 var(--color-border);
185
227
 
186
228
  /* motion */
187
229
  --transition-duration-instant: 0ms;
@@ -204,53 +246,58 @@
204
246
  --z-index-tooltip: 700;
205
247
  }
206
248
 
249
+ /* The one length the radius scale multiplies. Override to retune every corner. */
250
+ :root {
251
+ --radius: 0.625rem;
252
+ }
253
+
207
254
  /* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */
208
255
  .dark {
209
- --color-background: var(--color-neutral-950);
210
- --color-surface: var(--color-neutral-900);
211
- --color-surface-subtle: var(--color-neutral-800);
212
- --color-surface-hover: var(--color-neutral-800);
213
- --color-surface-active: var(--color-neutral-700);
256
+ --color-background: var(--color-gray-145);
257
+ --color-card: var(--color-gray-205);
258
+ --color-muted: var(--color-gray-269);
259
+ --color-accent: var(--color-gray-269);
260
+ --color-surface-active: var(--color-gray-371);
214
261
  --color-surface-selected: var(--color-primary-950);
215
- --color-surface-disabled: var(--color-neutral-800);
216
- --color-skeleton: var(--color-neutral-800);
217
- --color-text: var(--color-neutral-50);
218
- --color-text-muted: var(--color-neutral-400);
219
- --color-text-subtle: var(--color-neutral-500);
220
- --color-text-disabled: var(--color-neutral-600);
221
- --color-border: var(--color-neutral-800);
222
- --color-border-strong: var(--color-neutral-700);
223
- --color-border-subtle: var(--color-neutral-900);
224
- --color-border-control: var(--color-neutral-500);
225
- --color-focus-ring: var(--color-primary-400);
262
+ --color-surface-disabled: var(--color-gray-269);
263
+ --color-skeleton: var(--color-gray-269);
264
+ --color-foreground: var(--color-gray-985);
265
+ --color-muted-foreground: var(--color-gray-708);
266
+ --color-text-subtle: var(--color-gray-556);
267
+ --color-text-disabled: var(--color-gray-556);
268
+ --color-border: var(--color-white-alpha-8);
269
+ --color-border-strong: var(--color-white-alpha-15);
270
+ --color-border-subtle: var(--color-white-alpha-8);
271
+ --color-input: var(--color-white-alpha-15);
272
+ --color-ring: var(--color-primary-400);
226
273
  --color-shadow: var(--color-black);
227
- --color-neutral-solid: var(--color-neutral-400);
228
- --color-neutral-solid-hover: var(--color-neutral-300);
229
- --color-neutral-on-solid: var(--color-neutral-950);
230
- --color-neutral-subtle: var(--color-neutral-800);
231
- --color-neutral-on-subtle: var(--color-neutral-200);
232
- --color-neutral-border: var(--color-neutral-700);
274
+ --color-neutral-solid: var(--color-gray-269);
275
+ --color-neutral-solid-hover: var(--color-gray-371);
276
+ --color-neutral-on-solid: var(--color-gray-985);
277
+ --color-neutral-subtle: var(--color-gray-269);
278
+ --color-neutral-on-subtle: var(--color-gray-985);
279
+ --color-neutral-border: var(--color-gray-371);
233
280
  --color-primary-solid: var(--color-primary-400);
234
281
  --color-primary-solid-hover: var(--color-primary-300);
235
- --color-primary-on-solid: var(--color-neutral-950);
282
+ --color-primary-on-solid: var(--color-gray-145);
236
283
  --color-primary-subtle: var(--color-primary-950);
237
284
  --color-primary-on-subtle: var(--color-primary-300);
238
285
  --color-primary-border: var(--color-primary-800);
239
- --color-success-solid: var(--color-success-400);
240
- --color-success-solid-hover: var(--color-success-300);
241
- --color-success-on-solid: var(--color-neutral-950);
242
- --color-success-subtle: var(--color-success-950);
243
- --color-success-on-subtle: var(--color-success-300);
244
- --color-success-border: var(--color-success-800);
245
- --color-warning-solid: var(--color-warning-400);
246
- --color-warning-solid-hover: var(--color-warning-300);
247
- --color-warning-on-solid: var(--color-neutral-950);
248
- --color-warning-subtle: var(--color-warning-950);
249
- --color-warning-on-subtle: var(--color-warning-300);
250
- --color-warning-border: var(--color-warning-800);
251
- --color-danger-solid: var(--color-danger-400);
252
- --color-danger-solid-hover: var(--color-danger-300);
253
- --color-danger-on-solid: var(--color-neutral-950);
286
+ --color-success-solid: var(--color-green-550);
287
+ --color-success-solid-hover: var(--color-green-520);
288
+ --color-success-on-solid: var(--color-white);
289
+ --color-success-subtle: var(--color-green-260);
290
+ --color-success-on-subtle: var(--color-green-850);
291
+ --color-success-border: var(--color-green-350);
292
+ --color-warning-solid: var(--color-amber-550);
293
+ --color-warning-solid-hover: var(--color-amber-520);
294
+ --color-warning-on-solid: var(--color-white);
295
+ --color-warning-subtle: var(--color-amber-260);
296
+ --color-warning-on-subtle: var(--color-amber-850);
297
+ --color-warning-border: var(--color-amber-350);
298
+ --color-danger-solid: var(--color-red-577);
299
+ --color-danger-solid-hover: var(--color-red-520);
300
+ --color-danger-on-solid: var(--color-white);
254
301
  --color-danger-subtle: var(--color-danger-950);
255
302
  --color-danger-on-subtle: var(--color-danger-300);
256
303
  --color-danger-border: var(--color-danger-800);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rowkit/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Design tokens for rowkit — consumable without importing components.",
5
5
  "license": "MIT",
6
6
  "author": "Nikolai Kushner",