@vsn-ux/gaia-styles 0.1.1 → 0.1.3

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 (12) hide show
  1. package/dist/all-no-reset-10pt.css +10 -0
  2. package/dist/all-no-reset.css +10 -0
  3. package/dist/all.css +10 -0
  4. package/dist/components/checkbox.css +3 -0
  5. package/dist/components.css +3 -0
  6. package/dist/design-tokens.css +3 -0
  7. package/dist/design-tokens.d.ts +3 -0
  8. package/dist/design-tokens.js +36 -0
  9. package/package.json +1 -1
  10. package/src/design-tokens/dtcg-tokens.json +9 -0
  11. package/src/styles/components/checkbox.css +4 -0
  12. package/src/styles/theme.css +4 -0
package/dist/all-no-reset-10pt.css CHANGED
@@ -2,6 +2,7 @@
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
5
+ --ga-color-blue-60: #366af6;
5
6
  --ga-color-blue-70: #1f4ddb;
6
7
  --ga-color-border-action: var(--ga-color-primary);
7
8
  --ga-color-border-action-hover: var(--ga-color-primary-60);
@@ -22,6 +23,7 @@
22
23
  --ga-color-error-light: var(--ga-color-utility-red-light);
23
24
  --ga-color-green-10: #eef5ee;
24
25
  --ga-color-green-40: #9bc59b;
26
+ --ga-color-green-60: #448548;
25
27
  --ga-color-green-70: #2e6b31;
26
28
  --ga-color-grey-10: #f2f2f2;
27
29
  --ga-color-grey-40: #b9b9b9;
@@ -52,6 +54,7 @@
52
54
  --ga-color-purple-40: #c3acf9;
53
55
  --ga-color-red-10: #fcf1ee;
54
56
  --ga-color-red-40: #eca79e;
57
+ --ga-color-red-60: #cc453e;
55
58
  --ga-color-red-70: #b0241d;
56
59
  --ga-color-rose-10: #fcf0f4;
57
60
  --ga-color-rose-40: #efa1bd;
@@ -162,8 +165,10 @@
162
165
  --color-cyan-90: var(--ga-color-cyan-90);
163
166
  --color-blue-10: var(--ga-color-blue-10);
164
167
  --color-blue-40: var(--ga-color-blue-40);
168
+ --color-blue-60: var(--ga-color-blue-60);
165
169
  --color-green-10: var(--ga-color-green-10);
166
170
  --color-green-40: var(--ga-color-green-40);
171
+ --color-green-60: var(--ga-color-green-60);
167
172
  --color-grey-10: var(--ga-color-grey-10);
168
173
  --color-grey-40: var(--ga-color-grey-40);
169
174
  --color-indigo-10: var(--ga-color-indigo-10);
@@ -178,12 +183,14 @@
178
183
  --color-orange-20: var(--ga-color-orange-20);
179
184
  --color-orange-30: var(--ga-color-orange-30);
180
185
  --color-orange-40: var(--ga-color-orange-40);
186
+ --color-orange-60: var(--ga-color-orange-60);
181
187
  --color-pink-10: var(--ga-color-pink-10);
182
188
  --color-pink-40: var(--ga-color-pink-40);
183
189
  --color-purple-10: var(--ga-color-purple-10);
184
190
  --color-purple-40: var(--ga-color-purple-40);
185
191
  --color-red-10: var(--ga-color-red-10);
186
192
  --color-red-40: var(--ga-color-red-40);
193
+ --color-red-60: var(--ga-color-red-60);
187
194
  --color-rose-10: var(--ga-color-rose-10);
188
195
  --color-rose-40: var(--ga-color-rose-40);
189
196
  --color-teal-10: var(--ga-color-teal-10);
@@ -529,6 +536,9 @@
529
536
  display: none;
530
537
  }
531
538
  }
539
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
540
+ color: var(--ga-color-text-disabled);
541
+ }
532
542
  }
