@needless-ui/tokens 0.1.0 → 0.2.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 +15 -0
- package/dist/tokens.css +19 -4
- package/dist/tokens.json +90 -0
- package/package.json +1 -1
- package/src/dimension.tokens.json +10 -0
- package/src/motion.tokens.json +57 -0
package/README.md
CHANGED
|
@@ -35,6 +35,21 @@ Each palette (neutral, accent, danger, success, warning) has 12 steps with fixed
|
|
|
35
35
|
|
|
36
36
|
Components use the semantic aliases (`--nui-color-accent-solid`, `--nui-color-bg-canvas`, …), so overriding one alias restyles every component that uses it.
|
|
37
37
|
|
|
38
|
+
## Springs
|
|
39
|
+
|
|
40
|
+
Motion tokens are springs. Each `--nui-spring-*` is a DTCG `transition` with its physics in `$extensions["com.needlessui.spring"]`:
|
|
41
|
+
|
|
42
|
+
```json
|
|
43
|
+
"bouncy": {
|
|
44
|
+
"$value": { "duration": { "value": 490, "unit": "ms" }, "delay": { "value": 0, "unit": "ms" }, "timingFunction": [0.62, 2.35, 0.21, 0.69] },
|
|
45
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 300, "damping": 14, "mass": 1 } }
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
The `$value` is the closest cubic-bezier, for other DTCG tools. This package's compiler solves the spring instead and emits its settling time and exact curve: `--nui-spring-bouncy: 889ms linear(0, 0.009 0.9%, …, 1)`. Use one in any transition, `transition: transform var(--nui-spring-bouncy)`, or point `--nui-motion` at it to change how every component moves. Springs, like durations, collapse to 0.01ms under `prefers-reduced-motion`.
|
|
50
|
+
|
|
51
|
+
`--nui-radius-scale` and `--nui-density` multiply every component radius and every control size. The `data-nui-*` presets in `@needless-ui/css` set all three for a subtree.
|
|
52
|
+
|
|
38
53
|
## License
|
|
39
54
|
|
|
40
55
|
MIT
|
package/dist/tokens.css
CHANGED
|
@@ -230,6 +230,8 @@
|
|
|
230
230
|
--nui-control-height-lg: 2.75rem;
|
|
231
231
|
--nui-focus-ring-width: 2px;
|
|
232
232
|
--nui-focus-ring-offset: 2px;
|
|
233
|
+
--nui-radius-scale: 1;
|
|
234
|
+
--nui-density: 1;
|
|
233
235
|
--nui-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
234
236
|
--nui-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
235
237
|
--nui-font-size-xs: 0.75rem;
|
|
@@ -251,8 +253,19 @@
|
|
|
251
253
|
--nui-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
252
254
|
--nui-easing-enter: cubic-bezier(0, 0, 0.2, 1);
|
|
253
255
|
--nui-easing-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
256
|
+
--nui-spring-snappy: 481ms linear(0, 0.007 1.25%, 0.027 2.49%, 0.062 3.95%, 0.109 5.41%, 0.213 8.11%, 0.569 16.42%, 0.677 19.33%, 0.763 22.04%, 0.836 24.74%, 0.898 27.65%, 0.946 30.56%, 0.981 33.47%, 1.004 36.17%, 1.02 39.09%, 1.034 45.95%, 1.003 74.64%, 1);
|
|
257
|
+
--nui-spring-bouncy: 889ms linear(0, 0.009 0.9%, 0.04 1.91%, 0.089 2.92%, 0.16 4.05%, 0.228 4.95%, 0.322 6.07%, 0.67 9.9%, 0.806 11.47%, 0.928 13.05%, 1.032 14.62%, 1.116 16.2%, 1.175 17.66%, 1.218 19.24%, 1.243 20.81%, 1.248 22.95%, 1.228 25.2%, 1.187 27.56%, 1.059 33.3%, 1.003 36.22%, 0.961 39.48%, 0.94 42.74%, 0.943 47.47%, 0.998 58.27%, 1.014 64.45%, 1.014 69.63%, 0.997 85.6%, 1);
|
|
258
|
+
--nui-spring-jelly: 1845ms linear(0, 0.012 0.65%, 0.05 1.36%, 0.11 2.06%, 0.197 2.82%, 0.285 3.47%, 0.391 4.17%, 0.802 6.67%, 0.955 7.64%, 1.099 8.67%, 1.208 9.59%, 1.295 10.51%, 1.355 11.38%, 1.395 12.25%, 1.415 13.17%, 1.415 13.88%, 1.403 14.63%, 1.38 15.39%, 1.343 16.21%, 1.258 17.67%, 1.013 21.3%, 0.954 22.33%, 0.909 23.25%, 0.876 24.12%, 0.852 24.93%, 0.836 25.8%, 0.827 26.67%, 0.829 27.91%, 0.847 29.27%, 0.881 30.79%, 0.985 34.47%, 1.026 36.21%, 1.058 38.16%, 1.072 40.11%, 1.064 42.82%, 0.99 49.7%, 0.97 53.55%, 0.973 56.37%, 1.004 63.2%, 1.012 66.94%, 0.995 80.22%, 1);
|
|
259
|
+
--nui-spring-elastic: 1656ms linear(0, 0.013 0.42%, 0.052 0.85%, 0.125 1.33%, 0.224 1.81%, 0.327 2.23%, 0.46 2.72%, 0.935 4.29%, 1.109 4.89%, 1.248 5.43%, 1.368 5.98%, 1.462 6.52%, 1.524 7%, 1.564 7.49%, 1.583 8.03%, 1.579 8.45%, 1.556 8.94%, 1.515 9.42%, 1.459 9.9%, 1.399 10.33%, 1.322 10.81%, 0.943 12.98%, 0.853 13.59%, 0.783 14.13%, 0.729 14.67%, 0.693 15.16%, 0.67 15.64%, 0.66 16.12%, 0.662 16.55%, 0.674 17.03%, 0.697 17.51%, 0.734 18.06%, 0.814 18.96%, 1.035 21.14%, 1.128 22.28%, 1.159 22.83%, 1.18 23.31%, 1.198 24.28%, 1.19 25.18%, 1.157 26.15%, 1.111 27.05%, 0.979 29.29%, 0.925 30.43%, 0.896 31.4%, 0.884 32.37%, 0.889 33.27%, 0.909 34.3%, 1.013 37.44%, 1.044 38.59%, 1.061 39.55%, 1.068 40.52%, 1.065 41.43%, 1.053 42.45%, 0.975 46.68%, 0.961 48.61%, 0.967 50.3%, 1.012 54.47%, 1.023 56.7%, 1.02 58.39%, 0.993 62.62%, 0.987 64.79%, 1.008 72.89%, 0.995 80.92%, 1.003 88.89%, 1);
|
|
260
|
+
--nui-spring-lazy: 1671ms linear(0, 0.007 1.2%, 0.03 2.51%, 0.067 3.89%, 0.122 5.45%, 0.243 8.2%, 0.523 13.82%, 0.639 16.28%, 0.748 18.85%, 0.841 21.36%, 0.915 23.82%, 0.976 26.33%, 1.022 28.9%, 1.055 31.54%, 1.081 35.37%, 1.087 39.8%, 1.075 44.82%, 1.018 58.83%, 0.999 67.15%, 0.992 78.1%, 1);
|
|
261
|
+
--nui-spring-mechanical: 669ms linear(0, 0.017 1.64%, 0.072 3.74%, 0.143 5.68%, 0.341 10.61%, 0.442 13.3%, 0.541 16.29%, 0.626 19.28%, 0.7 22.42%, 0.765 25.86%, 0.819 29.45%, 0.863 33.33%, 0.902 37.82%, 0.932 42.75%, 0.955 48.43%, 0.972 55.01%, 0.992 71.3%, 1);
|
|
262
|
+
--nui-motion: var(--nui-spring-snappy);
|
|
254
263
|
--nui-color-static-white: oklch(1 0 0);
|
|
255
264
|
--nui-color-static-ink: oklch(0.22 0.02 262);
|
|
265
|
+
--nui-color-accent-on-solid: var(--nui-color-static-white);
|
|
266
|
+
--nui-color-danger-on-solid: var(--nui-color-static-white);
|
|
267
|
+
--nui-color-success-on-solid: var(--nui-color-static-white);
|
|
268
|
+
--nui-color-warning-on-solid: var(--nui-color-static-ink);
|
|
256
269
|
}
|
|
257
270
|
|
|
258
271
|
:root, [data-nui-theme] {
|
|
@@ -270,7 +283,6 @@
|
|
|
270
283
|
--nui-color-focus-ring: var(--nui-color-accent-11);
|
|
271
284
|
--nui-color-accent-solid: var(--nui-color-accent-9);
|
|
272
285
|
--nui-color-accent-solid-hover: var(--nui-color-accent-10);
|
|
273
|
-
--nui-color-accent-on-solid: var(--nui-color-static-white);
|
|
274
286
|
--nui-color-accent-soft: var(--nui-color-accent-3);
|
|
275
287
|
--nui-color-accent-soft-hover: var(--nui-color-accent-4);
|
|
276
288
|
--nui-color-accent-soft-active: var(--nui-color-accent-5);
|
|
@@ -288,7 +300,6 @@
|
|
|
288
300
|
--nui-color-neutral-text: var(--nui-color-neutral-12);
|
|
289
301
|
--nui-color-danger-solid: var(--nui-color-danger-9);
|
|
290
302
|
--nui-color-danger-solid-hover: var(--nui-color-danger-10);
|
|
291
|
-
--nui-color-danger-on-solid: var(--nui-color-static-white);
|
|
292
303
|
--nui-color-danger-soft: var(--nui-color-danger-3);
|
|
293
304
|
--nui-color-danger-soft-hover: var(--nui-color-danger-4);
|
|
294
305
|
--nui-color-danger-soft-active: var(--nui-color-danger-5);
|
|
@@ -297,7 +308,6 @@
|
|
|
297
308
|
--nui-color-danger-text: var(--nui-color-danger-11);
|
|
298
309
|
--nui-color-success-solid: var(--nui-color-success-9);
|
|
299
310
|
--nui-color-success-solid-hover: var(--nui-color-success-10);
|
|
300
|
-
--nui-color-success-on-solid: var(--nui-color-static-white);
|
|
301
311
|
--nui-color-success-soft: var(--nui-color-success-3);
|
|
302
312
|
--nui-color-success-soft-hover: var(--nui-color-success-4);
|
|
303
313
|
--nui-color-success-soft-active: var(--nui-color-success-5);
|
|
@@ -306,7 +316,6 @@
|
|
|
306
316
|
--nui-color-success-text: var(--nui-color-success-11);
|
|
307
317
|
--nui-color-warning-solid: var(--nui-color-warning-9);
|
|
308
318
|
--nui-color-warning-solid-hover: var(--nui-color-warning-10);
|
|
309
|
-
--nui-color-warning-on-solid: var(--nui-color-static-ink);
|
|
310
319
|
--nui-color-warning-soft: var(--nui-color-warning-3);
|
|
311
320
|
--nui-color-warning-soft-hover: var(--nui-color-warning-4);
|
|
312
321
|
--nui-color-warning-soft-active: var(--nui-color-warning-5);
|
|
@@ -320,6 +329,12 @@
|
|
|
320
329
|
--nui-duration-fast: 0.01ms;
|
|
321
330
|
--nui-duration-normal: 0.01ms;
|
|
322
331
|
--nui-duration-slow: 0.01ms;
|
|
332
|
+
--nui-spring-snappy: 0.01ms linear;
|
|
333
|
+
--nui-spring-bouncy: 0.01ms linear;
|
|
334
|
+
--nui-spring-jelly: 0.01ms linear;
|
|
335
|
+
--nui-spring-elastic: 0.01ms linear;
|
|
336
|
+
--nui-spring-lazy: 0.01ms linear;
|
|
337
|
+
--nui-spring-mechanical: 0.01ms linear;
|
|
323
338
|
}
|
|
324
339
|
}
|
|
325
340
|
}
|
package/dist/tokens.json
CHANGED
|
@@ -620,6 +620,11 @@
|
|
|
620
620
|
"var": "--nui-control-height-sm",
|
|
621
621
|
"value": "1.75rem"
|
|
622
622
|
},
|
|
623
|
+
"density": {
|
|
624
|
+
"type": "number",
|
|
625
|
+
"var": "--nui-density",
|
|
626
|
+
"value": "1"
|
|
627
|
+
},
|
|
623
628
|
"duration.fast": {
|
|
624
629
|
"type": "duration",
|
|
625
630
|
"var": "--nui-duration-fast",
|
|
@@ -735,6 +740,16 @@
|
|
|
735
740
|
"var": "--nui-line-height-tight",
|
|
736
741
|
"value": "1.25"
|
|
737
742
|
},
|
|
743
|
+
"motion": {
|
|
744
|
+
"type": "transition",
|
|
745
|
+
"var": "--nui-motion",
|
|
746
|
+
"value": "481ms linear(0, 0.007 1.25%, 0.027 2.49%, 0.062 3.95%, 0.109 5.41%, 0.213 8.11%, 0.569 16.42%, 0.677 19.33%, 0.763 22.04%, 0.836 24.74%, 0.898 27.65%, 0.946 30.56%, 0.981 33.47%, 1.004 36.17%, 1.02 39.09%, 1.034 45.95%, 1.003 74.64%, 1)"
|
|
747
|
+
},
|
|
748
|
+
"radius-scale": {
|
|
749
|
+
"type": "number",
|
|
750
|
+
"var": "--nui-radius-scale",
|
|
751
|
+
"value": "1"
|
|
752
|
+
},
|
|
738
753
|
"radius.full": {
|
|
739
754
|
"type": "dimension",
|
|
740
755
|
"var": "--nui-radius-full",
|
|
@@ -834,6 +849,36 @@
|
|
|
834
849
|
"type": "dimension",
|
|
835
850
|
"var": "--nui-space-8",
|
|
836
851
|
"value": "2rem"
|
|
852
|
+
},
|
|
853
|
+
"spring.bouncy": {
|
|
854
|
+
"type": "transition",
|
|
855
|
+
"var": "--nui-spring-bouncy",
|
|
856
|
+
"value": "889ms linear(0, 0.009 0.9%, 0.04 1.91%, 0.089 2.92%, 0.16 4.05%, 0.228 4.95%, 0.322 6.07%, 0.67 9.9%, 0.806 11.47%, 0.928 13.05%, 1.032 14.62%, 1.116 16.2%, 1.175 17.66%, 1.218 19.24%, 1.243 20.81%, 1.248 22.95%, 1.228 25.2%, 1.187 27.56%, 1.059 33.3%, 1.003 36.22%, 0.961 39.48%, 0.94 42.74%, 0.943 47.47%, 0.998 58.27%, 1.014 64.45%, 1.014 69.63%, 0.997 85.6%, 1)"
|
|
857
|
+
},
|
|
858
|
+
"spring.elastic": {
|
|
859
|
+
"type": "transition",
|
|
860
|
+
"var": "--nui-spring-elastic",
|
|
861
|
+
"value": "1656ms linear(0, 0.013 0.42%, 0.052 0.85%, 0.125 1.33%, 0.224 1.81%, 0.327 2.23%, 0.46 2.72%, 0.935 4.29%, 1.109 4.89%, 1.248 5.43%, 1.368 5.98%, 1.462 6.52%, 1.524 7%, 1.564 7.49%, 1.583 8.03%, 1.579 8.45%, 1.556 8.94%, 1.515 9.42%, 1.459 9.9%, 1.399 10.33%, 1.322 10.81%, 0.943 12.98%, 0.853 13.59%, 0.783 14.13%, 0.729 14.67%, 0.693 15.16%, 0.67 15.64%, 0.66 16.12%, 0.662 16.55%, 0.674 17.03%, 0.697 17.51%, 0.734 18.06%, 0.814 18.96%, 1.035 21.14%, 1.128 22.28%, 1.159 22.83%, 1.18 23.31%, 1.198 24.28%, 1.19 25.18%, 1.157 26.15%, 1.111 27.05%, 0.979 29.29%, 0.925 30.43%, 0.896 31.4%, 0.884 32.37%, 0.889 33.27%, 0.909 34.3%, 1.013 37.44%, 1.044 38.59%, 1.061 39.55%, 1.068 40.52%, 1.065 41.43%, 1.053 42.45%, 0.975 46.68%, 0.961 48.61%, 0.967 50.3%, 1.012 54.47%, 1.023 56.7%, 1.02 58.39%, 0.993 62.62%, 0.987 64.79%, 1.008 72.89%, 0.995 80.92%, 1.003 88.89%, 1)"
|
|
862
|
+
},
|
|
863
|
+
"spring.jelly": {
|
|
864
|
+
"type": "transition",
|
|
865
|
+
"var": "--nui-spring-jelly",
|
|
866
|
+
"value": "1845ms linear(0, 0.012 0.65%, 0.05 1.36%, 0.11 2.06%, 0.197 2.82%, 0.285 3.47%, 0.391 4.17%, 0.802 6.67%, 0.955 7.64%, 1.099 8.67%, 1.208 9.59%, 1.295 10.51%, 1.355 11.38%, 1.395 12.25%, 1.415 13.17%, 1.415 13.88%, 1.403 14.63%, 1.38 15.39%, 1.343 16.21%, 1.258 17.67%, 1.013 21.3%, 0.954 22.33%, 0.909 23.25%, 0.876 24.12%, 0.852 24.93%, 0.836 25.8%, 0.827 26.67%, 0.829 27.91%, 0.847 29.27%, 0.881 30.79%, 0.985 34.47%, 1.026 36.21%, 1.058 38.16%, 1.072 40.11%, 1.064 42.82%, 0.99 49.7%, 0.97 53.55%, 0.973 56.37%, 1.004 63.2%, 1.012 66.94%, 0.995 80.22%, 1)"
|
|
867
|
+
},
|
|
868
|
+
"spring.lazy": {
|
|
869
|
+
"type": "transition",
|
|
870
|
+
"var": "--nui-spring-lazy",
|
|
871
|
+
"value": "1671ms linear(0, 0.007 1.2%, 0.03 2.51%, 0.067 3.89%, 0.122 5.45%, 0.243 8.2%, 0.523 13.82%, 0.639 16.28%, 0.748 18.85%, 0.841 21.36%, 0.915 23.82%, 0.976 26.33%, 1.022 28.9%, 1.055 31.54%, 1.081 35.37%, 1.087 39.8%, 1.075 44.82%, 1.018 58.83%, 0.999 67.15%, 0.992 78.1%, 1)"
|
|
872
|
+
},
|
|
873
|
+
"spring.mechanical": {
|
|
874
|
+
"type": "transition",
|
|
875
|
+
"var": "--nui-spring-mechanical",
|
|
876
|
+
"value": "669ms linear(0, 0.017 1.64%, 0.072 3.74%, 0.143 5.68%, 0.341 10.61%, 0.442 13.3%, 0.541 16.29%, 0.626 19.28%, 0.7 22.42%, 0.765 25.86%, 0.819 29.45%, 0.863 33.33%, 0.902 37.82%, 0.932 42.75%, 0.955 48.43%, 0.972 55.01%, 0.992 71.3%, 1)"
|
|
877
|
+
},
|
|
878
|
+
"spring.snappy": {
|
|
879
|
+
"type": "transition",
|
|
880
|
+
"var": "--nui-spring-snappy",
|
|
881
|
+
"value": "481ms linear(0, 0.007 1.25%, 0.027 2.49%, 0.062 3.95%, 0.109 5.41%, 0.213 8.11%, 0.569 16.42%, 0.677 19.33%, 0.763 22.04%, 0.836 24.74%, 0.898 27.65%, 0.946 30.56%, 0.981 33.47%, 1.004 36.17%, 1.02 39.09%, 1.034 45.95%, 1.003 74.64%, 1)"
|
|
837
882
|
}
|
|
838
883
|
},
|
|
839
884
|
"dark": {
|
|
@@ -1457,6 +1502,11 @@
|
|
|
1457
1502
|
"var": "--nui-control-height-sm",
|
|
1458
1503
|
"value": "1.75rem"
|
|
1459
1504
|
},
|
|
1505
|
+
"density": {
|
|
1506
|
+
"type": "number",
|
|
1507
|
+
"var": "--nui-density",
|
|
1508
|
+
"value": "1"
|
|
1509
|
+
},
|
|
1460
1510
|
"duration.fast": {
|
|
1461
1511
|
"type": "duration",
|
|
1462
1512
|
"var": "--nui-duration-fast",
|
|
@@ -1572,6 +1622,16 @@
|
|
|
1572
1622
|
"var": "--nui-line-height-tight",
|
|
1573
1623
|
"value": "1.25"
|
|
1574
1624
|
},
|
|
1625
|
+
"motion": {
|
|
1626
|
+
"type": "transition",
|
|
1627
|
+
"var": "--nui-motion",
|
|
1628
|
+
"value": "481ms linear(0, 0.007 1.25%, 0.027 2.49%, 0.062 3.95%, 0.109 5.41%, 0.213 8.11%, 0.569 16.42%, 0.677 19.33%, 0.763 22.04%, 0.836 24.74%, 0.898 27.65%, 0.946 30.56%, 0.981 33.47%, 1.004 36.17%, 1.02 39.09%, 1.034 45.95%, 1.003 74.64%, 1)"
|
|
1629
|
+
},
|
|
1630
|
+
"radius-scale": {
|
|
1631
|
+
"type": "number",
|
|
1632
|
+
"var": "--nui-radius-scale",
|
|
1633
|
+
"value": "1"
|
|
1634
|
+
},
|
|
1575
1635
|
"radius.full": {
|
|
1576
1636
|
"type": "dimension",
|
|
1577
1637
|
"var": "--nui-radius-full",
|
|
@@ -1671,6 +1731,36 @@
|
|
|
1671
1731
|
"type": "dimension",
|
|
1672
1732
|
"var": "--nui-space-8",
|
|
1673
1733
|
"value": "2rem"
|
|
1734
|
+
},
|
|
1735
|
+
"spring.bouncy": {
|
|
1736
|
+
"type": "transition",
|
|
1737
|
+
"var": "--nui-spring-bouncy",
|
|
1738
|
+
"value": "889ms linear(0, 0.009 0.9%, 0.04 1.91%, 0.089 2.92%, 0.16 4.05%, 0.228 4.95%, 0.322 6.07%, 0.67 9.9%, 0.806 11.47%, 0.928 13.05%, 1.032 14.62%, 1.116 16.2%, 1.175 17.66%, 1.218 19.24%, 1.243 20.81%, 1.248 22.95%, 1.228 25.2%, 1.187 27.56%, 1.059 33.3%, 1.003 36.22%, 0.961 39.48%, 0.94 42.74%, 0.943 47.47%, 0.998 58.27%, 1.014 64.45%, 1.014 69.63%, 0.997 85.6%, 1)"
|
|
1739
|
+
},
|
|
1740
|
+
"spring.elastic": {
|
|
1741
|
+
"type": "transition",
|
|
1742
|
+
"var": "--nui-spring-elastic",
|
|
1743
|
+
"value": "1656ms linear(0, 0.013 0.42%, 0.052 0.85%, 0.125 1.33%, 0.224 1.81%, 0.327 2.23%, 0.46 2.72%, 0.935 4.29%, 1.109 4.89%, 1.248 5.43%, 1.368 5.98%, 1.462 6.52%, 1.524 7%, 1.564 7.49%, 1.583 8.03%, 1.579 8.45%, 1.556 8.94%, 1.515 9.42%, 1.459 9.9%, 1.399 10.33%, 1.322 10.81%, 0.943 12.98%, 0.853 13.59%, 0.783 14.13%, 0.729 14.67%, 0.693 15.16%, 0.67 15.64%, 0.66 16.12%, 0.662 16.55%, 0.674 17.03%, 0.697 17.51%, 0.734 18.06%, 0.814 18.96%, 1.035 21.14%, 1.128 22.28%, 1.159 22.83%, 1.18 23.31%, 1.198 24.28%, 1.19 25.18%, 1.157 26.15%, 1.111 27.05%, 0.979 29.29%, 0.925 30.43%, 0.896 31.4%, 0.884 32.37%, 0.889 33.27%, 0.909 34.3%, 1.013 37.44%, 1.044 38.59%, 1.061 39.55%, 1.068 40.52%, 1.065 41.43%, 1.053 42.45%, 0.975 46.68%, 0.961 48.61%, 0.967 50.3%, 1.012 54.47%, 1.023 56.7%, 1.02 58.39%, 0.993 62.62%, 0.987 64.79%, 1.008 72.89%, 0.995 80.92%, 1.003 88.89%, 1)"
|
|
1744
|
+
},
|
|
1745
|
+
"spring.jelly": {
|
|
1746
|
+
"type": "transition",
|
|
1747
|
+
"var": "--nui-spring-jelly",
|
|
1748
|
+
"value": "1845ms linear(0, 0.012 0.65%, 0.05 1.36%, 0.11 2.06%, 0.197 2.82%, 0.285 3.47%, 0.391 4.17%, 0.802 6.67%, 0.955 7.64%, 1.099 8.67%, 1.208 9.59%, 1.295 10.51%, 1.355 11.38%, 1.395 12.25%, 1.415 13.17%, 1.415 13.88%, 1.403 14.63%, 1.38 15.39%, 1.343 16.21%, 1.258 17.67%, 1.013 21.3%, 0.954 22.33%, 0.909 23.25%, 0.876 24.12%, 0.852 24.93%, 0.836 25.8%, 0.827 26.67%, 0.829 27.91%, 0.847 29.27%, 0.881 30.79%, 0.985 34.47%, 1.026 36.21%, 1.058 38.16%, 1.072 40.11%, 1.064 42.82%, 0.99 49.7%, 0.97 53.55%, 0.973 56.37%, 1.004 63.2%, 1.012 66.94%, 0.995 80.22%, 1)"
|
|
1749
|
+
},
|
|
1750
|
+
"spring.lazy": {
|
|
1751
|
+
"type": "transition",
|
|
1752
|
+
"var": "--nui-spring-lazy",
|
|
1753
|
+
"value": "1671ms linear(0, 0.007 1.2%, 0.03 2.51%, 0.067 3.89%, 0.122 5.45%, 0.243 8.2%, 0.523 13.82%, 0.639 16.28%, 0.748 18.85%, 0.841 21.36%, 0.915 23.82%, 0.976 26.33%, 1.022 28.9%, 1.055 31.54%, 1.081 35.37%, 1.087 39.8%, 1.075 44.82%, 1.018 58.83%, 0.999 67.15%, 0.992 78.1%, 1)"
|
|
1754
|
+
},
|
|
1755
|
+
"spring.mechanical": {
|
|
1756
|
+
"type": "transition",
|
|
1757
|
+
"var": "--nui-spring-mechanical",
|
|
1758
|
+
"value": "669ms linear(0, 0.017 1.64%, 0.072 3.74%, 0.143 5.68%, 0.341 10.61%, 0.442 13.3%, 0.541 16.29%, 0.626 19.28%, 0.7 22.42%, 0.765 25.86%, 0.819 29.45%, 0.863 33.33%, 0.902 37.82%, 0.932 42.75%, 0.955 48.43%, 0.972 55.01%, 0.992 71.3%, 1)"
|
|
1759
|
+
},
|
|
1760
|
+
"spring.snappy": {
|
|
1761
|
+
"type": "transition",
|
|
1762
|
+
"var": "--nui-spring-snappy",
|
|
1763
|
+
"value": "481ms linear(0, 0.007 1.25%, 0.027 2.49%, 0.062 3.95%, 0.109 5.41%, 0.213 8.11%, 0.569 16.42%, 0.677 19.33%, 0.763 22.04%, 0.836 24.74%, 0.898 27.65%, 0.946 30.56%, 0.981 33.47%, 1.004 36.17%, 1.02 39.09%, 1.034 45.95%, 1.003 74.64%, 1)"
|
|
1674
1764
|
}
|
|
1675
1765
|
}
|
|
1676
1766
|
}
|
package/package.json
CHANGED
|
@@ -39,5 +39,15 @@
|
|
|
39
39
|
"$type": "dimension",
|
|
40
40
|
"width": { "$value": { "value": 2, "unit": "px" } },
|
|
41
41
|
"offset": { "$value": { "value": 2, "unit": "px" } }
|
|
42
|
+
},
|
|
43
|
+
"radius-scale": {
|
|
44
|
+
"$type": "number",
|
|
45
|
+
"$value": 1,
|
|
46
|
+
"$description": "Multiplies every component radius. data-nui-radius sets it for a subtree: 0 (none), 0.5 (small), 2 (large) or 999 (full)."
|
|
47
|
+
},
|
|
48
|
+
"density": {
|
|
49
|
+
"$type": "number",
|
|
50
|
+
"$value": 1,
|
|
51
|
+
"$description": "Multiplies control heights, paddings and gaps. data-nui-density sets it for a subtree: 0.8 (compact) or 1.25 (roomy). Controls never shrink below the 24px target minimum."
|
|
42
52
|
}
|
|
43
53
|
}
|
package/src/motion.tokens.json
CHANGED
|
@@ -11,5 +11,62 @@
|
|
|
11
11
|
"standard": { "$value": [0.2, 0, 0, 1] },
|
|
12
12
|
"enter": { "$value": [0, 0, 0.2, 1] },
|
|
13
13
|
"exit": { "$value": [0.4, 0, 1, 1] }
|
|
14
|
+
},
|
|
15
|
+
"spring": {
|
|
16
|
+
"$type": "transition",
|
|
17
|
+
"$description": "Motion personalities. Each $value is the closest cubic-bezier, for other DTCG tools; the Needless UI compiler reads the physics in $extensions and emits the spring's settling time and exact curve, as linear(). Collapsed to near-zero when the user prefers reduced motion.",
|
|
18
|
+
"snappy": {
|
|
19
|
+
"$value": {
|
|
20
|
+
"duration": { "value": 290, "unit": "ms" },
|
|
21
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
22
|
+
"timingFunction": [0.25, 0.16, 0.24, 1.27]
|
|
23
|
+
},
|
|
24
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 420, "damping": 30, "mass": 1 } }
|
|
25
|
+
},
|
|
26
|
+
"bouncy": {
|
|
27
|
+
"$value": {
|
|
28
|
+
"duration": { "value": 490, "unit": "ms" },
|
|
29
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
30
|
+
"timingFunction": [0.62, 2.35, 0.21, 0.69]
|
|
31
|
+
},
|
|
32
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 300, "damping": 14, "mass": 1 } }
|
|
33
|
+
},
|
|
34
|
+
"jelly": {
|
|
35
|
+
"$value": {
|
|
36
|
+
"duration": { "value": 1080, "unit": "ms" },
|
|
37
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
38
|
+
"timingFunction": [0.37, 2.61, 0, 0.48]
|
|
39
|
+
},
|
|
40
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 170, "damping": 7, "mass": 1 } }
|
|
41
|
+
},
|
|
42
|
+
"elastic": {
|
|
43
|
+
"$value": {
|
|
44
|
+
"duration": { "value": 970, "unit": "ms" },
|
|
45
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
46
|
+
"timingFunction": [0.17, 2.33, 0, 0.54]
|
|
47
|
+
},
|
|
48
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 560, "damping": 8, "mass": 1 } }
|
|
49
|
+
},
|
|
50
|
+
"lazy": {
|
|
51
|
+
"$value": {
|
|
52
|
+
"duration": { "value": 980, "unit": "ms" },
|
|
53
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
54
|
+
"timingFunction": [0.29, 0.25, 0.22, 1.42]
|
|
55
|
+
},
|
|
56
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 60, "damping": 12, "mass": 1.6 } }
|
|
57
|
+
},
|
|
58
|
+
"mechanical": {
|
|
59
|
+
"$value": {
|
|
60
|
+
"duration": { "value": 400, "unit": "ms" },
|
|
61
|
+
"delay": { "value": 0, "unit": "ms" },
|
|
62
|
+
"timingFunction": [0.25, 0.25, 0.15, 0.89]
|
|
63
|
+
},
|
|
64
|
+
"$extensions": { "com.needlessui.spring": { "stiffness": 320, "damping": 40, "mass": 1 } }
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"motion": {
|
|
68
|
+
"$type": "transition",
|
|
69
|
+
"$value": "{spring.snappy}",
|
|
70
|
+
"$description": "The spring components move with: presses springing back, dialogs and menus arriving. data-nui-motion points it at another spring for a subtree."
|
|
14
71
|
}
|
|
15
72
|
}
|