@heliosgraphics/ui 2.0.0-alpha.70 → 2.0.0-alpha.71

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 (4) hide show
  1. package/components/Markdown/Markdown.module.css +1 -1
  2. package/css/core.colors-helpers.css +10 -10
  3. package/css/core.colors.css +21 -12
  4. package/package.json +1 -1
package/components/Markdown/Markdown.module.css CHANGED
@@ -106,7 +106,7 @@
106
106
 
107
107
  /* Element: Link */
108
108
  .markdown a {
109
- color: var(--ui-text-orange);
109
+ color: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
110
110
 
111
111
  font-weight: var(--font-weight-medium);
112
112
  text-decoration: underline;
package/css/core.colors-helpers.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --bg: var(--ui-bg-gray);
7
7
 
8
8
  --text-disabled: var(--ui-text-disabled-gray);
9
- --text: var(--ui-text-gray);
9
+ --text: var(--ui-text-gray-tone);
10
10
 
11
11
  --border: var(--ui-border-gray);
12
12
  --border-hover: var(--ui-border-hover-gray);
@@ -38,7 +38,7 @@
38
38
  --bg: var(--ui-bg-purple);
39
39
 
40
40
  --text-disabled: var(--ui-text-disabled-purple);
41
- --text: var(--ui-text-purple);
41
+ --text: var(--ui-text-purple-tone);
42
42
 
43
43
  --border: var(--ui-border-purple);
44
44
  --border-hover: var(--ui-border-hover-purple);
@@ -70,7 +70,7 @@
70
70
  --bg: var(--ui-bg-blue);
71
71
 
72
72
  --text-disabled: var(--ui-text-disabled-blue);
73
- --text: var(--ui-text-blue);
73
+ --text: var(--ui-text-blue-tone);
74
74
 
75
75
  --border: var(--ui-border-blue);
76
76
  --border-hover: var(--ui-border-hover-blue);
@@ -102,7 +102,7 @@
102
102
  --bg: var(--ui-bg-aqua);
103
103
 
104
104
  --text-disabled: var(--ui-text-disabled-aqua);
105
- --text: var(--ui-text-aqua);
105
+ --text: var(--ui-text-aqua-tone);
106
106
 
107
107
  --border: var(--ui-border-aqua);
108
108
  --border-hover: var(--ui-border-hover-aqua);
@@ -134,7 +134,7 @@
134
134
  --bg: var(--ui-bg-green);
135
135
 
136
136
  --text-disabled: var(--ui-text-disabled-green);
137
- --text: var(--ui-text-green);
137
+ --text: var(--ui-text-green-tone);
138
138
 
139
139
  --border: var(--ui-border-green);
140
140
  --border-hover: var(--ui-border-hover-green);
@@ -166,7 +166,7 @@
166
166
  --bg: var(--ui-bg-olive);
167
167
 
168
168
  --text-disabled: var(--ui-text-disabled-olive);
169
- --text: var(--ui-text-olive);
169
+ --text: var(--ui-text-olive-tone);
170
170
 
171
171
  --border: var(--ui-border-olive);
172
172
  --border-hover: var(--ui-border-hover-olive);
@@ -198,7 +198,7 @@
198
198
  --bg: var(--ui-bg-yellow);
199
199
 
200
200
  --text-disabled: var(--ui-text-disabled-yellow);
201
- --text: var(--ui-text-yellow);
201
+ --text: var(--ui-text-yellow-tone);
202
202
 
203
203
  --border: var(--ui-border-yellow);
204
204
  --border-hover: var(--ui-border-hover-yellow);
@@ -230,7 +230,7 @@
230
230
  --bg: var(--ui-bg-orange);
231
231
 
232
232
  --text-disabled: var(--ui-text-disabled-orange);
233
- --text: var(--ui-text-orange);
233
+ --text: var(--ui-text-orange-tone);
234
234
 
235
235
  --border: var(--ui-border-orange);
236
236
  --border-hover: var(--ui-border-hover-orange);
@@ -262,7 +262,7 @@
262
262
  --bg: var(--ui-bg-red);
263
263
 
264
264
  --text-disabled: var(--ui-text-disabled-red);
265
- --text: var(--ui-text-red);
265
+ --text: var(--ui-text-red-tone);
266
266
 
267
267
  --border: var(--ui-border-red);
268
268
  --border-hover: var(--ui-border-hover-red);
@@ -294,7 +294,7 @@
294
294
  --bg: var(--ui-bg-pink);
295
295
 
296
296
  --text-disabled: var(--ui-text-disabled-pink);
297
- --text: var(--ui-text-pink);
297
+ --text: var(--ui-text-pink-tone);
298
298
 
299
299
  --border: var(--ui-border-pink);
300
300
  --border-hover: var(--ui-border-hover-pink);
package/css/core.colors.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  /* chroma */
3
3
  --ui-chroma: 0.228;
4
- --ui-chroma-soft: 0.072;
4
+ --ui-chroma-soft: 0.048;
5
5
  --ui-chroma-tone: 0.004;
6
6
 
7
7
  /* hue */
@@ -36,7 +36,8 @@
36
36
  --ui-bg-hover-gray: oklch(var(--ui-bg-hover-l) var(--ui-chroma-tone) var(--ui-gray));
37
37
  --ui-bg-active-gray: oklch(var(--ui-bg-active-l) var(--ui-chroma-tone) var(--ui-gray));
38
38
  --ui-bg-disabled-gray: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-gray));
