@microsoft/atlas-css 3.64.0 → 3.66.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 (11) 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 +88 -0
  6. package/package.json +1 -1
  7. package/src/components/button.scss +60 -0
  8. package/src/components/tag.scss +12 -0
  9. package/src/tokens/colors.scss +87 -7
  10. package/src/tokens/palette.scss +4 -2
  11. package/src/tokens/themes.scss +117 -0
package/src/components/button.scss CHANGED
@@ -23,6 +23,10 @@ $button-disabled-background-color: $body-background-medium !default;
23
23
  $button-disabled-shadow: none !default;
24
24
  $button-disabled-opacity: 0.5 !default;
25
25
 
26
+ $button-selected-background-color: $selected-background !default;
27
+ $button-selected-border-color: $selected-stroke !default;
28
+ $button-selected-color: $selected-foreground !default;
29
+
26
30
  $button-icon-spacing: 0.375em !default;
27
31
  $button-font-weight: $weight-semibold !default;
28
32
 
@@ -86,6 +90,12 @@ $button-font-weight: $weight-semibold !default;
86
90
 
87
91
  // Modifiers
88
92
 
93
+ &.is-selected:not(:hover, .is-hovered) {
94
+ border-color: $button-selected-border-color;
95
+ background-color: $button-selected-background-color;
96
+ color: $button-selected-color;
97
+ }
98
+
89
99
  &.is-disabled,
90
100
  &[disabled] {
91
101
  border-color: currentColor;
@@ -117,6 +127,10 @@ $button-font-weight: $weight-semibold !default;
117
127
  $base: nth($color-set, $color-index-base);
118
128
  $dark: nth($color-set, $color-index-dark);
119
129
  $background: nth($color-set, $color-index-background);
130
+ $background-selected: nth($color-set, $color-index-background-selected);
131
+ $selected: nth($color-set, $color-index-selected);
132
+ $foreground-selected: nth($color-set, $color-index-foreground-selected);
133
+ $border-selected: nth($color-set, $color-index-stroke-selected);
120
134
 
121
135
  &.button-#{$name} {
122
136
  @if $name == 'warning' {
@@ -133,6 +147,16 @@ $button-font-weight: $weight-semibold !default;
133
147
  color: $dark;
134
148
  }
135
149
 
150
+ &.is-selected:not(:hover, .is-hovered) {
151
+ border-color: $border-selected;
152
+ background-color: $background-selected;
153
+ color: $foreground-selected;
154
+ }
155
+
156
+ &.is-selected.is-loading::after {
157
+ border-color: transparent transparent $foreground-selected $foreground-selected !important;
158
+ }
159
+
136
160
  &.is-loading::after {
137
161
  border-color: transparent transparent $base $base !important;
138
162
  }
@@ -141,6 +165,7 @@ $button-font-weight: $weight-semibold !default;
141
165
  }
142
166
 
143
167
  $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
168
+ $button-clear-selected-background-color: $selected-background-subtle !default;
144
169
 
145
170
  .button.button-clear {
146
171
  border-color: transparent;
@@ -163,10 +188,19 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
163
188
  background-color: $button-clear-hover-background-color;
164
189
  }
165
190
 
191
+ &.is-selected:not(:hover, .is-hovered) {
192
+ border-color: transparent;
193
+ background-color: $button-clear-selected-background-color;
194
+ color: $button-selected-color;
195
+ }
196
+
166
197
  @each $name, $color-set in $colors {
167
198
  $base: nth($color-set, $color-index-base);
168
199
  $dark: nth($color-set, $color-index-dark);
169
200
  $background: nth($color-set, $color-index-background);
201
+ $background-selected: nth($color-set, $color-index-background-selected);
202
+ $selected: nth($color-set, $color-index-selected);
203
+ $foreground-selected: nth($color-set, $color-index-foreground-selected);
170
204
 
171
205
  &.button-#{$name} {
172
206
  color: $base;
@@ -181,6 +215,11 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
181
215
  color: $dark;
182
216
  }
183
217
 
218
+ &.is-selected:not(:hover, .is-hovered) {
219
+ background-color: $background-selected;
220
+ color: $foreground-selected;
221
+ }
222
+
184
223
  &.is-disabled,
