@preply/ds-web-core 0.66.2 → 0.67.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 (10) hide show
  1. package/dist/actions/style/mixins.less +9 -2
  2. package/dist/generated/breakpoints.less +1 -1
  3. package/dist/generated/options.less +49 -41
  4. package/dist/generated/tokens.less +245 -69
  5. package/dist/icon/types.d.ts +2 -2
  6. package/dist/theme/style/declarations.mixins.less +5 -0
  7. package/dist/typography/module-text-accent/hooks/useTextAccentClassnames.d.ts +1 -1
  8. package/dist/typography/module-text-accent/style/index.module.less.js +2 -2
  9. package/dist/typography/style/mixins.less +19 -0
  10. package/package.json +6 -6
package/dist/actions/style/mixins.less CHANGED
@@ -11,6 +11,7 @@
11
11
  .min-height('action', @token);
12
12
  .verticalAndHorizontalPadding('action', @token);
13
13
  .font-size('action', @token);
14
+ .letter-spacing('action', @token);
14
15
  }
15
16
 
16
17
  &--is-icon-button-size-@{value} {
@@ -32,13 +33,19 @@
32
33
  .border-color('action', @token);
33
34
  .text-decoration('action', @token);
34
35
 
35
- &:hover {
36
+ &:hover,&--dsInternalSimulation-hover {
36
37
  @token: 'variant-@{variant}-hover';
37
38
  .color('action', @token);
38
39
  .bg-color('action', @token);
39
40
  }
40
41
 
41
- &:active {
42
+ &[disabled],
43
+ &[disabled]:hover {
44
+ .border-color('action', '@{token}-disabled');
45
+ }
46
+
47
+
48
+ &:active,&--dsInternalSimulation-active {
42
49
  @token: 'variant-@{variant}-active';
43
50
  .color('action', @token);
44
51
  .bg-color('action', @token);
package/dist/generated/breakpoints.less CHANGED
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu Sep 14 2023 10:13:23 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Sep 19 2023 15:18:55 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @breakpoints: {
4
4
  narrow-l: 400px;
package/dist/generated/options.less CHANGED
@@ -1,51 +1,53 @@
1
- /* AUTO GENERATED @Thu Sep 14 2023 10:13:21 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Sep 19 2023 15:18:53 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
- @ACTION_VARIANT_ACTIVE_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain,
4
- dangerous, critical, onBrand, inverted;
5
- @ACTION_VARIANT_DISABLED_BG_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain,
6
- dangerous, critical, onBrand, inverted;
7
- @ACTION_VARIANT_DISABLED_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain,
8
- dangerous, critical, onBrand, inverted;
9
- @ACTION_VARIANT_DISABLED_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous,
10
- critical, onBrand, inverted;
11
- @ACTION_VARIANT_HOVER_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain,
12
- dangerous, critical, onBrand, inverted;
13
- @ACTION_VARIANT_TEXT_DECORATION_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous,
14
- critical, onBrand, inverted;
3
+ @ACTION_VARIANT_ACTIVE_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain,
4
+ dangerous, critical, onBrand, classroom, inverted, newFeature;
5
+ @ACTION_VARIANT_DISABLED_BG_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain,
6
+ dangerous, critical, onBrand, classroom, inverted, newFeature;
7
+ @ACTION_VARIANT_DISABLED_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, ghost,
8
+ plain, dangerous, critical, onBrand, classroom, inverted, newFeature;
9
+ @ACTION_VARIANT_DISABLED_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain,
10
+ dangerous, critical, onBrand, classroom, inverted, newFeature;
11
+ @ACTION_VARIANT_HOVER_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain,
12
+ dangerous, critical, onBrand, classroom, inverted, newFeature;
13
+ @ACTION_VARIANT_TEXT_DECORATION_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain,
14
+ dangerous, critical, onBrand, classroom, inverted, newFeature;
15
15
  @AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl, 24, 32, 48, 64, 96, 160;
16
16
  @BADGE_ACCENT_OPTIONS: accent, positive, critical, warning, info, tertiary;
17
17
  @BADGE_COLOR_OPTIONS: gray, teal, green, blue, yellow, red, magenta;
18
- @BADGE_SIZE_OPTIONS: xs, s, m, default;
18
+ @BADGE_SIZE_OPTIONS: xs, s, m;
19
19
  @BOX_PADDING_OPTIONS: none, 3xs, 2xs, xs, s, m, l, xl;
20
20
  @BOX_RADIUS_OPTIONS: none, m, l, 2, 4, 8, 0, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96, 160;
21
21
  @BUTTON_FONT_FAMILY_OPTIONS: large, default, medium, small;
22
22
  @BUTTON_FONT_SIZE_OPTIONS: large, medium, default, small;
23
23
  @BUTTON_FONT_WEIGHT_OPTIONS: large, medium, default, small;
24
- @BUTTON_HEIGHT_OPTIONS: large, medium, small;
25
- @BUTTON_HORIZONTAL_PADDING_OPTIONS: large, medium, small;
24
+ @BUTTON_HEIGHT_DS_INTERNAL_PRIMITIVE_OPTIONS: large, medium, small;
25
+ @BUTTON_HORIZONTAL_PADDING_DS_INTERNAL_PRIMITIVE_OPTIONS: large, medium, small;
26
26
  @BUTTON_LETTER_SPACING_OPTIONS: large, medium, default, small;
27
27
  @BUTTON_LINE_HEIGHT_OPTIONS: large, medium, default, small;
28
- @BUTTON_SIZE_OPTIONS: xs, s, m, l, xl;
29
- @BUTTON_VARIANT_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous, critical,
30
- onBrand, inverted;
31
- @BUTTON_VERTICAL_PADDING_OPTIONS: large, medium, small;
28
+ @BUTTON_SIZE_OPTIONS: xs, s, m, l, xl, large, medium, small;
29
+ @BUTTON_VARIANT_OPTIONS: primary, secondary, tertiary, quaternary, ghost, plain, dangerous, critical,
30
+ onBrand, classroom, inverted, newFeature;
31
+ @BUTTON_VERTICAL_PADDING_DS_INTERNAL_PRIMITIVE_OPTIONS: large, medium, small;
32
32
  @COLOR_BACKGROUND_OPTIONS: primary, secondary, tertiary, overlay, disabled, brand, accentLight,
33
33
  accentDark, positiveLight, positiveDark, infoLight, infoDark, warningLight, warningDark,
34
- criticalLight, criticalDark;
34
+ criticalLight, criticalDark, statusOnline, statusOffline, primaryInverted, secondaryInverted,
35
+ tertiaryInverted;
35
36
  @COLOR_BACKGROUND_ACTION_ACTIVE_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
36
- quaternary, critical, onBrand, inverted;
37
+ quaternary, ghost, critical, onBrand, classroom, inverted, newFeature;
37
38
  @COLOR_BACKGROUND_ACTION_HOVER_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
38
- quaternary, critical, onBrand, inverted;
39
+ quaternary, ghost, critical, onBrand, classroom, inverted, newFeature;
39
40
  @COLOR_BACKGROUND_ACTION_REST_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
40
- quaternary, critical, onBrand, inverted;
41
+ quaternary, ghost, critical, onBrand, classroom, inverted, newFeature;
41
42
  @COLOR_BLUE_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
42
- @COLOR_BORDER_OPTIONS: primary, secondary, focus, critical, tertiary, brand;
43
- @COLOR_BORDER_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary,
44
- critical, disabled, inverted;
43
+ @COLOR_BORDER_OPTIONS: primary, secondary, secondary-opacity, focus, critical, tertiary, brand,
44
+ disabled, positive;
45
+ @COLOR_BORDER_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary, ghost,
46
+ critical, disabled, inverted, classroom, newFeature;
45
47
  @COLOR_GREY_DS_INTERNAL_PRIMITIVE_OPTIONS: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900,
46
- 900-56, 900-6;
48
+ 900-56, 900-12, 900-6;
47
49
  @COLOR_GREY_OPACITY_DS_INTERNAL_PRIMITIVE_OPTIONS: 900-56;
48
- @COLOR_ICON_OPTIONS: primary, secondary, tertiary, positive, info, warning, critical, brand,
50
+ @COLOR_ICON_OPTIONS: primary, secondary, tertiary, positive, info, warning, critical, accentDark,
49
51
  inverted, disabled;
50
52
  @COLOR_NAME_OPTIONS: white, gray-100, gray-200, gray-300, gray-400, gray-500, gray-600, teal-100,
51
53
  teal-200, teal-300, teal-400, teal-500, green-100, green-200, green-300, green-400, green-500,
@@ -56,13 +58,15 @@
56
58
  @COLOR_RED_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
57
59
  @COLOR_SCHEME_OPTIONS: base, banner, invert;
58
60
  @COLOR_TEAL_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
59
- @COLOR_TEXT_OPTIONS: primary, secondary, tertiary, brand, accent, positive, info, warning, critical,
60
- inverted, branded, error, selected, disabled;
61
- @COLOR_TEXT_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary, critical,
62
- disabled, onBrand, inverted;
61
+ @COLOR_TEXT_OPTIONS: primary, secondary, tertiary, accentDark, placeholder, inverted, positive, info,
62
+ warning, critical, branded, error, selected, disabled, accent;
63
+ @COLOR_TEXT_ACTION_ACTIVE_DS_INTERNAL_PRIMITIVE_OPTIONS: classroom;
64
+ @COLOR_TEXT_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary, ghost,
65
+ critical, disabled, onBrand, classroom, inverted, newFeature;
63
66
  @COLOR_YELLOW_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
64
67
  @HEADING_LEVEL_OPTIONS: h1, h2, h3, h4, h5;
65
68
  @HEADING_TAG_OPTIONS: h1, h2, h3, h4, h5, p, div;
69
+ @HEADING_VARIANT_OPTIONS: huge, extraLarge, large, medium, small;
66
70
  @ICON_SIZE_OPTIONS: 2xs, xs, s, m, l;
67
71
  @LAYOUT_ALIGN_ITEMS_OPTIONS: center, start, end, stretch, baseline;
68
72
  @LAYOUT_ALIGN_SELF_OPTIONS: stretch, center, start, end;
@@ -80,15 +84,16 @@
80
84
  @LINK_TEXT_DECORATION_OPTIONS: large, default, small;
81
85
  @PANEL_PADDING_OPTIONS: small, base, medium, large;
82
86
  @PREPLY_LOGO_VARIANT_OPTIONS: default, monochrome, ua;
83
- @RADIUS_OPTIONS: 2, 4, 8, 300;
87
+ @RADIUS_OPTIONS: 0, 2, 4, 8, 300;
88
+ @SIZING_OPTIONS: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96, 160;
84
89
  @SPACING_OPTIONS: 0, 1, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96, 160;
85
90
  @SPINNER_SIZE_OPTIONS: default, large;
86
- @TEXT_ACCENT_OPTIONS: primary, secondary, tertiary, brand, accent, positive, info, warning, critical,
87
- inverted, branded, error, selected, disabled;
91
+ @TEXT_ACCENT_OPTIONS: primary, secondary, tertiary, accentDark, placeholder, inverted, positive,
92
+ info, warning, critical, disabled, branded, selected, error, accent;
88
93
  @TEXT_HEADING_FONT_FAMILY_OPTIONS: huge, extraLarge, large, medium, small;
89
94
  @TEXT_HEADING_FONT_SIZE_OPTIONS: huge, extraLarge, large, medium, small;
90
95
  @TEXT_HEADING_FONT_WEIGHT_OPTIONS: huge, extraLarge, large, medium, small;
91
- @TEXT_HEADING_LING_HEIGHT_OPTIONS: huge, extraLarge, large, medium, small;
96
+ @TEXT_HEADING_LINE_HEIGHT_OPTIONS: huge, extraLarge, large, medium, small;
92
97
  @TEXT_HIGHLIGHT_OPTIONS: blue, green, primary, secondary, tertiary, accent, positive, info, warning,
93
98
  critical;
94
99
  @TEXT_INLINE_TAG_OPTIONS: span, strong, em;
@@ -102,9 +107,12 @@
102
107
  @TEXT_SEMI_BOLD_BODY_LINE_HEIGHT_OPTIONS: large, default, small, caption;
103
108
  @TEXT_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
104
109
  @TEXT_TAG_OPTIONS: p, div, span;
105
- @TEXT_VARIANT_OPTIONS: xs, xs-medium, s, s-italic, s-medium, s-medium-italic, s-bold, s-bold-italic,
106
- m, m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, default, default-italic,
107
- default-medium, default-medium-italic, default-bold, default-bold-italic, l, l-italic, l-medium,
108
- l-medium-italic, xl, xl-italic, xl-medium, xl-medium-italic;
110
+ @TEXT_VARIANT_OPTIONS: caption-regular, caption-semibold, small-regular, small-regular-italic,
111
+ small-semibold, small-semibold-italic, default-regular, default-regular-italic, default-semibold,
112
+ default-semibold-italic, large-regular, large-regular-italic, large-semibold,
113
+ large-semibold-italic, xs, xs-medium, s, s-italic, s-medium, s-medium-italic, s-bold,
114
+ s-bold-italic, m, m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, l, l-italic,
115
+ l-medium, l-medium-italic, xl, xl-italic, xl-medium, xl-medium-italic;
109
116
  @TEXT_WEIGHT_OPTIONS: 400, 500, 700, normal, medium, bold;
110
117
  @THEME_OPTIONS: tokyo-ui, bold-ui, base-ui, preply-ui;
118
+ @TOKYO_UI_ICON_SIZE_OPTIONS: 16, 24, 32, 48;
package/dist/generated/tokens.less CHANGED
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu Sep 14 2023 10:13:21 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Tue Sep 19 2023 15:18:53 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @scheme-color: var(--aface6);
4
4
  @scheme-bgColor: var(--786b9e);
@@ -106,6 +106,8 @@
106
106
  @dsInternalPrimitive-color-background-criticalDark: var(--6f622b);
107
107
  @dsInternalPrimitive-color-background-overlay: var(--a63697);
108
108
  @dsInternalPrimitive-color-background-disabled: var(--8a41f5);
109
+ @dsInternalPrimitive-color-background-statusOnline: var(--b599a6);
110
+ @dsInternalPrimitive-color-background-statusOffline: var(--2c31d4);
109
111
  @content-primary-color: var(--e41135);
110
112
  @content-secondary-color: var(--3d280d);
111
113
  @content-branded-color: var(--4dadf3);
@@ -145,65 +147,86 @@
145
147
  @action-variant-secondary-color: var(--1614c9);
146
148
  @action-variant-tertiary-color: var(--937543);
147
149
  @action-variant-quaternary-color: var(--9cf6ec);
150
+ @action-variant-ghost-color: var(--255ddc);
148
151
  @action-variant-plain-color: var(--122a99);
149
152
  @action-variant-dangerous-color: var(--efde5b);
150
153
  @action-variant-critical-color: var(--f68030);
151
154
  @action-variant-onBrand-color: var(--81d1b3);
155
+ @action-variant-classroom-color: var(--8d482c);
152
156
  @action-variant-inverted-color: var(--81b7df);
157
+ @action-variant-newFeature-color: var(--ad44c3);
153
158
  @action-variant-primary-bgColor: var(--508b34);
154
159
  @action-variant-secondary-bgColor: var(--e56164);
155
160
  @action-variant-tertiary-bgColor: var(--28f3c1);
156
161
  @action-variant-quaternary-bgColor: var(--e46449);
162
+ @action-variant-ghost-bgColor: var(--64bffa);
157
163
  @action-variant-plain-bgColor: var(--bbb356);
158
164
  @action-variant-dangerous-bgColor: var(--118bda);
159
165
  @action-variant-critical-bgColor: var(--faae28);
160
166
  @action-variant-onBrand-bgColor: var(--f34057);
167
+ @action-variant-classroom-bgColor: var(--7a038f);
161
168
  @action-variant-inverted-bgColor: var(--c54155);
169
+ @action-variant-newFeature-bgColor: var(--7dbfce);
162
170
  @action-variant-primary-borderColor: var(--44bfe9);
163
171
  @action-variant-secondary-borderColor: var(--ab736c);
164
172
  @action-variant-tertiary-borderColor: var(--10556e);
165
173
  @action-variant-quaternary-borderColor: var(--0e9e01);
174
+ @action-variant-ghost-borderColor: var(--39e128);
166
175
  @action-variant-plain-borderColor: var(--0cad84);
167
176
  @action-variant-dangerous-borderColor: var(--ab5970);
168
177
  @action-variant-critical-borderColor: var(--b357d0);
169
178
  @action-variant-onBrand-borderColor: var(--27aa69);
179
+ @action-variant-classroom-borderColor: var(--38faba);
170
180
  @action-variant-inverted-borderColor: var(--fe1378);
181
+ @action-variant-newFeature-borderColor: var(--a7eddc);
171
182
  @action-variant-primary-hover-bgColor: var(--902b50);
172
183
  @action-variant-secondary-hover-bgColor: var(--0d124d);
173
184
  @action-variant-tertiary-hover-bgColor: var(--ec17be);
174
185
  @action-variant-quaternary-hover-bgColor: var(--afc176);
186
+ @action-variant-ghost-hover-bgColor: var(--3b749f);
175
187
  @action-variant-plain-hover-bgColor: var(--df2aca);
176
188
  @action-variant-dangerous-hover-bgColor: var(--e0b0f4);
177
189
  @action-variant-critical-hover-bgColor: var(--064c43);
178
190
  @action-variant-onBrand-hover-bgColor: var(--b510af);
191
+ @action-variant-classroom-hover-bgColor: var(--077a93);
179
192
  @action-variant-inverted-hover-bgColor: var(--8a16b5);
193
+ @action-variant-newFeature-hover-bgColor: var(--dd2815);
180
194
  @action-variant-primary-active-bgColor: var(--c1c1ca);
181
195
  @action-variant-secondary-active-bgColor: var(--33b439);
182
196
  @action-variant-tertiary-active-bgColor: var(--b0bf50);
183
197
  @action-variant-quaternary-active-bgColor: var(--2ee553);
198
+ @action-variant-ghost-active-bgColor: var(--6beb48);
184
199
  @action-variant-plain-active-bgColor: var(--435fa5);
185
200
  @action-variant-dangerous-active-bgColor: var(--a5eaa1);
186
201
  @action-variant-critical-active-bgColor: var(--152a7a);
187
202
  @action-variant-onBrand-active-bgColor: var(--dd9507);
203
+ @action-variant-classroom-active-bgColor: var(--45d93a);
188
204
  @action-variant-inverted-active-bgColor: var(--de59a1);
205
+ @action-variant-newFeature-active-bgColor: var(--b3e453);
189
206
  @action-variant-primary-hover-color: var(--df6151);
190
207
  @action-variant-secondary-hover-color: var(--0d6ae2);
191
208
  @action-variant-tertiary-hover-color: var(--175a77);
192
209
  @action-variant-quaternary-hover-color: var(--6609c6);
210
+ @action-variant-ghost-hover-color: var(--e69072);
193
211
  @action-variant-plain-hover-color: var(--1265db);
194
212
  @action-variant-dangerous-hover-color: var(--6f5d5d);
195
213
  @action-variant-critical-hover-color: var(--c3136e);
196
214
  @action-variant-onBrand-hover-color: var(--3bd8a5);
215
+ @action-variant-classroom-hover-color: var(--55bfda);
197
216
  @action-variant-inverted-hover-color: var(--79a09e);
217
+ @action-variant-newFeature-hover-color: var(--ddcea1);
198
218
  @action-variant-primary-active-color: var(--15cee1);
199
219
  @action-variant-secondary-active-color: var(--22cb4c);
200
220
  @action-variant-tertiary-active-color: var(--8274ee);
201
221
  @action-variant-quaternary-active-color: var(--e9f226);
222
+ @action-variant-ghost-active-color: var(--ddf285);
202
223
  @action-variant-plain-active-color: var(--a41624);
203
224
  @action-variant-dangerous-active-color: var(--6b4e92);
204
225
  @action-variant-critical-active-color: var(--f9fba8);
205
226
  @action-variant-onBrand-active-color: var(--37eefd);
227
+ @action-variant-classroom-active-color: var(--b62751);
206
228
  @action-variant-inverted-active-color: var(--77e945);
229
+ @action-variant-newFeature-active-color: var(--d4762b);
207
230
  @action-link-textDecoration: var(--f13872);
208
231
  @action-link-color: var(--1e7527);
209
232
  @action-link-hover-color: var(--7d7969);
@@ -213,21 +236,41 @@
213
236
  @action-size-m-height: var(--bcfcbc);
214
237
  @action-size-l-height: var(--26156f);
215
238
  @action-size-xl-height: var(--d6bfc9);
239
+ @action-size-large-height: var(--3d8452);
240
+ @action-size-medium-height: var(--c82a41);
241
+ @action-size-small-height: var(--5eca09);
216
242
  @action-size-xs-verticalPadding: var(--fec177);
217
243
  @action-size-s-verticalPadding: var(--9a5737);
218
244
  @action-size-m-verticalPadding: var(--3b9027);
219
245
  @action-size-l-verticalPadding: var(--303c6e);
220
246
  @action-size-xl-verticalPadding: var(--da1881);
247
+ @action-size-large-verticalPadding: var(--088917);
248
+ @action-size-medium-verticalPadding: var(--e1d8e9);
249
+ @action-size-small-verticalPadding: var(--da30a3);
221
250
  @action-size-xs-horizontalPadding: var(--29b033);
222
251
  @action-size-s-horizontalPadding: var(--65766b);
223
252
  @action-size-m-horizontalPadding: var(--0f2d7e);
224
253
  @action-size-l-horizontalPadding: var(--b1c76a);
225
254
  @action-size-xl-horizontalPadding: var(--88eefe);
255
+ @action-size-large-horizontalPadding: var(--79f043);
256
+ @action-size-medium-horizontalPadding: var(--aebd97);
257
+ @action-size-small-horizontalPadding: var(--d17b90);
226
258
  @action-size-xs-fontSize: var(--357dd0);
227
259
  @action-size-s-fontSize: var(--b47a67);
228
260
  @action-size-m-fontSize: var(--89a358);
229
261
  @action-size-l-fontSize: var(--a899be);
230
262
  @action-size-xl-fontSize: var(--f7be07);
263
+ @action-size-large-fontSize: var(--56d354);
264
+ @action-size-medium-fontSize: var(--c84e20);
265
+ @action-size-small-fontSize: var(--f20194);
266
+ @action-size-xs-letterSpacing: var(--027f88);
267
+ @action-size-s-letterSpacing: var(--fc5c61);
268
+ @action-size-m-letterSpacing: var(--2e1239);
269
+ @action-size-l-letterSpacing: var(--c04d5d);
270
+ @action-size-xl-letterSpacing: var(--a34be4);
271
+ @action-size-large-letterSpacing: var(--dc9bea);
272
+ @action-size-medium-letterSpacing: var(--ad1bd2);
273
+ @action-size-small-letterSpacing: var(--9663af);
231
274
  @avatar-base-borderRadius: var(--dad9ec);
232
275
  @avatar-base-borderWidth: var(--c4d145);
233
276
  @avatar-base-borderColor: var(--54e6b5);
@@ -250,11 +293,9 @@
250
293
  @badge-size-xs-verticalPadding: var(--8feee9);
251
294
  @badge-size-s-verticalPadding: var(--25e959);
252
295
  @badge-size-m-verticalPadding: var(--0d8aa3);
253
- @badge-size-default-verticalPadding: var(--3123ee);
254
296
  @badge-size-xs-horizontalPadding: var(--62f094);
255
297
  @badge-size-s-horizontalPadding: var(--796ab1);
256
298
  @badge-size-m-horizontalPadding: var(--3d1d33);
257
- @badge-size-default-horizontalPadding: var(--234e96);
258
299
  @badge-accent-accent-normal: var(--d69293);
259
300
  @badge-accent-positive-normal: var(--b76c1a);
260
301
  @badge-accent-critical-normal: var(--2e98a8);
@@ -291,6 +332,35 @@
291
332
  @icon-size-s-size: var(--7c1b1c);
292
333
  @icon-size-m-size: var(--2152b7);
293
334
  @icon-size-l-size: var(--8f525f);
335
+ @icon-size-16: var(--656bbc);
336
+ @icon-size-24: var(--81dc82);
337
+ @icon-size-32: var(--2a6452);
338
+ @icon-size-48: var(--03d2e4);
339
+ @heading-variant-huge-fontFamily: var(--4a9e2c);
340
+ @heading-variant-extraLarge-fontFamily: var(--27b01f);
341
+ @heading-variant-large-fontFamily: var(--933031);
342
+ @heading-variant-medium-fontFamily: var(--389c59);
343
+ @heading-variant-small-fontFamily: var(--22c5e1);
344
+ @heading-variant-huge-fontWeight: var(--b1d4f5);
345
+ @heading-variant-extraLarge-fontWeight: var(--26b05f);
346
+ @heading-variant-large-fontWeight: var(--be9403);
347
+ @heading-variant-medium-fontWeight: var(--6b93f9);
348
+ @heading-variant-small-fontWeight: var(--e1e6cd);
349
+ @heading-variant-huge-fontSize: var(--890dda);
350
+ @heading-variant-extraLarge-fontSize: var(--0728b9);
351
+ @heading-variant-large-fontSize: var(--5d91ee);
352
+ @heading-variant-medium-fontSize: var(--d4d05b);
353
+ @heading-variant-small-fontSize: var(--054730);
354
+ @heading-variant-huge-lineHeight: var(--a1602a);
355
+ @heading-variant-extraLarge-lineHeight: var(--aaf219);
356
+ @heading-variant-large-lineHeight: var(--ba6c7f);
357
+ @heading-variant-medium-lineHeight: var(--a7e8c0);
358
+ @heading-variant-small-lineHeight: var(--ced741);
359
+ @heading-variant-huge-letterSpacing: var(--65a2cd);
360
+ @heading-variant-extraLarge-letterSpacing: var(--ceac96);
361
+ @heading-variant-large-letterSpacing: var(--6408ce);
362
+ @heading-variant-medium-letterSpacing: var(--3e1763);
363
+ @heading-variant-small-letterSpacing: var(--b63a2b);
294
364
  @heading-level-h1-fontSize: var(--1801d5);
295
365
  @heading-level-h2-fontSize: var(--814fe0);
296
366
  @heading-level-h3-fontSize: var(--ace690);
@@ -371,6 +441,20 @@
371
441
  @text-size-m-fontSize: var(--081924);
372
442
  @text-size-l-fontSize: var(--da41aa);
373
443
  @text-size-xl-fontSize: var(--698b61);
444
+ @text-variant-caption-regular-fontSize: var(--d3e233);
445
+ @text-variant-caption-semibold-fontSize: var(--4df4f0);
446
+ @text-variant-small-regular-fontSize: var(--d4ea3f);
447
+ @text-variant-small-regular-italic-fontSize: var(--33b293);
448
+ @text-variant-small-semibold-fontSize: var(--97511e);
449
+ @text-variant-small-semibold-italic-fontSize: var(--16878a);
450
+ @text-variant-default-regular-fontSize: var(--7f027e);
451
+ @text-variant-default-regular-italic-fontSize: var(--58dc82);
452
+ @text-variant-default-semibold-fontSize: var(--8098ff);
453
+ @text-variant-default-semibold-italic-fontSize: var(--4f1e3c);
454
+ @text-variant-large-regular-fontSize: var(--3cfa3f);
455
+ @text-variant-large-regular-italic-fontSize: var(--3b44b6);
456
+ @text-variant-large-semibold-fontSize: var(--63f88d);
457
+ @text-variant-large-semibold-italic-fontSize: var(--4afac4);
374
458
  @text-variant-xs-fontSize: var(--4c9f68);
375
459
  @text-variant-xs-medium-fontSize: var(--547b8f);
376
460
  @text-variant-s-fontSize: var(--a7cfda);
@@ -385,12 +469,6 @@
385
469
  @text-variant-m-medium-italic-fontSize: var(--a9ad47);
386
470
  @text-variant-m-bold-fontSize: var(--29e813);
387
471
  @text-variant-m-bold-italic-fontSize: var(--741af5);
388
- @text-variant-default-fontSize: var(--cf200e);
389
- @text-variant-default-italic-fontSize: var(--093c8c);
390
- @text-variant-default-medium-fontSize: var(--9de4e2);
391
- @text-variant-default-medium-italic-fontSize: var(--250077);
392
- @text-variant-default-bold-fontSize: var(--b7343d);
393
- @text-variant-default-bold-italic-fontSize: var(--69d0c5);
394
472
  @text-variant-l-fontSize: var(--8d5beb);
395
473
  @text-variant-l-italic-fontSize: var(--feec74);
396
474
  @text-variant-l-medium-fontSize: var(--0bcae9);
@@ -399,6 +477,20 @@
399
477
  @text-variant-xl-italic-fontSize: var(--734b0c);
400
478
  @text-variant-xl-medium-fontSize: var(--19e13e);
401
479
  @text-variant-xl-medium-italic-fontSize: var(--88dc17);
480
+ @text-variant-caption-regular-fontWeight: var(--56c416);
481
+ @text-variant-caption-semibold-fontWeight: var(--756814);
482
+ @text-variant-small-regular-fontWeight: var(--c2057a);
483
+ @text-variant-small-regular-italic-fontWeight: var(--b38b97);
484
+ @text-variant-small-semibold-fontWeight: var(--fbec20);
485
+ @text-variant-small-semibold-italic-fontWeight: var(--9d502c);
486
+ @text-variant-default-regular-fontWeight: var(--59913e);
487
+ @text-variant-default-regular-italic-fontWeight: var(--55b888);
488
+ @text-variant-default-semibold-fontWeight: var(--a4fde7);
489
+ @text-variant-default-semibold-italic-fontWeight: var(--ea7bfd);
490
+ @text-variant-large-regular-fontWeight: var(--f9dbd7);
491
+ @text-variant-large-regular-italic-fontWeight: var(--500731);
492
+ @text-variant-large-semibold-fontWeight: var(--c7a8eb);
493
+ @text-variant-large-semibold-italic-fontWeight: var(--333137);
402
494
  @text-variant-xs-fontWeight: var(--71d69c);
403
495
  @text-variant-xs-medium-fontWeight: var(--86a200);
404
496
  @text-variant-s-fontWeight: var(--dc8b92);
@@ -413,12 +505,6 @@
413
505
  @text-variant-m-medium-italic-fontWeight: var(--faf5f3);
414
506
  @text-variant-m-bold-fontWeight: var(--18f8ed);
415
507
  @text-variant-m-bold-italic-fontWeight: var(--c521d5);
416
- @text-variant-default-fontWeight: var(--41a139);
417
- @text-variant-default-italic-fontWeight: var(--23992a);
418
- @text-variant-default-medium-fontWeight: var(--586bdc);
419
- @text-variant-default-medium-italic-fontWeight: var(--458c80);
420
- @text-variant-default-bold-fontWeight: var(--1c8534);
421
- @text-variant-default-bold-italic-fontWeight: var(--657d9b);
422
508
  @text-variant-l-fontWeight: var(--0776b9);
423
509
  @text-variant-l-italic-fontWeight: var(--6e4501);
424
510
  @text-variant-l-medium-fontWeight: var(--149f7d);
@@ -427,6 +513,20 @@
427
513
  @text-variant-xl-italic-fontWeight: var(--0baf26);
428
514
  @text-variant-xl-medium-fontWeight: var(--6455e5);
429
515
  @text-variant-xl-medium-italic-fontWeight: var(--cc6f61);
516
+ @text-variant-caption-regular-lineHeight: var(--bc6f38);
517
+ @text-variant-caption-semibold-lineHeight: var(--f8ebff);
518
+ @text-variant-small-regular-lineHeight: var(--ff8dfa);
519
+ @text-variant-small-regular-italic-lineHeight: var(--5f3bbf);
520
+ @text-variant-small-semibold-lineHeight: var(--a8f0e2);
521
+ @text-variant-small-semibold-italic-lineHeight: var(--bd5dd5);
522
+ @text-variant-default-regular-lineHeight: var(--11f5c9);
523
+ @text-variant-default-regular-italic-lineHeight: var(--d59274);
524
+ @text-variant-default-semibold-lineHeight: var(--2285fa);
525
+ @text-variant-default-semibold-italic-lineHeight: var(--f70f04);
526
+ @text-variant-large-regular-lineHeight: var(--206b00);
527
+ @text-variant-large-regular-italic-lineHeight: var(--c18960);
528
+ @text-variant-large-semibold-lineHeight: var(--942b2f);
529
+ @text-variant-large-semibold-italic-lineHeight: var(--ae63b1);
430
530
  @text-variant-xs-lineHeight: var(--543571);
431
531
  @text-variant-xs-medium-lineHeight: var(--e7e648);
432
532
  @text-variant-s-lineHeight: var(--c552e7);
@@ -441,12 +541,6 @@
441
541
  @text-variant-m-medium-italic-lineHeight: var(--3bd2e0);
442
542
  @text-variant-m-bold-lineHeight: var(--3d432c);
443
543
  @text-variant-m-bold-italic-lineHeight: var(--c47e7f);
444
- @text-variant-default-lineHeight: var(--49ced0);
445
- @text-variant-default-italic-lineHeight: var(--f030b5);
446
- @text-variant-default-medium-lineHeight: var(--781b72);
447
- @text-variant-default-medium-italic-lineHeight: var(--243a5c);
448
- @text-variant-default-bold-lineHeight: var(--d62442);
449
- @text-variant-default-bold-italic-lineHeight: var(--3a69c1);
450
544
  @text-variant-l-lineHeight: var(--1cd7aa);
451
545
  @text-variant-l-italic-lineHeight: var(--1056e0);
452
546
  @text-variant-l-medium-lineHeight: var(--02fee9);
@@ -455,6 +549,20 @@
455
549
  @text-variant-xl-italic-lineHeight: var(--e84231);
456
550
  @text-variant-xl-medium-lineHeight: var(--85e4ac);
457
551
  @text-variant-xl-medium-italic-lineHeight: var(--904c1e);
552
+ @text-variant-caption-regular-letterSpacing: var(--be8c45);
553
+ @text-variant-caption-semibold-letterSpacing: var(--03e2b6);
554
+ @text-variant-small-regular-letterSpacing: var(--cdd9f4);
555
+ @text-variant-small-regular-italic-letterSpacing: var(--40ba00);
556
+ @text-variant-small-semibold-letterSpacing: var(--a566de);
557
+ @text-variant-small-semibold-italic-letterSpacing: var(--ca673a);
558
+ @text-variant-default-regular-letterSpacing: var(--b2e406);
559
+ @text-variant-default-regular-italic-letterSpacing: var(--40d520);
560
+ @text-variant-default-semibold-letterSpacing: var(--95d383);
561
+ @text-variant-default-semibold-italic-letterSpacing: var(--f69e59);
562
+ @text-variant-large-regular-letterSpacing: var(--2585de);
563
+ @text-variant-large-regular-italic-letterSpacing: var(--e4d866);
564
+ @text-variant-large-semibold-letterSpacing: var(--5b62c3);
565
+ @text-variant-large-semibold-italic-letterSpacing: var(--64a0ba);
458
566
  @text-variant-xs-letterSpacing: var(--29af86);
459
567
  @text-variant-xs-medium-letterSpacing: var(--d7a1ad);
460
568
  @text-variant-s-letterSpacing: var(--4d1d51);
@@ -469,12 +577,6 @@
469
577
  @text-variant-m-medium-italic-letterSpacing: var(--fe4b24);
470
578
  @text-variant-m-bold-letterSpacing: var(--6e9f29);
471
579
  @text-variant-m-bold-italic-letterSpacing: var(--2e489a);
472
- @text-variant-default-letterSpacing: var(--b83052);
473
- @text-variant-default-italic-letterSpacing: var(--90d05d);
474
- @text-variant-default-medium-letterSpacing: var(--eae74e);
475
- @text-variant-default-medium-italic-letterSpacing: var(--e2530a);
476
- @text-variant-default-bold-letterSpacing: var(--945343);
477
- @text-variant-default-bold-italic-letterSpacing: var(--942f2f);
478
580
  @text-variant-l-letterSpacing: var(--b5b330);
479
581
  @text-variant-l-italic-letterSpacing: var(--421c23);
480
582
  @text-variant-l-medium-letterSpacing: var(--11ba2e);
@@ -483,6 +585,20 @@
483
585
  @text-variant-xl-italic-letterSpacing: var(--c9c193);
484
586
  @text-variant-xl-medium-letterSpacing: var(--e76960);
485
587
  @text-variant-xl-medium-italic-letterSpacing: var(--cf0e2c);
588
+ @text-variant-caption-regular-fontStyle: var(--ba54c4);
589
+ @text-variant-caption-semibold-fontStyle: var(--782782);
590
+ @text-variant-small-regular-fontStyle: var(--8dee8a);
591
+ @text-variant-small-regular-italic-fontStyle: var(--02d236);
592
+ @text-variant-small-semibold-fontStyle: var(--92feb8);
593
+ @text-variant-small-semibold-italic-fontStyle: var(--7cc250);
594
+ @text-variant-default-regular-fontStyle: var(--61e1de);
595
+ @text-variant-default-regular-italic-fontStyle: var(--b09e9d);
596
+ @text-variant-default-semibold-fontStyle: var(--82c3d5);
597
+ @text-variant-default-semibold-italic-fontStyle: var(--dd40d0);
598
+ @text-variant-large-regular-fontStyle: var(--1952bb);
599
+ @text-variant-large-regular-italic-fontStyle: var(--bed3e0);
600
+ @text-variant-large-semibold-fontStyle: var(--9c1713);
601
+ @text-variant-large-semibold-italic-fontStyle: var(--ec8789);
486
602
  @text-variant-xs-fontStyle: var(--647b4d);
487
603
  @text-variant-xs-medium-fontStyle: var(--abe371);
488
604
  @text-variant-s-fontStyle: var(--b8dd4e);
@@ -497,12 +613,6 @@
497
613
  @text-variant-m-medium-italic-fontStyle: var(--a19ae7);
498
614
  @text-variant-m-bold-fontStyle: var(--f02b45);
499
615
  @text-variant-m-bold-italic-fontStyle: var(--8c5771);
500
- @text-variant-default-fontStyle: var(--269d55);
501
- @text-variant-default-italic-fontStyle: var(--10895e);
502
- @text-variant-default-medium-fontStyle: var(--aeb144);
503
- @text-variant-default-medium-italic-fontStyle: var(--a891c5);
504
- @text-variant-default-bold-fontStyle: var(--a2bf27);
505
- @text-variant-default-bold-italic-fontStyle: var(--ee473a);
506
616
  @text-variant-l-fontStyle: var(--af51c3);
507
617
  @text-variant-l-italic-fontStyle: var(--2adf67);
508
618
  @text-variant-l-medium-fontStyle: var(--03e30a);
@@ -511,6 +621,20 @@
511
621
  @text-variant-xl-italic-fontStyle: var(--0b0b05);
512
622
  @text-variant-xl-medium-fontStyle: var(--0a5e67);
513
623
  @text-variant-xl-medium-italic-fontStyle: var(--6fc949);
624
+ @text-variant-caption-regular-variationSettings: var(--1f00e7);
625
+ @text-variant-caption-semibold-variationSettings: var(--a1e375);
626
+ @text-variant-small-regular-variationSettings: var(--51eeea);
627
+ @text-variant-small-regular-italic-variationSettings: var(--4c48ba);
628
+ @text-variant-small-semibold-variationSettings: var(--a1201a);
629
+ @text-variant-small-semibold-italic-variationSettings: var(--f7661a);
630
+ @text-variant-default-regular-variationSettings: var(--2d95ca);
631
+ @text-variant-default-regular-italic-variationSettings: var(--7dfa2c);
632
+ @text-variant-default-semibold-variationSettings: var(--51956c);
633
+ @text-variant-default-semibold-italic-variationSettings: var(--19883f);
634
+ @text-variant-large-regular-variationSettings: var(--0b4502);
635
+ @text-variant-large-regular-italic-variationSettings: var(--a4194d);
636
+ @text-variant-large-semibold-variationSettings: var(--42348d);
637
+ @text-variant-large-semibold-italic-variationSettings: var(--f43b0b);
514
638
  @text-variant-xs-variationSettings: var(--afe759);
515
639
  @text-variant-xs-medium-variationSettings: var(--f65ebc);
516
640
  @text-variant-s-variationSettings: var(--93fedc);
@@ -525,12 +649,6 @@
525
649
  @text-variant-m-medium-italic-variationSettings: var(--858246);
526
650
  @text-variant-m-bold-variationSettings: var(--483ad1);
527
651
  @text-variant-m-bold-italic-variationSettings: var(--00e7e3);
528
- @text-variant-default-variationSettings: var(--0ae60f);
529
- @text-variant-default-italic-variationSettings: var(--3ca8a1);
530
- @text-variant-default-medium-variationSettings: var(--64a62f);
531
- @text-variant-default-medium-italic-variationSettings: var(--b33279);
532
- @text-variant-default-bold-variationSettings: var(--def86b);
533
- @text-variant-default-bold-italic-variationSettings: var(--319ea3);
534
652
  @text-variant-l-variationSettings: var(--0f6434);
535
653
  @text-variant-l-italic-variationSettings: var(--da82d0);
536
654
  @text-variant-l-medium-variationSettings: var(--42f863);
@@ -589,6 +707,7 @@
589
707
  @dsInternalPrimitive-color-grey-800: var(--6bf658);
590
708
  @dsInternalPrimitive-color-grey-900: var(--4cafda);
591
709
  @dsInternalPrimitive-color-grey-900-56: var(--b445b1);
710
+ @dsInternalPrimitive-color-grey-900-12: var(--7e1290);
592
711
  @dsInternalPrimitive-color-grey-900-6: var(--12d28a);
593
712
  @dsInternalPrimitive-color-pink-50: var(--7cff10);
594
713
  @dsInternalPrimitive-color-pink-100: var(--a3fc38);
@@ -638,17 +757,18 @@
638
757
  @color-text-primary: var(--628fb7);
639
758
  @color-text-secondary: var(--a2f1c8);
640
759
  @color-text-tertiary: var(--c07ea8);
641
- @color-text-brand: var(--0ee7cb);
642
- @color-text-accent: var(--26a5ae);
760
+ @color-text-accentDark: var(--690731);
761
+ @color-text-placeholder: var(--0bad98);
762
+ @color-text-inverted: var(--c2b191);
643
763
  @color-text-positive: var(--3e566f);
644
764
  @color-text-info: var(--aad149);
645
765
  @color-text-warning: var(--d7c974);
646
766
  @color-text-critical: var(--8ec9e5);
647
- @color-text-inverted: var(--c2b191);
648
767
  @color-text-branded: var(--7b5d23);
649
768
  @color-text-error: var(--9809d0);
650
769
  @color-text-selected: var(--9ba3b8);
651
770
  @color-text-disabled: var(--0a84f6);
771
+ @color-text-accent: var(--26a5ae);
652
772
  @color-icon-primary: var(--95b129);
653
773
  @color-icon-secondary: var(--a987e0);
654
774
  @color-icon-tertiary: var(--684972);
@@ -656,7 +776,7 @@
656
776
  @color-icon-info: var(--adb50a);
657
777
  @color-icon-warning: var(--38e02f);
658
778
  @color-icon-critical: var(--dc4541);
659
- @color-icon-brand: var(--254659);
779
+ @color-icon-accentDark: var(--d74a90);
660
780
  @color-icon-inverted: var(--e6a034);
661
781
  @color-icon-disabled: var(--12f66e);
662
782
  @color-background-primary: var(--3546c3);
@@ -675,61 +795,85 @@
675
795
  @color-background-warningDark: var(--34fc43);
676
796
  @color-background-criticalLight: var(--f15644);
677
797
  @color-background-criticalDark: var(--87fcf8);
798
+ @color-background-statusOnline: var(--cbc115);
799
+ @color-background-statusOffline: var(--7ff085);
800
+ @color-background-primaryInverted: var(--4983fe);
801
+ @color-background-secondaryInverted: var(--19649f);
802
+ @color-background-tertiaryInverted: var(--a469f2);
678
803
  @color-border-primary: var(--c03289);
679
804
  @color-border-secondary: var(--11d206);
805
+ @color-border-secondary-opacity: var(--6e162c);
680
806
  @color-border-focus: var(--5b4fe9);
681
807
  @color-border-critical: var(--a44465);
682
808
  @color-border-tertiary: var(--fede46);
683
809
  @color-border-brand: var(--4bc397);
810
+ @color-border-disabled: var(--1b76a1);
811
+ @color-border-positive: var(--725aa0);
684
812
  @color-field-userInput: var(--84f78b);
685
813
  @dsInternalPrimitive-color-text-primary-action: var(--411986);
686
814
  @dsInternalPrimitive-color-text-secondary-action: var(--347274);
687
815
  @dsInternalPrimitive-color-text-tertiary-action: var(--3485b3);
688
816
  @dsInternalPrimitive-color-text-quaternary-action: var(--826199);
817
+ @dsInternalPrimitive-color-text-ghost-action: var(--6045b5);
689
818
  @dsInternalPrimitive-color-text-critical-action: var(--57195c);
690
819
  @dsInternalPrimitive-color-text-disabled-action: var(--7f32d7);
691
820
  @dsInternalPrimitive-color-text-onBrand-action: var(--24b2f7);
821
+ @dsInternalPrimitive-color-text-classroom-action: var(--27aa3b);
692
822
  @dsInternalPrimitive-color-text-inverted-action: var(--250d1b);
823
+ @dsInternalPrimitive-color-text-newFeature-action: var(--4aaaef);
824
+ @dsInternalPrimitive-color-text-classroom-action-active: var(--b0329e);
693
825
  @dsInternalPrimitive-color-text-primary-action-active: var(--480cdf);
694
826
  @dsInternalPrimitive-color-background-primary-action-rest: var(--cf27db);
695
827
  @dsInternalPrimitive-color-background-secondary-action-rest: var(--ae8a27);
696
828
  @dsInternalPrimitive-color-background-tertiary-action-rest: var(--83c38a);
697
829
  @dsInternalPrimitive-color-background-quaternary-action-rest: var(--a8903a);
830
+ @dsInternalPrimitive-color-background-ghost-action-rest: var(--1147e4);
698
831
  @dsInternalPrimitive-color-background-critical-action-rest: var(--f99bbd);
699
832
  @dsInternalPrimitive-color-background-onBrand-action-rest: var(--701770);
833
+ @dsInternalPrimitive-color-background-classroom-action-rest: var(--8c3891);
700
834
  @dsInternalPrimitive-color-background-inverted-action-rest: var(--63afb0);
835
+ @dsInternalPrimitive-color-background-newFeature-action-rest: var(--754e2b);
701
836
  @dsInternalPrimitive-color-background-primary-action-hover: var(--3d8e0b);
702
837
  @dsInternalPrimitive-color-background-secondary-action-hover: var(--92d63b);
703
838
  @dsInternalPrimitive-color-background-tertiary-action-hover: var(--4d016b);
704
839
  @dsInternalPrimitive-color-background-quaternary-action-hover: var(--77f2f6);
840
+ @dsInternalPrimitive-color-background-ghost-action-hover: var(--9aaafa);
705
841
  @dsInternalPrimitive-color-background-critical-action-hover: var(--5cd326);
706
842
  @dsInternalPrimitive-color-background-onBrand-action-hover: var(--26ae6b);
843
+ @dsInternalPrimitive-color-background-classroom-action-hover: var(--173f0d);
707
844
  @dsInternalPrimitive-color-background-inverted-action-hover: var(--4df5c9);
845
+ @dsInternalPrimitive-color-background-newFeature-action-hover: var(--d8c7e0);
708
846
  @dsInternalPrimitive-color-background-primary-action-active: var(--5cd9cc);
709
847
  @dsInternalPrimitive-color-background-secondary-action-active: var(--5a73d2);
710
848
  @dsInternalPrimitive-color-background-tertiary-action-active: var(--7b2a72);
711
849
  @dsInternalPrimitive-color-background-quaternary-action-active: var(--391000);
850
+ @dsInternalPrimitive-color-background-ghost-action-active: var(--39f6f6);
712
851
  @dsInternalPrimitive-color-background-critical-action-active: var(--bd5da9);
713
852
  @dsInternalPrimitive-color-background-onBrand-action-active: var(--d72dd5);
853
+ @dsInternalPrimitive-color-background-classroom-action-active: var(--003ddf);
714
854
  @dsInternalPrimitive-color-background-inverted-action-active: var(--5e5ef1);
855
+ @dsInternalPrimitive-color-background-newFeature-action-active: var(--3b4318);
715
856
  @dsInternalPrimitive-color-background-disabled-action: var(--65f18f);
716
857
  @dsInternalPrimitive-color-border-primary-action: var(--9637ca);
717
858
  @dsInternalPrimitive-color-border-secondary-action: var(--ac18ee);
718
859
  @dsInternalPrimitive-color-border-tertiary-action: var(--1b2716);
719
860
  @dsInternalPrimitive-color-border-quaternary-action: var(--c324de);
861
+ @dsInternalPrimitive-color-border-ghost-action: var(--d8d4a0);
720
862
  @dsInternalPrimitive-color-border-critical-action: var(--a0106b);
721
863
  @dsInternalPrimitive-color-border-disabled-action: var(--d4d142);
722
864
  @dsInternalPrimitive-color-border-inverted-action: var(--bfac34);
865
+ @dsInternalPrimitive-color-border-classroom-action: var(--9b0207);
866
+ @dsInternalPrimitive-color-border-newFeature-action: var(--0831da);
723
867
  @dsInternalPrimitive-color-border-tertiary-action-hover: var(--5a42a7);
724
868
  @text-heading-huge-fontFamily: var(--ccb2e6);
725
869
  @text-heading-extraLarge-fontFamily: var(--796c06);
726
870
  @text-heading-large-fontFamily: var(--8b3362);
727
871
  @text-heading-medium-fontFamily: var(--675ebe);
728
872
  @text-heading-small-fontFamily: var(--755d9c);
729
- @text-large-semiBold-body-fontFamily: var(--ac4ef9);
730
- @text-default-semiBold-body-fontFamily: var(--405ea3);
731
- @text-small-semiBold-body-fontFamily: var(--ee423a);
732
- @text-caption-semiBold-body-fontFamily: var(--ae6af5);
873
+ @text-large-semibold-body-fontFamily: var(--879f99);
874
+ @text-default-semibold-body-fontFamily: var(--8ac7e2);
875
+ @text-small-semibold-body-fontFamily: var(--22f891);
876
+ @text-caption-semibold-body-fontFamily: var(--b81b11);
733
877
  @text-large-regular-body-fontFamily: var(--c7aad7);
734
878
  @text-default-regular-body-fontFamily: var(--78b5e3);
735
879
  @text-small-regular-body-fontFamily: var(--897342);
@@ -746,10 +890,10 @@
746
890
  @text-heading-large-fontWeight: var(--89b95f);
747
891
  @text-heading-medium-fontWeight: var(--39a2b3);
748
892
  @text-heading-small-fontWeight: var(--1d1a85);
749
- @text-large-semiBold-body-fontWeight: var(--308763);
750
- @text-default-semiBold-body-fontWeight: var(--68787e);
751
- @text-small-semiBold-body-fontWeight: var(--e2162f);
752
- @text-caption-semiBold-body-fontWeight: var(--692fad);
893
+ @text-large-semibold-body-fontWeight: var(--17e721);
894
+ @text-default-semibold-body-fontWeight: var(--a3f251);
895
+ @text-small-semibold-body-fontWeight: var(--9643c1);
896
+ @text-caption-semibold-body-fontWeight: var(--8cd94c);
753
897
  @text-large-regular-body-fontWeight: var(--972c8b);
754
898
  @text-default-regular-body-fontWeight: var(--1bc44d);
755
899
  @text-small-regular-body-fontWeight: var(--87a7e3);
@@ -766,10 +910,10 @@
766
910
  @text-heading-large-fontSize: var(--4b4360);
767
911
  @text-heading-medium-fontSize: var(--f8fa20);
768
912
  @text-heading-small-fontSize: var(--bdd851);
769
- @text-large-semiBold-body-fontSize: var(--723005);
770
- @text-default-semiBold-body-fontSize: var(--d12826);
771
- @text-small-semiBold-body-fontSize: var(--2f5384);
772
- @text-caption-semiBold-body-fontSize: var(--412219);
913
+ @text-large-semibold-body-fontSize: var(--d48fc4);
914
+ @text-default-semibold-body-fontSize: var(--475c79);
915
+ @text-small-semibold-body-fontSize: var(--fdb733);
916
+ @text-caption-semibold-body-fontSize: var(--e3a55b);
773
917
  @text-large-regular-body-fontSize: var(--41f57b);
774
918
  @text-default-regular-body-fontSize: var(--9c8f04);
775
919
  @text-small-regular-body-fontSize: var(--f7d879);
@@ -786,10 +930,10 @@
786
930
  @text-heading-large-lineHeight: var(--59d312);
787
931
  @text-heading-medium-lineHeight: var(--8a818f);
788
932
  @text-heading-small-lineHeight: var(--2ca391);
789
- @text-large-semiBold-body-lineHeight: var(--c8a78b);
790
- @text-default-semiBold-body-lineHeight: var(--022bb1);
791
- @text-small-semiBold-body-lineHeight: var(--21e8cb);
792
- @text-caption-semiBold-body-lineHeight: var(--8daece);
933
+ @text-large-semibold-body-lineHeight: var(--3e10b3);
934
+ @text-default-semibold-body-lineHeight: var(--e33d9e);
935
+ @text-small-semibold-body-lineHeight: var(--754361);
936
+ @text-caption-semibold-body-lineHeight: var(--732f40);
793
937
  @text-large-regular-body-lineHeight: var(--c621fc);
794
938
  @text-default-regular-body-lineHeight: var(--3dd5bc);
795
939
  @text-small-regular-body-lineHeight: var(--1cb31f);
@@ -801,16 +945,16 @@
801
945
  @button-medium-lineHeight: var(--7e6bed);
802
946
  @button-default-lineHeight: var(--a4f1d9);
803
947
  @button-small-lineHeight: var(--6e1c88);
804
- @button-large-height: var(--44d331);
805
- @button-medium-height: var(--306622);
806
- @button-small-height: var(--456e3e);
807
- @button-borderWeight: var(--9d1df1);
808
- @button-large-verticalPadding: var(--a65024);
809
- @button-medium-verticalPadding: var(--be2dc3);
810
- @button-small-verticalPadding: var(--666bff);
811
- @button-large-horizontalPadding: var(--12e54f);
812
- @button-medium-horizontalPadding: var(--9d50a9);
813
- @button-small-horizontalPadding: var(--61ea28);
948
+ @dsInternalPrimitive-button-large-height: var(--099715);
949
+ @dsInternalPrimitive-button-medium-height: var(--f462c6);
950
+ @dsInternalPrimitive-button-small-height: var(--132408);
951
+ @dsInternalPrimitive-button-borderWeight: var(--a56722);
952
+ @dsInternalPrimitive-button-large-verticalPadding: var(--54d505);
953
+ @dsInternalPrimitive-button-medium-verticalPadding: var(--042d7a);
954
+ @dsInternalPrimitive-button-small-verticalPadding: var(--ec1249);
955
+ @dsInternalPrimitive-button-large-horizontalPadding: var(--8eaeb1);
956
+ @dsInternalPrimitive-button-medium-horizontalPadding: var(--79559d);
957
+ @dsInternalPrimitive-button-small-horizontalPadding: var(--b190c9);
814
958
  @button-large-letterSpacing: var(--894bd7);
815
959
  @button-medium-letterSpacing: var(--cf9a36);
816
960
  @button-default-letterSpacing: var(--abb4c9);
@@ -828,6 +972,20 @@
828
972
  @spacing-64: var(--42fccf);
829
973
  @spacing-96: var(--d2f1e9);
830
974
  @spacing-160: var(--d42f82);
975
+ @sizing-0: var(--15ac89);
976
+ @sizing-1: var(--f3fdd6);
977
+ @sizing-2: var(--26b8e3);
978
+ @sizing-4: var(--53860b);
979
+ @sizing-8: var(--c484d1);
980
+ @sizing-12: var(--10649b);
981
+ @sizing-16: var(--9866ee);
982
+ @sizing-24: var(--f316e1);
983
+ @sizing-32: var(--7789ee);
984
+ @sizing-48: var(--51a539);
985
+ @sizing-64: var(--4c51a9);
986
+ @sizing-96: var(--9fa3b4);
987
+ @sizing-160: var(--f0bc49);
988
+ @radius-0: var(--565b6d);
831
989
  @radius-2: var(--e38d71);
832
990
  @radius-4: var(--5e8be4);
833
991
  @radius-8: var(--fa4b1a);
@@ -839,56 +997,74 @@
839
997
  @action-variant-secondary-textDecoration: var(--c6c73d);
840
998
  @action-variant-tertiary-textDecoration: var(--ce0e6a);
841
999
  @action-variant-quaternary-textDecoration: var(--5c0a2f);
1000
+ @action-variant-ghost-textDecoration: var(--31d455);
842
1001
  @action-variant-plain-textDecoration: var(--d2d32f);
843
1002
  @action-variant-dangerous-textDecoration: var(--0bf14c);
844
1003
  @action-variant-critical-textDecoration: var(--91f4fa);
845
1004
  @action-variant-onBrand-textDecoration: var(--2aca00);
1005
+ @action-variant-classroom-textDecoration: var(--4d5ea8);
846
1006
  @action-variant-inverted-textDecoration: var(--fb8624);
1007
+ @action-variant-newFeature-textDecoration: var(--fd7ece);
847
1008
  @action-variant-primary-hover-borderColor: var(--1e9600);
848
1009
  @action-variant-secondary-hover-borderColor: var(--76310d);
849
1010
  @action-variant-tertiary-hover-borderColor: var(--bdfcc7);
850
1011
  @action-variant-quaternary-hover-borderColor: var(--51977c);
1012
+ @action-variant-ghost-hover-borderColor: var(--04cdaf);
851
1013
  @action-variant-plain-hover-borderColor: var(--082540);
852
1014
  @action-variant-dangerous-hover-borderColor: var(--4eff94);
853
1015
  @action-variant-critical-hover-borderColor: var(--958f21);
854
1016
  @action-variant-onBrand-hover-borderColor: var(--ffb8d8);
1017
+ @action-variant-classroom-hover-borderColor: var(--4a0597);
855
1018
  @action-variant-inverted-hover-borderColor: var(--19fa74);
1019
+ @action-variant-newFeature-hover-borderColor: var(--98c0df);
856
1020
  @action-variant-primary-active-borderColor: var(--9ddbb2);
857
1021
  @action-variant-secondary-active-borderColor: var(--9b7461);
858
1022
  @action-variant-tertiary-active-borderColor: var(--dca6dc);
859
1023
  @action-variant-quaternary-active-borderColor: var(--caac97);
1024
+ @action-variant-ghost-active-borderColor: var(--64fa43);
860
1025
  @action-variant-plain-active-borderColor: var(--370fd8);
861
1026
  @action-variant-dangerous-active-borderColor: var(--4c7bfb);
862
1027
  @action-variant-critical-active-borderColor: var(--fb2597);
863
1028
  @action-variant-onBrand-active-borderColor: var(--81c178);
1029
+ @action-variant-classroom-active-borderColor: var(--8307ea);
864
1030
  @action-variant-inverted-active-borderColor: var(--0d330c);
1031
+ @action-variant-newFeature-active-borderColor: var(--76758a);
865
1032
  @action-variant-primary-disabled-borderColor: var(--f0720e);
866
1033
  @action-variant-secondary-disabled-borderColor: var(--3f0f51);
867
1034
  @action-variant-tertiary-disabled-borderColor: var(--fd08b7);
868
1035
  @action-variant-quaternary-disabled-borderColor: var(--3e2684);
1036
+ @action-variant-ghost-disabled-borderColor: var(--af2d26);
869
1037
  @action-variant-plain-disabled-borderColor: var(--c6b607);
870
1038
  @action-variant-dangerous-disabled-borderColor: var(--7deffa);
871
1039
  @action-variant-critical-disabled-borderColor: var(--e117c7);
872
1040
  @action-variant-onBrand-disabled-borderColor: var(--5a20e5);
1041
+ @action-variant-classroom-disabled-borderColor: var(--659377);
873
1042
  @action-variant-inverted-disabled-borderColor: var(--e797f1);
1043
+ @action-variant-newFeature-disabled-borderColor: var(--7d2338);
874
1044
  @action-variant-primary-disabled-color: var(--dfbd08);
875
1045
  @action-variant-secondary-disabled-color: var(--4dc516);
876
1046
  @action-variant-tertiary-disabled-color: var(--161e2d);
877
1047
  @action-variant-quaternary-disabled-color: var(--c2913b);
1048
+ @action-variant-ghost-disabled-color: var(--d746c0);
878
1049
  @action-variant-plain-disabled-color: var(--2f5174);
879
1050
  @action-variant-dangerous-disabled-color: var(--3ed7a9);
880
1051
  @action-variant-critical-disabled-color: var(--ff8727);
881
1052
  @action-variant-onBrand-disabled-color: var(--499ea7);
1053
+ @action-variant-classroom-disabled-color: var(--8415f2);
882
1054
  @action-variant-inverted-disabled-color: var(--e0ef5a);
1055
+ @action-variant-newFeature-disabled-color: var(--412530);
883
1056
  @action-variant-primary-disabled-bgColor: var(--818487);
884
1057
  @action-variant-secondary-disabled-bgColor: var(--ce895b);
885
1058
  @action-variant-tertiary-disabled-bgColor: var(--a8b810);
886
1059
  @action-variant-quaternary-disabled-bgColor: var(--b973db);
1060
+ @action-variant-ghost-disabled-bgColor: var(--625417);
887
1061
  @action-variant-plain-disabled-bgColor: var(--c970d4);
888
1062
  @action-variant-dangerous-disabled-bgColor: var(--8d2e23);
889
1063
  @action-variant-critical-disabled-bgColor: var(--1ce20d);
890
1064
  @action-variant-onBrand-disabled-bgColor: var(--10925f);
1065
+ @action-variant-classroom-disabled-bgColor: var(--249654);
891
1066
  @action-variant-inverted-disabled-bgColor: var(--b1756a);
1067
+ @action-variant-newFeature-disabled-bgColor: var(--e8c509);
892
1068
  @action-base-borderWidth: var(--0b1b71);
893
1069
  @icon-fieldLayout-width: var(--d57208);
894
1070
  @icon-fieldLayout-height: var(--3caeb9);
package/dist/icon/types.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import type { ColorName, Dataset, IconSize, TextAccent } from '@preply/ds-core';
1
+ import type { ColorName, Dataset, IconSize, TextAccent, TokyoUiIconSize } from '@preply/ds-core';
2
2
  import { ReactSVGComponentType } from '../svg/types';
3
3
  export interface IconProps {
4
4
  svg: ReactSVGComponentType;
5
- size?: IconSize;
5
+ size?: IconSize | TokyoUiIconSize;
6
6
  accent?: TextAccent;
7
7
  color?: ColorName;
8
8
  label?: string;
package/dist/theme/style/declarations.mixins.less CHANGED
@@ -54,6 +54,11 @@
54
54
  padding: @@vertical @@horizontal;
55
55
  }
56
56
 
57
+ .font-family(@namespace, @key) {
58
+ @token: '@{namespace}-@{key}-fontFamily';
59
+ font-family: @@token;
60
+ }
61
+
57
62
  .font-size(@namespace, @key) {
58
63
  @token: '@{namespace}-@{key}-fontSize';
59
64
  font-size: @@token;
package/dist/typography/module-text-accent/hooks/useTextAccentClassnames.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useTextAccentClassnames: (fallbackToDefault: boolean, accent?: "primary" | "secondary" | "tertiary" | "brand" | "accent" | "positive" | "info" | "warning" | "critical" | "inverted" | "branded" | "error" | "selected" | "disabled" | undefined) => string[];
1
+ export declare const useTextAccentClassnames: (fallbackToDefault: boolean, accent?: "primary" | "secondary" | "tertiary" | "accentDark" | "placeholder" | "inverted" | "positive" | "info" | "warning" | "critical" | "disabled" | "branded" | "selected" | "error" | "accent" | undefined) => string[];
package/dist/typography/module-text-accent/style/index.module.less.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "._2JBCx7{color:var(--aface6)}._2523Lq{color:var(--628fb7)}._8nxFNH{color:var(--a2f1c8)}._2Fd9Md{color:var(--c07ea8)}._3R4c-Z{color:var(--0ee7cb)}._3ywcH_{color:var(--26a5ae)}._3D9_5x{color:var(--3e566f)}._3fTJ5H{color:var(--aad149)}._1Dm0Py{color:var(--d7c974)}._3SjEZq{color:var(--8ec9e5)}.GSQn1T{color:var(--c2b191)}.QuvH20{color:var(--7b5d23)}._2m5Mga{color:var(--9809d0)}._21_0pN{color:var(--9ba3b8)}.OdMv1u{color:var(--0a84f6)}";
4
- var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/typography/module-text-accent/style/index.module.less",__css:css_248z,"TextAccent--accent-default":"_2JBCx7","TextAccent--accent-primary":"_2523Lq","TextAccent--accent-secondary":"_8nxFNH","TextAccent--accent-tertiary":"_2Fd9Md","TextAccent--accent-brand":"_3R4c-Z","TextAccent--accent-accent":"_3ywcH_","TextAccent--accent-positive":"_3D9_5x","TextAccent--accent-info":"_3fTJ5H","TextAccent--accent-warning":"_1Dm0Py","TextAccent--accent-critical":"_3SjEZq","TextAccent--accent-inverted":"GSQn1T","TextAccent--accent-branded":"QuvH20","TextAccent--accent-error":"_2m5Mga","TextAccent--accent-selected":"_21_0pN","TextAccent--accent-disabled":"OdMv1u"};
3
+ var css_248z = "._2JBCx7{color:var(--aface6)}._2523Lq{color:var(--628fb7)}._8nxFNH{color:var(--a2f1c8)}._2Fd9Md{color:var(--c07ea8)}.oxGIrK{color:var(--690731)}._2GsIT7{color:var(--0bad98)}.GSQn1T{color:var(--c2b191)}._3D9_5x{color:var(--3e566f)}._3fTJ5H{color:var(--aad149)}._1Dm0Py{color:var(--d7c974)}._3SjEZq{color:var(--8ec9e5)}.QuvH20{color:var(--7b5d23)}._2m5Mga{color:var(--9809d0)}._21_0pN{color:var(--9ba3b8)}.OdMv1u{color:var(--0a84f6)}._3ywcH_{color:var(--26a5ae)}";
4
+ var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-core/src/typography/module-text-accent/style/index.module.less",__css:css_248z,"TextAccent--accent-default":"_2JBCx7","TextAccent--accent-primary":"_2523Lq","TextAccent--accent-secondary":"_8nxFNH","TextAccent--accent-tertiary":"_2Fd9Md","TextAccent--accent-accentDark":"oxGIrK","TextAccent--accent-placeholder":"_2GsIT7","TextAccent--accent-inverted":"GSQn1T","TextAccent--accent-positive":"_3D9_5x","TextAccent--accent-info":"_3fTJ5H","TextAccent--accent-warning":"_1Dm0Py","TextAccent--accent-critical":"_3SjEZq","TextAccent--accent-branded":"QuvH20","TextAccent--accent-error":"_2m5Mga","TextAccent--accent-selected":"_21_0pN","TextAccent--accent-disabled":"OdMv1u","TextAccent--accent-accent":"_3ywcH_"};
5
5
  var stylesheet=css_248z;
6
6
  styleInject(css_248z);
7
7
 
package/dist/typography/style/mixins.less CHANGED
@@ -56,6 +56,25 @@
56
56
  });
57
57
  }
58
58
 
59
+ .heading-variant(@heading-variant) {
60
+ @token: 'variant-@{heading-variant}';
61
+ .font-family('heading', @token);
62
+ .font-size('heading', @token);
63
+ .font-weight('heading', @token);
64
+ .line-height('heading', @token);
65
+ .letter-spacing('heading', @token);
66
+ }
67
+
68
+ .heading-variants() {
69
+ .responsive({
70
+ each(@HEADING_VARIANT_OPTIONS, {
71
+ &--variant-@{value} {
72
+ .heading-variant(@value);
73
+ }
74
+ });
75
+ });
76
+ }
77
+
59
78
  .heading-levels() {
60
79
  .responsive({
61
80
  each(@HEADING_LEVEL_OPTIONS, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preply/ds-web-core",
3
- "version": "0.66.2",
3
+ "version": "0.67.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,14 +19,14 @@
19
19
  "dev": "run build:rollup -w"
20
20
  },
21
21
  "dependencies": {
22
- "@preply/ds-core": "0.66.2",
23
- "@preply/ds-core-types": "0.66.2"
22
+ "@preply/ds-core": "0.67.0",
23
+ "@preply/ds-core-types": "0.67.0"
24
24
  },
25
25
  "peerDependencies": {
26
- "@preply/ds-core": "0.66.2",
27
- "@preply/ds-core-types": "0.66.2",
26
+ "@preply/ds-core": "0.67.0",
27
+ "@preply/ds-core-types": "0.67.0",
28
28
  "react": "^16.8.3",
29
29
  "react-dom": "^16.8.3"
30
30
  },
31
- "gitHead": "0b6acbd4cb17d645180e83ccee8e7109cc21f894"
31
+ "gitHead": "49fa02c8d8574cda3e94c001cb56de75d1e26cd3"
32
32
  }