@microsoft/atlas-css 3.59.0 → 3.61.0

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 (17) hide show
  1. package/dist/class-names.json +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens.json +1 -1
  5. package/dist/tokens.ts +34 -0
  6. package/package.json +1 -1
  7. package/src/components/accordion.scss +5 -0
  8. package/src/components/button.scss +1 -1
  9. package/src/components/form/input.scss +1 -8
  10. package/src/components/form/select.scss +1 -1
  11. package/src/components/form/textarea.scss +14 -1
  12. package/src/components/message.scss +13 -3
  13. package/src/components/pagination.scss +4 -5
  14. package/src/components/tag.scss +11 -5
  15. package/src/tokens/colors.scss +39 -8
  16. package/src/tokens/palette.scss +216 -65
  17. package/src/tokens/themes.scss +194 -152
package/src/components/tag.scss CHANGED
@@ -15,7 +15,7 @@ $tag-icon-font-size: 0.875em !default;
15
15
  $tag-border-width: $border-width !default;
16
16
  $tag-border-radius: $border-radius !default;
17
17
  $tag-border-radius-rounded: $border-radius-rounded !default;
18
- $tag-border-color: $secondary !default;
18
+ $tag-border-color: $control-border !default;
19
19
 
20
20
  $tag-color: $secondary-dark !default;
21
21
  $tag-color-hover: $primary-dark !default;
@@ -25,17 +25,18 @@ $tag-background-hover: $secondary-background-glow-high-contrast !default;
25
25
  $tag-color-filled: $text !default;
26
26
  $tag-background-filled: $secondary-background-glow-high-contrast !default;
27
27
  $tag-color-filled-hover: $primary-hover !default;
28
- $tag-background-filled-hover: $secondary !default;
29
- $tag-interactive-divider-color-filled: $secondary-box-shadow !default;
28
+ $tag-background-filled-hover: $secondary-background-hover !default;
29
+ $tag-interactive-divider-color-filled: $control-border !default;
30
30
  $tag-interactive-color-filled-hover: $secondary-invert !default;
31
+ $tag-interactive-color-filled-close-hover: $primary-dark-hover !default;
31
32
 
32
33
  $tag-color-primary: $primary-dark !default;
33
34
  $tag-color-primary-hover: $primary-hover !default;
34
35
  $tag-background-primary: $primary-background !default;
35
- $tag-background-primary-hover: $primary-hover !default;
36
+ $tag-background-primary-hover: $primary-background-hover !default;
36
37
  $tag-border-color-primary: $primary-background-glow-high-contrast !default;
37
38
  $tag-interactive-divider-color-primary: $primary-box-shadow !default;
38
- $tag-interactive-color-primary-hover: $primary-invert !default;
39
+ $tag-interactive-color-primary-hover: $primary-dark-hover !default;
39
40
 
40
41
  .tag {
41
42
  display: inline-flex;
@@ -200,6 +201,11 @@ $tag-interactive-color-primary-hover: $primary-invert !default;
200
201
 
201
202
  .tag-close {
202
203
  border-inline-start-color: $tag-interactive-divider-color-filled;
204
+
205
+ &:hover,
206
+ &.is-hovered {
207
+ color: $tag-interactive-color-filled-close-hover;
208
+ }
203
209
  }
204
210
  }
205
211
  }
package/src/tokens/colors.scss CHANGED
@@ -8,6 +8,7 @@ $text: var(--theme-text);
8
8
  $text-subtle: var(--theme-text-subtle);
9
9
  $text-invert: var(--theme-text-invert);
10
10
  $hyperlink: var(--theme-hyperlink);
11
+ $hyperlink-hover: var(--theme-hyperlink-hover);
11
12
  $text-glow-high-contrast: var(--theme-text-glow-high-contrast);
12
13
  $box-shadow-color-light: var(--theme-box-shadow-light);
13
14
  $box-shadow-color-medium: var(--theme-box-shadow-medium);
