@ptsecurity/mosaic 17.2.0 → 17.2.1

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 (80) hide show
  1. package/autocomplete/_autocomplete-theme.scss +2 -2
  2. package/button-toggle/button-toggle.scss +2 -2
  3. package/code-block/_code-block-theme.scss +2 -2
  4. package/core/forms/_forms-theme.scss +1 -1
  5. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +16 -11
  6. package/core/styles/common/_groups.scss +3 -2
  7. package/core/styles/common/_popup.scss +1 -1
  8. package/core/styles/common/_tokens.scss +20 -10
  9. package/core/styles/theming/_alerts.scss +15 -14
  10. package/core/styles/theming/_badges.scss +32 -30
  11. package/core/styles/theming/_components-theming.scss +13 -13
  12. package/core/styles/theming/_scrollbars.scss +24 -27
  13. package/core/styles/theming/_theming.scss +10 -8
  14. package/core/styles/typography/_typography-utils.scss +1 -1
  15. package/core/styles/typography/_typography.scss +29 -28
  16. package/core/styles/visual/_layout.scss +14 -13
  17. package/datepicker/_datepicker-theme.scss +1 -2
  18. package/divider/_divider-theme.scss +1 -1
  19. package/dl/_dl-theme.scss +1 -1
  20. package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
  21. package/esm2022/core/version.mjs +2 -2
  22. package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
  23. package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
  24. package/esm2022/form-field/form-field.mjs +2 -2
  25. package/esm2022/modal/modal.component.mjs +2 -2
  26. package/esm2022/navbar/navbar.component.mjs +2 -2
  27. package/esm2022/navbar/vertical-navbar.component.mjs +3 -3
  28. package/esm2022/select/select.component.mjs +3 -3
  29. package/esm2022/tabs/tab-header.component.mjs +2 -2
  30. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  31. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  32. package/esm2022/tree-select/tree-select.component.mjs +3 -3
  33. package/fesm2022/ptsecurity-mosaic-button-toggle.mjs +2 -2
  34. package/fesm2022/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  35. package/fesm2022/ptsecurity-mosaic-core.mjs +1 -1
  36. package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
  37. package/fesm2022/ptsecurity-mosaic-file-upload.mjs +4 -4
  38. package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
  39. package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
  40. package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
  41. package/fesm2022/ptsecurity-mosaic-modal.mjs +2 -2
  42. package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
  43. package/fesm2022/ptsecurity-mosaic-navbar.mjs +4 -4
  44. package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
  45. package/fesm2022/ptsecurity-mosaic-select.mjs +2 -2
  46. package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
  47. package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
  48. package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
  49. package/fesm2022/ptsecurity-mosaic-timezone.mjs +2 -2
  50. package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
  51. package/fesm2022/ptsecurity-mosaic-tree-select.mjs +2 -2
  52. package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  53. package/file-upload/multiple-file-upload.component.scss +9 -9
  54. package/file-upload/single-file-upload.component.scss +3 -3
  55. package/form-field/_form-field-theme.scss +2 -2
  56. package/form-field/form-field.scss +1 -1
  57. package/icon/_icon-theme.scss +1 -1
  58. package/link/_link-theme.scss +1 -1
  59. package/markdown/_markdown-theme.scss +1 -1
  60. package/modal/_modal-theme.scss +2 -2
  61. package/modal/modal.scss +2 -2
  62. package/navbar/_navbar-theme.scss +4 -4
  63. package/navbar/navbar-item.scss +2 -2
  64. package/package.json +15 -15
  65. package/popover/_popover-theme.scss +1 -1
  66. package/prebuilt-themes/dark-theme.css +1 -1
  67. package/prebuilt-themes/default-theme.css +1 -1
  68. package/radio/_radio-theme.scss +1 -1
  69. package/select/_select-theme.scss +2 -2
  70. package/select/select.scss +1 -1
  71. package/sidepanel/_sidepanel-theme.scss +2 -2
  72. package/tabs/_tabs-theme.scss +2 -2
  73. package/tabs/tab-header.scss +16 -12
  74. package/tabs/tab-nav-bar/tab-nav-bar.scss +15 -13
  75. package/tags/_tag-theme.scss +2 -2
  76. package/timezone/_timezone-option-theme.scss +1 -1
  77. package/toast/_toast-theme.scss +1 -1
  78. package/toggle/_toggle-theme.scss +1 -1
  79. package/tooltip/_tooltip-theme.scss +1 -1
  80. package/tree-select/tree-select.scss +1 -1
