@new-ui/colors 1.2.6 → 1.2.8

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/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/_components.scss +0 -16
  5. package/src/_theme-dark--cold.scss +201 -0
  6. package/src/_theme-dark--warm.scss +201 -0
  7. package/src/_theme-dark.scss +191 -0
  8. package/src/_theme-light--cold.scss +78 -0
  9. package/src/_theme-light--warm.scss +78 -0
  10. package/src/_theme-light.scss +67 -0
  11. package/src/_utilities.scss +71 -36
  12. package/src/index.scss +3 -0
package/src/_theme-dark--cold.scss ADDED
@@ -0,0 +1,201 @@
1
+ [data-new-ui-theme="light--cold"] {
2
+ --red1: #FFF1F0;
3
+ --red2: #FFC8C5;
4
+ --red3: #FF9993;
5
+ --red4: #FF4A40;
6
+ --red5: #FF3B30;
7
+ --red6: #C22D25;
8
+ --red7: #851F19;
9
+ --red8: #47100D;
10
+
11
+ --orange1: #FFF7EC;
12
+ --orange2: #FFE1B8;
13
+ --orange3: #FFC87A;
14
+ --orange4: #FF9D14;
15
+ --orange5: #FF9500;
16
+ --orange6: #C27100;
17
+ --orange7: #854E00;
18
+ --orange8: #472900;
19
+
20
+ --yellow1: #FFFBEC;
21
+ --yellow2: #FFF1B8;
22
+ --yellow3: #FFE47A;
23
+ --yellow4: #FFD014;
24
+ --yellow5: #FFCC00;
25
+ --yellow6: #C29B00;
26
+ --yellow7: #856A00;
27
+ --yellow8: #473900;
28
+
29
+ --green1: #F0FBF3;
30
+ --green2: #C6EFD1;
31
+ --green3: #95E2A8;
32
+ --green4: #44CB66;
33
+ --green5: #34C759;
34
+ --green6: #289744;
35
+ --green7: #1B682E;
36
+ --green8: #0E3719;
37
+
38
+ --mint1: #ECFBFA;
39
+ --mint2: #B8EFED;
40
+ --mint3: #7AE2DD;
41
+ --mint4: #14CBC3;
42
+ --mint5: #00C7BE;
43
+ --mint6: #009791;
44
+ --mint7: #006863;
45
+ --mint8: #003735;
46
+
47
+ --teal1: #F0F9FB;
48
+ --teal2: #C5E9EF;
49
+ --teal3: #93D6E2;
50
+ --teal4: #40B6CB;
51
+ --teal5: #30B0C7;
52
+ --teal6: #258697;
53
+ --teal7: #195C68;
54
+ --teal8: #0D3137;
55
+
56
+ --cyan1: #F0F9FD;
57
+ --cyan2: #C6E8F8;
58
+ --cyan3: #94D4F2;
59
+ --cyan4: #42B3E8;
60
+ --cyan5: #32ADE6;
61
+ --cyan6: #2684AF;
62
+ --cyan7: #1A5A78;
63
+ --cyan8: #0E3040;
64
+
65
+ --blue1: #ECF5FF;
66
+ --blue2: #B8DAFF;
67
+ --blue3: #7ABAFF;
68
+ --blue4: #1484FF;
69
+ --blue5: #007AFF;
70
+ --blue6: #005DC2;
71
+ --blue7: #004085;
72
+ --blue8: #002247;
73
+
74
+ --indigo1: #F3F2FC;
75
+ --indigo2: #D1D0F4;
76
+ --indigo3: #A8A7EA;
77
+ --indigo4: #6563D9;
78
+ --indigo5: #5856D6;
79
+ --indigo6: #4341A3;
80
+ --indigo7: #2E2D70;
81
+ --indigo8: #19183C;
82
+
83
+ --purple1: #F9F2FD;
84
+ --purple2: #E9CFF6;
85
+ --purple3: #D5A5EE;
86
+ --purple4: #B560E1;
87
+ --purple5: #AF52DE;
88
+ --purple6: #853EA9;
89
+ --purple7: #5B2B74;
90
+ --purple8: #31173E;
91
+
92
+ --pink1: #FFEFF2;
93
+ --pink2: #FFC5D0;
94
+ --pink3: #FF91A6;
95
+ --pink4: #FF3D62;
96
+ --pink5: #FF2D55;
97
+ --pink6: #C22241;
98
+ --pink7: #85172C;
99
+ --pink8: #470D18;
100
+
101
+ --brown1: #F8F6F3;
102
+ --brown2: #E5DDD2;
103
+ --brown3: #CEBFAB;
104
+ --brown4: #A98E6B;
105
+ --brown5: #A2845E;
106
+ --brown6: #7B6448;
107
+ --brown7: #544531;
108
+ --brown8: #2D251A;
109
+
110
+ --grey1: #F2F4F8;
111
+ --grey2: #DDE1E6;
112
+ --grey3: #C1C7CD;
113
+ --grey4: #A2A9B0;
114
+ --grey5: #878D96;
115
+ --grey6: #697077;
116
+ --grey7: #4D5358;
117
+ --grey8: #343A3F;
118
+ --grey9: #21272A;
119
+ --grey10: #121619;
120
+
121
+ --cold1: var(--grey1);
122
+ --cold2: var(--grey2);
123
+ --cold3: var(--grey3);
124
+ --cold4: var(--grey4);
125
+ --cold5: var(--grey5);
126
+ --cold6: var(--grey6);
127
+ --cold7: var(--grey7);
128
+ --cold8: var(--grey8);
129
+ --cold9: var(--grey9);
130
+ --cold10: var(--grey10);
131
+
132
+ --black: #000000;
133
+ --white: #ffffff;
134
+
135
+ // Backgrounds
136
+ --background: var(--cold10);
137
+ --background-secondary: var(--cold9);
138
+ --background-hover: var(--cold9);
139
+ --background-selected: var(--cold8);
140
+ --background-selected-hover: var(--cold7);
141
+ --background-red: var(--red8);
142
+ --background-orange: var(--orange8);
143
+ --background-yellow: var(--yellow8);
144
+ --background-green: var(--green8);
145
+ --background-mint: var(--mint8);
146
+ --background-teal: var(--teal8);
147
+ --background-cyan: var(--cyan8);
148
+ --background-blue: var(--blue8);
149
+ --background-indigo: var(--indigo8);
150
+ --background-purple: var(--purple8);
151
+ --background-pink: var(--pink8);
152
+ --background-brown: var(--brown8);
153
+
154
+ // Borders
155
+ --border-muted: var(--cold9);
156
+ --border: var(--cold7);
157
+ --border-strong: var(--cold6);
158
+ --border-inked: var(--cold1);
159
+ --border-inverse: var(--white);
160
+ --border-focus: var(--blue4);
161
+
162
+ // Buttons
163
+ --button-primary: var(--blue4);
164
+ --button-primary-hover: var(--blue3);
165
+ --button-primary-active: var(--blue3);
166
+ --button-secondary: var(--cold1);
167
+ --button-secondary-hover: var(--cold2);
168
+ --button-secondary-active: var(--cold3);
169
+ --button-danger: var(--red4);
170
+ --button-danger-hover: var(--red3);
171
+ --button-danger-active: var(--red3);
172
+ --button-disabled: var(--cold9);
173
+
174
+ // Icons
175
+ --icon-primary: var(--cold2);
176
+ --icon-secondary: var(--cold4);
177
+ --icon-disabled: var(--cold8);
178
+ --icon-on-color: var(--white);
179
+
180
+ // Links
181
+ --link: var(--blue4);
182
+ --link-hover: var(--blue3);
183
+ --link-subtle: var(--cold1);
184
+ --link-visited: var(--indigo4);
185
+
186
+ // Support
187
+ --support-error: var(--red4);
188
+ --support-warning: var(--yellow4);
189
+ --support-success: var(--green4);
190
+ --support-info: var(--blue4);
191
+
192
+ // Text
193
+ --text-primary: var(--cold1);
194
+ --text-primary-alt: var(--cold3);
195
+ --text-secondary: var(--cold5);
196
+ --text-secondary-alt: var(--cold6);
197
+ --text-placeholder: var(--cold7);
198
+ --text-on-color: var(--white);
199
+ --text-error: var(--red4);
200
+ --text-success: var(--green4);
201
+ }
package/src/_theme-dark--warm.scss ADDED
@@ -0,0 +1,201 @@
1
+ [data-new-ui-theme="light--warm"] {
2
+ --red1: #FFF1F0;
3
+ --red2: #FFC8C5;
4
+ --red3: #FF9993;
5
+ --red4: #FF4A40;
6
+ --red5: #FF3B30;
7
+ --red6: #C22D25;
8
+ --red7: #851F19;
9
+ --red8: #47100D;
10
+
11
+ --orange1: #FFF7EC;
12
+ --orange2: #FFE1B8;
13
+ --orange3: #FFC87A;
14
+ --orange4: #FF9D14;
15
+ --orange5: #FF9500;
16
+ --orange6: #C27100;
17
+ --orange7: #854E00;
18
+ --orange8: #472900;
19
+
20
+ --yellow1: #FFFBEC;
21
+ --yellow2: #FFF1B8;
22
+ --yellow3: #FFE47A;
23
+ --yellow4: #FFD014;
24
+ --yellow5: #FFCC00;
25
+ --yellow6: #C29B00;
26
+ --yellow7: #856A00;
27
+ --yellow8: #473900;
28
+
29
+ --green1: #F0FBF3;
30
+ --green2: #C6EFD1;
31
+ --green3: #95E2A8;
32
+ --green4: #44CB66;
33
+ --green5: #34C759;
34
+ --green6: #289744;
35
+ --green7: #1B682E;
36
+ --green8: #0E3719;
37
+
38
+ --mint1: #ECFBFA;
39
+ --mint2: #B8EFED;
40
+ --mint3: #7AE2DD;
41
+ --mint4: #14CBC3;
42
+ --mint5: #00C7BE;
43
+ --mint6: #009791;
44
+ --mint7: #006863;
45
+ --mint8: #003735;
46
+
47
+ --teal1: #F0F9FB;
48
+ --teal2: #C5E9EF;
49
+ --teal3: #93D6E2;
50
+ --teal4: #40B6CB;
51
+ --teal5: #30B0C7;
52
+ --teal6: #258697;
53
+ --teal7: #195C68;
54
+ --teal8: #0D3137;
55
+
56
+ --cyan1: #F0F9FD;
57
+ --cyan2: #C6E8F8;
58
+ --cyan3: #94D4F2;
59
+ --cyan4: #42B3E8;
60
+ --cyan5: #32ADE6;
61
+ --cyan6: #2684AF;
62
+ --cyan7: #1A5A78;
63
+ --cyan8: #0E3040;
64
+
65
+ --blue1: #ECF5FF;
66
+ --blue2: #B8DAFF;
67
+ --blue3: #7ABAFF;
68
+ --blue4: #1484FF;
69
+ --blue5: #007AFF;
70
+ --blue6: #005DC2;
71
+ --blue7: #004085;
72
+ --blue8: #002247;
73
+
74
+ --indigo1: #F3F2FC;
75
+ --indigo2: #D1D0F4;
76
+ --indigo3: #A8A7EA;
77
+ --indigo4: #6563D9;
78
+ --indigo5: #5856D6;
79
+ --indigo6: #4341A3;
80
+ --indigo7: #2E2D70;
81
+ --indigo8: #19183C;
82
+
83
+ --purple1: #F9F2FD;
84
+ --purple2: #E9CFF6;
85
+ --purple3: #D5A5EE;
86
+ --purple4: #B560E1;
87
+ --purple5: #AF52DE;
88
+ --purple6: #853EA9;
89
+ --purple7: #5B2B74;
90
+ --purple8: #31173E;
91
+
92
+ --pink1: #FFEFF2;
93
+ --pink2: #FFC5D0;
94
+ --pink3: #FF91A6;
95
+ --pink4: #FF3D62;
96
+ --pink5: #FF2D55;
97
+ --pink6: #C22241;
98
+ --pink7: #85172C;
99
+ --pink8: #470D18;
100
+
101
+ --brown1: #F8F6F3;
102
+ --brown2: #E5DDD2;
103
+ --brown3: #CEBFAB;
104
+ --brown4: #A98E6B;
105
+ --brown5: #A2845E;
106
+ --brown6: #7B6448;
107
+ --brown7: #544531;
108
+ --brown8: #2D251A;
109
+
110
+ --grey1: #F7F3F2;
111
+ --grey2: #E5E0DF;
112
+ --grey3: #CAC5C4;
113
+ --grey4: #ADA8A8;
114
+ --grey5: #8F8B8B;
115
+ --grey6: #726E6E;
116
+ --grey7: #565151;
117
+ --grey8: #3C3838;
118
+ --grey9: #272525;
119
+ --grey10: #171414;
120
+
121
+ --warm1: var(--grey1);
122
+ --warm2: var(--grey2);
123
+ --warm3: var(--grey3);
124
+ --warm4: var(--grey4);
125
+ --warm5: var(--grey5);
126
+ --warm6: var(--grey6);
127
+ --warm7: var(--grey7);
128
+ --warm8: var(--grey8);
129
+ --warm9: var(--grey9);
130
+ --warm10: var(--grey10);
131
+
132
+ --black: #000000;
133
+ --white: #ffffff;
134
+
135
+ // Backgrounds
136
+ --background: var(--warm10);
137
+ --background-secondary: var(--warm9);
138
+ --background-hover: var(--warm9);
139
+ --background-selected: var(--warm9);
140
+ --background-selected-hover: var(--warm7);
141
+ --background-red: var(--red8);
142
+ --background-orange: var(--orange8);
143
+ --background-yellow: var(--yellow8);
144
+ --background-green: var(--green8);
145
+ --background-mint: var(--mint8);
146
+ --background-teal: var(--teal8);
147
+ --background-cyan: var(--cyan8);
148
+ --background-blue: var(--blue8);
149
+ --background-indigo: var(--indigo8);
150
+ --background-purple: var(--purple8);
151
+ --background-pink: var(--pink8);
152
+ --background-brown: var(--brown8);
153
+
154
+ // Borders
155
+ --border-muted: var(--warm9);
156
+ --border: var(--warm7);
157
+ --border-strong: var(--warm6);
158
+ --border-inked: var(--warm1);
159
+ --border-inverse: var(--white);
160
+ --border-focus: var(--blue4);
161
+
162
+ // Buttons
163
+ --button-primary: var(--blue4);
164
+ --button-primary-hover: var(--blue3);
165
+ --button-primary-active: var(--blue3);
166
+ --button-secondary: var(--warm1);
167
+ --button-secondary-hover: var(--warm2);
168
+ --button-secondary-active: var(--warm3);
169
+ --button-danger: var(--red4);
170
+ --button-danger-hover: var(--red3);
171
+ --button-danger-active: var(--red3);
172
+ --button-disabled: var(--warm9);
173
+
174
+ // Icons
175
+ --icon-primary: var(--warm2);
176
+ --icon-secondary: var(--warm4);
177
+ --icon-disabled: var(--warm8);
178
+ --icon-on-color: var(--white);
179
+
180
+ // Links
181
+ --link: var(--blue4);
182
+ --link-hover: var(--blue3);
183
+ --link-subtle: var(--warm1);
184
+ --link-visited: var(--indigo4);
185
+
186
+ // Support
187
+ --support-error: var(--red4);
188
+ --support-warning: var(--yellow4);
189
+ --support-success: var(--green4);
190
+ --support-info: var(--blue4);
191
+
192
+ // Text
193
+ --text-primary: var(--warm1);
194
+ --text-primary-alt: var(--warm3);
195
+ --text-secondary: var(--warm5);
196
+ --text-secondary-alt: var(--warm6);
197
+ --text-placeholder: var(--warm7);
198
+ --text-on-color: var(--white);
199
+ --text-error: var(--red4);
200
+ --text-success: var(--green4);
201
+ }
package/src/_theme-dark.scss ADDED
@@ -0,0 +1,191 @@
1
+ :root,
2
+ [data-new-ui-theme="light"] {
3
+ --red1: #FFF1F0;
4
+ --red2: #FFC8C5;
5
+ --red3: #FF9993;
6
+ --red4: #FF4A40;
7
+ --red5: #FF3B30;
8
+ --red6: #C22D25;
9
+ --red7: #851F19;
10
+ --red8: #47100D;
11
+
12
+ --orange1: #FFF7EC;
13
+ --orange2: #FFE1B8;
14
+ --orange3: #FFC87A;
15
+ --orange4: #FF9D14;
16
+ --orange5: #FF9500;
17
+ --orange6: #C27100;
18
+ --orange7: #854E00;
19
+ --orange8: #472900;
20
+
21
+ --yellow1: #FFFBEC;
22
+ --yellow2: #FFF1B8;
23
+ --yellow3: #FFE47A;
24
+ --yellow4: #FFD014;
25
+ --yellow5: #FFCC00;
26
+ --yellow6: #C29B00;
27
+ --yellow7: #856A00;
28
+ --yellow8: #473900;
29
+
30
+ --green1: #F0FBF3;
31
+ --green2: #C6EFD1;
32
+ --green3: #95E2A8;
33
+ --green4: #44CB66;
34
+ --green5: #34C759;
35
+ --green6: #289744;
36
+ --green7: #1B682E;
37
+ --green8: #0E3719;
38
+
39
+ --mint1: #ECFBFA;
40
+ --mint2: #B8EFED;
41
+ --mint3: #7AE2DD;
42
+ --mint4: #14CBC3;
43
+ --mint5: #00C7BE;
44
+ --mint6: #009791;
45
+ --mint7: #006863;
46
+ --mint8: #003735;
47
+
48
+ --teal1: #F0F9FB;
49
+ --teal2: #C5E9EF;
50
+ --teal3: #93D6E2;
51
+ --teal4: #40B6CB;
52
+ --teal5: #30B0C7;
53
+ --teal6: #258697;
54
+ --teal7: #195C68;
55
+ --teal8: #0D3137;
56
+
57
+ --cyan1: #F0F9FD;
58
+ --cyan2: #C6E8F8;
59
+ --cyan3: #94D4F2;
60
+ --cyan4: #42B3E8;
61
+ --cyan5: #32ADE6;
62
+ --cyan6: #2684AF;
63
+ --cyan7: #1A5A78;
64
+ --cyan8: #0E3040;
65
+
66
+ --blue1: #ECF5FF;
67
+ --blue2: #B8DAFF;
68
+ --blue3: #7ABAFF;
69
+ --blue4: #1484FF;
70
+ --blue5: #007AFF;
71
+ --blue6: #005DC2;
72
+ --blue7: #004085;
73
+ --blue8: #002247;
74
+
75
+ --indigo1: #F3F2FC;
76
+ --indigo2: #D1D0F4;
77
+ --indigo3: #A8A7EA;
78
+ --indigo4: #6563D9;
79
+ --indigo5: #5856D6;
80
+ --indigo6: #4341A3;
81
+ --indigo7: #2E2D70;
82
+ --indigo8: #19183C;
83
+
84
+ --purple1: #F9F2FD;
85
+ --purple2: #E9CFF6;
86
+ --purple3: #D5A5EE;
87
+ --purple4: #B560E1;
88
+ --purple5: #AF52DE;
89
+ --purple6: #853EA9;
90
+ --purple7: #5B2B74;
91
+ --purple8: #31173E;
92
+
93
+ --pink1: #FFEFF2;
94
+ --pink2: #FFC5D0;
95
+ --pink3: #FF91A6;
96
+ --pink4: #FF3D62;
97
+ --pink5: #FF2D55;
98
+ --pink6: #C22241;
99
+ --pink7: #85172C;
100
+ --pink8: #470D18;
101
+
102
+ --brown1: #F8F6F3;
103
+ --brown2: #E5DDD2;
104
+ --brown3: #CEBFAB;
105
+ --brown4: #A98E6B;
106
+ --brown5: #A2845E;
107
+ --brown6: #7B6448;
108
+ --brown7: #544531;
109
+ --brown8: #2D251A;
110
+
111
+ --grey1: #F4F4F4;
112
+ --grey2: #E0E0E0;
113
+ --grey3: #C6C6C6;
114
+ --grey4: #A8A8A8;
115
+ --grey5: #8D8D8D;
116
+ --grey6: #6F6F6F;
117
+ --grey7: #525252;
118
+ --grey8: #393939;
119
+ --grey9: #262626;
120
+ --grey10: #161616;
121
+
122
+ --black: #000000;
123
+ --white: #ffffff;
124
+
125
+ // Backgrounds
126
+ --background: var(--grey10);
127
+ --background-secondary: var(--grey9);
128
+ --background-hover: var(--grey9);
129
+ --background-selected: var(--grey8);
130
+ --background-selected-hover: var(--grey7);
131
+ --background-red: var(--red8);
132
+ --background-orange: var(--orange8);
133
+ --background-yellow: var(--yellow8);
134
+ --background-green: var(--green8);
135
+ --background-mint: var(--mint8);
136
+ --background-teal: var(--teal8);
137
+ --background-cyan: var(--cyan8);
138
+ --background-blue: var(--blue8);
139
+ --background-indigo: var(--indigo8);
140
+ --background-purple: var(--purple8);
141
+ --background-pink: var(--pink8);
142
+ --background-brown: var(--brown8);
143
+
144
+ // Borders
145
+ --border-muted: var(--grey9);
146
+ --border: var(--grey7);
147
+ --border-strong: var(--grey6);
148
+ --border-inked: var(--grey1);
149
+ --border-inverse: var(--white);
150
+ --border-focus: var(--blue4);
151
+
152
+ // Buttons
153
+ --button-primary: var(--blue4);
154
+ --button-primary-hover: var(--blue3);
155
+ --button-primary-active: var(--blue3);
156
+ --button-secondary: var(--grey1);
157
+ --button-secondary-hover: var(--grey2);
158
+ --button-secondary-active: var(--grey3);
159
+ --button-danger: var(--red4);
160
+ --button-danger-hover: var(--red3);
161
+ --button-danger-active: var(--red3);
162
+ --button-disabled: var(--grey9);
163
+
164
+ // Icons
165
+ --icon-primary: var(--grey2);
166
+ --icon-secondary: var(--grey4);
167
+ --icon-disabled: var(--grey8);
168
+ --icon-on-color: var(--white);
169
+
170
+ // Links
171
+ --link: var(--blue4);
172
+ --link-hover: var(--blue3);
173
+ --link-subtle: var(--grey1);
174
+ --link-visited: var(--indigo4);
175
+
176
+ // Support
177
+ --support-error: var(--red4);
178
+ --support-warning: var(--yellow4);
179
+ --support-success: var(--green4);
180
+ --support-info: var(--blue4);
181
+
182
+ // Text
183
+ --text-primary: var(--grey1);
184
+ --text-primary-alt: var(--grey3);
185
+ --text-secondary: var(--grey5);
186
+ --text-secondary-alt: var(--grey6);
187
+ --text-placeholder: var(--grey7);
188
+ --text-on-color: var(--white);
189
+ --text-error: var(--red4);
190
+ --text-success: var(--green4);
191
+ }
package/src/_theme-light--cold.scss CHANGED
@@ -118,6 +118,84 @@
118
118
  --grey9: #21272A;