@@ -51,7 +52,7 @@ $gradient-vivid-start: var(--theme-gradient-vivid-start);
51
52
  $gradient-vivid-end: var(--theme-gradient-vivid-end);
52
53
 
53
54
  $default-hover: var(--theme-hover-base);
54
- $default-hover-invert: $body-background-medium;
55
+ $default-hover-invert: var(--theme-hover-invert);
55
56
  $border-white-high-contrast: var(--theme-border-white-high-contrast);
56
57
  $border-yellow-high-contrast: var(--theme-border-yellow-high-contrast);
57
58
  $code-highlight-background: var(--theme-code-highlight-background);
@@ -66,8 +67,10 @@ $score-high: var(--theme-score-high);
66
67
 
67
68
  $primary: var(--theme-primary-base);
68
69
  $primary-background: var(--theme-primary-background);
70
+ $primary-background-hover: var(--theme-primary-background-hover);
69
71
  $primary-background-glow-high-contrast: var(--theme-primary-background-glow-high-contrast);
70
72
  $primary-dark: var(--theme-primary-dark);
73
+ $primary-dark-hover: var(--theme-primary-dark-hover);
71
74
  $primary-hover: var(--theme-primary-hover);
72
75
  $primary-active: var(--theme-primary-active);
73
76
  $primary-invert: var(--theme-primary-invert);
@@ -75,8 +78,10 @@ $primary-box-shadow: var(--theme-primary-box-shadow);
75
78
 
76
79
  $secondary: var(--theme-secondary-base);
77
80
  $secondary-background: var(--theme-secondary-background);
81
+ $secondary-background-hover: var(--theme-secondary-background-hover);
78
82
  $secondary-background-glow-high-contrast: var(--theme-secondary-background-glow-high-contrast);
79
83
  $secondary-dark: var(--theme-secondary-dark);
84
+ $secondary-dark-hover: var(--theme-secondary-dark-hover);
80
85
  $secondary-hover: var(--theme-secondary-hover);
81
86
  $secondary-active: var(--theme-secondary-active);
82
87
  $secondary-invert: var(--theme-secondary-invert);
@@ -84,8 +89,10 @@ $secondary-box-shadow: var(--theme-secondary-box-shadow);
84
89
 
85
90
  $tertiary: var(--theme-tertiary-base);
86
91
  $tertiary-background: var(--theme-tertiary-background);
92
+ $tertiary-background-hover: var(--theme-tertiary-background-hover);
87
93
  $tertiary-background-glow-high-contrast: var(--theme-tertiary-background-glow-high-contrast);
88
94
  $tertiary-dark: var(--theme-tertiary-dark);
95
+ $tertiary-dark-hover: var(--theme-tertiary-dark-hover);
89
96
  $tertiary-hover: var(--theme-tertiary-hover);
90
97
  $tertiary-active: var(--theme-tertiary-active);
91
98
  $tertiary-invert: var(--theme-tertiary-invert);
@@ -93,8 +100,10 @@ $tertiary-box-shadow: var(--theme-tertiary-box-shadow);
93
100
 
94
101
  $success: var(--theme-success-base);
95
102
  $success-background: var(--theme-success-background);
103
+ $success-background-hover: var(--theme-success-background-hover);
96
104
  $success-background-glow-high-contrast: var(--theme-success-background-glow-high-contrast);
97
105
  $success-dark: var(--theme-success-dark);
106
+ $success-dark-hover: var(--theme-success-dark-hover);
98
107
  $success-hover: var(--theme-success-hover);
99
108
  $success-active: var(--theme-success-active);
100
109
  $success-invert: var(--theme-success-invert);
@@ -102,8 +111,10 @@ $success-box-shadow: var(--theme-success-box-shadow);
102
111
 
103
112
  $info: var(--theme-info-base);
104
113
  $info-background: var(--theme-info-background);
