@dataimago/tokens-neutral 0.1.0-alpha.8 → 0.1.0-alpha.9

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/effects.json +6 -6
  2. package/dist/index.cjs +6 -6
  3. package/dist/index.mjs +6 -6
  4. package/dist/tokens.css +6 -6
  5. package/dist/tokens.dtcg.json +6 -6
  6. package/dist/tokens.scss +6 -6
  7. package/dist/tokens.studio.json +4 -4
  8. package/dist/tokens.w3c.dtcg.json +6 -6
  9. package/package.json +1 -1
package/dist/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",
package/dist/index.cjs CHANGED
@@ -188,14 +188,14 @@ const tokens = {
188
188
  },
189
189
  "border": {
190
190
  "subtle": {
191
- "light": "rgba(20, 20, 16, 0.1)",
192
- "dark": "rgba(237, 237, 235, 0.1)",
193
- "description": "Subtle borders - element separation"
191
+ "light": "rgba(20, 20, 16, 0.47)",
192
+ "dark": "rgba(237, 237, 235, 0.47)",
193
+ "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."
194
194
  },
195
195
  "moderate": {
196
- "light": "rgba(20, 20, 16, 0.15)",
197
- "dark": "rgba(237, 237, 235, 0.15)",
198
- "description": "Moderate borders - defined boundaries"
196
+ "light": "rgba(20, 20, 16, 0.63)",
197
+ "dark": "rgba(237, 237, 235, 0.63)",
198
+ "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."
199
199
  },
200
200
  "focus": {
201
201
  "light": "#3498DB",
package/dist/index.mjs CHANGED
@@ -188,14 +188,14 @@ const tokens = {
188
188
  },
189
189
  "border": {
190
190
  "subtle": {
191
- "light": "rgba(20, 20, 16, 0.1)",
192
- "dark": "rgba(237, 237, 235, 0.1)",
193
- "description": "Subtle borders - element separation"
191
+ "light": "rgba(20, 20, 16, 0.47)",
192
+ "dark": "rgba(237, 237, 235, 0.47)",
193
+ "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."
194
194
  },
195
195
  "moderate": {
196
- "light": "rgba(20, 20, 16, 0.15)",
197
- "dark": "rgba(237, 237, 235, 0.15)",
198
- "description": "Moderate borders - defined boundaries"
196
+ "light": "rgba(20, 20, 16, 0.63)",
197
+ "dark": "rgba(237, 237, 235, 0.63)",
198
+ "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."
199
199
  },
200
200
  "focus": {
201
201
  "light": "#3498DB",
package/dist/tokens.css CHANGED
@@ -116,8 +116,8 @@
116
116
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
117
117
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
118
118
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
119
- --border-subtle: rgba(20, 20, 16, 0.1);
120
- --border-moderate: rgba(20, 20, 16, 0.15);
119
+ --border-subtle: rgba(20, 20, 16, 0.47);
120
+ --border-moderate: rgba(20, 20, 16, 0.63);
121
121
  --border-focus: #3498DB;
122
122
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
123
123
  --navigation-active-background: rgba(20, 20, 16, 0.1);
@@ -151,8 +151,8 @@
151
151
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
152
152
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
153
153
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
154
- --border-subtle: rgba(237, 237, 235, 0.1);
155
- --border-moderate: rgba(237, 237, 235, 0.15);
154
+ --border-subtle: rgba(237, 237, 235, 0.47);
155
+ --border-moderate: rgba(237, 237, 235, 0.63);
156
156
  --border-focus: #4FC3F7;
157
157
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
158
158
  --navigation-active-background: rgba(237, 237, 235, 0.1);
@@ -187,8 +187,8 @@
187
187
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
188
188
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
189
189
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
190
- --border-subtle: rgba(237, 237, 235, 0.1);
191
- --border-moderate: rgba(237, 237, 235, 0.15);
190
+ --border-subtle: rgba(237, 237, 235, 0.47);
191
+ --border-moderate: rgba(237, 237, 235, 0.63);
192
192
  --border-focus: #4FC3F7;
193
193
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
194
194
  --navigation-active-background: rgba(237, 237, 235, 0.1);
package/dist/tokens.dtcg.json CHANGED
@@ -276,19 +276,19 @@
276
276
  "border": {
277
277
  "subtle": {
278
278
  "$value": {
279
- "light": "rgba(20, 20, 16, 0.1)",
280
- "dark": "rgba(237, 237, 235, 0.1)"
279
+ "light": "rgba(20, 20, 16, 0.47)",
280
+ "dark": "rgba(237, 237, 235, 0.47)"
281
281
  },
282
282
  "$type": "color",
283
- "$description": "Subtle borders - element separation"
283
+ "$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."
284
284
  },
285
285
  "moderate": {
286
286
  "$value": {
287
- "light": "rgba(20, 20, 16, 0.15)",
288
- "dark": "rgba(237, 237, 235, 0.15)"
287
+ "light": "rgba(20, 20, 16, 0.63)",
288
+ "dark": "rgba(237, 237, 235, 0.63)"
289
289
  },
290
290
  "$type": "color",
291
- "$description": "Moderate borders - defined boundaries"
291
+ "$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."
292
292
  },
293
293
  "focus": {
294
294
  "$value": {
package/dist/tokens.scss CHANGED
@@ -116,8 +116,8 @@
116
116
  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
117
117
  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
118
118
  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
119
- --border-subtle: rgba(20, 20, 16, 0.1);
120
- --border-moderate: rgba(20, 20, 16, 0.15);
119
+ --border-subtle: rgba(20, 20, 16, 0.47);
120
+ --border-moderate: rgba(20, 20, 16, 0.63);
121
121
  --border-focus: #3498DB;
122
122
  --navigation-hover-background: rgba(20, 20, 16, 0.05);
123
123
  --navigation-active-background: rgba(20, 20, 16, 0.1);
@@ -151,8 +151,8 @@
151
151
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
152
152
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
153
153
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
154
- --border-subtle: rgba(237, 237, 235, 0.1);
155
- --border-moderate: rgba(237, 237, 235, 0.15);
154
+ --border-subtle: rgba(237, 237, 235, 0.47);
155
+ --border-moderate: rgba(237, 237, 235, 0.63);
156
156
  --border-focus: #4FC3F7;
157
157
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
158
158
  --navigation-active-background: rgba(237, 237, 235, 0.1);
@@ -187,8 +187,8 @@
187
187
  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
188
188
  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
189
189
  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
190
- --border-subtle: rgba(237, 237, 235, 0.1);
191
- --border-moderate: rgba(237, 237, 235, 0.15);
190
+ --border-subtle: rgba(237, 237, 235, 0.47);
191
+ --border-moderate: rgba(237, 237, 235, 0.63);
192
192
  --border-focus: #4FC3F7;
193
193
  --navigation-hover-background: rgba(237, 237, 235, 0.05);
194
194
  --navigation-active-background: rgba(237, 237, 235, 0.1);
package/dist/tokens.studio.json CHANGED
@@ -110,11 +110,11 @@
110
110
  },
111
111
  "border": {
112
112
  "subtle": {
113
- "value": "rgba(20, 20, 16, 0.1)",
113
+ "value": "rgba(20, 20, 16, 0.47)",
114
114
  "type": "color"
115
115
  },
116
116
  "moderate": {
117
- "value": "rgba(20, 20, 16, 0.15)",
117
+ "value": "rgba(20, 20, 16, 0.63)",
118
118
  "type": "color"
119
119
  },
120
120
  "focus": {
@@ -458,11 +458,11 @@
458
458
  },
459
459
  "border": {
460
460
  "subtle": {
461
- "value": "rgba(237, 237, 235, 0.1)",
461
+ "value": "rgba(237, 237, 235, 0.47)",
462
462
  "type": "color"
463
463
  },
464
464
  "moderate": {
465
- "value": "rgba(237, 237, 235, 0.15)",
465
+ "value": "rgba(237, 237, 235, 0.63)",
466
466
  "type": "color"
467
467
  },
468
468
  "focus": {
package/dist/tokens.w3c.dtcg.json CHANGED
@@ -225,24 +225,24 @@
225
225
  },
226
226
  "border": {
227
227
  "subtle": {
228
- "$value": "rgba(20, 20, 16, 0.1)",
228
+ "$value": "rgba(20, 20, 16, 0.47)",
229
229
  "$type": "color",
230
230
  "$extensions": {
231
231
  "com.dataimago.theme": {
232
- "dark": "rgba(237, 237, 235, 0.1)"
232
+ "dark": "rgba(237, 237, 235, 0.47)"
233
233
  }
234
234
  },
235
- "$description": "Subtle borders - element separation"
235
+ "$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."
236
236
  },
237
237
  "moderate": {
238
- "$value": "rgba(20, 20, 16, 0.15)",
238
+ "$value": "rgba(20, 20, 16, 0.63)",
239
239
  "$type": "color",
240
240
  "$extensions": {
241
241
  "com.dataimago.theme": {
242
- "dark": "rgba(237, 237, 235, 0.15)"
242
+ "dark": "rgba(237, 237, 235, 0.63)"
243
243
  }
244
244
  },
245
- "$description": "Moderate borders - defined boundaries"
245
+ "$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."
246
246
  },
247
247
  "focus": {
248
248
  "$value": "#3498DB",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataimago/tokens-neutral",
3
- "version": "0.1.0-alpha.8",
3
+ "version": "0.1.0-alpha.9",
4
4
  "description": "dataimago neutral-identity design tokens — Noto Sans throughout, neutral palette; sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 verticals). Non-identity tokens (spacing, radius, motion, effects, components) are read from @dataimago/tokens at build time so the two packages stay in lockstep.",
5
5
  "license": "MIT",
6
6
  "repository": {