@ptsecurity/mosaic 17.0.0 → 17.2.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 (201) hide show
  1. package/autocomplete/_autocomplete-theme.scss +2 -1
  2. package/autocomplete/autocomplete-trigger.directive.d.ts +7 -1
  3. package/autocomplete/autocomplete.scss +7 -11
  4. package/button/_button-base.scss +10 -10
  5. package/button/_button-theme.scss +32 -32
  6. package/button/button.scss +9 -15
  7. package/button-toggle/_button-toggle-theme.scss +32 -24
  8. package/button-toggle/button-toggle.scss +18 -57
  9. package/card/_card-theme.scss +23 -20
  10. package/card/card.component.scss +2 -1
  11. package/checkbox/_checkbox-theme.scss +33 -29
  12. package/checkbox/checkbox.scss +7 -6
  13. package/code-block/_code-block-theme.scss +201 -113
  14. package/code-block/actionbar.component.scss +5 -7
  15. package/code-block/code-block.scss +5 -6
  16. package/core/forms/_forms-theme.scss +17 -46
  17. package/core/option/_optgroup-theme.scss +5 -5
  18. package/core/option/_option-action-theme.scss +1 -4
  19. package/core/option/_option-theme.scss +8 -10
  20. package/core/option/option.scss +5 -4
  21. package/core/pop-up/pop-up-trigger.d.ts +3 -1
  22. package/core/styles/_mosaic-theme.scss +3 -3
  23. package/core/styles/common/_popup.scss +4 -3
  24. package/core/styles/common/_tokens.scss +39 -0
  25. package/core/styles/theming/_alerts.scss +16 -24
  26. package/core/styles/theming/_badges.scss +7 -8
  27. package/core/styles/theming/_components-theming.scss +4 -2
  28. package/core/styles/theming/_scrollbars.scss +17 -2
  29. package/datepicker/_datepicker-theme.scss +18 -19
  30. package/datepicker/calendar-body.scss +6 -9
  31. package/datepicker/calendar-header.scss +9 -26
  32. package/datepicker/calendar.scss +5 -16
  33. package/datepicker/datepicker-content.scss +2 -4
  34. package/datepicker/datepicker-input.scss +2 -1
  35. package/datepicker/datepicker-toggle.scss +3 -2
  36. package/divider/_divider-theme.scss +4 -2
  37. package/divider/divider.scss +5 -4
  38. package/dl/_dl-theme.scss +12 -36
  39. package/dl/dl.scss +13 -46
  40. package/dropdown/_dropdown-theme.scss +19 -17
  41. package/dropdown/dropdown-item.scss +7 -6
  42. package/dropdown/dropdown.scss +11 -26
  43. package/ellipsis-center/ellipsis-center.directive.d.ts +3 -2
  44. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +14 -2
  45. package/esm2022/button/button.component.mjs +2 -2
  46. package/esm2022/code-block/actionbar.component.mjs +2 -2
  47. package/esm2022/code-block/code-block.component.mjs +2 -2
  48. package/esm2022/core/pop-up/pop-up-trigger.mjs +19 -11
  49. package/esm2022/core/version.mjs +2 -2
  50. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  51. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  52. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +7 -5
  53. package/esm2022/file-upload/file-upload.module.mjs +8 -4
  54. package/esm2022/file-upload/multiple-file-upload.component.mjs +15 -34
  55. package/esm2022/file-upload/single-file-upload.component.mjs +15 -34
  56. package/esm2022/form-field/form-field.mjs +2 -2
  57. package/esm2022/input/input-password.mjs +2 -3
  58. package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
  59. package/esm2022/markdown/markdown.component.mjs +2 -2
  60. package/esm2022/modal/modal.component.mjs +6 -6
  61. package/esm2022/navbar/navbar-item.component.mjs +9 -9
  62. package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
  63. package/esm2022/radio/radio.component.mjs +2 -2
  64. package/esm2022/select/select-option.directive.mjs +7 -5
  65. package/esm2022/select/select.component.mjs +16 -9
  66. package/esm2022/tabs/tab-header.component.mjs +2 -2
  67. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  68. package/esm2022/tags/tag-input.mjs +28 -8
  69. package/esm2022/timezone/timezone-option.directive.mjs +7 -5
  70. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  71. package/esm2022/title/title.directive.mjs +2 -3
  72. package/esm2022/tooltip/tooltip.component.mjs +27 -12
  73. package/esm2022/tree-select/tree-select.component.mjs +21 -8
  74. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs +13 -1
  75. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  76. package/fesm2022/ptsecurity-mosaic-button.mjs +2 -2
  77. package/fesm2022/ptsecurity-mosaic-button.mjs.map +1 -1
  78. package/fesm2022/ptsecurity-mosaic-code-block.mjs +4 -4
  79. package/fesm2022/ptsecurity-mosaic-code-block.mjs.map +1 -1
  80. package/fesm2022/ptsecurity-mosaic-core.mjs +19 -11
  81. package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
  82. package/fesm2022/ptsecurity-mosaic-dropdown.mjs +4 -4
  83. package/fesm2022/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  84. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs +5 -4
  85. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -1
  86. package/fesm2022/ptsecurity-mosaic-file-upload.mjs +26 -58
  87. package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
  88. package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
  89. package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
  90. package/fesm2022/ptsecurity-mosaic-input.mjs +1 -2
  91. package/fesm2022/ptsecurity-mosaic-input.mjs.map +1 -1
  92. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs +2 -2
  93. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs.map +1 -1
  94. package/fesm2022/ptsecurity-mosaic-markdown.mjs +2 -2
  95. package/fesm2022/ptsecurity-mosaic-markdown.mjs.map +1 -1
  96. package/fesm2022/ptsecurity-mosaic-modal.mjs +5 -5
  97. package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
  98. package/fesm2022/ptsecurity-mosaic-navbar.mjs +8 -8
  99. package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
  100. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs +1 -1
  101. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  102. package/fesm2022/ptsecurity-mosaic-radio.mjs +2 -2
  103. package/fesm2022/ptsecurity-mosaic-radio.mjs.map +1 -1
  104. package/fesm2022/ptsecurity-mosaic-select.mjs +25 -17
  105. package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
  106. package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
  107. package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
  108. package/fesm2022/ptsecurity-mosaic-tags.mjs +26 -7
  109. package/fesm2022/ptsecurity-mosaic-tags.mjs.map +1 -1
  110. package/fesm2022/ptsecurity-mosaic-timezone.mjs +7 -6
  111. package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
  112. package/fesm2022/ptsecurity-mosaic-title.mjs +1 -2
  113. package/fesm2022/ptsecurity-mosaic-title.mjs.map +1 -1
  114. package/fesm2022/ptsecurity-mosaic-tooltip.mjs +25 -11
  115. package/fesm2022/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  116. package/fesm2022/ptsecurity-mosaic-tree-select.mjs +20 -7
  117. package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  118. package/file-upload/_file-upload-theme.scss +87 -54
  119. package/file-upload/file-upload.module.d.ts +2 -1
  120. package/file-upload/file-upload.scss +0 -15
  121. package/file-upload/multiple-file-upload.component.d.ts +4 -12
  122. package/file-upload/multiple-file-upload.component.scss +58 -54
  123. package/file-upload/single-file-upload.component.d.ts +4 -12
  124. package/file-upload/single-file-upload.component.scss +15 -24
  125. package/form-field/_form-field-theme.scss +43 -34
  126. package/form-field/form-field.scss +14 -13
  127. package/icon/_icon-theme.scss +26 -25
  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 +36 -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 +61 -43
  139. package/markdown/markdown.scss +39 -80
  140. package/modal/_modal-confirm.scss +3 -2
  141. package/modal/_modal-theme.scss +20 -21
  142. package/modal/modal.scss +18 -15
  143. package/navbar/_navbar-theme.scss +19 -18
  144. package/navbar/navbar-brand.scss +7 -9
  145. package/navbar/navbar-item.component.d.ts +4 -4
  146. package/navbar/navbar-item.scss +8 -7
  147. package/navbar/vertical-navbar.scss +4 -12
  148. package/package.json +25 -25
  149. package/popover/_popover-theme.scss +35 -35
  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 +32 -24
  158. package/radio/radio.scss +8 -11
  159. package/select/_select-theme.scss +13 -13
  160. package/select/select-option.directive.d.ts +3 -2
  161. package/select/select.component.d.ts +1 -0
  162. package/select/select.scss +19 -42
  163. package/sidepanel/_sidepanel-theme.scss +9 -9
  164. package/sidepanel/sidepanel.scss +11 -10
  165. package/splitter/_splitter-theme.scss +5 -3
  166. package/table/_table-theme.scss +9 -9
  167. package/table/table.scss +11 -14
  168. package/tabs/_tabs-common.scss +15 -14
  169. package/tabs/_tabs-theme.scss +67 -55
  170. package/tabs/tab-group.scss +2 -1
  171. package/tabs/tab-header.scss +16 -3
  172. package/tabs/tab-nav-bar/tab-nav-bar.scss +15 -2
  173. package/tags/_tag-theme.scss +30 -27
  174. package/tags/tag-input.d.ts +9 -4
  175. package/tags/tag-list.scss +4 -3
  176. package/tags/tag.scss +9 -8
  177. package/textarea/_textarea-base.scss +2 -4
  178. package/textarea/_textarea-theme.scss +8 -8
  179. package/textarea/textarea.scss +2 -4
  180. package/timepicker/timepicker.scss +2 -7
  181. package/timezone/_timezone-option-theme.scss +7 -7
  182. package/timezone/timezone-option.component.scss +5 -4
  183. package/timezone/timezone-option.directive.d.ts +3 -2
  184. package/title/title.directive.d.ts +0 -1
  185. package/toast/_toast-theme.scss +13 -16
  186. package/toast/toast-container.component.scss +2 -5
  187. package/toast/toast.component.scss +15 -17
  188. package/toggle/_toggle-theme.scss +22 -21
  189. package/toggle/toggle.scss +19 -21
  190. package/tooltip/_tooltip-theme.scss +26 -31
  191. package/tooltip/tooltip.component.d.ts +12 -8
  192. package/tooltip/tooltip.scss +13 -17
  193. package/tree/_tree-theme.scss +8 -8
  194. package/tree/toggle.scss +3 -5
  195. package/tree/tree-option.scss +5 -4
  196. package/tree-select/_tree-select-theme.scss +9 -9
  197. package/tree-select/tree-select.component.d.ts +1 -0
  198. package/tree-select/tree-select.scss +17 -35
  199. package/_theming.scss +0 -10827
  200. package/_visual.scss +0 -3541
  201. package/prebuilt-visual/default-visual.css +0 -1
