@ptsecurity/mosaic 17.1.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 (198) hide show
  1. package/autocomplete/_autocomplete-theme.scss +4 -3
  2. package/autocomplete/autocomplete.scss +7 -11
  3. package/button/_button-base.scss +10 -10
  4. package/button/_button-theme.scss +32 -32
  5. package/button/button.scss +9 -15
  6. package/button-toggle/_button-toggle-theme.scss +32 -24
  7. package/button-toggle/button-toggle.scss +21 -60
  8. package/card/_card-theme.scss +23 -20
  9. package/card/card.component.scss +2 -1
  10. package/checkbox/_checkbox-theme.scss +33 -29
  11. package/checkbox/checkbox.scss +7 -6
  12. package/code-block/_code-block-theme.scss +203 -115
  13. package/code-block/actionbar.component.scss +5 -7
  14. package/code-block/code-block.scss +5 -6
  15. package/core/forms/_forms-theme.scss +18 -47
  16. package/core/option/_optgroup-theme.scss +5 -5
  17. package/core/option/_option-action-theme.scss +1 -4
  18. package/core/option/_option-theme.scss +8 -10
  19. package/core/option/option.scss +5 -4
  20. package/core/pop-up/pop-up-trigger.d.ts +3 -1
  21. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +16 -11
  22. package/core/styles/_mosaic-theme.scss +3 -3
  23. package/core/styles/common/_groups.scss +3 -2
  24. package/core/styles/common/_popup.scss +5 -4
  25. package/core/styles/common/_tokens.scss +49 -0
  26. package/core/styles/theming/_alerts.scss +28 -35
  27. package/core/styles/theming/_badges.scss +39 -38
  28. package/core/styles/theming/_components-theming.scss +13 -13
  29. package/core/styles/theming/_scrollbars.scss +24 -27
  30. package/core/styles/theming/_theming.scss +10 -8
  31. package/core/styles/typography/_typography-utils.scss +1 -1
  32. package/core/styles/typography/_typography.scss +29 -28
  33. package/core/styles/visual/_layout.scss +14 -13
  34. package/datepicker/_datepicker-theme.scss +19 -21
  35. package/datepicker/calendar-body.scss +6 -9
  36. package/datepicker/calendar-header.scss +9 -26
  37. package/datepicker/calendar.scss +5 -16
  38. package/datepicker/datepicker-content.scss +2 -4
  39. package/datepicker/datepicker-input.scss +2 -1
  40. package/datepicker/datepicker-toggle.scss +3 -2
  41. package/divider/_divider-theme.scss +5 -3
  42. package/divider/divider.scss +5 -4
  43. package/dl/_dl-theme.scss +13 -37
  44. package/dl/dl.scss +13 -46
  45. package/dropdown/_dropdown-theme.scss +19 -17
  46. package/dropdown/dropdown-item.scss +7 -6
  47. package/dropdown/dropdown.scss +11 -26
  48. package/ellipsis-center/ellipsis-center.directive.d.ts +3 -2
  49. package/esm2022/button/button.component.mjs +2 -2
  50. package/esm2022/button-toggle/button-toggle.component.mjs +2 -2
  51. package/esm2022/code-block/actionbar.component.mjs +2 -2
  52. package/esm2022/code-block/code-block.component.mjs +2 -2
  53. package/esm2022/core/pop-up/pop-up-trigger.mjs +19 -11
  54. package/esm2022/core/version.mjs +2 -2
  55. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  56. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  57. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +7 -5
  58. package/esm2022/file-upload/multiple-file-upload.component.mjs +2 -2
  59. package/esm2022/file-upload/single-file-upload.component.mjs +2 -2
  60. package/esm2022/form-field/form-field.mjs +2 -2
  61. package/esm2022/input/input-password.mjs +2 -3
  62. package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
  63. package/esm2022/markdown/markdown.component.mjs +2 -2
  64. package/esm2022/modal/modal.component.mjs +8 -8
  65. package/esm2022/navbar/navbar-item.component.mjs +9 -9
  66. package/esm2022/navbar/navbar.component.mjs +2 -2
  67. package/esm2022/navbar/vertical-navbar.component.mjs +3 -3
  68. package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
  69. package/esm2022/radio/radio.component.mjs +2 -2
  70. package/esm2022/select/select-option.directive.mjs +7 -5
  71. package/esm2022/select/select.component.mjs +3 -3
  72. package/esm2022/tabs/tab-header.component.mjs +2 -2
  73. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  74. package/esm2022/timezone/timezone-option.directive.mjs +7 -5
  75. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  76. package/esm2022/title/title.directive.mjs +2 -3
  77. package/esm2022/tooltip/tooltip.component.mjs +27 -12
  78. package/esm2022/tree-select/tree-select.component.mjs +3 -3
  79. package/fesm2022/ptsecurity-mosaic-button-toggle.mjs +2 -2
  80. package/fesm2022/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  81. package/fesm2022/ptsecurity-mosaic-button.mjs +2 -2
  82. package/fesm2022/ptsecurity-mosaic-button.mjs.map +1 -1
  83. package/fesm2022/ptsecurity-mosaic-code-block.mjs +4 -4
  84. package/fesm2022/ptsecurity-mosaic-code-block.mjs.map +1 -1
  85. package/fesm2022/ptsecurity-mosaic-core.mjs +19 -11
  86. package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
  87. package/fesm2022/ptsecurity-mosaic-dropdown.mjs +4 -4
  88. package/fesm2022/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  89. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs +5 -4
  90. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -1
  91. package/fesm2022/ptsecurity-mosaic-file-upload.mjs +4 -4
  92. package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
  93. package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
  94. package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
  95. package/fesm2022/ptsecurity-mosaic-input.mjs +1 -2
  96. package/fesm2022/ptsecurity-mosaic-input.mjs.map +1 -1
  97. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs +2 -2
  98. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs.map +1 -1
  99. package/fesm2022/ptsecurity-mosaic-markdown.mjs +2 -2
  100. package/fesm2022/ptsecurity-mosaic-markdown.mjs.map +1 -1
  101. package/fesm2022/ptsecurity-mosaic-modal.mjs +7 -7
  102. package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
  103. package/fesm2022/ptsecurity-mosaic-navbar.mjs +12 -12
  104. package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
  105. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs +1 -1
  106. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  107. package/fesm2022/ptsecurity-mosaic-radio.mjs +2 -2
  108. package/fesm2022/ptsecurity-mosaic-radio.mjs.map +1 -1
  109. package/fesm2022/ptsecurity-mosaic-select.mjs +12 -11
  110. package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
  111. package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
  112. package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
  113. package/fesm2022/ptsecurity-mosaic-timezone.mjs +7 -6
  114. package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
  115. package/fesm2022/ptsecurity-mosaic-title.mjs +1 -2
  116. package/fesm2022/ptsecurity-mosaic-title.mjs.map +1 -1
  117. package/fesm2022/ptsecurity-mosaic-tooltip.mjs +25 -11
  118. package/fesm2022/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  119. package/fesm2022/ptsecurity-mosaic-tree-select.mjs +2 -2
  120. package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  121. package/file-upload/_file-upload-theme.scss +87 -54
  122. package/file-upload/file-upload.scss +0 -7
  123. package/file-upload/multiple-file-upload.component.scss +23 -51
  124. package/file-upload/single-file-upload.component.scss +12 -27
  125. package/form-field/_form-field-theme.scss +45 -36
  126. package/form-field/form-field.scss +13 -14
  127. package/icon/_icon-theme.scss +27 -26
  128. package/input/_input-base.scss +3 -2
  129. package/input/_input-theme.scss +14 -14
  130. package/input/input-password.d.ts +0 -1
  131. package/input/input.scss +3 -4
  132. package/link/_link-theme.scss +35 -32
  133. package/list/_list-base.scss +4 -3
  134. package/list/_list-theme.scss +8 -8
  135. package/list/list.scss +2 -1
  136. package/loader-overlay/_loader-overlay-theme.scss +8 -8
  137. package/loader-overlay/loader-overlay.scss +7 -12
  138. package/markdown/_markdown-theme.scss +62 -44
  139. package/markdown/markdown.scss +39 -80
  140. package/modal/_modal-confirm.scss +3 -2
  141. package/modal/_modal-theme.scss +22 -23
  142. package/modal/modal.scss +20 -17
  143. package/navbar/_navbar-theme.scss +23 -22
  144. package/navbar/navbar-brand.scss +7 -9
  145. package/navbar/navbar-item.component.d.ts +4 -4
  146. package/navbar/navbar-item.scss +10 -9
  147. package/navbar/vertical-navbar.scss +4 -12
  148. package/package.json +18 -18
  149. package/popover/_popover-theme.scss +36 -36
  150. package/popover/popover.scss +15 -14
  151. package/prebuilt-themes/dark-theme.css +1 -1
  152. package/prebuilt-themes/default-theme.css +1 -1
  153. package/progress-bar/_progress-bar-theme.scss +6 -5
  154. package/progress-bar/progress-bar.scss +2 -1
  155. package/progress-spinner/_progress-spinner-theme.scss +4 -3
  156. package/progress-spinner/progress-spinner.scss +7 -12
  157. package/radio/_radio-theme.scss +33 -25
  158. package/radio/radio.scss +8 -11
  159. package/select/_select-theme.scss +15 -15
  160. package/select/select-option.directive.d.ts +3 -2
  161. package/select/select.scss +20 -43
  162. package/sidepanel/_sidepanel-theme.scss +11 -11
  163. package/sidepanel/sidepanel.scss +11 -10
  164. package/splitter/_splitter-theme.scss +5 -3
  165. package/table/_table-theme.scss +9 -9
  166. package/table/table.scss +11 -14
  167. package/tabs/_tabs-common.scss +15 -14
  168. package/tabs/_tabs-theme.scss +65 -58
  169. package/tabs/tab-group.scss +2 -1
  170. package/tabs/tab-header.scss +20 -15
  171. package/tabs/tab-nav-bar/tab-nav-bar.scss +18 -15
  172. package/tags/_tag-theme.scss +32 -29
  173. package/tags/tag-list.scss +4 -3
  174. package/tags/tag.scss +9 -8
  175. package/textarea/_textarea-base.scss +2 -4
  176. package/textarea/_textarea-theme.scss +8 -8
  177. package/textarea/textarea.scss +2 -4
  178. package/timepicker/timepicker.scss +2 -7
  179. package/timezone/_timezone-option-theme.scss +8 -8
  180. package/timezone/timezone-option.component.scss +5 -4
  181. package/timezone/timezone-option.directive.d.ts +3 -2
  182. package/title/title.directive.d.ts +0 -1
  183. package/toast/_toast-theme.scss +14 -17
  184. package/toast/toast-container.component.scss +2 -5
  185. package/toast/toast.component.scss +15 -17
  186. package/toggle/_toggle-theme.scss +23 -22
  187. package/toggle/toggle.scss +19 -21
  188. package/tooltip/_tooltip-theme.scss +27 -32
  189. package/tooltip/tooltip.component.d.ts +12 -8
  190. package/tooltip/tooltip.scss +13 -17
  191. package/tree/_tree-theme.scss +8 -8
  192. package/tree/toggle.scss +3 -5
  193. package/tree/tree-option.scss +5 -4
  194. package/tree-select/_tree-select-theme.scss +9 -9
  195. package/tree-select/tree-select.scss +18 -36
  196. package/_theming.scss +0 -10923
  197. package/_visual.scss +0 -3604
  198. package/prebuilt-visual/default-visual.css +0 -1
