@duro-app/tokens 0.52.0 → 1.1.0

package/dist/keys.d.ts

@@ -0,0 +1,42 @@
+import { RawColors } from './raw.js';
+export declare const SPACING_KEYS: readonly ["xs", "sm", "ms", "md", "lg", "xl", "xxl", "xxxl"];
+export type SpacingToken = (typeof SPACING_KEYS)[number];
+export declare const SPACING_PX: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly ms: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+    readonly xxxl: 64;
+};
+export declare const RADIUS_KEYS: readonly ["xs", "sm", "md", "lg", "full"];
+export type RadiusToken = (typeof RADIUS_KEYS)[number];
+export declare const RADII_PX: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly full: 9999;
+};
+export declare const SHADOW_KEYS: readonly ["sm", "md", "lg"];
+export type ShadowToken = (typeof SHADOW_KEYS)[number];
+export declare const DURATION_MS: {
+    readonly instant: 0;
+    readonly fast: 150;
+    readonly base: 200;
+    readonly slow: 280;
+};
+export type DurationToken = keyof typeof DURATION_MS;
+export declare const ICON_SIZES: {
+    readonly sm: 16;
+    readonly md: 18;
+    readonly lg: 24;
+    readonly xl: 36;
+    readonly xxl: 48;
+};
+export type IconSize = keyof typeof ICON_SIZES;
+export type ColorToken = keyof RawColors;
+export type { Breakpoint } from './tokens/breakpoints.css.js';
+//# sourceMappingURL=keys.d.ts.map

package/dist/keys.d.ts.map

@@ -0,0 +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;AAEV,eAAO,MAAM,WAAW,2CAA4C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAA;AAEV,eAAO,MAAM,WAAW,6BAA8B,CAAA;AACtD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;CAKd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAIpD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAE9C,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "0.52.0",
+  "version": "1.1.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
       "types": "./src/raw.ts",
       "default": "./dist/raw.js"
     },
+    "./keys": "./src/keys.ts",
     "./tokens/breakpoints.css": "./src/tokens/breakpoints.css.ts",
     "./tokens/colors.css": "./src/tokens/colors.css.ts",
     "./tokens/spacing.css": "./src/tokens/spacing.css.ts",

package/src/keys.ts

@@ -0,0 +1,71 @@
+// Token key unions and raw numeric values, as plain TypeScript.
+//
+// The css.ts files can't export these: StyleX requires inline object literals,
+// and `css.defineVars` returns an opaque VarGroup whose keyof includes phantom
+// members (`__opaqueId`, `__tokens`). So the scales are duplicated here as the
+// typed source of truth for component props, Storybook argTypes, and tooling —
+// with zero StyleX/react-strict-dom imports, so this module is safe to load in
+// Node (tests, scripts, the ESLint plugin's drift test).
+//
+// `scripts/check-token-drift.mjs` runs in `prebuild` and fails the build if any
+// value here diverges from the corresponding css.ts literal.
+
+// Explicit .js extensions: this module is also typechecked under NodeNext
+// resolution (the ESLint plugin's tests import it via the `types` condition),
+// which rejects extensionless relative imports. Both are type-only, so they
+// are erased at build time.
+import type {RawColors} from './raw.js'
+
+export const SPACING_KEYS = ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'] as const
+export type SpacingToken = (typeof SPACING_KEYS)[number]
+
+// Mirrors tokens/spacing.css.ts `spacing` (px).
+export const SPACING_PX = {
+  xs: 4,
+  sm: 8,
+  ms: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+} as const
+
+export const RADIUS_KEYS = ['xs', 'sm', 'md', 'lg', 'full'] as const
+export type RadiusToken = (typeof RADIUS_KEYS)[number]
+
+// Mirrors tokens/spacing.css.ts `radii` (px).
+export const RADII_PX = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  full: 9999,
+} as const
+
+export const SHADOW_KEYS = ['sm', 'md', 'lg'] as const
+export type ShadowToken = (typeof SHADOW_KEYS)[number]
+
+// Mirrors tokens/motion.css.ts `duration`, as numbers for setTimeout use.
+export const DURATION_MS = {
+  instant: 0,
+  fast: 150,
+  base: 200,
+  slow: 280,
+} as const
+export type DurationToken = keyof typeof DURATION_MS
+
+// Icon rendering sizes (SVG width/height, px). Not a css.defineVars scale —
+// icons size via attributes, not CSS custom properties.
+export const ICON_SIZES = {
+  sm: 16,
+  md: 18,
+  lg: 24,
+  xl: 36,
+  xxl: 48,
+} as const
+export type IconSize = keyof typeof ICON_SIZES
+
+export type ColorToken = keyof RawColors
+
+export type {Breakpoint} from './tokens/breakpoints.css.js'