119
119
  --grey10: #121619;
120
120
 
121
+ --cold1: var(--grey1);
122
+ --cold2: var(--grey2);
123
+ --cold3: var(--grey3);
124
+ --cold4: var(--grey4);
125
+ --cold5: var(--grey5);
126
+ --cold6: var(--grey6);
127
+ --cold7: var(--grey7);
128
+ --cold8: var(--grey8);
129
+ --cold9: var(--grey9);
130
+ --cold10: var(--grey10);
131
+
121
132
  --black: #000000;
122
133
  --white: #ffffff;
134
+
135
+ // Backgrounds
136
+ --background: var(--white);
137
+ --background-secondary: var(--cold1);
138
+ --background-hover: var(--cold1);
139
+ --background-selected: var(--cold2);
140
+ --background-selected-hover: var(--cold3);
141
+ --background-red: var(--red1);
142
+ --background-orange: var(--orange1);
143
+ --background-yellow: var(--yellow1);
144
+ --background-green: var(--green1);
145
+ --background-mint: var(--mint1);
146
+ --background-teal: var(--teal1);
147
+ --background-cyan: var(--cyan1);
148
+ --background-blue: var(--blue1);
149
+ --background-indigo: var(--indigo1);
150
+ --background-purple: var(--purple1);
151
+ --background-pink: var(--pink1);
152
+ --background-brown: var(--brown1);
153
+
154
+ // Borders
155
+ --border-muted: var(--cold2);
156
+ --border: var(--cold4);
157
+ --border-strong: var(--cold6);
158
+ --border-inked: var(--cold10);
159
+ --border-inverse: var(--white);
160
+ --border-focus: var(--blue5);
161
+
162
+ // Buttons
163
+ --button-primary: var(--blue5);
164
+ --button-primary-hover: var(--blue6);
165
+ --button-primary-active: var(--blue7);
166
+ --button-secondary: var(--cold8);
167
+ --button-secondary-hover: var(--cold7);
168
+ --button-secondary-active: var(--cold6);
169
+ --button-danger: var(--red5);
170
+ --button-danger-hover: var(--red6);
171
+ --button-danger-active: var(--red7);
172
+ --button-disabled: var(--cold4);
173
+
174
+ // Icons
175
+ --icon-primary: var(--cold9);
176
+ --icon-secondary: var(--cold7);
177
+ --icon-disabled: var(--cold4);
178
+ --icon-on-color: var(--white);
179
+
180
+ // Links
181
+ --link: var(--blue5);
182
+ --link-hover: var(--blue6);
183
+ --link-subtle: var(--cold8);
184
+ --link-visited: var(--indigo5);
185
+
186
+ // Support
187
+ --support-error: var(--red5);
188
+ --support-warning: var(--yellow5);
189
+ --support-success: var(--green5);
190
+ --support-info: var(--blue5);
191
+
192
+ // Text
193
+ --text-primary: var(--cold10);
194
+ --text-primary-alt: var(--cold8);
195
+ --text-secondary: var(--cold7);
196
+ --text-secondary-alt: var(--cold5);
197
+ --text-placeholder: var(--cold4);
198
+ --text-on-color: var(--white);
199
+ --text-error: var(--red6);
200
+ --text-success: var(--green6);
123
201
  }