package/list/list.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @use '../core/styles/common/list';
6
6
 
7
7
  @use '../core/styles/tokens';
8
+ @use '../core/styles/common/tokens' as *;
8
9
 
9
10
 
10
11
  $tokens: meta.module-variables(tokens) !default;
@@ -31,7 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
31
32
 
32
33
  & .mc-pseudo-checkbox,
33
34
  & .mc-icon {
34
- margin-right: var(--mc-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
35
+ margin-right: mc-css-variable(list-size-icon-right-margin);
35
36
  }
36
37
 
37
38
  & .mc-option-action {
@@ -2,32 +2,32 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
+ @use '../core/styles/common/tokens' as *;
6
+
5
7
 
6
8
  @mixin mc-loader-overlay-theme($theme) {
7
- $loader-overlay: map.get(map.get($theme, components), loader-overlay);
9
+ $loader-overlay: map-get(map-get($theme, components), loader-overlay);
8
10
 
9
11
  .mc-loader-overlay {
10
- background: map.get($loader-overlay, background);
12
+ background: mc-css-variable(loader-overlay-background, map-get($loader-overlay, background));
11
13
  }
12
14
 
13
15
  .mc-loader-overlay-text {
14
- color: map.get($loader-overlay, text);
16
+ color: mc-css-variable(loader-overlay-text, map-get($loader-overlay, text));
15
17
  }
16
18
 
17
19
  .mc-loader-overlay-caption {
18
- color: map.get($loader-overlay, caption);
20
+ color: mc-css-variable(loader-overlay-caption, map-get($loader-overlay, caption));
19
21
  }
20
22
  }
21
23
 
22
24
  @mixin mc-loader-overlay-typography($config) {
23
- $tokens: map.get($config, tokens);
24
-
25
25
  .mc-loader-overlay-text {
26
- @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
26
+ @include mc-typography-css-variables(loader-overlay, text);
27
27
  }
28
28
 
29
29
  .mc-loader-overlay-caption {
30
- @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
30
+ @include mc-typography-css-variables(loader-overlay, caption);
31
31
  }
32
32
  }
33
33
 
@@ -3,6 +3,7 @@
3
3
 
4
4
  @use '../core/styles/tokens';
5
5
  @use '../core/styles/variables';
6
+ @use '../core/styles/common/tokens' as *;
6
7
 
7
8
 
8
9
  $tokens: meta.module-variables(tokens) !default;
@@ -41,34 +42,28 @@ $tokens: meta.module-variables(tokens) !default;
41
42
  justify-content: unset;
42
43
 
43
44
  & .mc-loader-overlay__container {
44
- margin-top: var(
45
- --mc-loader-overlay-size-fixed-top-padding,
46
- map.get($tokens, loader-overlay-size-fixed-top-padding)
47
- );
45
+ margin-top: mc-css-variable(loader-overlay-size-fixed-top-padding);
48
46
  }
49
47
  }
50
48
 
51
49
  &.mc-loader-overlay_center:not(.mc-loader-overlay_empty) .mc-loader-overlay__container {
52
50
  transform: translateY(
53
- var(
54
- --mc-loader-overlay-size-center-optical-compensation,
55
- map.get($tokens, loader-overlay-size-center-optical-compensation)
56
- ));
51
+ mc-css-variable(loader-overlay-size-center-optical-compensation));
57
52
  }