39
- --ui-text-gray: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-gray));
39
+ --ui-text-gray-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-gray));
40
+ --ui-text-gray: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-gray));
40
41
  --ui-text-disabled-gray: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-gray));
41
42
 
42
43
  --ui-border-gray: oklch(var(--ui-border-l) var(--ui-chroma-tone) var(--ui-gray));
@@ -63,7 +64,8 @@
63
64
  --ui-bg-hover-blue: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-blue));
64
65
  --ui-bg-active-blue: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-blue));
65
66
  --ui-bg-disabled-blue: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-blue));
66
- --ui-text-blue: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-blue));
67
+ --ui-text-blue-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-blue));
68
+ --ui-text-blue: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
67
69
  --ui-text-disabled-blue: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-blue));
68
70
 
69
71
  --ui-border-blue: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-blue));
@@ -90,7 +92,8 @@
90
92
  --ui-bg-hover-purple: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-purple));
91
93
  --ui-bg-active-purple: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-purple));
92
94
  --ui-bg-disabled-purple: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-purple));
93
- --ui-text-purple: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-purple));
95
+ --ui-text-purple-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-purple));
96
+ --ui-text-purple: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-purple));
94
97
  --ui-text-disabled-purple: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-purple));
95
98
 
96
99
  --ui-border-purple: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-purple));
@@ -117,7 +120,8 @@
117
120
  --ui-bg-hover-pink: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-pink));
118
121
  --ui-bg-active-pink: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-pink));
119
122
  --ui-bg-disabled-pink: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-pink));
120
- --ui-text-pink: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-pink));
123
+ --ui-text-pink-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-pink));
124
+ --ui-text-pink: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-pink));
121
125
  --ui-text-disabled-pink: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-pink));
122
126
 
123
127
  --ui-border-pink: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-pink));
@@ -144,7 +148,8 @@
144
148
  --ui-bg-hover-red: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-red));
145
149
  --ui-bg-active-red: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-red));
146
150
  --ui-bg-disabled-red: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-red));
147
- --ui-text-red: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-red));
151
+ --ui-text-red-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-red));
152
+ --ui-text-red: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-red));
148
153
  --ui-text-disabled-red: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-red));
149
154
 
150
155
  --ui-border-red: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-red));
@@ -171,7 +176,8 @@
171
176
  --ui-bg-hover-orange: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-orange));
172
177
  --ui-bg-active-orange: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-orange));
173
178
  --ui-bg-disabled-orange: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-orange));
174
- --ui-text-orange: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-orange));
179
+ --ui-text-orange-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-orange));
180
+ --ui-text-orange: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-orange));
175
181
  --ui-text-disabled-orange: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-orange));
176
182
 
177
183
  --ui-border-orange: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-orange));
@@ -198,7 +204,8 @@
198
204
  --ui-bg-hover-yellow: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-yellow));
199
205
  --ui-bg-active-yellow: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-yellow));
200
206
  --ui-bg-disabled-yellow: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-yellow));
201
- --ui-text-yellow: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-yellow));
207
+ --ui-text-yellow-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-yellow));
208
+ --ui-text-yellow: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-yellow));
202
209
  --ui-text-disabled-yellow: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-yellow));
203
210
 
204
211
  --ui-border-yellow: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-yellow));
@@ -225,7 +232,8 @@
225
232
  --ui-bg-hover-olive: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-olive));
226
233
  --ui-bg-active-olive: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-olive));
227
234
  --ui-bg-disabled-olive: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-olive));
228
- --ui-text-olive: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-olive));
235
+ --ui-text-olive-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-olive));
236
+ --ui-text-olive: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-olive));
229
237
  --ui-text-disabled-olive: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-olive));
230
238
 
231
239
  --ui-border-olive: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-olive));
@@ -252,7 +260,8 @@
252
260
  --ui-bg-hover-green: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-green));
253
261
  --ui-bg-active-green: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-green));
254
262
  --ui-bg-disabled-green: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-green));
255
- --ui-text-green: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-green));
263
+ --ui-text-green-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-green));
264
+ --ui-text-green: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-green));
256
265
  --ui-text-disabled-green: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-green));
257
266
 
258
267
  --ui-border-green: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-green));
@@ -279,7 +288,8 @@
279
288
  --ui-bg-hover-aqua: oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-aqua));
280
289
  --ui-bg-active-aqua: oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-aqua));
281
290
  --ui-bg-disabled-aqua: oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-aqua));
282
- --ui-text-aqua: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-aqua));
291
+ --ui-text-aqua-tone: oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-aqua));
292
+ --ui-text-aqua: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-aqua));
283
293
  --ui-text-disabled-aqua: oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-aqua));
284
294
 
285
295
  --ui-border-aqua: oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-aqua));
@@ -405,7 +415,6 @@
405
415
  --ui-border-soft-selected-l: 78%;
406
416
 
407
417
  /* element text lightness */
408
- --ui-text-l: 96%;
409
418
  --ui-text-soft-secondary-l: 48%;
410
419
  --ui-text-soft-l: 80%;
411
420
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heliosgraphics/ui",
3
- "version": "2.0.0-alpha.70",
3
+ "version": "2.0.0-alpha.71",
4
4
  "type": "module",
5
5
  "author": "Chris Puska <chris@puska.org>",
6
6
  "private": false,