533
543
  .ga-form-field {
534
544
  display: flex;
package/dist/all-no-reset.css CHANGED
@@ -2,6 +2,7 @@
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
5
+ --ga-color-blue-60: #366af6;
5
6
  --ga-color-blue-70: #1f4ddb;
6
7
  --ga-color-border-action: var(--ga-color-primary);
7
8
  --ga-color-border-action-hover: var(--ga-color-primary-60);
@@ -22,6 +23,7 @@
22
23
  --ga-color-error-light: var(--ga-color-utility-red-light);
23
24
  --ga-color-green-10: #eef5ee;
24
25
  --ga-color-green-40: #9bc59b;
26
+ --ga-color-green-60: #448548;
25
27
  --ga-color-green-70: #2e6b31;
26
28
  --ga-color-grey-10: #f2f2f2;
27
29
  --ga-color-grey-40: #b9b9b9;
@@ -52,6 +54,7 @@
52
54
  --ga-color-purple-40: #c3acf9;
53
55
  --ga-color-red-10: #fcf1ee;
54
56
  --ga-color-red-40: #eca79e;
57
+ --ga-color-red-60: #cc453e;
55
58
  --ga-color-red-70: #b0241d;
56
59
  --ga-color-rose-10: #fcf0f4;
57
60
  --ga-color-rose-40: #efa1bd;
@@ -162,8 +165,10 @@
162
165
  --color-cyan-90: var(--ga-color-cyan-90);
163
166
  --color-blue-10: var(--ga-color-blue-10);
164
167
  --color-blue-40: var(--ga-color-blue-40);
168
+ --color-blue-60: var(--ga-color-blue-60);
165
169
  --color-green-10: var(--ga-color-green-10);
166
170
  --color-green-40: var(--ga-color-green-40);
171
+ --color-green-60: var(--ga-color-green-60);
167
172
  --color-grey-10: var(--ga-color-grey-10);
168
173
  --color-grey-40: var(--ga-color-grey-40);
169
174
  --color-indigo-10: var(--ga-color-indigo-10);
@@ -178,12 +183,14 @@
178
183
  --color-orange-20: var(--ga-color-orange-20);
179
184
  --color-orange-30: var(--ga-color-orange-30);
180
185
  --color-orange-40: var(--ga-color-orange-40);
186
+ --color-orange-60: var(--ga-color-orange-60);
181
187
  --color-pink-10: var(--ga-color-pink-10);
182
188
  --color-pink-40: var(--ga-color-pink-40);
183
189
  --color-purple-10: var(--ga-color-purple-10);
184
190
  --color-purple-40: var(--ga-color-purple-40);
185
191
  --color-red-10: var(--ga-color-red-10);
186
192
  --color-red-40: var(--ga-color-red-40);
193
+ --color-red-60: var(--ga-color-red-60);
187
194
  --color-rose-10: var(--ga-color-rose-10);
188
195
  --color-rose-40: var(--ga-color-rose-40);
189
196
  --color-teal-10: var(--ga-color-teal-10);
@@ -529,6 +536,9 @@
529
536
  display: none;
530
537
  }
531
538
  }
539
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
540
+ color: var(--ga-color-text-disabled);
541
+ }
532
542
  }
533
543
  .ga-form-field {
534
544
  display: flex;
package/dist/all.css CHANGED
@@ -2,6 +2,7 @@
2
2
  :root {
3
3
  --ga-color-blue-10: #edf4fe;
4
4
  --ga-color-blue-40: #93bbf9;
5
+ --ga-color-blue-60: #366af6;
5
6
  --ga-color-blue-70: #1f4ddb;
6
7
  --ga-color-border-action: var(--ga-color-primary);
7
8
  --ga-color-border-action-hover: var(--ga-color-primary-60);
@@ -22,6 +23,7 @@
22
23
  --ga-color-error-light: var(--ga-color-utility-red-light);
23
24
  --ga-color-green-10: #eef5ee;
24
25
  --ga-color-green-40: #9bc59b;
26
+ --ga-color-green-60: #448548;
25
27
  --ga-color-green-70: #2e6b31;
26
28
  --ga-color-grey-10: #f2f2f2;
27
29
  --ga-color-grey-40: #b9b9b9;
@@ -52,6 +54,7 @@
52
54
  --ga-color-purple-40: #c3acf9;
53
55
  --ga-color-red-10: #fcf1ee;
54
56
  --ga-color-red-40: #eca79e;
57
+ --ga-color-red-60: #cc453e;
55
58
  --ga-color-red-70: #b0241d;
56
59
  --ga-color-rose-10: #fcf0f4;
57
60
  --ga-color-rose-40: #efa1bd;
@@ -162,8 +165,10 @@
162
165
  --color-cyan-90: var(--ga-color-cyan-90);
163
166
  --color-blue-10: var(--ga-color-blue-10);
164
167
  --color-blue-40: var(--ga-color-blue-40);
168
+ --color-blue-60: var(--ga-color-blue-60);
165
169
  --color-green-10: var(--ga-color-green-10);
166
170
  --color-green-40: var(--ga-color-green-40);
171
+ --color-green-60: var(--ga-color-green-60);
167
172
  --color-grey-10: var(--ga-color-grey-10);
168
173
  --color-grey-40: var(--ga-color-grey-40);
169
174
  --color-indigo-10: var(--ga-color-indigo-10);
@@ -178,12 +183,14 @@
178
183
  --color-orange-20: var(--ga-color-orange-20);
179
184
  --color-orange-30: var(--ga-color-orange-30);
180
185
  --color-orange-40: var(--ga-color-orange-40);
186
+ --color-orange-60: var(--ga-color-orange-60);
181
187
  --color-pink-10: var(--ga-color-pink-10);
182
188
  --color-pink-40: var(--ga-color-pink-40);
183
189
  --color-purple-10: var(--ga-color-purple-10);
184
190
  --color-purple-40: var(--ga-color-purple-40);
185
191
  --color-red-10: var(--ga-color-red-10);
186
192
  --color-red-40: var(--ga-color-red-40);
193
+ --color-red-60: var(--ga-color-red-60);
187
194
  --color-rose-10: var(--ga-color-rose-10);
188
195
  --color-rose-40: var(--ga-color-rose-40);
189
196
  --color-teal-10: var(--ga-color-teal-10);
@@ -670,6 +677,9 @@
670
677
  display: none;
671
678
  }
672
679
  }