@@ -11,10 +11,10 @@
11
11
  .mc-autocomplete-panel {
12
12
  @include popup.popup-params($theme);
13
13
 
14
- color: theming.mc-color($foreground, text);
14
+ color: mc-css-variable(foreground-text, map.get($foreground, text));
15
15
 
16
16
  .mc-selected {
17
- $popup: map.get(map.get($theme, components), popup);
17
+ $popup: map.get($theme, components, popup);
18
18
 
19
19
  background-color: mc-css-variable(popup-background, map-get($popup, background));
20
20
  }
@@ -14,7 +14,7 @@ $tokens: meta.module-variables(tokens) !default;
14
14
  display: inline-flex;
15
15
  flex-direction: row;
16
16
  align-items: center;
17
- gap: map.get($tokens, size-3xs);
17
+ gap: mc-css-variable(size-3xs);
18
18
 
19
19
  border-width: mc-css-variable(button-toggle-group-size-border-width);
20
20
  border-radius: mc-css-variable(button-toggle-group-size-border-radius);
@@ -63,7 +63,7 @@ $tokens: meta.module-variables(tokens) !default;
63
63
  padding-left: mc-css-variable(button-toggle-size-left-icon-padding);
64
64
 
65
65
  & .mc-icon {
66
- margin-right: map.get($tokens, size-xxs);
66
+ margin-right: mc-css-variable(size-xxs);
67
67
  }
68
68
  }
69
69
  }
@@ -6,7 +6,7 @@
6
6
  @use '../core/styles/common/tokens' as *;
7
7
 
8
8
  @mixin mc-code-block-theme($theme) {
9
- $code-block: map.get(map.get($theme, components), code-block);
9
+ $code-block: map.get($theme, components, code-block);
10
10
 
11
11
  .mc-code-block {
12
12
  background-color: mc-css-variable(code-block-main-background, map-get($code-block, main-background));
@@ -415,7 +415,7 @@
415
415
  }
416
416
 
417
417
  & .hljs-ln-numbers {
418
- @include mc-typography-level-to-styles($config, caption-mono);
418
+ @include mc-typography-level-to-styles_css-variables(typography, caption-mono);
419
419
  }
420
420
  }
421
421
  }
@@ -91,7 +91,7 @@
91
91
 
92
92
  $foreground: map.get($theme, foreground);
93
93
 
94
- $forms: map.get(map.get($theme, components), forms);
94
+ $forms: map.get($theme, components, forms);
95
95
 
