asksuite-citrus 3.17.7-beta.0 → 3.17.8-beta.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 (30) hide show
  1. package/esm2022/lib/components/accordion/extendable-panel/extendable-panel.component.mjs +2 -2
  2. package/esm2022/lib/components/arrow-tag/arrow-tag.component.mjs +2 -2
  3. package/esm2022/lib/components/autocomplete/autocomplete.component.mjs +2 -2
  4. package/esm2022/lib/components/avatar/avatar.component.mjs +2 -2
  5. package/esm2022/lib/components/box/box.component.mjs +2 -2
  6. package/esm2022/lib/components/button/button.component.mjs +2 -2
  7. package/esm2022/lib/components/character-counter/character-counter.component.mjs +2 -2
  8. package/esm2022/lib/components/checkbox/checkbox.component.mjs +2 -2
  9. package/esm2022/lib/components/chips/chips.component.mjs +2 -2
  10. package/esm2022/lib/components/date-picker/date-picker-calendar/date-picker-calendar.component.mjs +2 -2
  11. package/esm2022/lib/components/date-picker/date-picker.component.mjs +2 -2
  12. package/esm2022/lib/components/dropdown-container/dropdown-container.component.mjs +2 -2
  13. package/esm2022/lib/components/input/input.component.mjs +2 -2
  14. package/esm2022/lib/components/modal/confirmation-modal/confirmation-modal.component.mjs +2 -2
  15. package/esm2022/lib/components/modal/modal.component.mjs +2 -2
  16. package/esm2022/lib/components/pagination/pagination.component.mjs +2 -2
  17. package/esm2022/lib/components/phone-ddi/phone-ddi.component.mjs +2 -2
  18. package/esm2022/lib/components/richtext-toolbox/richtext-toolbox.component.mjs +2 -2
  19. package/esm2022/lib/components/richtext-url-prompt/richtext-url-prompt.component.mjs +2 -2
  20. package/esm2022/lib/components/select/select.component.mjs +2 -2
  21. package/esm2022/lib/components/tab-group/tab/tab.component.mjs +2 -2
  22. package/esm2022/lib/components/tab-group/tab-group.component.mjs +2 -2
  23. package/esm2022/lib/components/table/table.component.mjs +2 -2
  24. package/esm2022/lib/components/toast/toast.component.mjs +2 -2
  25. package/fesm2022/asksuite-citrus.mjs +48 -48
  26. package/fesm2022/asksuite-citrus.mjs.map +1 -1
  27. package/package.json +1 -1
  28. package/styles/colors-dark.scss +372 -360
  29. package/styles/colors-light.scss +105 -24
  30. package/styles/theme-primitives.scss +115 -0
package/styles/colors-dark.scss CHANGED
@@ -1,368 +1,380 @@
1
- @use 'theme-primitives' as *;
2
- @use 'old-theme' as *;
3
- /*
1
+ @use "theme-primitives" as *;
2
+ @use "old-theme" as *;
3
+ /*
4
4
  * IMPORTANT: All colors defined here must be also defined in colors-list.component.ts for proper documentation
5
5
  */
6
6
 