@@ -3,13 +3,14 @@
3
3
  @use 'sass:list';
4
4
 
5
5
  @use '../core/styles/typography/typography-utils' as *;
6
+ @use '../core/styles/common/tokens' as *;
6
7
 
7
8
  @mixin mc-code-block-theme($theme) {
8
9
  $code-block: map.get(map.get($theme, components), code-block);
9
10
 
10
11
  .mc-code-block {
11
- background-color: map.get($code-block, main-background);
12
- border-color: map.get($code-block, border);
12
+ background-color: mc-css-variable(code-block-main-background, map-get($code-block, main-background));
13
+ border-color: mc-css-variable(code-block-border, map-get($code-block, border));
13
14
 
14
15
  .hljs {
15
16
  $hljs: map.get($code-block, hljs);
@@ -18,275 +19,360 @@
18
19
  overflow-x: auto;
19
20
 
20
21
  &-addition {
21
- background-color: map.get($hljs, addition-background);
22
- color: map.get($hljs, addition-color);
22
+ background-color: mc-css-variable(
23
+ code-block-hljs-addition-background, map-get($hljs, addition-background)
24
+ );
25
+ color: mc-css-variable(code-block-hljs-addition-color, map-get($hljs, addition-color));
23
26
  }
24
27
 
25
28
  &-attr {
26
- background-color: map.get($hljs, attr-background);
27
- color: map.get($hljs, attr-color);
29
+ background-color: mc-css-variable(code-block-hljs-attr-background, map-get($hljs, attr-background));
30
+ color: mc-css-variable(code-block-hljs-attr-color, map-get($hljs, attr-color));
28
31
  }
29
32
 
30
33
  &-attribute {
31
- background-color: map.get($hljs, attribute-background);
32
- color: map.get($hljs, attribute-color);
34
+ background-color: mc-css-variable(
35
+ code-block-hljs-attribute-background, map-get($hljs, attribute-background)
36
+ );
37
+ color: mc-css-variable(code-block-hljs-attribute-color, map-get($hljs, attribute-color));
33
38
  }
34
39
 
35
40
  &-built_in {
36
- background-color: map.get($hljs, built_in-background);
37
- color: map.get($hljs, built_in-color);
41
+ background-color: mc-css-variable(
42
+ code-block-hljs-built_in-background, map-get($hljs, built_in-background)
43
+ );
44
+ color: mc-css-variable(code-block-hljs-built_in-color, map-get($hljs, built_in-color));
38
45
  }
39
46
 
40
47
  &-bullet {
41
- background-color: map.get($hljs, bullet-background);
42
- color: map.get($hljs, bullet-color);
48
+ background-color: mc-css-variable(
49
+ code-block-hljs-bullet-background, map-get($hljs, bullet-background)
50
+ );
51
+ color: mc-css-variable(code-block-hljs-bullet-color, map-get($hljs, bullet-color));
43
52
  }
44
53
 
45
54
  &-char-escape {
46
- background-color: map.get($hljs, char-escape-background);
47
- color: map.get($hljs, char-escape-color);
55
+ background-color: mc-css-variable(
56
+ code-block-hljs-char-escape-background, map-get($hljs, char-escape-background)
57
+ );
58
+ color: mc-css-variable(code-block-hljs-char-escape-color, map-get($hljs, char-escape-color));
48
59
  }
49
60
 
50
61
  &-class {
51
- background-color: map.get($hljs, class-background);
52
- color: map.get($hljs, class-color);
62
+ background-color: mc-css-variable(code-block-hljs-class-background, map-get($hljs, class-background));
63
+ color: mc-css-variable(code-block-hljs-class-color, map-get($hljs, class-color));
53
64
  }
54
65
 
55
66
  &-code {
56
- background-color: map.get($hljs, code-background);
57
- color: map.get($hljs, code-color);
67
+ background-color: mc-css-variable(code-block-hljs-code-background, map-get($hljs, code-background));
68
+ color: mc-css-variable(code-block-hljs-code-color, map-get($hljs, code-color));
58
69
  }
59
70
 
60
71
  &-comment {
61
- background-color: map.get($hljs, comment-background);
62
- color: map.get($hljs, comment-color);
72
+ background-color: mc-css-variable(
73
+ code-block-hljs-comment-background, map-get($hljs, comment-background)
74
+ );
75
+ color: mc-css-variable(code-block-hljs-comment-color, map-get($hljs, comment-color));
63
76
  }
64
77
 
65
78
  &-deletion {
66
- background-color: map.get($hljs, deletion-background);
67
- color: map.get($hljs, deletion-color);
79
+ background-color: mc-css-variable(
80
+ code-block-hljs-deletion-background, map-get($hljs, deletion-background)
81
+ );
82
+ color: mc-css-variable(code-block-hljs-deletion-color, map-get($hljs, deletion-color));
68
83
  }
69
84
 
70
85
  &-doctag {
71
- background-color: map.get($hljs, doctag-background);
72
- color: map.get($hljs, doctag-color);
86
+ background-color: mc-css-variable(code-block-hljs-doctag-background, map-get($hljs, doctag-background));
87
+ color: mc-css-variable(code-block-hljs-doctag-color, map-get($hljs, doctag-color));
73
88
  }
74
89
 
75
90
  &-emphasis {
76
- background-color: map.get($hljs, emphasis-background);
77
- color: map.get($hljs, emphasis-color);
91
+ background-color: mc-css-variable(
92
+ code-block-hljs-emphasis-background, map-get($hljs, emphasis-background)
93
+ );
94
+ color: mc-css-variable(code-block-hljs-emphasis-color, map-get($hljs, emphasis-color));
78
95
  }
79
96
 
80
97
  &-formula {
81
- background-color: map.get($hljs, formula-background);
82
- color: map.get($hljs, formula-color);
98
+ background-color: mc-css-variable(
99
+ code-block-hljs-formula-background, map-get($hljs, formula-background)
100
+ );
101
+ color: mc-css-variable(code-block-hljs-formula-color, map-get($hljs, formula-color));
83
102
  }
84
103
 
85
104
  &-function {
86
- background-color: map.get($hljs, function-background);
87
- color: map.get($hljs, function-color);
105
+ background-color: mc-css-variable(
106
+ code-block-hljs-function-background, map-get($hljs, function-background)
107
+ );
108
+ color: mc-css-variable(code-block-hljs-function-color, map-get($hljs, function-color));
88
109
  }
89
110
 
90
111
  &-keyword {
91
- background-color: map.get($hljs, keyword-background);
92
- color: map.get($hljs, keyword-color);
112
+ background-color: mc-css-variable(
113
+ code-block-hljs-keyword-background, map-get($hljs, keyword-background)
114
+ );
115
+ color: mc-css-variable(code-block-hljs-keyword-color, map-get($hljs, keyword-color));
93
116
  }
94
117
 
95
118
  &-link {
96
- background-color: map.get($hljs, link-background);
97
- color: map.get($hljs, link-color);
119
+ background-color: mc-css-variable(code-block-hljs-link-background, map-get($hljs, link-background));
120
+ color: mc-css-variable(code-block-hljs-link-color, map-get($hljs, link-color));
98
121
  }
99
122
 
100
123
  &-literal {
101
- background-color: map.get($hljs, literal-background);
102
- color: map.get($hljs, literal-color);
124
+ background-color: mc-css-variable(
125
+ code-block-hljs-literal-background, map-get($hljs, literal-background)
126
+ );
127
+ color: mc-css-variable(code-block-hljs-literal-color, map-get($hljs, literal-color));
103
128
  }
104
129
 
105
130
  &-meta {
106
- background-color: map.get($hljs, meta-background);
107
- color: map.get($hljs, meta-color);
131
+ background-color: mc-css-variable(code-block-hljs-meta-background, map-get($hljs, meta-background));
132
+ color: mc-css-variable(code-block-hljs-meta-color, map-get($hljs, meta-color));
108
133
  }
109
134
 
110
135
  &-meta-keyword {
111
- background-color: map.get($hljs, meta-keyword-background);
112
- color: map.get($hljs, meta-keyword-color);
136
+ background-color: mc-css-variable(
137
+ code-block-hljs-meta-keyword-background, map-get($hljs, meta-keyword-background)
138
+ );
139
+ color: mc-css-variable(code-block-hljs-meta-keyword-color, map-get($hljs, meta-keyword-color));
113
140
  }
114
141
 
115
142
  &-meta-string {
116
- background-color: map.get($hljs, meta-string-background);
117
- color: map.get($hljs, meta-string-color);
143
+ background-color: mc-css-variable(
144
+ code-block-hljs-meta-string-background, map-get($hljs, meta-string-background)
145
+ );
146
+ color: mc-css-variable(code-block-hljs-meta-string-color, map-get($hljs, meta-string-color));
118
147
  }
119
148
 
120
149
  &-meta-prompt {
121
- background-color: map.get($hljs, meta-prompt-background);
122
- color: map.get($hljs, meta-prompt-color);
150
+ background-color: mc-css-variable(
151
+ code-block-hljs-meta-prompt-background, map-get($hljs, meta-prompt-background)
152
+ );
153
+ color: mc-css-variable(code-block-hljs-meta-prompt-color, map-get($hljs, meta-prompt-color));
123
154
  }
124
155
 
125
156
  &-name {
126
- background-color: map.get($hljs, name-background);
127
- color: map.get($hljs, name-color);
157
+ background-color: mc-css-variable(code-block-hljs-name-background, map-get($hljs, name-background));
158
+ color: mc-css-variable(code-block-hljs-name-color, map-get($hljs, name-color));
128
159
  }
129
160
 
130
161
  &-number {
131
- background-color: map.get($hljs, number-background);
132
- color: map.get($hljs, number-color);
162
+ background-color: mc-css-variable(code-block-hljs-number-background, map-get($hljs, number-background));
163
+ color: mc-css-variable(code-block-hljs-number-color, map-get($hljs, number-color));
133
164
  }
134
165
 
135
166
  &-operator {
136
- background-color: map.get($hljs, operator-background);
137
- color: map.get($hljs, operator-color);
167
+ background-color: mc-css-variable(
168
+ code-block-hljs-operator-background, map-get($hljs, operator-background)
169
+ );
170
+ color: mc-css-variable(code-block-hljs-operator-color, map-get($hljs, operator-color));
138
171
  }
139
172
 
140
173
  &-params {
141
- background-color: map.get($hljs, params-background);
142
- color: map.get($hljs, params-color);
174
+ background-color: mc-css-variable(code-block-hljs-params-background, map-get($hljs, params-background));
175
+ color: mc-css-variable(code-block-hljs-params-color, map-get($hljs, params-color));
143
176
  }
144
177
 
145
178
  &-property {
146
- background-color: map.get($hljs, property-background);
147
- color: map.get($hljs, property-color);
179
+ background-color: mc-css-variable(
180
+ code-block-hljs-property-background, map-get($hljs, property-background)
181
+ );
182
+ color: mc-css-variable(code-block-hljs-property-color, map-get($hljs, property-color));
148
183
  }
149
184
 
150
185
  &-punctuation {
151
- background-color: map.get($hljs, punctuation-background);
152
- color: map.get($hljs, punctuation-color);
186
+ background-color: mc-css-variable(
187
+ code-block-hljs-punctuation-background, map-get($hljs, punctuation-background)
188
+ );
189
+ color: mc-css-variable(code-block-hljs-punctuation-color, map-get($hljs, punctuation-color));
153
190
  }
154
191
 
155
192
  &-quote {
156
- background-color: map.get($hljs, quote-background);
157
- color: map.get($hljs, quote-color);
193
+ background-color: mc-css-variable(code-block-hljs-quote-background, map-get($hljs, quote-background));
194
+ color: mc-css-variable(code-block-hljs-quote-color, map-get($hljs, quote-color));
158
195
  }
159
196
 
160
197
  &-regexp {
161
- background-color: map.get($hljs, regexp-background);
162
- color: map.get($hljs, regexp-color);
198
+ background-color: mc-css-variable(code-block-hljs-regexp-background, map-get($hljs, regexp-background));
199
+ color: mc-css-variable(code-block-hljs-regexp-color, map-get($hljs, regexp-color));
163
200
  }
164
201
 
165
202
  &-section {
166
- background-color: map.get($hljs, section-background);
167
- color: map.get($hljs, section-color);
203
+ background-color: mc-css-variable(
204
+ code-block-hljs-section-background, map-get($hljs, section-background)
205
+ );
206
+ color: mc-css-variable(code-block-hljs-section-color, map-get($hljs, section-color));
168
207
  }
169
208
 
170
209
  &-selector-attr {
171
- background-color: map.get($hljs, selector-attr-background);
172
- color: map.get($hljs, selector-attr-color);
210
+ background-color: mc-css-variable(
211
+ code-block-hljs-selector-attr-background, map-get($hljs, selector-attr-background)
212
+ );
213
+ color: mc-css-variable(code-block-hljs-selector-attr-color, map-get($hljs, selector-attr-color));
173
214
  }
174
215
 
175
216
  &-selector-class {
176
- background-color: map.get($hljs, selector-class-background);
177
- color: map.get($hljs, selector-class-color);
217
+ background-color: mc-css-variable(
218
+ code-block-hljs-selector-class-background, map-get($hljs, selector-class-background)
219
+ );
220
+ color: mc-css-variable(code-block-hljs-selector-class-color, map-get($hljs, selector-class-color));
178
221
  }
179
222
 
180
223
  &-selector-id {
181
- background-color: map.get($hljs, selector-id-background);
182
- color: map.get($hljs, selector-id-color);
224
+ background-color: mc-css-variable(
225
+ code-block-hljs-selector-id-background, map-get($hljs, selector-id-background)
226
+ );
227
+ color: mc-css-variable(code-block-hljs-selector-id-color, map-get($hljs, selector-id-color));
183
228
  }
184
229
 
185
230
  &-selector-pseudo {
186
- background-color: map.get($hljs, selector-pseudo-background);
187
- color: map.get($hljs, selector-pseudo-color);
231
+ background-color: mc-css-variable(
232
+ code-block-hljs-selector-pseudo-background, map-get($hljs, selector-pseudo-background)
233
+ );
234
+ color: mc-css-variable(code-block-hljs-selector-pseudo-color, map-get($hljs, selector-pseudo-color));
188
235
  }
189
236
 
190
237
  &-selector-tag {
191
- background-color: map.get($hljs, selector-tag-background);
192
- color: map.get($hljs, selector-tag-color);
238
+ background-color: mc-css-variable(
239
+ code-block-hljs-selector-tag-background, map-get($hljs, selector-tag-background)
240
+ );
241
+ color: mc-css-variable(code-block-hljs-selector-tag-color, map-get($hljs, selector-tag-color));
193
242
  }
194
243
 
195
244
  &-string {
196
- background-color: map.get($hljs, string-background);
197
- color: map.get($hljs, string-color);
245
+ background-color: mc-css-variable(code-block-hljs-string-background, map-get($hljs, string-background));
246
+ color: mc-css-variable(code-block-hljs-string-color, map-get($hljs, string-color));
198
247
  }
199
248
 
200
249
  &-strong {
201
- background-color: map.get($hljs, strong-background);
202
- color: map.get($hljs, strong-color);
250
+ background-color: mc-css-variable(code-block-hljs-strong-background, map-get($hljs, strong-background));
251
+ color: mc-css-variable(code-block-hljs-strong-color, map-get($hljs, strong-color));
203
252
  }
204
253
 
205
254
  &-subst {
206
- background-color: map.get($hljs, subst-background);
207
- color: map.get($hljs, subst-color);
255
+ background-color: mc-css-variable(code-block-hljs-subst-background, map-get($hljs, subst-background));
256
+ color: mc-css-variable(code-block-hljs-subst-color, map-get($hljs, subst-color));
208
257
  }
209
258
 
210
259
  &-symbol {
211
- background-color: map.get($hljs, symbol-background);
212
- color: map.get($hljs, symbol-color);
260
+ background-color: mc-css-variable(code-block-hljs-symbol-background, map-get($hljs, symbol-background));
261
+ color: mc-css-variable(code-block-hljs-symbol-color, map-get($hljs, symbol-color));
213
262
  }
214
263
 
215
264
  &-tag {
216
- background-color: map.get($hljs, tag-background);
217
- color: map.get($hljs, tag-color);
265
+ background-color: mc-css-variable(code-block-hljs-tag-background, map-get($hljs, tag-background));
266
+ color: mc-css-variable(code-block-hljs-tag-color, map-get($hljs, tag-color));
218
267
  }
219
268
 
220
269
  &-template-tag {
221
- background-color: map.get($hljs, template-tag-background);
222
- color: map.get($hljs, template-tag-color);
270
+ background-color: mc-css-variable(
271
+ code-block-hljs-template-tag-background, map-get($hljs, template-tag-background)
272
+ );
273
+ color: mc-css-variable(code-block-hljs-template-tag-color, map-get($hljs, template-tag-color));
223
274
  }
224
275
 
225
276
  &-template-variable {
226
- background-color: map.get($hljs, template-variable-background);
227
- color: map.get($hljs, template-variable-color);
277
+ background-color: mc-css-variable(
278
+ code-block-hljs-template-variable-background, map-get($hljs, template-variable-background)
279
+ );
280
+ color: mc-css-variable(
281
+ code-block-hljs-template-variable-color, map-get($hljs, template-variable-color)
282
+ );
228
283
  }
229
284
 
230
285
  &-title {
231
- background-color: map.get($hljs, title-background);
232
- color: map.get($hljs, title-color);
286
+ background-color: mc-css-variable(code-block-hljs-title-background, map-get($hljs, title-background));
287
+ color: mc-css-variable(code-block-hljs-title-color, map-get($hljs, title-color));
233
288
  }
234
289
 
235
290
  &-title-class {
236
- background-color: map.get($hljs, title-class-background);
237
- color: map.get($hljs, title-class-color);
291
+ background-color: mc-css-variable(
292
+ code-block-hljs-title-class-background, map-get($hljs, title-class-background)
293
+ );
294
+ color: mc-css-variable(code-block-hljs-title-class-color, map-get($hljs, title-class-color));
238
295
  }
239
296
 
240
297
  &-title-class-inherited {
241
- background-color: map.get($hljs, title-class-inherited-background);
242
- color: map.get($hljs, title-class-inherited-color);
298
+ background-color: mc-css-variable(
299
+ code-block-hljs-title-class-inherited-background, map-get($hljs, title-class-inherited-background)
300
+ );
301
+ color: mc-css-variable(
302
+ code-block-hljs-title-class-inherited-color, map-get($hljs, title-class-inherited-color)
303
+ );
243
304
  }
244
305
 
245
306
  &-title-function {
246
- background-color: map.get($hljs, title-function-background);
247
- color: map.get($hljs, title-function-color);
307
+ background-color: mc-css-variable(
308
+ code-block-hljs-title-function-background, map-get($hljs, title-function-background)
309
+ );
310
+ color: mc-css-variable(code-block-hljs-title-function-color, map-get($hljs, title-function-color));
248
311
  }
249
312
 
250
313
  &-title-function-invoke {
251
- background-color: map.get($hljs, title-function-invoke-background);
252
- color: map.get($hljs, title-function-invoke-color);
314
+ background-color: mc-css-variable(
315
+ code-block-hljs-title-function-invoke-background, map-get($hljs, title-function-invoke-background)
316
+ );
317
+ color: mc-css-variable(
318
+ code-block-hljs-title-function-invoke-color, map-get($hljs, title-function-invoke-color)
319
+ );
253
320
  }
254
321
 
255
322
  &-type {
256
- background-color: map.get($hljs, type-background);
257
- color: map.get($hljs, type-color);
323
+ background-color: mc-css-variable(code-block-hljs-type-background, map-get($hljs, type-background));
324
+ color: mc-css-variable(code-block-hljs-type-color, map-get($hljs, type-color));
258
325
  }
259
326
 
260
327
  &-variable {
261
- background-color: map.get($hljs, variable-background);
262
- color: map.get($hljs, variable-color);
328
+ background-color: mc-css-variable(
329
+ code-block-hljs-variable-background, map-get($hljs, variable-background)
330
+ );
331
+ color: mc-css-variable(code-block-hljs-variable-color, map-get($hljs, variable-color));
263
332
  }
264
333
 
265
334
  &-variable-constant {
266
- background-color: map.get($hljs, variable-constant-background);
267
- color: map.get($hljs, variable-constant-color);
335
+ background-color: mc-css-variable(
336
+ code-block-hljs-variable-constant-background, map-get($hljs, variable-constant-background)
337
+ );
338
+ color: mc-css-variable(
339
+ code-block-hljs-variable-constant-color, map-get($hljs, variable-constant-color)
340
+ );
268
341
  }
269
342
 
270
343
  &-variable-language {
271
- background-color: map.get($hljs, variable-language-background);
272
- color: map.get($hljs, variable-language-color);
344
+ background-color: mc-css-variable(
345
+ code-block-hljs-variable-language-background, map-get($hljs, variable-language-background)
346
+ );
347
+ color: mc-css-variable(
348
+ code-block-hljs-variable-language-color, map-get($hljs, variable-language-color)
349
+ );
273
350
  }
274
351
 
275
352
  &-ln-n {
276
- color: map.get($code-block, line-numbers-color);
353
+ color: mc-css-variable(code-block-line-numbers-color, map-get($code-block, line-numbers-color));
277
354
  }
278
355
 
279
356
  &-line-numbers {
280
- color: map.get($code-block, main-code-color);
357
+ color: mc-css-variable(code-block-main-code-color, map-get($code-block, main-code-color));
281
358
  }
282
359
  }
283
360
 
284
361
  &.mc-code-block_less-contrast {
285
- background-color: map.get($code-block, main-background-less-contrast);
362
+ background-color: mc-css-variable(
363
+ code-block-main-background-less-contrast, map-get($code-block, main-background-less-contrast)
364
+ );
365
+ }
366
+
367
+ &.mc-code-block_single-file {
368
+ .mc-tab-label {
369
+ user-select: text !important;
370
+ color: inherit !important;
371
+ }
286
372
  }
287
373
 
288
374
  .mc-tab-group:after {
289
- background: map.get($code-block, border);
375
+ background: mc-css-variable(code-block-border, map-get($code-block, border));
290
376
  }
291
377
 
292
378
  .mc-tab-header {
@@ -297,17 +383,19 @@
297
383
  }
298
384
 
299
385
  .mc-code-block__show-more {
300
- border-top-color: map.get($code-block, border) !important;
386
+ border-top-color: mc-css-variable(code-block-border, map-get($code-block, border));
301
387
  }
302
388
  }
303
389
 
304
390
  .mc-code-block-actionbar {
305
391
  .mc-code-block-actionbar_less-contrast {
306
- background-color: map-get($code-block, actionbar, bg-less-contrast);
392
+ background-color: mc-css-variable(
393
+ code-block-actionbar-bg-less-contrast, map-get($code-block, actionbar, bg-less-contrast)
394
+ );
307
395
  }
308
396
 
309
397
  &.mc-actionbar-block_floating {
310
- background-color: map-get($code-block, actionbar, bg);
398
+ background-color: mc-css-variable(code-block-actionbar-bg, map-get($code-block, actionbar, bg));
311
399
  }
312
400
  }
313
401
  }
