@dataimago/tokens 0.1.0-alpha.13 → 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 (9) hide show
  1. package/dist/index.cjs +6 -6
  2. package/dist/index.mjs +6 -6
  3. package/dist/tokens.css +6 -6
  4. package/dist/tokens.dtcg.json +6 -6
  5. package/dist/tokens.scss +6 -6
  6. package/dist/tokens.studio.json +4 -4
  7. package/dist/tokens.w3c.dtcg.json +6 -6
  8. package/package.json +1 -1
  9. package/src/effects.json +7 -7
package/dist/index.cjs CHANGED
@@ -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
@@ -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
@@ -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);
@@ -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);
@@ -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
@@ -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
@@ -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);
@@ -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);
@@ -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
@@ -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": {
@@ -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
@@ -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.13",
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
+ }