114
+ $info-background-hover: var(--theme-info-background-hover);
105
115
  $info-background-glow-high-contrast: var(--theme-info-background-glow-high-contrast);
106
116
  $info-dark: var(--theme-info-dark);
117
+ $info-dark-hover: var(--theme-info-dark-hover);
107
118
  $info-hover: var(--theme-info-hover);
108
119
  $info-active: var(--theme-info-active);
109
120
  $info-invert: var(--theme-info-invert);
@@ -111,8 +122,10 @@ $info-box-shadow: var(--theme-info-box-shadow);
111
122
 
112
123
  $warning: var(--theme-warning-base);
113
124
  $warning-background: var(--theme-warning-background);
125
+ $warning-background-hover: var(--theme-warning-background-hover);
114
126
  $warning-background-glow-high-contrast: var(--theme-warning-background-glow-high-contrast);
115
127
  $warning-dark: var(--theme-warning-dark);
128
+ $warning-dark-hover: var(--theme-warning-dark-hover);
116
129
  $warning-hover: var(--theme-warning-hover);
117
130
  $warning-active: var(--theme-warning-active);
118
131
  $warning-invert: var(--theme-warning-invert);
@@ -120,8 +133,10 @@ $warning-box-shadow: var(--theme-warning-box-shadow);
120
133
 
121
134
  $danger: var(--theme-danger-base);
122
135
  $danger-background: var(--theme-danger-background);
136
+ $danger-background-hover: var(--theme-danger-background-hover);
123
137
  $danger-background-glow-high-contrast: var(--theme-danger-background-glow-high-contrast);
124
138
  $danger-dark: var(--theme-danger-dark);
139
+ $danger-dark-hover: var(--theme-danger-dark-hover);
125
140
  $danger-hover: var(--theme-danger-hover);
126
141
  $danger-active: var(--theme-danger-active);
127
142
  $danger-invert: var(--theme-danger-invert);
@@ -136,7 +151,9 @@ $colors: (
136
151
  $primary-active,
137
152
  $primary-invert,
138
153
  $primary-box-shadow,
139
- $primary-background-glow-high-contrast
154
+ $primary-background-glow-high-contrast,
155
+ $primary-background-hover,
156
+ $primary-dark-hover
140
157
  ),