58
53
  }
59
54
 
60
55
  .mc-loader-overlay-text {
61
- margin-top: map.get($tokens, size-s);
56
+ margin-top: mc-css-variable(size-s);
62
57
 
63
- max-width: map.get($tokens, loader-overlay-size-text-max-width);
58
+ max-width: mc-css-variable(loader-overlay-size-text-max-width);
64
59
 
65
60
  text-align: center;
66
61
  }
67
62
 
68
63
  .mc-loader-overlay-caption {
69
- margin-top: map.get($tokens, size-3xs);
64
+ margin-top: mc-css-variable(size-3xs);
70
65
 
71
- max-width: map.get($tokens, loader-overlay-size-text-max-width);
66
+ max-width: mc-css-variable(loader-overlay-size-text-max-width);
72
67
 
73
68
  text-align: center;
74
69
  }
@@ -2,138 +2,156 @@
2
2
 
3
3
  @use '../core/styles/theming/theming' as *;
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
+ @use '../core/styles/common/tokens' as *;
6
+
5
7
 
6
8
  @mixin mc-markdown-theme($theme) {
7
9
  $foreground: map.get($theme, foreground);
8
10
  $background: map.get($theme, background);
9
11
 
10
- $markdown: map.get(map.get($theme, components), markdown);
11
- $tokens: map.get($theme, tokens);
12
+ $markdown: map.get($theme, components, markdown);
12
13
 
13
14
  .mc-markdown {
14
- color: map.get($foreground, text);
15
- background: map.get($background, background);;
15
+ color: mc-css-variable(foreground-text, map-get($foreground, text));
16
+ background: mc-css-variable(background-background, map-get($background, background));
16
17
 
17
18
  // h1, h2, h3, h4, h5, h6
18
19
  @for $i from 1 through 6 {
19
20
  .mc-markdown__h#{$i} {
20
- color: map.get($markdown, h#{$i}-color);
21
+ color: mc-css-variable(markdown-h#{$i}-color, map-get($markdown, h#{$i}-color));
21
22
  }
22
23
  }
23
24
 
24
25
  .mc-markdown__p {
25
- color: map.get($markdown, p-color);
26
+ color: mc-css-variable(markdown-p-color, map-get($markdown, p-color));
26
27
  }
27
28
 
28
29
  .mc-markdown__ul,
29
30
  .mc-markdown__ol {
30
- color: map.get($markdown, list-color);
31
+ color: mc-css-variable(markdown-list-color, map-get($markdown, list-color));
31
32
  }
32
33
 
33
34
  .mc-markdown__blockquote {
34
- color: map.get($markdown, blockquote-text);
35
- background: map.get($markdown, blockquote-background);
36
- border-color: map.get($markdown, blockquote-border);
37
- border-left-color: map.get($markdown, blockquote-line);
35
+ color: mc-css-variable(markdown-blockquote-text, map-get($markdown, blockquote-text));
36
+ background: mc-css-variable(markdown-blockquote-background, map-get($markdown, blockquote-background));
37
+ border-color: mc-css-variable(markdown-blockquote-border, map-get($markdown, blockquote-border));
38
+ border-left-color: mc-css-variable(markdown-blockquote-line, map-get($markdown, blockquote-line));
38
39
  }
39
40
 
40
41
  .mc-markdown__pre,
41
42
  .mc-markdown__p > .mc-markdown__code {
42
- color: map.get($markdown, code-text);
43
- background-color: map.get($markdown, code-background);
44
- border-color: map.get($markdown, code-border);
43
+ color: mc-css-variable(markdown-code-text, map-get($markdown, code-text));
44
+ background-color: mc-css-variable(markdown-code-background, map-get($markdown, code-background));
45
+ border-color: mc-css-variable(markdown-code-border, map-get($markdown, code-border));
45
46
  }
46
47
 
47
48
  .mc-markdown__a {
48
- color: map.get($markdown, link-text);
49
- border-bottom-color: map.get($markdown, link-border-bottom);
49
+ color: mc-css-variable(markdown-link-text, map-get($markdown, link-text));
50
+ border-bottom-color: mc-css-variable(markdown-link-border-bottom, map-get($markdown, link-border-bottom));
50
51
 
51
52
  &:visited {
52
- color: map.get($markdown, link-state-visited-text);
53
- border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
53
+ color: mc-css-variable(markdown-link-state-visited-text, map-get($markdown, link-state-visited-text));
54
+ border-bottom-color: mc-css-variable(
55
+ markdown-link-state-visited-border-bottom, map-get($markdown, link-state-visited-border-bottom));
54
56
  }
55
57
 
56
58
  &:hover {
57
- color: map.get($markdown, link-state-hover-text);
59
+ color: mc-css-variable(markdown-link-state-hover-text, map-get($markdown, link-state-hover-text));
58
60
  transition: color 0ms;
59
- border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
61
+ border-bottom-color: mc-css-variable(
62
+ markdown-link-state-hover-border-bottom, map-get($markdown, link-state-hover-border-bottom));
60
63
  }
61
64
 
62
65
  &:active {
63
- color: map.get($markdown, link-state-active-text);
66
+ color: mc-css-variable(markdown-link-state-active-text, map-get($markdown, link-state-active-text));
64
67
  }
65
68
 
66
69
  &:focus {
67
70
  outline:
68
- map.get($markdown, link-state-focused-outline)
71
+ mc-css-variable(markdown-link-state-focused-outline, map-get($markdown, link-state-focused-outline))
69
72
  solid
70
- map.get($tokens, markdown-link-size-state-focused-outline-width);
73
+ mc-css-variable(markdown-link-size-state-focused-outline-width);
71
74
 
72
- outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
75
+ outline-offset: mc-css-variable(markdown-link-size-state-focused-outline-offset);
73
76
  }
74
77
  }
75
78
 
76
79
  .mc-markdown__img + em {
77
- color: map.get($markdown, image-caption-text);
80
+ color: mc-css-variable(markdown-image-caption-text, map-get($markdown, image-caption-text));
78
81
  }
79
82
 
80
83
  .mc-markdown__hr {
81
- border-bottom-color: map.get($markdown, hr-color);
84
+ border-bottom-color: mc-css-variable(markdown-hr-color, map-get($markdown, hr-color));
82
85
  }
83
86
 
84
87
  .mc-markdown__table > .mc-markdown__thead {
85
- color: map.get($markdown, table-header);
86
- border-bottom-color: map.get($markdown, table-border);
88
+ color: mc-css-variable(markdown-table-header, map-get($markdown, table-header));
89
+ border-bottom-color: mc-css-variable(markdown-table-border, map-get($markdown, table-border));
87
90
  }
88
91
 
89
92
  .mc-markdown__table > .mc-markdown__tbody {
90
- color: map.get($markdown, table-body);
93
+ color: mc-css-variable(markdown-table-body, map-get($markdown, table-body));
91
94
  }
92
95
  }
93
96
  }
94
97
 
95
98
  @mixin mc-markdown-typography($config) {
96
- $tokens: map.get($config, tokens);
97
-
98
99
  .mc-markdown {
99
- // h1, h2, h3, h4, h5, h6
100
- @for $i from 1 through 6 {
101
- .mc-markdown__h#{$i} {
102
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
103
- }
100
+ .mc-markdown__h1 {
101
+ @include mc-typography-css-variables(markdown-h1, default);
102
+ }
103
+
104
+ .mc-markdown__h2 {
105
+ @include mc-typography-css-variables(markdown-h2, default);
106
+ }
107
+
108
+ .mc-markdown__h3 {
109
+ @include mc-typography-css-variables(markdown-h3, default);
110
+ }
111
+
112
+ .mc-markdown__h4 {
113
+ @include mc-typography-css-variables(markdown-h4, default);
114
+ }
115
+
116
+ .mc-markdown__h5 {
117
+ @include mc-typography-css-variables(markdown-h5, default);
118
+ }
119
+
120
+ .mc-markdown__h6 {
121
+ @include mc-typography-css-variables(markdown-h6, default);
104
122
  }
105
123
 
106
124
  .mc-markdown__p {
107
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
125
+ @include mc-typography-css-variables(markdown-p, default);
108
126
  }
109
127
 
110
128
  .mc-markdown__ul,
111
129
  .mc-markdown__ol {
112
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
130
+ @include mc-typography-css-variables(markdown-list, default);
113
131
  }
114
132
 
115
133
  .mc-markdown__blockquote > .mc-markdown__p {
116
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
134
+ @include mc-typography-css-variables(markdown-blockquote, default);
117
135
  }
118
136
 
119
137
  .mc-markdown__code {
120
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
138
+ @include mc-typography-css-variables(markdown-code, default);
121
139
  }
122
140
 
123
141
  .mc-markdown__a {
124
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
142
+ @include mc-typography-css-variables(markdown-link, default);
125
143
  }
126
144
 
127
145
  .mc-markdown__img + em {
128
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
146
+ @include mc-typography-css-variables(markdown-image, caption);
129
147
  }
130
148
 
131
149
  .mc-markdown__table > .mc-markdown__thead {
132
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
150
+ @include mc-typography-css-variables(markdown-table, header);
133
151
  }
134
152
 
135
153
  .mc-markdown__table > .mc-markdown__tbody {
136
- @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
154
+ @include mc-typography-css-variables(markdown-table, body);
137
155
  }
138
156
  }
139
157
  }
@@ -2,6 +2,7 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../core/styles/tokens';
5
+ @use '../core/styles/common/tokens' as *;
5
6
 
6
7
 
7
8
  $tokens: meta.module-variables(tokens) !default;
@@ -20,11 +21,12 @@ $tokens: meta.module-variables(tokens) !default;
20
21
  // h1, h2, h3, h4, h5, h6
21
22
  @for $i from 1 through 6 {
22
23
  .mc-markdown__h#{$i} {
23
- max-width: var(--mc-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
24
- margin-top: var(--mc-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
25
- margin-bottom: var(
26
- --mc-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom)
27
- );
24
+ max-width: mc-css-variable(
25
+ mc-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
26
+ margin-top: mc-css-variable(
27
+ mc-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
28
+ margin-bottom: mc-css-variable(
29
+ mc-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom));
28
30
  }
29
31
  }
30
32
 
@@ -40,29 +42,26 @@ $tokens: meta.module-variables(tokens) !default;
40
42
  }
41
43
 
42
44
  .mc-markdown__p {
43
- max-width: var(--mc-markdown-p-size-max-width, map.get($tokens, markdown-p-size-max-width));
44
- margin-top: var(--mc-markdown-p-size-margin-top, map.get($tokens, markdown-p-size-margin-top));
45
- margin-bottom: var(--mc-markdown-p-size-margin-bottom, map.get($tokens, markdown-p-size-margin-bottom));
45
+ max-width: mc-css-variable(markdown-p-size-max-width);
46
+ margin-top: mc-css-variable(markdown-p-size-margin-top);
47
+ margin-bottom: mc-css-variable(markdown-p-size-margin-bottom);
46
48
  }
47
49
 
48
50
  .mc-markdown__ul,
49
51
  .mc-markdown__ol {
50
- max-width: var(--mc-markdown-list-size-max-width, map.get($tokens, markdown-list-size-max-width));
51
- margin-top: var(--mc-markdown-list-size-margin-top, map.get($tokens, markdown-list-size-margin-top));
52
- margin-bottom: var(--mc-markdown-list-size-margin-bottom, map.get($tokens, markdown-list-size-margin-bottom));
52
+ max-width: mc-css-variable(markdown-list-size-max-width);
53
+ margin-top: mc-css-variable(markdown-list-size-margin-top);
54
+ margin-bottom: mc-css-variable(markdown-list-size-margin-bottom);
53
55
 
54
56
  > li {
55
- margin-bottom: var(
56
- --mc-markdown-list-size-item-margin-bottom,
57
- map.get($tokens, markdown-list-size-item-margin-bottom)
58
- );
57
+ margin-bottom: mc-css-variable(markdown-list-size-item-margin-bottom);
59
58
  }
60
59
  }
61
60
 
62
61
  .mc-markdown__ul {
63
62
  position: relative;
64
63
  list-style: none;
65
- padding: var(--mc-markdown-list-size-ul-padding, map.get($tokens, markdown-list-size-ul-padding));
64
+ padding: mc-css-variable(markdown-list-size-ul-padding);
66
65
  }
67
66
 
68
67
  .mc-markdown__ul > li:before {
@@ -84,10 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
84
83
  &:before {
85
84
  content:counter(li) ".";
86
85
  counter-increment: li;
87
- padding-right: var(
88
- --mc-markdown-list-size-ol-number-padding-right,
89
- map.get($tokens, markdown-list-size-ol-number-padding-right)
90
- );
86
+ padding-right: mc-css-variable(markdown-list-size-ol-number-padding-right);
91
87
  }
92
88
 
93
89
  > * {
@@ -98,33 +94,20 @@ $tokens: meta.module-variables(tokens) !default;
98
94
 
99
95
  .mc-markdown__p + .mc-markdown__ul,
100
96
  .mc-markdown__p + .mc-markdown__ol {
101
- margin-top: var(
102
- --mc-markdown-list-size-margin-top-after-paragraph,
103
- map.get($tokens, markdown-list-size-margin-top-after-paragraph)
104
- );
97
+ margin-top: mc-css-variable(markdown-list-size-margin-top-after-paragraph);
105
98
  }
106
99
 
107
100
  .mc-markdown__blockquote {
108
- max-width: var(
109
- --mc-markdown-blockquote-size-max-width, map.get($tokens, markdown-blockquote-size-max-width)
110
- );
111
- margin-top: var(
112
- --mc-markdown-blockquote-size-margin-top, map.get($tokens, markdown-blockquote-size-margin-top)
113
- );
101
+ max-width: mc-css-variable(markdown-blockquote-size-max-width);
102
+ margin-top: mc-css-variable(markdown-blockquote-size-margin-top);
114
103
 
115
- margin-bottom: var(
116
- --mc-markdown-blockquote-size-margin-bottom, map.get($tokens, markdown-blockquote-size-margin-bottom)
117
- );
104
+ margin-bottom: mc-css-variable(markdown-blockquote-size-margin-bottom);
118
105
 
119
- border-left-width: var(
120
- --mc-markdown-blockquote-size-line-width, map.get($tokens, markdown-blockquote-size-line-width)
121
- );
106
+ border-left-width: mc-css-variable(markdown-blockquote-size-line-width);
122
107
 
123
108
  border-left-style: solid;
124
109
 
125
- padding: var(
126
- --mc-markdown-blockquote-size-padding, map.get($tokens, markdown-blockquote-size-padding)
127
- );
110
+ padding: mc-css-variable(markdown-blockquote-size-padding);
128
111
 
129
112
  margin-left: 0;
130
113
  margin-right: 0;
@@ -139,53 +122,33 @@ $tokens: meta.module-variables(tokens) !default;
139
122
  position: relative;
140
123
  overflow-x: auto;
141
124
 
142
- margin-top: var(
143
- --mc-markdown-code-size-multiline-margin-top,
144
- map.get($tokens, markdown-code-size-multiline-margin-top)
145
- );
146
- margin-bottom: var(
147
- --mc-markdown-code-size-multiline-margin-bottom,
148
- map.get($tokens, markdown-code-size-multiline-margin-bottom)
149
- );
125
+ margin-top: mc-css-variable(markdown-code-size-multiline-margin-top);
126
+ margin-bottom: mc-css-variable(markdown-code-size-multiline-margin-bottom);
150
127
 
151
- padding: var(
152
- --mc-markdown-code-size-multiline-padding,
153
- map.get($tokens, markdown-code-size-multiline-padding)
154
- );
128
+ padding: mc-css-variable(markdown-code-size-multiline-padding);
155
129
  }
156
130
 
157
131
  .mc-markdown__pre,
158
132
  .mc-markdown__p > .mc-markdown__code {
159
- border-radius: var(
160
- --mc-markdown-code-size-border-radius, map.get($tokens, markdown-code-size-border-radius)
161
- );
162
- border-width: var(
163
- --mc-markdown-code-size-border-width, map.get($tokens, markdown-code-size-border-width)
164
- );
133
+ border-radius: mc-css-variable(markdown-code-size-border-radius);
134
+ border-width: mc-css-variable(markdown-code-size-border-width);
165
135
  border-style: solid;
166
136
  }
167
137
 
168
138
  .mc-markdown__p > .mc-markdown__code {
169
- max-width: var(--mc-markdown-code-size-max-width, map.get($tokens, markdown-code-size-max-width));
170
- padding: var(--mc-markdown-code-size-inline-padding, map.get($tokens, markdown-code-size-inline-padding));
139
+ max-width: mc-css-variable(markdown-code-size-max-width);
140
+ padding: mc-css-variable(markdown-code-size-inline-padding);
171
141
  }
172
142
 
173
143
  .mc-markdown__img {
174
- max-width: var(--mc-markdown-image-size-max-width, map.get($tokens, markdown-image-size-max-width));
175
- margin-top: var(--mc-markdown-image-size-margin-top, map.get($tokens, markdown-image-size-margin-top));
176
- margin-bottom: var(
177
- --mc-markdown-image-size-margin-bottom, map.get($tokens, markdown-image-size-margin-bottom)
178
- );
144
+ max-width: mc-css-variable(markdown-image-size-max-width);
145
+ margin-top: mc-css-variable(markdown-image-size-margin-top);
146
+ margin-bottom: mc-css-variable(markdown-image-size-margin-bottom);
179
147
 
180
148
  + em {
181
149
  display: block;
182
- margin-top: var(
183
- --mc-markdown-image-size-caption-margin-top, map.get($tokens, markdown-image-size-caption-margin-top)
184
- );
185
- margin-bottom: var(
186
- --mc-markdown-image-size-caption-margin-bottom,
187
- map.get($tokens, markdown-image-size-caption-margin-bottom)
188
- );
150
+ margin-top: mc-css-variable(markdown-image-size-caption-margin-top);
151
+ margin-bottom: mc-css-variable(markdown-image-size-caption-margin-bottom);
189
152
  }
190
153
  }
191
154
 
@@ -194,10 +157,8 @@ $tokens: meta.module-variables(tokens) !default;
194
157
  border-left: none;
195
158
  border-right: none;
196
159
  border-bottom-style: solid;
197
- border-bottom-width: var(--mc-markdown-hr-size-width, map.get($tokens, markdown-hr-size-width));
198
- margin: var(
199
- --mc-markdown-hr-size-margin-vertical, map.get($tokens, markdown-hr-size-margin-vertical)
200
- ) 0;
160
+ border-bottom-width: mc-css-variable(markdown-hr-size-width);
161
+ margin: mc-css-variable(markdown-hr-size-margin-vertical) 0;
201
162
  }
202
163
 
203
164
  .mc-markdown__table {
@@ -205,23 +166,21 @@ $tokens: meta.module-variables(tokens) !default;
205
166
  overflow-x: auto;
206
167
  display: table;
207
168
  border-collapse: collapse;
208
- margin-bottom: var(--mc-markdown-table-size-margin-bottom, map.get($tokens, markdown-table-size-margin-bottom));
169
+ margin-bottom: mc-css-variable(markdown-table-size-margin-bottom);
209
170
 
210
171
  td {
211
172
  vertical-align: top;
212
173
  }
213
174
 
214
175
  th, td {
215
- padding: var(--mc-markdown-table-size-padding, map.get($tokens, markdown-table-size-padding));
176
+ padding: mc-css-variable(markdown-table-size-padding);
216
177
  font-weight: 400;
217
178
  }
218
179
  }
219
180
 
220
181
  .mc-markdown__table > .mc-markdown__thead {
221
182
  border-bottom-style: solid;
222
- border-bottom-width: var(
223
- --mc-markdown-table-size-border-width, map.get($tokens, markdown-table-size-border-width)
224
- );
183
+ border-bottom-width: mc-css-variable(markdown-table-size-border-width);
225
184
 
226
185
  text-align: left;
227
186
 
@@ -2,6 +2,7 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../core/styles/tokens';
5
+ @use '../core/styles/common/tokens' as *;
5
6
 
6
7
 
7
8
  $tokens: meta.module-variables(tokens) !default;
@@ -16,7 +17,7 @@ $tokens: meta.module-variables(tokens) !default;
16
17
  }
17
18
 
18
19
  .mc-modal-body {
19
- padding: var(--mc-modal-confirm-size-padding, map.get($tokens, modal-confirm-size-padding));
20
+ padding: mc-css-variable(modal-confirm-size-padding);
20
21
  }
21
22
 
22
23
  // TODO
@@ -43,7 +44,7 @@ $tokens: meta.module-variables(tokens) !default;
43
44
  }
44
45
 
45
46
  .mc-confirm-btns {
46
- border-radius: var(--mc-modal-footer-size-border-radius, map.get($tokens, modal-footer-size-border-radius));
47
+ border-radius: mc-css-variable(modal-footer-size-border-radius);
47
48
  text-align: right;
48
49
 
49
50
  button + button, button:only-child {