185
224
  &[disabled] {
186
225
  background-color: transparent;
@@ -194,6 +233,7 @@ $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
194
233
  $button-filled-background-color: $alternate-background-medium !default;
195
234
  $button-filled-background-color-hover: $alternate-background !default;
196
235
  $button-filled-text-color: $text-invert !default;
236
+ $button-filled-background-color-selected: $secondary-selected !default;
197
237
 
198
238
  .button.button-filled {
199
239
  border-color: $button-filled-background-color;
@@ -205,6 +245,12 @@ $button-filled-text-color: $text-invert !default;
205
245
  background-color: $button-filled-background-color-hover;
206
246
  }
207
247
 
248
+ &.is-selected:not(:hover, .is-hovered) {
249
+ border-color: $button-filled-background-color-selected;
250
+ background-color: $button-filled-background-color-selected;
251
+ color: $button-filled-text-color;
252
+ }
253
+
208
254
  &.is-loading::after {
209
255
  @include loader;
210
256
 
@@ -217,6 +263,8 @@ $button-filled-text-color: $text-invert !default;
217
263
  $active: nth($color-set, $color-index-active);
218
264
  $invert: nth($color-set, $color-index-invert);
219
265
  $background: nth($color-set, $color-index-background);
266
+ $selected: nth($color-set, $color-index-selected);
267
+ $selected-invert: nth($color-set, $color-index-foreground-selected-invert);
220
268
 
221
269
  &.button-#{$name} {
222
270
  border-color: $base;
@@ -230,6 +278,18 @@ $button-filled-text-color: $text-invert !default;
230
278
  color: $invert;
231
279
  }
232
280
 
281
+ &.is-selected:not(:hover, .is-hovered) {
282
+ border-color: $selected;
283
+ background-color: $selected;
284
+ color: $selected-invert;
285
+ }
286
+
287
+ &.is-selected.is-loading::after {
288
+ @include loader;
289
+
290
+ border-color: transparent transparent $selected-invert $selected-invert !important;
291
+ }
292
+
233
293
  &.is-loading::after {
234
294
  @include loader;
235
295
 
package/src/components/tag.scss CHANGED
@@ -38,6 +38,8 @@ $tag-border-color-primary: $primary-background-glow-high-contrast !default;
38
38
  $tag-interactive-divider-color-primary: $primary-box-shadow !default;
39
39
  $tag-interactive-color-primary-hover: $primary-dark-hover !default;
40
40
 
41
+ $tag-suggestion-radius: 8px !default;
42
+
41
43
  .tag {
42
44
  display: inline-flex;
43
45
  align-items: center;
@@ -210,3 +212,13 @@ $tag-interactive-color-primary-hover: $primary-dark-hover !default;
210
212
  }
211
213
  }
212
214
  }
215
+
216
+ .tag.tag-suggestion {
217
+ border-radius: $tag-suggestion-radius;
218
+
219
+ &:hover,
220
+ &.is-hovered {
221
+ background-color: $primary-background;
222
+ color: $primary-dark;
223
+ }
224
+ }
package/src/tokens/colors.scss CHANGED
@@ -58,6 +58,11 @@ $border-yellow-high-contrast: var(--theme-border-yellow-high-contrast);
58
58
  $code-highlight-background: var(--theme-code-highlight-background);
59
59
  $visited: var(--theme-visited);
60
60
 
61
+ $selected-background: var(--theme-background-selected);
62
+ $selected-background-subtle: var(--theme-background-subtle-selected);
63
+ $selected-stroke: var(--theme-stroke-selected);
64
+ $selected-foreground: var(--theme-foreground-selected);
65
+
61
66
  $score-low-off: var(--theme-score-low-off);
62
67
  $score-low: var(--theme-score-low);
63
68
  $score-medium-off: var(--theme-score-medium-off);
@@ -75,6 +80,11 @@ $primary-hover: var(--theme-primary-hover);
75
80
  $primary-active: var(--theme-primary-active);
76
81
  $primary-invert: var(--theme-primary-invert);
77
82
  $primary-box-shadow: var(--theme-primary-box-shadow);
83
+ $primary-selected: var(--theme-primary-selected);
84
+ $primary-background-selected: var(--theme-primary-background-selected);
85
+ $primary-foreground-selected: var(--theme-primary-foreground-selected);
86
+ $primary-foreground-selected-invert: var(--theme-primary-foreground-selected-invert);
87
+ $primary-stroke-selected: var(--theme-primary-stroke-selected);
78
88
 
79
89
  $secondary: var(--theme-secondary-base);
80
90
  $secondary-background: var(--theme-secondary-background);
@@ -86,6 +96,11 @@ $secondary-hover: var(--theme-secondary-hover);
86
96
  $secondary-active: var(--theme-secondary-active);
87
97
  $secondary-invert: var(--theme-secondary-invert);
88
98
  $secondary-box-shadow: var(--theme-secondary-box-shadow);
