@nattstack/ui 0.0.1 → 0.0.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 (57) hide show
  1. package/dist/colors/index.css +3 -0
  2. package/dist/colors/root-p3.css +904 -0
  3. package/dist/colors/root.css +906 -0
  4. package/dist/{button.module-77AJOXGM.module.css → components/button.module-EYMY7VLZ.module.css} +14 -7
  5. package/dist/components/dialog-responsive-backdrop.module-O336AARV.module.css +27 -0
  6. package/dist/components/dialog-responsive-bar.module-QCLP4IUN.module.css +14 -0
  7. package/dist/components/dialog-responsive-popup.module-BOEQIHJ7.module.css +58 -0
  8. package/dist/components/dialog-responsive-portal.module-YFVKMKVT.module.css +5 -0
  9. package/dist/components/dialog-responsive-viewport.module-LT7MZPLD.module.css +16 -0
  10. package/dist/{index.d.ts → components/index.d.ts} +33 -17
  11. package/dist/{index.js → components/index.js} +244 -99
  12. package/dist/{tabs-pill-tab.module-M5YIWTWX.module.css → components/tabs-pill-tab.module-2F7LOGXE.module.css} +7 -0
  13. package/dist/{tabs-segmented-indicator.module-MB5GZJGW.module.css → components/tabs-segmented-indicator.module-EG56DHS2.module.css} +1 -1
  14. package/dist/{tabs-segmented-tab.module-GFCOY63Z.module.css → components/tabs-segmented-tab.module-SVYVEM2O.module.css} +7 -0
  15. package/dist/{tabs-underline-tab.module-YGSM4IUK.module.css → components/tabs-underline-tab.module-OAE4JH7K.module.css} +7 -0
  16. package/dist/{textarea.module-6GUVSFC7.module.css → components/textarea.module-LK25MKCZ.module.css} +2 -1
  17. package/dist/tailwind-colors/color.css +88 -0
  18. package/dist/tailwind-colors/gray.css +335 -0
  19. package/dist/tailwind-colors/index.css +6 -0
  20. package/dist/tailwind-colors/primary.css +1399 -0
  21. package/dist/tailwind-tokenless/10/container.css +16 -0
  22. package/dist/tailwind-tokenless/10/index.css +19 -0
  23. package/dist/tailwind-tokenless/10/radius.css +12 -0
  24. package/dist/tailwind-tokenless/10/spacing.css +38 -0
  25. package/dist/tailwind-tokenless/10/text.css +20 -0
  26. package/dist/tailwind-tokenless/16/container.css +16 -0
  27. package/dist/tailwind-tokenless/16/index.css +19 -0
  28. package/dist/tailwind-tokenless/16/radius.css +12 -0
  29. package/dist/tailwind-tokenless/16/spacing.css +38 -0
  30. package/dist/tailwind-tokenless/16/text.css +20 -0
  31. package/dist/tailwind-tokenless/aspect.css +7 -0
  32. package/dist/tailwind-tokenless/blur.css +11 -0
  33. package/dist/tailwind-tokenless/breakpoint.css +10 -0
  34. package/dist/tailwind-tokenless/drop-shadow.css +10 -0
  35. package/dist/tailwind-tokenless/font-weight.css +12 -0
  36. package/dist/tailwind-tokenless/inset-shadow.css +6 -0
  37. package/dist/tailwind-tokenless/leading.css +9 -0
  38. package/dist/tailwind-tokenless/perspective-dramatic.css +9 -0
  39. package/dist/tailwind-tokenless/shadow.css +11 -0
  40. package/dist/tailwind-tokenless/text-shadow.css +12 -0
  41. package/dist/tailwind-tokenless/tracking.css +7 -0
  42. package/package.json +11 -10
  43. /package/dist/{button-spinner.module-T3OGVJS4.module.css → components/button-spinner.module-T3OGVJS4.module.css} +0 -0
  44. /package/dist/{column.module-A7QCVPFC.module.css → components/column.module-A7QCVPFC.module.css} +0 -0
  45. /package/dist/{input.module-DOM3NIU5.module.css → components/input.module-DOM3NIU5.module.css} +0 -0
  46. /package/dist/{label.module-HUBUIUFV.module.css → components/label.module-HUBUIUFV.module.css} +0 -0
  47. /package/dist/{row.module-GYNANRAY.module.css → components/row.module-GYNANRAY.module.css} +0 -0
  48. /package/dist/{spacer.module-ZYYYWYEB.module.css → components/spacer.module-ZYYYWYEB.module.css} +0 -0
  49. /package/dist/{switch.module-TLJBHCSA.module.css → components/switch.module-TLJBHCSA.module.css} +0 -0
  50. /package/dist/{tabs-panel.module-VGH3G3KV.module.css → components/tabs-panel.module-VGH3G3KV.module.css} +0 -0
  51. /package/dist/{tabs-pill-indicator.module-533HMO7L.module.css → components/tabs-pill-indicator.module-533HMO7L.module.css} +0 -0
  52. /package/dist/{tabs-pill-list.module-KQW67ZSW.module.css → components/tabs-pill-list.module-KQW67ZSW.module.css} +0 -0
  53. /package/dist/{tabs-segmented-list.module-I3DSVFSP.module.css → components/tabs-segmented-list.module-I3DSVFSP.module.css} +0 -0
  54. /package/dist/{tabs-underline-indicator.module-6SHQHUH5.module.css → components/tabs-underline-indicator.module-6SHQHUH5.module.css} +0 -0
  55. /package/dist/{tabs-underline-list.module-72ZCIEAS.module.css → components/tabs-underline-list.module-72ZCIEAS.module.css} +0 -0
  56. /package/dist/{tabs.module-3Z5DRPPX.module.css → components/tabs.module-3Z5DRPPX.module.css} +0 -0
  57. /package/dist/{tooltip-content.module-5MWTMSBY.module.css → components/tooltip-content.module-5MWTMSBY.module.css} +0 -0