680
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
681
+ color: var(--ga-color-text-disabled);
682
+ }
673
683
  }
674
684
  .ga-form-field {
675
685
  display: flex;
package/dist/components/checkbox.css CHANGED
@@ -74,6 +74,9 @@
74
74
  display: none;
75
75
  }
76
76
  }
77
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
78
+ color: var(--ga-color-text-disabled);
79
+ }
77
80
  }
78
81
  @property --tw-border-style {
79
82
  syntax: "*";
package/dist/components.css CHANGED
@@ -287,6 +287,9 @@
287
287
  display: none;
288
288
  }
289
289
  }
290
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
291
+ color: var(--ga-color-text-disabled);
292
+ }
290
293
  }
291
294
  .ga-form-field {
292
295
  display: flex;
package/dist/design-tokens.css CHANGED
@@ -5,6 +5,7 @@
5
5
  :root {
6
6
  --ga-color-blue-10: #edf4fe;
7
7
  --ga-color-blue-40: #93bbf9;
8
+ --ga-color-blue-60: #366af6;
8
9
  --ga-color-blue-70: #1f4ddb;
9
10
  --ga-color-border-action: var(--ga-color-primary);
10
11
  --ga-color-border-action-hover: var(--ga-color-primary-60);
@@ -25,6 +26,7 @@
25
26
  --ga-color-error-light: var(--ga-color-utility-red-light);
26
27
  --ga-color-green-10: #eef5ee;
27
28
  --ga-color-green-40: #9bc59b;
29
+ --ga-color-green-60: #448548;
28
30
  --ga-color-green-70: #2e6b31;
29
31
  --ga-color-grey-10: #f2f2f2;
30
32
  --ga-color-grey-40: #b9b9b9;
@@ -55,6 +57,7 @@
55
57
  --ga-color-purple-40: #c3acf9;
56
58
  --ga-color-red-10: #fcf1ee;
57
59
  --ga-color-red-40: #eca79e;
60
+ --ga-color-red-60: #cc453e;
58
61
  --ga-color-red-70: #b0241d;
59
62
  --ga-color-rose-10: #fcf0f4;
60
63
  --ga-color-rose-40: #efa1bd;
package/dist/design-tokens.d.ts CHANGED
@@ -27,12 +27,15 @@ export declare const tokens: {
27
27
  "color.neutral.60": Record<".", ColorTokenNormalized["$value"]>;
28
28
  "color.blue.10": Record<".", ColorTokenNormalized["$value"]>;
29
29
  "color.blue.40": Record<".", ColorTokenNormalized["$value"]>;
30
+ "color.blue.60": Record<".", ColorTokenNormalized["$value"]>;
30
31
  "color.blue.70": Record<".", ColorTokenNormalized["$value"]>;
31
32
  "color.green.10": Record<".", ColorTokenNormalized["$value"]>;
32
33
  "color.green.40": Record<".", ColorTokenNormalized["$value"]>;
34
+ "color.green.60": Record<".", ColorTokenNormalized["$value"]>;
33
35
  "color.green.70": Record<".", ColorTokenNormalized["$value"]>;
34
36
  "color.red.10": Record<".", ColorTokenNormalized["$value"]>;
35
37
  "color.red.40": Record<".", ColorTokenNormalized["$value"]>;
38
+ "color.red.60": Record<".", ColorTokenNormalized["$value"]>;
36
39
  "color.red.70": Record<".", ColorTokenNormalized["$value"]>;
37
40
  "color.grey.10": Record<".", ColorTokenNormalized["$value"]>;
38
41
  "color.grey.40": Record<".", ColorTokenNormalized["$value"]>;
package/dist/design-tokens.js CHANGED
@@ -219,6 +219,18 @@ export const tokens = {
219
219
  "hex": "#93bbf9"
220
220
  },
221
221
  },
222
+ "color.blue.60": {
223
+ ".": {
224
+ "colorSpace": "srgb",
225
+ "channels": [
226
+ 0.21176470588235294,
227
+ 0.41568627450980394,
228
+ 0.9647058823529412
229
+ ],
230
+ "alpha": 1,
231
+ "hex": "#366af6"
232
+ },
233
+ },
222
234
  "color.blue.70": {
223
235
  ".": {
224
236
  "colorSpace": "srgb",
@@ -255,6 +267,18 @@ export const tokens = {
255
267
  "hex": "#9bc59b"
256
268
  },
257
269
  },
270
+ "color.green.60": {
271
+ ".": {
272
+ "colorSpace": "srgb",
273
+ "channels": [
274
+ 0.26666666666666666,
275
+ 0.5215686274509804,
276
+ 0.2823529411764706
277
+ ],
278
+ "alpha": 1,
279
+ "hex": "#448548"
280
+ },
281
+ },
258
282
  "color.green.70": {
259
283
  ".": {
260
284
  "colorSpace": "srgb",
@@ -291,6 +315,18 @@ export const tokens = {
291
315
  "hex": "#eca79e"
292
316
  },
293
317
  },
318
+ "color.red.60": {
319
+ ".": {
320
+ "colorSpace": "srgb",
321
+ "channels": [
322
+ 0.8,
323
+ 0.27058823529411763,
324
+ 0.24313725490196078
325
+ ],
326
+ "alpha": 1,
327
+ "hex": "#cc453e"
328
+ },
329
+ },
294
330
  "color.red.70": {
295
331
  ".": {
296
332
  "colorSpace": "srgb",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "storybook dev -p 6006",
package/src/design-tokens/dtcg-tokens.json CHANGED
@@ -60,6 +60,9 @@
60
60
  "40": {
61
61
  "$value": "#93BBF9"
62
62
  },
63
+ "60": {
64
+ "$value": "#366AF6"
65
+ },
63
66
  "70": {
64
67
  "$value": "#1F4DDB"
65
68
  }
@@ -71,6 +74,9 @@
71
74
  "40": {
72
75
  "$value": "#9BC59B"
73
76
  },
77
+ "60": {
78
+ "$value": "#448548"
79
+ },
74
80
  "70": {
75
81
  "$value": "#2E6B31"
76
82
  }
@@ -82,6 +88,9 @@
82
88
  "40": {
83
89
  "$value": "#ECA79E"
84
90
  },
91
+ "60": {
92
+ "$value": "#CC453E"
93
+ },
85
94
  "70": {
86
95
  "$value": "#B0241D"
87
96
  }
package/src/styles/components/checkbox.css CHANGED
@@ -63,4 +63,8 @@
63
63
  @apply hidden;
64
64
  }
65
65
  }
66
+
67
+ .ga-checkbox__native:disabled ~ .ga-checkbox__label {
68
+ @apply text-(--ga-color-text-disabled);
69
+ }
66
70
  }
package/src/styles/theme.css CHANGED
@@ -5,8 +5,10 @@
5
5
  --color-cyan-90: var(--ga-color-cyan-90);
6
6
  --color-blue-10: var(--ga-color-blue-10);
7
7
  --color-blue-40: var(--ga-color-blue-40);
8
+ --color-blue-60: var(--ga-color-blue-60);
8
9
  --color-green-10: var(--ga-color-green-10);
9
10
  --color-green-40: var(--ga-color-green-40);
11
+ --color-green-60: var(--ga-color-green-60);
10
12
  --color-grey-10: var(--ga-color-grey-10);
11
13
  --color-grey-40: var(--ga-color-grey-40);
12
14
  --color-indigo-10: var(--ga-color-indigo-10);
@@ -21,12 +23,14 @@
21
23
  --color-orange-20: var(--ga-color-orange-20);
22
24
  --color-orange-30: var(--ga-color-orange-30);
23
25
  --color-orange-40: var(--ga-color-orange-40);
26
+ --color-orange-60: var(--ga-color-orange-60);
24
27
  --color-pink-10: var(--ga-color-pink-10);
25
28
  --color-pink-40: var(--ga-color-pink-40);
26
29
  --color-purple-10: var(--ga-color-purple-10);
27
30
  --color-purple-40: var(--ga-color-purple-40);
28
31
  --color-red-10: var(--ga-color-red-10);
29
32
  --color-red-40: var(--ga-color-red-40);
33
+ --color-red-60: var(--ga-color-red-60);
30
34
  --color-rose-10: var(--ga-color-rose-10);
31
35
  --color-rose-40: var(--ga-color-rose-40);
32
36
  --color-teal-10: var(--ga-color-teal-10);