@new-ui/effects 0.1.11 → 3.0.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/README.md +12 -6
- package/dist/index.css +196 -1
- package/dist/index.css.map +1 -1
- package/dist/index.min.css +2 -0
- package/dist/index.min.css.map +1 -0
- package/package.json +26 -8
- package/src/_utilities.scss +7 -7
- package/src/_variables.scss +1 -2
package/README.md
CHANGED
|
@@ -2,27 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
## Install
|
|
4
4
|
|
|
5
|
-
Install New UI Effects from your terminal
|
|
5
|
+
Install New UI Effects from your terminal with npm:
|
|
6
6
|
|
|
7
7
|
```
|
|
8
8
|
npm i @new-ui/effects
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
You can also load the minified build from a CDN in your HTML `<head>`:
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
|
-
<!-- Place this at the html head -->
|
|
15
14
|
<link
|
|
16
15
|
rel="stylesheet"
|
|
17
|
-
href="https://cdn.jsdelivr.net/npm/@new-ui/effects@latest/dist/index.css"
|
|
16
|
+
href="https://cdn.jsdelivr.net/npm/@new-ui/effects@latest/dist/index.min.css"
|
|
18
17
|
/>
|
|
19
18
|
```
|
|
20
19
|
|
|
21
20
|
## Usage
|
|
22
21
|
|
|
22
|
+
Import the compiled CSS in a React app or bundler:
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import '@new-ui/effects/css';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
For SCSS projects, load the package with `@use`:
|
|
29
|
+
|
|
23
30
|
```scss
|
|
24
|
-
|
|
25
|
-
@use '@new-ui/effects';
|
|
31
|
+
@use '@new-ui/effects/scss';
|
|
26
32
|
```
|
|
27
33
|
|
|
28
34
|
## Guides
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,197 @@
|
|
|
1
|
-
:root
|
|
1
|
+
:root {
|
|
2
|
+
--dialog-strong: 0px 16px 48px #00000029;
|
|
3
|
+
--dialog: 0px 12px 30px #00000029, 0px 2px 3px #0000001a;
|
|
4
|
+
--content: 0px 2px 4px #00000014;
|
|
5
|
+
--canvas: none;
|
|
6
|
+
--keyboard-key: 0 2px 0px var(--border-muted);
|
|
7
|
+
--focus-default: 0px 0px 0px 2px var(--blue5);
|
|
8
|
+
--focus-accent: 0px 0px 0px 2px var(--blue8);
|
|
9
|
+
--focus-inverse: 0px 0px 0px 2px var(--white);
|
|
10
|
+
--radius-xs: .125rem;
|
|
11
|
+
--radius-sm: .25rem;
|
|
12
|
+
--radius-md: .375rem;
|
|
13
|
+
--radius-lg: .5rem;
|
|
14
|
+
--radius-xl: .75rem;
|
|
15
|
+
--radius-2xl: 1rem;
|
|
16
|
+
--radius-3xl: 1.5rem;
|
|
17
|
+
--radius-4xl: 2rem;
|
|
18
|
+
--blur-xs: .25rem;
|
|
19
|
+
--blur-sm: .5rem;
|
|
20
|
+
--blur-md: .75rem;
|
|
21
|
+
--blur-lg: 1rem;
|
|
22
|
+
--blur-xl: 1.5rem;
|
|
23
|
+
--blur-2xl: 2.5rem;
|
|
24
|
+
--blur-3xl: 4rem;
|
|
25
|
+
--perspective-dramatic: 6.25rem;
|
|
26
|
+
--perspective-near: 18.75rem;
|
|
27
|
+
--perspective-normal: 31.25rem;
|
|
28
|
+
--perspective-midrange: 50rem;
|
|
29
|
+
--perspective-distant: 75rem;
|
|
30
|
+
--aspect-video: 16 / 9;
|
|
31
|
+
--default-transition-duration: .15s;
|
|
32
|
+
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-new-ui-theme="dark"], [data-new-ui-theme="dark--warm"], [data-new-ui-theme="dark--cold"] {
|
|
36
|
+
--dialog-strong: 0px 16px 48px #55555552,
|
|
37
|
+
inset 0px 0px 0px .5px #ffffff29;
|
|
38
|
+
--dialog: 0px 0px 0px .5px #ffffff3d, 0px 2px 12px #33333352;
|
|
39
|
+
--content: 0px 2px 4px #ffffff0a,
|
|
40
|
+
inset 0px .5px 0px #ffffff26;
|
|
41
|
+
--canvas: none;
|
|
42
|
+
--keyboard-key: 0 2px 0px var(--border-muted);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.nu-u-shadow-dialog-strong {
|
|
46
|
+
box-shadow: var(--dialog-strong);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.nu-u-shadow-dialog {
|
|
50
|
+
box-shadow: var(--dialog);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.nu-u-shadow-content {
|
|
54
|
+
box-shadow: var(--content);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.nu-u-shadow-canvas {
|
|
58
|
+
box-shadow: var(--canvas);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.nu-u-focus-default {
|
|
62
|
+
box-shadow: var(--focus-default);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.nu-u-focus-accent {
|
|
66
|
+
box-shadow: var(--focus-accent);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.nu-u-focus-inverse {
|
|
70
|
+
box-shadow: var(--focus-inverse);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.nu-u-radius-xs {
|
|
74
|
+
border-radius: var(--radius-xs);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.nu-u-radius-sm {
|
|
78
|
+
border-radius: var(--radius-sm);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.nu-u-radius-md {
|
|
82
|
+
border-radius: var(--radius-md);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.nu-u-radius-lg {
|
|
86
|
+
border-radius: var(--radius-lg);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nu-u-radius-xl {
|
|
90
|
+
border-radius: var(--radius-xl);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nu-u-radius-2xl {
|
|
94
|
+
border-radius: var(--radius-2xl);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.nu-u-radius-3xl {
|
|
98
|
+
border-radius: var(--radius-3xl);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.nu-u-radius-4xl {
|
|
102
|
+
border-radius: var(--radius-4xl);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.nu-u-radius-full {
|
|
106
|
+
border-radius: 9999px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.nu-u-blur-xs {
|
|
110
|
+
filter: blur(var(--blur-xs));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.nu-u-blur-sm {
|
|
114
|
+
filter: blur(var(--blur-sm));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.nu-u-blur-md {
|
|
118
|
+
filter: blur(var(--blur-md));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.nu-u-blur-lg {
|
|
122
|
+
filter: blur(var(--blur-lg));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.nu-u-blur-xl {
|
|
126
|
+
filter: blur(var(--blur-xl));
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.nu-u-blur-2xl {
|
|
130
|
+
filter: blur(var(--blur-2xl));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.nu-u-blur-3xl {
|
|
134
|
+
filter: blur(var(--blur-3xl));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.nu-u-backdrop-blur-xs {
|
|
138
|
+
backdrop-filter: blur(var(--blur-xs));
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.nu-u-backdrop-blur-sm {
|
|
142
|
+
backdrop-filter: blur(var(--blur-sm));
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.nu-u-backdrop-blur-md {
|
|
146
|
+
backdrop-filter: blur(var(--blur-md));
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.nu-u-backdrop-blur-lg {
|
|
150
|
+
backdrop-filter: blur(var(--blur-lg));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.nu-u-backdrop-blur-xl {
|
|
154
|
+
backdrop-filter: blur(var(--blur-xl));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.nu-u-backdrop-blur-2xl {
|
|
158
|
+
backdrop-filter: blur(var(--blur-2xl));
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.nu-u-backdrop-blur-3xl {
|
|
162
|
+
backdrop-filter: blur(var(--blur-3xl));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.nu-u-transition {
|
|
166
|
+
transition-duration: var(--default-transition-duration);
|
|
167
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.nu-u-transition-all {
|
|
171
|
+
transition: all var(--default-transition-duration) var(--default-transition-timing-function);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.nu-u-transition-colors {
|
|
175
|
+
transition-property: color, background-color, border-color;
|
|
176
|
+
transition-duration: var(--default-transition-duration);
|
|
177
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.nu-u-transition-shadow {
|
|
181
|
+
transition-property: box-shadow;
|
|
182
|
+
transition-duration: var(--default-transition-duration);
|
|
183
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.nu-u-transition-transform {
|
|
187
|
+
transition-property: transform;
|
|
188
|
+
transition-duration: var(--default-transition-duration);
|
|
189
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.nu-u-transition-opacity {
|
|
193
|
+
transition-property: opacity;
|
|
194
|
+
transition-duration: var(--default-transition-duration);
|
|
195
|
+
transition-timing-function: var(--default-transition-timing-function);
|
|
196
|
+
}
|
|
2
197
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA","sources":["src/_variables.scss"],"sourcesContent":[":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%), 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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
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)}.nu-u-shadow-dialog-strong{box-shadow:var(--dialog-strong)}.nu-u-shadow-dialog{box-shadow:var(--dialog)}.nu-u-shadow-content{box-shadow:var(--content)}.nu-u-shadow-canvas{box-shadow:var(--canvas)}.nu-u-focus-default{box-shadow:var(--focus-default)}.nu-u-focus-accent{box-shadow:var(--focus-accent)}.nu-u-focus-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
|
+
/*# sourceMappingURL=index.min.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"ACAA,81BA+CA,sV,2D,6C,+C,6C,oD,kD,oD,+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.min.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, 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.nu-u-shadow-dialog-strong {\n box-shadow: var(--dialog-strong);\n}\n\n.nu-u-shadow-dialog {\n box-shadow: var(--dialog);\n}\n\n.nu-u-shadow-content {\n box-shadow: var(--content);\n}\n\n.nu-u-shadow-canvas {\n box-shadow: var(--canvas);\n}\n\n.nu-u-focus-default {\n box-shadow: var(--focus-default);\n}\n\n.nu-u-focus-accent {\n box-shadow: var(--focus-accent);\n}\n\n.nu-u-focus-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.min.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%), 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.min.css.map"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@new-ui/effects",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Layering, elevations, and effects styles",
|
|
5
5
|
"source": "src/index.scss",
|
|
6
6
|
"main": "dist/index.css",
|
|
7
|
+
"css": "dist/index.css",
|
|
8
|
+
"minified": "dist/index.min.css",
|
|
9
|
+
"style": "./dist/index.css",
|
|
10
|
+
"sass": "./src/index.scss",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"sass": "./src/index.scss",
|
|
14
|
+
"style": "./dist/index.css",
|
|
15
|
+
"default": "./dist/index.css"
|
|
16
|
+
},
|
|
17
|
+
"./css": "./dist/index.css",
|
|
18
|
+
"./css/min": "./dist/index.min.css",
|
|
19
|
+
"./scss": "./src/index.scss",
|
|
20
|
+
"./package.json": "./package.json"
|
|
21
|
+
},
|
|
7
22
|
"targets": {
|
|
8
|
-
"main": false
|
|
23
|
+
"main": false,
|
|
24
|
+
"css": {
|
|
25
|
+
"optimize": false
|
|
26
|
+
},
|
|
27
|
+
"minified": {
|
|
28
|
+
"optimize": true
|
|
29
|
+
}
|
|
9
30
|
},
|
|
10
31
|
"files": [
|
|
11
32
|
"dist/",
|
|
@@ -15,7 +36,8 @@
|
|
|
15
36
|
],
|
|
16
37
|
"scripts": {
|
|
17
38
|
"watch": "PARCEL_WORKERS=0 parcel watch",
|
|
18
|
-
"build": "PARCEL_WORKERS=0 parcel build"
|
|
39
|
+
"build": "PARCEL_WORKERS=0 parcel build",
|
|
40
|
+
"prepublishOnly": "bun run build"
|
|
19
41
|
},
|
|
20
42
|
"repository": {
|
|
21
43
|
"type": "git",
|
|
@@ -27,11 +49,7 @@
|
|
|
27
49
|
"url": "https://github.com/CreateNewUI/foundations/issues"
|
|
28
50
|
},
|
|
29
51
|
"homepage": "https://github.com/CreateNewUI/foundations#readme",
|
|
30
|
-
"devDependencies": {
|
|
31
|
-
"@parcel/transformer-sass": "^2.16.4",
|
|
32
|
-
"parcel": "^2.16.4"
|
|
33
|
-
},
|
|
34
52
|
"peerDependencies": {
|
|
35
|
-
"@new-ui/colors": "^
|
|
53
|
+
"@new-ui/colors": "^3.0.0"
|
|
36
54
|
}
|
|
37
55
|
}
|
package/src/_utilities.scss
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
// Shadows
|
|
2
|
-
.
|
|
2
|
+
.nu-u-shadow-dialog-strong {
|
|
3
3
|
box-shadow: var(--dialog-strong);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.nu-u-shadow-dialog {
|
|
7
7
|
box-shadow: var(--dialog);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.nu-u-shadow-content {
|
|
11
11
|
box-shadow: var(--content);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.nu-u-shadow-canvas {
|
|
15
15
|
box-shadow: var(--canvas);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.nu-u-focus-default {
|
|
19
19
|
box-shadow: var(--focus-default);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.nu-u-focus-accent {
|
|
23
23
|
box-shadow: var(--focus-accent);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.nu-u-focus-inverse {
|
|
27
27
|
box-shadow: var(--focus-inverse);
|
|
28
28
|
}
|
|
29
29
|
|
package/src/_variables.scss
CHANGED
|
@@ -53,8 +53,7 @@
|
|
|
53
53
|
0px 16px 48px rgb(85 85 85 / 32%),
|
|
54
54
|
inset 0px 0px 0px 0.5px rgb(255 255 255 / 16%);
|
|
55
55
|
--dialog:
|
|
56
|
-
0px 0px 0px 0.5px rgb(255 255 255 / 24%),
|
|
57
|
-
0px 2px 12px rgb(51 51 51 / 32%);
|
|
56
|
+
0px 0px 0px 0.5px rgb(255 255 255 / 24%), 0px 2px 12px rgb(51 51 51 / 32%);
|
|
58
57
|
--content:
|
|
59
58
|
0px 2px 4px rgb(255 255 255 / 4%),
|
|
60
59
|
inset 0px 0.5px 0px rgb(255 255 255 / 15%);
|