99
+ $secondary-background-selected: var(--theme-secondary-background-selected);
100
+ $secondary-selected: var(--theme-secondary-selected);
101
+ $secondary-foreground-selected: var(--theme-secondary-foreground-selected);
102
+ $secondary-foreground-selected-invert: var(--theme-secondary-foreground-selected-invert);
103
+ $secondary-stroke-selected: var(--theme-secondary-stroke-selected);
89
104
 
90
105
  $tertiary: var(--theme-tertiary-base);
91
106
  $tertiary-background: var(--theme-tertiary-background);
@@ -97,6 +112,11 @@ $tertiary-hover: var(--theme-tertiary-hover);
97
112
  $tertiary-active: var(--theme-tertiary-active);
98
113
  $tertiary-invert: var(--theme-tertiary-invert);
99
114
  $tertiary-box-shadow: var(--theme-tertiary-box-shadow);
115
+ $tertiary-background-selected: var(--theme-tertiary-background-selected);
116
+ $tertiary-selected: var(--theme-tertiary-selected);
117
+ $tertiary-foreground-selected: var(--theme-tertiary-foreground-selected);
118
+ $tertiary-foreground-selected-invert: var(--theme-tertiary-foreground-selected-invert);
119
+ $tertiary-stroke-selected: var(--theme-tertiary-stroke-selected);
100
120
 
101
121
  $success: var(--theme-success-base);
102
122
  $success-background: var(--theme-success-background);
@@ -108,6 +128,11 @@ $success-hover: var(--theme-success-hover);
108
128
  $success-active: var(--theme-success-active);
109
129
  $success-invert: var(--theme-success-invert);
110
130
  $success-box-shadow: var(--theme-success-box-shadow);
131
+ $success-background-selected: var(--theme-success-background-selected);
132
+ $success-selected: var(--theme-success-selected);
133
+ $success-foreground-selected: var(--theme-success-foreground-selected);
134
+ $success-foreground-selected-invert: var(--theme-success-foreground-selected-invert);
135
+ $success-stroke-selected: var(--theme-success-stroke-selected);
111
136
 
112
137
  $info: var(--theme-info-base);
113
138
  $info-background: var(--theme-info-background);
@@ -119,6 +144,11 @@ $info-hover: var(--theme-info-hover);
119
144
  $info-active: var(--theme-info-active);
120
145
  $info-invert: var(--theme-info-invert);
121
146
  $info-box-shadow: var(--theme-info-box-shadow);
147
+ $info-background-selected: var(--theme-info-background-selected);
148
+ $info-selected: var(--theme-info-selected);
149
+ $info-foreground-selected: var(--theme-info-foreground-selected);
150
+ $info-foreground-selected-invert: var(--theme-info-foreground-selected-invert);
151
+ $info-stroke-selected: var(--theme-info-stroke-selected);
122
152
 
123
153
  $warning: var(--theme-warning-base);
124
154
  $warning-background: var(--theme-warning-background);
@@ -130,6 +160,11 @@ $warning-hover: var(--theme-warning-hover);
130
160
  $warning-active: var(--theme-warning-active);
131
161
  $warning-invert: var(--theme-warning-invert);
132
162
  $warning-box-shadow: var(--theme-warning-box-shadow);
163
+ $warning-background-selected: var(--theme-warning-background-selected);
164
+ $warning-selected: var(--theme-warning-selected);
165
+ $warning-foreground-selected: var(--theme-warning-foreground-selected);
166
+ $warning-foreground-selected-invert: var(--theme-warning-foreground-selected-invert);
167
+ $warning-stroke-selected: var(--theme-warning-stroke-selected);
133
168
 
134
169
  $danger: var(--theme-danger-base);
135
170
  $danger-background: var(--theme-danger-background);
@@ -141,6 +176,11 @@ $danger-hover: var(--theme-danger-hover);
141
176
  $danger-active: var(--theme-danger-active);
142
177
  $danger-invert: var(--theme-danger-invert);
143
178
  $danger-box-shadow: var(--theme-danger-box-shadow);
179
+ $danger-background-selected: var(--theme-danger-background-selected);
180
+ $danger-selected: var(--theme-danger-selected);
181
+ $danger-foreground-selected: var(--theme-danger-foreground-selected);
182
+ $danger-foreground-selected-invert: var(--theme-danger-foreground-selected-invert);
183
+ $danger-stroke-selected: var(--theme-danger-stroke-selected);
144
184
 
