@duro-app/tokens 5.1.0 → 5.3.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/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +91 -32
- package/dist/index.js.map +1 -1
- package/dist/keys.d.ts +55 -2
- package/dist/keys.d.ts.map +1 -1
- package/dist/mockup.css +75 -0
- package/dist/raw.d.ts +52 -0
- package/dist/raw.d.ts.map +1 -1
- package/dist/raw.js +82 -14
- package/dist/raw.js.map +1 -1
- package/dist/themes/high-contrast.css.d.ts +10 -0
- package/dist/themes/high-contrast.css.d.ts.map +1 -1
- package/dist/themes/light.css.d.ts +10 -0
- package/dist/themes/light.css.d.ts.map +1 -1
- package/dist/tokens/colors.css.d.ts +8 -0
- package/dist/tokens/colors.css.d.ts.map +1 -1
- package/dist/tokens/effects.css.d.ts +5 -0
- package/dist/tokens/effects.css.d.ts.map +1 -0
- package/dist/tokens/layers.css.d.ts +13 -0
- package/dist/tokens/layers.css.d.ts.map +1 -0
- package/dist/tokens/shadows.css.d.ts +2 -0
- package/dist/tokens/shadows.css.d.ts.map +1 -1
- package/dist/tokens/sizes.css.d.ts +33 -0
- package/dist/tokens/sizes.css.d.ts.map +1 -1
- package/dist/vars.css +55 -0
- package/package.json +3 -1
- package/src/index.ts +2 -0
- package/src/keys.ts +104 -1
- package/src/raw.ts +77 -0
- package/src/themes/high-contrast.css.ts +17 -0
- package/src/themes/light.css.ts +17 -0
- package/src/tokens/colors.css.ts +15 -0
- package/src/tokens/effects.css.ts +12 -0
- package/src/tokens/layers.css.ts +39 -0
- package/src/tokens/shadows.css.ts +6 -0
- package/src/tokens/sizes.css.ts +34 -0
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,8 @@ export { colors } from './tokens/colors.css';
|
|
|
3
3
|
export { spacing, microSpacing, radii } from './tokens/spacing.css';
|
|
4
4
|
export { sizes } from './tokens/sizes.css';
|
|
5
5
|
export { borders } from './tokens/borders.css';
|
|
6
|
+
export { layers } from './tokens/layers.css';
|
|
7
|
+
export { effects } from './tokens/effects.css';
|
|
6
8
|
export { layoutSpacing } from './tokens/layout-spacing.css';
|
|
7
9
|
export { typography, typeScale } from './tokens/typography.css';
|
|
8
10
|
export { typePresets } from './tokens/type-presets.css';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACjE,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAA;AACxC,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACjE,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAA;AACxC,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -4,13 +4,13 @@ const e = {
|
|
|
4
4
|
md: "768px",
|
|
5
5
|
lg: "1024px",
|
|
6
6
|
xl: "1280px"
|
|
7
|
-
},
|
|
7
|
+
}, r = {
|
|
8
8
|
xs: 480,
|
|
9
9
|
sm: 640,
|
|
10
10
|
md: 768,
|
|
11
11
|
lg: 1024,
|
|
12
12
|
xl: 1280
|
|
13
|
-
},
|
|
13
|
+
}, t = {
|
|
14
14
|
bg: "var(--bg-xqkwqtp)",
|
|
15
15
|
bgCard: "var(--bgCard-xj2l5r)",
|
|
16
16
|
bgCardHover: "var(--bgCardHover-xlxk7vw)",
|
|
@@ -38,14 +38,22 @@ const e = {
|
|
|
38
38
|
infoBg: "var(--infoBg-xho8jir)",
|
|
39
39
|
infoBorder: "var(--infoBorder-xnevk3x)",
|
|
40
40
|
infoText: "var(--infoText-x19pseus)",
|
|
41
|
+
highlight: "var(--highlight-x14yvf5c)",
|
|
42
|
+
highlightBg: "var(--highlightBg-x5qhmj2)",
|
|
43
|
+
highlightBorder: "var(--highlightBorder-xd7ycfq)",
|
|
44
|
+
highlightText: "var(--highlightText-x1lyse6a)",
|
|
41
45
|
scrim: "var(--scrim-x2ypej7)",
|
|
42
46
|
inverseFill: "var(--inverseFill-x1il694p)",
|
|
43
47
|
inverseFillHover: "var(--inverseFillHover-xmxqxj9)",
|
|
44
48
|
inverseBorder: "var(--inverseBorder-x1x0j0at)",
|
|
45
49
|
inverseBorderHover: "var(--inverseBorderHover-x12x46ev)",
|
|
46
50
|
fixedLight: "var(--fixedLight-xd608fw)",
|
|
51
|
+
overlayLight: "var(--overlayLight-x71omwc)",
|
|
52
|
+
contrastSurface: "var(--contrastSurface-x1i512m4)",
|
|
53
|
+
onContrastSurface: "var(--onContrastSurface-x1dm0pi1)",
|
|
54
|
+
contrastBorder: "var(--contrastBorder-x1g9he7g)",
|
|
47
55
|
__varGroupHash__: "xjvd03b"
|
|
48
|
-
},
|
|
56
|
+
}, a = {
|
|
49
57
|
xs: "var(--xs-xxfyjsd)",
|
|
50
58
|
sm: "var(--sm-xbh8y7f)",
|
|
51
59
|
ms: "var(--ms-x13y09zs)",
|
|
@@ -62,7 +70,7 @@ const e = {
|
|
|
62
70
|
px5: "var(--px5-xrmlnev)",
|
|
63
71
|
px6: "var(--px6-x1h3gnvl)",
|
|
64
72
|
__varGroupHash__: "xufyenp"
|
|
65
|
-
},
|
|
73
|
+
}, n = {
|
|
66
74
|
xs: "var(--xs-x1gb5bcy)",
|
|
67
75
|
px6: "var(--px6-xgv4348)",
|
|
68
76
|
sm: "var(--sm-x1bhtfs5)",
|
|
@@ -119,6 +127,39 @@ const e = {
|
|
|
119
127
|
pageSm: "var(--pageSm-x5j4ghi)",
|
|
120
128
|
pageMd: "var(--pageMd-xloo57l)",
|
|
121
129
|
pageLg: "var(--pageLg-x393fnm)",
|
|
130
|
+
sidebarW: "var(--sidebarW-x16fh60r)",
|
|
131
|
+
pageXs: "var(--pageXs-xkx7b2k)",
|
|
132
|
+
pageXl: "var(--pageXl-xe1y5wy)",
|
|
133
|
+
asideW: "var(--asideW-x1sefzvd)",
|
|
134
|
+
gridColXs: "var(--gridColXs-x1uralsc)",
|
|
135
|
+
fieldMinWSm: "var(--fieldMinWSm-x17qqf6g)",
|
|
136
|
+
fieldMinW: "var(--fieldMinW-x3410dk)",
|
|
137
|
+
popoverWSm: "var(--popoverWSm-x17g62mi)",
|
|
138
|
+
popoverW: "var(--popoverW-xf1f07)",
|
|
139
|
+
popupMaxW: "var(--popupMaxW-x16p43ce)",
|
|
140
|
+
meterH: "var(--meterH-x5xauib)",
|
|
141
|
+
skeletonChipW: "var(--skeletonChipW-xmw24hn)",
|
|
142
|
+
dropZoneMinH: "var(--dropZoneMinH-x9asgie)",
|
|
143
|
+
canvasMinH: "var(--canvasMinH-xpv99dk)",
|
|
144
|
+
editorMinH: "var(--editorMinH-x7umtuv)",
|
|
145
|
+
toolbarH: "var(--toolbarH-x16tj5lc)",
|
|
146
|
+
embedW: "var(--embedW-x1jprk4i)",
|
|
147
|
+
colorPickerW: "var(--colorPickerW-xafjozf)",
|
|
148
|
+
colorAreaH: "var(--colorAreaH-xn4he4)",
|
|
149
|
+
colorTrackH: "var(--colorTrackH-x1ixtmdy)",
|
|
150
|
+
colorSwatch: "var(--colorSwatch-xr73m8p)",
|
|
151
|
+
colorPreviewH: "var(--colorPreviewH-x1by70nu)",
|
|
152
|
+
handle: "var(--handle-xt9m584)",
|
|
153
|
+
chip: "var(--chip-xofdvjg)",
|
|
154
|
+
placeholderMinH: "var(--placeholderMinH-xy0p02w)",
|
|
155
|
+
previewMaxH: "var(--previewMaxH-x1phh3ob)",
|
|
156
|
+
barH: "var(--barH-x1oc8exn)",
|
|
157
|
+
readoutW: "var(--readoutW-xi5rn1i)",
|
|
158
|
+
sliderW: "var(--sliderW-xvcfp7i)",
|
|
159
|
+
paletteMinW: "var(--paletteMinW-x1514e6j)",
|
|
160
|
+
deviceBarW: "var(--deviceBarW-xqnx4o4)",
|
|
161
|
+
timeGutterW: "var(--timeGutterW-xsc6tna)",
|
|
162
|
+
dayHeaderH: "var(--dayHeaderH-x1j7gty0)",
|
|
122
163
|
__varGroupHash__: "x1w57kmz"
|
|
123
164
|
}, x = {
|
|
124
165
|
hairline: "var(--hairline-xomm6fc)",
|
|
@@ -129,6 +170,20 @@ const e = {
|
|
|
129
170
|
focusOffsetSm: "var(--focusOffsetSm-x1xhasg3)",
|
|
130
171
|
__varGroupHash__: "xqyt3or"
|
|
131
172
|
}, s = {
|
|
173
|
+
raised: "var(--raised-xnqqeg)",
|
|
174
|
+
floating: "var(--floating-x1bmxuyp)",
|
|
175
|
+
overlay: "var(--overlay-x1pg5hea)",
|
|
176
|
+
modal: "var(--modal-x10p0ok)",
|
|
177
|
+
popover: "var(--popover-x13dty8z)",
|
|
178
|
+
popupBackdrop: "var(--popupBackdrop-x17sujb4)",
|
|
179
|
+
popup: "var(--popup-xgi3yzv)",
|
|
180
|
+
toast: "var(--toast-xt0zgmc)",
|
|
181
|
+
portal: "var(--portal-xmizwb3)",
|
|
182
|
+
__varGroupHash__: "x1xauakj"
|
|
183
|
+
}, v = {
|
|
184
|
+
overlayBlur: "var(--overlayBlur-x1i07nq9)",
|
|
185
|
+
__varGroupHash__: "x69o29g"
|
|
186
|
+
}, l = {
|
|
132
187
|
stackXs: "var(--stackXs-x1qfrfo2)",
|
|
133
188
|
stackSm: "var(--stackSm-x2rk1ut)",
|
|
134
189
|
stackMd: "var(--stackMd-xhblkt4)",
|
|
@@ -142,7 +197,7 @@ const e = {
|
|
|
142
197
|
containerMd: "var(--containerMd-x170dvin)",
|
|
143
198
|
containerLg: "var(--containerLg-x1n6aasq)",
|
|
144
199
|
__varGroupHash__: "x16nfoyr"
|
|
145
|
-
},
|
|
200
|
+
}, c = {
|
|
146
201
|
fontFamily: "var(--fontFamily-xvrmnat)",
|
|
147
202
|
fontFamilyMono: "var(--fontFamilyMono-x1bzqfky)",
|
|
148
203
|
fontSizeXs: "var(--fontSizeXs-x1w5m325)",
|
|
@@ -157,7 +212,7 @@ const e = {
|
|
|
157
212
|
fontWeightBold: "var(--fontWeightBold-x1pjkvwg)",
|
|
158
213
|
lineHeight: "var(--lineHeight-x1gubzd5)",
|
|
159
214
|
__varGroupHash__: "xs62swl"
|
|
160
|
-
},
|
|
215
|
+
}, g = {
|
|
161
216
|
fontSize1: "var(--fontSize1-xx27tux)",
|
|
162
217
|
fontSize2: "var(--fontSize2-x5hag8h)",
|
|
163
218
|
fontSize3: "var(--fontSize3-x1mf6j39)",
|
|
@@ -183,7 +238,7 @@ const e = {
|
|
|
183
238
|
letterSpacingNormal: "var(--letterSpacingNormal-x1ih41v1)",
|
|
184
239
|
letterSpacingWide: "var(--letterSpacingWide-xt8z9rj)",
|
|
185
240
|
__varGroupHash__: "x4cj49w"
|
|
186
|
-
},
|
|
241
|
+
}, p = {
|
|
187
242
|
bodySm: {
|
|
188
243
|
"fontFamily-kMv6JI": "fontFamily-xce2pww",
|
|
189
244
|
"fontSize-kGuDYH": "fontSize-x1hn3ytp",
|
|
@@ -297,12 +352,14 @@ const e = {
|
|
|
297
352
|
"letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
|
|
298
353
|
$$css: "tokens/type-presets.css.ts:104"
|
|
299
354
|
}
|
|
300
|
-
},
|
|
355
|
+
}, h = {
|
|
301
356
|
sm: "var(--sm-x17hhtln)",
|
|
302
357
|
md: "var(--md-x1oyt0aw)",
|
|
303
358
|
lg: "var(--lg-x1mxd62i)",
|
|
359
|
+
dropReady: "var(--dropReady-x19ev27m)",
|
|
360
|
+
dropOver: "var(--dropOver-x1w3k9ro)",
|
|
304
361
|
__varGroupHash__: "x13v825q"
|
|
305
|
-
},
|
|
362
|
+
}, f = {
|
|
306
363
|
instant: "var(--instant-x3tclo2)",
|
|
307
364
|
minimal: "var(--minimal-x39oeki)",
|
|
308
365
|
quick: "var(--quick-xmb6uht)",
|
|
@@ -311,44 +368,46 @@ const e = {
|
|
|
311
368
|
base: "var(--base-x13vs74m)",
|
|
312
369
|
slow: "var(--slow-xtti36c)",
|
|
313
370
|
__varGroupHash__: "x8wiu4o"
|
|
314
|
-
},
|
|
371
|
+
}, d = {
|
|
315
372
|
standard: "var(--standard-xg4ngex)",
|
|
316
373
|
linear: "var(--linear-x13iskbu)",
|
|
317
374
|
easeOut: "var(--easeOut-x1dtgzac)",
|
|
318
375
|
easeIn: "var(--easeIn-xxaysck)",
|
|
319
376
|
__varGroupHash__: "x1unb8zz"
|
|
320
|
-
}, h = {
|
|
321
|
-
xjvd03b: "x199coxg xjvd03b",
|
|
322
|
-
$$css: !0
|
|
323
377
|
}, k = {
|
|
324
|
-
|
|
378
|
+
xjvd03b: "x27mww3 xjvd03b",
|
|
325
379
|
$$css: !0
|
|
326
380
|
}, S = {
|
|
327
|
-
|
|
381
|
+
x13v825q: "x1jk1o70 x13v825q",
|
|
328
382
|
$$css: !0
|
|
329
|
-
},
|
|
330
|
-
|
|
383
|
+
}, m = {
|
|
384
|
+
xjvd03b: "x1kpt2hd xjvd03b",
|
|
385
|
+
$$css: !0
|
|
386
|
+
}, y = {
|
|
387
|
+
x13v825q: "xc8o4hb x13v825q",
|
|
331
388
|
$$css: !0
|
|
332
389
|
};
|
|
333
390
|
export {
|
|
334
391
|
x as borders,
|
|
335
392
|
e as breakpoints,
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
393
|
+
r as breakpointsPx,
|
|
394
|
+
t as colors,
|
|
395
|
+
f as duration,
|
|
396
|
+
d as easing,
|
|
397
|
+
v as effects,
|
|
398
|
+
y as highContrastShadows,
|
|
399
|
+
m as highContrastTheme,
|
|
400
|
+
s as layers,
|
|
401
|
+
l as layoutSpacing,
|
|
402
|
+
S as lightShadows,
|
|
403
|
+
k as lightTheme,
|
|
345
404
|
i as microSpacing,
|
|
346
|
-
|
|
347
|
-
|
|
405
|
+
n as radii,
|
|
406
|
+
h as shadows,
|
|
348
407
|
o as sizes,
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
408
|
+
a as spacing,
|
|
409
|
+
p as typePresets,
|
|
410
|
+
g as typeScale,
|
|
411
|
+
c as typography
|
|
353
412
|
};
|
|
354
413
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n /** Phones — dense tables card up below here. */\n xs: '480px',\n /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n sm: '640px',\n /** Tablet portrait. */\n md: '768px',\n /** Tablet landscape / small laptop. */\n lg: '1024px',\n /** Desktop. */\n xl: '1280px',\n})\n\nexport const breakpointsPx = {\n xs: 480,\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n // Backgrounds\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n\n // Text\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n\n // Accent\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n\n // Border\n border: '#333333',\n\n // Semantic — Error\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.1)',\n errorBorder: 'rgba(248, 113, 113, 0.3)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n\n // Semantic — Success\n success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n\n // Semantic — Warning\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n\n // Semantic — Info (uses accent)\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\n\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n px1: '1px',\n px2: '2px',\n px3: '3px',\n px5: '5px',\n px6: '6px',\n})\n\nexport const radii = css.defineVars({\n xs: '4px',\n px6: '6px',\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n touchTarget: '44px',\n controlSm: '28px',\n controlMd: '39px',\n controlLg: '40px',\n indicator: '18px',\n indicatorDot: '8px',\n checkMarkW: '5px',\n checkMarkH: '9px',\n switchTrackW: '36px',\n switchTrackH: '20px',\n switchThumb: '16px',\n iconButton: '32px',\n iconButtonSm: '28px',\n spinnerSm: '16px',\n spinnerMd: '24px',\n spinnerLg: '40px',\n glyphXs: '10px',\n glyphSm: '12px',\n glyphMd: '16px',\n iconSm: '16px',\n iconMd: '18px',\n iconLg: '24px',\n iconXl: '36px',\n iconXxl: '48px',\n navMarkerW: '3px',\n navMarkerH: '18px',\n divider: '1px',\n tabIndicator: '2px',\n edgeFade: '32px',\n scrollbar: '8px',\n swatchW: '44px',\n swatchH: '34px',\n labelMinW: '120px',\n popupMinW: '160px',\n listMaxH: '280px',\n listMaxHSm: '200px',\n dialogSm: '400px',\n dialogMd: '520px',\n dialogLg: '680px',\n panelSm: '360px',\n panelMd: '480px',\n panelLg: '640px',\n toastMaxW: '440px',\n gridColSm: '240px',\n gridColMd: '280px',\n pageSm: '600px',\n pageMd: '800px',\n pageLg: '1200px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n hairline: '1px',\n strong: '2px',\n accent: '3px',\n focusRing: '2px',\n focusOffset: '2px',\n focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n // Vertical rhythm (stack gaps)\n stackXs: '4px',\n stackSm: '8px',\n stackMd: '16px',\n stackLg: '24px',\n stackXl: '48px',\n\n // Horizontal rhythm (inline gaps)\n inlineXs: '4px',\n inlineSm: '8px',\n inlineMd: '16px',\n inlineLg: '24px',\n\n // Container insets\n containerSm: '16px',\n containerMd: '24px',\n containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n fontSizeXs: '0.75rem',\n fontSizeSm: '0.875rem',\n fontSizeMd: '1rem',\n fontSizeLg: '1.125rem',\n fontSizeXl: '1.25rem',\n fontSizeHeading: '1.5rem',\n fontWeightNormal: '400',\n fontWeightMedium: '500',\n fontWeightSemibold: '600',\n fontWeightBold: '700',\n lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n // 9-step font size scale\n fontSize1: '0.75rem', // 12px — captions, badges\n fontSize2: '0.8125rem', // 13px — small UI\n fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n fontSize4: '1rem', // 16px — body text\n fontSize5: '1.125rem', // 18px — body-lg\n fontSize6: '1.25rem', // 20px — subheading\n fontSize7: '1.5rem', // 24px — heading-sm\n fontSize8: '1.875rem', // 30px — heading-md\n fontSize9: '2.25rem', // 36px — heading-lg\n\n // Matched line-heights\n lineHeight1: '1rem', // 16px\n lineHeight2: '1.25rem', // 20px\n lineHeight3: '1.25rem', // 20px\n lineHeight4: '1.5rem', // 24px\n lineHeight5: '1.5rem', // 24px\n lineHeight6: '1.75rem', // 28px\n lineHeight7: '2rem', // 32px\n lineHeight8: '2.25rem', // 36px\n lineHeight9: '2.75rem', // 44px\n\n // Fluid display sizes\n displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n // Letter-spacing\n letterSpacingTight: '-0.02em',\n letterSpacingNormal: '0',\n letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n // Body\n bodySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize4,\n lineHeight: typeScale.lineHeight4,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize5,\n lineHeight: typeScale.lineHeight5,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n\n // UI\n caption: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingWide,\n },\n label: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightMedium,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n code: {\n fontFamily: typography.fontFamilyMono,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n overline: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingWide,\n textTransform: 'uppercase' as const,\n },\n\n // Heading\n headingSm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize6,\n lineHeight: typeScale.lineHeight6,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize7,\n lineHeight: typeScale.lineHeight7,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize8,\n lineHeight: typeScale.lineHeight8,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingXl: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize9,\n lineHeight: typeScale.lineHeight9,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n\n // Display (fluid)\n displaySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displaySm,\n lineHeight: 1.2,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayMd,\n lineHeight: 1.15,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayLg,\n lineHeight: 1.1,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n * spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n * enter (DetailPanel). `instant` is for explicit no-motion.\n * `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n * two other values components used; `minimal` is the 1ms reduced-motion\n * duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n * `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n * `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n instant: '0ms',\n // Non-zero so animationend still fires under reduced motion.\n minimal: '1ms',\n quick: '120ms',\n fast: '150ms',\n brisk: '160ms',\n base: '200ms',\n slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n standard: 'ease',\n linear: 'linear',\n easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n bg: '#ffffff',\n bgCard: '#f5f5f5',\n bgCardHover: '#ebebeb',\n text: '#1a1a1a',\n textMuted: '#4a4a4a',\n accent: '#1e40af',\n accentHover: '#1a3799',\n accentContrast: '#ffffff',\n border: '#d4d4d4',\n error: '#991b1b',\n errorHover: '#7f1d1d',\n errorBg: 'rgba(153, 27, 27, 0.08)',\n errorBorder: 'rgba(153, 27, 27, 0.3)',\n errorText: '#7f1d1d',\n errorContrast: '#ffffff',\n success: '#166534',\n successBg: 'rgba(22, 101, 52, 0.08)',\n successBorder: 'rgba(22, 101, 52, 0.3)',\n successText: '#14532d',\n warning: '#92400e',\n warningBg: 'rgba(146, 64, 14, 0.08)',\n warningBorder: 'rgba(146, 64, 14, 0.3)',\n warningText: '#78350f',\n info: '#1e40af',\n infoBg: 'rgba(30, 64, 175, 0.08)',\n infoBorder: 'rgba(30, 64, 175, 0.3)',\n infoText: '#1e40af',\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n bg: '#000000',\n bgCard: '#111111',\n bgCardHover: '#1a1a1a',\n text: '#ffffff',\n textMuted: '#b0b0b0',\n accent: '#60a5fa',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#555555',\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.15)',\n errorBorder: 'rgba(248, 113, 113, 0.5)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n success: '#4ade80',\n successBg: 'rgba(74, 222, 128, 0.15)',\n successBorder: 'rgba(74, 222, 128, 0.5)',\n successText: '#86efac',\n warning: '#fcd34d',\n warningBg: 'rgba(252, 211, 77, 0.15)',\n warningBorder: 'rgba(252, 211, 77, 0.5)',\n warningText: '#fef08a',\n info: '#60a5fa',\n infoBg: 'rgba(96, 165, 250, 0.15)',\n infoBorder: 'rgba(96, 165, 250, 0.5)',\n infoText: '#bfdbfe',\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layers.css.ts","../src/tokens/effects.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n /** Phones — dense tables card up below here. */\n xs: '480px',\n /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n sm: '640px',\n /** Tablet portrait. */\n md: '768px',\n /** Tablet landscape / small laptop. */\n lg: '1024px',\n /** Desktop. */\n xl: '1280px',\n})\n\nexport const breakpointsPx = {\n xs: 480,\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n // Backgrounds\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n\n // Text\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n\n // Accent\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n\n // Border\n border: '#333333',\n\n // Semantic — Error\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.1)',\n errorBorder: 'rgba(248, 113, 113, 0.3)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n\n // Semantic — Success\n success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n\n // Semantic — Warning\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n\n // Semantic — Info (uses accent)\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\n\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#c084fc',\n highlightBg: 'rgba(192, 132, 252, 0.1)',\n highlightBorder: 'rgba(192, 132, 252, 0.3)',\n highlightText: '#d8b4fe',\n\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n px1: '1px',\n px2: '2px',\n px3: '3px',\n px5: '5px',\n px6: '6px',\n})\n\nexport const radii = css.defineVars({\n xs: '4px',\n px6: '6px',\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n touchTarget: '44px',\n controlSm: '28px',\n controlMd: '39px',\n controlLg: '40px',\n indicator: '18px',\n indicatorDot: '8px',\n checkMarkW: '5px',\n checkMarkH: '9px',\n switchTrackW: '36px',\n switchTrackH: '20px',\n switchThumb: '16px',\n iconButton: '32px',\n iconButtonSm: '28px',\n spinnerSm: '16px',\n spinnerMd: '24px',\n spinnerLg: '40px',\n glyphXs: '10px',\n glyphSm: '12px',\n glyphMd: '16px',\n iconSm: '16px',\n iconMd: '18px',\n iconLg: '24px',\n iconXl: '36px',\n iconXxl: '48px',\n navMarkerW: '3px',\n navMarkerH: '18px',\n divider: '1px',\n tabIndicator: '2px',\n edgeFade: '32px',\n scrollbar: '8px',\n swatchW: '44px',\n swatchH: '34px',\n labelMinW: '120px',\n popupMinW: '160px',\n listMaxH: '280px',\n listMaxHSm: '200px',\n dialogSm: '400px',\n dialogMd: '520px',\n dialogLg: '680px',\n panelSm: '360px',\n panelMd: '480px',\n panelLg: '640px',\n toastMaxW: '440px',\n gridColSm: '240px',\n gridColMd: '280px',\n pageSm: '600px',\n pageMd: '800px',\n pageLg: '1200px',\n sidebarW: '240px',\n pageXs: '480px',\n pageXl: '1440px',\n asideW: '320px',\n gridColXs: '200px',\n fieldMinWSm: '80px',\n fieldMinW: '160px',\n popoverWSm: '240px',\n popoverW: '320px',\n popupMaxW: '280px',\n meterH: '6px',\n skeletonChipW: '96px',\n dropZoneMinH: '128px',\n canvasMinH: '480px',\n editorMinH: '160px',\n toolbarH: '36px',\n embedW: '550px',\n colorPickerW: '196px',\n colorAreaH: '150px',\n colorTrackH: '12px',\n colorSwatch: '20px',\n colorPreviewH: '22px',\n handle: '16px',\n chip: '24px',\n placeholderMinH: '80px',\n previewMaxH: '320px',\n barH: '4px',\n readoutW: '40px',\n sliderW: '96px',\n paletteMinW: '96px',\n deviceBarW: '96px',\n // Calendar grids: the time-label column and the day-header row.\n timeGutterW: '64px',\n dayHeaderH: '46px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n hairline: '1px',\n strong: '2px',\n accent: '3px',\n focusRing: '2px',\n focusOffset: '2px',\n focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n // A focused or sticky part above its siblings (a joined group's focus ring,\n // a scrollbar, a sticky table header).\n raised: '1',\n // Floating chrome over the page: Tooltip, ActionBar.\n floating: '50',\n // A modal's backdrop.\n overlay: '1000',\n // A modal's panel (Dialog, Drawer).\n modal: '1001',\n // A Popover inside a Dialog or Drawer: above that modal, below the popups\n // (a Select, a Menu) and the Select click-catcher opened from inside it.\n // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n popover: '1040',\n // A popup's click-catcher, under the popup itself.\n popupBackdrop: '1049',\n // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n popup: '1050',\n // The toast region: above popups and modals.\n toast: '1060',\n // The ThemeProvider portal mount that holds all of the above.\n portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\nexport const effects = css.defineVars({\n overlayBlur: 'blur(2px)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n // Vertical rhythm (stack gaps)\n stackXs: '4px',\n stackSm: '8px',\n stackMd: '16px',\n stackLg: '24px',\n stackXl: '48px',\n\n // Horizontal rhythm (inline gaps)\n inlineXs: '4px',\n inlineSm: '8px',\n inlineMd: '16px',\n inlineLg: '24px',\n\n // Container insets\n containerSm: '16px',\n containerMd: '24px',\n containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n fontFamily:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n fontSizeXs: '0.75rem',\n fontSizeSm: '0.875rem',\n fontSizeMd: '1rem',\n fontSizeLg: '1.125rem',\n fontSizeXl: '1.25rem',\n fontSizeHeading: '1.5rem',\n fontWeightNormal: '400',\n fontWeightMedium: '500',\n fontWeightSemibold: '600',\n fontWeightBold: '700',\n lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n // 9-step font size scale\n fontSize1: '0.75rem', // 12px — captions, badges\n fontSize2: '0.8125rem', // 13px — small UI\n fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n fontSize4: '1rem', // 16px — body text\n fontSize5: '1.125rem', // 18px — body-lg\n fontSize6: '1.25rem', // 20px — subheading\n fontSize7: '1.5rem', // 24px — heading-sm\n fontSize8: '1.875rem', // 30px — heading-md\n fontSize9: '2.25rem', // 36px — heading-lg\n\n // Matched line-heights\n lineHeight1: '1rem', // 16px\n lineHeight2: '1.25rem', // 20px\n lineHeight3: '1.25rem', // 20px\n lineHeight4: '1.5rem', // 24px\n lineHeight5: '1.5rem', // 24px\n lineHeight6: '1.75rem', // 28px\n lineHeight7: '2rem', // 32px\n lineHeight8: '2.25rem', // 36px\n lineHeight9: '2.75rem', // 44px\n\n // Fluid display sizes\n displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n // Letter-spacing\n letterSpacingTight: '-0.02em',\n letterSpacingNormal: '0',\n letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n // Body\n bodySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize4,\n lineHeight: typeScale.lineHeight4,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n bodyLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize5,\n lineHeight: typeScale.lineHeight5,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n\n // UI\n caption: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingWide,\n },\n label: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightMedium,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n code: {\n fontFamily: typography.fontFamilyMono,\n fontSize: typeScale.fontSize3,\n lineHeight: typeScale.lineHeight3,\n fontWeight: typography.fontWeightNormal,\n letterSpacing: typeScale.letterSpacingNormal,\n },\n overline: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize1,\n lineHeight: typeScale.lineHeight1,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingWide,\n textTransform: 'uppercase' as const,\n },\n\n // Heading\n headingSm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize6,\n lineHeight: typeScale.lineHeight6,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize7,\n lineHeight: typeScale.lineHeight7,\n fontWeight: typography.fontWeightSemibold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize8,\n lineHeight: typeScale.lineHeight8,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n headingXl: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.fontSize9,\n lineHeight: typeScale.lineHeight9,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n\n // Display (fluid)\n displaySm: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displaySm,\n lineHeight: 1.2,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayMd: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayMd,\n lineHeight: 1.15,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n displayLg: {\n fontFamily: typography.fontFamily,\n fontSize: typeScale.displayLg,\n lineHeight: 1.1,\n fontWeight: typography.fontWeightBold,\n letterSpacing: typeScale.letterSpacingTight,\n },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n // DragDrop's drop-target rings: borders.hairline in colors.border on every\n // zone that can receive, borders.strong in colors.accent on the one under the\n // pointer. Literal per theme (StyleX needs inline literals); the drift check\n // rebuilds each from the palette. Not focus: focus stays on outlines.\n dropReady: 'inset 0 0 0 1px #333333',\n dropOver: 'inset 0 0 0 2px #6aaffc',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n * spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n * enter (DetailPanel). `instant` is for explicit no-motion.\n * `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n * two other values components used; `minimal` is the 1ms reduced-motion\n * duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n * `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n * `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n instant: '0ms',\n // Non-zero so animationend still fires under reduced motion.\n minimal: '1ms',\n quick: '120ms',\n fast: '150ms',\n brisk: '160ms',\n base: '200ms',\n slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n standard: 'ease',\n linear: 'linear',\n easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n bg: '#ffffff',\n bgCard: '#f5f5f5',\n bgCardHover: '#ebebeb',\n text: '#1a1a1a',\n textMuted: '#4a4a4a',\n accent: '#1e40af',\n accentHover: '#1a3799',\n accentContrast: '#ffffff',\n border: '#d4d4d4',\n error: '#991b1b',\n errorHover: '#7f1d1d',\n errorBg: 'rgba(153, 27, 27, 0.08)',\n errorBorder: 'rgba(153, 27, 27, 0.3)',\n errorText: '#7f1d1d',\n errorContrast: '#ffffff',\n success: '#166534',\n successBg: 'rgba(22, 101, 52, 0.08)',\n successBorder: 'rgba(22, 101, 52, 0.3)',\n successText: '#14532d',\n warning: '#92400e',\n warningBg: 'rgba(146, 64, 14, 0.08)',\n warningBorder: 'rgba(146, 64, 14, 0.3)',\n warningText: '#78350f',\n info: '#1e40af',\n infoBg: 'rgba(30, 64, 175, 0.08)',\n infoBorder: 'rgba(30, 64, 175, 0.3)',\n infoText: '#1e40af',\n\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#6b21a8',\n highlightBg: 'rgba(107, 33, 168, 0.08)',\n highlightBorder: 'rgba(107, 33, 168, 0.3)',\n highlightText: '#581c87',\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#1a1a1a',\n onContrastSurface: '#e5e5e5',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(255, 255, 255, 0.33)',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n dropReady: 'inset 0 0 0 1px #d4d4d4',\n dropOver: 'inset 0 0 0 2px #1e40af',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n bg: '#000000',\n bgCard: '#111111',\n bgCardHover: '#1a1a1a',\n text: '#ffffff',\n textMuted: '#b0b0b0',\n accent: '#60a5fa',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#555555',\n error: '#f87171',\n errorHover: '#fca5a5',\n errorBg: 'rgba(248, 113, 113, 0.15)',\n errorBorder: 'rgba(248, 113, 113, 0.5)',\n errorText: '#fca5a5',\n errorContrast: '#000000',\n success: '#4ade80',\n successBg: 'rgba(74, 222, 128, 0.15)',\n successBorder: 'rgba(74, 222, 128, 0.5)',\n successText: '#86efac',\n warning: '#fcd34d',\n warningBg: 'rgba(252, 211, 77, 0.15)',\n warningBorder: 'rgba(252, 211, 77, 0.5)',\n warningText: '#fef08a',\n info: '#60a5fa',\n infoBg: 'rgba(96, 165, 250, 0.15)',\n infoBorder: 'rgba(96, 165, 250, 0.5)',\n infoText: '#bfdbfe',\n\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#d8b4fe',\n highlightBg: 'rgba(216, 180, 254, 0.15)',\n highlightBorder: 'rgba(216, 180, 254, 0.5)',\n highlightText: '#e9d5ff',\n // Fixed overlays — the same in every theme (a scrim darkens whatever is\n // under it; the inverse overlays sit on an accent surface).\n scrim: 'rgba(0, 0, 0, 0.4)',\n inverseFill: 'rgba(0, 0, 0, 0.10)',\n inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n inverseBorder: 'rgba(0, 0, 0, 0.55)',\n inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n // A light that does not follow the theme (the Switch knob).\n fixedLight: '#ffffff',\n // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#ffffff',\n onContrastSurface: '#000000',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n dropReady: 'inset 0 0 0 1px #555555',\n dropOver: 'inset 0 0 0 2px #60a5fa',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
|
package/dist/keys.d.ts
CHANGED
|
@@ -30,7 +30,7 @@ export declare const RADII_PX: {
|
|
|
30
30
|
readonly lg: 16;
|
|
31
31
|
readonly full: 9999;
|
|
32
32
|
};
|
|
33
|
-
export declare const SHADOW_KEYS: readonly ["sm", "md", "lg"];
|
|
33
|
+
export declare const SHADOW_KEYS: readonly ["sm", "md", "lg", "dropReady", "dropOver"];
|
|
34
34
|
export type ShadowToken = (typeof SHADOW_KEYS)[number];
|
|
35
35
|
export declare const DURATION_MS: {
|
|
36
36
|
readonly instant: 0;
|
|
@@ -42,7 +42,7 @@ export declare const DURATION_MS: {
|
|
|
42
42
|
readonly slow: 280;
|
|
43
43
|
};
|
|
44
44
|
export type DurationToken = keyof typeof DURATION_MS;
|
|
45
|
-
export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg"];
|
|
45
|
+
export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH"];
|
|
46
46
|
export type SizeToken = (typeof SIZE_KEYS)[number];
|
|
47
47
|
export declare const SIZES_PX: {
|
|
48
48
|
readonly touchTarget: 44;
|
|
@@ -93,6 +93,39 @@ export declare const SIZES_PX: {
|
|
|
93
93
|
readonly pageSm: 600;
|
|
94
94
|
readonly pageMd: 800;
|
|
95
95
|
readonly pageLg: 1200;
|
|
96
|
+
readonly sidebarW: 240;
|
|
97
|
+
readonly pageXs: 480;
|
|
98
|
+
readonly pageXl: 1440;
|
|
99
|
+
readonly asideW: 320;
|
|
100
|
+
readonly gridColXs: 200;
|
|
101
|
+
readonly fieldMinWSm: 80;
|
|
102
|
+
readonly fieldMinW: 160;
|
|
103
|
+
readonly popoverWSm: 240;
|
|
104
|
+
readonly popoverW: 320;
|
|
105
|
+
readonly popupMaxW: 280;
|
|
106
|
+
readonly meterH: 6;
|
|
107
|
+
readonly skeletonChipW: 96;
|
|
108
|
+
readonly dropZoneMinH: 128;
|
|
109
|
+
readonly canvasMinH: 480;
|
|
110
|
+
readonly editorMinH: 160;
|
|
111
|
+
readonly toolbarH: 36;
|
|
112
|
+
readonly embedW: 550;
|
|
113
|
+
readonly colorPickerW: 196;
|
|
114
|
+
readonly colorAreaH: 150;
|
|
115
|
+
readonly colorTrackH: 12;
|
|
116
|
+
readonly colorSwatch: 20;
|
|
117
|
+
readonly colorPreviewH: 22;
|
|
118
|
+
readonly handle: 16;
|
|
119
|
+
readonly chip: 24;
|
|
120
|
+
readonly placeholderMinH: 80;
|
|
121
|
+
readonly previewMaxH: 320;
|
|
122
|
+
readonly barH: 4;
|
|
123
|
+
readonly readoutW: 40;
|
|
124
|
+
readonly sliderW: 96;
|
|
125
|
+
readonly paletteMinW: 96;
|
|
126
|
+
readonly deviceBarW: 96;
|
|
127
|
+
readonly timeGutterW: 64;
|
|
128
|
+
readonly dayHeaderH: 46;
|
|
96
129
|
};
|
|
97
130
|
export declare const BORDER_KEYS: readonly ["hairline", "strong", "accent", "focusRing", "focusOffset", "focusOffsetSm"];
|
|
98
131
|
export type BorderToken = (typeof BORDER_KEYS)[number];
|
|
@@ -104,6 +137,24 @@ export declare const BORDERS_PX: {
|
|
|
104
137
|
readonly focusOffset: 2;
|
|
105
138
|
readonly focusOffsetSm: 1;
|
|
106
139
|
};
|
|
140
|
+
export declare const LAYER_KEYS: readonly ["raised", "floating", "overlay", "modal", "popover", "popupBackdrop", "popup", "toast", "portal"];
|
|
141
|
+
export type LayerToken = (typeof LAYER_KEYS)[number];
|
|
142
|
+
export declare const LAYERS: {
|
|
143
|
+
readonly raised: 1;
|
|
144
|
+
readonly floating: 50;
|
|
145
|
+
readonly overlay: 1000;
|
|
146
|
+
readonly modal: 1001;
|
|
147
|
+
readonly popover: 1040;
|
|
148
|
+
readonly popupBackdrop: 1049;
|
|
149
|
+
readonly popup: 1050;
|
|
150
|
+
readonly toast: 1060;
|
|
151
|
+
readonly portal: 1100;
|
|
152
|
+
};
|
|
153
|
+
export declare const EFFECT_KEYS: readonly ["overlayBlur"];
|
|
154
|
+
export type EffectToken = (typeof EFFECT_KEYS)[number];
|
|
155
|
+
export declare const EFFECTS: {
|
|
156
|
+
readonly overlayBlur: "blur(2px)";
|
|
157
|
+
};
|
|
107
158
|
export declare const ICON_SIZES: {
|
|
108
159
|
readonly sm: 16;
|
|
109
160
|
readonly md: 18;
|
|
@@ -149,6 +200,8 @@ export declare const SHADOWS: {
|
|
|
149
200
|
readonly sm: "0 2px 4px rgba(0, 0, 0, 0.3)";
|
|
150
201
|
readonly md: "0 4px 12px rgba(0, 0, 0, 0.4)";
|
|
151
202
|
readonly lg: "0 8px 24px rgba(0, 0, 0, 0.5)";
|
|
203
|
+
readonly dropReady: "inset 0 0 0 1px #333333";
|
|
204
|
+
readonly dropOver: "inset 0 0 0 2px #6aaffc";
|
|
152
205
|
};
|
|
153
206
|
export declare const EASINGS: {
|
|
154
207
|
readonly standard: "ease";
|
package/dist/keys.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,uhCAkFZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,6GAUb,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAA;AAEV,eAAO,MAAM,WAAW,0BAA2B,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;CAEV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
|