@@ -40,6 +40,13 @@
40
40
  color: var(--color-black);
41
41
  }
42
42
 
43
+ /* Icon size */
44
+ .tabs_pill_tab > svg {
45
+ --size-icon: 16px;
46
+ height: var(--size-icon);
47
+ width: var(--size-icon);
48
+ }
49
+
43
50
  .tabs_pill_tab_wrapper {
44
51
  --border-radius: 12px;
45
52
  border-radius: var(--border-radius);
@@ -1,6 +1,6 @@
1
1
  .tabs_segmented_indicator {
2
2
  background-color: var(--color-gray-1);
3
- border-radius: 12px;
3
+ border-radius: 10px;
4
4
  height: var(--active-tab-height);
5
5
  left: var(--active-tab-left);
6
6
  position: absolute;
@@ -27,3 +27,10 @@
27
27
  .tabs_segmented_tab[data-active] {
28
28
  color: var(--color-gray-12);
29
29
  }
30
+
31
+ /* Icon size */
32
+ .tabs_segmented_tab > svg {
33
+ --size-icon: 16px;
34
+ height: var(--size-icon);
35
+ width: var(--size-icon);
36
+ }
@@ -26,3 +26,10 @@
26
26
  .tabs_underline_tab[data-active] {
27
27
  color: var(--color-gray-12);
28
28
  }
29
+
30
+ /* Icon size */
31
+ .tabs_underline_tab > svg {
32
+ --size-icon: 16px;
33
+ height: var(--size-icon);
34
+ width: var(--size-icon);
35
+ }
@@ -2,8 +2,9 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .textarea {
5
- min-height: 66px;
5
+ height: auto;
6
6
  max-height: none;
7
+ min-height: 66px;
7
8
  padding: 12px !important;
8
9
  resize: vertical;
9
10
  }
@@ -0,0 +1,88 @@
1
+ @theme {
2
+ /* Reset ============================================= */
3
+ --color-\*: initial;
4
+
5
+ /* White & Black ===================================== */
6
+ --color-white: var(--color-white);
7
+ --color-black: var(--color-black);
8
+
9
+ /* Gray ============================================== */
10
+ --color-gray-1: var(--color-gray-1);
11
+ --color-gray-2: var(--color-gray-2);
12
+ --color-gray-3: var(--color-gray-3);
13
+ --color-gray-4: var(--color-gray-4);
14
+ --color-gray-5: var(--color-gray-5);
15
+ --color-gray-6: var(--color-gray-6);
16
+ --color-gray-7: var(--color-gray-7);
17
+ --color-gray-8: var(--color-gray-8);
18
+ --color-gray-9: var(--color-gray-9);
19
+ --color-gray-10: var(--color-gray-10);
20
+ --color-gray-11: var(--color-gray-11);
21
+ --color-gray-12: var(--color-gray-12);
22
+
23
+ --color-gray-light-1: var(--color-gray-light-1);
24
+ --color-gray-light-2: var(--color-gray-light-2);
25
+ --color-gray-light-3: var(--color-gray-light-3);
26
+ --color-gray-light-4: var(--color-gray-light-4);
27
+ --color-gray-light-5: var(--color-gray-light-5);
28
+ --color-gray-light-6: var(--color-gray-light-6);
29
+ --color-gray-light-7: var(--color-gray-light-7);
30
+ --color-gray-light-8: var(--color-gray-light-8);
31
+ --color-gray-light-9: var(--color-gray-light-9);
32
+ --color-gray-light-10: var(--color-gray-light-10);
33
+ --color-gray-light-11: var(--color-gray-light-11);
34
+ --color-gray-light-12: var(--color-gray-light-12);
35
+
36
+ --color-gray-dark-1: var(--color-gray-dark-1);
37
+ --color-gray-dark-2: var(--color-gray-dark-2);
38
+ --color-gray-dark-3: var(--color-gray-dark-3);
39
+ --color-gray-dark-4: var(--color-gray-dark-4);
40
+ --color-gray-dark-5: var(--color-gray-dark-5);
41
+ --color-gray-dark-6: var(--color-gray-dark-6);
42
+ --color-gray-dark-7: var(--color-gray-dark-7);
43
+ --color-gray-dark-8: var(--color-gray-dark-8);
44
+ --color-gray-dark-9: var(--color-gray-dark-9);
45
+ --color-gray-dark-10: var(--color-gray-dark-10);
46
+ --color-gray-dark-11: var(--color-gray-dark-11);
47
+ --color-gray-dark-12: var(--color-gray-dark-12);
48
+
49
+ /* Primary =========================================== */
50
+ --color-primary-1: var(--color-primary-1);
51
+ --color-primary-2: var(--color-primary-2);
52
+ --color-primary-3: var(--color-primary-3);
53
+ --color-primary-4: var(--color-primary-4);
54
+ --color-primary-5: var(--color-primary-5);
55
+ --color-primary-6: var(--color-primary-6);
56
+ --color-primary-7: var(--color-primary-7);
57
+ --color-primary-8: var(--color-primary-8);
58
+ --color-primary-9: var(--color-primary-9);
59
+ --color-primary-10: var(--color-primary-10);
60
+ --color-primary-11: var(--color-primary-11);
61
+ --color-primary-12: var(--color-primary-12);
62
+
63
+ --color-primary-light-1: var(--color-primary-light-1);
64
+ --color-primary-light-2: var(--color-primary-light-2);
65
+ --color-primary-light-3: var(--color-primary-light-3);
66
+ --color-primary-light-4: var(--color-primary-light-4);
67
+ --color-primary-light-5: var(--color-primary-light-5);
68
+ --color-primary-light-6: var(--color-primary-light-6);
69
+ --color-primary-light-7: var(--color-primary-light-7);
70
+ --color-primary-light-8: var(--color-primary-light-8);
71
+ --color-primary-light-9: var(--color-primary-light-9);
72
+ --color-primary-light-10: var(--color-primary-light-10);
73
+ --color-primary-light-11: var(--color-primary-light-11);
74
+ --color-primary-light-12: var(--color-primary-light-12);
75
+
76
+ --color-primary-dark-1: var(--color-primary-dark-1);
77
+ --color-primary-dark-2: var(--color-primary-dark-2);
78
+ --color-primary-dark-3: var(--color-primary-dark-3);
79
+ --color-primary-dark-4: var(--color-primary-dark-4);
80
+ --color-primary-dark-5: var(--color-primary-dark-5);
81
+ --color-primary-dark-6: var(--color-primary-dark-6);
82
+ --color-primary-dark-7: var(--color-primary-dark-7);
83
+ --color-primary-dark-8: var(--color-primary-dark-8);
84
+ --color-primary-dark-9: var(--color-primary-dark-9);
85
+ --color-primary-dark-10: var(--color-primary-dark-10);
86
+ --color-primary-dark-11: var(--color-primary-dark-11);
87
+ --color-primary-dark-12: var(--color-primary-dark-12);
88
+ }
@@ -0,0 +1,335 @@
1
+ .color-gray-gray {
2
+ --color-gray-1: var(--color-primitive-gray-1);
3
+ --color-gray-2: var(--color-primitive-gray-2);
4
+ --color-gray-3: var(--color-primitive-gray-3);
5
+ --color-gray-4: var(--color-primitive-gray-4);
6
+ --color-gray-5: var(--color-primitive-gray-5);
7
+ --color-gray-6: var(--color-primitive-gray-6);
8
+ --color-gray-7: var(--color-primitive-gray-7);
9
+ --color-gray-8: var(--color-primitive-gray-8);
10
+ --color-gray-9: var(--color-primitive-gray-9);
11
+ --color-gray-10: var(--color-primitive-gray-10);
12
+ --color-gray-11: var(--color-primitive-gray-11);
13
+ --color-gray-12: var(--color-primitive-gray-12);
14
+
15
+ --color-gray-light-1: var(--color-primitive-gray-1);
16
+ --color-gray-light-2: var(--color-primitive-gray-2);
17
+ --color-gray-light-3: var(--color-primitive-gray-3);
18
+ --color-gray-light-4: var(--color-primitive-gray-4);
19
+ --color-gray-light-5: var(--color-primitive-gray-5);
20
+ --color-gray-light-6: var(--color-primitive-gray-6);
21
+ --color-gray-light-7: var(--color-primitive-gray-7);
22
+ --color-gray-light-8: var(--color-primitive-gray-8);
23
+ --color-gray-light-9: var(--color-primitive-gray-9);
24
+ --color-gray-light-10: var(--color-primitive-gray-10);
25
+ --color-gray-light-11: var(--color-primitive-gray-11);
26
+ --color-gray-light-12: var(--color-primitive-gray-12);
27
+
28
+ --color-gray-dark-1: var(--color-primitive-gray-dark-1);
29
+ --color-gray-dark-2: var(--color-primitive-gray-dark-2);
30
+ --color-gray-dark-3: var(--color-primitive-gray-dark-3);
31
+ --color-gray-dark-4: var(--color-primitive-gray-dark-4);
32
+ --color-gray-dark-5: var(--color-primitive-gray-dark-5);
33
+ --color-gray-dark-6: var(--color-primitive-gray-dark-6);
34
+ --color-gray-dark-7: var(--color-primitive-gray-dark-7);
35
+ --color-gray-dark-8: var(--color-primitive-gray-dark-8);
36
+ --color-gray-dark-9: var(--color-primitive-gray-dark-9);
37
+ --color-gray-dark-10: var(--color-primitive-gray-dark-10);
38
+ --color-gray-dark-11: var(--color-primitive-gray-dark-11);
39
+ --color-gray-dark-12: var(--color-primitive-gray-dark-12);
40
+ }
41
+
42
+ .dark.color-gray-gray {
43
+ --color-gray-1: var(--color-primitive-gray-dark-1);
44
+ --color-gray-2: var(--color-primitive-gray-dark-2);
45
+ --color-gray-3: var(--color-primitive-gray-dark-3);
46
+ --color-gray-4: var(--color-primitive-gray-dark-4);
47
+ --color-gray-5: var(--color-primitive-gray-dark-5);
48
+ --color-gray-6: var(--color-primitive-gray-dark-6);
49
+ --color-gray-7: var(--color-primitive-gray-dark-7);
50
+ --color-gray-8: var(--color-primitive-gray-dark-8);
51
+ --color-gray-9: var(--color-primitive-gray-dark-9);
52
+ --color-gray-10: var(--color-primitive-gray-dark-10);
53
+ --color-gray-11: var(--color-primitive-gray-dark-11);
54
+ --color-gray-12: var(--color-primitive-gray-dark-12);
55
+ }
56
+
57
+ .color-gray-mauve {
58
+ --color-gray-1: var(--color-primitive-mauve-1);
59
+ --color-gray-2: var(--color-primitive-mauve-2);
60
+ --color-gray-3: var(--color-primitive-mauve-3);
61
+ --color-gray-4: var(--color-primitive-mauve-4);
62
+ --color-gray-5: var(--color-primitive-mauve-5);
63
+ --color-gray-6: var(--color-primitive-mauve-6);
64
+ --color-gray-7: var(--color-primitive-mauve-7);
65
+ --color-gray-8: var(--color-primitive-mauve-8);
66
+ --color-gray-9: var(--color-primitive-mauve-9);
67
+ --color-gray-10: var(--color-primitive-mauve-10);
68
+ --color-gray-11: var(--color-primitive-mauve-11);
69
+ --color-gray-12: var(--color-primitive-mauve-12);
70
+
71
+ --color-gray-light-1: var(--color-primitive-mauve-1);
72
+ --color-gray-light-2: var(--color-primitive-mauve-2);
73
+ --color-gray-light-3: var(--color-primitive-mauve-3);
74
+ --color-gray-light-4: var(--color-primitive-mauve-4);
75
+ --color-gray-light-5: var(--color-primitive-mauve-5);
76
+ --color-gray-light-6: var(--color-primitive-mauve-6);
77
+ --color-gray-light-7: var(--color-primitive-mauve-7);
78
+ --color-gray-light-8: var(--color-primitive-mauve-8);
79
+ --color-gray-light-9: var(--color-primitive-mauve-9);
80
+ --color-gray-light-10: var(--color-primitive-mauve-10);
81
+ --color-gray-light-11: var(--color-primitive-mauve-11);
82
+ --color-gray-light-12: var(--color-primitive-mauve-12);
83
+
84
+ --color-gray-dark-1: var(--color-primitive-mauve-dark-1);
85
+ --color-gray-dark-2: var(--color-primitive-mauve-dark-2);
86
+ --color-gray-dark-3: var(--color-primitive-mauve-dark-3);
87
+ --color-gray-dark-4: var(--color-primitive-mauve-dark-4);
88
+ --color-gray-dark-5: var(--color-primitive-mauve-dark-5);
89
+ --color-gray-dark-6: var(--color-primitive-mauve-dark-6);
90
+ --color-gray-dark-7: var(--color-primitive-mauve-dark-7);
91
+ --color-gray-dark-8: var(--color-primitive-mauve-dark-8);
92
+ --color-gray-dark-9: var(--color-primitive-mauve-dark-9);
93
+ --color-gray-dark-10: var(--color-primitive-mauve-dark-10);
94
+ --color-gray-dark-11: var(--color-primitive-mauve-dark-11);
95
+ --color-gray-dark-12: var(--color-primitive-mauve-dark-12);
96
+ }
97
+
98
+ .dark.color-gray-mauve {
99
+ --color-gray-1: var(--color-primitive-mauve-dark-1);
100
+ --color-gray-2: var(--color-primitive-mauve-dark-2);
101
+ --color-gray-3: var(--color-primitive-mauve-dark-3);
102
+ --color-gray-4: var(--color-primitive-mauve-dark-4);
103
+ --color-gray-5: var(--color-primitive-mauve-dark-5);
104
+ --color-gray-6: var(--color-primitive-mauve-dark-6);
105
+ --color-gray-7: var(--color-primitive-mauve-dark-7);
106
+ --color-gray-8: var(--color-primitive-mauve-dark-8);
107
+ --color-gray-9: var(--color-primitive-mauve-dark-9);
108
+ --color-gray-10: var(--color-primitive-mauve-dark-10);
109
+ --color-gray-11: var(--color-primitive-mauve-dark-11);
110
+ --color-gray-12: var(--color-primitive-mauve-dark-12);
111
+ }
112
+
113
+ .color-gray-slate {
114
+ --color-gray-1: var(--color-primitive-slate-1);
115
+ --color-gray-2: var(--color-primitive-slate-2);
116
+ --color-gray-3: var(--color-primitive-slate-3);
117
+ --color-gray-4: var(--color-primitive-slate-4);
118
+ --color-gray-5: var(--color-primitive-slate-5);
119
+ --color-gray-6: var(--color-primitive-slate-6);
120
+ --color-gray-7: var(--color-primitive-slate-7);
121
+ --color-gray-8: var(--color-primitive-slate-8);
122
+ --color-gray-9: var(--color-primitive-slate-9);
123
+ --color-gray-10: var(--color-primitive-slate-10);
124
+ --color-gray-11: var(--color-primitive-slate-11);
125
+ --color-gray-12: var(--color-primitive-slate-12);
126
+
127
+ --color-gray-light-1: var(--color-primitive-slate-1);
128
+ --color-gray-light-2: var(--color-primitive-slate-2);
129
+ --color-gray-light-3: var(--color-primitive-slate-3);
130
+ --color-gray-light-4: var(--color-primitive-slate-4);
131
+ --color-gray-light-5: var(--color-primitive-slate-5);
132
+ --color-gray-light-6: var(--color-primitive-slate-6);
133
+ --color-gray-light-7: var(--color-primitive-slate-7);
134
+ --color-gray-light-8: var(--color-primitive-slate-8);
135
+ --color-gray-light-9: var(--color-primitive-slate-9);
136
+ --color-gray-light-10: var(--color-primitive-slate-10);
137
+ --color-gray-light-11: var(--color-primitive-slate-11);
138
+ --color-gray-light-12: var(--color-primitive-slate-12);
139
+
140
+ --color-gray-dark-1: var(--color-primitive-slate-dark-1);
141
+ --color-gray-dark-2: var(--color-primitive-slate-dark-2);
142
+ --color-gray-dark-3: var(--color-primitive-slate-dark-3);
143
+ --color-gray-dark-4: var(--color-primitive-slate-dark-4);
144
+ --color-gray-dark-5: var(--color-primitive-slate-dark-5);
145
+ --color-gray-dark-6: var(--color-primitive-slate-dark-6);
146
+ --color-gray-dark-7: var(--color-primitive-slate-dark-7);
147
+ --color-gray-dark-8: var(--color-primitive-slate-dark-8);
148
+ --color-gray-dark-9: var(--color-primitive-slate-dark-9);
149
+ --color-gray-dark-10: var(--color-primitive-slate-dark-10);
150
+ --color-gray-dark-11: var(--color-primitive-slate-dark-11);
151
+ --color-gray-dark-12: var(--color-primitive-slate-dark-12);
152
+ }
153
+
154
+ .dark.color-gray-slate {
155
+ --color-gray-1: var(--color-primitive-slate-dark-1);
156
+ --color-gray-2: var(--color-primitive-slate-dark-2);
157
+ --color-gray-3: var(--color-primitive-slate-dark-3);
158
+ --color-gray-4: var(--color-primitive-slate-dark-4);
159
+ --color-gray-5: var(--color-primitive-slate-dark-5);
160
+ --color-gray-6: var(--color-primitive-slate-dark-6);
161
+ --color-gray-7: var(--color-primitive-slate-dark-7);
162
+ --color-gray-8: var(--color-primitive-slate-dark-8);
163
+ --color-gray-9: var(--color-primitive-slate-dark-9);
164
+ --color-gray-10: var(--color-primitive-slate-dark-10);
165
+ --color-gray-11: var(--color-primitive-slate-dark-11);
166
+ --color-gray-12: var(--color-primitive-slate-dark-12);
167
+ }
168
+
169
+ .color-gray-sage {
170
+ --color-gray-1: var(--color-primitive-sage-1);
171
+ --color-gray-2: var(--color-primitive-sage-2);
172
+ --color-gray-3: var(--color-primitive-sage-3);
173
+ --color-gray-4: var(--color-primitive-sage-4);
174
+ --color-gray-5: var(--color-primitive-sage-5);
175
+ --color-gray-6: var(--color-primitive-sage-6);
176
+ --color-gray-7: var(--color-primitive-sage-7);
177
+ --color-gray-8: var(--color-primitive-sage-8);
178
+ --color-gray-9: var(--color-primitive-sage-9);
179
+ --color-gray-10: var(--color-primitive-sage-10);
180
+ --color-gray-11: var(--color-primitive-sage-11);
181
+ --color-gray-12: var(--color-primitive-sage-12);
182
+
183
+ --color-gray-light-1: var(--color-primitive-sage-1);
184
+ --color-gray-light-2: var(--color-primitive-sage-2);
185
+ --color-gray-light-3: var(--color-primitive-sage-3);
186
+ --color-gray-light-4: var(--color-primitive-sage-4);
187
+ --color-gray-light-5: var(--color-primitive-sage-5);
188
+ --color-gray-light-6: var(--color-primitive-sage-6);
189
+ --color-gray-light-7: var(--color-primitive-sage-7);
190
+ --color-gray-light-8: var(--color-primitive-sage-8);
191
+ --color-gray-light-9: var(--color-primitive-sage-9);
192
+ --color-gray-light-10: var(--color-primitive-sage-10);
193
+ --color-gray-light-11: var(--color-primitive-sage-11);
194
+ --color-gray-light-12: var(--color-primitive-sage-12);
195
+
196
+ --color-gray-dark-1: var(--color-primitive-sage-dark-1);
197
+ --color-gray-dark-2: var(--color-primitive-sage-dark-2);
198
+ --color-gray-dark-3: var(--color-primitive-sage-dark-3);
199
+ --color-gray-dark-4: var(--color-primitive-sage-dark-4);
200
+ --color-gray-dark-5: var(--color-primitive-sage-dark-5);
201
+ --color-gray-dark-6: var(--color-primitive-sage-dark-6);
202
+ --color-gray-dark-7: var(--color-primitive-sage-dark-7);
203
+ --color-gray-dark-8: var(--color-primitive-sage-dark-8);
204
+ --color-gray-dark-9: var(--color-primitive-sage-dark-9);
205
+ --color-gray-dark-10: var(--color-primitive-sage-dark-10);
206
+ --color-gray-dark-11: var(--color-primitive-sage-dark-11);
207
+ --color-gray-dark-12: var(--color-primitive-sage-dark-12);
208
+ }
209
+
210
+ .dark.color-gray-sage {
211
+ --color-gray-1: var(--color-primitive-sage-dark-1);
212
+ --color-gray-2: var(--color-primitive-sage-dark-2);
213
+ --color-gray-3: var(--color-primitive-sage-dark-3);
214
+ --color-gray-4: var(--color-primitive-sage-dark-4);
215
+ --color-gray-5: var(--color-primitive-sage-dark-5);
216
+ --color-gray-6: var(--color-primitive-sage-dark-6);
217
+ --color-gray-7: var(--color-primitive-sage-dark-7);
218
+ --color-gray-8: var(--color-primitive-sage-dark-8);
219
+ --color-gray-9: var(--color-primitive-sage-dark-9);
220
+ --color-gray-10: var(--color-primitive-sage-dark-10);
221
+ --color-gray-11: var(--color-primitive-sage-dark-11);
222
+ --color-gray-12: var(--color-primitive-sage-dark-12);
223
+ }
224
+
225
+ .color-gray-olive {
226
+ --color-gray-1: var(--color-primitive-olive-1);
227
+ --color-gray-2: var(--color-primitive-olive-2);
228
+ --color-gray-3: var(--color-primitive-olive-3);
229
+ --color-gray-4: var(--color-primitive-olive-4);
230
+ --color-gray-5: var(--color-primitive-olive-5);
231
+ --color-gray-6: var(--color-primitive-olive-6);
232
+ --color-gray-7: var(--color-primitive-olive-7);
233
+ --color-gray-8: var(--color-primitive-olive-8);
234
+ --color-gray-9: var(--color-primitive-olive-9);
235
+ --color-gray-10: var(--color-primitive-olive-10);
236
+ --color-gray-11: var(--color-primitive-olive-11);
237
+ --color-gray-12: var(--color-primitive-olive-12);
238
+
239
+ --color-gray-light-1: var(--color-primitive-olive-1);
240
+ --color-gray-light-2: var(--color-primitive-olive-2);
241
+ --color-gray-light-3: var(--color-primitive-olive-3);
242
+ --color-gray-light-4: var(--color-primitive-olive-4);
243
+ --color-gray-light-5: var(--color-primitive-olive-5);
244
+ --color-gray-light-6: var(--color-primitive-olive-6);
245
+ --color-gray-light-7: var(--color-primitive-olive-7);
246
+ --color-gray-light-8: var(--color-primitive-olive-8);
247
+ --color-gray-light-9: var(--color-primitive-olive-9);
248
+ --color-gray-light-10: var(--color-primitive-olive-10);
249
+ --color-gray-light-11: var(--color-primitive-olive-11);
250
+ --color-gray-light-12: var(--color-primitive-olive-12);
251
+
252
+ --color-gray-dark-1: var(--color-primitive-olive-dark-1);
253
+ --color-gray-dark-2: var(--color-primitive-olive-dark-2);
254
+ --color-gray-dark-3: var(--color-primitive-olive-dark-3);
255
+ --color-gray-dark-4: var(--color-primitive-olive-dark-4);
256
+ --color-gray-dark-5: var(--color-primitive-olive-dark-5);
257
+ --color-gray-dark-6: var(--color-primitive-olive-dark-6);
258
+ --color-gray-dark-7: var(--color-primitive-olive-dark-7);
259
+ --color-gray-dark-8: var(--color-primitive-olive-dark-8);
260
+ --color-gray-dark-9: var(--color-primitive-olive-dark-9);
261
+ --color-gray-dark-10: var(--color-primitive-olive-dark-10);
262
+ --color-gray-dark-11: var(--color-primitive-olive-dark-11);
263
+ --color-gray-dark-12: var(--color-primitive-olive-dark-12);
264
+ }
265
+
266
+ .dark.color-gray-olive {
267
+ --color-gray-1: var(--color-primitive-olive-dark-1);
268
+ --color-gray-2: var(--color-primitive-olive-dark-2);
269
+ --color-gray-3: var(--color-primitive-olive-dark-3);
270
+ --color-gray-4: var(--color-primitive-olive-dark-4);
271
+ --color-gray-5: var(--color-primitive-olive-dark-5);
272
+ --color-gray-6: var(--color-primitive-olive-dark-6);
273
+ --color-gray-7: var(--color-primitive-olive-dark-7);
274
+ --color-gray-8: var(--color-primitive-olive-dark-8);
275
+ --color-gray-9: var(--color-primitive-olive-dark-9);
276
+ --color-gray-10: var(--color-primitive-olive-dark-10);
277
+ --color-gray-11: var(--color-primitive-olive-dark-11);
278
+ --color-gray-12: var(--color-primitive-olive-dark-12);
279
+ }
280
+
281
+ .color-gray-sand {
282
+ --color-gray-1: var(--color-primitive-sand-1);
283
+ --color-gray-2: var(--color-primitive-sand-2);
284
+ --color-gray-3: var(--color-primitive-sand-3);
285
+ --color-gray-4: var(--color-primitive-sand-4);
286
+ --color-gray-5: var(--color-primitive-sand-5);
287
+ --color-gray-6: var(--color-primitive-sand-6);
288
+ --color-gray-7: var(--color-primitive-sand-7);
289
+ --color-gray-8: var(--color-primitive-sand-8);
290
+ --color-gray-9: var(--color-primitive-sand-9);
291
+ --color-gray-10: var(--color-primitive-sand-10);
292
+ --color-gray-11: var(--color-primitive-sand-11);
293
+ --color-gray-12: var(--color-primitive-sand-12);
294
+
295
+ --color-gray-light-1: var(--color-primitive-sand-1);
296
+ --color-gray-light-2: var(--color-primitive-sand-2);
297
+ --color-gray-light-3: var(--color-primitive-sand-3);
298
+ --color-gray-light-4: var(--color-primitive-sand-4);
299
+ --color-gray-light-5: var(--color-primitive-sand-5);
300
+ --color-gray-light-6: var(--color-primitive-sand-6);
301
+ --color-gray-light-7: var(--color-primitive-sand-7);
302
+ --color-gray-light-8: var(--color-primitive-sand-8);
303
+ --color-gray-light-9: var(--color-primitive-sand-9);
304
+ --color-gray-light-10: var(--color-primitive-sand-10);
305
+ --color-gray-light-11: var(--color-primitive-sand-11);
306
+ --color-gray-light-12: var(--color-primitive-sand-12);
307
+
308
+ --color-gray-dark-1: var(--color-primitive-sand-dark-1);
309
+ --color-gray-dark-2: var(--color-primitive-sand-dark-2);
310
+ --color-gray-dark-3: var(--color-primitive-sand-dark-3);
311
+ --color-gray-dark-4: var(--color-primitive-sand-dark-4);
312
+ --color-gray-dark-5: var(--color-primitive-sand-dark-5);
313
+ --color-gray-dark-6: var(--color-primitive-sand-dark-6);
314
+ --color-gray-dark-7: var(--color-primitive-sand-dark-7);
315
+ --color-gray-dark-8: var(--color-primitive-sand-dark-8);
316
+ --color-gray-dark-9: var(--color-primitive-sand-dark-9);
317
+ --color-gray-dark-10: var(--color-primitive-sand-dark-10);
318
+ --color-gray-dark-11: var(--color-primitive-sand-dark-11);
319
+ --color-gray-dark-12: var(--color-primitive-sand-dark-12);
320
+ }
321
+
322
+ .dark.color-gray-sand {
323
+ --color-gray-1: var(--color-primitive-sand-dark-1);
324
+ --color-gray-2: var(--color-primitive-sand-dark-2);
325
+ --color-gray-3: var(--color-primitive-sand-dark-3);
326
+ --color-gray-4: var(--color-primitive-sand-dark-4);
327
+ --color-gray-5: var(--color-primitive-sand-dark-5);
328
+ --color-gray-6: var(--color-primitive-sand-dark-6);
329
+ --color-gray-7: var(--color-primitive-sand-dark-7);
330
+ --color-gray-8: var(--color-primitive-sand-dark-8);
331
+ --color-gray-9: var(--color-primitive-sand-dark-9);
332
+ --color-gray-10: var(--color-primitive-sand-dark-10);
333
+ --color-gray-11: var(--color-primitive-sand-dark-11);
334
+ --color-gray-12: var(--color-primitive-sand-dark-12);
335
+ }
@@ -0,0 +1,6 @@
1
+ /* Order matters */
2
+ @import "../colors/root.css";
3
+ @import "../colors/root-p3.css";
4
+ @import "./gray.css";
5
+ @import "./primary.css";
6
+ @import "./color.css";