7
- @mixin theme {
8
- --asksuite-orange: #{$asksuite-orange};
9
- --white: #{$color-nd-0};
10
- --grey-50: #{$color-nd-100};
11
- --grey-100: #{$color-nda-300};
12
- --grey-150: #{$grey-150};//TODO: MISSING
13
- --grey-200: #{$color-nda-400};
14
- --grey-300: #{$color-nda-700};
15
- --grey-400: #{$color-nda-1000};
16
- --grey-500: #{$color-nda-1200};
17
- --grey-600: #{$color-nda-1300};
18
- --grey-700: #{$color-nda-1400};
19
- --grey-800: #{$color-nda-1600};
20
- --grey-900: #{$color-nda-1700};
21
- --yellow-50: #{$yellow-50};
22
- --yellow-200: #{$yellow-200};
23
- --success-green: #{$success-green};
24
- --warning-yellow: #{$warning-yellow};
25
- --error-red: #{$error-red};
26
- --shadow: #{$shadow};
27
- --lightblue-tag: #{$lightblue-tag};
28
- --lavender-tag: #{$lavender-tag};
29
- --green-tag: #{$green-tag};
30
- --pink-tag: #{$pink-tag};
31
- --orange-tag: #{$orange-tag};
32
- --purple-tag: #{$purple-tag};
33
- --yellow-tag: #{$yellow-tag};
34
- --blue-tag: #{$blue-tag};
35
- --brown-tag: #{$brown-tag};
36
- --whatsapp-green: #{$whatsapp-green};
37
- --facebook-blue: #{$facebook-blue};
38
- --instagram-pink: #{$instagram-pink};
39
- --google-blue: #{$google-blue};
40
- --telegram-blue: #{$telegram-blue};
41
- --telephone-yellow: #{$telephone-yellow};
42
- --booking-blue: #{$booking-blue};
43
- --email-yellow: #{$email-yellow};
44
- --default-grey: #{$default-grey};
45
- --primary-background: #{$primary-background};
46
- --secondary-background: #{$color-nda-0};
47
- --hover-background: #{$color-nd-100};
48
- --divider-background: #{$divider-background};
49
- --font-color-100: #{$font-color-100};
50
- --font-color-200: #{$font-color-200};
51
- --font-color-300: #{$font-color-300};
52
- --color-elevation-surface-sunken-default: #{$color-elevation-surface-sunken-default};
53
- --color-light-neutral-NLA200: #{$color-light-neutral-nla200};
54
- --color-light-neutral-NLA300: #{$color-light-neutral-nla300};
55
- --color-texticon-contrast: #{$color-nda-1500};
56
- --color-texticon-subtle: #{$color-nda-1200};
57
- --color-texticon-subtler: #{$color-nda-1000};
58
- --color-texticon-subtlest: #{$color-nda-1000}; //TODO: is same as color-texticon-subtler
59
- --color-texticon-inverse-default: #{$color-nd-0};
60
- --color-texticon-inverse-disabled: #{$color-nla-700};
61
- --color-texticon-inverse-contrast: #{$color-nla-1500};
62
- --color-texticon-disabled: #{$color-nda-700};
63
- --color-texticon-danger: #{$color-r-500};
64
- --color-texticon-warning: #{$color-y-500};
65
- --color-texticon-success: #{$color-g-500};
66
- --color-texticon-info: #{$color-b-500};
67
- --color-texticon-link-default: #{$color-b-500};
68
- --color-texticon-link-visited: #{$color-p-500};
69
- --color-texticon-accent-red-contrast: #{$color-r-500};
70
- --color-texticon-accent-red-bold: #{$color-r-300};
71
- --color-texticon-accent-orange-contrast: #{$color-o-500};
72
- --color-texticon-accent-orange-bold: #{$color-o-300};
73
- --color-texticon-accent-yellow-contrast: #{$color-y-500};
74
- --color-texticon-accent-yellow-bold: #{$color-y-300};
75
- --color-texticon-accent-lime-contrast: #{$color-l-500};
76
- --color-texticon-accent-lime-bold: #{$color-l-300};
77
- --color-texticon-accent-green-contrast: #{$color-g-500};
78
- --color-texticon-accent-green-bold: #{$color-g-300};
79
- --color-texticon-accent-teal-contrast: #{$color-t-500};
80
- --color-texticon-accent-teal-bold: #{$color-t-300};
81
- --color-texticon-accent-blue-contrast: #{$color-b-500};
82
- --color-texticon-accent-blue-bold: #{$color-b-300};
83
- --color-texticon-accent-purple-contrast: #{$color-p-500};
84
- --color-texticon-accent-purple-bold: #{$color-p-300};
85
- --color-texticon-accent-magenta-contrast: #{$color-m-500};
86
- --color-texticon-accent-magenta-bold: #{$color-m-300};
87
- --color-texticon-accent-grey-contrast: #{$color-nd-1000};
88
- --color-texticon-accent-grey-bold: #{$color-nd-1300};
89
- --color-texticon-accent-violet-contrast: #{$color-v-500};
90
- --color-texticon-accent-violet-bold: #{$color-v-300};
91
- --color-texticon-brand-asksuite-contrast: #{$color-a-500};
92
- --color-texticon-brand-asksuite-subtler: #{$color-a-1000};
93
- --color-texticon-brand-asksuite-bold: #{$color-a-400};
94
- --color-texticon-brand-asksuite-subtle: #{$color-a-800};
95
- --color-texticon-brand-asksuite-bolder: #{$color-a-200};
96
- --color-texticon-brand-flow-subtler: #{$color-f-900};
97
- --color-texticon-brand-flow-subtle: #{$color-f-700};
98
- --color-texticon-brand-flow-contrast: #{$color-f-500};
99
- --color-texticon-brand-flow-bold: #{$color-f-300};
100
- --color-texticon-brand-flow-bolder: #{$color-f-100};
101
- --color-texticon-white-default: #{$color-nl-0};
102
- --color-texticon-white-disabled: #{$color-nda-700};
103
- --color-texticon-black-default: #{$color-nla-1500};
104
- --color-texticon-black-disabled: #{$color-nla-700};
105
- --color-border-default: #{$color-nda-400};
106
- --color-border-danger: #{$color-r-500};
107
- --color-border-warning: #{$color-y-500};
108
- --color-border-success: #{$color-g-500};
109
- --color-border-info: #{$color-b-500};
110
- --color-border-link-default: #{$color-b-600};
111
- --color-border-link-visited: #{$color-p-600};
112
- --color-border-accent-red: #{$color-r-500};
113
- --color-border-accent-orange: #{$color-o-500};
114
- --color-border-accent-yellow: #{$color-y-500};
115
- --color-border-accent-lime: #{$color-l-500};
116
- --color-border-accent-green: #{$color-g-500};
117
- --color-border-accent-teal: #{$color-t-500};
118
- --color-border-accent-blue: #{$color-b-500};
119
- --color-border-accent-purple: #{$color-p-500};
120
- --color-border-accent-magenta: #{$color-m-500};
121
- --color-border-accent-grey: #{$color-nd-1000};
122
- --color-border-accent-violet: #{$color-v-500};
123
- --color-border-brand-asksuite-subtler: #{$color-a-1000};
124
- --color-border-brand-asksuite-subtle: #{$color-a-800};
125
- --color-border-brand-asksuite-contrast: #{$color-a-500};
126
- --color-border-brand-asksuite-bold: #{$color-a-400};
127
- --color-border-brand-asksuite-bolder: #{$color-a-200};
128
- --color-border-brand-flow-subtler: #{$color-f-100};
129
- --color-border-brand-flow-subtle: #{$color-f-300};
130
- --color-border-brand-flow-contrast: #{$color-f-500};
131
- --color-border-brand-flow-bold: #{$color-f-700};
132
- --color-border-brand-flow-bolder: #{$color-f-900};
133
- --color-border-inverse-contrast: #{$color-nl-0};
134
- --color-border-inverse-disabled: #{$color-nda-300};
135
- --color-border-inverse-subtle: #{$color-nl-400};
136
- --color-border-white-default: #{$color-nl-0};
137
- --color-border-white-disabled: #{$color-nda-1000};
138
- --color-border-black-default: #{$color-nd-200};
139
- --color-border-black-disabled: #{$color-nla-1000};
140
- --color-background-accent-red-contrast-default: #{$color-r-500};
141
- --color-background-accent-red-contrast-hovered: #{$color-r-400};
142
- --color-background-accent-red-contrast-pressed: #{$color-r-300};
143
- --color-background-accent-red-subtlest-default: #{$color-r-900};
144
- --color-background-accent-red-subtlest-hovered: #{$color-r-800};
145
- --color-background-accent-red-subtlest-pressed: #{$color-r-700};
146
- --color-background-accent-red-subtle-default: #{$color-r-700};
147
- --color-background-accent-red-subtle-hovered: #{$color-r-600};
148
- --color-background-accent-red-subtle-pressed: #{$color-r-500};
149
- --color-background-accent-red-bold-default: #{$color-r-300};
150
- --color-background-accent-red-bold-hovered: #{$color-r-200};
151
- --color-background-accent-red-bold-pressed: #{$color-r-100};
152
- --color-background-accent-grey-contrast-default: #{$color-nd-1000};
153
- --color-background-accent-grey-contrast-hovered: #{$color-nd-1200};
154
- --color-background-accent-grey-contrast-pressed: #{$color-nd-1300};
155
- --color-background-accent-grey-bolder-default: #{$color-nd-1700};
156
- --color-background-accent-grey-bolder-hovered: #{$color-nd-1500};
157
- --color-background-accent-grey-bolder-pressed: #{$color-nd-1400};
158
- --color-background-accent-grey-inverse-default: #{$color-nd-0};
159
- --color-background-accent-grey-inverse-hovered: #{$color-nd-200};
160
- --color-background-accent-grey-inverse-pressed: #{$color-nd-300};
161
- --color-background-accent-grey-subtlest-default: #{$color-nd-100};
162
- --color-background-accent-grey-subtlest-hovered: #{$color-nd-300};
163
- --color-background-accent-grey-subtlest-pressed: #{$color-nd-400};
164
- --color-background-accent-magenta-contrast-default: #{$color-m-500};
165
- --color-background-accent-magenta-contrast-hovered: #{$color-m-400};
166
- --color-background-accent-magenta-contrast-pressed: #{$color-m-300};
167
- --color-background-accent-magenta-subtlest-default: #{$color-m-900};
168
- --color-background-accent-magenta-subtlest-hovered: #{$color-m-800};
169
- --color-background-accent-magenta-subtlest-pressed: #{$color-m-700};
170
- --color-background-accent-magenta-subtle-default: #{$color-m-700};
171
- --color-background-accent-magenta-subtle-hovered: #{$color-m-600};
172
- --color-background-accent-magenta-subtle-pressed: #{$color-m-500};
173
- --color-background-accent-magenta-bold-default: #{$color-m-300};
174
- --color-background-accent-magenta-bold-hovered: #{$color-m-200};
175
- --color-background-accent-magenta-bold-pressed: #{$color-m-100};
176
- --color-background-accent-purple-contrast-default: #{$color-p-500};
177
- --color-background-accent-purple-contrast-hovered: #{$color-p-400};
178
- --color-background-accent-purple-contrast-pressed: #{$color-p-300};
179
- --color-background-accent-purple-subtlest-default: #{$color-p-900};
180
- --color-background-accent-purple-subtlest-hovered: #{$color-p-800};
181
- --color-background-accent-purple-subtlest-pressed: #{$color-p-700};
182
- --color-background-accent-purple-subtle-default: #{$color-p-700};
183
- --color-background-accent-purple-subtle-hovered: #{$color-p-600};
184
- --color-background-accent-purple-subtle-pressed: #{$color-p-500};
185
- --color-background-accent-purple-bold-default: #{$color-p-300};
186
- --color-background-accent-purple-bold-hovered: #{$color-p-200};
187
- --color-background-accent-purple-bold-pressed: #{$color-p-100};
188
- --color-background-accent-blue-contrast-default: #{$color-b-500};
189
- --color-background-accent-blue-contrast-hovered: #{$color-b-400};
190
- --color-background-accent-blue-contrast-pressed: #{$color-b-300};
191
- --color-background-accent-blue-subtlest-default: #{$color-b-900};
192
- --color-background-accent-blue-subtlest-hovered: #{$color-b-800};
193
- --color-background-accent-blue-subtlest-pressed: #{$color-b-700};
194
- --color-background-accent-blue-subtle-default: #{$color-b-700};
195
- --color-background-accent-blue-subtle-hovered: #{$color-b-600};
196
- --color-background-accent-blue-subtle-pressed: #{$color-b-500};
197
- --color-background-accent-blue-bold-default: #{$color-b-300};
198
- --color-background-accent-blue-bold-hovered: #{$color-b-200};
199
- --color-background-accent-blue-bold-pressed: #{$color-b-100};
200
- --color-background-accent-teal-contrast-default: #{$color-t-500};
201
- --color-background-accent-teal-contrast-hovered: #{$color-t-400};
202
- --color-background-accent-teal-contrast-pressed: #{$color-t-300};
203
- --color-background-accent-teal-subtlest-default: #{$color-t-900};
204
- --color-background-accent-teal-subtlest-hovered: #{$color-t-800};
205
- --color-background-accent-teal-subtlest-pressed: #{$color-t-700};
206
- --color-background-accent-teal-subtler-default: #{$color-t-700};
207
- --color-background-accent-teal-subtler-hovered: #{$color-t-600};
208
- --color-background-accent-teal-subtler-pressed: #{$color-t-500};
209
- --color-background-accent-teal-bold-default: #{$color-t-300};
210
- --color-background-accent-teal-bold-hovered: #{$color-t-200};
211
- --color-background-accent-teal-bold-pressed: #{$color-t-100};
212
- --color-background-accent-green-contrast-default: #{$color-g-500};
213
- --color-background-accent-green-contrast-hovered: #{$color-g-400};
214
- --color-background-accent-green-contrast-pressed: #{$color-g-300};
215
- --color-background-accent-green-subtlest-default: #{$color-g-900};
216
- --color-background-accent-green-subtlest-hovered: #{$color-g-800};
217
- --color-background-accent-green-subtlest-pressed: #{$color-g-700};
218
- --color-background-accent-green-subtle-default: #{$color-g-700};
219
- --color-background-accent-green-subtle-hovered: #{$color-g-600};
220
- --color-background-accent-green-subtle-pressed: #{$color-g-500};
221
- --color-background-accent-green-bold-default: #{$color-g-300};
222
- --color-background-accent-green-bold-hovered: #{$color-g-200};
223
- --color-background-accent-green-bold-pressed: #{$color-g-100};
224
- --color-background-accent-lime-contrast-default: #{$color-l-500};
225
- --color-background-accent-lime-contrast-hovered: #{$color-l-400};
226
- --color-background-accent-lime-contrast-pressed: #{$color-l-300};
227
- --color-background-accent-lime-subtlest-default: #{$color-l-900};
228
- --color-background-accent-lime-subtlest-hovered: #{$color-l-800};
229
- --color-background-accent-lime-subtlest-pressed: #{$color-l-700};
230
- --color-background-accent-lime-subtle-default: #{$color-l-700};
231
- --color-background-accent-lime-subtle-hovered: #{$color-l-600};
232
- --color-background-accent-lime-subtle-pressed: #{$color-l-500};
233
- --color-background-accent-lime-bold-default: #{$color-l-300};
234
- --color-background-accent-lime-bold-hovered: #{$color-l-200};
235
- --color-background-accent-lime-bold-pressed: #{$color-l-100};
236
- --color-background-accent-yellow-contrast-default: #{$color-y-500};
237
- --color-background-accent-yellow-contrast-hovered: #{$color-y-400};
238
- --color-background-accent-yellow-contrast-pressed: #{$color-y-300};
239
- --color-background-accent-yellow-subtlest-default: #{$color-y-900};
240
- --color-background-accent-yellow-subtlest-hovered: #{$color-y-800};
241
- --color-background-accent-yellow-subtlest-pressed: #{$color-y-700};
242
- --color-background-accent-yellow-subtle-default: #{$color-y-700};
243
- --color-background-accent-yellow-subtle-hovered: #{$color-y-600};
244
- --color-background-accent-yellow-subtle-pressed: #{$color-y-500};
245
- --color-background-accent-yellow-bold-default: #{$color-y-300};
246
- --color-background-accent-yellow-bold-hovered: #{$color-y-200};
247
- --color-background-accent-yellow-bold-pressed: #{$color-y-100};
248
- --color-background-accent-orange-contrast-default: #{$color-o-500};
249
- --color-background-accent-orange-contrast-hovered: #{$color-o-400};
250
- --color-background-accent-orange-contrast-pressed: #{$color-o-300};
251
- --color-background-accent-orange-subtlest-default: #{$color-o-900};
252
- --color-background-accent-orange-subtlest-hovered: #{$color-o-800};
253
- --color-background-accent-orange-subtlest-pressed: #{$color-o-700};
254
- --color-background-accent-orange-bold-default: #{$color-o-300};
255
- --color-background-accent-orange-bold-hovered: #{$color-o-200};
256
- --color-background-accent-orange-bold-pressed: #{$color-o-100};
257
- --color-background-accent-orange-subtle-default: #{$color-o-700};
258
- --color-background-accent-orange-subtle-hovered: #{$color-o-600};
259
- --color-background-accent-orange-subtle-pressed: #{$color-o-500};
260
- --color-background-accent-violet-contrast-default: #{$color-v-500};
261
- --color-background-accent-violet-contrast-hovered: #{$color-v-400};
262
- --color-background-accent-violet-contrast-pressed: #{$color-v-300};
263
- --color-background-accent-violet-subtlest-default: #{$color-v-900};
264
- --color-background-accent-violet-subtlest-hovered: #{$color-v-800};
265
- --color-background-accent-violet-subtlest-pressed: #{$color-v-700};
266
- --color-background-accent-violet-subtle-default: #{$color-v-700};
267
- --color-background-accent-violet-subtle-hovered: #{$color-v-600};
268
- --color-background-accent-violet-subtle-pressed: #{$color-v-500};
269
- --color-background-accent-violet-bold-default: #{$color-v-300};
270
- --color-background-accent-violet-bold-hovered: #{$color-v-200};
271
- --color-background-accent-violet-bold-pressed: #{$color-v-100};
272
- --color-background-accent-disabled: #{$color-nd-400};
273
- --color-background-info-contrast-default: #{$color-b-500};
274
- --color-background-info-contrast-hovered: #{$color-b-400};
275
- --color-background-info-contrast-pressed: #{$color-b-300};
276
- --color-background-success-contrast-default: #{$color-g-500};
277
- --color-background-success-contrast-hovered: #{$color-g-400};
278
- --color-background-success-contrast-pressed: #{$color-g-300};
279
- --color-background-danger-contrast-default: #{$color-r-500};
280
- --color-background-danger-contrast-hovered: #{$color-r-400};
281
- --color-background-danger-contrast-pressed: #{$color-r-300};
282
- --color-background-warning-contrast-default: #{$color-y-500};
283
- --color-background-warning-contrast-hovered: #{$color-y-400};
284
- --color-background-warning-contrast-pressed: #{$color-y-300};
285
- --color-background-brand-asksuite-contrast-default: #{$color-a-500};
286
- --color-background-brand-asksuite-contrast-hovered: #{$color-a-400};
287
- --color-background-brand-asksuite-contrast-pressed: #{$color-a-300};
288
- --color-background-brand-asksuite-subtler-default: #{$color-a-900};
289
- --color-background-brand-asksuite-subtler-hovered: #{$color-a-800};
290
- --color-background-brand-asksuite-subtler-pressed: #{$color-a-700};
291
- --color-background-brand-asksuite-subtlest-default: #{$color-a-1000};
292
- --color-background-brand-asksuite-subtlest-hovered: #{$color-a-900};
293
- --color-background-brand-asksuite-subtlest-pressed: #{$color-a-800};
294
- --color-background-brand-asksuite-bold-default: #{$color-a-400};
295
- --color-background-brand-asksuite-bold-hovered: #{$color-a-300};
296
- --color-background-brand-asksuite-bold-pressed: #{$color-a-200};
297
- --color-background-brand-flow-subtlest-default: #{$color-f-1000};
298
- --color-background-brand-flow-subtlest-hovered: #{$color-f-900};
299
- --color-background-brand-flow-subtlest-pressed: #{$color-f-800};
300
- --color-background-brand-flow-subtler-default: #{$color-f-900};
301
- --color-background-brand-flow-subtler-hovered: #{$color-f-800};
302
- --color-background-brand-flow-subtler-pressed: #{$color-f-700};
303
- --color-background-brand-flow-contrast-default: #{$color-f-500};
304
- --color-background-brand-flow-contrast-hovered: #{$color-f-400};
305
- --color-background-brand-flow-contrast-pressed: #{$color-f-300};
306
- --color-background-brand-flow-bold-default: #{$color-f-400};
307
- --color-background-brand-flow-bold-hovered: #{$color-f-300};
308
- --color-background-brand-flow-bold-pressed: #{$color-f-200};
309
- --color-background-disabled: #{$color-nda-200};
310
- --color-background-skeleton: #{$color-nda-200};
311
- --color-background-bounding-box: #{$color-nda-0};
312
- --color-background-selected-ask: #{$color-a-900};
313
- --color-background-selected-flow: #{$color-f-900};
314
- --color-background-alpha-subtlest-default: #{$color-nda-200};
315
- --color-background-alpha-subtlest-hovered: #{$color-nda-400};
316
- --color-background-alpha-subtlest-pressed: #{$color-nda-500};
317
- --color-background-alpha-bolder-default: #{$color-nda-1600};
318
- --color-background-alpha-bolder-hovered: #{$color-nda-1400};
319
- --color-background-alpha-bolder-pressed: #{$color-nda-1200};
320
- --color-background-alpha-contrast-default: #{$color-nda-1000};
321
- --color-background-alpha-contrast-hovered: #{$color-nda-1200};
322
- --color-background-alpha-contrast-pressed: #{$color-nda-1400};
323
- --color-background-inverse-default: #{$color-nd-0};
324
- --color-background-inverse-hovered: #{$color-nda-200};
325
- --color-background-inverse-pressed: #{$color-nda-300};
326
- --color-elevation-surface-sunken: #{$color-nd-100};
327
- --color-elevation-surface-default: #{$color-nd-0};
328
- --color-elevation-surface-hovered: #{$color-nd-300};
329
- --color-elevation-surface-selected-ask: #{$color-a-1000};
330
- --color-elevation-surface-selected-flow: #{$color-f-1000};
331
- --color-elevation-surface-pressed: #{$color-nd-400};
332
- --color-elevation-surface-raised: #{$color-nd-200};
333
- --color-elevation-surface-overlay: #{$color-nd-200};
334
- --color-divider-default: #{$color-nd-400};
7
+ @mixin theme {
8
+ --asksuite-orange: #{$asksuite-orange};
9
+ --white: #{$color-nd-0};
10
+ --grey-50: #{$color-nd-100};
11
+ --grey-100: #{$color-nda-300};
12
+ --grey-150: #{$grey-150}; //TODO: MISSING
13
+ --grey-200: #{$color-nda-400};
14
+ --grey-300: #{$color-nda-700};
15
+ --grey-400: #{$color-nda-1000};
16
+ --grey-500: #{$color-nda-1200};
17
+ --grey-600: #{$color-nda-1300};
18
+ --grey-700: #{$color-nda-1400};
19
+ --grey-800: #{$color-nda-1600};
20
+ --grey-900: #{$color-nda-1700};
21
+ --yellow-50: #{$yellow-50};
22
+ --yellow-200: #{$yellow-200};
23
+ --success-green: #{$success-green};
24
+ --warning-yellow: #{$warning-yellow};
25
+ --error-red: #{$error-red};
26
+ --shadow: #{$shadow};
27
+ --lightblue-tag: #{$lightblue-tag};
28
+ --lavender-tag: #{$lavender-tag};
29
+ --green-tag: #{$green-tag};
30
+ --pink-tag: #{$pink-tag};
31
+ --orange-tag: #{$orange-tag};
32
+ --purple-tag: #{$purple-tag};
33
+ --yellow-tag: #{$yellow-tag};
34
+ --blue-tag: #{$blue-tag};
35
+ --brown-tag: #{$brown-tag};
36
+ --whatsapp-green: #{$whatsapp-green};
37
+ --facebook-blue: #{$facebook-blue};
38
+ --instagram-pink: #{$instagram-pink};
39
+ --google-blue: #{$google-blue};
40
+ --telegram-blue: #{$telegram-blue};
41
+ --telephone-yellow: #{$telephone-yellow};
42
+ --booking-blue: #{$booking-blue};
43
+ --email-yellow: #{$email-yellow};
44
+ --default-grey: #{$default-grey};
45
+ --primary-background: #{$primary-background};
46
+ --secondary-background: #{$color-nda-0};
47
+ --hover-background: #{$color-nd-100};
48
+ --divider-background: #{$divider-background};
49
+ --font-color-100: #{$font-color-100};
50
+ --font-color-200: #{$font-color-200};
51
+ --font-color-300: #{$font-color-300};
52
+ --color-elevation-surface-sunken-default: #{$color-elevation-surface-sunken-default};
53
+ --color-light-neutral-NLA200: #{$color-light-neutral-nla200};
54
+ --color-light-neutral-NLA300: #{$color-light-neutral-nla300};
55
+ --color-texticon-contrast: #{$color-nda-1500};
56
+ --color-texticon-subtle: #{$color-nda-1200};
57
+ --color-texticon-subtler: #{$color-nda-1000};
58
+ --color-texticon-subtlest: #{$color-nda-1000}; //TODO: is same as color-texticon-subtler
59
+ --color-texticon-inverse-default: #{$color-nd-0};
60
+ --color-texticon-inverse-disabled: #{$color-nla-700};
61
+ --color-texticon-inverse-contrast: #{$color-nla-1500};
62
+ --color-texticon-disabled: #{$color-nda-700};
63
+ --color-texticon-danger: #{$color-r-500};
64
+ --color-texticon-warning: #{$color-y-500};
65
+ --color-texticon-success: #{$color-g-500};
66
+ --color-texticon-info: #{$color-b-500};
67
+ --color-texticon-link-default: #{$color-b-500};
68
+ --color-texticon-link-visited: #{$color-p-500};
69
+ --color-texticon-accent-red-contrast: #{$color-r-500};
70
+ --color-texticon-accent-red-bold: #{$color-r-300};
71
+ --color-texticon-accent-orange-contrast: #{$color-o-500};
72
+ --color-texticon-accent-orange-bold: #{$color-o-300};
73
+ --color-texticon-accent-yellow-contrast: #{$color-y-500};
74
+ --color-texticon-accent-yellow-bold: #{$color-y-300};
75
+ --color-texticon-accent-lime-contrast: #{$color-l-500};
76
+ --color-texticon-accent-lime-bold: #{$color-l-300};
77
+ --color-texticon-accent-green-contrast: #{$color-g-500};
78
+ --color-texticon-accent-green-bold: #{$color-g-300};
79
+ --color-texticon-accent-teal-contrast: #{$color-t-500};
80
+ --color-texticon-accent-teal-bold: #{$color-t-300};
81
+ --color-texticon-accent-blue-contrast: #{$color-b-500};
82
+ --color-texticon-accent-blue-bold: #{$color-b-300};
83
+ --color-texticon-accent-purple-contrast: #{$color-p-500};
84
+ --color-texticon-accent-purple-bold: #{$color-p-300};
85
+ --color-texticon-accent-magenta-contrast: #{$color-m-500};
86
+ --color-texticon-accent-magenta-bold: #{$color-m-300};
87
+ --color-texticon-accent-grey-contrast: #{$color-nd-1000};
88
+ --color-texticon-accent-grey-bold: #{$color-nd-1300};
89
+ --color-texticon-accent-violet-contrast: #{$color-v-500};
90
+ --color-texticon-accent-violet-bold: #{$color-v-300};
91
+ --color-texticon-brand-asksuite-contrast: #{$color-a-500};
92
+ --color-texticon-brand-asksuite-subtler: #{$color-a-1000};
93
+ --color-texticon-brand-asksuite-bold: #{$color-a-400};
94
+ --color-texticon-brand-asksuite-subtle: #{$color-a-800};
95
+ --color-texticon-brand-asksuite-bolder: #{$color-a-200};
96
+ --color-texticon-brand-flow-subtler: #{$color-f-900};
97
+ --color-texticon-brand-flow-subtle: #{$color-f-700};
98
+ --color-texticon-brand-flow-contrast: #{$color-f-500};
99
+ --color-texticon-brand-flow-bold: #{$color-f-300};
100
+ --color-texticon-brand-flow-bolder: #{$color-f-100};
101
+ --color-texticon-white-default: #{$color-nl-0};
102
+ --color-texticon-white-disabled: #{$color-nda-700};
103
+ --color-texticon-black-default: #{$color-nla-1500};
104
+ --color-texticon-black-disabled: #{$color-nla-700};
105
+ --color-border-default: #{$color-nda-400};
106
+ --color-border-danger: #{$color-r-500};
107
+ --color-border-warning: #{$color-y-500};
108
+ --color-border-success: #{$color-g-500};
109
+ --color-border-info: #{$color-b-500};
110
+ --color-border-link-default: #{$color-b-600};
111
+ --color-border-link-visited: #{$color-p-600};
112
+ --color-border-accent-red: #{$color-r-500};
113
+ --color-border-accent-orange: #{$color-o-500};
114
+ --color-border-accent-yellow: #{$color-y-500};
115
+ --color-border-accent-lime: #{$color-l-500};
116
+ --color-border-accent-green: #{$color-g-500};
117
+ --color-border-accent-teal: #{$color-t-500};
118
+ --color-border-accent-blue: #{$color-b-500};
119
+ --color-border-accent-purple: #{$color-p-500};
120
+ --color-border-accent-magenta: #{$color-m-500};
121
+ --color-border-accent-grey: #{$color-nd-1000};
122
+ --color-border-accent-violet: #{$color-v-500};
123
+ --color-border-brand-asksuite-subtler: #{$color-a-1000};
124
+ --color-border-brand-asksuite-subtle: #{$color-a-800};
125
+ --color-border-brand-asksuite-contrast: #{$color-a-500};
126
+ --color-border-brand-asksuite-bold: #{$color-a-400};
127
+ --color-border-brand-asksuite-bolder: #{$color-a-200};
128
+ --color-border-brand-flow-subtler: #{$color-f-100};
129
+ --color-border-brand-flow-subtle: #{$color-f-300};
130
+ --color-border-brand-flow-contrast: #{$color-f-500};
131
+ --color-border-brand-flow-bold: #{$color-f-700};
132
+ --color-border-brand-flow-bolder: #{$color-f-900};
133
+ --color-border-inverse-contrast: #{$color-nl-0};
134
+ --color-border-inverse-disabled: #{$color-nda-300};
135
+ --color-border-inverse-subtle: #{$color-nl-400};
136
+ --color-border-white-default: #{$color-nl-0};
137
+ --color-border-white-disabled: #{$color-nda-1000};
138
+ --color-border-black-default: #{$color-nd-200};
139
+ --color-border-black-disabled: #{$color-nla-1000};
140
+ --color-background-accent-red-contrast-default: #{$color-r-500};
141
+ --color-background-accent-red-contrast-hovered: #{$color-r-400};
142
+ --color-background-accent-red-contrast-pressed: #{$color-r-300};
143
+ --color-background-accent-red-subtlest-default: #{$color-r-900};
144
+ --color-background-accent-red-subtlest-hovered: #{$color-r-800};
145
+ --color-background-accent-red-subtlest-pressed: #{$color-r-700};
146
+ --color-background-accent-red-subtle-default: #{$color-r-700};
147
+ --color-background-accent-red-subtle-hovered: #{$color-r-600};
148
+ --color-background-accent-red-subtle-pressed: #{$color-r-500};
149
+ --color-background-accent-red-bold-default: #{$color-r-300};
150
+ --color-background-accent-red-bold-hovered: #{$color-r-200};
151
+ --color-background-accent-red-bold-pressed: #{$color-r-100};
152
+ --color-background-accent-grey-contrast-default: #{$color-nd-1000};
153
+ --color-background-accent-grey-contrast-hovered: #{$color-nd-1200};
154
+ --color-background-accent-grey-contrast-pressed: #{$color-nd-1300};
155
+ --color-background-accent-grey-bolder-default: #{$color-nd-1700};
156
+ --color-background-accent-grey-bolder-hovered: #{$color-nd-1500};
157
+ --color-background-accent-grey-bolder-pressed: #{$color-nd-1400};
158
+ --color-background-accent-grey-inverse-default: #{$color-nd-0};
159
+ --color-background-accent-grey-inverse-hovered: #{$color-nd-200};
160
+ --color-background-accent-grey-inverse-pressed: #{$color-nd-300};
161
+ --color-background-accent-grey-subtlest-default: #{$color-nd-100};
162
+ --color-background-accent-grey-subtlest-hovered: #{$color-nd-300};
163
+ --color-background-accent-grey-subtlest-pressed: #{$color-nd-400};
164
+ --color-background-accent-magenta-contrast-default: #{$color-m-500};
165
+ --color-background-accent-magenta-contrast-hovered: #{$color-m-400};
166
+ --color-background-accent-magenta-contrast-pressed: #{$color-m-300};
167
+ --color-background-accent-magenta-subtlest-default: #{$color-m-900};
168
+ --color-background-accent-magenta-subtlest-hovered: #{$color-m-800};
169
+ --color-background-accent-magenta-subtlest-pressed: #{$color-m-700};
170
+ --color-background-accent-magenta-subtle-default: #{$color-m-700};
171
+ --color-background-accent-magenta-subtle-hovered: #{$color-m-600};
172
+ --color-background-accent-magenta-subtle-pressed: #{$color-m-500};
173
+ --color-background-accent-magenta-bold-default: #{$color-m-300};
174
+ --color-background-accent-magenta-bold-hovered: #{$color-m-200};
175
+ --color-background-accent-magenta-bold-pressed: #{$color-m-100};
176
+ --color-background-accent-purple-contrast-default: #{$color-p-500};
177
+ --color-background-accent-purple-contrast-hovered: #{$color-p-400};
178
+ --color-background-accent-purple-contrast-pressed: #{$color-p-300};
179
+ --color-background-accent-purple-subtlest-default: #{$color-p-900};
180
+ --color-background-accent-purple-subtlest-hovered: #{$color-p-800};
181
+ --color-background-accent-purple-subtlest-pressed: #{$color-p-700};
182
+ --color-background-accent-purple-subtle-default: #{$color-p-700};
183
+ --color-background-accent-purple-subtle-hovered: #{$color-p-600};
184
+ --color-background-accent-purple-subtle-pressed: #{$color-p-500};
185
+ --color-background-accent-purple-bold-default: #{$color-p-300};
186
+ --color-background-accent-purple-bold-hovered: #{$color-p-200};
187
+ --color-background-accent-purple-bold-pressed: #{$color-p-100};
188
+ --color-background-accent-blue-contrast-default: #{$color-b-500};
189
+ --color-background-accent-blue-contrast-hovered: #{$color-b-400};
190
+ --color-background-accent-blue-contrast-pressed: #{$color-b-300};
191
+ --color-background-accent-blue-subtlest-default: #{$color-b-900};
192
+ --color-background-accent-blue-subtlest-hovered: #{$color-b-800};
193
+ --color-background-accent-blue-subtlest-pressed: #{$color-b-700};
194
+ --color-background-accent-blue-subtle-default: #{$color-b-700};
195
+ --color-background-accent-blue-subtle-hovered: #{$color-b-600};
196
+ --color-background-accent-blue-subtle-pressed: #{$color-b-500};
197
+ --color-background-accent-blue-bold-default: #{$color-b-300};
198
+ --color-background-accent-blue-bold-hovered: #{$color-b-200};
199
+ --color-background-accent-blue-bold-pressed: #{$color-b-100};
200
+ --color-background-accent-teal-contrast-default: #{$color-t-500};
201
+ --color-background-accent-teal-contrast-hovered: #{$color-t-400};
202
+ --color-background-accent-teal-contrast-pressed: #{$color-t-300};
203
+ --color-background-accent-teal-subtlest-default: #{$color-t-900};
204
+ --color-background-accent-teal-subtlest-hovered: #{$color-t-800};
205
+ --color-background-accent-teal-subtlest-pressed: #{$color-t-700};
206
+ --color-background-accent-teal-subtler-default: #{$color-t-700};
207
+ --color-background-accent-teal-subtler-hovered: #{$color-t-600};
208
+ --color-background-accent-teal-subtler-pressed: #{$color-t-500};
209
+ --color-background-accent-teal-bold-default: #{$color-t-300};
210
+ --color-background-accent-teal-bold-hovered: #{$color-t-200};
211
+ --color-background-accent-teal-bold-pressed: #{$color-t-100};
212
+ --color-background-accent-green-contrast-default: #{$color-g-500};
213
+ --color-background-accent-green-contrast-hovered: #{$color-g-400};
214
+ --color-background-accent-green-contrast-pressed: #{$color-g-300};
215
+ --color-background-accent-green-subtlest-default: #{$color-g-900};
216
+ --color-background-accent-green-subtlest-hovered: #{$color-g-800};
217
+ --color-background-accent-green-subtlest-pressed: #{$color-g-700};
218
+ --color-background-accent-green-subtle-default: #{$color-g-700};
219
+ --color-background-accent-green-subtle-hovered: #{$color-g-600};
220
+ --color-background-accent-green-subtle-pressed: #{$color-g-500};
221
+ --color-background-accent-green-bold-default: #{$color-g-300};
222
+ --color-background-accent-green-bold-hovered: #{$color-g-200};
223
+ --color-background-accent-green-bold-pressed: #{$color-g-100};
224
+ --color-background-accent-lime-contrast-default: #{$color-l-500};
225
+ --color-background-accent-lime-contrast-hovered: #{$color-l-400};
226
+ --color-background-accent-lime-contrast-pressed: #{$color-l-300};
227
+ --color-background-accent-lime-subtlest-default: #{$color-l-900};
228
+ --color-background-accent-lime-subtlest-hovered: #{$color-l-800};
229
+ --color-background-accent-lime-subtlest-pressed: #{$color-l-700};
230
+ --color-background-accent-lime-subtle-default: #{$color-l-700};
231
+ --color-background-accent-lime-subtle-hovered: #{$color-l-600};
232
+ --color-background-accent-lime-subtle-pressed: #{$color-l-500};
233
+ --color-background-accent-lime-bold-default: #{$color-l-300};
234
+ --color-background-accent-lime-bold-hovered: #{$color-l-200};
235
+ --color-background-accent-lime-bold-pressed: #{$color-l-100};
236
+ --color-background-accent-yellow-contrast-default: #{$color-y-500};
237
+ --color-background-accent-yellow-contrast-hovered: #{$color-y-400};
238
+ --color-background-accent-yellow-contrast-pressed: #{$color-y-300};
239
+ --color-background-accent-yellow-subtlest-default: #{$color-y-900};
240
+ --color-background-accent-yellow-subtlest-hovered: #{$color-y-800};
241
+ --color-background-accent-yellow-subtlest-pressed: #{$color-y-700};
242
+ --color-background-accent-yellow-subtle-default: #{$color-y-700};
243
+ --color-background-accent-yellow-subtle-hovered: #{$color-y-600};
244
+ --color-background-accent-yellow-subtle-pressed: #{$color-y-500};
245
+ --color-background-accent-yellow-bold-default: #{$color-y-300};
246
+ --color-background-accent-yellow-bold-hovered: #{$color-y-200};
247
+ --color-background-accent-yellow-bold-pressed: #{$color-y-100};
248
+ --color-background-accent-orange-contrast-default: #{$color-o-500};
249
+ --color-background-accent-orange-contrast-hovered: #{$color-o-400};
250
+ --color-background-accent-orange-contrast-pressed: #{$color-o-300};
251
+ --color-background-accent-orange-subtlest-default: #{$color-o-900};
252
+ --color-background-accent-orange-subtlest-hovered: #{$color-o-800};
253
+ --color-background-accent-orange-subtlest-pressed: #{$color-o-700};
254
+ --color-background-accent-orange-bold-default: #{$color-o-300};
255
+ --color-background-accent-orange-bold-hovered: #{$color-o-200};
256
+ --color-background-accent-orange-bold-pressed: #{$color-o-100};
257
+ --color-background-accent-orange-subtle-default: #{$color-o-700};
258
+ --color-background-accent-orange-subtle-hovered: #{$color-o-600};
259
+ --color-background-accent-orange-subtle-pressed: #{$color-o-500};
260
+ --color-background-accent-violet-contrast-default: #{$color-v-500};
261
+ --color-background-accent-violet-contrast-hovered: #{$color-v-400};
262
+ --color-background-accent-violet-contrast-pressed: #{$color-v-300};
263
+ --color-background-accent-violet-subtlest-default: #{$color-v-900};
264
+ --color-background-accent-violet-subtlest-hovered: #{$color-v-800};
265
+ --color-background-accent-violet-subtlest-pressed: #{$color-v-700};
266
+ --color-background-accent-violet-subtle-default: #{$color-v-700};
267
+ --color-background-accent-violet-subtle-hovered: #{$color-v-600};
268
+ --color-background-accent-violet-subtle-pressed: #{$color-v-500};
269
+ --color-background-accent-violet-bold-default: #{$color-v-300};
270
+ --color-background-accent-violet-bold-hovered: #{$color-v-200};
271
+ --color-background-accent-violet-bold-pressed: #{$color-v-100};
272
+ --color-background-accent-disabled: #{$color-nd-400};
273
+ --color-background-info-contrast-default: #{$color-b-500};
274
+ --color-background-info-contrast-hovered: #{$color-b-400};
275
+ --color-background-info-contrast-pressed: #{$color-b-300};
276
+ --color-background-success-contrast-default: #{$color-g-500};
277
+ --color-background-success-contrast-hovered: #{$color-g-400};
278
+ --color-background-success-contrast-pressed: #{$color-g-300};
279
+ --color-background-danger-contrast-default: #{$color-r-500};
280
+ --color-background-danger-contrast-hovered: #{$color-r-400};
281
+ --color-background-danger-contrast-pressed: #{$color-r-300};
282
+ --color-background-warning-contrast-default: #{$color-y-500};
283
+ --color-background-warning-contrast-hovered: #{$color-y-400};
284
+ --color-background-warning-contrast-pressed: #{$color-y-300};
285
+ --color-background-brand-asksuite-contrast-default: #{$color-a-500};
286
+ --color-background-brand-asksuite-contrast-hovered: #{$color-a-400};
287
+ --color-background-brand-asksuite-contrast-pressed: #{$color-a-300};
288
+ --color-background-brand-asksuite-subtler-default: #{$color-a-900};
289
+ --color-background-brand-asksuite-subtler-hovered: #{$color-a-800};
290
+ --color-background-brand-asksuite-subtler-pressed: #{$color-a-700};
291
+ --color-background-brand-asksuite-subtlest-default: #{$color-a-1000};
292
+ --color-background-brand-asksuite-subtlest-hovered: #{$color-a-900};
293
+ --color-background-brand-asksuite-subtlest-pressed: #{$color-a-800};
294
+ --color-background-brand-asksuite-bold-default: #{$color-a-400};
295
+ --color-background-brand-asksuite-bold-hovered: #{$color-a-300};
296
+ --color-background-brand-asksuite-bold-pressed: #{$color-a-200};
297
+ --color-background-brand-flow-subtlest-default: #{$color-f-1000};
298
+ --color-background-brand-flow-subtlest-hovered: #{$color-f-900};
299
+ --color-background-brand-flow-subtlest-pressed: #{$color-f-800};
300
+ --color-background-brand-flow-subtler-default: #{$color-f-900};
301
+ --color-background-brand-flow-subtler-hovered: #{$color-f-800};
302
+ --color-background-brand-flow-subtler-pressed: #{$color-f-700};
303
+ --color-background-brand-flow-contrast-default: #{$color-f-500};
304
+ --color-background-brand-flow-contrast-hovered: #{$color-f-400};
305
+ --color-background-brand-flow-contrast-pressed: #{$color-f-300};
306
+ --color-background-brand-flow-bold-default: #{$color-f-400};
307
+ --color-background-brand-flow-bold-hovered: #{$color-f-300};
308
+ --color-background-brand-flow-bold-pressed: #{$color-f-200};
309
+ --color-background-disabled: #{$color-nda-200};
310
+ --color-background-skeleton: #{$color-nda-200};
311
+ --color-background-bounding-box: #{$color-nda-0};
312
+ --color-background-selected-ask: #{$color-a-900};
313
+ --color-background-selected-flow: #{$color-f-900};
314
+ --color-background-alpha-subtlest-default: #{$color-nda-200};
315
+ --color-background-alpha-subtlest-hovered: #{$color-nda-400};
316
+ --color-background-alpha-subtlest-pressed: #{$color-nda-500};
317
+ --color-background-alpha-bolder-default: #{$color-nda-1600};
318
+ --color-background-alpha-bolder-hovered: #{$color-nda-1400};
319
+ --color-background-alpha-bolder-pressed: #{$color-nda-1200};
320
+ --color-background-alpha-contrast-default: #{$color-nda-1000};
321
+ --color-background-alpha-contrast-hovered: #{$color-nda-1200};
322
+ --color-background-alpha-contrast-pressed: #{$color-nda-1400};
323
+ --color-background-inverse-default: #{$color-nd-0};
324
+ --color-background-inverse-hovered: #{$color-nda-200};
325
+ --color-background-inverse-pressed: #{$color-nda-300};
326
+ --color-elevation-surface-sunken: #{$color-nd-100};
327
+ --color-elevation-surface-default: #{$color-nd-0};
328
+ --color-elevation-surface-hovered: #{$color-nd-300};
329
+ --color-elevation-surface-selected-ask: #{$color-a-1000};
330
+ --color-elevation-surface-selected-flow: #{$color-f-1000};
331
+ --color-elevation-surface-pressed: #{$color-nd-400};
332
+ --color-elevation-surface-raised: #{$color-nd-200};
333
+ --color-elevation-surface-overlay: #{$color-nd-200};
334
+ --color-divider-default: #{$color-nd-400};
335
335
 
336
+ --color-text-contrast: #{$color-nda-1500};
337
+ --color-text-subtlest: #{$color-nda-1000};
338
+ --color-text-disabled: #{$color-nda-700};
339
+ --color-text-inverse-contrast: #{$color-nd-0};
340
+ --color-skeleton: #{$color-nda-200};
341
+ --color-text-link-default: #{$color-b-500};
342
+ --color-background-accent-grey-subtle-default: #{$color-nd-500};
343
+ --color-border-matted-alpha-primary: #{$color-nd-0};
344
+ --color-elevation-surface-primary-default: #{$color-nd-100};
345
+ --color-icon-brand-asksuite-contrast: #{$color-a-600};
336
346
 
337
- --color-text-contrast: #{$color-nda-1500};
338
- --color-text-subtlest: #{$color-nda-1000};
339
- --color-text-disabled: #{$color-nda-700};
340
- --color-text-inverse-contrast: #{$color-nd-0};
341
- --color-skeleton: #{$color-nda-200};
342
- --color-text-link-default: #{$color-b-500};
343
- --color-background-accent-grey-subtle-default: #{$color-nd-500};
344
- --color-border-matted-alpha-primary: #{$color-nd-0};
345
- --color-elevation-surface-primary-default: #{$color-nd-100};
346
- --color-icon-brand-asksuite-contrast: #{$color-a-600};
347
+ --color-elevation-surface-sunken-hovered: #{$color-nd-100};
348
+ --color-elevation-surface-selected: #{$color-a-100};
349
+ --color-elevation-shadow-raised: #{$color-sda-700};
350
+ --color-elevation-shadow-overlay: #{$color-sda-200};
351
+ --color-elevation-shadow-base: #{$color-nd-500};
347
352
 
348
- --color-elevation-surface-sunken-hovered: #{$color-nd-100};
349
- --color-elevation-surface-selected: #{$color-a-100};
350
- --color-elevation-shadow-raised: #{$color-sda-700};
351
- --color-elevation-shadow-overlay: #{$color-sda-200};
352
- --color-elevation-shadow-base: #{$color-nd-500};
353
+ --color-background-accent-grey-bold-default: #{$color-background-accent-grey-bold-default};
354
+ --color-border-inverse-subtle: #{$color-border-inverse-subtle};
355
+ --color-background-accent-grey-subtler-hovered: #{$color-background-accent-grey-subtler-hovered};
356
+ --color-background-selected-ask: #{$color-o-900};
357
+ --color-border-subtle: #{$color-nda-1000};
358
+ --color-Y200: #{$color-Y200};
359
+ --color-background-selected-ask-default: #{$color-background-selected-ask-default};
360
+ --color-border-contrast: #{$color-nda-1200};
361
+ --color-background-accent-grey-subtler-default: #{$color-nd-400};
362
+ --color-message-area-scroll-gradient: #{$message-area-scroll-gradient};
363
+ --color-background-alpha-inverse-pressed: #{$color-nda-300};
353
364
 
354
- --color-background-accent-grey-bold-default: #{$color-background-accent-grey-bold-default};
355
- --color-border-inverse-subtle: #{$color-border-inverse-subtle};
356
- --color-background-accent-grey-subtler-hovered: #{$color-background-accent-grey-subtler-hovered};
357
- --color-background-selected-ask: #{$color-o-900};
358
- --color-border-subtle: #{$color-nda-1000};
359
- --color-Y200: #{$color-Y200};
360
- --color-background-selected-ask-default: #{$color-background-selected-ask-default};
361
- --color-border-contrast: #{$color-nda-1200};
362
- --color-background-accent-grey-subtler-default: #{$color-nd-400};
363
- --color-message-area-scroll-gradient: #{$message-area-scroll-gradient};
364
- --color-background-alpha-inverse-pressed: #{$color-nda-300};
365
- --color-background-accent-magenta-contrast-default: #{$color-m-500};
366
- --color-background-brand-asksuite-contrast-default: #{$color-a-500};
367
- --color-background-sophia-contrast-default: linear-gradient(90deg, var(--color-background-accent-magenta-contrast-default) 0%, var(--color-background-brand-asksuite-contrast-default) 100%);
365
+ --color-background-sophia-contrast-default: #{$color-background-brand-sophia-contrast-default};
366
+ --color-background-sophia-contrast-hovered: #{$color-background-brand-sophia-contrast-hovered};
367
+ --color-background-sophia-contrast-pressed: #{$color-background-brand-sophia-contrast-pressed};
368
+ --color-background-sophia-subtlest-default: #{$color-background-brand-sophia-subtlest-default};
369
+ --color-background-sophia-subtlest-hovered: #{$color-background-brand-sophia-subtlest-hovered};
370
+ --color-background-sophia-subtlest-pressed: #{$color-background-brand-sophia-subtlest-pressed};
371
+ --color-background-sophia-subtler-default: #{$color-background-brand-sophia-subtler-default};
372
+ --color-background-sophia-subtler-hovered: #{$color-background-brand-sophia-subtler-hovered};
373
+ --color-background-sophia-subtler-pressed: #{$color-background-brand-sophia-subtler-pressed};
374
+ --color-texticon-sophia-contrast: #{$color-texticon-brand-sophia-contrast};
375
+ --color-texticon-sophia-bold: #{$color-texticon-brand-sophia-bold};
376
+ --color-border-sophia-subtle: #{$color-border-brand-sophia-subtle};
377
+ --color-border-sophia-contrast: #{$color-border-brand-sophia-contrast};
378
+ --color-border-sophia-bold: #{$color-border-brand-sophia-bold};
379
+ --color-border-sophia-bolder: #{$color-border-brand-sophia-bolder};
368
380
  }