@new-ui/effects 0.1.10 → 0.1.11
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 +1 -1
- package/src/_utilities.scss +131 -0
- package/src/_variables.scss +21 -6
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--dialog-strong:0px 16px 48px #00000029;--dialog:0px
|
|
1
|
+
:root{--dialog-strong:0px 16px 48px #00000029;--dialog:0px 12px 30px #00000029, 0px 2px 3px #0000001a;--content:0px 2px 4px #00000014;--canvas:none;--keyboard-key:0 2px 0px var(--border-muted);--focus-default:0px 0px 0px 2px var(--blue5);--focus-accent:0px 0px 0px 2px var(--blue8);--focus-inverse:0px 0px 0px 2px var(--white);--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--blur-xs:.25rem;--blur-sm:.5rem;--blur-md:.75rem;--blur-lg:1rem;--blur-xl:1.5rem;--blur-2xl:2.5rem;--blur-3xl:4rem;--perspective-dramatic:6.25rem;--perspective-near:18.75rem;--perspective-normal:31.25rem;--perspective-midrange:50rem;--perspective-distant:75rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}[data-new-ui-theme=dark],[data-new-ui-theme=dark--warm],[data-new-ui-theme=dark--cold]{--dialog-strong:0px 16px 48px #55555552, inset 0px 0px 0px .5px #ffffff29;--dialog:0px 0px 0px .5px #ffffff3d, 0px 2px 12px #33333352;--content:0px 2px 4px #ffffff0a, inset 0px .5px 0px #ffffff26;--canvas:none;--keyboard-key:0 2px 0px var(--border-muted)}.sh-dialog--strong{box-shadow:var(--dialog-strong)}.sh-dialog{box-shadow:var(--dialog)}.sh-content{box-shadow:var(--content)}.sh-canvas{box-shadow:var(--canvas)}.sh-default{box-shadow:var(--focus-default)}.sh-accent{box-shadow:var(--focus-accent)}.sh-inverse{box-shadow:var(--focus-inverse)}.nu-u-radius-xs{border-radius:var(--radius-xs)}.nu-u-radius-sm{border-radius:var(--radius-sm)}.nu-u-radius-md{border-radius:var(--radius-md)}.nu-u-radius-lg{border-radius:var(--radius-lg)}.nu-u-radius-xl{border-radius:var(--radius-xl)}.nu-u-radius-2xl{border-radius:var(--radius-2xl)}.nu-u-radius-3xl{border-radius:var(--radius-3xl)}.nu-u-radius-4xl{border-radius:var(--radius-4xl)}.nu-u-radius-full{border-radius:9999px}.nu-u-blur-xs{filter:blur(var(--blur-xs))}.nu-u-blur-sm{filter:blur(var(--blur-sm))}.nu-u-blur-md{filter:blur(var(--blur-md))}.nu-u-blur-lg{filter:blur(var(--blur-lg))}.nu-u-blur-xl{filter:blur(var(--blur-xl))}.nu-u-blur-2xl{filter:blur(var(--blur-2xl))}.nu-u-blur-3xl{filter:blur(var(--blur-3xl))}.nu-u-backdrop-blur-xs{backdrop-filter:blur(var(--blur-xs))}.nu-u-backdrop-blur-sm{backdrop-filter:blur(var(--blur-sm))}.nu-u-backdrop-blur-md{backdrop-filter:blur(var(--blur-md))}.nu-u-backdrop-blur-lg{backdrop-filter:blur(var(--blur-lg))}.nu-u-backdrop-blur-xl{backdrop-filter:blur(var(--blur-xl))}.nu-u-backdrop-blur-2xl{backdrop-filter:blur(var(--blur-2xl))}.nu-u-backdrop-blur-3xl{backdrop-filter:blur(var(--blur-3xl))}.nu-u-transition{transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.nu-u-transition-all{transition:all var(--default-transition-duration) var(--default-transition-timing-function)}.nu-u-transition-colors{transition-property:color,background-color,border-color;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.nu-u-transition-shadow{transition-property:box-shadow;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.nu-u-transition-transform{transition-property:transform;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}.nu-u-transition-opacity{transition-property:opacity;transition-duration:var(--default-transition-duration);transition-timing-function:var(--default-transition-timing-function)}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACAA,
|
|
1
|
+
{"mappings":"ACAA,81BA+CA,sV,mD,oC,sC,oC,4C,0C,4C,+C,+C,+C,+C,+C,iD,iD,iD,uC,0C,0C,0C,0C,0C,4C,4C,4D,4D,4D,4D,4D,8D,8D,6I,iH,4M,mL,qL","sources":["index.css","src/_variables.scss"],"sourcesContent":[":root {\n --dialog-strong: 0px 16px 48px #00000029;\n --dialog: 0px 12px 30px #00000029, 0px 2px 3px #0000001a;\n --content: 0px 2px 4px #00000014;\n --canvas: none;\n --keyboard-key: 0 2px 0px var(--border-muted);\n --focus-default: 0px 0px 0px 2px var(--blue5);\n --focus-accent: 0px 0px 0px 2px var(--blue8);\n --focus-inverse: 0px 0px 0px 2px var(--white);\n --radius-xs: .125rem;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n --blur-xs: .25rem;\n --blur-sm: .5rem;\n --blur-md: .75rem;\n --blur-lg: 1rem;\n --blur-xl: 1.5rem;\n --blur-2xl: 2.5rem;\n --blur-3xl: 4rem;\n --perspective-dramatic: 6.25rem;\n --perspective-near: 18.75rem;\n --perspective-normal: 31.25rem;\n --perspective-midrange: 50rem;\n --perspective-distant: 75rem;\n --aspect-video: 16 / 9;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n[data-new-ui-theme=\"dark\"], [data-new-ui-theme=\"dark--warm\"], [data-new-ui-theme=\"dark--cold\"] {\n --dialog-strong: 0px 16px 48px #55555552,\n inset 0px 0px 0px .5px #ffffff29;\n --dialog: 0px 0px 0px .5px #ffffff3d,\n 0px 2px 12px #33333352;\n --content: 0px 2px 4px #ffffff0a,\n inset 0px .5px 0px #ffffff26;\n --canvas: none;\n --keyboard-key: 0 2px 0px var(--border-muted);\n}\n\n.sh-dialog--strong {\n box-shadow: var(--dialog-strong);\n}\n\n.sh-dialog {\n box-shadow: var(--dialog);\n}\n\n.sh-content {\n box-shadow: var(--content);\n}\n\n.sh-canvas {\n box-shadow: var(--canvas);\n}\n\n.sh-default {\n box-shadow: var(--focus-default);\n}\n\n.sh-accent {\n box-shadow: var(--focus-accent);\n}\n\n.sh-inverse {\n box-shadow: var(--focus-inverse);\n}\n\n.nu-u-radius-xs {\n border-radius: var(--radius-xs);\n}\n\n.nu-u-radius-sm {\n border-radius: var(--radius-sm);\n}\n\n.nu-u-radius-md {\n border-radius: var(--radius-md);\n}\n\n.nu-u-radius-lg {\n border-radius: var(--radius-lg);\n}\n\n.nu-u-radius-xl {\n border-radius: var(--radius-xl);\n}\n\n.nu-u-radius-2xl {\n border-radius: var(--radius-2xl);\n}\n\n.nu-u-radius-3xl {\n border-radius: var(--radius-3xl);\n}\n\n.nu-u-radius-4xl {\n border-radius: var(--radius-4xl);\n}\n\n.nu-u-radius-full {\n border-radius: 9999px;\n}\n\n.nu-u-blur-xs {\n filter: blur(var(--blur-xs));\n}\n\n.nu-u-blur-sm {\n filter: blur(var(--blur-sm));\n}\n\n.nu-u-blur-md {\n filter: blur(var(--blur-md));\n}\n\n.nu-u-blur-lg {\n filter: blur(var(--blur-lg));\n}\n\n.nu-u-blur-xl {\n filter: blur(var(--blur-xl));\n}\n\n.nu-u-blur-2xl {\n filter: blur(var(--blur-2xl));\n}\n\n.nu-u-blur-3xl {\n filter: blur(var(--blur-3xl));\n}\n\n.nu-u-backdrop-blur-xs {\n backdrop-filter: blur(var(--blur-xs));\n}\n\n.nu-u-backdrop-blur-sm {\n backdrop-filter: blur(var(--blur-sm));\n}\n\n.nu-u-backdrop-blur-md {\n backdrop-filter: blur(var(--blur-md));\n}\n\n.nu-u-backdrop-blur-lg {\n backdrop-filter: blur(var(--blur-lg));\n}\n\n.nu-u-backdrop-blur-xl {\n backdrop-filter: blur(var(--blur-xl));\n}\n\n.nu-u-backdrop-blur-2xl {\n backdrop-filter: blur(var(--blur-2xl));\n}\n\n.nu-u-backdrop-blur-3xl {\n backdrop-filter: blur(var(--blur-3xl));\n}\n\n.nu-u-transition {\n transition-duration: var(--default-transition-duration);\n transition-timing-function: var(--default-transition-timing-function);\n}\n\n.nu-u-transition-all {\n transition: all var(--default-transition-duration) var(--default-transition-timing-function);\n}\n\n.nu-u-transition-colors {\n transition-property: color, background-color, border-color;\n transition-duration: var(--default-transition-duration);\n transition-timing-function: var(--default-transition-timing-function);\n}\n\n.nu-u-transition-shadow {\n transition-property: box-shadow;\n transition-duration: var(--default-transition-duration);\n transition-timing-function: var(--default-transition-timing-function);\n}\n\n.nu-u-transition-transform {\n transition-property: transform;\n transition-duration: var(--default-transition-duration);\n transition-timing-function: var(--default-transition-timing-function);\n}\n\n.nu-u-transition-opacity {\n transition-property: opacity;\n transition-duration: var(--default-transition-duration);\n transition-timing-function: var(--default-transition-timing-function);\n}\n/*# sourceMappingURL=index.css.map */\n",":root {\n // Shadows\n --dialog-strong: 0px 16px 48px rgb(0 0 0 / 16%);\n --dialog: 0px 12px 30px rgb(0 0 0 / 16%), 0px 2px 3px rgb(0 0 0 / 10%);\n --content: 0px 2px 4px rgb(0 0 0 / 8%);\n --canvas: none;\n --keyboard-key: 0 2px 0px var(--border-muted);\n\n // Focus\n --focus-default: 0px 0px 0px 2px var(--blue5);\n --focus-accent: 0px 0px 0px 2px var(--blue8);\n --focus-inverse: 0px 0px 0px 2px var(--white);\n\n // Radius\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-4xl: 2rem;\n\n // Blur\n --blur-xs: 0.25rem;\n --blur-sm: 0.5rem;\n --blur-md: 0.75rem;\n --blur-lg: 1rem;\n --blur-xl: 1.5rem;\n --blur-2xl: 2.5rem;\n --blur-3xl: 4rem;\n\n // Perspective\n --perspective-dramatic: 6.25rem;\n --perspective-near: 18.75rem;\n --perspective-normal: 31.25rem;\n --perspective-midrange: 50rem;\n --perspective-distant: 75rem;\n\n // Aspect Video\n --aspect-video: 16 / 9;\n\n // Transition Duration\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n[data-new-ui-theme='dark'],\n[data-new-ui-theme='dark--warm'],\n[data-new-ui-theme='dark--cold'] {\n // Shadows\n --dialog-strong:\n 0px 16px 48px rgb(85 85 85 / 32%),\n inset 0px 0px 0px 0.5px rgb(255 255 255 / 16%);\n --dialog:\n 0px 0px 0px 0.5px rgb(255 255 255 / 24%),\n 0px 2px 12px rgb(51 51 51 / 32%);\n --content:\n 0px 2px 4px rgb(255 255 255 / 4%),\n inset 0px 0.5px 0px rgb(255 255 255 / 15%);\n --canvas: none;\n --keyboard-key: 0 2px 0px var(--border-muted);\n}\n"],"names":[],"version":3,"file":"index.css.map"}
|
package/package.json
CHANGED
package/src/_utilities.scss
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
// Shadows
|
|
1
2
|
.sh-dialog--strong {
|
|
2
3
|
box-shadow: var(--dialog-strong);
|
|
3
4
|
}
|
|
@@ -25,3 +26,133 @@
|
|
|
25
26
|
.sh-inverse {
|
|
26
27
|
box-shadow: var(--focus-inverse);
|
|
27
28
|
}
|
|
29
|
+
|
|
30
|
+
// Border Radius
|
|
31
|
+
.nu-u-radius-xs {
|
|
32
|
+
border-radius: var(--radius-xs);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.nu-u-radius-sm {
|
|
36
|
+
border-radius: var(--radius-sm);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.nu-u-radius-md {
|
|
40
|
+
border-radius: var(--radius-md);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.nu-u-radius-lg {
|
|
44
|
+
border-radius: var(--radius-lg);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.nu-u-radius-xl {
|
|
48
|
+
border-radius: var(--radius-xl);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.nu-u-radius-2xl {
|
|
52
|
+
border-radius: var(--radius-2xl);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.nu-u-radius-3xl {
|
|
56
|
+
border-radius: var(--radius-3xl);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.nu-u-radius-4xl {
|
|
60
|
+
border-radius: var(--radius-4xl);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.nu-u-radius-full {
|
|
64
|
+
border-radius: 9999px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Blur
|
|
68
|
+
.nu-u-blur-xs {
|
|
69
|
+
filter: blur(var(--blur-xs));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nu-u-blur-sm {
|
|
73
|
+
filter: blur(var(--blur-sm));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.nu-u-blur-md {
|
|
77
|
+
filter: blur(var(--blur-md));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nu-u-blur-lg {
|
|
81
|
+
filter: blur(var(--blur-lg));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nu-u-blur-xl {
|
|
85
|
+
filter: blur(var(--blur-xl));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nu-u-blur-2xl {
|
|
89
|
+
filter: blur(var(--blur-2xl));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nu-u-blur-3xl {
|
|
93
|
+
filter: blur(var(--blur-3xl));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Backdrop Blur
|
|
97
|
+
.nu-u-backdrop-blur-xs {
|
|
98
|
+
backdrop-filter: blur(var(--blur-xs));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.nu-u-backdrop-blur-sm {
|
|
102
|
+
backdrop-filter: blur(var(--blur-sm));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.nu-u-backdrop-blur-md {
|
|
106
|
+
backdrop-filter: blur(var(--blur-md));
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.nu-u-backdrop-blur-lg {
|
|
110
|
+
backdrop-filter: blur(var(--blur-lg));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.nu-u-backdrop-blur-xl {
|
|
114
|
+
backdrop-filter: blur(var(--blur-xl));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.nu-u-backdrop-blur-2xl {
|
|
118
|
+
backdrop-filter: blur(var(--blur-2xl));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.nu-u-backdrop-blur-3xl {
|
|
122
|
+
backdrop-filter: blur(var(--blur-3xl));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Transition
|
|
126
|
+
.nu-u-transition {
|
|
127
|
+
transition-duration: var(--default-transition-duration);
|
|
128
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.nu-u-transition-all {
|
|
132
|
+
transition: all var(--default-transition-duration)
|
|
133
|
+
var(--default-transition-timing-function);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.nu-u-transition-colors {
|
|
137
|
+
transition-property: color, background-color, border-color;
|
|
138
|
+
transition-duration: var(--default-transition-duration);
|
|
139
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.nu-u-transition-shadow {
|
|
143
|
+
transition-property: box-shadow;
|
|
144
|
+
transition-duration: var(--default-transition-duration);
|
|
145
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.nu-u-transition-transform {
|
|
149
|
+
transition-property: transform;
|
|
150
|
+
transition-duration: var(--default-transition-duration);
|
|
151
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.nu-u-transition-opacity {
|
|
155
|
+
transition-property: opacity;
|
|
156
|
+
transition-duration: var(--default-transition-duration);
|
|
157
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
158
|
+
}
|
package/src/_variables.scss
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
// Shadows
|
|
3
3
|
--dialog-strong: 0px 16px 48px rgb(0 0 0 / 16%);
|
|
4
|
-
--dialog:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--
|
|
8
|
-
--canvas: 0px 0px 0px rgb(0 0 0 / 0%);
|
|
9
|
-
--keyboard-key: 0 2px 0px var(--grey4);
|
|
4
|
+
--dialog: 0px 12px 30px rgb(0 0 0 / 16%), 0px 2px 3px rgb(0 0 0 / 10%);
|
|
5
|
+
--content: 0px 2px 4px rgb(0 0 0 / 8%);
|
|
6
|
+
--canvas: none;
|
|
7
|
+
--keyboard-key: 0 2px 0px var(--border-muted);
|
|
10
8
|
|
|
11
9
|
// Focus
|
|
12
10
|
--focus-default: 0px 0px 0px 2px var(--blue5);
|
|
@@ -46,3 +44,20 @@
|
|
|
46
44
|
--default-transition-duration: 150ms;
|
|
47
45
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
48
46
|
}
|
|
47
|
+
|
|
48
|
+
[data-new-ui-theme='dark'],
|
|
49
|
+
[data-new-ui-theme='dark--warm'],
|
|
50
|
+
[data-new-ui-theme='dark--cold'] {
|
|
51
|
+
// Shadows
|
|
52
|
+
--dialog-strong:
|
|
53
|
+
0px 16px 48px rgb(85 85 85 / 32%),
|
|
54
|
+
inset 0px 0px 0px 0.5px rgb(255 255 255 / 16%);
|
|
55
|
+
--dialog:
|
|
56
|
+
0px 0px 0px 0.5px rgb(255 255 255 / 24%),
|
|
57
|
+
0px 2px 12px rgb(51 51 51 / 32%);
|
|
58
|
+
--content:
|
|
59
|
+
0px 2px 4px rgb(255 255 255 / 4%),
|
|
60
|
+
inset 0px 0.5px 0px rgb(255 255 255 / 15%);
|
|
61
|
+
--canvas: none;
|
|
62
|
+
--keyboard-key: 0 2px 0px var(--border-muted);
|
|
63
|
+
}
|