@webitel/ui-sdk 3.2.116 → 3.2.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/ui-sdk.common.js +9 -4
  2. package/dist/ui-sdk.common.js.map +1 -1
  3. package/dist/ui-sdk.css +1 -1
  4. package/dist/ui-sdk.umd.js +9 -4
  5. package/dist/ui-sdk.umd.js.map +1 -1
  6. package/dist/ui-sdk.umd.min.js +1 -1
  7. package/dist/ui-sdk.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/organisms/wt-page-header/wt-page-header.vue +5 -0
  10. package/src/css/styleguide/colors/_colors.scss +2 -0
  11. package/src/css/styleguide/colors/_palette.scss +358 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/ui-sdk",
3
- "version": "3.2.116",
3
+ "version": "3.2.118",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve-lib": "vue-cli-service serve",
package/src/components/organisms/wt-page-header/wt-page-header.vue CHANGED
@@ -23,6 +23,7 @@
23
23
  <wt-button
24
24
  v-if="!hideSecondary && !emptySecondary"
25
25
  color="secondary"
26
+ :disabled="secondaryDisabled"
26
27
  @click="secondaryAction"
27
28
  >
28
29
  {{ secondaryText || $t('reusable.close') }}
@@ -53,6 +54,10 @@ const props = defineProps({
53
54
  type: Boolean,
54
55
  default: false,
55
56
  },
57
+ secondaryDisabled: {
58
+ type: Boolean,
59
+ default: false,
60
+ },
56
61
  secondaryText: {
57
62
  type: String,
58
63
  },
package/src/css/styleguide/colors/_colors.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import 'palette';
2
+
1
3
  :root {
2
4
  // HSL COLORS HUE VALUE
3
5
  --_accent-color-hue: 42;
package/src/css/styleguide/colors/_palette.scss ADDED
@@ -0,0 +1,358 @@
1
+ :root {
2
+ // LIGHTNESS
3
+ --lightness-lighten-5: 95%;
4
+ --lightness-lighten-4: 90%;
5
+ --lightness-lighten-3: 80%;
6
+ --lightness-lighten-2: 70%;
7
+ --lightness-lighten-1: 60%;
8
+
9
+ --lightness-darken-1: 50%;
10
+ --lightness-darken-2: 45%;
11
+ --lightness-darken-3: 40%;
12
+ --lightness-darken-4: 35%;
13
+
14
+ --lightness-accent-1: 75%;
15
+ --lightness-accent-2: 65%;
16
+ --lightness-accent-3: 50%;
17
+ --lightness-accent-4: 40%;
18
+
19
+ // SATURATION
20
+ --saturation-lighten-5: 92%;
21
+ --saturation-lighten-4: 88%;
22
+ --saturation-lighten-3: 90%;
23
+ --saturation-lighten-2: 90%;
24
+ --saturation-lighten-1: 90%;
25
+
26
+ --saturation-darken-1: 75%;
27
+ --saturation-darken-2: 75%;
28
+ --saturation-darken-3: 75%;
29
+ --saturation-darken-4: 75%;
30
+
31
+ --saturation-accent-1: 91%;
32
+ --saturation-accent-2: 90%;
33
+ --saturation-accent-3: 97%;
34
+ --saturation-accent-4: 97%;
35
+
36
+ // HUE
37
+ --hue-red: 0;
38
+ --hue-pink: 337;
39
+ --hue-purple: 291;
40
+ --hue-deep-purple: 263;
41
+ --hue-indigo: 232;
42
+ --hue-blue: 209;
43
+ --hue-light-blue: 202;
44
+ --hue-cyan: 188;
45
+ --hue-teal: 173;
46
+ --hue-green: 121;
47
+ --hue-light-green: 88;
48
+ --hue-lime: 66;
49
+ --hue-yellow: 54;
50
+ --hue-amber: 43;
51
+ --hue-orange: 32;
52
+ --hue-deep-orange: 11;
53
+
54
+ // RED
55
+ --red-lighten-5: hsla(var(--hue-red), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
56
+ --red-lighten-4: hsla(var(--hue-red), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
57
+ --red-lighten-3: hsla(var(--hue-red), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
58
+ --red-lighten-2: hsla(var(--hue-red), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
59
+ --red-lighten-1: hsla(var(--hue-red), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
60
+
61
+ --red-darken-4: hsla(var(--hue-red), var(--saturation-darken-4), var(--lightness-darken-4), 1);
62
+ --red-darken-3: hsla(var(--hue-red), var(--saturation-darken-3), var(--lightness-darken-3), 1);
63
+ --red-darken-2: hsla(var(--hue-red), var(--saturation-darken-2), var(--lightness-darken-2), 1);
64
+ --red-darken-1: hsla(var(--hue-red), var(--saturation-darken-1), var(--lightness-darken-1), 1);
65
+
66
+ --red-accent-4: hsla(var(--hue-red), var(--saturation-accent-4), var(--lightness-accent-4), 1);
67
+ --red-accent-3: hsla(var(--hue-red), var(--saturation-accent-3), var(--lightness-accent-3), 1);
68
+ --red-accent-2: hsla(var(--hue-red), var(--saturation-accent-2), var(--lightness-accent-2), 1);
69
+ --red-accent-1: hsla(var(--hue-red), var(--saturation-accent-1), var(--lightness-accent-1), 1);
70
+
71
+ // PINK
72
+ --pink-lighten-5: hsla(var(--hue-pink), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
73
+ --pink-lighten-4: hsla(var(--hue-pink), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
74
+ --pink-lighten-3: hsla(var(--hue-pink), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
75
+ --pink-lighten-2: hsla(var(--hue-pink), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
76
+ --pink-lighten-1: hsla(var(--hue-pink), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
77
+
78
+ --pink-darken-4: hsla(var(--hue-pink), var(--saturation-darken-4), var(--lightness-darken-4), 1);
79
+ --pink-darken-3: hsla(var(--hue-pink), var(--saturation-darken-3), var(--lightness-darken-3), 1);
80
+ --pink-darken-2: hsla(var(--hue-pink), var(--saturation-darken-2), var(--lightness-darken-2), 1);
81
+ --pink-darken-1: hsla(var(--hue-pink), var(--saturation-darken-1), var(--lightness-darken-1), 1);
82
+
83
+ --pink-accent-4: hsla(var(--hue-pink), var(--saturation-accent-4), var(--lightness-accent-4), 1);
84
+ --pink-accent-3: hsla(var(--hue-pink), var(--saturation-accent-3), var(--lightness-accent-3), 1);
85
+ --pink-accent-2: hsla(var(--hue-pink), var(--saturation-accent-2), var(--lightness-accent-2), 1);
86
+ --pink-accent-1: hsla(var(--hue-pink), var(--saturation-accent-1), var(--lightness-accent-1), 1);
87
+
88
+ // PURPLE
89
+ --purple-lighten-5: hsla(var(--hue-purple), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
90
+ --purple-lighten-4: hsla(var(--hue-purple), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
91
+ --purple-lighten-3: hsla(var(--hue-purple), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
92
+ --purple-lighten-2: hsla(var(--hue-purple), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
93
+ --purple-lighten-1: hsla(var(--hue-purple), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
94
+
95
+ --purple-darken-4: hsla(var(--hue-purple), var(--saturation-darken-4), var(--lightness-darken-4), 1);
96
+ --purple-darken-3: hsla(var(--hue-purple), var(--saturation-darken-3), var(--lightness-darken-3), 1);
97
+ --purple-darken-2: hsla(var(--hue-purple), var(--saturation-darken-2), var(--lightness-darken-2), 1);
98
+ --purple-darken-1: hsla(var(--hue-purple), var(--saturation-darken-1), var(--lightness-darken-1), 1);
99
+
100
+ --purple-accent-4: hsla(var(--hue-purple), var(--saturation-accent-4), var(--lightness-accent-4), 1);
101
+ --purple-accent-3: hsla(var(--hue-purple), var(--saturation-accent-3), var(--lightness-accent-3), 1);
102
+ --purple-accent-2: hsla(var(--hue-purple), var(--saturation-accent-2), var(--lightness-accent-2), 1);
103
+ --purple-accent-1: hsla(var(--hue-purple), var(--saturation-accent-1), var(--lightness-accent-1), 1);
104
+
105
+ // DEEP PURPLE
106
+ --deep-purple-lighten-5: hsla(var(--hue-deep-purple), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
107
+ --deep-purple-lighten-4: hsla(var(--hue-deep-purple), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
108
+ --deep-purple-lighten-3: hsla(var(--hue-deep-purple), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
109
+ --deep-purple-lighten-2: hsla(var(--hue-deep-purple), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
110
+ --deep-purple-lighten-1: hsla(var(--hue-deep-purple), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
111
+
112
+ --deep-purple-darken-4: hsla(var(--hue-deep-purple), var(--saturation-darken-4), var(--lightness-darken-4), 1);
113
+ --deep-purple-darken-3: hsla(var(--hue-deep-purple), var(--saturation-darken-3), var(--lightness-darken-3), 1);
114
+ --deep-purple-darken-2: hsla(var(--hue-deep-purple), var(--saturation-darken-2), var(--lightness-darken-2), 1);
115
+ --deep-purple-darken-1: hsla(var(--hue-deep-purple), var(--saturation-darken-1), var(--lightness-darken-1), 1);
116
+
117
+ --deep-purple-accent-4: hsla(var(--hue-deep-purple), var(--saturation-accent-4), var(--lightness-accent-4), 1);
118
+ --deep-purple-accent-3: hsla(var(--hue-deep-purple), var(--saturation-accent-3), var(--lightness-accent-3), 1);
119
+ --deep-purple-accent-2: hsla(var(--hue-deep-purple), var(--saturation-accent-2), var(--lightness-accent-2), 1);
120
+ --deep-purple-accent-1: hsla(var(--hue-deep-purple), var(--saturation-accent-1), var(--lightness-accent-1), 1);
121
+
122
+ // INDIGO
123
+ --indigo-lighten-5: hsla(var(--hue-indigo), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
124
+ --indigo-lighten-4: hsla(var(--hue-indigo), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
125
+ --indigo-lighten-3: hsla(var(--hue-indigo), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
126
+ --indigo-lighten-2: hsla(var(--hue-indigo), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
127
+ --indigo-lighten-1: hsla(var(--hue-indigo), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
128
+
129
+ --indigo-darken-4: hsla(var(--hue-indigo), var(--saturation-darken-4), var(--lightness-darken-4), 1);
130
+ --indigo-darken-3: hsla(var(--hue-indigo), var(--saturation-darken-3), var(--lightness-darken-3), 1);
131
+ --indigo-darken-2: hsla(var(--hue-indigo), var(--saturation-darken-2), var(--lightness-darken-2), 1);
132
+ --indigo-darken-1: hsla(var(--hue-indigo), var(--saturation-darken-1), var(--lightness-darken-1), 1);
133
+
134
+ --indigo-accent-4: hsla(var(--hue-indigo), var(--saturation-accent-4), var(--lightness-accent-4), 1);
135
+ --indigo-accent-3: hsla(var(--hue-indigo), var(--saturation-accent-3), var(--lightness-accent-3), 1);
136
+ --indigo-accent-2: hsla(var(--hue-indigo), var(--saturation-accent-2), var(--lightness-accent-2), 1);
137
+ --indigo-accent-1: hsla(var(--hue-indigo), var(--saturation-accent-1), var(--lightness-accent-1), 1);
138
+
139
+ // BLUE
140
+ --blue-lighten-5: hsla(var(--hue-blue), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
141
+ --blue-lighten-4: hsla(var(--hue-blue), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
142
+ --blue-lighten-3: hsla(var(--hue-blue), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
143
+ --blue-lighten-2: hsla(var(--hue-blue), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
144
+ --blue-lighten-1: hsla(var(--hue-blue), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
145
+
146
+ --blue-darken-4: hsla(var(--hue-blue), var(--saturation-darken-4), var(--lightness-darken-4), 1);
147
+ --blue-darken-3: hsla(var(--hue-blue), var(--saturation-darken-3), var(--lightness-darken-3), 1);
148
+ --blue-darken-2: hsla(var(--hue-blue), var(--saturation-darken-2), var(--lightness-darken-2), 1);
149
+ --blue-darken-1: hsla(var(--hue-blue), var(--saturation-darken-1), var(--lightness-darken-1), 1);
150
+
151
+ --blue-accent-4: hsla(var(--hue-blue), var(--saturation-accent-4), var(--lightness-accent-4), 1);
152
+ --blue-accent-3: hsla(var(--hue-blue), var(--saturation-accent-3), var(--lightness-accent-3), 1);
153
+ --blue-accent-2: hsla(var(--hue-blue), var(--saturation-accent-2), var(--lightness-accent-2), 1);
154
+ --blue-accent-1: hsla(var(--hue-blue), var(--saturation-accent-1), var(--lightness-accent-1), 1);
155
+
156
+ // LIGHT BLUE
157
+ --light-blue-lighten-5: hsla(var(--hue-light-blue), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
158
+ --light-blue-lighten-4: hsla(var(--hue-light-blue), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
159
+ --light-blue-lighten-3: hsla(var(--hue-light-blue), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
160
+ --light-blue-lighten-2: hsla(var(--hue-light-blue), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
161
+ --light-blue-lighten-1: hsla(var(--hue-light-blue), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
162
+
163
+ --light-blue-darken-4: hsla(var(--hue-light-blue), var(--saturation-darken-4), var(--lightness-darken-4), 1);
164
+ --light-blue-darken-3: hsla(var(--hue-light-blue), var(--saturation-darken-3), var(--lightness-darken-3), 1);
165
+ --light-blue-darken-2: hsla(var(--hue-light-blue), var(--saturation-darken-2), var(--lightness-darken-2), 1);
166
+ --light-blue-darken-1: hsla(var(--hue-light-blue), var(--saturation-darken-1), var(--lightness-darken-1), 1);
167
+
168
+ --light-blue-accent-4: hsla(var(--hue-light-blue), var(--saturation-accent-4), var(--lightness-accent-4), 1);
169
+ --light-blue-accent-3: hsla(var(--hue-light-blue), var(--saturation-accent-3), var(--lightness-accent-3), 1);
170
+ --light-blue-accent-2: hsla(var(--hue-light-blue), var(--saturation-accent-2), var(--lightness-accent-2), 1);
171
+ --light-blue-accent-1: hsla(var(--hue-light-blue), var(--saturation-accent-1), var(--lightness-accent-1), 1);
172
+
173
+ // CYAN
174
+ --cyan-lighten-5: hsla(var(--hue-cyan), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
175
+ --cyan-lighten-4: hsla(var(--hue-cyan), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
176
+ --cyan-lighten-3: hsla(var(--hue-cyan), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
177
+ --cyan-lighten-2: hsla(var(--hue-cyan), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
178
+ --cyan-lighten-1: hsla(var(--hue-cyan), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
179
+
180
+ --cyan-darken-4: hsla(var(--hue-cyan), var(--saturation-darken-4), var(--lightness-darken-4), 1);
181
+ --cyan-darken-3: hsla(var(--hue-cyan), var(--saturation-darken-3), var(--lightness-darken-3), 1);
182
+ --cyan-darken-2: hsla(var(--hue-cyan), var(--saturation-darken-2), var(--lightness-darken-2), 1);
183
+ --cyan-darken-1: hsla(var(--hue-cyan), var(--saturation-darken-1), var(--lightness-darken-1), 1);
184
+
185
+ --cyan-accent-4: hsla(var(--hue-cyan), var(--saturation-accent-4), var(--lightness-accent-4), 1);
186
+ --cyan-accent-3: hsla(var(--hue-cyan), var(--saturation-accent-3), var(--lightness-accent-3), 1);
187
+ --cyan-accent-2: hsla(var(--hue-cyan), var(--saturation-accent-2), var(--lightness-accent-2), 1);
188
+ --cyan-accent-1: hsla(var(--hue-cyan), var(--saturation-accent-1), var(--lightness-accent-1), 1);
189
+
190
+ // TEAL
191
+ --teal-lighten-5: hsla(var(--hue-teal), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
192
+ --teal-lighten-4: hsla(var(--hue-teal), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
193
+ --teal-lighten-3: hsla(var(--hue-teal), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
194
+ --teal-lighten-2: hsla(var(--hue-teal), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
195
+ --teal-lighten-1: hsla(var(--hue-teal), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
196
+
197
+ --teal-darken-4: hsla(var(--hue-teal), var(--saturation-darken-4), var(--lightness-darken-4), 1);
198
+ --teal-darken-3: hsla(var(--hue-teal), var(--saturation-darken-3), var(--lightness-darken-3), 1);
199
+ --teal-darken-2: hsla(var(--hue-teal), var(--saturation-darken-2), var(--lightness-darken-2), 1);
200
+ --teal-darken-1: hsla(var(--hue-teal), var(--saturation-darken-1), var(--lightness-darken-1), 1);
201
+
202
+ --teal-accent-4: hsla(var(--hue-teal), var(--saturation-accent-4), var(--lightness-accent-4), 1);
203
+ --teal-accent-3: hsla(var(--hue-teal), var(--saturation-accent-3), var(--lightness-accent-3), 1);
204
+ --teal-accent-2: hsla(var(--hue-teal), var(--saturation-accent-2), var(--lightness-accent-2), 1);
205
+ --teal-accent-1: hsla(var(--hue-teal), var(--saturation-accent-1), var(--lightness-accent-1), 1);
206
+
207
+ // GREEN
208
+ --green-lighten-5: hsla(var(--hue-green), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
209
+ --green-lighten-4: hsla(var(--hue-green), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
210
+ --green-lighten-3: hsla(var(--hue-green), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
211
+ --green-lighten-2: hsla(var(--hue-green), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
212
+ --green-lighten-1: hsla(var(--hue-green), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
213
+
214
+ --green-darken-4: hsla(var(--hue-green), var(--saturation-darken-4), var(--lightness-darken-4), 1);
215
+ --green-darken-3: hsla(var(--hue-green), var(--saturation-darken-3), var(--lightness-darken-3), 1);
216
+ --green-darken-2: hsla(var(--hue-green), var(--saturation-darken-2), var(--lightness-darken-2), 1);
217
+ --green-darken-1: hsla(var(--hue-green), var(--saturation-darken-1), var(--lightness-darken-1), 1);
218
+
219
+ --green-accent-4: hsla(var(--hue-green), var(--saturation-accent-4), var(--lightness-accent-4), 1);
220
+ --green-accent-3: hsla(var(--hue-green), var(--saturation-accent-3), var(--lightness-accent-3), 1);
221
+ --green-accent-2: hsla(var(--hue-green), var(--saturation-accent-2), var(--lightness-accent-2), 1);
222
+ --green-accent-1: hsla(var(--hue-green), var(--saturation-accent-1), var(--lightness-accent-1), 1);
223
+
224
+ // LIGHT GREEN
225
+ --light-green-lighten-5: hsla(var(--hue-light-green), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
226
+ --light-green-lighten-4: hsla(var(--hue-light-green), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
227
+ --light-green-lighten-3: hsla(var(--hue-light-green), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
228
+ --light-green-lighten-2: hsla(var(--hue-light-green), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
229
+ --light-green-lighten-1: hsla(var(--hue-light-green), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
230
+
231
+ --light-green-darken-4: hsla(var(--hue-light-green), var(--saturation-darken-4), var(--lightness-darken-4), 1);
232
+ --light-green-darken-3: hsla(var(--hue-light-green), var(--saturation-darken-3), var(--lightness-darken-3), 1);
233
+ --light-green-darken-2: hsla(var(--hue-light-green), var(--saturation-darken-2), var(--lightness-darken-2), 1);
234
+ --light-green-darken-1: hsla(var(--hue-light-green), var(--saturation-darken-1), var(--lightness-darken-1), 1);
235
+
236
+ --light-green-accent-4: hsla(var(--hue-light-green), var(--saturation-accent-4), var(--lightness-accent-4), 1);
237
+ --light-green-accent-3: hsla(var(--hue-light-green), var(--saturation-accent-3), var(--lightness-accent-3), 1);
238
+ --light-green-accent-2: hsla(var(--hue-light-green), var(--saturation-accent-2), var(--lightness-accent-2), 1);
239
+ --light-green-accent-1: hsla(var(--hue-light-green), var(--saturation-accent-1), var(--lightness-accent-1), 1);
240
+
241
+ // LIME
242
+ --lime-lighten-5: hsla(var(--hue-lime), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
243
+ --lime-lighten-4: hsla(var(--hue-lime), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
244
+ --lime-lighten-3: hsla(var(--hue-lime), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
245
+ --lime-lighten-2: hsla(var(--hue-lime), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
246
+ --lime-lighten-1: hsla(var(--hue-lime), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
247
+
248
+ --lime-darken-4: hsla(var(--hue-lime), var(--saturation-darken-4), var(--lightness-darken-4), 1);
249
+ --lime-darken-3: hsla(var(--hue-lime), var(--saturation-darken-3), var(--lightness-darken-3), 1);
250
+ --lime-darken-2: hsla(var(--hue-lime), var(--saturation-darken-2), var(--lightness-darken-2), 1);
251
+ --lime-darken-1: hsla(var(--hue-lime), var(--saturation-darken-1), var(--lightness-darken-1), 1);
252
+
253
+ --lime-accent-4: hsla(var(--hue-lime), var(--saturation-accent-4), var(--lightness-accent-4), 1);
254
+ --lime-accent-3: hsla(var(--hue-lime), var(--saturation-accent-3), var(--lightness-accent-3), 1);
255
+ --lime-accent-2: hsla(var(--hue-lime), var(--saturation-accent-2), var(--lightness-accent-2), 1);
256
+ --lime-accent-1: hsla(var(--hue-lime), var(--saturation-accent-1), var(--lightness-accent-1), 1);
257
+
258
+ // yellow
259
+ --yellow-lighten-5: hsla(var(--hue-yellow), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
260
+ --yellow-lighten-4: hsla(var(--hue-yellow), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
261
+ --yellow-lighten-3: hsla(var(--hue-yellow), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
262
+ --yellow-lighten-2: hsla(var(--hue-yellow), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
263
+ --yellow-lighten-1: hsla(var(--hue-yellow), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
264
+
265
+ --yellow-darken-4: hsla(var(--hue-yellow), var(--saturation-darken-4), var(--lightness-darken-4), 1);
266
+ --yellow-darken-3: hsla(var(--hue-yellow), var(--saturation-darken-3), var(--lightness-darken-3), 1);
267
+ --yellow-darken-2: hsla(var(--hue-yellow), var(--saturation-darken-2), var(--lightness-darken-2), 1);
268
+ --yellow-darken-1: hsla(var(--hue-yellow), var(--saturation-darken-1), var(--lightness-darken-1), 1);
269
+
270
+ --yellow-accent-4: hsla(var(--hue-yellow), var(--saturation-accent-4), var(--lightness-accent-4), 1);
271
+ --yellow-accent-3: hsla(var(--hue-yellow), var(--saturation-accent-3), var(--lightness-accent-3), 1);
272
+ --yellow-accent-2: hsla(var(--hue-yellow), var(--saturation-accent-2), var(--lightness-accent-2), 1);
273
+ --yellow-accent-1: hsla(var(--hue-yellow), var(--saturation-accent-1), var(--lightness-accent-1), 1);
274
+
275
+ // amber
276
+ --amber-lighten-5: hsla(var(--hue-amber), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
277
+ --amber-lighten-4: hsla(var(--hue-amber), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
278
+ --amber-lighten-3: hsla(var(--hue-amber), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
279
+ --amber-lighten-2: hsla(var(--hue-amber), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
280
+ --amber-lighten-1: hsla(var(--hue-amber), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
281
+
282
+ --amber-darken-4: hsla(var(--hue-amber), var(--saturation-darken-4), var(--lightness-darken-4), 1);
283
+ --amber-darken-3: hsla(var(--hue-amber), var(--saturation-darken-3), var(--lightness-darken-3), 1);
284
+ --amber-darken-2: hsla(var(--hue-amber), var(--saturation-darken-2), var(--lightness-darken-2), 1);
285
+ --amber-darken-1: hsla(var(--hue-amber), var(--saturation-darken-1), var(--lightness-darken-1), 1);
286
+
287
+ --amber-accent-4: hsla(var(--hue-amber), var(--saturation-accent-4), var(--lightness-accent-4), 1);
288
+ --amber-accent-3: hsla(var(--hue-amber), var(--saturation-accent-3), var(--lightness-accent-3), 1);
289
+ --amber-accent-2: hsla(var(--hue-amber), var(--saturation-accent-2), var(--lightness-accent-2), 1);
290
+ --amber-accent-1: hsla(var(--hue-amber), var(--saturation-accent-1), var(--lightness-accent-1), 1);
291
+
292
+ // orange
293
+ --orange-lighten-5: hsla(var(--hue-orange), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
294
+ --orange-lighten-4: hsla(var(--hue-orange), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
295
+ --orange-lighten-3: hsla(var(--hue-orange), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
296
+ --orange-lighten-2: hsla(var(--hue-orange), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
297
+ --orange-lighten-1: hsla(var(--hue-orange), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
298
+
299
+ --orange-darken-4: hsla(var(--hue-orange), var(--saturation-darken-4), var(--lightness-darken-4), 1);
300
+ --orange-darken-3: hsla(var(--hue-orange), var(--saturation-darken-3), var(--lightness-darken-3), 1);
301
+ --orange-darken-2: hsla(var(--hue-orange), var(--saturation-darken-2), var(--lightness-darken-2), 1);
302
+ --orange-darken-1: hsla(var(--hue-orange), var(--saturation-darken-1), var(--lightness-darken-1), 1);
303
+
304
+ --orange-accent-4: hsla(var(--hue-orange), var(--saturation-accent-4), var(--lightness-accent-4), 1);
305
+ --orange-accent-3: hsla(var(--hue-orange), var(--saturation-accent-3), var(--lightness-accent-3), 1);
306
+ --orange-accent-2: hsla(var(--hue-orange), var(--saturation-accent-2), var(--lightness-accent-2), 1);
307
+ --orange-accent-1: hsla(var(--hue-orange), var(--saturation-accent-1), var(--lightness-accent-1), 1);
308
+
309
+ // deep-orange
310
+ --deep-orange-lighten-5: hsla(var(--hue-deep-orange), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
311
+ --deep-orange-lighten-4: hsla(var(--hue-deep-orange), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
312
+ --deep-orange-lighten-3: hsla(var(--hue-deep-orange), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
313
+ --deep-orange-lighten-2: hsla(var(--hue-deep-orange), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
314
+ --deep-orange-lighten-1: hsla(var(--hue-deep-orange), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
315
+
316
+ --deep-orange-darken-4: hsla(var(--hue-deep-orange), var(--saturation-darken-4), var(--lightness-darken-4), 1);
317
+ --deep-orange-darken-3: hsla(var(--hue-deep-orange), var(--saturation-darken-3), var(--lightness-darken-3), 1);
318
+ --deep-orange-darken-2: hsla(var(--hue-deep-orange), var(--saturation-darken-2), var(--lightness-darken-2), 1);
319
+ --deep-orange-darken-1: hsla(var(--hue-deep-orange), var(--saturation-darken-1), var(--lightness-darken-1), 1);
320
+
321
+ --deep-orange-accent-4: hsla(var(--hue-deep-orange), var(--saturation-accent-4), var(--lightness-accent-4), 1);
322
+ --deep-orange-accent-3: hsla(var(--hue-deep-orange), var(--saturation-accent-3), var(--lightness-accent-3), 1);
323
+ --deep-orange-accent-2: hsla(var(--hue-deep-orange), var(--saturation-accent-2), var(--lightness-accent-2), 1);
324
+ --deep-orange-accent-1: hsla(var(--hue-deep-orange), var(--saturation-accent-1), var(--lightness-accent-1), 1);
325
+
326
+ // grey
327
+
328
+ --lightness-lighten-5-grey: 94%;
329
+ --lightness-lighten-4-grey: 84%;
330
+ --lightness-lighten-3-grey: 74%;
331
+ --lightness-lighten-2-grey: 64%;
332
+ --lightness-lighten-1-grey: 54%;
333
+
334
+ --lightness-darken-1-grey: 44%;
335
+ --lightness-darken-2-grey: 34%;
336
+ --lightness-darken-3-grey: 24%;
337
+ --lightness-darken-4-grey: 14%;
338
+ --lightness-darken-5-grey: 4%;
339
+
340
+ --saturation-grey: 20;
341
+ --hue-grey: 225;
342
+
343
+
344
+ --grey-lighten-5: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-5-grey), 1);
345
+ --grey-lighten-4: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-4-grey), 1);
346
+ --grey-lighten-3: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-3-grey), 1);
347
+ --grey-lighten-2: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-2-grey), 1);
348
+ --grey-lighten-1: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-1-grey), 1);
349
+
350
+ --grey-darken-1: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-1-grey), 1);
351
+ --grey-darken-2: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-2-grey), 1);
352
+ --grey-darken-3: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-3-grey), 1);
353
+ --grey-darken-4: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-4-grey), 1);
354
+ --grey-darken-5: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-5-grey), 1);
355
+
356
+ --black: hsla(0, 0, 0, 1);
357
+ --white: hsla(0, 0, 100, 1);
358
+ }