@new-ui/colors 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +5 -5
- package/src/_palette.scss +115 -0
- package/src/_theme-dark--cold.scss +20 -183
- package/src/_theme-dark--warm.scss +20 -183
- package/src/_theme-dark.scss +19 -172
- package/src/_theme-light--cold.scss +20 -183
- package/src/_theme-light--warm.scss +20 -183
- package/src/_theme-light.scss +19 -172
- package/src/_theme-mixins.scss +133 -0
- package/src/_utilities.scss +10 -256
package/src/_theme-light.scss
CHANGED
|
@@ -1,174 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
--red2: oklch(88.06% 0.0631 22.04);
|
|
4
|
-
--red3: oklch(78.71% 0.1233 23.85);
|
|
5
|
-
--red4: oklch(66.85% 0.2188 27.86);
|
|
6
|
-
--red5: oklch(65.42% 0.2321 28.66);
|
|
7
|
-
--red6: oklch(53.49% 0.1867 28.41);
|
|
8
|
-
--red7: oklch(40.87% 0.1383 28.31);
|
|
9
|
-
--red8: oklch(26.91% 0.0843 27.43);
|
|
10
|
-
|
|
11
|
-
--orange1: oklch(97.94% 0.0169 76.12);
|
|
12
|
-
--orange2: oklch(92.44% 0.0628 75.47);
|
|
13
|
-
--orange3: oklch(86.56% 0.1144 74.96);
|
|
14
|
-
--orange4: oklch(77.91% 0.1702 65.71);
|
|
15
|
-
--orange5: oklch(76.52% 0.1752 62.57);
|
|
16
|
-
--orange6: oklch(62.47% 0.142257 63.186);
|
|
17
|
-
--orange7: oklch(47.75% 0.1069 65.23);
|
|
18
|
-
--orange8: oklch(31.2% 0.0684 68.13);
|
|
19
|
-
|
|
20
|
-
--yellow1: oklch(98.71% 0.0201 94.52);
|
|
21
|
-
--yellow2: oklch(95.57% 0.0743 95.93);
|
|
22
|
-
--yellow3: oklch(91.99% 0.1295 95.37);
|
|
23
|
-
--yellow4: oklch(87.33% 0.176 91.91);
|
|
24
|
-
--yellow5: oklch(86.52% 0.1768 90.38);
|
|
25
|
-
--yellow6: oklch(70.52% 0.1441 90.64);
|
|
26
|
-
--yellow7: oklch(53.55% 0.109476 91.1235);
|
|
27
|
-
--yellow8: oklch(34.95% 0.0716 93.44);
|
|
28
|
-
|
|
29
|
-
--green1: oklch(97.77% 0.0156 154.48);
|
|
30
|
-
--green2: oklch(91.5% 0.0588 153.39);
|
|
31
|
-
--green3: oklch(84.74% 0.1113 151.25);
|
|
32
|
-
--green4: oklch(74.63% 0.183 148.25);
|
|
33
|
-
--green5: oklch(73.03% 0.1944 147.44);
|
|
34
|
-
--green6: oklch(59.64% 0.1556 147.67);
|
|
35
|
-
--green7: oklch(45.69% 0.1169 147.76);
|
|
36
|
-
--green8: oklch(29.96% 0.0699 149.05);
|
|
37
|
-
|
|
38
|
-
--mint1: oklch(97.67% 0.0158 192.09);
|
|
39
|
-
--mint2: oklch(91.4% 0.0559 193.43);
|
|
40
|
-
--mint3: oklch(84.89% 0.0975 191.4);
|
|
41
|
-
--mint4: oklch(76.08% 0.1293 189.71);
|
|
42
|
-
--mint5: oklch(74.81% 0.1296 189.03);
|
|
43
|
-
--mint6: oklch(61.02% 0.1054 189.82);
|
|
44
|
-
--mint7: oklch(46.64% 0.0808 189.01);
|
|
45
|
-
--mint8: oklch(30.41% 0.052376 190.8158);
|
|
46
|
-
|
|
47
|
-
--teal1: oklch(97.6% 0.0099 212.52);
|
|
48
|
-
--teal2: oklch(91.01% 0.0384 208.75);
|
|
49
|
-
--teal3: oklch(83.55% 0.0693 209.91);
|
|
50
|
-
--teal4: oklch(71.96% 0.1068 211.76);
|
|
51
|
-
--teal5: oklch(69.98% 0.1109 212.72);
|
|
52
|
-
--teal6: oklch(57.32% 0.0893 212.09);
|
|
53
|
-
--teal7: oklch(43.95% 0.0672 212.18);
|
|
54
|
-
--teal8: oklch(29.06% 0.0415 210.48);
|
|
55
|
-
|
|
56
|
-
--cyan1: oklch(97.65% 0.011 225.98);
|
|
57
|
-
--cyan2: oklch(91.15% 0.0418 227.91);
|
|
58
|
-
--cyan3: oklch(83.73% 0.0772 228.87);
|
|
59
|
-
--cyan4: oklch(72.55% 0.1259 232.84);
|
|
60
|
-
--cyan5: oklch(70.68% 0.1327 233.88);
|
|
61
|
-
--cyan6: oklch(57.95% 0.1068 233.26);
|
|
62
|
-
--cyan7: oklch(44.23% 0.0796 233.37);
|
|
63
|
-
--cyan8: oklch(29.28% 0.0484 232.3);
|
|
64
|
-
|
|
65
|
-
--blue1: oklch(96.63% 0.0165 250.84);
|
|
66
|
-
--blue2: oklch(87.61% 0.062887 250.7253);
|
|
67
|
-
--blue3: oklch(77.33% 0.1193 251.31);
|
|
68
|
-
--blue4: oklch(62.52% 0.2047 255.95);
|
|
69
|
-
--blue5: oklch(60.28% 0.2177 257.42);
|
|
70
|
-
--blue6: oklch(49.47% 0.175 256.92);
|
|
71
|
-
--blue7: oklch(38.03% 0.12949 255.9238);
|
|
72
|
-
--blue8: oklch(25.32% 0.0794 253.56);
|
|
73
|
-
|
|
74
|
-
--indigo1: oklch(96.48% 0.0133 290.75);
|
|
75
|
-
--indigo2: oklch(86.98% 0.0495 286.6);
|
|
76
|
-
--indigo3: oklch(75.4% 0.0957 284.55);
|
|
77
|
-
--indigo4: oklch(56.4% 0.1758 279.91);
|
|
78
|
-
--indigo5: oklch(52.95% 0.191 278.34);
|
|
79
|
-
--indigo6: oklch(43.62% 0.1538 278.81);
|
|
80
|
-
--indigo7: oklch(33.98% 0.1127 279.22);
|
|
81
|
-
--indigo8: oklch(23.31% 0.0672 281.07);
|
|
82
|
-
|
|
83
|
-
--purple1: oklch(96.97% 0.0163 313.62);
|
|
84
|
-
--purple2: oklch(88.81% 0.0595 314.5);
|
|
85
|
-
--purple3: oklch(79.08% 0.113 313.73);
|
|
86
|
-
--purple4: oklch(64.18% 0.1982 312.55);
|
|
87
|
-
--purple5: oklch(61.49% 0.2129 312.41);
|
|
88
|
-
--purple6: oklch(50.43% 0.1716 312.44);
|
|
89
|
-
--purple7: oklch(38.87% 0.126 312.32);
|
|
90
|
-
--purple8: oklch(26.16% 0.0759 313.11);
|
|
91
|
-
|
|
92
|
-
--pink1: oklch(96.56% 0.0177 4.51);
|
|
93
|
-
--pink2: oklch(87.81% 0.0675 5.89);
|
|
94
|
-
--pink3: oklch(77.9% 0.1338 8.42);
|
|
95
|
-
--pink4: oklch(66.26% 0.2271 15.86);
|
|
96
|
-
--pink5: oklch(64.97% 0.2383 17.9);
|
|
97
|
-
--pink6: oklch(53.08% 0.1924 17.29);
|
|
98
|
-
--pink7: oklch(40.48% 0.1434 16.74);
|
|
99
|
-
--pink8: oklch(26.78% 0.0869 14.7);
|
|
1
|
+
@use 'palette' as *;
|
|
2
|
+
@use 'theme-mixins' as *;
|
|
100
3
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
--grey9: oklch(26.86% 0 0);
|
|
119
|
-
--grey10: oklch(20.02% 0 0);
|
|
120
|
-
|
|
121
|
-
--black: oklch(0% 0 0);
|
|
122
|
-
--white: oklch(100% 0 0);
|
|
123
|
-
|
|
124
|
-
// Backgrounds
|
|
125
|
-
--background: var(--white);
|
|
126
|
-
--background-secondary: var(--grey1);
|
|
127
|
-
--background-hover: var(--grey1);
|
|
128
|
-
--background-selected: var(--grey2);
|
|
129
|
-
--background-selected-hover: var(--grey3);
|
|
130
|
-
--background-high-contrast: var(--white);
|
|
131
|
-
|
|
132
|
-
// Borders
|
|
133
|
-
--border-muted: var(--grey2);
|
|
134
|
-
--border: var(--grey4);
|
|
135
|
-
--border-strong: var(--grey6);
|
|
136
|
-
--border-inked: var(--grey10);
|
|
137
|
-
--border-inverse: var(--white);
|
|
138
|
-
--border-focus: var(--blue5);
|
|
139
|
-
|
|
140
|
-
// Buttons
|
|
141
|
-
--button: var(--blue5);
|
|
142
|
-
--button-hover: var(--blue6);
|
|
143
|
-
--button-active: var(--blue7);
|
|
144
|
-
--button-disabled: var(--grey4);
|
|
145
|
-
|
|
146
|
-
// Icons
|
|
147
|
-
--icon-primary: var(--grey9);
|
|
148
|
-
--icon-secondary: var(--grey7);
|
|
149
|
-
--icon-disabled: var(--grey4);
|
|
150
|
-
--icon-on-color: var(--white);
|
|
151
|
-
--icon-inked: var(--black);
|
|
152
|
-
|
|
153
|
-
// Links
|
|
154
|
-
--link: var(--blue5);
|
|
155
|
-
--link-hover: var(--blue6);
|
|
156
|
-
--link-subtle: var(--grey8);
|
|
157
|
-
--link-visited: var(--indigo5);
|
|
158
|
-
|
|
159
|
-
// Support
|
|
160
|
-
--support-error: var(--red5);
|
|
161
|
-
--support-warning: var(--yellow5);
|
|
162
|
-
--support-success: var(--green5);
|
|
163
|
-
--support-info: var(--blue5);
|
|
164
|
-
|
|
165
|
-
// Text
|
|
166
|
-
--text-primary: var(--grey10);
|
|
167
|
-
--text-secondary: var(--grey7);
|
|
168
|
-
--text-secondary-alt: var(--grey5);
|
|
169
|
-
--text-placeholder: var(--grey4);
|
|
170
|
-
--text-on-color: var(--white);
|
|
171
|
-
--text-error: var(--red6);
|
|
172
|
-
--text-success: var(--green6);
|
|
173
|
-
--text-inked: var(--black);
|
|
4
|
+
:root, [data-new-ui-theme="light"] {
|
|
5
|
+
@include color-palette;
|
|
6
|
+
|
|
7
|
+
@include grey-scale(
|
|
8
|
+
oklch(96.72% 0 0),
|
|
9
|
+
oklch(90.67% 0 0),
|
|
10
|
+
oklch(82.66% 0 0),
|
|
11
|
+
oklch(73.16% 0 0),
|
|
12
|
+
oklch(64.34% 0 0),
|
|
13
|
+
oklch(54.17% 0 0),
|
|
14
|
+
oklch(43.86% 0 0),
|
|
15
|
+
oklch(34.46% 0 0),
|
|
16
|
+
oklch(26.86% 0 0),
|
|
17
|
+
oklch(20.02% 0 0)
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
@include semantic-tokens-light;
|
|
174
21
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
@use 'palette' as *;
|
|
2
|
+
|
|
3
|
+
@mixin grey-scale($grey1, $grey2, $grey3, $grey4, $grey5, $grey6, $grey7, $grey8, $grey9, $grey10, $temperature: null) {
|
|
4
|
+
--grey1: #{$grey1};
|
|
5
|
+
--grey2: #{$grey2};
|
|
6
|
+
--grey3: #{$grey3};
|
|
7
|
+
--grey4: #{$grey4};
|
|
8
|
+
--grey5: #{$grey5};
|
|
9
|
+
--grey6: #{$grey6};
|
|
10
|
+
--grey7: #{$grey7};
|
|
11
|
+
--grey8: #{$grey8};
|
|
12
|
+
--grey9: #{$grey9};
|
|
13
|
+
--grey10: #{$grey10};
|
|
14
|
+
|
|
15
|
+
@if $temperature == 'warm' {
|
|
16
|
+
--warm1: var(--grey1);
|
|
17
|
+
--warm2: var(--grey2);
|
|
18
|
+
--warm3: var(--grey3);
|
|
19
|
+
--warm4: var(--grey4);
|
|
20
|
+
--warm5: var(--grey5);
|
|
21
|
+
--warm6: var(--grey6);
|
|
22
|
+
--warm7: var(--grey7);
|
|
23
|
+
--warm8: var(--grey8);
|
|
24
|
+
--warm9: var(--grey9);
|
|
25
|
+
--warm10: var(--grey10);
|
|
26
|
+
} @else if $temperature == 'cold' {
|
|
27
|
+
--cold1: var(--grey1);
|
|
28
|
+
--cold2: var(--grey2);
|
|
29
|
+
--cold3: var(--grey3);
|
|
30
|
+
--cold4: var(--grey4);
|
|
31
|
+
--cold5: var(--grey5);
|
|
32
|
+
--cold6: var(--grey6);
|
|
33
|
+
--cold7: var(--grey7);
|
|
34
|
+
--cold8: var(--grey8);
|
|
35
|
+
--cold9: var(--grey9);
|
|
36
|
+
--cold10: var(--grey10);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Semantic tokens for light themes
|
|
41
|
+
@mixin semantic-tokens-light($grey-prefix: 'grey') {
|
|
42
|
+
// Backgrounds
|
|
43
|
+
--background: var(--white);
|
|
44
|
+
--background-secondary: var(--#{$grey-prefix}1);
|
|
45
|
+
--background-hover: var(--#{$grey-prefix}1);
|
|
46
|
+
--background-selected: var(--#{$grey-prefix}2);
|
|
47
|
+
--background-selected-hover: var(--#{$grey-prefix}3);
|
|
48
|
+
--background-high-contrast: var(--white);
|
|
49
|
+
|
|
50
|
+
// Borders
|
|
51
|
+
--border-muted: var(--#{$grey-prefix}3);
|
|
52
|
+
--border: var(--#{$grey-prefix}4);
|
|
53
|
+
--border-strong: var(--#{$grey-prefix}6);
|
|
54
|
+
--border-inked: var(--#{$grey-prefix}10);
|
|
55
|
+
--border-inverse: var(--white);
|
|
56
|
+
--border-focus: var(--blue5);
|
|
57
|
+
|
|
58
|
+
// Buttons
|
|
59
|
+
--button: var(--blue5);
|
|
60
|
+
--button-hover: var(--blue6);
|
|
61
|
+
--button-active: var(--blue7);
|
|
62
|
+
--button-disabled: var(--#{$grey-prefix}4);
|
|
63
|
+
|
|
64
|
+
// Links
|
|
65
|
+
--link: var(--blue5);
|
|
66
|
+
--link-hover: var(--blue6);
|
|
67
|
+
--link-subtle: var(--#{$grey-prefix}8);
|
|
68
|
+
--link-visited: var(--indigo5);
|
|
69
|
+
|
|
70
|
+
// Support
|
|
71
|
+
--support-error: var(--red5);
|
|
72
|
+
--support-warning: var(--yellow5);
|
|
73
|
+
--support-success: var(--green5);
|
|
74
|
+
--support-info: var(--blue5);
|
|
75
|
+
|
|
76
|
+
// Content
|
|
77
|
+
--content-primary: var(--#{$grey-prefix}10);
|
|
78
|
+
--content-secondary: var(--#{$grey-prefix}7);
|
|
79
|
+
--content-secondary-alt: var(--#{$grey-prefix}5);
|
|
80
|
+
--content-placeholder: var(--#{$grey-prefix}4);
|
|
81
|
+
--content-on-color: var(--white);
|
|
82
|
+
--content-error: var(--red6);
|
|
83
|
+
--content-success: var(--green6);
|
|
84
|
+
--content-inked: var(--black);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Semantic tokens for dark themes
|
|
88
|
+
@mixin semantic-tokens-dark($grey-prefix: 'grey') {
|
|
89
|
+
// Backgrounds
|
|
90
|
+
--background: var(--#{$grey-prefix}10);
|
|
91
|
+
--background-secondary: var(--#{$grey-prefix}9);
|
|
92
|
+
--background-hover: var(--#{$grey-prefix}9);
|
|
93
|
+
--background-selected: var(--#{$grey-prefix}8);
|
|
94
|
+
--background-selected-hover: var(--#{$grey-prefix}7);
|
|
95
|
+
--background-high-contrast: var(--black);
|
|
96
|
+
|
|
97
|
+
// Borders
|
|
98
|
+
--border-muted: var(--#{$grey-prefix}8);
|
|
99
|
+
--border: var(--#{$grey-prefix}7);
|
|
100
|
+
--border-strong: var(--#{$grey-prefix}6);
|
|
101
|
+
--border-inked: var(--#{$grey-prefix}1);
|
|
102
|
+
--border-inverse: var(--black);
|
|
103
|
+
--border-focus: var(--blue4);
|
|
104
|
+
|
|
105
|
+
// Buttons
|
|
106
|
+
--button: var(--blue4);
|
|
107
|
+
--button-hover: var(--blue3);
|
|
108
|
+
--button-active: var(--blue2);
|
|
109
|
+
--button-disabled: var(--#{$grey-prefix}8);
|
|
110
|
+
|
|
111
|
+
// Links
|
|
112
|
+
--link: var(--blue4);
|
|
113
|
+
--link-hover: var(--blue3);
|
|
114
|
+
--link-subtle: var(--#{$grey-prefix}1);
|
|
115
|
+
--link-visited: var(--indigo4);
|
|
116
|
+
|
|
117
|
+
// Support
|
|
118
|
+
--support-error: var(--red4);
|
|
119
|
+
--support-warning: var(--yellow4);
|
|
120
|
+
--support-success: var(--green4);
|
|
121
|
+
--support-info: var(--blue4);
|
|
122
|
+
|
|
123
|
+
// Content
|
|
124
|
+
--content-primary: var(--#{$grey-prefix}1);
|
|
125
|
+
--content-secondary: var(--#{$grey-prefix}4);
|
|
126
|
+
--content-secondary-alt: var(--#{$grey-prefix}6);
|
|
127
|
+
--content-placeholder: var(--#{$grey-prefix}7);
|
|
128
|
+
--content-on-color: var(--white);
|
|
129
|
+
--content-error: var(--red4);
|
|
130
|
+
--content-success: var(--green4);
|
|
131
|
+
--content-inked: var(--white);
|
|
132
|
+
}
|
|
133
|
+
|
package/src/_utilities.scss
CHANGED
|
@@ -1,242 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
.nu-u-bg-red1 {background-color: var(--red1);}
|
|
3
|
-
.nu-u-bg-red2 {background-color: var(--red2);}
|
|
4
|
-
.nu-u-bg-red3 {background-color: var(--red3);}
|
|
5
|
-
.nu-u-bg-red4 {background-color: var(--red4);}
|
|
6
|
-
.nu-u-bg-red5 {background-color: var(--red5);}
|
|
7
|
-
.nu-u-bg-red6 {background-color: var(--red6);}
|
|
8
|
-
.nu-u-bg-red7 {background-color: var(--red7);}
|
|
9
|
-
.nu-u-bg-red8 {background-color: var(--red8);}
|
|
10
|
-
|
|
11
|
-
.nu-u-bg-orange1 {background-color: var(--orange1);}
|
|
12
|
-
.nu-u-bg-orange2 {background-color: var(--orange2);}
|
|
13
|
-
.nu-u-bg-orange3 {background-color: var(--orange3);}
|
|
14
|
-
.nu-u-bg-orange4 {background-color: var(--orange4);}
|
|
15
|
-
.nu-u-bg-orange5 {background-color: var(--orange5);}
|
|
16
|
-
.nu-u-bg-orange6 {background-color: var(--orange6);}
|
|
17
|
-
.nu-u-bg-orange7 {background-color: var(--orange7);}
|
|
18
|
-
.nu-u-bg-orange8 {background-color: var(--orange8);}
|
|
19
|
-
|
|
20
|
-
.nu-u-bg-yellow1 {background-color: var(--yellow1);}
|
|
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
1
|
[data-new-ui-theme="light--cold"], [data-new-ui-theme="dark--cold"] {
|
|
241
2
|
.nu-u-text-cold1 {color: var(--cold1);}
|
|
242
3
|
.nu-u-text-cold2 {color: var(--cold2);}
|
|
@@ -282,35 +43,28 @@
|
|
|
282
43
|
.nu-u-b--focus {border-color: var(--border-focus);}
|
|
283
44
|
|
|
284
45
|
/* Text */
|
|
285
|
-
.nu-u-text--primary {color: var(--
|
|
286
|
-
.nu-u-text--secondary {color: var(--
|
|
287
|
-
.nu-u-text--secondary-alt {color: var(--
|
|
46
|
+
.nu-u-text--primary {color: var(--content-primary);}
|
|
47
|
+
.nu-u-text--secondary {color: var(--content-secondary);}
|
|
48
|
+
.nu-u-text--secondary-alt {color: var(--content-secondary-alt);}
|
|
288
49
|
.nu-u-text--placeholder::placeholder,
|
|
289
50
|
.nu-u-text--placeholder::-webkit-input-placeholder,
|
|
290
|
-
.nu-u-text--placeholder:-ms-input-placeholder {color: var(--
|
|
291
|
-
.nu-u-text--on-color {color: var(--
|
|
292
|
-
.nu-u-text--error {color: var(--
|
|
293
|
-
.nu-u-text--success {color: var(--
|
|
294
|
-
.nu-u-text--inked {color: var(--
|
|
51
|
+
.nu-u-text--placeholder:-ms-input-placeholder {color: var(--content-placeholder);}
|
|
52
|
+
.nu-u-text--on-color {color: var(--content-on-color);}
|
|
53
|
+
.nu-u-text--error {color: var(--content-error);}
|
|
54
|
+
.nu-u-text--success {color: var(--content-success);}
|
|
55
|
+
.nu-u-text--inked {color: var(--content-inked);}
|
|
295
56
|
|
|
296
57
|
.nu-u-text-black {color: var(--black);}
|
|
297
58
|
.nu-u-text-white {color: var(--white);}
|
|
298
59
|
|
|
299
|
-
/* Icons */
|
|
300
|
-
.nu-u-icon--primary {color: var(--icon-primary);}
|
|
301
|
-
.nu-u-icon--secondary {color: var(--icon-secondary);}
|
|
302
|
-
.nu-u-icon--disabled {color: var(--icon-disabled);}
|
|
303
|
-
.nu-u-icon--on-color {color: var(--icon-on-color);}
|
|
304
|
-
.nu-u-icon--inked {color: var(--icon-inked);}
|
|
305
|
-
|
|
306
60
|
/* Links */
|
|
307
61
|
.nu-u-link {color: var(--link);}
|
|
308
62
|
.nu-u-link--hover {color: var(--link-hover);}
|
|
309
63
|
.nu-u-link--subtle {color: var(--link-subtle);}
|
|
310
|
-
.nu-u-link--
|
|
64
|
+
.nu-u-link--visited {color: var(--link-visited);}
|
|
311
65
|
|
|
312
66
|
/* Support */
|
|
313
67
|
.nu-u-support--error {color: var(--support-error);}
|
|
314
68
|
.nu-u-support--warning {color: var(--support-warning);}
|
|
315
69
|
.nu-u-support--success {color: var(--support-success);}
|
|
316
|
-
.nu-u-support--info {color: var(--support-
|
|
70
|
+
.nu-u-support--info {color: var(--support-info);}
|