145
185
  $colors: (
146
186
  'primary': (
@@ -153,7 +193,12 @@ $colors: (
153
193
  $primary-box-shadow,
154
194
  $primary-background-glow-high-contrast,
155
195
  $primary-background-hover,
156
- $primary-dark-hover
196
+ $primary-dark-hover,
197
+ $primary-selected,
198
+ $primary-background-selected,
199
+ $primary-stroke-selected,
200
+ $primary-foreground-selected,
201
+ $primary-foreground-selected-invert
157
202
  ),
158
203
  'secondary': (
159
204
  $secondary,
@@ -165,7 +210,12 @@ $colors: (
165
210
  $secondary-box-shadow,
166
211
  $secondary-background-glow-high-contrast,
167
212
  $secondary-background-hover,
168
- $secondary-dark-hover
213
+ $secondary-dark-hover,
214
+ $secondary-selected,
215
+ $secondary-background-selected,
216
+ $secondary-stroke-selected,
217
+ $secondary-foreground-selected,
218
+ $secondary-foreground-selected-invert
169
219
  ),
170
220
  'tertiary': (
171
221
  $tertiary,
@@ -177,7 +227,12 @@ $colors: (
177
227
  $tertiary-box-shadow,
178
228
  $tertiary-background-glow-high-contrast,
179
229
  $tertiary-background-hover,
180
- $tertiary-dark-hover
230
+ $tertiary-dark-hover,
231
+ $tertiary-selected,
232
+ $tertiary-background-selected,
233
+ $tertiary-stroke-selected,
234
+ $tertiary-foreground-selected,
235
+ $tertiary-foreground-selected-invert
181
236
  ),
182
237
  'success': (
183
238
  $success,
@@ -189,7 +244,12 @@ $colors: (
189
244
  $success-box-shadow,
190
245
  $success-background-glow-high-contrast,
191
246
  $success-background-hover,
192
- $success-dark-hover
247
+ $success-dark-hover,
248
+ $success-selected,
249
+ $success-background-selected,
250
+ $success-stroke-selected,
251
+ $success-foreground-selected,
252
+ $success-foreground-selected-invert
193
253
  ),
194
254
  'info': (
195
255
  $info,
@@ -201,7 +261,12 @@ $colors: (
201
261
  $info-box-shadow,
202
262
  $info-background-glow-high-contrast,
203
263
  $info-background-hover,
204
- $info-dark-hover
264
+ $info-dark-hover,
265
+ $info-selected,
266
+ $info-background-selected,
267
+ $info-stroke-selected,
268
+ $info-foreground-selected,
269
+ $info-foreground-selected-invert
205
270
  ),
206
271
  'warning': (
207
272
  $warning,
@@ -213,7 +278,12 @@ $colors: (
213
278
  $warning-box-shadow,
214
279
  $warning-background-glow-high-contrast,
215
280
  $warning-background-hover,
216
- $warning-dark-hover
281
+ $warning-dark-hover,
282
+ $warning-selected,
283
+ $warning-background-selected,
284
+ $warning-stroke-selected,
285
+ $warning-foreground-selected,
286
+ $warning-foreground-selected-invert
217
287
  ),
218
288
  'danger': (
219
289
  $danger,
@@ -225,7 +295,12 @@ $colors: (
225
295
  $danger-box-shadow,
226
296
  $danger-background-glow-high-contrast,
227
297
  $danger-background-hover,
228
- $danger-dark-hover
298
+ $danger-dark-hover,
299
+ $danger-selected,
300
+ $danger-background-selected,
301
+ $danger-stroke-selected,
302
+ $danger-foreground-selected,
303
+ $danger-foreground-selected-invert
229
304
  )
230
305
  ) !default;
231
306
 
@@ -243,6 +318,11 @@ $color-index-box-shadow: 7;
243
318
  $color-index-background-glow-high-contrast: 8;
244
319
  $color-index-background-hover: 9;
245
320
  $color-index-dark-hover: 10;
321
+ $color-index-selected: 11;
322
+ $color-index-background-selected: 12;
323
+ $color-index-stroke-selected: 13;
324
+ $color-index-foreground-selected: 14;
325
+ $color-index-foreground-selected-invert: 15;
246
326
 
247
327
  // example implementation of a color loop
248
328
 
package/src/tokens/palette.scss CHANGED
@@ -52,8 +52,9 @@ $palette-grey-240: #333 !default;
52
52
  $palette-grey-250: #292929 !default;
53
53
  $palette-grey-260: #242424 !default;
54
54
  $palette-grey-270: #1a1a1a !default;
55
- $palette-grey-280: #141414 !default;
56
- $palette-grey-290: #0a0a0a !default;
55
+ $palette-grey-280: #1f1f1f !default;
56
+ $palette-grey-290: #141414 !default;
57
+ $palette-grey-300: #0a0a0a !default;
57
58
 
58
59
  // Black
59
60
 
@@ -346,6 +347,7 @@ $palette-red-opacity-70: hsl(0deg 100% 33% / 70%) !default;
346
347
 
347
348
  $palette-yellow-high-contrast: #ff0 !default;
348
349
  $palette-yellow-high-contrast-hover: #ff3 !default;
350
+ $palette-yellow-high-contrast-selected: #fd0 !default;
349
351
  $palette-visited-high-contrast: #3cff00 !default;
350
352
 
351
353
  //@end-sass-export-section
package/src/tokens/themes.scss CHANGED
@@ -29,6 +29,10 @@ $themes: (
29
29
  'table-border-dark': $palette-grey-70,
30
30
  'hover-base': $palette-grey-80,
31
31
  'hover-invert': $palette-grey-10,
32
+ 'background-selected': $palette-grey-30,
33
+ 'background-subtle-selected': $palette-grey-30,
34
+ 'foreground-selected': $palette-grey-260,
35
+ 'stroke-selected': $palette-grey-90,
32
36
  'code-header': $palette-grey-40,
33
37
  'code-block': $palette-grey-20,
34
38
  'control-border': $palette-grey-70,
@@ -47,6 +51,11 @@ $themes: (
47
51
  'primary-background': $palette-blue-10,
48
52
  'primary-background-hover': $palette-blue-20,
49
53
  'primary-background-glow-high-contrast': $palette-blue-10,
54
+ 'primary-background-selected': $palette-blue-20,
55
+ 'primary-foreground-selected': $palette-blue-130,
56
+ 'primary-foreground-selected-invert': $palette-white,
57
+ 'primary-selected': $palette-blue-130,
58
+ 'primary-stroke-selected': $palette-blue-130,
50
59
  'primary-dark': $palette-blue-120,
51
60
  'primary-dark-hover': $palette-blue-120,
52
61
  'primary-hover': $palette-blue-120,
@@ -57,6 +66,11 @@ $themes: (
57
66
  'secondary-background': $palette-grey-10,
58
67
  'secondary-background-hover': $palette-grey-30,
59
68
  'secondary-background-glow-high-contrast': $palette-grey-20,
69
+ 'secondary-background-selected': $palette-grey-30,
70
+ 'secondary-foreground-selected': $palette-grey-260,
71
+ 'secondary-foreground-selected-invert': $palette-grey-30,
72
+ 'secondary-selected': $palette-grey-260,
73
+ 'secondary-stroke-selected': $palette-grey-90,
60
74
  'secondary-dark': $palette-grey-210,
61
75
  'secondary-dark-hover': $palette-grey-60,
62
76
  'secondary-hover': $palette-grey-80,
@@ -66,6 +80,11 @@ $themes: (
66
80
  'tertiary-base': $palette-navy-70,
67
81
  'tertiary-background': $palette-navy-90,
68
82
  'tertiary-background-hover': $palette-navy-60,
83
+ 'tertiary-background-selected': $palette-navy-50,
84
+ 'tertiary-foreground-selected': $palette-navy-90,
85
+ 'tertiary-foreground-selected-invert': $palette-white,
86
+ 'tertiary-selected': $palette-navy-90,
87
+ 'tertiary-stroke-selected': $palette-navy-90,
69
88
  'tertiary-background-glow-high-contrast': $palette-navy-90,
70
89
  'tertiary-dark': $palette-navy-30,
71
90
  'tertiary-dark-hover': $palette-navy-50,
@@ -76,6 +95,11 @@ $themes: (
76
95
  'success-base': $palette-green-180,
77
96
  'success-background': $palette-green-10,
78
97
  'success-background-hover': $palette-green-50,
98
+ 'success-background-selected': $palette-green-40,
99
+ 'success-foreground-selected': $palette-green-230,
100
+ 'success-foreground-selected-invert': $palette-white,
101
+ 'success-selected': $palette-green-230,
102
+ 'success-stroke-selected': $palette-green-230,
79
103
  'success-background-glow-high-contrast': $palette-green-10,
80
104
  'success-dark': $palette-green-200,
81
105
  'success-dark-hover': $palette-green-130,
@@ -86,6 +110,11 @@ $themes: (
86
110
  'info-base': $palette-purple-60,
87
111
  'info-background': $palette-purple-10,
88
112
  'info-background-hover': $palette-purple-30,
113
+ 'info-background-selected': $palette-purple-20,
114
+ 'info-foreground-selected': $palette-purple-80,
115
+ 'info-foreground-selected-invert': $palette-white,
116
+ 'info-selected': $palette-purple-70,
117
+ 'info-stroke-selected': $palette-purple-80,
89
118
  'info-background-glow-high-contrast': $palette-purple-10,
90
119
  'info-dark': $palette-purple-80,
91
120
  'info-dark-hover': $palette-purple-60,
@@ -96,6 +125,11 @@ $themes: (
96
125
  'warning-base': $palette-orange-120,
97
126
  'warning-background': $palette-orange-10,
98
127
  'warning-background-hover': $palette-orange-40,
128
+ 'warning-background-selected': $palette-orange-30,
129
+ 'warning-foreground-selected': $palette-orange-180,
130
+ 'warning-foreground-selected-invert': $palette-white,
131
+ 'warning-selected': $palette-orange-140,
132
+ 'warning-stroke-selected': $palette-orange-180,
99
133
  'warning-background-glow-high-contrast': $palette-orange-10,
100
134
  'warning-dark': $palette-orange-180,
101
135
  'warning-dark-hover': $palette-orange-150,
@@ -106,6 +140,11 @@ $themes: (
106
140
  'danger-base': $palette-red-110,
107
141
  'danger-background': $palette-red-10,
108
142
  'danger-background-hover': $palette-red-40,
143
+ 'danger-background-selected': $palette-red-30,
144
+ 'danger-foreground-selected': $palette-red-150,
145
+ 'danger-foreground-selected-invert': $palette-white,
146
+ 'danger-selected': $palette-red-150,
147
+ 'danger-stroke-selected': $palette-red-150,
109
148
  'danger-background-glow-high-contrast': $palette-red-10,
110
149
  'danger-dark': $palette-red-140,
111
150
  'danger-dark-hover': $palette-red-150,
@@ -148,6 +187,10 @@ $themes: (
148
187
  'table-border-dark': $palette-grey-90-deprecated,
149
188
  'hover-base': $palette-grey-40-deprecated,
150
189
  'hover-invert': $palette-grey-110-deprecated,
190
+ 'background-selected': $palette-grey-230,
191
+ 'background-subtle-selected': $palette-grey-240,
192
+ 'foreground-selected': $palette-grey-40,
193
+ 'stroke-selected': $palette-grey-40,
151
194
  'code-header': $palette-grey-100-deprecated,
152
195
  'code-block': $palette-grey-110-deprecated,
153
196
  'control-border': $palette-grey-40-deprecated,
@@ -165,6 +208,11 @@ $themes: (
165
208
  'primary-base': $palette-blue-30-deprecated,
166
209
  'primary-background': $palette-blue-80-deprecated,
167
210
  'primary-background-hover': $palette-blue-200,
211
+ 'primary-background-selected': $palette-blue-190,
212
+ 'primary-foreground-selected': $palette-blue-60,
213
+ 'primary-foreground-selected-invert': $palette-white,
214
+ 'primary-selected': $palette-blue-130,
215
+ 'primary-stroke-selected': $palette-blue-60,
168
216
  'primary-background-glow-high-contrast': $palette-blue-80-deprecated,
169
217
  'primary-dark': $palette-blue-20-deprecated,
170
218
  'primary-dark-hover': $palette-blue-20-deprecated,
@@ -175,6 +223,11 @@ $themes: (
175
223
  'secondary-base': $palette-grey-80-deprecated,
176
224
  'secondary-background': $palette-grey-100-deprecated,
177
225
  'secondary-background-hover': $palette-grey-250,
226
+ 'secondary-background-selected': $palette-grey-230,
227
+ 'secondary-foreground-selected': $palette-grey-40,
228
+ 'secondary-foreground-selected-invert': $palette-grey-40,
229
+ 'secondary-selected': $palette-grey-50,
230
+ 'secondary-stroke-selected': $palette-grey-40,
178
231
  'secondary-background-glow-high-contrast': $palette-grey-100-deprecated,
179
232
  'secondary-dark': $palette-grey-30-deprecated,
180
233
  'secondary-dark-hover': $palette-grey-70-deprecated,
@@ -185,6 +238,11 @@ $themes: (
185
238
  'tertiary-base': $palette-grey-100-deprecated,
186
239
  'tertiary-background': $palette-grey-120-deprecated,
187
240
  'tertiary-background-hover': $palette-grey-90-deprecated,
241
+ 'tertiary-background-selected': $palette-navy-50,
242
+ 'tertiary-foreground-selected': $palette-navy-90,
243
+ 'tertiary-foreground-selected-invert': $palette-white,
244
+ 'tertiary-selected': $palette-navy-50,
245
+ 'tertiary-stroke-selected': $palette-navy-90,
188
246
  'tertiary-background-glow-high-contrast': $palette-grey-120-deprecated,
189
247
  'tertiary-dark': $palette-grey-30-deprecated,
190
248
  'tertiary-dark-hover': $palette-grey-70-deprecated,
@@ -195,6 +253,11 @@ $themes: (
195
253
  'success-base': $palette-green-30-deprecated,
196
254
  'success-background': $palette-green-80-deprecated,
197
255
  'success-background-hover': $palette-green-60-deprecated,
256
+ 'success-background-selected': $palette-green-230,
257
+ 'success-foreground-selected': $palette-green-40,
258
+ 'success-foreground-selected-invert': $palette-white,
259
+ 'success-selected': $palette-green-190,
260
+ 'success-stroke-selected': $palette-green-40,
198
261
  'success-background-glow-high-contrast': $palette-green-80-deprecated,
199
262
  'success-dark': $palette-green-10-deprecated,
200
263
  'success-dark-hover': $palette-green-30-deprecated,
@@ -205,6 +268,11 @@ $themes: (
205
268
  'info-base': $palette-purple-50,
206
269
  'info-background': $palette-purple-80,
207
270
  'info-background-hover': $palette-purple-60,
271
+ 'info-background-selected': $palette-purple-90,
272
+ 'info-foreground-selected': $palette-purple-10,
273
+ 'info-foreground-selected-invert': $palette-purple-90,
274
+ 'info-selected': $palette-purple-30,
275
+ 'info-stroke-selected': $palette-purple-10,
208
276
  'info-background-glow-high-contrast': $palette-purple-80,
209
277
  'info-dark': $palette-purple-10,
210
278
  'info-dark-hover': $palette-purple-30,
@@ -215,6 +283,11 @@ $themes: (
215
283
  'warning-base': $palette-orange-120,
216
284
  'warning-background': $palette-orange-210,
217
285
  'warning-background-hover': $palette-orange-200,
286
+ 'warning-background-selected': $palette-orange-220,
287
+ 'warning-foreground-selected': $palette-orange-40,
288
+ 'warning-foreground-selected-invert': $palette-black,
289
+ 'warning-selected': $palette-orange-130,
290
+ 'warning-stroke-selected': $palette-orange-40,
218
291
  'warning-background-glow-high-contrast': $palette-orange-200,
219
292
  'warning-dark': $palette-orange-40,
220
293
  'warning-dark-hover': $palette-orange-110,
@@ -225,6 +298,11 @@ $themes: (
225
298
  'danger-base': $palette-red-20-deprecated,
226
299
  'danger-background': $palette-red-80-deprecated,
227
300
  'danger-background-hover': $palette-red-50-deprecated,
301
+ 'danger-background-selected': $palette-red-180,
302
+ 'danger-foreground-selected': $palette-red-40,
303
+ 'danger-foreground-selected-invert': $palette-white,
304
+ 'danger-selected': $palette-red-110,
305
+ 'danger-stroke-selected': $palette-red-40,
228
306
  'danger-background-glow-high-contrast': $palette-red-80-deprecated,
229
307
  'danger-dark': $palette-red-10-deprecated,
230
308
  'danger-dark-hover': $palette-red-30-deprecated,
@@ -267,6 +345,10 @@ $themes: (
267
345
  'table-border-dark': $palette-white,
268
346
  'hover-base': $palette-yellow-high-contrast,
269
347
  'hover-invert': $palette-black,
348
+ 'background-selected': $palette-black,
349
+ 'background-subtle-selected': $palette-black,
350
+ 'foreground-selected': $palette-grey-80,
351
+ 'stroke-selected': $palette-yellow-high-contrast-selected,
270
352
  'code-header': $palette-black,
271
353
  'code-block': $palette-black,
272
354
  'control-border': $palette-white,
@@ -285,6 +367,11 @@ $themes: (
285
367
  'primary-background': $palette-black,
286
368
  'primary-background-hover': $palette-yellow-high-contrast-hover,
287
369
  'primary-background-glow-high-contrast': $palette-yellow-high-contrast,
370
+ 'primary-background-selected': $palette-black,
371
+ 'primary-foreground-selected': $palette-yellow-high-contrast-selected,
372
+ 'primary-foreground-selected-invert': $palette-black,
373
+ 'primary-selected': $palette-yellow-high-contrast-selected,
374
+ 'primary-stroke-selected': $palette-yellow-high-contrast-selected,
288
375
  'primary-dark': $palette-yellow-high-contrast,
289
376
  'primary-dark-hover': $palette-black,
290
377
  'primary-hover': $palette-yellow-high-contrast-hover,
@@ -295,6 +382,11 @@ $themes: (
295
382
  'secondary-background': $palette-black,
296
383
  'secondary-background-hover': $palette-yellow-high-contrast-hover,
297
384
  'secondary-background-glow-high-contrast': $palette-grey-90-deprecated,
385
+ 'secondary-background-selected': $palette-black,
386
+ 'secondary-foreground-selected': $palette-grey-80,
387
+ 'secondary-foreground-selected-invert': $palette-grey-80,
388
+ 'secondary-selected': $palette-grey-80,
389
+ 'secondary-stroke-selected': $palette-yellow-high-contrast-selected,
298
390
  'secondary-dark': $palette-grey-30-deprecated,
299
391
  'secondary-dark-hover': $palette-black,
300
392
  'secondary-hover': $palette-grey-40-deprecated,
@@ -304,6 +396,11 @@ $themes: (
304
396
  'tertiary-base': $palette-white,
305
397
  'tertiary-background': $palette-black,
306
398
  'tertiary-background-hover': $palette-grey-90,
399
+ 'tertiary-background-selected': $palette-navy-50,
400
+ 'tertiary-foreground-selected': $palette-navy-90,
401
+ 'tertiary-foreground-selected-invert': $palette-white,
402
+ 'tertiary-selected': $palette-navy-50,
403
+ 'tertiary-stroke-selected': $palette-navy-90,
307
404
  'tertiary-background-glow-high-contrast': $palette-white,
308
405
  'tertiary-dark': $palette-white,
309
406
  'tertiary-dark-hover': $palette-grey-30-deprecated,
@@ -314,6 +411,11 @@ $themes: (
314
411
  'success-base': $palette-green-30-deprecated,
315
412
  'success-background': $palette-black,
316
413
  'success-background-hover': $palette-green-20-deprecated,
414
+ 'success-background-selected': $palette-black,
415
+ 'success-foreground-selected': $palette-green-120,
416
+ 'success-foreground-selected-invert': $palette-black,
417
+ 'success-selected': $palette-green-120,
418
+ 'success-stroke-selected': $palette-green-120,
317
419
  'success-background-glow-high-contrast': $palette-green-30-deprecated,
318
420
  'success-dark': $palette-green-20-deprecated,
319
421
  'success-dark-hover': $palette-green-30-deprecated,
@@ -324,6 +426,11 @@ $themes: (
324
426
  'info-base': $palette-purple-20,
325
427
  'info-background': $palette-black,
326
428
  'info-background-hover': $palette-purple-20,
429
+ 'info-background-selected': $palette-black,
430
+ 'info-foreground-selected': $palette-purple-10,
431
+ 'info-foreground-selected-invert': $palette-black,
432
+ 'info-selected': $palette-purple-30,
433
+ 'info-stroke-selected': $palette-purple-10,
327
434
  'info-background-glow-high-contrast': $palette-purple-20,
328
435
  'info-dark': $palette-purple-10,
329
436
  'info-dark-hover': $palette-purple-30,
@@ -334,6 +441,11 @@ $themes: (
334
441
  'warning-base': $palette-orange-70,
335
442
  'warning-background': $palette-black,
336
443
  'warning-background-hover': $palette-orange-20,
444
+ 'warning-background-selected': $palette-black,
445
+ 'warning-foreground-selected': $palette-orange-60,
446
+ 'warning-foreground-selected-invert': $palette-black,
447
+ 'warning-selected': $palette-orange-60,
448
+ 'warning-stroke-selected': $palette-orange-60,
337
449
  'warning-background-glow-high-contrast': $palette-orange-30,
338
450
  'warning-dark': $palette-orange-70,
339
451
  'warning-dark-hover': $palette-orange-40,
@@ -344,6 +456,11 @@ $themes: (
344
456
  'danger-base': $palette-red-20-deprecated,
345
457
  'danger-background': $palette-black,
346
458
  'danger-background-hover': $palette-red-20-deprecated,
459
+ 'danger-background-selected': $palette-black,
460
+ 'danger-foreground-selected': $palette-red-60,
461
+ 'danger-foreground-selected-invert': $palette-black,
462
+ 'danger-selected': $palette-red-60,
463
+ 'danger-stroke-selected': $palette-red-60,
347
464
  'danger-background-glow-high-contrast': $palette-red-20-deprecated,
348
465
  'danger-dark': $palette-red-10-deprecated,
349
466
  'danger-dark-hover': $palette-red-30-deprecated,