@vsn-ux/gaia-styles 0.1.2 → 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 (9) hide show
  1. package/dist/all-no-reset-10pt.css +7 -0
  2. package/dist/all-no-reset.css +7 -0
  3. package/dist/all.css +7 -0
  4. package/dist/design-tokens.css +3 -0
  5. package/dist/design-tokens.d.ts +3 -0
  6. package/dist/design-tokens.js +36 -0
  7. package/package.json +1 -1
  8. package/src/design-tokens/dtcg-tokens.json +9 -0
  9. 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);
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);
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);
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.2",
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/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);