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

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 (10) hide show
  1. package/dist/index.cjs +8 -8
  2. package/dist/index.mjs +8 -8
  3. package/dist/tokens.css +24 -24
  4. package/dist/tokens.dtcg.json +8 -8
  5. package/dist/tokens.scss +24 -24
  6. package/dist/tokens.studio.json +8 -8
  7. package/dist/tokens.w3c.dtcg.json +8 -8
  8. package/package.json +1 -1
  9. package/src/theme-colors-p3.json +28 -28
  10. 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": {
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": {
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;
@@ -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;
@@ -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;
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"
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;
@@ -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;
@@ -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;
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": {
@@ -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": {
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"
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.13",
4
4
  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
5
5
  "license": "MIT",
6
6
  "repository": {
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": {