@dataimago/tokens 0.1.0-alpha.12 → 0.1.0-alpha.14

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/dist/index.cjs +14 -14
  2. package/dist/index.mjs +14 -14
  3. package/dist/tokens.css +30 -30
  4. package/dist/tokens.dtcg.json +14 -14
  5. package/dist/tokens.scss +30 -30
  6. package/dist/tokens.studio.json +12 -12
  7. package/dist/tokens.w3c.dtcg.json +14 -14
  8. package/package.json +1 -1
  9. package/src/effects.json +7 -7
  10. package/src/theme-colors-p3.json +28 -28
  11. package/src/theme-colors.json +8 -8
package/dist/index.cjs CHANGED
@@ -40,23 +40,23 @@ const tokens = {
40
40
  },
41
41
  "border": {
42
42
  "subtle": {
43
- "light": "rgba(12, 10, 9, 0.08)",
44
- "dark": "rgba(253, 249, 242, 0.08)",
43
+ "light": "rgba(12, 10, 9, 0.45)",
44
+ "dark": "rgba(253, 249, 242, 0.45)",
45
45
  "description": "Subtle borders — element separation"
46
46
  },
47
47
  "moderate": {
48
- "light": "rgba(12, 10, 9, 0.15)",
49
- "dark": "rgba(253, 249, 242, 0.15)",
48
+ "light": "rgba(12, 10, 9, 0.60)",
49
+ "dark": "rgba(253, 249, 242, 0.60)",
50
50
  "description": "Moderate borders — defined boundaries"
51
51
  },
52
52
  "strong": {
53
- "light": "rgba(12, 10, 9, 0.25)",
54
- "dark": "rgba(253, 249, 242, 0.25)",
53
+ "light": "rgba(12, 10, 9, 0.75)",
54
+ "dark": "rgba(253, 249, 242, 0.75)",
55
55
  "description": "Strong borders — prominent separation"
56
56
  },
57
57
  "card": {
58
- "light": "rgba(12, 10, 9, 0.15)",
59
- "dark": "rgba(253, 249, 242, 0.15)",
58
+ "light": "rgba(12, 10, 9, 0.60)",
59
+ "dark": "rgba(253, 249, 242, 0.60)",
60
60
  "description": "Card border color with transparency for subtle definition"
61
61
  },
62
62
  "code": {
@@ -226,14 +226,14 @@ const tokens = {
226
226
  },
227
227
  "border": {
228
228
  "subtle": {
229
- "light": "rgba(20, 20, 16, 0.1)",
230
- "dark": "rgba(237, 237, 235, 0.1)",
231
- "description": "Subtle borders - element separation"
229
+ "light": "rgba(20, 20, 16, 0.47)",
230
+ "dark": "rgba(237, 237, 235, 0.47)",
231
+ "description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
232
232
  },
233
233
  "moderate": {
234
- "light": "rgba(20, 20, 16, 0.15)",
235
- "dark": "rgba(237, 237, 235, 0.15)",
236
- "description": "Moderate borders - defined boundaries"
234
+ "light": "rgba(20, 20, 16, 0.63)",
235
+ "dark": "rgba(237, 237, 235, 0.63)",
236
+ "description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
237
237
  },
238
238
  "focus": {
239
239
  "light": "#3498DB",
package/dist/index.mjs CHANGED
@@ -40,23 +40,23 @@ const tokens = {
40
40
  },
41
41
  "border": {
42
42
  "subtle": {
43
- "light": "rgba(12, 10, 9, 0.08)",
44
- "dark": "rgba(253, 249, 242, 0.08)",
43
+ "light": "rgba(12, 10, 9, 0.45)",
44
+ "dark": "rgba(253, 249, 242, 0.45)",
45
45
  "description": "Subtle borders — element separation"
46
46
  },
47
47
  "moderate": {
48
- "light": "rgba(12, 10, 9, 0.15)",
49
- "dark": "rgba(253, 249, 242, 0.15)",
48
+ "light": "rgba(12, 10, 9, 0.60)",
49
+ "dark": "rgba(253, 249, 242, 0.60)",
50
50
  "description": "Moderate borders — defined boundaries"
51
51
  },
52
52
  "strong": {
53
- "light": "rgba(12, 10, 9, 0.25)",
54
- "dark": "rgba(253, 249, 242, 0.25)",
53
+ "light": "rgba(12, 10, 9, 0.75)",
54
+ "dark": "rgba(253, 249, 242, 0.75)",
55
55
  "description": "Strong borders — prominent separation"
56
56
  },
57
57
  "card": {
58
- "light": "rgba(12, 10, 9, 0.15)",
59
- "dark": "rgba(253, 249, 242, 0.15)",
58
+ "light": "rgba(12, 10, 9, 0.60)",
59
+ "dark": "rgba(253, 249, 242, 0.60)",
60
60
  "description": "Card border color with transparency for subtle definition"
61
61
  },
62
62
  "code": {
@@ -226,14 +226,14 @@ const tokens = {
226
226
  },
227
227
  "border": {
228
228
  "subtle": {
229
- "light": "rgba(20, 20, 16, 0.1)",
230
- "dark": "rgba(237, 237, 235, 0.1)",
231
- "description": "Subtle borders - element separation"
229
+ "light": "rgba(20, 20, 16, 0.47)",
230
+ "dark": "rgba(237, 237, 235, 0.47)",
231
+ "description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
232
232
  },
233
233
  "moderate": {
234
- "light": "rgba(20, 20, 16, 0.15)",
235
- "dark": "rgba(237, 237, 235, 0.15)",
236
- "description": "Moderate borders - defined boundaries"
234
+ "light": "rgba(20, 20, 16, 0.63)",
235
+ "dark": "rgba(237, 237, 235, 0.63)",
236
+ "description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
237
237
  },
238
238
  "focus": {
239
239
  "light": "#3498DB",
package/dist/tokens.css CHANGED
@@ -133,14 +133,14 @@
133
133
  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
134
134
  --color-surface-code: #faf2e3;
135
135
  --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
136
- --color-border-subtle: #0c0a09;
137
- --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
138
- --color-border-moderate: #0c0a09;
139
- --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
140
- --color-border-strong: #0c0a09;
141
- --color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
142
- --color-border-card: #0c0a09;
143
- --color-border-card: color(display-p3 0.0457 0.0395 0.0358);
136
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
137
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
138
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
139
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
140
+ --color-border-strong: rgba(12, 10, 9, 0.75);
141
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
142
+ --color-border-card: rgba(12, 10, 9, 0.60);
143
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
144
144
  --color-border-code: #d6d3d1;
145
145
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
146
146
  --color-content-primary: #14140f;
@@ -178,8 +178,8 @@
178
178
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
179
179
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
180
180
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
181
- --border-subtle: rgba(20, 20, 16, 0.1);
182
- --border-moderate: rgba(20, 20, 16, 0.15);
181
+ --border-subtle: rgba(20, 20, 16, 0.47);
182
+ --border-moderate: rgba(20, 20, 16, 0.63);
183
183
  --border-focus: #3498DB;
184
184
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
185
185
  --navigation-active-background: rgba(20, 20, 16, 0.1);
@@ -200,14 +200,14 @@
200
200
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
201
  --color-surface-code: #1c1917;
202
202
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
203
- --color-border-subtle: #fdf9f2;
204
- --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
205
- --color-border-moderate: #fdf9f2;
206
- --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
207
- --color-border-strong: #fdf9f2;
208
- --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
209
- --color-border-card: #fdf9f2;
210
- --color-border-card: color(display-p3 0.9894 0.977 0.9518);
203
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
204
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
205
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
206
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
207
+ --color-border-strong: rgba(253, 249, 242, 0.75);
208
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
209
+ --color-border-card: rgba(253, 249, 242, 0.60);
210
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
211
211
  --color-border-code: #292524;
212
212
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
213
213
  --color-content-primary: #fdf9f2;
@@ -245,8 +245,8 @@
245
245
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
246
246
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
247
247
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
248
- --border-subtle: rgba(237, 237, 235, 0.1);
249
- --border-moderate: rgba(237, 237, 235, 0.15);
248
+ --border-subtle: rgba(237, 237, 235, 0.47);
249
+ --border-moderate: rgba(237, 237, 235, 0.63);
250
250
  --border-focus: #4FC3F7;
251
251
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
252
252
  --navigation-active-background: rgba(237, 237, 235, 0.1);
@@ -268,14 +268,14 @@
268
268
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
269
269
  --color-surface-code: #1c1917;
270
270
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
271
- --color-border-subtle: #fdf9f2;
272
- --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
273
- --color-border-moderate: #fdf9f2;
274
- --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
275
- --color-border-strong: #fdf9f2;
276
- --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
277
- --color-border-card: #fdf9f2;
278
- --color-border-card: color(display-p3 0.9894 0.977 0.9518);
271
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
272
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
273
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
274
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
275
+ --color-border-strong: rgba(253, 249, 242, 0.75);
276
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
277
+ --color-border-card: rgba(253, 249, 242, 0.60);
278
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
279
279
  --color-border-code: #292524;
280
280
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
281
281
  --color-content-primary: #fdf9f2;
@@ -313,8 +313,8 @@
313
313
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
314
314
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
315
315
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
316
- --border-subtle: rgba(237, 237, 235, 0.1);
317
- --border-moderate: rgba(237, 237, 235, 0.15);
316
+ --border-subtle: rgba(237, 237, 235, 0.47);
317
+ --border-moderate: rgba(237, 237, 235, 0.63);
318
318
  --border-focus: #4FC3F7;
319
319
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
320
320
  --navigation-active-background: rgba(237, 237, 235, 0.1);
package/dist/tokens.dtcg.json CHANGED
@@ -61,32 +61,32 @@
61
61
  "border": {
62
62
  "subtle": {
63
63
  "$value": {
64
- "light": "rgba(12, 10, 9, 0.08)",
65
- "dark": "rgba(253, 249, 242, 0.08)"
64
+ "light": "rgba(12, 10, 9, 0.45)",
65
+ "dark": "rgba(253, 249, 242, 0.45)"
66
66
  },
67
67
  "$type": "color",
68
68
  "$description": "Subtle borders — element separation"
69
69
  },
70
70
  "moderate": {
71
71
  "$value": {
72
- "light": "rgba(12, 10, 9, 0.15)",
73
- "dark": "rgba(253, 249, 242, 0.15)"
72
+ "light": "rgba(12, 10, 9, 0.60)",
73
+ "dark": "rgba(253, 249, 242, 0.60)"
74
74
  },
75
75
  "$type": "color",
76
76
  "$description": "Moderate borders — defined boundaries"
77
77
  },
78
78
  "strong": {
79
79
  "$value": {
80
- "light": "rgba(12, 10, 9, 0.25)",
81
- "dark": "rgba(253, 249, 242, 0.25)"
80
+ "light": "rgba(12, 10, 9, 0.75)",
81
+ "dark": "rgba(253, 249, 242, 0.75)"
82
82
  },
83
83
  "$type": "color",
84
84
  "$description": "Strong borders — prominent separation"
85
85
  },
86
86
  "card": {
87
87
  "$value": {
88
- "light": "rgba(12, 10, 9, 0.15)",
89
- "dark": "rgba(253, 249, 242, 0.15)"
88
+ "light": "rgba(12, 10, 9, 0.60)",
89
+ "dark": "rgba(253, 249, 242, 0.60)"
90
90
  },
91
91
  "$type": "color",
92
92
  "$description": "Card border color with transparency for subtle definition"
@@ -338,19 +338,19 @@
338
338
  "border": {
339
339
  "subtle": {
340
340
  "$value": {
341
- "light": "rgba(20, 20, 16, 0.1)",
342
- "dark": "rgba(237, 237, 235, 0.1)"
341
+ "light": "rgba(20, 20, 16, 0.47)",
342
+ "dark": "rgba(237, 237, 235, 0.47)"
343
343
  },
344
344
  "$type": "color",
345
- "$description": "Subtle borders - element separation"
345
+ "$description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
346
346
  },
347
347
  "moderate": {
348
348
  "$value": {
349
- "light": "rgba(20, 20, 16, 0.15)",
350
- "dark": "rgba(237, 237, 235, 0.15)"
349
+ "light": "rgba(20, 20, 16, 0.63)",
350
+ "dark": "rgba(237, 237, 235, 0.63)"
351
351
  },
352
352
  "$type": "color",
353
- "$description": "Moderate borders - defined boundaries"
353
+ "$description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
354
354
  },
355
355
  "focus": {
356
356
  "$value": {
package/dist/tokens.scss CHANGED
@@ -133,14 +133,14 @@
133
133
  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
134
134
  --color-surface-code: #faf2e3;
135
135
  --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
136
- --color-border-subtle: #0c0a09;
137
- --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358);
138
- --color-border-moderate: #0c0a09;
139
- --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358);
140
- --color-border-strong: #0c0a09;
141
- --color-border-strong: color(display-p3 0.0457 0.0395 0.0358);
142
- --color-border-card: #0c0a09;
143
- --color-border-card: color(display-p3 0.0457 0.0395 0.0358);
136
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
137
+ --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
138
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
139
+ --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
140
+ --color-border-strong: rgba(12, 10, 9, 0.75);
141
+ --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
142
+ --color-border-card: rgba(12, 10, 9, 0.60);
143
+ --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
144
144
  --color-border-code: #d6d3d1;
145
145
  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
146
146
  --color-content-primary: #14140f;
@@ -178,8 +178,8 @@
178
178
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
179
179
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
180
180
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
181
- --border-subtle: rgba(20, 20, 16, 0.1);
182
- --border-moderate: rgba(20, 20, 16, 0.15);
181
+ --border-subtle: rgba(20, 20, 16, 0.47);
182
+ --border-moderate: rgba(20, 20, 16, 0.63);
183
183
  --border-focus: #3498DB;
184
184
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
185
185
  --navigation-active-background: rgba(20, 20, 16, 0.1);
@@ -200,14 +200,14 @@
200
200
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
201
201
  --color-surface-code: #1c1917;
202
202
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
203
- --color-border-subtle: #fdf9f2;
204
- --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
205
- --color-border-moderate: #fdf9f2;
206
- --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
207
- --color-border-strong: #fdf9f2;
208
- --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
209
- --color-border-card: #fdf9f2;
210
- --color-border-card: color(display-p3 0.9894 0.977 0.9518);
203
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
204
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
205
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
206
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
207
+ --color-border-strong: rgba(253, 249, 242, 0.75);
208
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
209
+ --color-border-card: rgba(253, 249, 242, 0.60);
210
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
211
211
  --color-border-code: #292524;
212
212
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
213
213
  --color-content-primary: #fdf9f2;
@@ -245,8 +245,8 @@
245
245
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
246
246
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
247
247
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
248
- --border-subtle: rgba(237, 237, 235, 0.1);
249
- --border-moderate: rgba(237, 237, 235, 0.15);
248
+ --border-subtle: rgba(237, 237, 235, 0.47);
249
+ --border-moderate: rgba(237, 237, 235, 0.63);
250
250
  --border-focus: #4FC3F7;
251
251
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
252
252
  --navigation-active-background: rgba(237, 237, 235, 0.1);
@@ -268,14 +268,14 @@
268
268
  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
269
269
  --color-surface-code: #1c1917;
270
270
  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
271
- --color-border-subtle: #fdf9f2;
272
- --color-border-subtle: color(display-p3 0.9894 0.977 0.9518);
273
- --color-border-moderate: #fdf9f2;
274
- --color-border-moderate: color(display-p3 0.9894 0.977 0.9518);
275
- --color-border-strong: #fdf9f2;
276
- --color-border-strong: color(display-p3 0.9894 0.977 0.9518);
277
- --color-border-card: #fdf9f2;
278
- --color-border-card: color(display-p3 0.9894 0.977 0.9518);
271
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
272
+ --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
273
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
274
+ --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
275
+ --color-border-strong: rgba(253, 249, 242, 0.75);
276
+ --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
277
+ --color-border-card: rgba(253, 249, 242, 0.60);
278
+ --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
279
279
  --color-border-code: #292524;
280
280
  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
281
281
  --color-content-primary: #fdf9f2;
@@ -313,8 +313,8 @@
313
313
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
314
314
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
315
315
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
316
- --border-subtle: rgba(237, 237, 235, 0.1);
317
- --border-moderate: rgba(237, 237, 235, 0.15);
316
+ --border-subtle: rgba(237, 237, 235, 0.47);
317
+ --border-moderate: rgba(237, 237, 235, 0.63);
318
318
  --border-focus: #4FC3F7;
319
319
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
320
320
  --navigation-active-background: rgba(237, 237, 235, 0.1);
package/dist/tokens.studio.json CHANGED
@@ -33,19 +33,19 @@
33
33
  },
34
34
  "border": {
35
35
  "subtle": {
36
- "value": "rgba(12, 10, 9, 0.08)",
36
+ "value": "rgba(12, 10, 9, 0.45)",
37
37
  "type": "color"
38
38
  },
39
39
  "moderate": {
40
- "value": "rgba(12, 10, 9, 0.15)",
40
+ "value": "rgba(12, 10, 9, 0.60)",
41
41
  "type": "color"
42
42
  },
43
43
  "strong": {
44
- "value": "rgba(12, 10, 9, 0.25)",
44
+ "value": "rgba(12, 10, 9, 0.75)",
45
45
  "type": "color"
46
46
  },
47
47
  "card": {
48
- "value": "rgba(12, 10, 9, 0.15)",
48
+ "value": "rgba(12, 10, 9, 0.60)",
49
49
  "type": "color"
50
50
  },
51
51
  "code": {
@@ -148,11 +148,11 @@
148
148
  },
149
149
  "border": {
150
150
  "subtle": {
151
- "value": "rgba(20, 20, 16, 0.1)",
151
+ "value": "rgba(20, 20, 16, 0.47)",
152
152
  "type": "color"
153
153
  },
154
154
  "moderate": {
155
- "value": "rgba(20, 20, 16, 0.15)",
155
+ "value": "rgba(20, 20, 16, 0.63)",
156
156
  "type": "color"
157
157
  },
158
158
  "focus": {
@@ -437,19 +437,19 @@
437
437
  },
438
438
  "border": {
439
439
  "subtle": {
440
- "value": "rgba(253, 249, 242, 0.08)",
440
+ "value": "rgba(253, 249, 242, 0.45)",
441
441
  "type": "color"
442
442
  },
443
443
  "moderate": {
444
- "value": "rgba(253, 249, 242, 0.15)",
444
+ "value": "rgba(253, 249, 242, 0.60)",
445
445
  "type": "color"
446
446
  },
447
447
  "strong": {
448
- "value": "rgba(253, 249, 242, 0.25)",
448
+ "value": "rgba(253, 249, 242, 0.75)",
449
449
  "type": "color"
450
450
  },
451
451
  "card": {
452
- "value": "rgba(253, 249, 242, 0.15)",
452
+ "value": "rgba(253, 249, 242, 0.60)",
453
453
  "type": "color"
454
454
  },
455
455
  "code": {
@@ -526,11 +526,11 @@
526
526
  },
527
527
  "border": {
528
528
  "subtle": {
529
- "value": "rgba(237, 237, 235, 0.1)",
529
+ "value": "rgba(237, 237, 235, 0.47)",
530
530
  "type": "color"
531
531
  },
532
532
  "moderate": {
533
- "value": "rgba(237, 237, 235, 0.15)",
533
+ "value": "rgba(237, 237, 235, 0.63)",
534
534
  "type": "color"
535
535
  },
536
536
  "focus": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -74,41 +74,41 @@
74
74
  },
75
75
  "border": {
76
76
  "subtle": {
77
- "$value": "rgba(12, 10, 9, 0.08)",
77
+ "$value": "rgba(12, 10, 9, 0.45)",
78
78
  "$type": "color",
79
79
  "$extensions": {
80
80
  "com.dataimago.theme": {
81
- "dark": "rgba(253, 249, 242, 0.08)"
81
+ "dark": "rgba(253, 249, 242, 0.45)"
82
82
  }
83
83
  },
84
84
  "$description": "Subtle borders — element separation"
85
85
  },
86
86
  "moderate": {
87
- "$value": "rgba(12, 10, 9, 0.15)",
87
+ "$value": "rgba(12, 10, 9, 0.60)",
88
88
  "$type": "color",
89
89
  "$extensions": {
90
90
  "com.dataimago.theme": {
91
- "dark": "rgba(253, 249, 242, 0.15)"
91
+ "dark": "rgba(253, 249, 242, 0.60)"
92
92
  }
93
93
  },
94
94
  "$description": "Moderate borders — defined boundaries"
95
95
  },
96
96
  "strong": {
97
- "$value": "rgba(12, 10, 9, 0.25)",
97
+ "$value": "rgba(12, 10, 9, 0.75)",
98
98
  "$type": "color",
99
99
  "$extensions": {
100
100
  "com.dataimago.theme": {
101
- "dark": "rgba(253, 249, 242, 0.25)"
101
+ "dark": "rgba(253, 249, 242, 0.75)"
102
102
  }
103
103
  },
104
104
  "$description": "Strong borders — prominent separation"
105
105
  },
106
106
  "card": {
107
- "$value": "rgba(12, 10, 9, 0.15)",
107
+ "$value": "rgba(12, 10, 9, 0.60)",
108
108
  "$type": "color",
109
109
  "$extensions": {
110
110
  "com.dataimago.theme": {
111
- "dark": "rgba(253, 249, 242, 0.15)"
111
+ "dark": "rgba(253, 249, 242, 0.60)"
112
112
  }
113
113
  },
114
114
  "$description": "Card border color with transparency for subtle definition"
@@ -297,24 +297,24 @@
297
297
  },
298
298
  "border": {
299
299
  "subtle": {
300
- "$value": "rgba(20, 20, 16, 0.1)",
300
+ "$value": "rgba(20, 20, 16, 0.47)",
301
301
  "$type": "color",
302
302
  "$extensions": {
303
303
  "com.dataimago.theme": {
304
- "dark": "rgba(237, 237, 235, 0.1)"
304
+ "dark": "rgba(237, 237, 235, 0.47)"
305
305
  }
306
306
  },
307
- "$description": "Subtle borders - element separation"
307
+ "$description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
308
308
  },
309
309
  "moderate": {
310
- "$value": "rgba(20, 20, 16, 0.15)",
310
+ "$value": "rgba(20, 20, 16, 0.63)",
311
311
  "$type": "color",
312
312
  "$extensions": {
313
313
  "com.dataimago.theme": {
314
- "dark": "rgba(237, 237, 235, 0.15)"
314
+ "dark": "rgba(237, 237, 235, 0.63)"
315
315
  }
316
316
  },
317
- "$description": "Moderate borders - defined boundaries"
317
+ "$description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
318
318
  },
319
319
  "focus": {
320
320
  "$value": "#3498DB",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens",
3
- "version": "0.1.0-alpha.12",
3
+ "version": "0.1.0-alpha.14",
4
4
  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/effects.json CHANGED
@@ -18,14 +18,14 @@
18
18
  },
19
19
  "border": {
20
20
  "subtle": {
21
- "light": "rgba(20, 20, 16, 0.1)",
22
- "dark": "rgba(237, 237, 235, 0.1)",
23
- "description": "Subtle borders - element separation"
21
+ "light": "rgba(20, 20, 16, 0.47)",
22
+ "dark": "rgba(237, 237, 235, 0.47)",
23
+ "description": "Subtle borders - element separation. THE ALPHA IS THE ROLE. Distinct from color.border.subtle: this family has its own base (20,20,16 / 237,237,235), so it needs a DIFFERENT alpha to render the same. 0.47 here matches 0.45 there at 3.07:1 on the worst surface; copying 0.45 would land at 2.90:1 and fail WCAG 1.4.11. Gated by tools/contrast-check.mjs."
24
24
  },
25
25
  "moderate": {
26
- "light": "rgba(20, 20, 16, 0.15)",
27
- "dark": "rgba(237, 237, 235, 0.15)",
28
- "description": "Moderate borders - defined boundaries"
26
+ "light": "rgba(20, 20, 16, 0.63)",
27
+ "dark": "rgba(237, 237, 235, 0.63)",
28
+ "description": "Moderate borders - defined boundaries. 0.63 here matches color.border.moderate 0.60 in rendered contrast; see border.subtle on why the numbers differ between the two families."
29
29
  },
30
30
  "focus": {
31
31
  "light": "#3498DB",
@@ -51,4 +51,4 @@
51
51
  "description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
52
52
  }
53
53
  }
54
- }
54
+ }
package/src/theme-colors-p3.json CHANGED
@@ -96,55 +96,55 @@
96
96
  "border": {
97
97
  "subtle": {
98
98
  "light": {
99
- "srgb": "#0c0a09",
100
- "oklch": "oklch(14.69% 0.0041 49.25)",
101
- "p3": "color(display-p3 0.0457 0.0395 0.0358)"
99
+ "srgb": "rgba(12, 10, 9, 0.45)",
100
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.45)",
101
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.45)"
102
102
  },
103
103
  "dark": {
104
- "srgb": "#fdf9f2",
105
- "oklch": "oklch(98.33% 0.0102 81.8)",
106
- "p3": "color(display-p3 0.9894 0.977 0.9518)"
104
+ "srgb": "rgba(253, 249, 242, 0.45)",
105
+ "oklch": "oklch(98.33% 0.0102 81.8 / 0.45)",
106
+ "p3": "color(display-p3 0.9894 0.977 0.9518 / 0.45)"
107
107
  },
108
- "description": "Subtle borders — element separation"
108
+ "description": "Subtle borders — element separation. THE ALPHA IS THE ROLE: border.{subtle,moderate,strong,card} share one base color and are distinguished by opacity alone, so a gamut conversion that drops the alpha channel collapses four semantic roles into one opaque value (this happened in 17995c3, #72, 2026-06-28). No number is quoted here on purpose: the scale is set by the founder decision recorded in wi-20260817-border-alpha-scale-retune and gated by tools/contrast-check.mjs at the WCAG 1.4.11 non-text threshold (3:1). Read the value, not this sentence."
109
109
  },
110
110
  "moderate": {
111
111
  "light": {
112
- "srgb": "#0c0a09",
113
- "oklch": "oklch(14.69% 0.0041 49.25)",
114
- "p3": "color(display-p3 0.0457 0.0395 0.0358)"
112
+ "srgb": "rgba(12, 10, 9, 0.60)",
113
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.60)",
114
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.60)"
115
115
  },
116
116
  "dark": {
117
- "srgb": "#fdf9f2",
118
- "oklch": "oklch(98.33% 0.0102 81.8)",
119
- "p3": "color(display-p3 0.9894 0.977 0.9518)"
117
+ "srgb": "rgba(253, 249, 242, 0.60)",
118
+ "oklch": "oklch(98.33% 0.0102 81.8 / 0.60)",
119
+ "p3": "color(display-p3 0.9894 0.977 0.9518 / 0.60)"
120
120
  },
121
- "description": "Moderate borders — defined boundaries"
121
+ "description": "Moderate borders — defined boundaries. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
122
122
  },
123
123
  "strong": {
124
124
  "light": {
125
- "srgb": "#0c0a09",
126
- "oklch": "oklch(14.69% 0.0041 49.25)",
127
- "p3": "color(display-p3 0.0457 0.0395 0.0358)"
125
+ "srgb": "rgba(12, 10, 9, 0.75)",
126
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.75)",
127
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.75)"
128
128
  },
129
129
  "dark": {
130
- "srgb": "#fdf9f2",
131
- "oklch": "oklch(98.33% 0.0102 81.8)",
132
- "p3": "color(display-p3 0.9894 0.977 0.9518)"
130
+ "srgb": "rgba(253, 249, 242, 0.75)",
131
+ "oklch": "oklch(98.33% 0.0102 81.8 / 0.75)",
132
+ "p3": "color(display-p3 0.9894 0.977 0.9518 / 0.75)"
133
133
  },
134
- "description": "Strong borders — prominent separation"
134
+ "description": "Strong borders — prominent separation. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
135
135
  },
136
136
  "card": {
137
137
  "light": {
138
- "srgb": "#0c0a09",
139
- "oklch": "oklch(14.69% 0.0041 49.25)",
140
- "p3": "color(display-p3 0.0457 0.0395 0.0358)"
138
+ "srgb": "rgba(12, 10, 9, 0.60)",
139
+ "oklch": "oklch(14.69% 0.0041 49.25 / 0.60)",
140
+ "p3": "color(display-p3 0.0457 0.0395 0.0358 / 0.60)"
141
141
  },
142
142
  "dark": {
143
- "srgb": "#fdf9f2",
144
- "oklch": "oklch(98.33% 0.0102 81.8)",
145
- "p3": "color(display-p3 0.9894 0.977 0.9518)"
143
+ "srgb": "rgba(253, 249, 242, 0.60)",
144
+ "oklch": "oklch(98.33% 0.0102 81.8 / 0.60)",
145
+ "p3": "color(display-p3 0.9894 0.977 0.9518 / 0.60)"
146
146
  },
147
- "description": "Card border color with transparency for subtle definition"
147
+ "description": "Card border color with transparency for subtle definition. See border.subtle on why the alpha is load-bearing and why no number is quoted here."
148
148
  },
149
149
  "code": {
150
150
  "light": {
package/src/theme-colors.json CHANGED
@@ -39,23 +39,23 @@
39
39
  },
40
40
  "border": {
41
41
  "subtle": {
42
- "light": "rgba(12, 10, 9, 0.08)",
43
- "dark": "rgba(253, 249, 242, 0.08)",
42
+ "light": "rgba(12, 10, 9, 0.45)",
43
+ "dark": "rgba(253, 249, 242, 0.45)",
44
44
  "description": "Subtle borders — element separation"
45
45
  },
46
46
  "moderate": {
47
- "light": "rgba(12, 10, 9, 0.15)",
48
- "dark": "rgba(253, 249, 242, 0.15)",
47
+ "light": "rgba(12, 10, 9, 0.60)",
48
+ "dark": "rgba(253, 249, 242, 0.60)",
49
49
  "description": "Moderate borders — defined boundaries"
50
50
  },
51
51
  "strong": {
52
- "light": "rgba(12, 10, 9, 0.25)",
53
- "dark": "rgba(253, 249, 242, 0.25)",
52
+ "light": "rgba(12, 10, 9, 0.75)",
53
+ "dark": "rgba(253, 249, 242, 0.75)",
54
54
  "description": "Strong borders — prominent separation"
55
55
  },
56
56
  "card": {
57
- "light": "rgba(12, 10, 9, 0.15)",
58
- "dark": "rgba(253, 249, 242, 0.15)",
57
+ "light": "rgba(12, 10, 9, 0.60)",
58
+ "dark": "rgba(253, 249, 242, 0.60)",
59
59
  "description": "Card border color with transparency for subtle definition"
60
60
  },
61
61
  "code": {