@dataimago/tokens-neutral 0.1.0-alpha.7 → 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 (11) hide show
  1. package/dist/effects.json +6 -6
  2. package/dist/index.cjs +14 -14
  3. package/dist/index.mjs +14 -14
  4. package/dist/theme-colors.json +8 -8
  5. package/dist/tokens.css +18 -18
  6. package/dist/tokens.dtcg.json +14 -14
  7. package/dist/tokens.scss +18 -18
  8. package/dist/tokens.studio.json +12 -12
  9. package/dist/tokens.w3c.dtcg.json +14 -14
  10. package/package.json +1 -1
  11. package/src/theme-colors.json +4 -4
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
@@ -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": {
@@ -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
@@ -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": {
@@ -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/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": {
package/dist/tokens.css CHANGED
@@ -96,10 +96,10 @@
96
96
  --color-surface-navbar: #ededeb;
97
97
  --color-surface-navbar-scrolled: #ededeb;
98
98
  --color-surface-code: #faf2e3;
99
- --color-border-subtle: rgba(12, 10, 9, 0.08);
100
- --color-border-moderate: rgba(12, 10, 9, 0.15);
101
- --color-border-strong: rgba(12, 10, 9, 0.25);
102
- --color-border-card: rgba(12, 10, 9, 0.15);
99
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
100
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
101
+ --color-border-strong: rgba(12, 10, 9, 0.75);
102
+ --color-border-card: rgba(12, 10, 9, 0.60);
103
103
  --color-border-code: #d6d3d1;
104
104
  --color-content-primary: #14140f;
105
105
  --color-content-secondary: #7c7c7c;
@@ -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);
@@ -131,10 +131,10 @@
131
131
  --color-surface-navbar: #141410;
132
132
  --color-surface-navbar-scrolled: #141410;
133
133
  --color-surface-code: #1c1917;
134
- --color-border-subtle: rgba(253, 249, 242, 0.08);
135
- --color-border-moderate: rgba(253, 249, 242, 0.15);
136
- --color-border-strong: rgba(253, 249, 242, 0.25);
137
- --color-border-card: rgba(253, 249, 242, 0.15);
134
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
135
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
136
+ --color-border-strong: rgba(253, 249, 242, 0.75);
137
+ --color-border-card: rgba(253, 249, 242, 0.60);
138
138
  --color-border-code: #292524;
139
139
  --color-content-primary: #fdf9f2;
140
140
  --color-content-secondary: #a8a29e;
@@ -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);
@@ -167,10 +167,10 @@
167
167
  --color-surface-navbar: #141410;
168
168
  --color-surface-navbar-scrolled: #141410;
169
169
  --color-surface-code: #1c1917;
170
- --color-border-subtle: rgba(253, 249, 242, 0.08);
171
- --color-border-moderate: rgba(253, 249, 242, 0.15);
172
- --color-border-strong: rgba(253, 249, 242, 0.25);
173
- --color-border-card: rgba(253, 249, 242, 0.15);
170
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
171
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
172
+ --color-border-strong: rgba(253, 249, 242, 0.75);
173
+ --color-border-card: rgba(253, 249, 242, 0.60);
174
174
  --color-border-code: #292524;
175
175
  --color-content-primary: #fdf9f2;
176
176
  --color-content-secondary: #a8a29e;
@@ -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
@@ -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"
@@ -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
@@ -96,10 +96,10 @@
96
96
  --color-surface-navbar: #ededeb;
97
97
  --color-surface-navbar-scrolled: #ededeb;
98
98
  --color-surface-code: #faf2e3;
99
- --color-border-subtle: rgba(12, 10, 9, 0.08);
100
- --color-border-moderate: rgba(12, 10, 9, 0.15);
101
- --color-border-strong: rgba(12, 10, 9, 0.25);
102
- --color-border-card: rgba(12, 10, 9, 0.15);
99
+ --color-border-subtle: rgba(12, 10, 9, 0.45);
100
+ --color-border-moderate: rgba(12, 10, 9, 0.60);
101
+ --color-border-strong: rgba(12, 10, 9, 0.75);
102
+ --color-border-card: rgba(12, 10, 9, 0.60);
103
103
  --color-border-code: #d6d3d1;
104
104
  --color-content-primary: #14140f;
105
105
  --color-content-secondary: #7c7c7c;
@@ -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);
@@ -131,10 +131,10 @@
131
131
  --color-surface-navbar: #141410;
132
132
  --color-surface-navbar-scrolled: #141410;
