@nuvoui/core 1.3.5 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/nuvoui.css +322 -258
- package/dist/nuvoui.css.map +1 -1
- package/dist/nuvoui.min.css +23 -1
- package/dist/nuvoui.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/base/_base.scss +148 -147
- package/src/styles/base/_reset.scss +41 -49
- package/src/styles/build.scss +25 -1
- package/src/styles/components/_tooltips.scss +271 -0
- package/src/styles/config/_borders.scss +15 -0
- package/src/styles/config/_breakpoints.scss +11 -0
- package/src/styles/config/_colors.scss +192 -0
- package/src/styles/config/_constants.scss +1 -0
- package/src/styles/config/_container-queries.scss +1 -0
- package/src/styles/config/_feature-flags.scss +33 -0
- package/src/styles/config/_layouts.scss +13 -0
- package/src/styles/config/_shadows.scss +9 -0
- package/src/styles/config/_spacing.scss +41 -0
- package/src/styles/config/_theme-validation.scss +59 -0
- package/src/styles/config/_typography.scss +45 -0
- package/src/styles/functions/_breakpoints.scss +15 -0
- package/src/styles/functions/_colors.scss +280 -0
- package/src/styles/functions/_css-vars.scss +33 -0
- package/src/styles/functions/_feature-flags.scss +20 -0
- package/src/styles/functions/_math.scss +72 -0
- package/src/styles/functions/_strings.scss +68 -0
- package/src/styles/functions/_types.scss +104 -0
- package/src/styles/functions/_units.scss +83 -0
- package/src/styles/index.scss +26 -5
- package/src/styles/layouts/_container.scss +28 -27
- package/src/styles/layouts/_flex.scss +340 -337
- package/src/styles/layouts/_grid.scss +131 -128
- package/src/styles/mixins-map.json +484 -479
- package/src/styles/mixins-map.scss +1 -1
- package/src/styles/themes/_theme.scss +230 -211
- package/src/styles/tools/_accessibility.scss +50 -0
- package/src/styles/tools/_container-queries.scss +98 -0
- package/src/styles/tools/_feature-support.scss +46 -0
- package/src/styles/tools/_media-queries.scss +70 -0
- package/src/styles/tools/_modern-layout.scss +49 -0
- package/src/styles/utilities/_alignment.scss +35 -34
- package/src/styles/utilities/_animations.scss +312 -311
- package/src/styles/utilities/_backdrop-filters.scss +194 -193
- package/src/styles/utilities/_borders.scss +243 -237
- package/src/styles/utilities/_colors.scss +16 -136
- package/src/styles/utilities/_cursor.scss +10 -10
- package/src/styles/utilities/_display.scss +192 -191
- package/src/styles/utilities/_helpers.scss +106 -106
- package/src/styles/utilities/_opacity.scss +27 -25
- package/src/styles/utilities/_position.scss +124 -121
- package/src/styles/utilities/_shadows.scss +171 -169
- package/src/styles/utilities/_sizing.scss +197 -194
- package/src/styles/utilities/_spacing.scss +230 -227
- package/src/styles/utilities/_transforms.scss +235 -234
- package/src/styles/utilities/_transitions.scss +136 -135
- package/src/styles/utilities/_typography.scss +242 -239
- package/src/styles/utilities/_z-index.scss +69 -68
- package/src/styles/abstracts/_config.scss +0 -254
- package/src/styles/abstracts/_functions.scss +0 -626
- package/src/styles/themes/refactored_borders.ipynb +0 -37
- package/src/styles/utilities/_container-queries.scss +0 -95
- package/src/styles/utilities/_media-queries.scss +0 -189
- package/src/styles/utilities/_tooltips.scss +0 -258
|
@@ -1,626 +0,0 @@
|
|
|
1
|
-
@use "sass:string";
|
|
2
|
-
@use "sass:math";
|
|
3
|
-
@use "sass:map";
|
|
4
|
-
@use "sass:list";
|
|
5
|
-
@use "sass:meta";
|
|
6
|
-
@use "config" as *;
|
|
7
|
-
|
|
8
|
-
$units: ("px", "rem", "%", "em", "vh", "vw", "vmin", "vmax", "ch", "ex", "cm", "mm", "in", "pt", "pc");
|
|
9
|
-
|
|
10
|
-
@function get-type($value) {
|
|
11
|
-
// Handle null and empty values
|
|
12
|
-
@if not $value {
|
|
13
|
-
@return "null";
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Handle already typed values
|
|
17
|
-
@if meta.type-of($value) == "color" {
|
|
18
|
-
@return "color";
|
|
19
|
-
} @else if meta.type-of($value) == "number" {
|
|
20
|
-
@return "number";
|
|
21
|
-
} @else if meta.type-of($value) == "bool" {
|
|
22
|
-
@return "boolean";
|
|
23
|
-
} @else if meta.type-of($value) == "list" or meta.type-of($value) == "map" {
|
|
24
|
-
@return meta.type-of($value);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Convert to string if needed
|
|
28
|
-
$val: string.unquote(strip-quotes($value));
|
|
29
|
-
$val-lower: string.to-lower-case($val);
|
|
30
|
-
|
|
31
|
-
// Check for colors
|
|
32
|
-
@if string.slice($val, 1, 1) == "#" and (string.length($val) == 4 or string.length($val) == 7 or string.length($val) == 5 or string.length($val) == 9) {
|
|
33
|
-
@return "color";
|
|
34
|
-
}
|
|
35
|
-
@if string.index($val-lower, "rgb(") == 1 or string.index($val-lower, "rgba(") == 1 {
|
|
36
|
-
@return "color";
|
|
37
|
-
}
|
|
38
|
-
@if map.has-key($colors-list, $val-lower) {
|
|
39
|
-
@return "color";
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
// Check for CSS variables first
|
|
43
|
-
@if is-css-var($val) {
|
|
44
|
-
@return "css-var";
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Check for known CSS states
|
|
48
|
-
$states: ("hover", "active", "focus", "visited", "disabled", "checked", "first-child", "last-child");
|
|
49
|
-
@if list.index($states, $val-lower) {
|
|
50
|
-
@return "state";
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Check for numbers with units
|
|
54
|
-
@each $unit in $units {
|
|
55
|
-
@if string.slice($val, -1 * string.length($unit)) == $unit {
|
|
56
|
-
// Check if the part before the unit is numeric
|
|
57
|
-
$num-part: string.slice($val, 1, string.length($val) - string.length($unit));
|
|
58
|
-
@if to-number($num-part) {
|
|
59
|
-
@return "number";
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// Check for pure numbers
|
|
65
|
-
@if to-number($val) {
|
|
66
|
-
@return "number";
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// Check for breakpoints
|
|
70
|
-
@if map.has-key($breakpoints, $val) {
|
|
71
|
-
@return "breakpoint";
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
// Check for font weights
|
|
75
|
-
@if map.has-key($font-weights, $val-lower) {
|
|
76
|
-
@return "font-weight";
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Check for border radius values
|
|
80
|
-
@if map.has-key($border-radii, $val-lower) {
|
|
81
|
-
@return "border-radius";
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Check for special CSS keywords
|
|
85
|
-
$keywords: ("auto", "inherit", "initial", "unset", "none", "flex", "grid", "block", "inline");
|
|
86
|
-
@if list.index($keywords, $val-lower) {
|
|
87
|
-
@return "css-keyword";
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// Check for CSS functions
|
|
91
|
-
@if string.index($val-lower, "calc(") == 1 or string.index($val-lower, "var(") == 1 or string.index($val-lower, "min(") == 1 or string.index($val-lower, "max(") == 1 {
|
|
92
|
-
@return "css-function";
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// Default to string
|
|
96
|
-
@return "string";
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
@function str-replace($string, $search, $replace: " ") {
|
|
100
|
-
$index: string.index($string, $search);
|
|
101
|
-
@if $index {
|
|
102
|
-
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
|
103
|
-
}
|
|
104
|
-
@return $string;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
@function is-css-var($value) {
|
|
108
|
-
@if meta.type-of($value) != "string" {
|
|
109
|
-
@return false;
|
|
110
|
-
}
|
|
111
|
-
$val: string.unquote(strip-quotes($value));
|
|
112
|
-
@return string.index($val, "var(") == 1;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@function get-css-var($value) {
|
|
116
|
-
@if is-css-var($value) {
|
|
117
|
-
$val: string.unquote(strip-quotes($value));
|
|
118
|
-
$var-name: string.slice($val, 5, -2);
|
|
119
|
-
@return var(#{$var-name});
|
|
120
|
-
} @else {
|
|
121
|
-
@error "Value is not a CSS variable";
|
|
122
|
-
@return null;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@function get-breakpoint-value($bp, $debug: false) {
|
|
127
|
-
@if map.has-key($breakpoints, #{$bp}) {
|
|
128
|
-
@return map.get($breakpoints, #{$bp});
|
|
129
|
-
} @else if meta.type-of($bp) == number {
|
|
130
|
-
@return $bp;
|
|
131
|
-
} @else {
|
|
132
|
-
@error 'Invalid breakpoint: #{$bp}';
|
|
133
|
-
@return null;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
@function strip-unit($value) {
|
|
138
|
-
@if meta.type-of($value) != number {
|
|
139
|
-
@error "strip-unit() requires a number";
|
|
140
|
-
}
|
|
141
|
-
@return math.div($value, ($value * 0 + 1));
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// used in animation unique name creation
|
|
145
|
-
@function safe-unit-name($unit) {
|
|
146
|
-
@if $unit == "%" {
|
|
147
|
-
@return "per";
|
|
148
|
-
} @else if $unit == "." {
|
|
149
|
-
@return "dot";
|
|
150
|
-
} @else {
|
|
151
|
-
@return $unit;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// Ensures a value has a unit, adding $default-unit if none exists
|
|
156
|
-
// @param {Number|String} $val - The value to check
|
|
157
|
-
// @return {String} - The value with units
|
|
158
|
-
// todo imporve this when we can
|
|
159
|
-
@function fix-units($val, $unit: $default-unit, $debug: null) {
|
|
160
|
-
// Handle null values
|
|
161
|
-
@if not $val {
|
|
162
|
-
@return null;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
// Check type
|
|
166
|
-
@if meta.type-of($val) != number and meta.type-of($val) != string {
|
|
167
|
-
@error "fix-units() requires a number or string value";
|
|
168
|
-
@return null;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
// Handle number type
|
|
172
|
-
@if meta.type-of($val) == number {
|
|
173
|
-
@if math.is-unitless($val) {
|
|
174
|
-
@return $val + $unit;
|
|
175
|
-
}
|
|
176
|
-
@return $val;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// String handling - strip quotes first
|
|
180
|
-
$val: strip-quotes($val);
|
|
181
|
-
|
|
182
|
-
// CSS keywords - return as is
|
|
183
|
-
@if $val == auto or $val == inherit or $val == initial or $val == "min-content" or $val == "max-content" or $val == "fit-content" {
|
|
184
|
-
@return #{$val};
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// Check if string already has units
|
|
188
|
-
@each $u in $units {
|
|
189
|
-
@if string.slice($val, -1 * string.length($u)) == $u {
|
|
190
|
-
// Try to convert numeric strings with units (like "20px") to actual numbers
|
|
191
|
-
$number-part: string.slice($val, 1, string.length($val) - string.length($u));
|
|
192
|
-
|
|
193
|
-
@if string.index($number-part, ".") or to-number($number-part) {
|
|
194
|
-
@return to-number($number-part) + string.unquote($u);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
@return $val;
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
// Try to convert to number if possible
|
|
202
|
-
@if string.index($val, ".") or to-number($val) {
|
|
203
|
-
$number-val: to-number($val);
|
|
204
|
-
@return $number-val + $unit;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
// Default: just add the unit
|
|
208
|
-
@return string.unquote($val + $unit);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
@function strip-quotes($string) {
|
|
212
|
-
@if meta.type-of($string) == string {
|
|
213
|
-
@if string.slice($string, 1, 1) == '"' and string.slice($string, -1) == '"' {
|
|
214
|
-
@return string.slice($string, 2, -2);
|
|
215
|
-
} @else if string.slice($string, 1, 1) == "'" and string.slice($string, -1) == "'" {
|
|
216
|
-
@return string.slice($string, 2, -2);
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
@return $string;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
@function str-trim($string) {
|
|
224
|
-
@while string.length($string) > 0 and string.slice($string, 1, 1) == " " {
|
|
225
|
-
$string: string.slice($string, 2);
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
@while string.length($string) > 0 and string.slice($string, -1) == " " {
|
|
229
|
-
$string: string.slice($string, 1, string.length($string) - 1);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
@return $string;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
@function split($string, $delimiter) {
|
|
236
|
-
$result: ();
|
|
237
|
-
$current: "";
|
|
238
|
-
$paren-depth: 0;
|
|
239
|
-
|
|
240
|
-
@for $i from 1 through string.length($string) {
|
|
241
|
-
$char: string.slice($string, $i, $i);
|
|
242
|
-
|
|
243
|
-
@if $char == "(" {
|
|
244
|
-
$paren-depth: $paren-depth + 1;
|
|
245
|
-
$current: $current + $char;
|
|
246
|
-
} @else if $char == ")" {
|
|
247
|
-
$paren-depth: $paren-depth - 1;
|
|
248
|
-
$current: $current + $char;
|
|
249
|
-
} @else if $char == $delimiter and $paren-depth == 0 {
|
|
250
|
-
// Only split on delimiter when not inside parentheses
|
|
251
|
-
$result: list.append($result, str-trim(string.unquote(strip-quotes($current))), "comma");
|
|
252
|
-
$current: "";
|
|
253
|
-
} @else {
|
|
254
|
-
$current: $current + $char;
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
// Add the last parameter
|
|
259
|
-
@if $current != "" {
|
|
260
|
-
$result: list.append($result, string.unquote(str-trim($current)));
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
@return $result;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
// Helper function to check if a feature is enabled
|
|
267
|
-
@function feature-enabled($feature) {
|
|
268
|
-
@if not $generate-utility-classes {
|
|
269
|
-
@return false;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
@if not map.has-key($feature-flags, $feature) {
|
|
273
|
-
@return true; // Default to enabled if not specified
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
@return map.get($feature-flags, $feature);
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
@function to-number($value) {
|
|
280
|
-
@if meta.type-of($value) == "number" {
|
|
281
|
-
@return $value;
|
|
282
|
-
} @else if meta.type-of($value) != "string" {
|
|
283
|
-
@error "Value for `number` should be a number or a string.";
|
|
284
|
-
@return $value;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
$val: string.unquote(strip-quotes($value));
|
|
288
|
-
|
|
289
|
-
$result: 0;
|
|
290
|
-
$digits: 0;
|
|
291
|
-
$minus: string.slice($value, 1, 1) == "-";
|
|
292
|
-
$numbers: (
|
|
293
|
-
"0": 0,
|
|
294
|
-
"1": 1,
|
|
295
|
-
"2": 2,
|
|
296
|
-
"3": 3,
|
|
297
|
-
"4": 4,
|
|
298
|
-
"5": 5,
|
|
299
|
-
"6": 6,
|
|
300
|
-
"7": 7,
|
|
301
|
-
"8": 8,
|
|
302
|
-
"9": 9,
|
|
303
|
-
);
|
|
304
|
-
$number-chars-end: 0;
|
|
305
|
-
|
|
306
|
-
@for $i from if($minus, 2, 1) through string.length($val) {
|
|
307
|
-
$character: string.slice($val, $i, $i);
|
|
308
|
-
|
|
309
|
-
@if list.index(map.keys($numbers), $character) or $character == "." {
|
|
310
|
-
$number-chars-end: $i;
|
|
311
|
-
|
|
312
|
-
@if $character == "." {
|
|
313
|
-
$digits: 1;
|
|
314
|
-
} @else if $digits == 0 {
|
|
315
|
-
$result: $result * 10 + map.get($numbers, $character);
|
|
316
|
-
} @else {
|
|
317
|
-
$digits: $digits * 10;
|
|
318
|
-
$result: $result + map.get($numbers, $character) / $digits;
|
|
319
|
-
}
|
|
320
|
-
} @else {
|
|
321
|
-
// Non-numeric character found - check for unit
|
|
322
|
-
$rest: string.slice($val, $i);
|
|
323
|
-
|
|
324
|
-
// Look for valid unit
|
|
325
|
-
@each $unit in $units {
|
|
326
|
-
@if $rest == $unit {
|
|
327
|
-
@return if($minus, -$result, $result) + string.unquote($unit);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
// No valid unit - return null for non-numeric strings
|
|
332
|
-
@if $i == if($minus, 2, 1) {
|
|
333
|
-
@return null; // First char is non-numeric
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
// Otherwise return just the parsed number
|
|
337
|
-
@return if($minus, -$result, $result);
|
|
338
|
-
}
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
@return if($minus, -$result, $result);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
$colors-list: (
|
|
345
|
-
"aliceblue": aliceblue,
|
|
346
|
-
"antiquewhite": antiquewhite,
|
|
347
|
-
"aqua": aqua,
|
|
348
|
-
"aquamarine": aquamarine,
|
|
349
|
-
"azure": azure,
|
|
350
|
-
"beige": beige,
|
|
351
|
-
"bisque": bisque,
|
|
352
|
-
"black": black,
|
|
353
|
-
"blanchedalmond": blanchedalmond,
|
|
354
|
-
"blue": blue,
|
|
355
|
-
"blueviolet": blueviolet,
|
|
356
|
-
"brown": brown,
|
|
357
|
-
"burlywood": burlywood,
|
|
358
|
-
"cadetblue": cadetblue,
|
|
359
|
-
"chartreuse": chartreuse,
|
|
360
|
-
"chocolate": chocolate,
|
|
361
|
-
"coral": coral,
|
|
362
|
-
"cornflowerblue": cornflowerblue,
|
|
363
|
-
"cornsilk": cornsilk,
|
|
364
|
-
"crimson": crimson,
|
|
365
|
-
"cyan": cyan,
|
|
366
|
-
"darkblue": darkblue,
|
|
367
|
-
"darkcyan": darkcyan,
|
|
368
|
-
"darkgoldenrod": darkgoldenrod,
|
|
369
|
-
"darkgray": darkgray,
|
|
370
|
-
"darkgreen": darkgreen,
|
|
371
|
-
"darkgrey": darkgrey,
|
|
372
|
-
"darkkhaki": darkkhaki,
|
|
373
|
-
"darkmagenta": darkmagenta,
|
|
374
|
-
"darkolivegreen": darkolivegreen,
|
|
375
|
-
"darkorange": darkorange,
|
|
376
|
-
"darkorchid": darkorchid,
|
|
377
|
-
"darkred": darkred,
|
|
378
|
-
"darksalmon": darksalmon,
|
|
379
|
-
"darkseagreen": darkseagreen,
|
|
380
|
-
"darkslateblue": darkslateblue,
|
|
381
|
-
"darkslategray": darkslategray,
|
|
382
|
-
"darkslategrey": darkslategrey,
|
|
383
|
-
"darkturquoise": darkturquoise,
|
|
384
|
-
"darkviolet": darkviolet,
|
|
385
|
-
"deeppink": deeppink,
|
|
386
|
-
"deepskyblue": deepskyblue,
|
|
387
|
-
"dimgray": dimgray,
|
|
388
|
-
"dimgrey": dimgrey,
|
|
389
|
-
"dodgerblue": dodgerblue,
|
|
390
|
-
"firebrick": firebrick,
|
|
391
|
-
"floralwhite": floralwhite,
|
|
392
|
-
"forestgreen": forestgreen,
|
|
393
|
-
"fuchsia": fuchsia,
|
|
394
|
-
"gainsboro": gainsboro,
|
|
395
|
-
"ghostwhite": ghostwhite,
|
|
396
|
-
"gold": gold,
|
|
397
|
-
"goldenrod": goldenrod,
|
|
398
|
-
"gray": gray,
|
|
399
|
-
"green": green,
|
|
400
|
-
"greenyellow": greenyellow,
|
|
401
|
-
"grey": grey,
|
|
402
|
-
"honeydew": honeydew,
|
|
403
|
-
"hotpink": hotpink,
|
|
404
|
-
"indianred": indianred,
|
|
405
|
-
"indigo": indigo,
|
|
406
|
-
"ivory": ivory,
|
|
407
|
-
"khaki": khaki,
|
|
408
|
-
"lavender": lavender,
|
|
409
|
-
"lavenderblush": lavenderblush,
|
|
410
|
-
"lawngreen": lawngreen,
|
|
411
|
-
"lemonchiffon": lemonchiffon,
|
|
412
|
-
"lightblue": lightblue,
|
|
413
|
-
"lightcoral": lightcoral,
|
|
414
|
-
"lightcyan": lightcyan,
|
|
415
|
-
"lightgoldenrodyellow": lightgoldenrodyellow,
|
|
416
|
-
"lightgray": lightgray,
|
|
417
|
-
"lightgreen": lightgreen,
|
|
418
|
-
"lightgrey": lightgrey,
|
|
419
|
-
"lightpink": lightpink,
|
|
420
|
-
"lightsalmon": lightsalmon,
|
|
421
|
-
"lightseagreen": lightseagreen,
|
|
422
|
-
"lightskyblue": lightskyblue,
|
|
423
|
-
"lightslategray": lightslategray,
|
|
424
|
-
"lightslategrey": lightslategrey,
|
|
425
|
-
"lightsteelblue": lightsteelblue,
|
|
426
|
-
"lightyellow": lightyellow,
|
|
427
|
-
"lime": lime,
|
|
428
|
-
"limegreen": limegreen,
|
|
429
|
-
"linen": linen,
|
|
430
|
-
"magenta": magenta,
|
|
431
|
-
"maroon": maroon,
|
|
432
|
-
"mediumaquamarine": mediumaquamarine,
|
|
433
|
-
"mediumblue": mediumblue,
|
|
434
|
-
"mediumorchid": mediumorchid,
|
|
435
|
-
"mediumpurple": mediumpurple,
|
|
436
|
-
"mediumseagreen": mediumseagreen,
|
|
437
|
-
"mediumslateblue": mediumslateblue,
|
|
438
|
-
"mediumspringgreen": mediumspringgreen,
|
|
439
|
-
"mediumturquoise": mediumturquoise,
|
|
440
|
-
"mediumvioletred": mediumvioletred,
|
|
441
|
-
"midnightblue": midnightblue,
|
|
442
|
-
"mintcream": mintcream,
|
|
443
|
-
"mistyrose": mistyrose,
|
|
444
|
-
"moccasin": moccasin,
|
|
445
|
-
"navajowhite": navajowhite,
|
|
446
|
-
"navy": navy,
|
|
447
|
-
"oldlace": oldlace,
|
|
448
|
-
"olive": olive,
|
|
449
|
-
"olivedrab": olivedrab,
|
|
450
|
-
"orange": orange,
|
|
451
|
-
"orangered": orangered,
|
|
452
|
-
"orchid": orchid,
|
|
453
|
-
"palegoldenrod": palegoldenrod,
|
|
454
|
-
"palegreen": palegreen,
|
|
455
|
-
"paleturquoise": paleturquoise,
|
|
456
|
-
"palevioletred": palevioletred,
|
|
457
|
-
"papayawhip": papayawhip,
|
|
458
|
-
"peachpuff": peachpuff,
|
|
459
|
-
"peru": peru,
|
|
460
|
-
"pink": pink,
|
|
461
|
-
"plum": plum,
|
|
462
|
-
"powderblue": powderblue,
|
|
463
|
-
"purple": purple,
|
|
464
|
-
"red": red,
|
|
465
|
-
"rosybrown": rosybrown,
|
|
466
|
-
"royalblue": royalblue,
|
|
467
|
-
"saddlebrown": saddlebrown,
|
|
468
|
-
"salmon": salmon,
|
|
469
|
-
"sandybrown": sandybrown,
|
|
470
|
-
"seagreen": seagreen,
|
|
471
|
-
"seashell": seashell,
|
|
472
|
-
"sienna": sienna,
|
|
473
|
-
"silver": silver,
|
|
474
|
-
"skyblue": skyblue,
|
|
475
|
-
"slateblue": slateblue,
|
|
476
|
-
"slategray": slategray,
|
|
477
|
-
"slategrey": slategrey,
|
|
478
|
-
"snow": snow,
|
|
479
|
-
"springgreen": springgreen,
|
|
480
|
-
"steelblue": steelblue,
|
|
481
|
-
"tan": tan,
|
|
482
|
-
"teal": teal,
|
|
483
|
-
"thistle": thistle,
|
|
484
|
-
"tomato": tomato,
|
|
485
|
-
"transparent": transparent,
|
|
486
|
-
"turquoise": turquoise,
|
|
487
|
-
"violet": violet,
|
|
488
|
-
"wheat": wheat,
|
|
489
|
-
"white": white,
|
|
490
|
-
"whitesmoke": whitesmoke,
|
|
491
|
-
"yellow": yellow,
|
|
492
|
-
"yellowgreen;": yellowgreen,
|
|
493
|
-
);
|
|
494
|
-
|
|
495
|
-
@function to-color($color-name) {
|
|
496
|
-
// Return if already a color
|
|
497
|
-
@if meta.type-of($color-name) == "color" {
|
|
498
|
-
@return $color-name;
|
|
499
|
-
}
|
|
500
|
-
|
|
501
|
-
// Convert to string if needed
|
|
502
|
-
$color-string: string.unquote($color-name);
|
|
503
|
-
$color-lower: string.to-lower-case($color-string);
|
|
504
|
-
|
|
505
|
-
// Handle named colors (red, blue, etc.)
|
|
506
|
-
@if map.has-key($colors-list, $color-string) {
|
|
507
|
-
@return map.get($colors-list, $color-string);
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
// Handle hex colors - use from-hex function which returns a proper RGB color
|
|
511
|
-
@if string.slice($color-string, 1, 1) == "#" {
|
|
512
|
-
@return from-hex($color-string);
|
|
513
|
-
}
|
|
514
|
-
|
|
515
|
-
// Handle rgb/rgba strings
|
|
516
|
-
@if string.index($color-lower, "rgb(") == 1 {
|
|
517
|
-
$trimmed: string.slice($color-string, string.length("rgb(") + 1, -1);
|
|
518
|
-
$values: split($trimmed, ",");
|
|
519
|
-
|
|
520
|
-
@if list.length($values) == 3 {
|
|
521
|
-
@return rgb(to-number(list.nth($values, 1)), to-number(list.nth($values, 2)), to-number(list.nth($values, 3)));
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
@if string.index($color-lower, "rgba(") == 1 {
|
|
526
|
-
$trimmed: string.slice($color-string, string.length("rgba(") + 1, -1);
|
|
527
|
-
$values: split($trimmed, ",");
|
|
528
|
-
|
|
529
|
-
@if list.length($values) == 4 {
|
|
530
|
-
@return rgba(to-number(list.nth($values, 1)), to-number(list.nth($values, 2)), to-number(list.nth($values, 3)), to-number(list.nth($values, 4)));
|
|
531
|
-
}
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
@warn "#{$color-string} is not a valid color format. Use hex colors like #FF0 or #FF0000";
|
|
535
|
-
@return null;
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
@function from-hex($hex-string) {
|
|
539
|
-
// Normalize input
|
|
540
|
-
|
|
541
|
-
$hex: string.to-lower-case(string.unquote($hex-string));
|
|
542
|
-
$valid-chars: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
|
|
543
|
-
$length: string.length($hex);
|
|
544
|
-
|
|
545
|
-
// Validate format and length
|
|
546
|
-
@if string.slice($hex, 1, 1) != "#" {
|
|
547
|
-
@warn "Invalid hex color format: #{$hex-string}. Must start with #";
|
|
548
|
-
@return $hex-string;
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
// Check for valid lengths: #RGB, #RGBA, #RRGGBB, #RRGGBBAA
|
|
552
|
-
@if not($length == 4 or $length == 5 or $length == 7 or $length == 9) {
|
|
553
|
-
@warn "Invalid hex color length: #{$hex-string}. Must be 4, 5, 7 or 9 characters";
|
|
554
|
-
@return $hex-string;
|
|
555
|
-
}
|
|
556
|
-
|
|
557
|
-
// Extract components
|
|
558
|
-
$r: "";
|
|
559
|
-
$g: "";
|
|
560
|
-
$b: "";
|
|
561
|
-
$a: "";
|
|
562
|
-
$has-alpha: $length == 5 or $length == 9;
|
|
563
|
-
$component-size: if($length < 6, 1, 2);
|
|
564
|
-
|
|
565
|
-
// Validate and extract color components
|
|
566
|
-
@for $i from 2 through $length {
|
|
567
|
-
$char: string.slice($hex, $i, $i);
|
|
568
|
-
|
|
569
|
-
@if not list.index($valid-chars, $char) {
|
|
570
|
-
@warn "Invalid hex character: #{$char} in #{$hex-string}";
|
|
571
|
-
@return $hex-string;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
// Determine which component we're building
|
|
575
|
-
$position: $i - 1;
|
|
576
|
-
|
|
577
|
-
@if $position <= $component-size {
|
|
578
|
-
$r: $r + $char;
|
|
579
|
-
} @else if $position <= $component-size * 2 {
|
|
580
|
-
$g: $g + $char;
|
|
581
|
-
} @else if $position <= $component-size * 3 {
|
|
582
|
-
$b: $b + $char;
|
|
583
|
-
} @else {
|
|
584
|
-
$a: $a + $char;
|
|
585
|
-
}
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
// Double characters for short hex notation
|
|
589
|
-
@if $component-size == 1 {
|
|
590
|
-
$r: $r + $r;
|
|
591
|
-
$g: $g + $g;
|
|
592
|
-
$b: $b + $b;
|
|
593
|
-
@if $has-alpha {
|
|
594
|
-
$a: $a + $a;
|
|
595
|
-
}
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
// Convert to RGB/RGBA
|
|
599
|
-
@if $has-alpha {
|
|
600
|
-
$alpha-value: math.div(hex-to-dec($a), 255);
|
|
601
|
-
@return rgba(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b), $alpha-value);
|
|
602
|
-
} @else {
|
|
603
|
-
@return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
|
|
604
|
-
}
|
|
605
|
-
}
|
|
606
|
-
|
|
607
|
-
@function hex-to-dec($string) {
|
|
608
|
-
$hex-digits: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
|
|
609
|
-
$string: string.to-lower-case($string);
|
|
610
|
-
$length: string.length($string);
|
|
611
|
-
|
|
612
|
-
$dec: 0;
|
|
613
|
-
@for $i from 1 through $length {
|
|
614
|
-
$character: string.slice($string, $i, $i);
|
|
615
|
-
$digit-value: list.index($hex-digits, $character) - 1;
|
|
616
|
-
|
|
617
|
-
@if $digit-value >= 0 {
|
|
618
|
-
$position: $length - $i;
|
|
619
|
-
$dec: $dec + ($digit-value * math.pow(16, $position));
|
|
620
|
-
} @else {
|
|
621
|
-
@warn "Invalid hex character: #{$character}";
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
@return $dec;
|
|
626
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"cells": [
|
|
3
|
-
{
|
|
4
|
-
"cell_type": "code",
|
|
5
|
-
"execution_count": null,
|
|
6
|
-
"id": "initial_id",
|
|
7
|
-
"metadata": {
|
|
8
|
-
"collapsed": true
|
|
9
|
-
},
|
|
10
|
-
"outputs": [],
|
|
11
|
-
"source": [
|
|
12
|
-
""
|
|
13
|
-
]
|
|
14
|
-
}
|
|
15
|
-
],
|
|
16
|
-
"metadata": {
|
|
17
|
-
"kernelspec": {
|
|
18
|
-
"display_name": "Python 3",
|
|
19
|
-
"language": "python",
|
|
20
|
-
"name": "python3"
|
|
21
|
-
},
|
|
22
|
-
"language_info": {
|
|
23
|
-
"codemirror_mode": {
|
|
24
|
-
"name": "ipython",
|
|
25
|
-
"version": 2
|
|
26
|
-
},
|
|
27
|
-
"file_extension": ".py",
|
|
28
|
-
"mimetype": "text/x-python",
|
|
29
|
-
"name": "python",
|
|
30
|
-
"nbconvert_exporter": "python",
|
|
31
|
-
"pygments_lexer": "ipython2",
|
|
32
|
-
"version": "2.7.6"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
"nbformat": 4,
|
|
36
|
-
"nbformat_minor": 5
|
|
37
|
-
}
|