@nuvoui/core 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nuvoui.css +15444 -14758
- package/dist/nuvoui.css.map +1 -1
- package/dist/nuvoui.min.css +1 -1
- package/dist/nuvoui.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/index.scss +5 -2
- package/src/styles/layouts/_flex.scss +61 -46
- package/src/styles/layouts/_grid.scss +13 -13
- package/src/styles/mixins-map.scss +1 -1
- package/src/styles/themes/_theme.scss +92 -74
- package/src/styles/utilities/_alignment.scss +12 -12
- package/src/styles/utilities/_animations.scss +5 -9
- package/src/styles/utilities/_borders.scss +77 -80
- package/src/styles/utilities/_colors.scss +61 -65
- package/src/styles/utilities/_cursor.scss +23 -0
- package/src/styles/utilities/_index.scss +1 -0
- package/src/styles/utilities/_opacity.scss +14 -21
- package/src/styles/utilities/_position.scss +1 -3
- package/src/styles/utilities/_sizing.scss +72 -73
- package/src/styles/utilities/_spacing.scss +73 -99
- package/src/styles/utilities/_transitions.scss +4 -6
- package/src/styles/utilities/_typography.scss +92 -95
|
@@ -5,88 +5,89 @@
|
|
|
5
5
|
@use "../abstracts" as *;
|
|
6
6
|
|
|
7
7
|
@if $generate-utility-classes {
|
|
8
|
-
:root {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
:root {
|
|
9
|
+
// Theme color CSS variables
|
|
10
|
+
@each $color-name, $scale in COL.$colors {
|
|
11
|
+
--#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
|
|
12
|
+
@each $shade, $value in $scale {
|
|
13
|
+
--#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
|
|
14
|
+
}
|
|
14
15
|
}
|
|
15
|
-
}
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
// Primitive color CSS variables
|
|
18
|
+
@each $color-name, $scale in COL.$colors-primitives {
|
|
19
|
+
--#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
|
|
20
|
+
@each $shade, $value in $scale {
|
|
21
|
+
--#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
|
|
22
|
+
}
|
|
22
23
|
}
|
|
23
|
-
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
&::-webkit-scrollbar-track {
|
|
45
|
-
background: var(--background);
|
|
46
|
-
}
|
|
25
|
+
// Light theme variables
|
|
26
|
+
--background: #{map.get($light-theme, "background")};
|
|
27
|
+
--foreground: #{map.get($light-theme, "foreground")};
|
|
28
|
+
--surface: #{map.get($light-theme, "surface")};
|
|
29
|
+
--border: var(--gray-600);
|
|
30
|
+
--text-primary: var(--gray-900);
|
|
31
|
+
--text-secondary: var(--gray-600);
|
|
32
|
+
--button-bg-color: var(--primary);
|
|
33
|
+
--button-bg-color-hover: var(--primary-600);
|
|
34
|
+
--button-text-color: var(--gray-100);
|
|
35
|
+
--link-color: var(--primary);
|
|
36
|
+
--link-hover-color: var(--primary-600);
|
|
37
|
+
--inverted-text-color: var(--gray-100);
|
|
38
|
+
|
|
39
|
+
// Scrollbar styling
|
|
40
|
+
&::-webkit-scrollbar {
|
|
41
|
+
width: 12px;
|
|
42
|
+
}
|
|
47
43
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
border: 3px solid var(--background);
|
|
52
|
-
}
|
|
44
|
+
&::-webkit-scrollbar-track {
|
|
45
|
+
background: var(--background);
|
|
46
|
+
}
|
|
53
47
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
&::-webkit-scrollbar-thumb {
|
|
49
|
+
background-color: #888;
|
|
50
|
+
border-radius: 6px;
|
|
51
|
+
border: 3px solid var(--background);
|
|
52
|
+
}
|
|
57
53
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
54
|
+
scrollbar-width: thin;
|
|
55
|
+
scrollbar-color: #888 var(--background);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Dark theme settings
|
|
59
|
+
[data-theme="dark"] {
|
|
60
|
+
--background: #{map.get($dark-theme, "background")};
|
|
61
|
+
--foreground: #{map.get($dark-theme, "foreground")};
|
|
62
|
+
--surface: #{map.get($dark-theme, "surface")};
|
|
63
|
+
--border: var(--gray-400);
|
|
64
|
+
--text-primary: var(--gray-100);
|
|
65
|
+
--text-secondary: var(--gray-400);
|
|
66
|
+
--button-bg-color: var(--primary);
|
|
67
|
+
--button-bg-color-hover: var(--primary-400);
|
|
68
|
+
--button-text-color: var(--gray-200);
|
|
69
|
+
--link-color: var(--primary);
|
|
70
|
+
--link-hover-color: var(--primary-400);
|
|
71
|
+
--inverted-text-color: var(--gray-900);
|
|
72
|
+
|
|
73
|
+
&::-webkit-scrollbar-track {
|
|
74
|
+
background: var(--background);
|
|
75
|
+
}
|
|
72
76
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
&::-webkit-scrollbar-thumb {
|
|
78
|
+
background-color: #555;
|
|
79
|
+
border: 3px solid var(--background);
|
|
80
|
+
}
|
|
76
81
|
|
|
77
|
-
|
|
78
|
-
background-color: #555;
|
|
79
|
-
border: 3px solid var(--background);
|
|
82
|
+
scrollbar-color: #555 var(--background);
|
|
80
83
|
}
|
|
81
84
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
// -----------------------------------------------
|
|
86
|
-
// COLOR UTILITY CLASSES
|
|
87
|
-
// -----------------------------------------------
|
|
85
|
+
// -----------------------------------------------
|
|
86
|
+
// COLOR UTILITY CLASSES
|
|
87
|
+
// -----------------------------------------------
|
|
88
88
|
|
|
89
89
|
// Theme color background utilities
|
|
90
|
+
// primar, secondry, warning etc.
|
|
90
91
|
@each $color-name, $scale in COL.$colors {
|
|
91
92
|
@each $shade, $value in $scale {
|
|
92
93
|
.bg-#{$color-name}-#{$shade} {
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
// Automatic text contrast for backgrounds
|
|
98
|
+
// todo: documentaton may add karo issay
|
|
97
99
|
.text-on-#{$color-name}-#{$shade} {
|
|
98
100
|
color: COL.find-text-color($value);
|
|
99
101
|
}
|
|
@@ -101,6 +103,9 @@
|
|
|
101
103
|
.text-#{$color-name}-#{$shade} {
|
|
102
104
|
color: var(--#{$color-name}-#{$shade});
|
|
103
105
|
}
|
|
106
|
+
.border-#{$color-name}-#{$shade} {
|
|
107
|
+
border-color: var(--#{$color-name}-#{$shade});
|
|
108
|
+
}
|
|
104
109
|
}
|
|
105
110
|
|
|
106
111
|
// Base color classes
|
|
@@ -111,9 +116,14 @@
|
|
|
111
116
|
.text-#{$color-name} {
|
|
112
117
|
color: var(--#{$color-name});
|
|
113
118
|
}
|
|
119
|
+
|
|
120
|
+
.border-#{$color-name} {
|
|
121
|
+
border-color: var(--#{$color-name});
|
|
122
|
+
}
|
|
114
123
|
}
|
|
115
124
|
|
|
116
125
|
// Primitive color utilities
|
|
126
|
+
// green, purple, pink etc.
|
|
117
127
|
@each $color-name, $scale in COL.$colors-primitives {
|
|
118
128
|
@each $shade, $value in $scale {
|
|
119
129
|
.bg-#{$color-name}-#{$shade} {
|
|
@@ -127,6 +137,9 @@
|
|
|
127
137
|
.text-#{$color-name}-#{$shade} {
|
|
128
138
|
color: var(--#{$color-name}-#{$shade});
|
|
129
139
|
}
|
|
140
|
+
.border-#{$color-name}-#{$shade} {
|
|
141
|
+
border-color: var(--#{$color-name}-#{$shade});
|
|
142
|
+
}
|
|
130
143
|
}
|
|
131
144
|
|
|
132
145
|
// Base color classes
|
|
@@ -137,6 +150,10 @@
|
|
|
137
150
|
.text-#{$color-name} {
|
|
138
151
|
color: var(--#{$color-name});
|
|
139
152
|
}
|
|
153
|
+
|
|
154
|
+
.border-#{$color-name} {
|
|
155
|
+
border-color: var(--#{$color-name});
|
|
156
|
+
}
|
|
140
157
|
}
|
|
141
158
|
|
|
142
159
|
// Semantic color utilities
|
|
@@ -217,15 +234,16 @@
|
|
|
217
234
|
|
|
218
235
|
// Glass effects
|
|
219
236
|
.glass-effect {
|
|
237
|
+
background-color: rgb(255 255 255 / 10%);
|
|
238
|
+
border: 1px solid rgb(255 255 255 / 20%);
|
|
239
|
+
|
|
220
240
|
@include COL.backdrop-filter(blur(8px));
|
|
221
241
|
|
|
222
|
-
background-color: rgb(255 255 255 / 10%);
|
|
223
|
-
border: 1px solid rgb(255 255 255 / 20%);
|
|
224
242
|
}
|
|
225
243
|
|
|
226
244
|
.frosted-glass {
|
|
227
|
-
|
|
245
|
+
background-color: rgb(255 255 255 / 70%);
|
|
246
|
+
border: 1px solid rgb(255 255 255 / 80%);
|
|
228
247
|
|
|
229
|
-
|
|
230
|
-
border: 1px solid rgb(255 255 255 / 80%);
|
|
248
|
+
@include COL.backdrop-filter(blur(15px));
|
|
231
249
|
}
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
@mixin align-bottom { & { vertical-align: bottom; } }
|
|
7
7
|
|
|
8
8
|
@if VAR.$generate-utility-classes {
|
|
9
|
-
.align-baseline { @include align-baseline; }
|
|
10
|
-
.align-top { @include align-top; }
|
|
11
|
-
.align-middle { @include align-middle; }
|
|
12
|
-
.align-bottom { @include align-bottom; }
|
|
9
|
+
.align-baseline { @include align-baseline; }
|
|
10
|
+
.align-top { @include align-top; }
|
|
11
|
+
.align-middle { @include align-middle; }
|
|
12
|
+
.align-bottom { @include align-bottom; }
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
14
|
+
@each $breakpoint, $width in VAR.$breakpoints {
|
|
15
|
+
@media (min-width: #{$width}) {
|
|
16
|
+
.align-baseline\@#{$breakpoint} { @include align-baseline; }
|
|
17
|
+
.align-top\@#{$breakpoint} { @include align-top; }
|
|
18
|
+
.align-middle\@#{$breakpoint} { @include align-middle; }
|
|
19
|
+
.align-bottom\@#{$breakpoint} { @include align-bottom; }
|
|
21
20
|
}
|
|
22
|
-
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -46,15 +46,13 @@ $generated-keyframes: ();
|
|
|
46
46
|
// Handle units
|
|
47
47
|
$x-unit: if($x, safe-unit-name(get-unit($x)), "-");
|
|
48
48
|
$y-unit: if($y, safe-unit-name(get-unit($y)), "-");
|
|
49
|
-
|
|
49
|
+
|
|
50
50
|
// Clean values (remove units)
|
|
51
51
|
$clean-x: if($x, strip-unit($x), 0);
|
|
52
52
|
$clean-y: if($y, strip-unit($y), 0);
|
|
53
53
|
$animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
animation: #{$animation-name} $duration $easing $iteration;
|
|
57
|
-
}
|
|
55
|
+
animation: #{$animation-name} $duration $easing $iteration;
|
|
58
56
|
@include generate-bounce-keyframes($animation-name, $x, $y);
|
|
59
57
|
}
|
|
60
58
|
|
|
@@ -77,11 +75,9 @@ $generated-keyframes: ();
|
|
|
77
75
|
}
|
|
78
76
|
|
|
79
77
|
@mixin hover-ready {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
transition-timing-function: ease-in-out;
|
|
84
|
-
}
|
|
78
|
+
transition-property: all;
|
|
79
|
+
transition-duration: 0.2s;
|
|
80
|
+
transition-timing-function: ease-in-out;
|
|
85
81
|
}
|
|
86
82
|
|
|
87
83
|
@if VAR.$generate-utility-classes {
|
|
@@ -17,118 +17,115 @@ $border-styles: (solid, dashed, dotted, double, none);
|
|
|
17
17
|
// Core Border Mixins - improved to include style and color by default
|
|
18
18
|
// SKIP Documentation
|
|
19
19
|
@mixin border($val, $style: solid, $color: var(--border)) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
border-style: $style;
|
|
26
|
-
border-color: $color;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
20
|
+
border-width: $val;
|
|
21
|
+
@if $val != 0 {
|
|
22
|
+
border-style: $style;
|
|
23
|
+
border-color: $color;
|
|
24
|
+
}
|
|
29
25
|
}
|
|
30
26
|
|
|
31
27
|
@mixin border-top($val) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
border-top-
|
|
36
|
-
@if $val != 0 {
|
|
37
|
-
border-top-style: solid;
|
|
38
|
-
border-top-color: var(--border, var(--border));
|
|
39
|
-
}
|
|
28
|
+
border-top-width: $val;
|
|
29
|
+
@if $val != 0 {
|
|
30
|
+
border-top-style: solid;
|
|
31
|
+
border-top-color: var(--border, var(--border));
|
|
40
32
|
}
|
|
41
33
|
}
|
|
42
34
|
|
|
43
35
|
@mixin border-right($val) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
border-right-
|
|
48
|
-
@if $val != 0 {
|
|
49
|
-
border-right-style: solid;
|
|
50
|
-
border-right-color: var(--border, var(--border));
|
|
51
|
-
}
|
|
36
|
+
border-right-width: $val;
|
|
37
|
+
@if $val != 0 {
|
|
38
|
+
border-right-style: solid;
|
|
39
|
+
border-right-color: var(--border, var(--border));
|
|
52
40
|
}
|
|
53
41
|
}
|
|
54
42
|
|
|
55
43
|
@mixin border-bottom($val) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
border-bottom-
|
|
60
|
-
@if $val != 0 {
|
|
61
|
-
border-bottom-style: solid;
|
|
62
|
-
border-bottom-color: var(--border, var(--border));
|
|
63
|
-
}
|
|
44
|
+
border-bottom-width: $val;
|
|
45
|
+
@if $val != 0 {
|
|
46
|
+
border-bottom-style: solid;
|
|
47
|
+
border-bottom-color: var(--border, var(--border));
|
|
64
48
|
}
|
|
65
49
|
}
|
|
66
50
|
|
|
67
51
|
@mixin border-left($val) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
border-left-
|
|
72
|
-
@if $val != 0 {
|
|
73
|
-
border-left-style: solid;
|
|
74
|
-
border-left-color: var(--border, var(--border));
|
|
75
|
-
}
|
|
52
|
+
border-left-width: $val;
|
|
53
|
+
@if $val != 0 {
|
|
54
|
+
border-left-style: solid;
|
|
55
|
+
border-left-color: var(--border, var(--border));
|
|
76
56
|
}
|
|
77
57
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
@
|
|
81
|
-
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* @description Applies border radius to all corners
|
|
61
|
+
* @param {String} $val - The border radius value
|
|
62
|
+
*/
|
|
63
|
+
@mixin rounded($val: null) {
|
|
64
|
+
border-radius: if($val == null, map.get($border-radii, 'md'), $val);
|
|
82
65
|
}
|
|
83
66
|
|
|
84
|
-
@mixin rounded-t($val) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
67
|
+
@mixin rounded-t($val: null) {
|
|
68
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
69
|
+
|
|
70
|
+
border-top-left-radius: $val;
|
|
71
|
+
border-top-right-radius: $val;
|
|
89
72
|
}
|
|
90
73
|
|
|
91
|
-
@mixin rounded-r($val) {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
74
|
+
@mixin rounded-r($val: null) {
|
|
75
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
76
|
+
|
|
77
|
+
border-top-right-radius: $val;
|
|
78
|
+
border-bottom-right-radius: $val;
|
|
96
79
|
}
|
|
97
80
|
|
|
98
|
-
@mixin rounded-b($val) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
81
|
+
@mixin rounded-b($val: null) {
|
|
82
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
83
|
+
|
|
84
|
+
border-bottom-left-radius: $val;
|
|
85
|
+
border-bottom-right-radius: $val;
|
|
103
86
|
}
|
|
104
87
|
|
|
105
|
-
@mixin rounded-l($val) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
88
|
+
@mixin rounded-l($val: null) {
|
|
89
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
90
|
+
|
|
91
|
+
border-top-left-radius: $val;
|
|
92
|
+
border-bottom-left-radius: $val;
|
|
110
93
|
}
|
|
111
94
|
|
|
112
|
-
@mixin rounded-tl($val) {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
95
|
+
@mixin rounded-tl($val: null) {
|
|
96
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
97
|
+
|
|
98
|
+
border-top-left-radius: $val;
|
|
99
|
+
}
|
|
100
|
+
@mixin rounded-tr($val: null) {
|
|
101
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
102
|
+
|
|
103
|
+
border-top-right-radius: $val;
|
|
104
|
+
}
|
|
105
|
+
@mixin rounded-br($val: null) {
|
|
106
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
107
|
+
|
|
108
|
+
border-bottom-right-radius: $val;
|
|
109
|
+
}
|
|
110
|
+
@mixin rounded-bl($val: null) {
|
|
111
|
+
$val: if($val == null, map.get($border-radii, 'md'), $val);
|
|
112
|
+
|
|
113
|
+
border-bottom-left-radius: $val;
|
|
114
|
+
}
|
|
116
115
|
|
|
117
116
|
// Border Style and Color
|
|
118
|
-
@mixin border-style($style) {
|
|
119
|
-
@mixin border-color($color) {
|
|
117
|
+
@mixin border-style($style) { border-style: $style; }
|
|
118
|
+
@mixin border-color($color) { border-color: $color; }
|
|
120
119
|
|
|
121
120
|
// Combined border properties
|
|
122
121
|
@mixin border-all($width, $style, $color) {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
border-width: $width;
|
|
127
|
-
border-style: $style;
|
|
128
|
-
border-color: $color;
|
|
129
|
-
}
|
|
122
|
+
border-width: $width;
|
|
123
|
+
border-style: $style;
|
|
124
|
+
border-color: $color;
|
|
130
125
|
}
|
|
131
126
|
|
|
127
|
+
@mixin pill { @include rounded(9999px); } // todo: doc missing
|
|
128
|
+
|
|
132
129
|
// -----------------------------------------------
|
|
133
130
|
// VARIABLES
|
|
134
131
|
// -----------------------------------------------
|
|
@@ -198,7 +195,7 @@ $border-radii: (
|
|
|
198
195
|
}
|
|
199
196
|
|
|
200
197
|
// Pill shape (alias for full radius)
|
|
201
|
-
.pill { @include
|
|
198
|
+
.pill { @include pill; }
|
|
202
199
|
|
|
203
200
|
// Border styles - these override the default solid style if needed
|
|
204
201
|
@each $style in $border-styles {
|
|
@@ -313,7 +310,7 @@ $border-radii: (
|
|
|
313
310
|
|
|
314
311
|
.rounded\@#{$breakpoint} { @include rounded; }
|
|
315
312
|
.square\@#{$breakpoint} { @include rounded(0); }
|
|
316
|
-
.pill\@#{$breakpoint} { @include
|
|
313
|
+
.pill\@#{$breakpoint} { @include pill; }
|
|
317
314
|
}
|
|
318
315
|
}
|
|
319
316
|
}
|