@@ -316,7 +404,7 @@
316
404
  $tokens: map.get($config, tokens);
317
405
 
318
406
  .mc-code-block {
319
- @include mc-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
407
+ @include mc-typography-css-variables(code-block, default);
320
408
 
321
409
  & .mc-code-block__code {
322
410
  font: inherit;
@@ -326,7 +414,7 @@
326
414
  }
327
415
  }
328
416
 
329
- .hljs-ln-numbers {
417
+ & .hljs-ln-numbers {
330
418
  @include mc-typography-level-to-styles($config, caption-mono);
331
419
  }
332
420
  }
@@ -1,9 +1,7 @@
1
1
  @use 'sass:meta';
2
2
  @use 'sass:map';
3
3
  @use '../core/styles/tokens';
4
-
5
-
6
- $tokens: meta.module-variables(tokens) !default;
4
+ @use '../core/styles/common/tokens' as *;
7
5
 
8
6
 
9
7
  .mc-code-block-actionbar {
@@ -16,12 +14,12 @@ $tokens: meta.module-variables(tokens) !default;
16
14
  top: 4px;
17
15
  right: 8px;
18
16
 
19
- gap: map.get($tokens, code-block-size-actionbar-gap);
17
+ gap: mc-css-variable(code-block-size-actionbar-gap);
20
18
 
21
- border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
19
+ border-radius: mc-css-variable(code-block-size-actionbar-border-radius);
22
20
 
23
21
  &.mc-actionbar-block_floating {
24
- top: map.get($tokens, code-block-size-actionbar-margin-top);
25
- right: map.get($tokens, code-block-size-actionbar-margin-right);
22
+ top: mc-css-variable(code-block-size-actionbar-margin-top);
23
+ right: mc-css-variable(code-block-size-actionbar-margin-right);
26
24
  }
27
25
  }
