@new-ui/colors 2.2.0 → 2.2.2
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/README.md +10 -4
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +8 -8
- package/src/_palette.scss +102 -0
- package/src/_theme-dark--cold.scss +20 -178
- package/src/_theme-dark--warm.scss +20 -178
- package/src/_theme-dark.scss +19 -167
- package/src/_theme-light--cold.scss +20 -178
- package/src/_theme-light--warm.scss +20 -178
- package/src/_theme-light.scss +20 -167
- package/src/_theme-mixins.scss +144 -0
- package/src/_utilities.scss +210 -307
- package/src/index.scss +1 -1
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
@use 'palette' as *;
|
|
2
|
+
|
|
3
|
+
@mixin grey-scale(
|
|
4
|
+
$grey1,
|
|
5
|
+
$grey2,
|
|
6
|
+
$grey3,
|
|
7
|
+
$grey4,
|
|
8
|
+
$grey5,
|
|
9
|
+
$grey6,
|
|
10
|
+
$grey7,
|
|
11
|
+
$grey8,
|
|
12
|
+
$grey9,
|
|
13
|
+
$grey10,
|
|
14
|
+
$temperature: null
|
|
15
|
+
) {
|
|
16
|
+
--grey1: #{$grey1};
|
|
17
|
+
--grey2: #{$grey2};
|
|
18
|
+
--grey3: #{$grey3};
|
|
19
|
+
--grey4: #{$grey4};
|
|
20
|
+
--grey5: #{$grey5};
|
|
21
|
+
--grey6: #{$grey6};
|
|
22
|
+
--grey7: #{$grey7};
|
|
23
|
+
--grey8: #{$grey8};
|
|
24
|
+
--grey9: #{$grey9};
|
|
25
|
+
--grey10: #{$grey10};
|
|
26
|
+
|
|
27
|
+
@if $temperature == 'warm' {
|
|
28
|
+
--warm1: var(--grey1);
|
|
29
|
+
--warm2: var(--grey2);
|
|
30
|
+
--warm3: var(--grey3);
|
|
31
|
+
--warm4: var(--grey4);
|
|
32
|
+
--warm5: var(--grey5);
|
|
33
|
+
--warm6: var(--grey6);
|
|
34
|
+
--warm7: var(--grey7);
|
|
35
|
+
--warm8: var(--grey8);
|
|
36
|
+
--warm9: var(--grey9);
|
|
37
|
+
--warm10: var(--grey10);
|
|
38
|
+
} @else if $temperature == 'cold' {
|
|
39
|
+
--cold1: var(--grey1);
|
|
40
|
+
--cold2: var(--grey2);
|
|
41
|
+
--cold3: var(--grey3);
|
|
42
|
+
--cold4: var(--grey4);
|
|
43
|
+
--cold5: var(--grey5);
|
|
44
|
+
--cold6: var(--grey6);
|
|
45
|
+
--cold7: var(--grey7);
|
|
46
|
+
--cold8: var(--grey8);
|
|
47
|
+
--cold9: var(--grey9);
|
|
48
|
+
--cold10: var(--grey10);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Semantic tokens for light themes
|
|
53
|
+
@mixin semantic-tokens-light($grey-prefix: 'grey') {
|
|
54
|
+
// Backgrounds
|
|
55
|
+
--background: var(--white);
|
|
56
|
+
--background-secondary: var(--#{$grey-prefix}1);
|
|
57
|
+
--background-hover: var(--#{$grey-prefix}1);
|
|
58
|
+
--background-selected: var(--#{$grey-prefix}2);
|
|
59
|
+
--background-selected-hover: var(--#{$grey-prefix}3);
|
|
60
|
+
--background-high-contrast: var(--white);
|
|
61
|
+
|
|
62
|
+
// Borders
|
|
63
|
+
--border-muted: var(--#{$grey-prefix}3);
|
|
64
|
+
--border: var(--#{$grey-prefix}4);
|
|
65
|
+
--border-strong: var(--#{$grey-prefix}6);
|
|
66
|
+
--border-inked: var(--#{$grey-prefix}10);
|
|
67
|
+
--border-inverse: var(--white);
|
|
68
|
+
--border-focus: var(--blue5);
|
|
69
|
+
|
|
70
|
+
// Buttons
|
|
71
|
+
--button: var(--blue5);
|
|
72
|
+
--button-hover: var(--blue6);
|
|
73
|
+
--button-active: var(--blue7);
|
|
74
|
+
--button-disabled: var(--#{$grey-prefix}4);
|
|
75
|
+
|
|
76
|
+
// Links
|
|
77
|
+
--link: var(--blue5);
|
|
78
|
+
--link-hover: var(--blue6);
|
|
79
|
+
--link-subtle: var(--#{$grey-prefix}8);
|
|
80
|
+
--link-visited: var(--indigo5);
|
|
81
|
+
|
|
82
|
+
// Support
|
|
83
|
+
--support-error: var(--red5);
|
|
84
|
+
--support-warning: var(--yellow5);
|
|
85
|
+
--support-success: var(--green5);
|
|
86
|
+
--support-info: var(--blue5);
|
|
87
|
+
|
|
88
|
+
// Content
|
|
89
|
+
--content-primary: var(--#{$grey-prefix}10);
|
|
90
|
+
--content-secondary: var(--#{$grey-prefix}7);
|
|
91
|
+
--content-secondary-alt: var(--#{$grey-prefix}5);
|
|
92
|
+
--content-placeholder: var(--#{$grey-prefix}4);
|
|
93
|
+
--content-on-color: var(--white);
|
|
94
|
+
--content-error: var(--red6);
|
|
95
|
+
--content-success: var(--green6);
|
|
96
|
+
--content-inked: var(--black);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Semantic tokens for dark themes
|
|
100
|
+
@mixin semantic-tokens-dark($grey-prefix: 'grey') {
|
|
101
|
+
// Backgrounds
|
|
102
|
+
--background: var(--#{$grey-prefix}10);
|
|
103
|
+
--background-secondary: var(--#{$grey-prefix}9);
|
|
104
|
+
--background-hover: var(--#{$grey-prefix}9);
|
|
105
|
+
--background-selected: var(--#{$grey-prefix}8);
|
|
106
|
+
--background-selected-hover: var(--#{$grey-prefix}7);
|
|
107
|
+
--background-high-contrast: var(--black);
|
|
108
|
+
|
|
109
|
+
// Borders
|
|
110
|
+
--border-muted: var(--#{$grey-prefix}8);
|
|
111
|
+
--border: var(--#{$grey-prefix}7);
|
|
112
|
+
--border-strong: var(--#{$grey-prefix}6);
|
|
113
|
+
--border-inked: var(--#{$grey-prefix}1);
|
|
114
|
+
--border-inverse: var(--black);
|
|
115
|
+
--border-focus: var(--blue4);
|
|
116
|
+
|
|
117
|
+
// Buttons
|
|
118
|
+
--button: var(--blue4);
|
|
119
|
+
--button-hover: var(--blue3);
|
|
120
|
+
--button-active: var(--blue2);
|
|
121
|
+
--button-disabled: var(--#{$grey-prefix}8);
|
|
122
|
+
|
|
123
|
+
// Links
|
|
124
|
+
--link: var(--blue4);
|
|
125
|
+
--link-hover: var(--blue3);
|
|
126
|
+
--link-subtle: var(--#{$grey-prefix}1);
|
|
127
|
+
--link-visited: var(--indigo4);
|
|
128
|
+
|
|
129
|
+
// Support
|
|
130
|
+
--support-error: var(--red4);
|
|
131
|
+
--support-warning: var(--yellow4);
|
|
132
|
+
--support-success: var(--green4);
|
|
133
|
+
--support-info: var(--blue4);
|
|
134
|
+
|
|
135
|
+
// Content
|
|
136
|
+
--content-primary: var(--#{$grey-prefix}1);
|
|
137
|
+
--content-secondary: var(--#{$grey-prefix}4);
|
|
138
|
+
--content-secondary-alt: var(--#{$grey-prefix}6);
|
|
139
|
+
--content-placeholder: var(--#{$grey-prefix}7);
|
|
140
|
+
--content-on-color: var(--white);
|
|
141
|
+
--content-error: var(--red4);
|
|
142
|
+
--content-success: var(--green4);
|
|
143
|
+
--content-inked: var(--white);
|
|
144
|
+
}
|
package/src/_utilities.scss
CHANGED
|
@@ -1,316 +1,219 @@
|
|
|
1
|
+
[data-new-ui-theme='light--cold'],
|
|
2
|
+
[data-new-ui-theme='dark--cold'] {
|
|
3
|
+
.nu-u-text-cold1 {
|
|
4
|
+
color: var(--cold1);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.nu-u-text-cold2 {
|
|
8
|
+
color: var(--cold2);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.nu-u-text-cold3 {
|
|
12
|
+
color: var(--cold3);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.nu-u-text-cold4 {
|
|
16
|
+
color: var(--cold4);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.nu-u-text-cold5 {
|
|
20
|
+
color: var(--cold5);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.nu-u-text-cold6 {
|
|
24
|
+
color: var(--cold6);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.nu-u-text-cold7 {
|
|
28
|
+
color: var(--cold7);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.nu-u-text-cold8 {
|
|
32
|
+
color: var(--cold8);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.nu-u-text-cold9 {
|
|
36
|
+
color: var(--cold9);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.nu-u-text-cold10 {
|
|
40
|
+
color: var(--cold10);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-new-ui-theme='light--warm'],
|
|
45
|
+
[data-new-ui-theme='dark--warm'] {
|
|
46
|
+
.nu-u-text-warm1 {
|
|
47
|
+
color: var(--warm1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.nu-u-text-warm2 {
|
|
51
|
+
color: var(--warm2);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.nu-u-text-warm3 {
|
|
55
|
+
color: var(--warm3);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nu-u-text-warm4 {
|
|
59
|
+
color: var(--warm4);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nu-u-text-warm5 {
|
|
63
|
+
color: var(--warm5);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.nu-u-text-warm6 {
|
|
67
|
+
color: var(--warm6);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nu-u-text-warm7 {
|
|
71
|
+
color: var(--warm7);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.nu-u-text-warm8 {
|
|
75
|
+
color: var(--warm8);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.nu-u-text-warm9 {
|
|
79
|
+
color: var(--warm9);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.nu-u-text-warm10 {
|
|
83
|
+
color: var(--warm10);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.nu-u-bg {
|
|
88
|
+
background-color: var(--background);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.nu-u-bg-secondary {
|
|
92
|
+
background-color: var(--background-secondary);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.nu-u-bg-hover {
|
|
96
|
+
background-color: var(--background-hover);
|
|
97
|
+
}
|
|
1
98
|
|
|
2
|
-
.nu-u-bg-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
.nu-u-bg-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
.nu-u-bg-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
.nu-u-bg-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
.nu-u-bg-yellow2 {background-color: var(--yellow2);}
|
|
22
|
-
.nu-u-bg-yellow3 {background-color: var(--yellow3);}
|
|
23
|
-
.nu-u-bg-yellow4 {background-color: var(--yellow4);}
|
|
24
|
-
.nu-u-bg-yellow5 {background-color: var(--yellow5);}
|
|
25
|
-
.nu-u-bg-yellow6 {background-color: var(--yellow6);}
|
|
26
|
-
.nu-u-bg-yellow7 {background-color: var(--yellow7);}
|
|
27
|
-
.nu-u-bg-yellow8 {background-color: var(--yellow8);}
|
|
28
|
-
|
|
29
|
-
.nu-u-bg-green1 {background-color: var(--green1);}
|
|
30
|
-
.nu-u-bg-green2 {background-color: var(--green2);}
|
|
31
|
-
.nu-u-bg-green3 {background-color: var(--green3);}
|
|
32
|
-
.nu-u-bg-green4 {background-color: var(--green4);}
|
|
33
|
-
.nu-u-bg-green5 {background-color: var(--green5);}
|
|
34
|
-
.nu-u-bg-green6 {background-color: var(--green6);}
|
|
35
|
-
.nu-u-bg-green7 {background-color: var(--green7);}
|
|
36
|
-
.nu-u-bg-green8 {background-color: var(--green8);}
|
|
37
|
-
|
|
38
|
-
.nu-u-bg-mint1 {background-color: var(--mint1);}
|
|
39
|
-
.nu-u-bg-mint2 {background-color: var(--mint2);}
|
|
40
|
-
.nu-u-bg-mint3 {background-color: var(--mint3);}
|
|
41
|
-
.nu-u-bg-mint4 {background-color: var(--mint4);}
|
|
42
|
-
.nu-u-bg-mint5 {background-color: var(--mint5);}
|
|
43
|
-
.nu-u-bg-mint6 {background-color: var(--mint6);}
|
|
44
|
-
.nu-u-bg-mint7 {background-color: var(--mint7);}
|
|
45
|
-
.nu-u-bg-mint8 {background-color: var(--mint8);}
|
|
46
|
-
|
|
47
|
-
.nu-u-bg-teal1 {background-color: var(--teal1);}
|
|
48
|
-
.nu-u-bg-teal2 {background-color: var(--teal2);}
|
|
49
|
-
.nu-u-bg-teal3 {background-color: var(--teal3);}
|
|
50
|
-
.nu-u-bg-teal4 {background-color: var(--teal4);}
|
|
51
|
-
.nu-u-bg-teal5 {background-color: var(--teal5);}
|
|
52
|
-
.nu-u-bg-teal6 {background-color: var(--teal6);}
|
|
53
|
-
.nu-u-bg-teal7 {background-color: var(--teal7);}
|
|
54
|
-
.nu-u-bg-teal8 {background-color: var(--teal8);}
|
|
55
|
-
|
|
56
|
-
.nu-u-bg-cyan1 {background-color: var(--cyan1);}
|
|
57
|
-
.nu-u-bg-cyan2 {background-color: var(--cyan2);}
|
|
58
|
-
.nu-u-bg-cyan3 {background-color: var(--cyan3);}
|
|
59
|
-
.nu-u-bg-cyan4 {background-color: var(--cyan4);}
|
|
60
|
-
.nu-u-bg-cyan5 {background-color: var(--cyan5);}
|
|
61
|
-
.nu-u-bg-cyan6 {background-color: var(--cyan6);}
|
|
62
|
-
.nu-u-bg-cyan7 {background-color: var(--cyan7);}
|
|
63
|
-
.nu-u-bg-cyan8 {background-color: var(--cyan8);}
|
|
64
|
-
|
|
65
|
-
.nu-u-bg-blue1 {background-color: var(--blue1);}
|
|
66
|
-
.nu-u-bg-blue2 {background-color: var(--blue2);}
|
|
67
|
-
.nu-u-bg-blue3 {background-color: var(--blue3);}
|
|
68
|
-
.nu-u-bg-blue4 {background-color: var(--blue4);}
|
|
69
|
-
.nu-u-bg-blue5 {background-color: var(--blue5);}
|
|
70
|
-
.nu-u-bg-blue6 {background-color: var(--blue6);}
|
|
71
|
-
.nu-u-bg-blue7 {background-color: var(--blue7);}
|
|
72
|
-
.nu-u-bg-blue8 {background-color: var(--blue8);}
|
|
73
|
-
|
|
74
|
-
.nu-u-bg-indigo1 {background-color: var(--indigo1);}
|
|
75
|
-
.nu-u-bg-indigo2 {background-color: var(--indigo2);}
|
|
76
|
-
.nu-u-bg-indigo3 {background-color: var(--indigo3);}
|
|
77
|
-
.nu-u-bg-indigo4 {background-color: var(--indigo4);}
|
|
78
|
-
.nu-u-bg-indigo5 {background-color: var(--indigo5);}
|
|
79
|
-
.nu-u-bg-indigo6 {background-color: var(--indigo6);}
|
|
80
|
-
.nu-u-bg-indigo7 {background-color: var(--indigo7);}
|
|
81
|
-
.nu-u-bg-indigo8 {background-color: var(--indigo8);}
|
|
82
|
-
|
|
83
|
-
.nu-u-bg-purple1 {background-color: var(--purple1);}
|
|
84
|
-
.nu-u-bg-purple2 {background-color: var(--purple2);}
|
|
85
|
-
.nu-u-bg-purple3 {background-color: var(--purple3);}
|
|
86
|
-
.nu-u-bg-purple4 {background-color: var(--purple4);}
|
|
87
|
-
.nu-u-bg-purple5 {background-color: var(--purple5);}
|
|
88
|
-
.nu-u-bg-purple6 {background-color: var(--purple6);}
|
|
89
|
-
.nu-u-bg-purple7 {background-color: var(--purple7);}
|
|
90
|
-
.nu-u-bg-purple8 {background-color: var(--purple8);}
|
|
91
|
-
|
|
92
|
-
.nu-u-bg-pink1 {background-color: var(--pink1);}
|
|
93
|
-
.nu-u-bg-pink2 {background-color: var(--pink2);}
|
|
94
|
-
.nu-u-bg-pink3 {background-color: var(--pink3);}
|
|
95
|
-
.nu-u-bg-pink4 {background-color: var(--pink4);}
|
|
96
|
-
.nu-u-bg-pink5 {background-color: var(--pink5);}
|
|
97
|
-
.nu-u-bg-pink6 {background-color: var(--pink6);}
|
|
98
|
-
.nu-u-bg-pink7 {background-color: var(--pink7);}
|
|
99
|
-
.nu-u-bg-pink8 {background-color: var(--pink8);}
|
|
100
|
-
|
|
101
|
-
.nu-u-bg-brown1 {background-color: var(--brown1);}
|
|
102
|
-
.nu-u-bg-brown2 {background-color: var(--brown2);}
|
|
103
|
-
.nu-u-bg-brown3 {background-color: var(--brown3);}
|
|
104
|
-
.nu-u-bg-brown4 {background-color: var(--brown4);}
|
|
105
|
-
.nu-u-bg-brown5 {background-color: var(--brown5);}
|
|
106
|
-
.nu-u-bg-brown6 {background-color: var(--brown6);}
|
|
107
|
-
.nu-u-bg-brown7 {background-color: var(--brown7);}
|
|
108
|
-
.nu-u-bg-brown8 {background-color: var(--brown8);}
|
|
109
|
-
|
|
110
|
-
.nu-u-bg-grey1 {background-color: var(--grey1);}
|
|
111
|
-
.nu-u-bg-grey2 {background-color: var(--grey2);}
|
|
112
|
-
.nu-u-bg-grey3 {background-color: var(--grey3);}
|
|
113
|
-
.nu-u-bg-grey4 {background-color: var(--grey4);}
|
|
114
|
-
.nu-u-bg-grey5 {background-color: var(--grey5);}
|
|
115
|
-
.nu-u-bg-grey6 {background-color: var(--grey6);}
|
|
116
|
-
.nu-u-bg-grey7 {background-color: var(--grey7);}
|
|
117
|
-
.nu-u-bg-grey8 {background-color: var(--grey8);}
|
|
118
|
-
.nu-u-bg-grey9 {background-color: var(--grey9);}
|
|
119
|
-
.nu-u-bg-grey10 {background-color: var(--grey10);}
|
|
120
|
-
|
|
121
|
-
.nu-u-text-red1 {color: var(--red1);}
|
|
122
|
-
.nu-u-text-red2 {color: var(--red2);}
|
|
123
|
-
.nu-u-text-red3 {color: var(--red3);}
|
|
124
|
-
.nu-u-text-red4 {color: var(--red4);}
|
|
125
|
-
.nu-u-text-red5 {color: var(--red5);}
|
|
126
|
-
.nu-u-text-red6 {color: var(--red6);}
|
|
127
|
-
.nu-u-text-red7 {color: var(--red7);}
|
|
128
|
-
.nu-u-text-red8 {color: var(--red8);}
|
|
129
|
-
|
|
130
|
-
.nu-u-text-orange1 {color: var(--orange1);}
|
|
131
|
-
.nu-u-text-orange2 {color: var(--orange2);}
|
|
132
|
-
.nu-u-text-orange3 {color: var(--orange3);}
|
|
133
|
-
.nu-u-text-orange4 {color: var(--orange4);}
|
|
134
|
-
.nu-u-text-orange5 {color: var(--orange5);}
|
|
135
|
-
.nu-u-text-orange6 {color: var(--orange6);}
|
|
136
|
-
.nu-u-text-orange7 {color: var(--orange7);}
|
|
137
|
-
.nu-u-text-orange8 {color: var(--orange8);}
|
|
138
|
-
|
|
139
|
-
.nu-u-text-yellow1 {color: var(--yellow1);}
|
|
140
|
-
.nu-u-text-yellow2 {color: var(--yellow2);}
|
|
141
|
-
.nu-u-text-yellow3 {color: var(--yellow3);}
|
|
142
|
-
.nu-u-text-yellow4 {color: var(--yellow4);}
|
|
143
|
-
.nu-u-text-yellow5 {color: var(--yellow5);}
|
|
144
|
-
.nu-u-text-yellow6 {color: var(--yellow6);}
|
|
145
|
-
.nu-u-text-yellow7 {color: var(--yellow7);}
|
|
146
|
-
.nu-u-text-yellow8 {color: var(--yellow8);}
|
|
147
|
-
|
|
148
|
-
.nu-u-text-green1 {color: var(--green1);}
|
|
149
|
-
.nu-u-text-green2 {color: var(--green2);}
|
|
150
|
-
.nu-u-text-green3 {color: var(--green3);}
|
|
151
|
-
.nu-u-text-green4 {color: var(--green4);}
|
|
152
|
-
.nu-u-text-green5 {color: var(--green5);}
|
|
153
|
-
.nu-u-text-green6 {color: var(--green6);}
|
|
154
|
-
.nu-u-text-green7 {color: var(--green7);}
|
|
155
|
-
.nu-u-text-green8 {color: var(--green8);}
|
|
156
|
-
|
|
157
|
-
.nu-u-text-mint1 {color: var(--mint1);}
|
|
158
|
-
.nu-u-text-mint2 {color: var(--mint2);}
|
|
159
|
-
.nu-u-text-mint3 {color: var(--mint3);}
|
|
160
|
-
.nu-u-text-mint4 {color: var(--mint4);}
|
|
161
|
-
.nu-u-text-mint5 {color: var(--mint5);}
|
|
162
|
-
.nu-u-text-mint6 {color: var(--mint6);}
|
|
163
|
-
.nu-u-text-mint7 {color: var(--mint7);}
|
|
164
|
-
.nu-u-text-mint8 {color: var(--mint8);}
|
|
165
|
-
|
|
166
|
-
.nu-u-text-teal1 {color: var(--teal1);}
|
|
167
|
-
.nu-u-text-teal2 {color: var(--teal2);}
|
|
168
|
-
.nu-u-text-teal3 {color: var(--teal3);}
|
|
169
|
-
.nu-u-text-teal4 {color: var(--teal4);}
|
|
170
|
-
.nu-u-text-teal5 {color: var(--teal5);}
|
|
171
|
-
.nu-u-text-teal6 {color: var(--teal6);}
|
|
172
|
-
.nu-u-text-teal7 {color: var(--teal7);}
|
|
173
|
-
.nu-u-text-teal8 {color: var(--teal8);}
|
|
174
|
-
|
|
175
|
-
.nu-u-text-cyan1 {color: var(--cyan1);}
|
|
176
|
-
.nu-u-text-cyan2 {color: var(--cyan2);}
|
|
177
|
-
.nu-u-text-cyan3 {color: var(--cyan3);}
|
|
178
|
-
.nu-u-text-cyan4 {color: var(--cyan4);}
|
|
179
|
-
.nu-u-text-cyan5 {color: var(--cyan5);}
|
|
180
|
-
.nu-u-text-cyan6 {color: var(--cyan6);}
|
|
181
|
-
.nu-u-text-cyan7 {color: var(--cyan7);}
|
|
182
|
-
.nu-u-text-cyan8 {color: var(--cyan8);}
|
|
183
|
-
|
|
184
|
-
.nu-u-text-blue1 {color: var(--blue1);}
|
|
185
|
-
.nu-u-text-blue2 {color: var(--blue2);}
|
|
186
|
-
.nu-u-text-blue3 {color: var(--blue3);}
|
|
187
|
-
.nu-u-text-blue4 {color: var(--blue4);}
|
|
188
|
-
.nu-u-text-blue5 {color: var(--blue5);}
|
|
189
|
-
.nu-u-text-blue6 {color: var(--blue6);}
|
|
190
|
-
.nu-u-text-blue7 {color: var(--blue7);}
|
|
191
|
-
.nu-u-text-blue8 {color: var(--blue8);}
|
|
192
|
-
|
|
193
|
-
.nu-u-text-indigo1 {color: var(--indigo1);}
|
|
194
|
-
.nu-u-text-indigo2 {color: var(--indigo2);}
|
|
195
|
-
.nu-u-text-indigo3 {color: var(--indigo3);}
|
|
196
|
-
.nu-u-text-indigo4 {color: var(--indigo4);}
|
|
197
|
-
.nu-u-text-indigo5 {color: var(--indigo5);}
|
|
198
|
-
.nu-u-text-indigo6 {color: var(--indigo6);}
|
|
199
|
-
.nu-u-text-indigo7 {color: var(--indigo7);}
|
|
200
|
-
.nu-u-text-indigo8 {color: var(--indigo8);}
|
|
201
|
-
|
|
202
|
-
.nu-u-text-purple1 {color: var(--purple1);}
|
|
203
|
-
.nu-u-text-purple2 {color: var(--purple2);}
|
|
204
|
-
.nu-u-text-purple3 {color: var(--purple3);}
|
|
205
|
-
.nu-u-text-purple4 {color: var(--purple4);}
|
|
206
|
-
.nu-u-text-purple5 {color: var(--purple5);}
|
|
207
|
-
.nu-u-text-purple6 {color: var(--purple6);}
|
|
208
|
-
.nu-u-text-purple7 {color: var(--purple7);}
|
|
209
|
-
.nu-u-text-purple8 {color: var(--purple8);}
|
|
210
|
-
|
|
211
|
-
.nu-u-text-pink1 {color: var(--pink1);}
|
|
212
|
-
.nu-u-text-pink2 {color: var(--pink2);}
|
|
213
|
-
.nu-u-text-pink3 {color: var(--pink3);}
|
|
214
|
-
.nu-u-text-pink4 {color: var(--pink4);}
|
|
215
|
-
.nu-u-text-pink5 {color: var(--pink5);}
|
|
216
|
-
.nu-u-text-pink6 {color: var(--pink6);}
|
|
217
|
-
.nu-u-text-pink7 {color: var(--pink7);}
|
|
218
|
-
.nu-u-text-pink8 {color: var(--pink8);}
|
|
219
|
-
|
|
220
|
-
.nu-u-text-brown1 {color: var(--brown1);}
|
|
221
|
-
.nu-u-text-brown2 {color: var(--brown2);}
|
|
222
|
-
.nu-u-text-brown3 {color: var(--brown3);}
|
|
223
|
-
.nu-u-text-brown4 {color: var(--brown4);}
|
|
224
|
-
.nu-u-text-brown5 {color: var(--brown5);}
|
|
225
|
-
.nu-u-text-brown6 {color: var(--brown6);}
|
|
226
|
-
.nu-u-text-brown7 {color: var(--brown7);}
|
|
227
|
-
.nu-u-text-brown8 {color: var(--brown8);}
|
|
228
|
-
|
|
229
|
-
.nu-u-text-grey1 {color: var(--grey1);}
|
|
230
|
-
.nu-u-text-grey2 {color: var(--grey2);}
|
|
231
|
-
.nu-u-text-grey3 {color: var(--grey3);}
|
|
232
|
-
.nu-u-text-grey4 {color: var(--grey4);}
|
|
233
|
-
.nu-u-text-grey5 {color: var(--grey5);}
|
|
234
|
-
.nu-u-text-grey6 {color: var(--grey6);}
|
|
235
|
-
.nu-u-text-grey7 {color: var(--grey7);}
|
|
236
|
-
.nu-u-text-grey8 {color: var(--grey8);}
|
|
237
|
-
.nu-u-text-grey9 {color: var(--grey9);}
|
|
238
|
-
.nu-u-text-grey10 {color: var(--grey10);}
|
|
239
|
-
|
|
240
|
-
[data-new-ui-theme="light--cold"], [data-new-ui-theme="dark--cold"] {
|
|
241
|
-
.nu-u-text-cold1 {color: var(--cold1);}
|
|
242
|
-
.nu-u-text-cold2 {color: var(--cold2);}
|
|
243
|
-
.nu-u-text-cold3 {color: var(--cold3);}
|
|
244
|
-
.nu-u-text-cold4 {color: var(--cold4);}
|
|
245
|
-
.nu-u-text-cold5 {color: var(--cold5);}
|
|
246
|
-
.nu-u-text-cold6 {color: var(--cold6);}
|
|
247
|
-
.nu-u-text-cold7 {color: var(--cold7);}
|
|
248
|
-
.nu-u-text-cold8 {color: var(--cold8);}
|
|
249
|
-
.nu-u-text-cold9 {color: var(--cold9);}
|
|
250
|
-
.nu-u-text-cold10 {color: var(--cold10);}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
[data-new-ui-theme="light--warm"], [data-new-ui-theme="dark--warm"] {
|
|
254
|
-
.nu-u-text-warm1 {color: var(--warm1);}
|
|
255
|
-
.nu-u-text-warm2 {color: var(--warm2);}
|
|
256
|
-
.nu-u-text-warm3 {color: var(--warm3);}
|
|
257
|
-
.nu-u-text-warm4 {color: var(--warm4);}
|
|
258
|
-
.nu-u-text-warm5 {color: var(--warm5);}
|
|
259
|
-
.nu-u-text-warm6 {color: var(--warm6);}
|
|
260
|
-
.nu-u-text-warm7 {color: var(--warm7);}
|
|
261
|
-
.nu-u-text-warm8 {color: var(--warm8);}
|
|
262
|
-
.nu-u-text-warm9 {color: var(--warm9);}
|
|
263
|
-
.nu-u-text-warm10 {color: var(--warm10);}
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.nu-u-bg {background-color: var(--background);}
|
|
267
|
-
.nu-u-bg-secondary {background-color: var(--background-secondary);}
|
|
268
|
-
.nu-u-bg-hover {background-color: var(--background-hover);}
|
|
269
|
-
.nu-u-bg-selected {background-color: var(--background-selected);}
|
|
270
|
-
.nu-u-bg-selected-hover {background-color: var(--background-selected-hover);}
|
|
271
|
-
.nu-u-bg-high-contrast {background-color: var(--background-high-contrast);}
|
|
272
|
-
|
|
273
|
-
.nu-u-bg-black {background-color: var(--black);}
|
|
274
|
-
.nu-u-bg-white {background-color: var(--white);}
|
|
99
|
+
.nu-u-bg-selected {
|
|
100
|
+
background-color: var(--background-selected);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.nu-u-bg-selected-hover {
|
|
104
|
+
background-color: var(--background-selected-hover);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nu-u-bg-high-contrast {
|
|
108
|
+
background-color: var(--background-high-contrast);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.nu-u-bg-black {
|
|
112
|
+
background-color: var(--black);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.nu-u-bg-white {
|
|
116
|
+
background-color: var(--white);
|
|
117
|
+
}
|
|
275
118
|
|
|
276
119
|
/* Border */
|
|
277
|
-
.nu-u-b--muted {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
.nu-u-b
|
|
282
|
-
|
|
120
|
+
.nu-u-b--muted {
|
|
121
|
+
border-color: var(--border-muted);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.nu-u-b {
|
|
125
|
+
border-color: var(--border);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.nu-u-b--strong {
|
|
129
|
+
border-color: var(--border-strong);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.nu-u-b--inked {
|
|
133
|
+
border-color: var(--border-inked);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.nu-u-b--inverse {
|
|
137
|
+
border-color: var(--border-inverse);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.nu-u-b--focus {
|
|
141
|
+
border-color: var(--border-focus);
|
|
142
|
+
}
|
|
283
143
|
|
|
284
144
|
/* Text */
|
|
285
|
-
.nu-u-text--primary {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
.nu-u-text--
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
.nu-u-text--
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
.nu-u-text
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
.nu-u-
|
|
304
|
-
|
|
145
|
+
.nu-u-text--primary {
|
|
146
|
+
color: var(--content-primary);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.nu-u-text--secondary {
|
|
150
|
+
color: var(--content-secondary);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.nu-u-text--secondary-alt {
|
|
154
|
+
color: var(--content-secondary-alt);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.nu-u-text--placeholder::placeholder,
|
|
158
|
+
.nu-u-text--placeholder::input-placeholder,
|
|
159
|
+
.nu-u-text--placeholder:input-placeholder {
|
|
160
|
+
color: var(--content-placeholder);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.nu-u-text--on-color {
|
|
164
|
+
color: var(--content-on-color);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.nu-u-text--error {
|
|
168
|
+
color: var(--content-error);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.nu-u-text--success {
|
|
172
|
+
color: var(--content-success);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.nu-u-text--inked {
|
|
176
|
+
color: var(--content-inked);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.nu-u-text-black {
|
|
180
|
+
color: var(--black);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.nu-u-text-white {
|
|
184
|
+
color: var(--white);
|
|
185
|
+
}
|
|
305
186
|
|
|
306
187
|
/* Links */
|
|
307
|
-
.nu-u-link {
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
188
|
+
.nu-u-link {
|
|
189
|
+
color: var(--link);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.nu-u-link--hover {
|
|
193
|
+
color: var(--link-hover);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.nu-u-link--subtle {
|
|
197
|
+
color: var(--link-subtle);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.nu-u-link--visited {
|
|
201
|
+
color: var(--link-visited);
|
|
202
|
+
}
|
|
311
203
|
|
|
312
204
|
/* Support */
|
|
313
|
-
.nu-u-support--error {
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
205
|
+
.nu-u-support--error {
|
|
206
|
+
color: var(--support-error);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.nu-u-support--warning {
|
|
210
|
+
color: var(--support-warning);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.nu-u-support--success {
|
|
214
|
+
color: var(--support-success);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.nu-u-support--info {
|
|
218
|
+
color: var(--support-info);
|
|
219
|
+
}
|
package/src/index.scss
CHANGED