96
96
  .mc-form__label {
97
97
  color: map.get($forms, label);
@@ -1,19 +1,23 @@
1
1
  @use 'sass:map';
2
2
 
3
+ @use '../../styles/common/tokens' as *;
3
4
 
4
- @mixin mc-pseudo-checkbox-color($states) {
5
- border-color: map.get($states, border);
5
+
6
+ @mixin mc-pseudo-checkbox-color($component, $style-name) {
7
+ $style: map.get($component, $style-name);
8
+
9
+ border-color: mc-css-variable(checkbox-#{$style-name}-border, map.get($style, border));
6
10
 
7
11
  & .mc-checkbox-checkmark,
8
12
  & .mc-checkbox-mixedmark {
9
- color: map.get($states, color);
13
+ color: mc-css-variable(checkbox-#{$style-name}-color, map.get($style, color));
10
14
  }
11
15
 
12
16
  &.mc-checked,
13
17
  &.mc-indeterminate {
14
- border-color: map.get($states, checked, border);
18
+ border-color: mc-css-variable(checkbox-#{$style-name}-checked-border, map.get($style, checked, border));
15
19
 
16
- background: map.get($states, checked, background);
20
+ background: mc-css-variable(checkbox-#{$style-name}-checked-background, map.get($style, checked, background));
17
21
  }
18
22
  }
19
23
 
@@ -21,27 +25,28 @@
21
25
  $foreground: map.get($theme, foreground);
22
26
  $background: map.get($theme, background);
23
27
 
24
- $checkbox: map.get(map.get($theme, components), checkbox);
28
+ $checkbox: map.get($theme, components, checkbox);
25
29
 
26
30
  .mc-pseudo-checkbox {
27
31
  &.mc-primary {
28
- @include mc-pseudo-checkbox-color(map.get($checkbox, default));
32
+ @include mc-pseudo-checkbox-color($checkbox, default);
29
33
  }
30
34
 
31
35
  &.mc-error {
32
- @include mc-pseudo-checkbox-color(map.get($checkbox, error));
36
+ @include mc-pseudo-checkbox-color($checkbox, error);
33
37
  }
34
38
 
35
39
  &.mc-disabled,
36
40
  &.mc-primary.mc-disabled,
37
41
  &.mc-error.mc-disabled {
38
- border-color: map.get($foreground, border);
42
+ border-color: mc-css-variable(foreground-border, map.get($foreground, border));
39
43
 
40
- background-color: map.get($background, background-disabled);
44
+ background-color: mc-css-variable(
45
+ background-background-disabled, map.get($background, background-disabled));
41
46
 
42
47
  & .mc-checkbox-checkmark,
43
48
  & .mc-checkbox-mixedmark {
44
- color: map.get($foreground, text-disabled);
49
+ color: mc-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
45
50
  }
46
51
  }
47
52
  }
@@ -2,6 +2,7 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../tokens';
5
+ @use '../common/tokens' as *;
5
6
 
6
7
 
7
8
  $tokens: meta.module-variables(tokens) !default;
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
82
83
  &:first-child:not(:last-child) {
83
84
  @include border-bottom-radius(0);
84
85
 
85
- border-top-right-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
86
+ border-top-right-radius: mc-css-variable(button-size-border-radius);
86
87
 
87
88
  > .mc-form-field__container {
88
89
  @include border-bottom-radius(0);
@@ -92,7 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
92
93
  &:last-child:not(:first-child) {
93
94
  @include border-top-radius(0);
94
95
 
95
- border-bottom-left-radius: var(--mc-button-size-border-radius, map.get($tokens, button-size-border-radius));
96
+ border-bottom-left-radius: mc-css-variable(button-size-border-radius);
96
97
 
97
98
  > .mc-form-field__container {
98
99
  @include border-top-radius(0);
@@ -3,7 +3,7 @@
3
3
 
4
4
 
5
5
  @mixin popup-params($theme) {
6
- $popup: map.get(map.get($theme, components), popup);
6
+ $popup: map.get($theme, components, popup);
7
7
 
8
8
  box-shadow: mc-css-variable(popup-shadow, map-get($popup, shadow));
9
9
  border-color: mc-css-variable(popup-border, map-get($popup, border));
@@ -21,19 +21,29 @@ $tokens: meta.module-variables(tokens);
21
21
  @return map.get($tokens, $name);
22
22
  }
23
23
 
24
- @mixin mc-css-font-variable($component, $component-property, $font-property) {
24
+ @mixin mc-css-font-variable($component, $component-property, $font-property, $font) {
25
25
  #{$font-property}: var(
26
- --mc-#{$component}-font-#{$component-property}-#{$font-property},
27
- map.get($tokens, #{$component}-font-#{$component-property}-#{$font-property})
26
+ --mc-#{$component}-#{$font}#{$component-property}-#{$font-property},
27
+ map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
28
28
  );
29
29
  }
30
30
 
31
31
  @mixin mc-typography-css-variables($component, $property) {
32
- @include mc-css-font-variable($component, $property, font-size);
33
- @include mc-css-font-variable($component, $property, font-weight);
34
- @include mc-css-font-variable($component, $property, line-height);
35
- @include mc-css-font-variable($component, $property, font-family);
36
- @include mc-css-font-variable($component, $property, text-transform);
37
- @include mc-css-font-variable($component, $property, font-feature-settings);
38
- @include mc-css-font-variable($component, $property, letter-spacing);
32
+ @include mc-css-font-variable($component, $property, font-size, font-);
33
+ @include mc-css-font-variable($component, $property, font-weight, font-);
34
+ @include mc-css-font-variable($component, $property, line-height, font-);
35
+ @include mc-css-font-variable($component, $property, font-family, font-);
36
+ @include mc-css-font-variable($component, $property, text-transform, font-);
37
+ @include mc-css-font-variable($component, $property, font-feature-settings, font-);
38
+ @include mc-css-font-variable($component, $property, letter-spacing, font-);
39
+ }
40
+
41
+ @mixin mc-typography-level-to-styles_css-variables($component, $property) {
42
+ @include mc-css-font-variable($component, $property, font-size, '');
43
+ @include mc-css-font-variable($component, $property, font-weight, '');
44
+ @include mc-css-font-variable($component, $property, line-height, '');
45
+ @include mc-css-font-variable($component, $property, font-family, '');
46
+ @include mc-css-font-variable($component, $property, text-transform, '');
47
+ @include mc-css-font-variable($component, $property, font-feature-settings, '');
48
+ @include mc-css-font-variable($component, $property, letter-spacing, '');
39
49
  }
@@ -52,50 +52,50 @@
52
52
  }
53
53
  }
54
54
 
55
- @mixin alert-theme($alert) {
56
- background-color: map.get($alert, background);
57
- border-color: map.get($alert, border);
55
+ @mixin alert-theme($component, $style-name) {
56
+ $style: map.get($component, $style-name);
57
+
58
+ background-color: mc-css-variable(alert-#{$style-name}-background, map.get($style, background));
59
+ border-color: mc-css-variable(alert-#{$style-name}-border, map.get($style, border));
58
60
 
59
61
  .mc-icon.mc-alert__icon {
60
- color: map.get($alert, icon);
62
+ color: mc-css-variable(alert-#{$style-name}-icon, map.get($style, icon));
61
63
  }
62
64
  }
63
65
 
64
66
  @mixin mc-alert-theme($theme) {
65
67
  $foreground: map.get($theme, foreground);
66
68
 
67
- $alert: map.get(map.get($theme, components), alert);
68
-
69
- $is-dark: map.get($theme, is-dark);
69
+ $alert: map.get($theme, components, alert);
70
70
 
71
71
  .mc-alert__close:focus {
72
72
  outline: none;
73
73
  }
74
74
 
75
75
  .mc-alert {
76
- color: map.get($foreground, text);
76
+ color: mc-css-variable(foreground-text, map.get($foreground, text));
77
77
 
78
78
  @include mc-alert-geometry(map.get($theme, tokens));
79
79
  }
80
80
 
81
81
  .mc-alert_error {
82
- @include alert-theme(map.get($alert, error));
82
+ @include alert-theme($alert, error);
83
83
  }
84
84
 
85
85
  .mc-alert_warning {
86
- @include alert-theme(map.get($alert, warning));
86
+ @include alert-theme($alert, warning);
87
87
  }
88
88
 
89
89
  .mc-alert_success {
90
- @include alert-theme(map.get($alert, success));
90
+ @include alert-theme($alert, success);
91
91
  }
92
92
 
93
93
  .mc-alert_info {
94
- @include alert-theme(map.get($alert, info));
94
+ @include alert-theme($alert, info);
95
95
  }
96
96
 
97
97
  .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
98
- @include alert-theme(map.get($alert, default));
98
+ @include alert-theme($alert, default);
99
99
  }
100
100
  }
101
101
 
@@ -128,7 +128,8 @@
128
128
 
129
129
  &.mc-alert_dismissible {
130
130
  padding-right: calc(
131
- mc-css-variable(alert-size-right-padding-dismissible) + mc-css-variable(alert-size-horizontal-padding)
131
+ var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
132
+ var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
132
133
  );
133
134
  }
134
135
  }
@@ -19,19 +19,21 @@
19
19
  }
20
20
 
21
21
 
22
- @mixin mc-badge-color($params) {
23
- color: map.get($params, color);
24
- border-color: map.get($params, border);
25
- background: map.get($params, background);
22
+ @mixin mc-badge-color($component, $style-name) {
23
+ $style: map.get($component, $style-name);
24
+
25
+ color: mc-css-variable(badge-#{$style-name}-color, map.get($style, color));
26
+ border-color: mc-css-variable(badge-#{$style-name}-border, map.get($style, border));
27
+ background: mc-css-variable(badge-#{$style-name}-background, map.get($style, background));
26
28
  }
27
29
 
28
30
  @mixin mc-badge-theme($theme) {
29
31
  $foreground: map.get($theme, foreground);
30
- $badge: map.get(map.get($theme, components), badge);
32
+ $badge: map.get($theme, components, badge);
31
33
 
32
34
  .mc-badge {
33
- color: map.get($foreground, text);
34
- border-color: map.get($foreground, border);
35
+ color: mc-css-variable(foreground-text, map.get($foreground, text));
36
+ border-color: mc-css-variable(foreground-border, map.get($foreground, border));
35
37
 
36
38
  }
37
39
 
@@ -39,57 +41,57 @@
39
41
 
40
42
  .mc-badge_solid {
41
43
  &.mc-badge_primary {
42
- @include mc-badge-color(map.get($badge, primary_solid));
44
+ @include mc-badge-color($badge, solid-primary);
43
45
  }
44
46
 
45
47
  &.mc-badge_second {
46
- @include mc-badge-color(map.get($badge, second_solid));
48
+ @include mc-badge-color($badge, solid-secondary);
47
49
  }
48
50
 
49
51
  &.mc-badge_transparent {
50
- @include mc-badge-color(map.get($badge, transparent_solid));
52
+ @include mc-badge-color($badge, solid-transparent);
51
53
  }
52
54
 
53
55
  &.mc-badge_success {
54
- @include mc-badge-color(map.get($badge, success_solid));
56
+ @include mc-badge-color($badge, solid-success);
55
57
  }
56
58
 
57
59
  &.mc-badge_info {
58
- @include mc-badge-color(map.get($badge, info_solid));
60
+ @include mc-badge-color($badge, solid-info);
59
61
  }
60
62
 
61
63
  &.mc-badge_warning {
62
- @include mc-badge-color(map.get($badge, warning_solid));
64
+ @include mc-badge-color($badge, solid-warning);
63
65
  }
64
66
 
65
67
  &.mc-badge_error {
66
- @include mc-badge-color(map.get($badge, error_solid));
68
+ @include mc-badge-color($badge, solid-error);
67
69
  }
68
70
 
69
71
  &.mc-badge_light {
70
- @include mc-badge-color(map.get($badge, light_solid));
72
+ @include mc-badge-color($badge, solid-light);
71
73
  }
72
74
  }
73
75
 
74
76
  .mc-badge_pastel {
75
77
  &.mc-badge_primary {
76
- @include mc-badge-color(map.get($badge, primary_pastel));
78
+ @include mc-badge-color($badge, pastel-primary);
77
79
  }
78
80
 
79
81
  &.mc-badge_success {
80
- @include mc-badge-color(map.get($badge, success_pastel));
82
+ @include mc-badge-color($badge, pastel-success);
81
83
  }
82
84
 
83
85
  &.mc-badge_info {
84
- @include mc-badge-color(map-get($badge, info_pastel));
86
+ @include mc-badge-color($badge, pastel-info);
85
87
  }
86
88
 
87
89
  &.mc-badge_warning {
88
- @include mc-badge-color(map.get($badge, warning_pastel));
90
+ @include mc-badge-color($badge, pastel-warning);
89
91
  }
90
92
 
91
93
  &.mc-badge_error {
92
- @include mc-badge-color(map.get($badge, error_pastel));
94
+ @include mc-badge-color($badge, pastel-error);
93
95
  }
94
96
  }
95
97
  }
@@ -97,22 +99,22 @@
97
99
  @mixin mc-badges-geometry($tokens) {
98
100
  .mc-badge {
99
101
  &.mc-badge_default {
100
- height: var(--mc-badge-size-default-height, map.get($tokens, badge-size-default-height));
101
- min-width: var(--mc-badge-size-default-min-width, map.get($tokens, badge-size-default-min-width));
102
- padding: var(--mc-badge-size-default-padding, map.get($tokens, badge-size-default-padding));
102
+ height: mc-css-variable(badge-size-default-height);
103
+ min-width: mc-css-variable(badge-size-default-min-width);
104
+ padding: mc-css-variable(badge-size-default-padding);
103
105
  border: {
104
- width: var(--mc-badge-size-default-border-width, map.get($tokens, badge-size-default-border-width));
105
- radius: var(--mc-badge-size-default-border-radius, map.get($tokens, badge-size-default-border-radius));
106
+ width: mc-css-variable(badge-size-default-border-width);
107
+ radius: mc-css-variable(badge-size-default-border-radius);
106
108
  }
107
109
  }
108
110
 
109
111
  &.mc-badge_mini {
110
- height: var(--mc-badge-size-mini-height, map.get($tokens, badge-size-mini-height));
111
- min-width: var(--mc-badge-size-mini-min-width, map.get($tokens, badge-size-mini-min-width));
112
- padding: var(--mc-badge-size-mini-padding, map.get($tokens, badge-size-mini-padding));
112
+ height: mc-css-variable(badge-size-mini-height);
113
+ min-width: mc-css-variable(badge-size-mini-min-width);
114
+ padding: mc-css-variable(badge-size-mini-padding);
113
115
  border: {
114
- width: var(--mc-badge-size-mini-border-width, map.get($tokens, badge-size-mini-border-width));
115
- radius: var(--mc-badge-size-mini-border-radius, map.get($tokens, badge-size-mini-border-radius));
116
+ width: mc-css-variable(badge-size-mini-border-width);
117
+ radius: mc-css-variable(badge-size-mini-border-radius);
116
118
  }
117
119
  }
118
120
  }
@@ -36,67 +36,67 @@
36
36
  );
37
37
 
38
38
  $badge: (
39
- primary_solid: (
39
+ solid-primary: (
40
40
  color: map-get($tokens, 'badge-#{$scheme}-solid-primary-color'),
41
41
  background: map-get($tokens, 'badge-#{$scheme}-solid-primary-background'),
42
42
  border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
43
43
  ),
44
- second_solid: (
44
+ solid-secondary: (
45
45
  color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
46
46
  background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
47
47
  border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
48
48
  ),
49
- light_solid: (
49
+ solid-light: (
50
50
  color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
51
51
  background: map-get($tokens, 'badge-#{$scheme}-solid-light-background'),
52
52
  border: map-get($tokens, 'badge-#{$scheme}-solid-light-background')
53
53
  ),
54
- info_solid: (
54
+ solid-info: (
55
55
  color: map-get($tokens, 'badge-#{$scheme}-solid-info-color'),
56
56
  background: map-get($tokens, 'badge-#{$scheme}-solid-info-background'),
57
57
  border: map-get($tokens, 'badge-#{$scheme}-solid-info-border')
58
58
  ),
59
- success_solid: (
59
+ solid-success: (
60
60
  color: map-get($tokens, 'badge-#{$scheme}-solid-success-color'),
61
61
  background: map-get($tokens, 'badge-#{$scheme}-solid-success-background'),
62
62
  border: map-get($tokens, 'badge-#{$scheme}-solid-success-border')
63
63
  ),
64
- warning_solid: (
64
+ solid-warning: (
65
65
  color: map-get($tokens, 'badge-#{$scheme}-solid-warning-color'),
66
66
  background: map-get($tokens, 'badge-#{$scheme}-solid-warning-background'),
67
67
  border: map-get($tokens, 'badge-#{$scheme}-solid-warning-border')
68
68
  ),
69
- error_solid: (
69
+ solid-error: (
70
70
  color: map-get($tokens, 'badge-#{$scheme}-solid-error-color'),
71
71
  background: map-get($tokens, 'badge-#{$scheme}-solid-error-background'),
72
72
  border: map-get($tokens, 'badge-#{$scheme}-solid-error-border')
73
73
  ),
74
- transparent_solid: (
74
+ solid-transparent: (
75
75
  color: map-get($tokens, 'badge-#{$scheme}-solid-transparent-color'),
76
76
  border: map-get($tokens, 'badge-#{$scheme}-solid-transparent-border'),
77
77
  background: map-get($tokens, 'badge-#{$scheme}-solid-transparent-background')
78
78
  ),
79
- primary_pastel: (
79
+ pastel-primary: (
80
80
  color: map-get($tokens, 'badge-#{$scheme}-pastel-primary-color'),
81
81
  background: map-get($tokens, 'badge-#{$scheme}-pastel-primary-background'),
82
82
  border: map-get($tokens, 'badge-#{$scheme}-pastel-primary-border')
83
83
  ),
84
- info_pastel: (
84
+ pastel-info: (
85
85
  color: map-get($tokens, 'badge-#{$scheme}-pastel-info-color'),
86
86
  background: map-get($tokens, 'badge-#{$scheme}-pastel-info-background'),
87
87
  border: map-get($tokens, 'badge-#{$scheme}-pastel-info-border')
88
88
  ),
89
- success_pastel: (
89
+ pastel-success: (
90
90
  color: map-get($tokens, 'badge-#{$scheme}-pastel-success-color'),
91
91
  background: map-get($tokens, 'badge-#{$scheme}-pastel-success-background'),
92
92
  border: map-get($tokens, 'badge-#{$scheme}-pastel-success-border')
93
93
  ),
94
- warning_pastel: (
94
+ pastel-warning: (
95
95
  color: map-get($tokens, 'badge-#{$scheme}-pastel-warning-color'),
96
96
  background: map-get($tokens, 'badge-#{$scheme}-pastel-warning-background'),
97
97
  border: map-get($tokens, 'badge-#{$scheme}-pastel-warning-border')
98
98
  ),
99
- error_pastel: (
99
+ pastel-error: (
100
100
  color: map-get($tokens, 'badge-#{$scheme}-pastel-error-color'),
101
101
  background: map-get($tokens, 'badge-#{$scheme}-pastel-error-background'),
102
102
  border: map-get($tokens, 'badge-#{$scheme}-pastel-error-border')
@@ -2,6 +2,8 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../functions/string' as *;
5
+ @use '../common/tokens' as *;
6
+
5
7
 
6
8
  .mc-scrollbar {
7
9
  //firefox
@@ -11,54 +13,55 @@
11
13
  }
12
14
 
13
15
  @mixin mc-scrollbar-theme($theme) {
14
- $scrollbar: map.get(map.get($theme, components), scrollbar);
16
+ $scrollbar: map.get($theme, components, scrollbar);
15
17
  $thumb: map.get($scrollbar, thumb);
16
18
  $arrow: map.get($scrollbar, arrow);
17
19
 
18
20
  .mc-scrollbar {
19
- @include mc-scrollbar-geometry(map.get($theme, tokens));
21
+ @include mc-scrollbar-geometry();
20
22
 
21
23
  // firefox
22
24
  @supports not selector(::-webkit-scrollbar) {
23
- scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
25
+ scrollbar-color: mc-css-variable(thumb-normal, map-get($thumb, normal))
26
+ mc-css-variable(scrollbar-track, map-get($scrollbar, track));
24
27
  }
25
28
 
26
29
  // webkit
27
30
  &::-webkit-scrollbar,
28
31
  ::-webkit-scrollbar {
29
- background-color: map.get($scrollbar, track);
32
+ background-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
30
33
  }
31
34
 
32
35
 
33
36
  &::-webkit-scrollbar-corner,
34
37
  ::-webkit-scrollbar-corner {
35
- background-color: map.get($scrollbar, corner-background);
38
+ background-color: mc-css-variable(scrollbar-corner-background, map.get($scrollbar, corner-background));
36
39
  }
37
40
 
38
41
  &::-webkit-scrollbar-thumb,
39
42
  ::-webkit-scrollbar-thumb {
40
- background-color: map.get($thumb, normal);
43
+ background-color: mc-css-variable(thumb-normal, map.get($thumb, normal));
41
44
 
42
- border-color: map.get($scrollbar, track);
45
+ border-color: mc-css-variable(scrollbar-track, map.get($scrollbar, track));
43
46
  border-style: solid;
44
47
 
45
48
  &:hover {
46
- background-color: map.get($thumb, hover);
49
+ background-color: mc-css-variable(thumb-hover, map.get($thumb, hover));
47
50
  }
48
51
 
49
52
  &:disabled {
50
- background-color: map.get($thumb, disabled);
53
+ background-color: mc-css-variable(thumb-disabled, map.get($thumb, disabled));
51
54
  }
52
55
 
53
56
  &:active {
54
- background-color: map.get($thumb, active);
57
+ background-color: mc-css-variable(thumb-active, map.get($thumb, active));
55
58
  }
56
59
  }
57
60
 
58
61
  /* stylelint-disable */
59
62
  &::-webkit-scrollbar-button,
60
63
  ::-webkit-scrollbar-button {
61
- background-color: map.get($arrow, background);
64
+ background-color: mc-css-variable(arrow-background, map.get($arrow, background));
62
65
  background-size: 10px 10px;
63
66
  background-repeat: no-repeat;
64
67
  background-position: center center;
@@ -93,39 +96,33 @@
93
96
  }
94
97
  }
95
98
 
96
- @mixin mc-scrollbar-geometry($tokens) {
99
+ @mixin mc-scrollbar-geometry() {
97
100
  // webkit
98
101
  &::-webkit-scrollbar,
99
102
  ::-webkit-scrollbar {
100
103
  &:vertical {
101
- width: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
104
+ width: mc-css-variable(scrollbar-size-track-dimension);
102
105
  }
103
106
 
104
107
  &:horizontal {
105
- height: var(--mc-scrollbar-size-track-dimension, map.get($tokens, scrollbar-size-track-dimension));
108
+ height: mc-css-variable(scrollbar-size-track-dimension);
106
109
  }
107
110
  }
108
111
 
109
112
  /* stylelint-disable no-descending-specificity */
110
113
  &::-webkit-scrollbar-thumb,
111
114
  ::-webkit-scrollbar-thumb {
112
- width: var(--mc-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
113
- border-width: var(
114
- --mc-scrollbar-size-thumb-inset-border-width,
115
- map.get($tokens, scrollbar-size-thumb-border-width)
116
- );
117
- border-radius: var(
118
- --mc-scrollbar-size-thumb-inset-border-radius,
119
- map.get($tokens, scrollbar-size-thumb-border-radius)
120
- );
115
+ width: mc-css-variable(scrollbar-size-thumb-width);
116
+ border-width: mc-css-variable(scrollbar-size-thumb-border-width);
117
+ border-radius: mc-css-variable(scrollbar-size-thumb-border-radius);
121
118
 
122
119
  // these props are used to set the user-friendly thumb for long content.
123
120
  &:vertical {
124
- min-height: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
121
+ min-height: mc-css-variable(scrollbar-size-thumb-min-size);
125
122
  }
126
123
 
127
124
  &:horizontal {
128
- min-width: var(--mc-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
125
+ min-width: mc-css-variable(scrollbar-size-thumb-min-size);
129
126
  }
130
127
  }
131
128
 
@@ -133,8 +130,8 @@
133
130
  ::-webkit-scrollbar-button {
134
131
  display: none;
135
132
 
136
- width: var(--mc-scrollbar-size-arrow-icon-width, map.get($tokens, scrollbar-size-arrow-icon-width));
137
- height: var(--mc-scrollbar-size-arrow-icon-height, map.get($tokens, scrollbar-size-arrow-icon-height));
133
+ width: mc-css-variable(scrollbar-size-arrow-icon-width);
134
+ height: mc-css-variable(scrollbar-size-arrow-icon-height);
138
135
  }
139
136
  }
140
137