@nsaa/tokens 0.0.0-stage → 0.1.0-alpha.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 +28 -0
- package/NOTICE +154 -0
- package/README.md +66 -2
- package/dist/contrast-report.md +1484 -0
- package/dist/figma-variables.json +4288 -0
- package/dist/motion.ts +180 -0
- package/dist/nsaa.css +2491 -0
- package/dist/shadcn-theme.json +90 -0
- package/dist/tokens.resolved.json +1351 -0
- package/package.json +31 -3
- package/src/color.json +850 -0
- package/src/effects.json +73 -0
- package/src/primitives-p3.json +686 -0
- package/src/primitives.json +688 -0
- package/src/shadcn.json +38 -0
- package/src/theme.json +70 -0
- package/src/type.json +208 -0
package/dist/motion.ts
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
// Nsaa motion tokens v0.1.0. Generated by packages/tokens/build.py. Use with the Motion library (motion/react).
|
|
2
|
+
|
|
3
|
+
export const spring = {
|
|
4
|
+
"settle": {
|
|
5
|
+
"type": "spring",
|
|
6
|
+
"stiffness": 200,
|
|
7
|
+
"damping": 28,
|
|
8
|
+
"mass": 1
|
|
9
|
+
},
|
|
10
|
+
"snap": {
|
|
11
|
+
"type": "spring",
|
|
12
|
+
"stiffness": 500,
|
|
13
|
+
"damping": 34,
|
|
14
|
+
"mass": 1
|
|
15
|
+
},
|
|
16
|
+
"caret": {
|
|
17
|
+
"type": "spring",
|
|
18
|
+
"stiffness": 500,
|
|
19
|
+
"damping": 40,
|
|
20
|
+
"mass": 1
|
|
21
|
+
},
|
|
22
|
+
"momentum": {
|
|
23
|
+
"type": "spring",
|
|
24
|
+
"duration": 0.4,
|
|
25
|
+
"bounce": 0.2
|
|
26
|
+
},
|
|
27
|
+
"sheet": {
|
|
28
|
+
"type": "spring",
|
|
29
|
+
"duration": 0.3,
|
|
30
|
+
"bounce": 0.2,
|
|
31
|
+
"$note": "Apple sheet: damping fraction 0.8 (#109)"
|
|
32
|
+
},
|
|
33
|
+
"icon": {
|
|
34
|
+
"type": "spring",
|
|
35
|
+
"duration": 0.3,
|
|
36
|
+
"bounce": 0
|
|
37
|
+
}
|
|
38
|
+
} as const;
|
|
39
|
+
export const ease = {
|
|
40
|
+
"out": "cubic-bezier(0.23, 1, 0.32, 1)",
|
|
41
|
+
"in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
|
|
42
|
+
"drawer": "cubic-bezier(0.32, 0.72, 0, 1)",
|
|
43
|
+
"crossfade": "cubic-bezier(0.26, 0.08, 0.25, 1)",
|
|
44
|
+
"icon": "cubic-bezier(0.2, 0, 0, 1)",
|
|
45
|
+
"hover": "ease",
|
|
46
|
+
"linear": "linear"
|
|
47
|
+
} as const;
|
|
48
|
+
export const duration = {
|
|
49
|
+
"instant": 0,
|
|
50
|
+
"press": 150,
|
|
51
|
+
"tooltip": 125,
|
|
52
|
+
"tooltip-exit": 100,
|
|
53
|
+
"exit": 100,
|
|
54
|
+
"char": 120,
|
|
55
|
+
"fast": 150,
|
|
56
|
+
"base": 200,
|
|
57
|
+
"slow": 250,
|
|
58
|
+
"drawer": 300,
|
|
59
|
+
"chunk": 300,
|
|
60
|
+
"marketing": 400,
|
|
61
|
+
"marketing-slow": 500,
|
|
62
|
+
"spin": 800,
|
|
63
|
+
"caret": 1250,
|
|
64
|
+
"feedback-hold": 1500
|
|
65
|
+
} as const; // ms
|
|
66
|
+
export const scale = {
|
|
67
|
+
"press": 0.97,
|
|
68
|
+
"enter": 0.95,
|
|
69
|
+
"icon-from": 0.25,
|
|
70
|
+
"check-from": 0.8,
|
|
71
|
+
"radio-from": 0.5,
|
|
72
|
+
"char-from": 0.9,
|
|
73
|
+
"held": 1.1
|
|
74
|
+
} as const;
|
|
75
|
+
export const distance = {
|
|
76
|
+
"chunk": 12,
|
|
77
|
+
"toast": "100%",
|
|
78
|
+
"shake": 4
|
|
79
|
+
} as const;
|
|
80
|
+
export const blur = {
|
|
81
|
+
"chunk": 4,
|
|
82
|
+
"crossfade": 2,
|
|
83
|
+
"icon": 4,
|
|
84
|
+
"max": 20
|
|
85
|
+
} as const;
|
|
86
|
+
export const stagger = {
|
|
87
|
+
"list": 50,
|
|
88
|
+
"list-min": 30,
|
|
89
|
+
"list-max": 80,
|
|
90
|
+
"chunk": 100
|
|
91
|
+
} as const;
|
|
92
|
+
export const gesture = {
|
|
93
|
+
"hysteresis": 10,
|
|
94
|
+
"dismiss-velocity": 0.11,
|
|
95
|
+
"rubber-band": 0.55,
|
|
96
|
+
"momentum-decay": 0.998,
|
|
97
|
+
"momentum-decay-snappy": 0.99
|
|
98
|
+
} as const;
|
|
99
|
+
export const loader = {
|
|
100
|
+
"$note": "Loaders (#113): defaults from loading.dev 0.3.6 SPINNER_MOTION (MIT, Jakub Krehel), pinned 755235b. Size scale matches icon sizes; delay and minimum display stop flashes. Text loaders (shimmer-text \u2026 terminal): Loading UI (MIT, Bartosz Zagrodzki) defaults, pinned d78e09e.",
|
|
101
|
+
"size": {
|
|
102
|
+
"xs": 12,
|
|
103
|
+
"sm": 14,
|
|
104
|
+
"md": 16,
|
|
105
|
+
"lg": 20,
|
|
106
|
+
"xl": 24
|
|
107
|
+
},
|
|
108
|
+
"delay": 150,
|
|
109
|
+
"min-display": 500,
|
|
110
|
+
"duration": {
|
|
111
|
+
"arc": 800,
|
|
112
|
+
"atom": 1000,
|
|
113
|
+
"blocks": 1300,
|
|
114
|
+
"bouncing-dots": 500,
|
|
115
|
+
"cascade": 1500,
|
|
116
|
+
"circular-dots": 800,
|
|
117
|
+
"classic": 1200,
|
|
118
|
+
"classic-v2": 800,
|
|
119
|
+
"clock": 1200,
|
|
120
|
+
"comet": 700,
|
|
121
|
+
"compass": 500,
|
|
122
|
+
"dual": 1000,
|
|
123
|
+
"eclipse": 1200,
|
|
124
|
+
"flip": 1200,
|
|
125
|
+
"gather": 1600,
|
|
126
|
+
"leap": 1800,
|
|
127
|
+
"linear-dots": 900,
|
|
128
|
+
"loading": 1000,
|
|
129
|
+
"morph": 1200,
|
|
130
|
+
"orbit": 750,
|
|
131
|
+
"pulse": 1200,
|
|
132
|
+
"radar": 1500,
|
|
133
|
+
"ring": 800,
|
|
134
|
+
"ripple": 1200,
|
|
135
|
+
"slide": 2400,
|
|
136
|
+
"snake": 1400,
|
|
137
|
+
"swirl": 1200,
|
|
138
|
+
"trace": 1200,
|
|
139
|
+
"wave": 900,
|
|
140
|
+
"shimmer-text": 2000,
|
|
141
|
+
"shimmer-wave": 1000,
|
|
142
|
+
"text-dots": 1400,
|
|
143
|
+
"typing": 1000,
|
|
144
|
+
"analyzing-image": 2500,
|
|
145
|
+
"terminal": 1000
|
|
146
|
+
}
|
|
147
|
+
} as const;
|
|
148
|
+
|
|
149
|
+
/** Family-style drawer: content crossfade duration in seconds for a height change. */
|
|
150
|
+
export const drawerCrossfade = (deltaPx: number): number => Math.min(Math.max(Math.abs(deltaPx) / 500, 0.15), 0.27);
|
|
151
|
+
|
|
152
|
+
/** Apple-style momentum projection: where a flick would come to rest. */
|
|
153
|
+
export const project = (velocityPxPerSec: number, decay = 0.998): number => (velocityPxPerSec / 1000) * decay / (1 - decay);
|
|
154
|
+
|
|
155
|
+
/** Rubber-band resistance past an edge. */
|
|
156
|
+
export const rubberBand = (overshoot: number, dimension: number, k = 0.55): number => (overshoot * dimension * k) / (dimension + k * Math.abs(overshoot));
|
|
157
|
+
|
|
158
|
+
export const sound = {
|
|
159
|
+
"$note": "On by default (decision #30): plays only after a user action, never on load; quiet; one remembered global mute; silent under prefers-reduced-motion; apps can turn the default off. Cue values are UISFX 0.4.0 cue names (MIT code, CC0 audio), checked against its CUES export; feel is a UISFX pack name (decision #57).",
|
|
160
|
+
"enabled": true,
|
|
161
|
+
"volume": 0.35,
|
|
162
|
+
"feel": "zen",
|
|
163
|
+
"library": "uisfx",
|
|
164
|
+
"libraryVersion": "0.4.0",
|
|
165
|
+
"cue": {
|
|
166
|
+
"input.press": "press",
|
|
167
|
+
"input.toggle-on": "toggle-on",
|
|
168
|
+
"input.toggle-off": "toggle-off",
|
|
169
|
+
"selection.select": "select",
|
|
170
|
+
"navigation.open": "open",
|
|
171
|
+
"navigation.close": "close",
|
|
172
|
+
"movement.snap": "snap",
|
|
173
|
+
"movement.drop": "drop",
|
|
174
|
+
"feedback.success": "success",
|
|
175
|
+
"feedback.warning": "warning",
|
|
176
|
+
"feedback.error": "error",
|
|
177
|
+
"commerce.payment": "purchase",
|
|
178
|
+
"progress.loop": "loading"
|
|
179
|
+
}
|
|
180
|
+
} as const;
|