141
158
  'secondary': (
142
159
  $secondary,
@@ -146,7 +163,9 @@ $colors: (
146
163
  $secondary-active,
147
164
  $secondary-invert,
148
165
  $secondary-box-shadow,
149
- $secondary-background-glow-high-contrast
166
+ $secondary-background-glow-high-contrast,
167
+ $secondary-background-hover,
168
+ $secondary-dark-hover
150
169
  ),
151
170
  'tertiary': (
152
171
  $tertiary,
@@ -156,7 +175,9 @@ $colors: (
156
175
  $tertiary-active,
157
176
  $tertiary-invert,
158
177
  $tertiary-box-shadow,
159
- $tertiary-background-glow-high-contrast
178
+ $tertiary-background-glow-high-contrast,
179
+ $tertiary-background-hover,
180
+ $tertiary-dark-hover
160
181
  ),
161
182
  'success': (
162
183
  $success,
@@ -166,7 +187,9 @@ $colors: (
166
187
  $success-active,
167
188
  $success-invert,
168
189
  $success-box-shadow,
169
- $success-background-glow-high-contrast
190
+ $success-background-glow-high-contrast,
191
+ $success-background-hover,
192
+ $success-dark-hover
170
193
  ),
171
194
  'info': (
172
195
  $info,
@@ -176,7 +199,9 @@ $colors: (
176
199
  $info-active,
177
200
  $info-invert,
178
201
  $info-box-shadow,
179
- $info-background-glow-high-contrast
202
+ $info-background-glow-high-contrast,
203
+ $info-background-hover,
204
+ $info-dark-hover
180
205
  ),
181
206
  'warning': (
182
207
  $warning,
@@ -186,7 +211,9 @@ $colors: (
186
211
  $warning-active,
187
212
  $warning-invert,
188
213
  $warning-box-shadow,
189
- $warning-background-glow-high-contrast
214
+ $warning-background-glow-high-contrast,
215
+ $warning-background-hover,
216
+ $warning-dark-hover
190
217
  ),
191
218
  'danger': (
192
219
  $danger,
@@ -196,7 +223,9 @@ $colors: (
196
223
  $danger-active,
197
224
  $danger-invert,
198
225
  $danger-box-shadow,
199
- $danger-background-glow-high-contrast
226
+ $danger-background-glow-high-contrast,
227
+ $danger-background-hover,
228
+ $danger-dark-hover
200
229
  )
201
230
  ) !default;
202
231
 
@@ -212,6 +241,8 @@ $color-index-active: 5;
212
241
  $color-index-invert: 6;
213
242
  $color-index-box-shadow: 7;
214
243
  $color-index-background-glow-high-contrast: 8;
244
+ $color-index-background-hover: 9;
245
+ $color-index-dark-hover: 10;
215
246
 
216
247
  // example implementation of a color loop
217
248
 
package/src/tokens/palette.scss CHANGED
@@ -11,19 +11,49 @@ Notes:
11
11
 
12
12
  // Monochrome
13
13
 
14
- $palette-grey-10: #fafafa !default;
15
- $palette-grey-20: #f2f2f2 !default;
16
- $palette-grey-30: #e6e6e6 !default;
17
- $palette-grey-40: #d2d2d2 !default;
18
- $palette-grey-50: #bcbcbc !default;
19
- $palette-grey-60: #a2a2a2 !default;
20
- $palette-grey-70: #8e8e8e !default;
21
- $palette-grey-80: #757575 !default;
22
- $palette-grey-90: #505050 !default;
23
- $palette-grey-100: #404040 !default;
24
- $palette-grey-110: #2f2f2f !default;
25
- $palette-grey-120: #171717 !default;
26
- $palette-grey-130: #161616 !default;
14
+ $palette-grey-10-deprecated: #fafafa !default;
15
+ $palette-grey-20-deprecated: #f2f2f2 !default;
16
+ $palette-grey-30-deprecated: #e6e6e6 !default;
17
+ $palette-grey-40-deprecated: #d2d2d2 !default;
18
+ $palette-grey-50-deprecated: #bcbcbc !default;
19
+ $palette-grey-60-deprecated: #a2a2a2 !default;
20
+ $palette-grey-70-deprecated: #8e8e8e !default;
21
+ $palette-grey-80-deprecated: #757575 !default;
22
+ $palette-grey-90-deprecated: #505050 !default;
23
+ $palette-grey-100-deprecated: #404040 !default;
24
+ $palette-grey-110-deprecated: #2f2f2f !default;
25
+ $palette-grey-120-deprecated: #171717 !default;
26
+ $palette-grey-130-deprecated: #161616 !default;
27
+
28
+ $palette-grey-10: #f5f5f5 !default;
29
+ $palette-grey-20: #f0f0f0 !default;
30
+ $palette-grey-30: #ebebeb !default;
31
+ $palette-grey-40: #e6e6e6 !default;
32
+ $palette-grey-50: #e0e0e0 !default;
33
+ $palette-grey-60: #d6d6d6 !default;
34
+ $palette-grey-70: #d1d1d1 !default;
35
+ $palette-grey-80: #c7c7c7 !default;
36
+ $palette-grey-90: #bdbdbd !default;
37
+ $palette-grey-100: #b3b3b3 !default;
38
+ $palette-grey-110: #adadad !default;
39
+ $palette-grey-120: #999 !default;
40
+ $palette-grey-130: #757575 !default;
41
+ $palette-grey-140: #707070 !default;
42
+ $palette-grey-150: #6b6b6b !default;
43
+ $palette-grey-160: #666 !default;
44
+ $palette-grey-170: #616161 !default;
45
+ $palette-grey-180: #575757 !default;
46
+ $palette-grey-190: #525252 !default;
47
+ $palette-grey-200: #4d4d4d !default;
48
+ $palette-grey-210: #424242 !default;
49
+ $palette-grey-220: #3d3d3d !default;
50
+ $palette-grey-230: #383838 !default;
51
+ $palette-grey-240: #333 !default;
52
+ $palette-grey-250: #292929 !default;
53
+ $palette-grey-260: #242424 !default;
54
+ $palette-grey-270: #1a1a1a !default;
55
+ $palette-grey-280: #141414 !default;
56
+ $palette-grey-290: #0a0a0a !default;
27
57
 
28
58
  // Black
29
59
 
@@ -71,16 +101,37 @@ $palette-white-opacity-18: hsl(0deg 0% 100% / 18%) !default;
71
101
 
72
102
  // Blue
73
103
 
74
- $palette-blue-10: #d7eaf8 !default;
75
- $palette-blue-20: #9ccbee !default;
76
- $palette-blue-30: #75b6e7 !default;
77
- $palette-blue-40: #278cda !default;
78
- $palette-blue-50: #0078d4 !default;
79
- $palette-blue-60: #0065b3 !default;
80
- $palette-blue-70: #00579a !default;
81
- $palette-blue-80: #004173 !default;
82
- $palette-blue-90: #002b4d !default;
83
- $palette-blue-100: #000a13 !default;
104
+ $palette-blue-10-deprecated: #d7eaf8 !default;
105
+ $palette-blue-20-deprecated: #9ccbee !default;
106
+ $palette-blue-30-deprecated: #75b6e7 !default;
107
+ $palette-blue-40-deprecated: #278cda !default;
108
+ $palette-blue-50-deprecated: #0078d4 !default;
109
+ $palette-blue-60-deprecated: #0065b3 !default;
110
+ $palette-blue-70-deprecated: #00579a !default;
111
+ $palette-blue-80-deprecated: #004173 !default;
112
+ $palette-blue-90-deprecated: #002b4d !default;
113
+ $palette-blue-100-deprecated: #000a13 !default;
114
+
115
+ $palette-blue-10: #ebf3fc !default;
116
+ $palette-blue-20: #cfe4fa !default;
117
+ $palette-blue-30: #a9d3f2 !default;
118
+ $palette-blue-40: #b4d6fa !default;
119
+ $palette-blue-50: #9abfdc !default;
120
+ $palette-blue-60: #77b7f7 !default;
121
+ $palette-blue-70: #62abf5 !default;
122
+ $palette-blue-80: #479ef5 !default;
123
+ $palette-blue-90: #2886de !default;
124
+ $palette-blue-100: #0078d4 !default;
125
+ $palette-blue-110: #0f6cbd !default;
126
+ $palette-blue-120: #115ea3 !default;
127
+ $palette-blue-130: #0f548c !default;
128
+ $palette-blue-140: #004e8c !default;
129
+ $palette-blue-150: #0e4775 !default;
130
+ $palette-blue-160: #004377 !default;
131
+ $palette-blue-170: #0c3b5e !default;
132
+ $palette-blue-180: #0a2e4a !default;
133
+ $palette-blue-190: #002c4e !default;
134
+ $palette-blue-200: #082338 !default;
84
135
 
85
136
  $palette-blue-a: #9ccbee !default;
86
137
 
@@ -107,32 +158,61 @@ $palette-navy-opacity-70: hsl(262deg 46% 17% / 70%) !default;
107
158
 
108
159
  // Turqoise
109
160
 
110
- $palette-turqoise-10: #e9fbff !default;
111
- $palette-turqoise-20: #bdf5ff !default;
112
- $palette-turqoise-30: #7becff !default;
113
- $palette-turqoise-40: #50e6ff !default;
114
- $palette-turqoise-50: #41b9cf !default;
115
- $palette-turqoise-60: #328e9f !default;
116
- $palette-turqoise-70: #28727f !default;
117
- $palette-turqoise-80: #19474f !default;
118
- $palette-turqoise-90: #0f2a2f !default;
119
- $palette-turqoise-100: #050e0f !default;
161
+ $palette-turqoise-10-deprecated: #e9fbff !default;
162
+ $palette-turqoise-20-deprecated: #bdf5ff !default;
163
+ $palette-turqoise-30-deprecated: #7becff !default;
164
+ $palette-turqoise-40-deprecated: #50e6ff !default;
165
+ $palette-turqoise-50-deprecated: #41b9cf !default;
166
+ $palette-turqoise-60-deprecated: #328e9f !default;
167
+ $palette-turqoise-70-deprecated: #28727f !default;
168
+ $palette-turqoise-80-deprecated: #19474f !default;
169
+ $palette-turqoise-90-deprecated: #0f2a2f !default;
170
+ $palette-turqoise-100-deprecated: #050e0f !default;
120
171
 
121
- $palette-navy-opacity-30: hsl(189deg 52% 12% / 30%) !default;
122
- $palette-navy-opacity-70: hsl(189deg 52% 12% / 70%) !default;
172
+ $palette-turqoise-10: #1aebff !default;
173
+ $palette-turqoise-20: #00666d !default;
174
+
175
+ $palette-turqoise-opacity-30-deprecated: hsl(189deg 52% 12% / 30%) !default;
176
+ $palette-turqoise-opacity-70-deprecated: hsl(189deg 52% 12% / 70%) !default;
123
177
 
124
178
  // Green
125
179
 
126
- $palette-green-10: #dff6dd !default;
127
- $palette-green-20: #acd7aa !default;
128
- $palette-green-30: #7cbb7b !default;
129
- $palette-green-40: #489d48 !default;
130
- $palette-green-50: #2a8b2a !default;
131
- $palette-green-60: #107c10 !default;
132
- $palette-green-70: #0b6413 !default;
133
- $palette-green-80: #054b16 !default;
134
- $palette-green-90: #05350c !default;
135
- $palette-green-100: #061a00 !default;
180
+ $palette-green-10-deprecated: #dff6dd !default;
181
+ $palette-green-20-deprecated: #acd7aa !default;
182
+ $palette-green-30-deprecated: #7cbb7b !default;
183
+ $palette-green-40-deprecated: #489d48 !default;
184
+ $palette-green-50-deprecated: #2a8b2a !default;
185
+ $palette-green-60-deprecated: #107c10 !default;
186
+ $palette-green-70-deprecated: #0b6413 !default;
187
+ $palette-green-80-deprecated: #054b16 !default;
188
+ $palette-green-90-deprecated: #05350c !default;
189
+ $palette-green-100-deprecated: #061a00 !default;
190
+
191
+ $palette-green-10: #f1faf1 !default;
192
+ $palette-green-20: #bdd99b !default;
193
+ $palette-green-30: #a8f0cd !default;
194
+ $palette-green-40: #a7e3a5 !default;
195
+ $palette-green-50: #9fd89f !default;
196
+ $palette-green-60: #9ad29a !default;
197
+ $palette-green-70: #5ae0a0 !default;
198
+ $palette-green-80: #5ec75a !default;
199
+ $palette-green-90: #54b054 !default;
200
+ $palette-green-100: #3db838 !default;
201
+ $palette-green-110: #00cc6a !default;
202
+ $palette-green-120: #4da64d !default;
203
+ $palette-green-130: #13a10e !default;
204
+ $palette-green-140: #359b35 !default;
205
+ $palette-green-150: #498205 !default;
206
+ $palette-green-160: #11910d !default;
207
+ $palette-green-170: #2a8b2a !default;
208
+ $palette-green-180: #107c10 !default;
209
+ $palette-green-190: #00723b !default;
210
+ $palette-green-200: #0e700e !default;
211
+ $palette-green-210: #0b5a08 !default;
212
+ $palette-green-220: #294903 !default;
213
+ $palette-green-230: #094509 !default;
214
+ $palette-green-240: #063b06 !default;
215
+ $palette-green-250: #052505 !default;
136
216
 
137
217
  $palette-green-opacity-30: hsl(120deg 37% 45% / 30%) !default;
138
218
  $palette-green-opacity-70: hsl(120deg 37% 45% / 70%) !default;
@@ -159,34 +239,105 @@ $palette-purple-opacity-70: hsl(251deg 47% 18% / 70%) !default;
159
239
 
160
240
  // Yellow
161
241
 
162
- $palette-yellow-10: #fff4ce !default;
163
- $palette-yellow-20: #ffe79f !default;
164
- $palette-yellow-30: #ffdf84 !default;
165
- $palette-yellow-40: #ffcb3f !default;
166
- $palette-yellow-50: #ffb900 !default;
167
- $palette-yellow-60: #d19501 !default;
168
- $palette-yellow-70: #966802 !default;
169
- $palette-yellow-80: #6a4b16 !default;
170
- $palette-yellow-90: #4f340e !default;
171
- $palette-yellow-100: #2d1703 !default;
242
+ $palette-yellow-10-deprecated: #fff4ce !default;
243
+ $palette-yellow-20-deprecated: #ffe79f !default;
244
+ $palette-yellow-30-deprecated: #ffdf84 !default;
245
+ $palette-yellow-40-deprecated: #ffcb3f !default;
246
+ $palette-yellow-50-deprecated: #ffb900 !default;
247
+ $palette-yellow-60-deprecated: #d19501 !default;
248
+ $palette-yellow-70-deprecated: #966802 !default;
249
+ $palette-yellow-80-deprecated: #6a4b16 !default;
250
+ $palette-yellow-90-deprecated: #4f340e !default;
251
+ $palette-yellow-100-deprecated: #2d1703 !default;
252
+
253
+ $palette-yellow-10: #fffef5 !default;
254
+ $palette-yellow-20: #ecdfa5 !default;
255
+ $palette-yellow-30: #e0cea2 !default;
256
+ $palette-yellow-40: #ddc3b0 !default;
257
+ $palette-yellow-50: #fef7b2 !default;
258
+ $palette-yellow-60: #ffe79f !default;
259
+ $palette-yellow-70: #feee66 !default;
260
+ $palette-yellow-80: #fdea3d !default;
261
+ $palette-yellow-90: #dac157 !default;
262
+ $palette-yellow-100: #fde300 !default;
263
+ $palette-yellow-110: #ffcb3f !default;
264
+ $palette-yellow-120: #c1a256 !default;
265
+ $palette-yellow-130: #c19c00 !default;
266
+ $palette-yellow-140: #bb8f6f !default;
267
+ $palette-yellow-150: #986f0b !default;
268
+ $palette-yellow-160: #817400 !default;
269
+ $palette-yellow-170: #6c5700 !default;
270
+ $palette-yellow-180: #4c4400 !default;
271
+ $palette-yellow-190: #553e06 !default;
272
+ $palette-yellow-200: #50301a !default;
172
273
 
173
274
  $palette-yellow-opacity-30: hsl(44deg 100% 50% / 30%) !default;
174
275
  $palette-yellow-opacity-70: hsl(44deg 100% 50% / 70%) !default;
175
276
 
176
277
  $palette-yellow-sand: #e8e6df !default;
177
278
 
279
+ // Orange
280
+
281
+ $palette-orange-10: #fff9f5 !default;
282
+ $palette-orange-20: #fdf6f3 !default;
283
+ $palette-orange-30: #ffddb3 !default;
284
+ $palette-orange-40: #fdcfb4 !default;
285
+ $palette-orange-50: #efc4ad !default;
286
+ $palette-orange-60: #f4bfab !default;
287
+ $palette-orange-70: #faa06b !default;
288
+ $palette-orange-80: #df8e64 !default;
289
+ $palette-orange-90: #ff8c00 !default;
290
+ $palette-orange-100: #f98845 !default;
291
+ $palette-orange-110: #e9835e !default;
292
+ $palette-orange-120: #f7630c !default;
293
+ $palette-orange-130: #ca5010 !default;
294
+ $palette-orange-140: #bc4b09 !default;
295
+ $palette-orange-150: #da3b01 !default;
296
+ $palette-orange-160: #c43501 !default;
297
+ $palette-orange-170: #8f4e00 !default;
298
+ $palette-orange-180: #8a3707 !default;
299
+ $palette-orange-190: #712d09 !default;
300
+ $palette-orange-200: #7a2101 !default;
301
+ $palette-orange-210: #4a1e04 !default;
302
+ $palette-orange-220: #411200 !default;
303
+
304
+ $palette-orange-opacity-30: hsla(24deg 100% 50% / 30%) !default;
305
+ $palette-orange-opacity-70: hsla(24deg 100% 50% / 70%) !default;
306
+
178
307
  // Red
179
308
 
180
- $palette-red-10: #fde7e9 !default;
181
- $palette-red-20: #e5a7a8 !default;
182
- $palette-red-30: #d4797a !default;
183
- $palette-red-40: #c54f4f !default;
184
- $palette-red-50: #b62626 !default;
185
- $palette-red-60: #a80000 !default;
186
- $palette-red-70: #870000 !default;
187
- $palette-red-80: #630001 !default;
188
- $palette-red-90: #470001 !default;
189
- $palette-red-100: #290001 !default;
309
+ $palette-red-10-deprecated: #fde7e9 !default;
310
+ $palette-red-20-deprecated: #e5a7a8 !default;
311
+ $palette-red-30-deprecated: #d4797a !default;
312
+ $palette-red-40-deprecated: #c54f4f !default;
313
+ $palette-red-50-deprecated: #b62626 !default;
314
+ $palette-red-60-deprecated: #a80000 !default;
315
+ $palette-red-70-deprecated: #870000 !default;
316
+ $palette-red-80-deprecated: #630001 !default;
317
+ $palette-red-90-deprecated: #470001 !default;
318
+ $palette-red-100-deprecated: #290001 !default;
319
+
320
+ $palette-red-10: #fdf3f4 !default;
321
+ $palette-red-20: #fdf6f6 !default;
322
+ $palette-red-30: #f1bbbc !default;
323
+ $palette-red-40: #eeacb2 !default;
324
+ $palette-red-50: #d69ca5 !default;
325
+ $palette-red-60: #e37d80 !default;
326
+ $palette-red-70: #dc626d !default;
327
+ $palette-red-80: #dc5e62 !default;
328
+ $palette-red-90: #ac4f5e !default;
329
+ $palette-red-100: #d13438 !default;
330
+ $palette-red-110: #bc2f32 !default;
331
+ $palette-red-120: #b62626 !default;
332
+ $palette-red-130: #c50f1f !default;
333
+ $palette-red-140: #b10e1c !default;
334
+ $palette-red-150: #751d1f !default;
335
+ $palette-red-160: #750b1c !default;
336
+ $palette-red-170: #6e0811 !default;
337
+ $palette-red-180: #590815 !default;
338
+ $palette-red-190: #420610 !default;
339
+ $palette-red-200: #3b0509 !default;
340
+ $palette-red-210: #3f1011 !default;
190
341
 
191
342
  $palette-red-opacity-30: hsl(0deg 100% 33% / 30%) !default;
192
343
  $palette-red-opacity-70: hsl(0deg 100% 33% / 70%) !default;