@preply/ds-web-core 0.66.1 → 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 (12) 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/layout/module-layout-padding/style/index.module.less.js +2 -2
  7. package/dist/layout/module-layout-padding/style/mixins.less +39 -37
  8. package/dist/theme/style/declarations.mixins.less +5 -0
  9. package/dist/typography/module-text-accent/hooks/useTextAccentClassnames.d.ts +1 -1
  10. package/dist/typography/module-text-accent/style/index.module.less.js +2 -2
  11. package/dist/typography/style/mixins.less +19 -0
  12. 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 @Wed Sep 13 2023 08:30:38 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 @Wed Sep 13 2023 08:30:36 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;