@@ -1,8 +1,7 @@
1
1
  @use 'sass:meta';
2
2
  @use 'sass:map';
3
3
  @use '../core/styles/tokens';
4
-
5
- $tokens: meta.module-variables(tokens) !default;
4
+ @use '../core/styles/common/tokens' as *;
6
5
 
7
6
 
8
7
  /* stylelint-disable no-descending-specificity */
@@ -19,7 +18,7 @@ $tokens: meta.module-variables(tokens) !default;
19
18
 
20
19
  border-width: 1px;
21
20
  border-style: solid;
22
- border-radius: map.get($tokens, code-block-size-border-radius);
21
+ border-radius: mc-css-variable(code-block-size-border-radius);
23
22
 
24
23
  &:not(.mc-code-block_no-header) .mc-tab-group:after {
25
24
  content: "";
@@ -90,7 +89,7 @@ $tokens: meta.module-variables(tokens) !default;
90
89
  }
91
90
 
92
91
  > code {
93
- padding: map.get($tokens, code-block-size-padding) !important;
92
+ padding: mc-css-variable(code-block-size-padding);
94
93
  }
95
94
 
96
95
  .hljs-ln {
@@ -102,8 +101,8 @@ $tokens: meta.module-variables(tokens) !default;
102
101
  }
103
102
 
104
103
  .hljs-ln-numbers {
105
- border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
106
- padding: map.get($tokens, code-block-size-line-numbers-padding);
104
+ border-right-width: mc-css-variable(code-block-size-line-numbers-border-width);
105
+ padding: mc-css-variable(code-block-size-line-numbers-padding);
107
106
 
108
107
  vertical-align: baseline;
109
108
  text-align: right;