@genexus/mercury 0.1.2 → 0.1.3
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.
- package/dist/css/mercury.css +254 -84
- package/dist/css/mercury.css.map +1 -1
- package/dist/mercury.scss +634 -256
- package/package.json +6 -4
package/dist/mercury.scss
CHANGED
|
@@ -6,6 +6,26 @@
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
@mixin label-common-styles() {
|
|
10
|
+
display: inline-grid;
|
|
11
|
+
grid-auto-flow: column;
|
|
12
|
+
grid-auto-columns: max-content;
|
|
13
|
+
grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin document-common-styles() {
|
|
18
|
+
display: grid;
|
|
19
|
+
grid-template-rows: 1fr;
|
|
20
|
+
min-block-size: 100dvh;
|
|
21
|
+
margin: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
25
|
+
// Icons | Mask & Background
|
|
26
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
27
|
+
|
|
28
|
+
// Icon mask styles
|
|
9
29
|
@mixin icon-mask-common-styles(
|
|
10
30
|
$inline-size: var(--icon-size),
|
|
11
31
|
$block-size: var(--icon-size),
|
|
@@ -19,6 +39,22 @@
|
|
|
19
39
|
background-color: currentColor;
|
|
20
40
|
}
|
|
21
41
|
|
|
42
|
+
/// @group Icon
|
|
43
|
+
/// @param {String} $selector [".icon-mask"] -
|
|
44
|
+
/// @param {type} $icon-path [null] -
|
|
45
|
+
@mixin icon-mask($selector: ".icon-mask", $icon-path: null) {
|
|
46
|
+
#{$selector} {
|
|
47
|
+
@if $icon-path != null {
|
|
48
|
+
--icon-path: #{$icon-path};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&::before {
|
|
52
|
+
@extend %icon-mask--before;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Icon background styles
|
|
22
58
|
@mixin icon-background-common-styles(
|
|
23
59
|
$inline-size: var(--icon-size),
|
|
24
60
|
$block-size: var(--icon-size),
|
|
@@ -31,40 +67,113 @@
|
|
|
31
67
|
background: no-repeat center / $background-size var(--icon-path);
|
|
32
68
|
}
|
|
33
69
|
|
|
34
|
-
@
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
70
|
+
/// @group Icon
|
|
71
|
+
/// @param {String} $selector [".icon-background"] -
|
|
72
|
+
/// @param {type} $icon-path [null] -
|
|
73
|
+
@mixin icon-background($selector: ".icon-background", $icon-path: null) {
|
|
74
|
+
#{$selector} {
|
|
75
|
+
@if $icon-path != null {
|
|
76
|
+
--icon-path: #{$icon-path};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&::before {
|
|
80
|
+
@extend %icon-background--before;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
40
83
|
}
|
|
41
84
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
85
|
+
// Icon Input background styles
|
|
86
|
+
@mixin icon-input-background-common-styles(
|
|
87
|
+
$background-size: "0",
|
|
88
|
+
$background-position-x: "0"
|
|
89
|
+
) {
|
|
90
|
+
background: var(--icon-path) $background-position-x center / $background-size
|
|
91
|
+
no-repeat;
|
|
47
92
|
}
|
|
48
93
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/// @param {String} $replace ('') - New value
|
|
53
|
-
/// @return {String} - Updated string
|
|
54
|
-
@function str-replace($string, $search, $replace: "") {
|
|
55
|
-
$index: str-index($string, $search);
|
|
94
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
95
|
+
// Icons | Multicolor Selectors
|
|
96
|
+
// - - - - - - - - - - - - - - - - - - - -
|
|
56
97
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
98
|
+
// Single selector generator
|
|
99
|
+
@mixin multicolor-icon-selector(
|
|
100
|
+
$input-selector,
|
|
101
|
+
$output-selector,
|
|
102
|
+
$light: true,
|
|
103
|
+
$dark: true,
|
|
104
|
+
$light-theme-selector: ".light",
|
|
105
|
+
$dark-theme-selector: ".dark",
|
|
106
|
+
$primary: true,
|
|
107
|
+
$primary-hover: true,
|
|
108
|
+
$primary-active: true,
|
|
109
|
+
$primary-disabled: true,
|
|
110
|
+
$on-primary: true,
|
|
111
|
+
$on-primary-hover: true,
|
|
112
|
+
$on-primary-active: true,
|
|
113
|
+
$on-disabled: true,
|
|
114
|
+
$neutral: true
|
|
115
|
+
) {
|
|
116
|
+
// Light
|
|
117
|
+
@if $light {
|
|
118
|
+
#{$light-theme-selector} {
|
|
119
|
+
#{$output-selector} {
|
|
120
|
+
@if $enabled {
|
|
121
|
+
@extend #{$input-selector}--enabled-light;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@if $hover {
|
|
125
|
+
&:hover {
|
|
126
|
+
@extend #{$input-selector}--hover-light;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@if $active {
|
|
131
|
+
&:active {
|
|
132
|
+
@extend #{$input-selector}--active-light;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@if $disabled {
|
|
137
|
+
&:disabled {
|
|
138
|
+
@extend #{$input-selector}--disabled-light;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// Dark
|
|
146
|
+
@if $dark {
|
|
147
|
+
#{$dark-theme-selector} {
|
|
148
|
+
#{$output-selector} {
|
|
149
|
+
@if $enabled {
|
|
150
|
+
@extend #{$input-selector}--enabled-dark;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@if $hover {
|
|
154
|
+
&:hover {
|
|
155
|
+
@extend #{$input-selector}--hover-dark;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@if $active {
|
|
160
|
+
&:active {
|
|
161
|
+
@extend #{$input-selector}--active-dark;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@if $disabled {
|
|
166
|
+
&:disabled {
|
|
167
|
+
@extend #{$input-selector}--disabled-dark;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
64
172
|
}
|
|
65
|
-
@return $string;
|
|
66
173
|
}
|
|
67
174
|
|
|
175
|
+
// Generate icons virtual selectors
|
|
176
|
+
|
|
68
177
|
/// It returns a list of virtual selectors. This function is designed to
|
|
69
178
|
/// process the icons selectors generated by "svg-sass-generator" package,
|
|
70
179
|
/// present in this monorepo. This function only generates one part of the
|
|
@@ -93,6 +202,25 @@
|
|
|
93
202
|
@return $output-list;
|
|
94
203
|
}
|
|
95
204
|
|
|
205
|
+
/// Replace `$search` with `$replace` in `$string`
|
|
206
|
+
/// @param {String} $string - Initial string
|
|
207
|
+
/// @param {String} $search - Substring to replace
|
|
208
|
+
/// @param {String} $replace ('') - New value
|
|
209
|
+
/// @return {String} - Updated string
|
|
210
|
+
@function str-replace($string, $search, $replace: "") {
|
|
211
|
+
$index: str-index($string, $search);
|
|
212
|
+
|
|
213
|
+
@if $index {
|
|
214
|
+
@return str-slice($string, 1, $index - 1) + $replace +
|
|
215
|
+
str-replace(
|
|
216
|
+
str-slice($string, $index + str-length($search)),
|
|
217
|
+
$search,
|
|
218
|
+
$replace
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
@return $string;
|
|
222
|
+
}
|
|
223
|
+
|
|
96
224
|
|
|
97
225
|
/*----------------------
|
|
98
226
|
Focus
|
|
@@ -429,11 +557,11 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
429
557
|
|
|
430
558
|
@mixin font() {
|
|
431
559
|
// families
|
|
432
|
-
--mer-font-family--inter-light: "Inter_Light", arial, sans-serif;
|
|
433
|
-
--mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif;
|
|
434
|
-
--mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif;
|
|
435
|
-
--mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif;
|
|
436
|
-
--mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif;
|
|
560
|
+
--mer-font-family--inter-light: "Inter_Light", arial, sans-serif; // 300
|
|
561
|
+
--mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif; // 400
|
|
562
|
+
--mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif; // 600
|
|
563
|
+
--mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif; // 700
|
|
564
|
+
--mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif; // 800
|
|
437
565
|
|
|
438
566
|
// weights
|
|
439
567
|
--mer-font__weight--light: 300;
|
|
@@ -443,7 +571,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
443
571
|
--mer-font__weight--extra-bold: 800;
|
|
444
572
|
|
|
445
573
|
// sizes
|
|
446
|
-
--mer-font__size--
|
|
574
|
+
--mer-font__size--2xs: 12px;
|
|
447
575
|
--mer-font__size--xs: 14px;
|
|
448
576
|
--mer-font__size--sm: 16px;
|
|
449
577
|
--mer-font__size--md: 20px;
|
|
@@ -587,6 +715,18 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
587
715
|
--mer-icon__box--sm: var(--mer-spacing--md);
|
|
588
716
|
--mer-icon__box--lg: var(--mer-spacing--lg);
|
|
589
717
|
|
|
718
|
+
/*----------------------------------------------------------
|
|
719
|
+
Form Input (form-input-*** background-position-x RTL support)
|
|
720
|
+
-----------------------------------------------------------*/
|
|
721
|
+
--mer-form-input__padding-inline: var(--mer-spacing--xs);
|
|
722
|
+
--mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);
|
|
723
|
+
--mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);
|
|
724
|
+
|
|
725
|
+
/*-------------------------------------------------------------
|
|
726
|
+
Inline Control (Should have the same height to look good inline)
|
|
727
|
+
-------------------------------------------------------------*/
|
|
728
|
+
--mer-control__block-size: var(--mer-spacing--lg);
|
|
729
|
+
|
|
590
730
|
/*----------------------
|
|
591
731
|
Label
|
|
592
732
|
----------------------*/
|
|
@@ -626,13 +766,10 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
626
766
|
|
|
627
767
|
|
|
628
768
|
// Base classes
|
|
629
|
-
@mixin button-tokens() {
|
|
630
|
-
/*----------------------
|
|
631
|
-
Base
|
|
632
|
-
----------------------*/
|
|
769
|
+
@mixin button-tokens-base() {
|
|
633
770
|
//font
|
|
634
771
|
--button-base__font-family: inherit;
|
|
635
|
-
--button-base__font-size: var(--mer-font__size--
|
|
772
|
+
--button-base__font-size: var(--mer-font__size--2xs);
|
|
636
773
|
//--button-base__font-weight: var(--mer-font__weight--semi-bold);
|
|
637
774
|
--button-base__line-height: var(--mer-line-height--tight);
|
|
638
775
|
//--button-base__color: var(--mer-text__on-primary);
|
|
@@ -643,13 +780,15 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
643
780
|
--button-base__border-color: transparent;
|
|
644
781
|
--button-base__border-radius: var(--mer-border__radius--sm);
|
|
645
782
|
//other
|
|
646
|
-
--button-base__block-size: var(--mer-
|
|
783
|
+
--button-base__block-size: var(--mer-control__block-size);
|
|
647
784
|
--button-base__gap: var(--mer-spacing--xs);
|
|
648
785
|
--button-base__padding-inline: var(--mer-spacing--sm);
|
|
786
|
+
//with icon
|
|
787
|
+
--button-icon-only__padding: 0;
|
|
788
|
+
--button-icon-only__inline-size: var(--mer-control__block-size);
|
|
789
|
+
}
|
|
649
790
|
|
|
650
|
-
|
|
651
|
-
Primary
|
|
652
|
-
----------------------*/
|
|
791
|
+
@mixin button-tokens-primary() {
|
|
653
792
|
--button-primary__background-color: var(--mer-accent__primary);
|
|
654
793
|
--button-primary__border-color: var(--button-primary__background-color);
|
|
655
794
|
--button-primary__color: var(--mer-text__on-primary);
|
|
@@ -678,10 +817,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
678
817
|
--mer-border-color__primary--disabled
|
|
679
818
|
);
|
|
680
819
|
--button-primary__color--disabled: var(--mer-text__on-disabled);
|
|
820
|
+
}
|
|
681
821
|
|
|
682
|
-
|
|
683
|
-
Secondary
|
|
684
|
-
----------------------*/
|
|
822
|
+
@mixin button-tokens-secondary() {
|
|
685
823
|
--button-secondary__background-color: transparent;
|
|
686
824
|
--button-secondary__border-color: var(--mer-border-color__neutral);
|
|
687
825
|
--button-secondary__color: var(--mer-text__neutral);
|
|
@@ -702,10 +840,9 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
702
840
|
--button-secondary__background-color--disabled: transparent;
|
|
703
841
|
--button-secondary__border-color--disabled: var(--mer-text__on-disabled);
|
|
704
842
|
--button-secondary__color--disabled: var(--mer-text__on-disabled);
|
|
843
|
+
}
|
|
705
844
|
|
|
706
|
-
|
|
707
|
-
Tertiary
|
|
708
|
-
----------------------*/
|
|
845
|
+
@mixin button-tokens-tertiary() {
|
|
709
846
|
--button-tertiary__background-color: transparent;
|
|
710
847
|
--button-tertiary__border-color: transparent;
|
|
711
848
|
--button-tertiary__color: var(--mer-text__primary);
|
|
@@ -720,17 +857,17 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
720
857
|
--button-tertiary__color--active: var(--mer-text__primary--active);
|
|
721
858
|
//disabled
|
|
722
859
|
--button-tertiary__background-color--disabled: transparent;
|
|
723
|
-
--button-tertiary__border-color--disabled:
|
|
724
|
-
--button-tertiary__color--disabled:
|
|
860
|
+
--button-tertiary__border-color--disabled: transparent;
|
|
861
|
+
--button-tertiary__color--disabled: var(--mer-text__on-disabled);
|
|
862
|
+
}
|
|
725
863
|
|
|
726
|
-
|
|
727
|
-
Icon Only
|
|
728
|
-
----------------------*/
|
|
864
|
+
@mixin button-tokens-icon-only() {
|
|
729
865
|
--button-icon-only__padding-inline: var(--mer-spacing--xs);
|
|
730
866
|
}
|
|
731
867
|
|
|
732
868
|
|
|
733
869
|
%button-base {
|
|
870
|
+
@include button-tokens-base();
|
|
734
871
|
@include button-common-styles();
|
|
735
872
|
border: var(--button-base__border-width);
|
|
736
873
|
border-radius: var(--button-base__border-radius);
|
|
@@ -739,7 +876,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
739
876
|
var(--button-base__border-color);
|
|
740
877
|
font-family: var(--button-base__font-family);
|
|
741
878
|
font-size: var(--button-base__font-size);
|
|
742
|
-
gap: var(--
|
|
879
|
+
gap: var(--button-base__gap); // Used when the button has icons
|
|
743
880
|
line-height: var(--button-base__line-height);
|
|
744
881
|
padding-inline: var(--button-base__padding-inline);
|
|
745
882
|
text-transform: var(--button-base__text-transform);
|
|
@@ -749,6 +886,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
749
886
|
}
|
|
750
887
|
|
|
751
888
|
%button-primary {
|
|
889
|
+
@include button-tokens-primary();
|
|
752
890
|
@extend %button-base;
|
|
753
891
|
background-color: var(--button-primary__background-color);
|
|
754
892
|
border-color: var(--button-primary__border-color);
|
|
@@ -775,6 +913,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
775
913
|
}
|
|
776
914
|
|
|
777
915
|
%button-secondary {
|
|
916
|
+
@include button-tokens-secondary();
|
|
778
917
|
@extend %button-base;
|
|
779
918
|
background-color: var(--button-secondary__background-color);
|
|
780
919
|
border-color: var(--button-secondary__border-color);
|
|
@@ -801,6 +940,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
801
940
|
}
|
|
802
941
|
|
|
803
942
|
%button-tertiary {
|
|
943
|
+
@include button-tokens-tertiary();
|
|
804
944
|
@extend %button-base;
|
|
805
945
|
background-color: var(--button-tertiary__background-color);
|
|
806
946
|
border-color: var(--button-tertiary__border-color);
|
|
@@ -839,8 +979,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
839
979
|
}
|
|
840
980
|
|
|
841
981
|
@if $add--disabled {
|
|
842
|
-
&:disabled
|
|
843
|
-
&--disabled {
|
|
982
|
+
&:disabled {
|
|
844
983
|
@extend %button-primary--disabled;
|
|
845
984
|
}
|
|
846
985
|
}
|
|
@@ -890,11 +1029,6 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
890
1029
|
}
|
|
891
1030
|
|
|
892
1031
|
@mixin button-classes() {
|
|
893
|
-
// Button tokens
|
|
894
|
-
:root {
|
|
895
|
-
@include button-tokens();
|
|
896
|
-
}
|
|
897
|
-
|
|
898
1032
|
// Button primary
|
|
899
1033
|
@include button-primary();
|
|
900
1034
|
|
|
@@ -905,6 +1039,50 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
905
1039
|
@include button-tertiary();
|
|
906
1040
|
}
|
|
907
1041
|
|
|
1042
|
+
@mixin form-input-element-tokens() {
|
|
1043
|
+
// Common form input element tokens
|
|
1044
|
+
--mer-form-input__border-color: var(--mer-color__neutral-gray--500);
|
|
1045
|
+
--mer-form-input__border-style: solid;
|
|
1046
|
+
--mer-form-input__border-width: var(--mer-border__width--sm);
|
|
1047
|
+
--mer-form-input__border: var(--mer-form-input__border-width)
|
|
1048
|
+
var(--mer-form-input__border-style) var(--mer-form-input__border-color);
|
|
1049
|
+
--mer-form-input__border-radius: var(--mer-border__radius--sm);
|
|
1050
|
+
--mer-form-input__color: var(--mer-text__bright);
|
|
1051
|
+
--mer-form-input__font-size: var(--mer-body__font-size);
|
|
1052
|
+
--mer-form-input__font-weight: var(--mer-text__on-surface);
|
|
1053
|
+
--mer-form-input__icon-size: var(--mer-icon__box--sm);
|
|
1054
|
+
--mer-form-input__font-family: var(--mer-font-family--inter-regular);
|
|
1055
|
+
//--mer-form-input__padding-inline is defined globally in /tokens/semantic/_other/
|
|
1056
|
+
// (Form Input) because it the padding-inline value is required in the calculation
|
|
1057
|
+
// of background-x position for RTL support, and this calculation needs to be on the :root
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
|
|
1061
|
+
// Base form-input-text sty
|
|
1062
|
+
%form-input-base {
|
|
1063
|
+
@include form-input-element-tokens();
|
|
1064
|
+
font-family: var(--mer-form-input__font-family);
|
|
1065
|
+
border: var(--mer-form-input__border);
|
|
1066
|
+
border-radius: var(--mer-form-input__border-radius);
|
|
1067
|
+
color: var(--mer-form-input__color);
|
|
1068
|
+
font-size: var(--mer-form-input__font-size);
|
|
1069
|
+
block-size: var(--mer-control__block-size);
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
%form-input-text-only {
|
|
1073
|
+
@extend %form-input-base;
|
|
1074
|
+
padding-inline: var(--mer-form-input__padding-inline);
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
@mixin form-input-text-only(
|
|
1078
|
+
$selector: ".form-input-text-only",
|
|
1079
|
+
$add--disabled: true
|
|
1080
|
+
) {
|
|
1081
|
+
#{$selector} {
|
|
1082
|
+
@extend %form-input-text-only;
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
|
|
908
1086
|
%icon-mask--before {
|
|
909
1087
|
@include icon-mask-common-styles(
|
|
910
1088
|
$inline-size: var(--mer-icon__box--sm),
|
|
@@ -921,99 +1099,28 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
921
1099
|
);
|
|
922
1100
|
}
|
|
923
1101
|
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
&::before {
|
|
930
|
-
@extend %icon-mask--before;
|
|
931
|
-
}
|
|
932
|
-
}
|
|
933
|
-
}
|
|
934
|
-
|
|
935
|
-
@mixin icon-background($selector: ".icon-background", $icon-path: null) {
|
|
936
|
-
#{$selector} {
|
|
937
|
-
@if $icon-path != null {
|
|
938
|
-
--icon-path: #{$icon-path};
|
|
939
|
-
}
|
|
940
|
-
&::before {
|
|
941
|
-
@extend %icon-background--before;
|
|
942
|
-
}
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
// Icons
|
|
948
|
-
%button-icon-only {
|
|
949
|
-
padding-inline: var(--button-icon-only__padding-inline);
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
%button-icon-and-text,
|
|
953
|
-
%button-icon-after-and-text {
|
|
954
|
-
// same as regular base button
|
|
955
|
-
padding-inline: var(--button-base__padding-inline);
|
|
956
|
-
}
|
|
957
|
-
|
|
958
|
-
%button-icon-after-and-text--before {
|
|
959
|
-
order: 1;
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
@mixin button-icon-only($selector: ".button-icon-only", $icon-path: null) {
|
|
963
|
-
#{$selector} {
|
|
964
|
-
@extend %button-icon-only;
|
|
965
|
-
|
|
966
|
-
@if $icon-path != null {
|
|
967
|
-
--icon-path: #{$icon-path};
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
&::before {
|
|
971
|
-
@extend %icon-mask--before;
|
|
972
|
-
}
|
|
973
|
-
}
|
|
974
|
-
}
|
|
975
|
-
|
|
976
|
-
@mixin button-icon-and-text(
|
|
977
|
-
$selector: ".button-icon-and-text",
|
|
978
|
-
$icon-path: null
|
|
979
|
-
) {
|
|
980
|
-
#{$selector} {
|
|
981
|
-
@extend %button-icon-and-text;
|
|
982
|
-
|
|
983
|
-
@if $icon-path != null {
|
|
984
|
-
--icon-path: #{$icon-path};
|
|
985
|
-
}
|
|
986
|
-
|
|
987
|
-
&::before {
|
|
988
|
-
@extend %icon-background--before;
|
|
989
|
-
}
|
|
990
|
-
}
|
|
1102
|
+
%icon-input-background {
|
|
1103
|
+
@include icon-input-background-common-styles(
|
|
1104
|
+
$background-size: var(--mer-form-input__icon-size),
|
|
1105
|
+
$background-position-x: var(--mer-form-input__bg-position--x)
|
|
1106
|
+
);
|
|
991
1107
|
}
|
|
992
1108
|
|
|
993
|
-
@mixin
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
@if $icon-path != null {
|
|
1001
|
-
--icon-path: #{$icon-path};
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
&::before {
|
|
1005
|
-
@extend %icon-background--before;
|
|
1006
|
-
@extend %button-icon-after-and-text--before;
|
|
1007
|
-
}
|
|
1109
|
+
@mixin form-input-bg-x-rtl-support() {
|
|
1110
|
+
// has to be included in the root
|
|
1111
|
+
:root[dir="rtl"] {
|
|
1112
|
+
--mer-form-input__bg-position--x: calc(
|
|
1113
|
+
100% - var(--mer-form-input__bg-position--x-value)
|
|
1114
|
+
);
|
|
1008
1115
|
}
|
|
1009
1116
|
}
|
|
1010
1117
|
|
|
1011
1118
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1012
|
-
//
|
|
1119
|
+
// Icons | Monochrome Selectors
|
|
1013
1120
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1014
1121
|
|
|
1015
|
-
//
|
|
1016
|
-
@mixin
|
|
1122
|
+
// Single selector generator
|
|
1123
|
+
@mixin generate-monochrome-icon-selector(
|
|
1017
1124
|
$input-selector,
|
|
1018
1125
|
$output-selector,
|
|
1019
1126
|
$light-theme-selector: ".light",
|
|
@@ -1121,110 +1228,33 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1121
1228
|
}
|
|
1122
1229
|
}
|
|
1123
1230
|
// on primary
|
|
1124
|
-
@if $on-primary {
|
|
1125
|
-
&--on-primary {
|
|
1126
|
-
@extend #{$input-selector}--on-primary-dark !optional;
|
|
1127
|
-
}
|
|
1128
|
-
}
|
|
1129
|
-
@if $on-primary-hover {
|
|
1130
|
-
&--on-primary-hover,
|
|
1131
|
-
&--on-primary:hover {
|
|
1132
|
-
@extend #{$input-selector}--on-primary-hover-dark !optional;
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
@if $on-primary-active {
|
|
1136
|
-
&--on-primary-active,
|
|
1137
|
-
&--on-primary:active {
|
|
1138
|
-
@extend #{$input-selector}--on-primary-active-dark !optional;
|
|
1139
|
-
}
|
|
1140
|
-
}
|
|
1141
|
-
// on disabled
|
|
1142
|
-
@if $on-disabled {
|
|
1143
|
-
&--on-disabled {
|
|
1144
|
-
@extend #{$input-selector}--on-disabled-dark !optional;
|
|
1145
|
-
}
|
|
1146
|
-
}
|
|
1147
|
-
// neutral
|
|
1148
|
-
@if $neutral {
|
|
1149
|
-
&--neutral {
|
|
1150
|
-
@extend #{$input-selector}--neutral-dark !optional;
|
|
1151
|
-
}
|
|
1152
|
-
}
|
|
1153
|
-
}
|
|
1154
|
-
}
|
|
1155
|
-
}
|
|
1156
|
-
}
|
|
1157
|
-
|
|
1158
|
-
// Multicolor
|
|
1159
|
-
@mixin button-icon-style-multicolor(
|
|
1160
|
-
$input-selector,
|
|
1161
|
-
$output-selector,
|
|
1162
|
-
$light: true,
|
|
1163
|
-
$dark: true,
|
|
1164
|
-
$light-theme-selector: ".light",
|
|
1165
|
-
$dark-theme-selector: ".dark",
|
|
1166
|
-
$primary: true,
|
|
1167
|
-
$primary-hover: true,
|
|
1168
|
-
$primary-active: true,
|
|
1169
|
-
$primary-disabled: true,
|
|
1170
|
-
$on-primary: true,
|
|
1171
|
-
$on-primary-hover: true,
|
|
1172
|
-
$on-primary-active: true,
|
|
1173
|
-
$on-disabled: true,
|
|
1174
|
-
$neutral: true
|
|
1175
|
-
) {
|
|
1176
|
-
// Light
|
|
1177
|
-
@if $light {
|
|
1178
|
-
#{$light-theme-selector} {
|
|
1179
|
-
#{$output-selector} {
|
|
1180
|
-
@if $enabled {
|
|
1181
|
-
@extend #{$input-selector}--enabled-light;
|
|
1182
|
-
}
|
|
1183
|
-
|
|
1184
|
-
@if $hover {
|
|
1185
|
-
&:hover {
|
|
1186
|
-
@extend #{$input-selector}--hover-light;
|
|
1187
|
-
}
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
@if $active {
|
|
1191
|
-
&:active {
|
|
1192
|
-
@extend #{$input-selector}--active-light;
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
|
-
|
|
1196
|
-
@if $disabled {
|
|
1197
|
-
&:disabled {
|
|
1198
|
-
@extend #{$input-selector}--disabled-light;
|
|
1231
|
+
@if $on-primary {
|
|
1232
|
+
&--on-primary {
|
|
1233
|
+
@extend #{$input-selector}--on-primary-dark !optional;
|
|
1199
1234
|
}
|
|
1200
1235
|
}
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
@if $dark {
|
|
1207
|
-
#{$dark-theme-selector} {
|
|
1208
|
-
#{$output-selector} {
|
|
1209
|
-
@if $enabled {
|
|
1210
|
-
@extend #{$input-selector}--enabled-dark;
|
|
1236
|
+
@if $on-primary-hover {
|
|
1237
|
+
&--on-primary-hover,
|
|
1238
|
+
&--on-primary:hover {
|
|
1239
|
+
@extend #{$input-selector}--on-primary-hover-dark !optional;
|
|
1240
|
+
}
|
|
1211
1241
|
}
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
@extend #{$input-selector}--
|
|
1242
|
+
@if $on-primary-active {
|
|
1243
|
+
&--on-primary-active,
|
|
1244
|
+
&--on-primary:active {
|
|
1245
|
+
@extend #{$input-selector}--on-primary-active-dark !optional;
|
|
1216
1246
|
}
|
|
1217
1247
|
}
|
|
1218
|
-
|
|
1219
|
-
@if $
|
|
1220
|
-
|
|
1221
|
-
@extend #{$input-selector}--
|
|
1248
|
+
// on disabled
|
|
1249
|
+
@if $on-disabled {
|
|
1250
|
+
&--on-disabled {
|
|
1251
|
+
@extend #{$input-selector}--on-disabled-dark !optional;
|
|
1222
1252
|
}
|
|
1223
1253
|
}
|
|
1224
|
-
|
|
1225
|
-
@if $
|
|
1226
|
-
|
|
1227
|
-
@extend #{$input-selector}--
|
|
1254
|
+
// neutral
|
|
1255
|
+
@if $neutral {
|
|
1256
|
+
&--neutral {
|
|
1257
|
+
@extend #{$input-selector}--neutral-dark !optional;
|
|
1228
1258
|
}
|
|
1229
1259
|
}
|
|
1230
1260
|
}
|
|
@@ -1232,11 +1262,8 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1232
1262
|
}
|
|
1233
1263
|
}
|
|
1234
1264
|
|
|
1235
|
-
//
|
|
1236
|
-
|
|
1237
|
-
// - - - - - - - - - - - - - - - - - - - -
|
|
1238
|
-
|
|
1239
|
-
@mixin buttons-monochrome-icons-selectors(
|
|
1265
|
+
// Monochrome
|
|
1266
|
+
@mixin process-monochrome-icons-list(
|
|
1240
1267
|
$monochrome-icon-selectors,
|
|
1241
1268
|
$light: true,
|
|
1242
1269
|
$dark: true,
|
|
@@ -1253,7 +1280,7 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1253
1280
|
$neutral: true
|
|
1254
1281
|
) {
|
|
1255
1282
|
@each $monochrome-icon-selector in $monochrome-icon-selectors {
|
|
1256
|
-
@include
|
|
1283
|
+
@include generate-monochrome-icon-selector(
|
|
1257
1284
|
$input-selector: #{$monochrome-icon-selector},
|
|
1258
1285
|
$output-selector: str-replace($monochrome-icon-selector, "%", "."),
|
|
1259
1286
|
$light: $light,
|
|
@@ -1274,6 +1301,193 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1274
1301
|
}
|
|
1275
1302
|
|
|
1276
1303
|
|
|
1304
|
+
// Icons
|
|
1305
|
+
@mixin button-tokens-base() {
|
|
1306
|
+
//font
|
|
1307
|
+
--button-base__font-family: inherit;
|
|
1308
|
+
--button-base__font-size: var(--mer-font__size--2xs);
|
|
1309
|
+
//--button-base__font-weight: var(--mer-font__weight--semi-bold);
|
|
1310
|
+
--button-base__line-height: var(--mer-line-height--tight);
|
|
1311
|
+
//--button-base__color: var(--mer-text__on-primary);
|
|
1312
|
+
--button-base__text-transform: capitalize;
|
|
1313
|
+
//border
|
|
1314
|
+
--button-base__border-width: var(--mer-border__width--sm);
|
|
1315
|
+
--button-base__border-style: solid;
|
|
1316
|
+
--button-base__border-color: transparent;
|
|
1317
|
+
--button-base__border-radius: var(--mer-border__radius--sm);
|
|
1318
|
+
//other
|
|
1319
|
+
--button-base__block-size: var(--mer-control__block-size);
|
|
1320
|
+
--button-base__gap: var(--mer-spacing--xs);
|
|
1321
|
+
--button-base__padding-inline: var(--mer-spacing--sm);
|
|
1322
|
+
//with icon
|
|
1323
|
+
--button-icon-only__padding: 0;
|
|
1324
|
+
--button-icon-only__inline-size: var(--mer-control__block-size);
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
@mixin button-tokens-primary() {
|
|
1328
|
+
--button-primary__background-color: var(--mer-accent__primary);
|
|
1329
|
+
--button-primary__border-color: var(--button-primary__background-color);
|
|
1330
|
+
--button-primary__color: var(--mer-text__on-primary);
|
|
1331
|
+
--button-primary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1332
|
+
//hover
|
|
1333
|
+
--button-primary__background-color--hover: var(--mer-accent__primary--hover);
|
|
1334
|
+
--button-primary__border-color--hover: var(
|
|
1335
|
+
--button-primary__background-color--hover
|
|
1336
|
+
);
|
|
1337
|
+
--button-primary__color--hover: var(--mer-text__on-primary);
|
|
1338
|
+
|
|
1339
|
+
//active
|
|
1340
|
+
--button-primary__background-color--active: var(
|
|
1341
|
+
--mer-accent__primary--active
|
|
1342
|
+
);
|
|
1343
|
+
--button-primary__border-color--active: var(
|
|
1344
|
+
--button-primary__background-color--active
|
|
1345
|
+
);
|
|
1346
|
+
--button-primary__color--active: var(--mer-text__on-primary--active);
|
|
1347
|
+
|
|
1348
|
+
//disabled
|
|
1349
|
+
--button-primary__background-color--disabled: var(
|
|
1350
|
+
--mer-accent__primary--disabled
|
|
1351
|
+
);
|
|
1352
|
+
--button-primary__border-color--disabled: var(
|
|
1353
|
+
--mer-border-color__primary--disabled
|
|
1354
|
+
);
|
|
1355
|
+
--button-primary__color--disabled: var(--mer-text__on-disabled);
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
@mixin button-tokens-secondary() {
|
|
1359
|
+
--button-secondary__background-color: transparent;
|
|
1360
|
+
--button-secondary__border-color: var(--mer-border-color__neutral);
|
|
1361
|
+
--button-secondary__color: var(--mer-text__neutral);
|
|
1362
|
+
--button-secondary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1363
|
+
//hover
|
|
1364
|
+
--button-secondary__background-color--hover: transparent;
|
|
1365
|
+
--button-secondary__border-color--hover: var(
|
|
1366
|
+
--mer-border-color__primary--hover
|
|
1367
|
+
);
|
|
1368
|
+
--button-secondary__color--hover: var(--mer-text__primary--hover);
|
|
1369
|
+
//active
|
|
1370
|
+
--button-secondary__background-color--active: transparent;
|
|
1371
|
+
--button-secondary__border-color--active: var(
|
|
1372
|
+
--mer-border-color__primary--active
|
|
1373
|
+
);
|
|
1374
|
+
--button-secondary__color--active: var(--mer-text__on-primary--active);
|
|
1375
|
+
//disabled
|
|
1376
|
+
--button-secondary__background-color--disabled: transparent;
|
|
1377
|
+
--button-secondary__border-color--disabled: var(--mer-text__on-disabled);
|
|
1378
|
+
--button-secondary__color--disabled: var(--mer-text__on-disabled);
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
@mixin button-tokens-tertiary() {
|
|
1382
|
+
--button-tertiary__background-color: transparent;
|
|
1383
|
+
--button-tertiary__border-color: transparent;
|
|
1384
|
+
--button-tertiary__color: var(--mer-text__primary);
|
|
1385
|
+
--button-tertiary__font-weight: var(--mer-font__weight--semi-bold);
|
|
1386
|
+
//hover
|
|
1387
|
+
--button-tertiary__background-color--hover: transparent;
|
|
1388
|
+
--button-tertiary__border-color--hover: transparent;
|
|
1389
|
+
--button-tertiary__color--hover: var(--mer-text__primary--hover);
|
|
1390
|
+
//active
|
|
1391
|
+
--button-tertiary__background-color--active: transparent;
|
|
1392
|
+
--button-tertiary__border-color--active: transparent;
|
|
1393
|
+
--button-tertiary__color--active: var(--mer-text__primary--active);
|
|
1394
|
+
//disabled
|
|
1395
|
+
--button-tertiary__background-color--disabled: transparent;
|
|
1396
|
+
--button-tertiary__border-color--disabled: transparent;
|
|
1397
|
+
--button-tertiary__color--disabled: var(--mer-text__on-disabled);
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
@mixin button-tokens-icon-only() {
|
|
1401
|
+
--button-icon-only__padding-inline: var(--mer-spacing--xs);
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
|
|
1405
|
+
%button-icon-only {
|
|
1406
|
+
@include button-tokens-icon-only();
|
|
1407
|
+
inline-size: var(--button-icon-only__inline-size);
|
|
1408
|
+
padding: var(--button-icon-only__padding);
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
%button-icon-and-text,
|
|
1412
|
+
%button-icon-after-and-text {
|
|
1413
|
+
// same as regular base button
|
|
1414
|
+
padding-inline: var(--button-base__padding-inline);
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
%button-icon-after-and-text--before {
|
|
1418
|
+
order: 1;
|
|
1419
|
+
}
|
|
1420
|
+
|
|
1421
|
+
@mixin button-icon-only($selector: ".button-icon-only", $icon-path: null) {
|
|
1422
|
+
#{$selector} {
|
|
1423
|
+
@extend %button-icon-only;
|
|
1424
|
+
|
|
1425
|
+
@if $icon-path != null {
|
|
1426
|
+
--icon-path: #{$icon-path};
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
&::before {
|
|
1430
|
+
@extend %icon-mask--before;
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
@mixin button-icon-and-text(
|
|
1436
|
+
$selector: ".button-icon-and-text",
|
|
1437
|
+
$icon-path: null
|
|
1438
|
+
) {
|
|
1439
|
+
#{$selector} {
|
|
1440
|
+
@extend %button-icon-and-text;
|
|
1441
|
+
|
|
1442
|
+
@if $icon-path != null {
|
|
1443
|
+
--icon-path: #{$icon-path};
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
&::before {
|
|
1447
|
+
@extend %icon-background--before;
|
|
1448
|
+
}
|
|
1449
|
+
}
|
|
1450
|
+
}
|
|
1451
|
+
|
|
1452
|
+
@mixin button-icon-after-and-text(
|
|
1453
|
+
$selector: ".button-icon-after-and-text",
|
|
1454
|
+
$icon-path: null
|
|
1455
|
+
) {
|
|
1456
|
+
#{$selector} {
|
|
1457
|
+
@extend %button-icon-and-text;
|
|
1458
|
+
|
|
1459
|
+
@if $icon-path != null {
|
|
1460
|
+
--icon-path: #{$icon-path};
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1463
|
+
&::before {
|
|
1464
|
+
@extend %icon-background--before;
|
|
1465
|
+
@extend %button-icon-after-and-text--before;
|
|
1466
|
+
}
|
|
1467
|
+
}
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
%form-input-element-icon {
|
|
1471
|
+
@extend %form-input-base;
|
|
1472
|
+
padding-inline-start: calc(
|
|
1473
|
+
var(--mer-form-input__padding-inline) * 2 + var(--mer-form-input__icon-size)
|
|
1474
|
+
);
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1477
|
+
@mixin form-input-text-icon(
|
|
1478
|
+
$selector: ".form-input-text-icon",
|
|
1479
|
+
$icon-path: null
|
|
1480
|
+
) {
|
|
1481
|
+
#{$selector} {
|
|
1482
|
+
@if $icon-path != null {
|
|
1483
|
+
--icon-path: #{$icon-path};
|
|
1484
|
+
}
|
|
1485
|
+
@extend %form-input-element-icon;
|
|
1486
|
+
@extend %icon-input-background;
|
|
1487
|
+
}
|
|
1488
|
+
}
|
|
1489
|
+
|
|
1490
|
+
|
|
1277
1491
|
// Components
|
|
1278
1492
|
@mixin checkbox-tokens() {
|
|
1279
1493
|
// size
|
|
@@ -1783,6 +1997,155 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1783
1997
|
// background-image: url("../src/showcase/assets/icons/module-open.svg");
|
|
1784
1998
|
// }
|
|
1785
1999
|
|
|
2000
|
+
@mixin code-tokens() {
|
|
2001
|
+
// TODO: variable names should be updated to something more descriptive
|
|
2002
|
+
--ch-code__color-base: var(--mer-text__on-surface);
|
|
2003
|
+
--ch-code__color-blue: var(--mer-color__primary-blue--400);
|
|
2004
|
+
--ch-code__color-light-blue: var(--mer-color__primary-blue--200);
|
|
2005
|
+
--ch-code__color-red: var(--mer-color__message-red--200);
|
|
2006
|
+
--ch-code__color-green: var(--mer-color__message-green--200);
|
|
2007
|
+
--ch-code__bg-color: var(--mer-color__neutral-gray--800);
|
|
2008
|
+
--ch-code__border: var(--mer-border__width--sm) solid
|
|
2009
|
+
var(--mer-color__elevation--01);
|
|
2010
|
+
--ch-code__border-radius: var(--mer-border__radius--sm);
|
|
2011
|
+
--ch-code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
|
|
2012
|
+
}
|
|
2013
|
+
|
|
2014
|
+
|
|
2015
|
+
@mixin code($selector: ".code") {
|
|
2016
|
+
#{$selector} {
|
|
2017
|
+
// reset
|
|
2018
|
+
pre {
|
|
2019
|
+
margin: 0;
|
|
2020
|
+
}
|
|
2021
|
+
/* begin of WA */
|
|
2022
|
+
// prevent text wrap
|
|
2023
|
+
.hljs-tag {
|
|
2024
|
+
white-space: nowrap;
|
|
2025
|
+
}
|
|
2026
|
+
overflow: auto;
|
|
2027
|
+
pre {
|
|
2028
|
+
overflow: auto;
|
|
2029
|
+
@include scrollbar-styles();
|
|
2030
|
+
}
|
|
2031
|
+
// prevent text wrap
|
|
2032
|
+
/* end of WA */
|
|
2033
|
+
|
|
2034
|
+
background-color: var(--ch-code__bg-color);
|
|
2035
|
+
border: var(--ch-code__border);
|
|
2036
|
+
border-radius: var(--ch-code__border-radius);
|
|
2037
|
+
padding: var(--ch-code__padding);
|
|
2038
|
+
|
|
2039
|
+
@include code-tokens();
|
|
2040
|
+
.hljs-doctag,
|
|
2041
|
+
.hljs-keyword,
|
|
2042
|
+
.hljs-meta .hljs-keyword,
|
|
2043
|
+
.hljs-template-tag,
|
|
2044
|
+
.hljs-template-variable,
|
|
2045
|
+
.hljs-type,
|
|
2046
|
+
.hljs-variable.language_ {
|
|
2047
|
+
/* prettylights-syntax-keyword */
|
|
2048
|
+
color: var(--ch-code__color-blue);
|
|
2049
|
+
}
|
|
2050
|
+
|
|
2051
|
+
.hljs-title,
|
|
2052
|
+
.hljs-title.class_,
|
|
2053
|
+
.hljs-title.class_.inherited__,
|
|
2054
|
+
.hljs-title.function_ {
|
|
2055
|
+
color: var(--ch-code__color-base);
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
.hljs-attr,
|
|
2059
|
+
.hljs-attribute,
|
|
2060
|
+
.hljs-literal,
|
|
2061
|
+
.hljs-meta,
|
|
2062
|
+
.hljs-number,
|
|
2063
|
+
.hljs-operator,
|
|
2064
|
+
.hljs-variable,
|
|
2065
|
+
.hljs-selector-attr,
|
|
2066
|
+
.hljs-selector-class,
|
|
2067
|
+
.hljs-selector-id {
|
|
2068
|
+
color: var(--ch-code__color-blue);
|
|
2069
|
+
}
|
|
2070
|
+
|
|
2071
|
+
.hljs-regexp,
|
|
2072
|
+
.hljs-string,
|
|
2073
|
+
.hljs-meta .hljs-string {
|
|
2074
|
+
color: var(
|
|
2075
|
+
--ch-code__color-green
|
|
2076
|
+
); /* DARK: color-mix(in srgb, var(--colors-foundation-un-color__red--300) 60%, #000) */
|
|
2077
|
+
}
|
|
2078
|
+
|
|
2079
|
+
.hljs-built_in,
|
|
2080
|
+
.hljs-symbol {
|
|
2081
|
+
/* prettylights-syntax-variable */
|
|
2082
|
+
color: #e36209;
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
.hljs-comment,
|
|
2086
|
+
.hljs-code,
|
|
2087
|
+
.hljs-formula {
|
|
2088
|
+
color: var(--ch-code__color-green);
|
|
2089
|
+
}
|
|
2090
|
+
|
|
2091
|
+
.hljs-name,
|
|
2092
|
+
.hljs-quote,
|
|
2093
|
+
.hljs-selector-tag,
|
|
2094
|
+
.hljs-selector-pseudo {
|
|
2095
|
+
color: var(--ch-code__color-light-blue);
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
.hljs-subst {
|
|
2099
|
+
/* prettylights-syntax-storage-modifier-import */
|
|
2100
|
+
color: #24292e;
|
|
2101
|
+
}
|
|
2102
|
+
|
|
2103
|
+
.hljs-section {
|
|
2104
|
+
/* prettylights-syntax-markup-heading */
|
|
2105
|
+
color: #005cc5;
|
|
2106
|
+
font-weight: bold;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
.hljs-bullet {
|
|
2110
|
+
/* prettylights-syntax-markup-list */
|
|
2111
|
+
color: #735c0f;
|
|
2112
|
+
}
|
|
2113
|
+
|
|
2114
|
+
.hljs-emphasis {
|
|
2115
|
+
/* prettylights-syntax-markup-italic */
|
|
2116
|
+
color: #24292e;
|
|
2117
|
+
font-style: italic;
|
|
2118
|
+
}
|
|
2119
|
+
|
|
2120
|
+
.hljs-strong {
|
|
2121
|
+
/* prettylights-syntax-markup-bold */
|
|
2122
|
+
color: #24292e;
|
|
2123
|
+
font-weight: bold;
|
|
2124
|
+
}
|
|
2125
|
+
|
|
2126
|
+
.hljs-addition {
|
|
2127
|
+
/* prettylights-syntax-markup-inserted */
|
|
2128
|
+
color: #22863a;
|
|
2129
|
+
background-color: #f0fff4;
|
|
2130
|
+
}
|
|
2131
|
+
|
|
2132
|
+
.hljs-deletion {
|
|
2133
|
+
/* prettylights-syntax-markup-deleted */
|
|
2134
|
+
color: #b31d28;
|
|
2135
|
+
background-color: #ffeef0;
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
.hljs-char.escape_,
|
|
2139
|
+
.hljs-link,
|
|
2140
|
+
.hljs-params,
|
|
2141
|
+
.hljs-property,
|
|
2142
|
+
.hljs-punctuation,
|
|
2143
|
+
.hljs-tag {
|
|
2144
|
+
/* purposely ignored */
|
|
2145
|
+
}
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
|
|
1786
2149
|
|
|
1787
2150
|
@mixin mercury(
|
|
1788
2151
|
// Resets
|
|
@@ -1818,15 +2181,17 @@ Item (applies to every item (tree, grid, list, etc...)
|
|
|
1818
2181
|
// Base
|
|
1819
2182
|
$base-classes: true,
|
|
1820
2183
|
$button-classes: true,
|
|
2184
|
+
$form-input-text-classes: true,
|
|
1821
2185
|
$icon-classes: true,
|
|
1822
2186
|
|
|
1823
2187
|
// Icons
|
|
1824
|
-
$icons-
|
|
2188
|
+
$icons-elements: true,
|
|
1825
2189
|
|
|
1826
2190
|
// Components
|
|
1827
2191
|
$components: true,
|
|
1828
2192
|
$checkbox: true,
|
|
1829
|
-
$tree-view-primary: true
|
|
2193
|
+
$tree-view-primary: true,
|
|
2194
|
+
$code: true
|
|
1830
2195
|
) {
|
|
1831
2196
|
// - - - - - - - - - - - - - - - - - - - -
|
|
1832
2197
|
// Icons
|
|
@@ -5267,9 +5632,6 @@ system: $system,
|
|
|
5267
5632
|
@if $button-classes {
|
|
5268
5633
|
// Button primary
|
|
5269
5634
|
@include button-primary();
|
|
5270
|
-
:root.dark {
|
|
5271
|
-
@include button-tokens();
|
|
5272
|
-
}
|
|
5273
5635
|
|
|
5274
5636
|
// Button secondary
|
|
5275
5637
|
@include button-secondary();
|
|
@@ -5278,18 +5640,27 @@ system: $system,
|
|
|
5278
5640
|
@include button-tertiary();
|
|
5279
5641
|
}
|
|
5280
5642
|
|
|
5643
|
+
// Form input text
|
|
5644
|
+
@if $form-input-text-classes {
|
|
5645
|
+
@include form-input-text-only();
|
|
5646
|
+
}
|
|
5647
|
+
|
|
5281
5648
|
// Icon classes
|
|
5282
5649
|
@if $icon-classes {
|
|
5283
5650
|
@include icon-mask();
|
|
5284
5651
|
@include icon-background();
|
|
5652
|
+
@include form-input-text-icon();
|
|
5653
|
+
@include form-input-bg-x-rtl-support();
|
|
5285
5654
|
}
|
|
5286
5655
|
}
|
|
5287
5656
|
|
|
5288
5657
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5289
5658
|
// Icons on Elements / Components
|
|
5290
5659
|
// - - - - - - - - - - - - - - - - - - - -
|
|
5291
|
-
|
|
5292
|
-
|
|
5660
|
+
@if ($icons-elements) {
|
|
5661
|
+
// Process icons lists
|
|
5662
|
+
@include process-monochrome-icons-list($system-virtual-selectors);
|
|
5663
|
+
|
|
5293
5664
|
// Button icon only
|
|
5294
5665
|
@include button-icon-only();
|
|
5295
5666
|
|
|
@@ -5299,18 +5670,25 @@ system: $system,
|
|
|
5299
5670
|
// Button icon after and text
|
|
5300
5671
|
@include button-icon-after-and-text();
|
|
5301
5672
|
|
|
5302
|
-
|
|
5673
|
+
// Form input text
|
|
5674
|
+
@include form-input-text-icon();
|
|
5303
5675
|
}
|
|
5304
5676
|
|
|
5305
5677
|
// - - - - - - - - - - - - - - - - - - -
|
|
5306
5678
|
// Components
|
|
5307
5679
|
// - - - - - - - - - - - - - - - - - - -
|
|
5308
5680
|
@if $components {
|
|
5681
|
+
// checkbox
|
|
5309
5682
|
@if $checkbox {
|
|
5310
5683
|
@include checkbox();
|
|
5311
5684
|
}
|
|
5685
|
+
// tree view
|
|
5312
5686
|
@if $tree-view-primary {
|
|
5313
5687
|
@include tree-view-primary();
|
|
5314
5688
|
}
|
|
5689
|
+
// code
|
|
5690
|
+
@if $code {
|
|
5691
|
+
@include code();
|
|
5692
|
+
}
|
|
5315
5693
|
}
|
|
5316
5694
|
}
|