133
133
  --color-surface-code: #1c1917;
134
- --color-border-subtle: rgba(253, 249, 242, 0.08);
135
- --color-border-moderate: rgba(253, 249, 242, 0.15);
136
- --color-border-strong: rgba(253, 249, 242, 0.25);
137
- --color-border-card: rgba(253, 249, 242, 0.15);
134
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
135
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
136
+ --color-border-strong: rgba(253, 249, 242, 0.75);
137
+ --color-border-card: rgba(253, 249, 242, 0.60);
138
138
  --color-border-code: #292524;
139
139
  --color-content-primary: #fdf9f2;
140
140
  --color-content-secondary: #a8a29e;
@@ -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);
@@ -167,10 +167,10 @@
167
167
  --color-surface-navbar: #141410;
168
168
  --color-surface-navbar-scrolled: #141410;
169
169
  --color-surface-code: #1c1917;
170
- --color-border-subtle: rgba(253, 249, 242, 0.08);
171
- --color-border-moderate: rgba(253, 249, 242, 0.15);
172
- --color-border-strong: rgba(253, 249, 242, 0.25);
173
- --color-border-card: rgba(253, 249, 242, 0.15);
170
+ --color-border-subtle: rgba(253, 249, 242, 0.45);
171
+ --color-border-moderate: rgba(253, 249, 242, 0.60);
172
+ --color-border-strong: rgba(253, 249, 242, 0.75);
173
+ --color-border-card: rgba(253, 249, 242, 0.60);
174
174
  --color-border-code: #292524;
175
175
  --color-content-primary: #fdf9f2;
176
176
  --color-content-secondary: #a8a29e;
@@ -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
@@ -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": {
@@ -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": {
@@ -399,19 +399,19 @@
399
399
  },
400
400
  "border": {
401
401
  "subtle": {
402
- "value": "rgba(253, 249, 242, 0.08)",
402
+ "value": "rgba(253, 249, 242, 0.45)",
403
403
  "type": "color"
404
404
  },
405
405
  "moderate": {
406
- "value": "rgba(253, 249, 242, 0.15)",
406
+ "value": "rgba(253, 249, 242, 0.60)",
407
407
  "type": "color"
408
408
  },
409
409
  "strong": {
410
- "value": "rgba(253, 249, 242, 0.25)",
410
+ "value": "rgba(253, 249, 242, 0.75)",
411
411
  "type": "color"
412
412
  },
413
413
  "card": {
414
- "value": "rgba(253, 249, 242, 0.15)",
414
+ "value": "rgba(253, 249, 242, 0.60)",
415
415
  "type": "color"
416
416
  },
417
417
  "code": {
@@ -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
@@ -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"
@@ -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.7",
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": {
package/src/theme-colors.json CHANGED
@@ -38,10 +38,10 @@
38
38
  }
39
39
  },
40
40
  "border": {
41
- "subtle": { "light": "rgba(12, 10, 9, 0.08)", "dark": "rgba(253, 249, 242, 0.08)", "description": "Subtle borders — element separation" },
42
- "moderate": { "light": "rgba(12, 10, 9, 0.15)", "dark": "rgba(253, 249, 242, 0.15)", "description": "Moderate borders — defined boundaries" },
43
- "strong": { "light": "rgba(12, 10, 9, 0.25)", "dark": "rgba(253, 249, 242, 0.25)", "description": "Strong borders — prominent separation" },
44
- "card": { "light": "rgba(12, 10, 9, 0.15)", "dark": "rgba(253, 249, 242, 0.15)", "description": "Card border color with transparency for subtle definition" },
41
+ "subtle": { "light": "rgba(12, 10, 9, 0.45)", "dark": "rgba(253, 249, 242, 0.45)", "description": "Subtle borders — element separation" },
42
+ "moderate": { "light": "rgba(12, 10, 9, 0.60)", "dark": "rgba(253, 249, 242, 0.60)", "description": "Moderate borders — defined boundaries" },
43
+ "strong": { "light": "rgba(12, 10, 9, 0.75)", "dark": "rgba(253, 249, 242, 0.75)", "description": "Strong borders — prominent separation" },
44
+ "card": { "light": "rgba(12, 10, 9, 0.60)", "dark": "rgba(253, 249, 242, 0.60)", "description": "Card border color with transparency for subtle definition" },
45
45
  "code": { "light": "#d6d3d1", "dark": "#292524", "description": "Code block border" }
46
46
  },
47
47
  "content": {