@doitrix/tokens 1.0.0

package/dist/scales.d.ts

@@ -0,0 +1,210 @@
+/** One 4px base unit; every step is a multiple of it. */
+export declare const space: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+};
+export declare const radius: {
+    readonly none: "0";
+    readonly sm: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly xl: "1rem";
+    readonly full: "9999px";
+};
+/** Google Sans for reading, Montserrat for headlines, Geist Mono for figures. */
+export declare const font: {
+    readonly sans: "'Google Sans Variable', 'Google Sans', ui-sans-serif, system-ui, sans-serif";
+    readonly mono: "'Geist Mono Variable', 'Geist Mono', ui-monospace, monospace";
+    readonly display: "'Montserrat Variable', 'Montserrat', 'Google Sans Variable', ui-sans-serif, system-ui, sans-serif";
+};
+/** Medium is the floor: no text in the system is set lighter than 500. */
+export declare const weight: {
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly extrabold: 800;
+};
+type WeightName = keyof typeof weight;
+export interface TypeRole {
+    readonly size: string;
+    readonly lineHeight: string;
+    readonly weight: WeightName;
+    readonly tracking?: string;
+    readonly family?: keyof typeof font;
+}
+/** Size and line height are always paired and addressed by role, never by number. */
+export declare const text: {
+    readonly 'display-lg': {
+        readonly size: "3.5625rem";
+        readonly lineHeight: "4rem";
+        readonly weight: "bold";
+        readonly tracking: "-0.015625rem";
+        readonly family: "display";
+    };
+    readonly 'display-md': {
+        readonly size: "2.8125rem";
+        readonly lineHeight: "3.25rem";
+        readonly weight: "bold";
+        readonly family: "display";
+    };
+    readonly 'display-sm': {
+        readonly size: "2.25rem";
+        readonly lineHeight: "2.75rem";
+        readonly weight: "bold";
+        readonly family: "display";
+    };
+    readonly 'headline-lg': {
+        readonly size: "2rem";
+        readonly lineHeight: "2.5rem";
+        readonly weight: "bold";
+        readonly family: "display";
+    };
+    readonly 'headline-md': {
+        readonly size: "1.75rem";
+        readonly lineHeight: "2.25rem";
+        readonly weight: "bold";
+        readonly family: "display";
+    };
+    readonly 'headline-sm': {
+        readonly size: "1.5rem";
+        readonly lineHeight: "2rem";
+        readonly weight: "bold";
+        readonly family: "display";
+    };
+    readonly 'title-lg': {
+        readonly size: "1.375rem";
+        readonly lineHeight: "1.75rem";
+        readonly weight: "semibold";
+    };
+    readonly 'title-md': {
+        readonly size: "1rem";
+        readonly lineHeight: "1.5rem";
+        readonly weight: "semibold";
+        readonly tracking: "0.009375rem";
+    };
+    readonly 'title-sm': {
+        readonly size: "0.875rem";
+        readonly lineHeight: "1.25rem";
+        readonly weight: "semibold";
+        readonly tracking: "0.00625rem";
+    };
+    readonly 'body-lg': {
+        readonly size: "1rem";
+        readonly lineHeight: "1.5rem";
+        readonly weight: "medium";
+    };
+    readonly 'body-md': {
+        readonly size: "0.875rem";
+        readonly lineHeight: "1.25rem";
+        readonly weight: "medium";
+    };
+    readonly 'body-sm': {
+        readonly size: "0.75rem";
+        readonly lineHeight: "1rem";
+        readonly weight: "medium";
+    };
+    readonly 'label-lg': {
+        readonly size: "0.875rem";
+        readonly lineHeight: "1.25rem";
+        readonly weight: "medium";
+        readonly tracking: "0.00625rem";
+    };
+    readonly 'label-md': {
+        readonly size: "0.75rem";
+        readonly lineHeight: "1rem";
+        readonly weight: "medium";
+        readonly tracking: "0.03125rem";
+    };
+    readonly overline: {
+        readonly size: "0.75rem";
+        readonly lineHeight: "1rem";
+        readonly weight: "semibold";
+        readonly tracking: "0.16em";
+    };
+};
+export type TextRole = keyof typeof text;
+/**
+ * Durations sit on a 40ms step so they stay related. Seconds, because GSAP
+ * and the rAF fallback both consume seconds; the CSS output converts to ms.
+ */
+export declare const duration: {
+    readonly press: 0.12;
+    readonly fast: 0.16;
+    readonly micro: 0.2;
+    readonly state: 0.28;
+    readonly morph: 0.36;
+    readonly enter: 0.44;
+    readonly overlay: 0.56;
+    readonly travel: 0.72;
+};
+export type DurationName = keyof typeof duration;
+/** Each curve with its GSAP equivalent, so CSS and JS motion never disagree. */
+export declare const ease: {
+    readonly standard: {
+        readonly css: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly gsap: "power4.out";
+    };
+    readonly out: {
+        readonly css: "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly gsap: "power3.out";
+    };
+    readonly 'in-out': {
+        readonly css: "cubic-bezier(0.65, 0, 0.35, 1)";
+        readonly gsap: "power3.inOut";
+    };
+    readonly in: {
+        readonly css: "cubic-bezier(0.11, 0, 0.5, 0)";
+        readonly gsap: "power2.in";
+    };
+    /** A long, settling deceleration for things arriving on screen: dialogs, sheets, popovers. */
+    readonly emphasized: {
+        readonly css: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly gsap: "expo.out";
+    };
+};
+export type EaseToken = keyof typeof ease;
+export declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly overlay: 1200;
+    readonly modal: 1300;
+    readonly popover: 1400;
+    readonly toast: 1500;
+    readonly guide: 9999;
+};
+export declare const blur: {
+    readonly sm: "4px";
+    readonly md: "12px";
+    readonly lg: "24px";
+};
+export declare const container: {
+    readonly prose: "42rem";
+    readonly page: "72rem";
+};
+/** Interaction constants shared by every control. */
+export declare const interaction: {
+    readonly 'target-min': "44px";
+    readonly 'focus-ring-width': "2px";
+    readonly 'focus-ring-offset': "2px";
+    readonly 'press-scale': "0.97";
+    readonly 'border-width': "1px";
+    /** Where floating content starts its entrance from; set per side by the component. */
+    readonly 'float-x': "0";
+    readonly 'float-y': "0";
+    /** A disclosure's measured size, written by CollapsibleContent so height can animate. */
+    readonly 'collapsible-height': "auto";
+    readonly 'collapsible-width': "auto";
+};
+export {};

package/dist/theme.d.ts

@@ -0,0 +1,29 @@
+import { PaletteKey } from './palette';
+/** Tier 2 — semantic roles. A theme is a complete remapping of these and nothing else. */
+export declare const SEMANTIC_COLORS: readonly ["surface", "surface-raised", "surface-sunken", "surface-tonal", "surface-strong", "fg", "fg-muted", "fg-subtle", "fg-on-accent", "fg-on-strong", "line", "line-strong", "accent", "accent-hover", "accent-active", "accent-subtle", "accent-ink", "success-subtle", "success-ink", "warning-subtle", "warning-ink", "danger", "danger-subtle", "danger-ink", "focus-ring", "scrim", "surface-brand", "fg-on-brand"];
+export type SemanticColor = (typeof SEMANTIC_COLORS)[number];
+export type Theme = Readonly<Record<SemanticColor, PaletteKey>>;
+export declare const THEMES: readonly ["light", "dark"];
+export type ThemeName = (typeof THEMES)[number];
+export declare const light: Theme;
+export declare const dark: Theme;
+export declare const themes: Readonly<Record<ThemeName, Theme>>;
+/**
+ * Derived tokens are declared on every themed element rather than once on
+ * :root, so a `[data-theme]` subtree re-resolves them against its own roles.
+ */
+export declare const derived: {
+    readonly 'color-hover': "color-mix(in oklch, var(--doitrix-color-fg) 8%, transparent)";
+    readonly 'color-pressed': "color-mix(in oklch, var(--doitrix-color-fg) 12%, transparent)";
+    readonly 'color-disabled': "color-mix(in oklch, var(--doitrix-color-fg) 12%, transparent)";
+    readonly 'color-fg-disabled': "color-mix(in oklch, var(--doitrix-color-fg) 38%, transparent)";
+    readonly 'color-overlay': "color-mix(in oklch, var(--doitrix-color-scrim) 12%, transparent)";
+    readonly 'color-backdrop': "color-mix(in oklch, var(--doitrix-color-scrim) 48%, transparent)";
+    readonly 'color-shadow-key': "color-mix(in oklch, var(--doitrix-color-scrim) 30%, transparent)";
+    readonly 'color-shadow-ambient': "color-mix(in oklch, var(--doitrix-color-scrim) 15%, transparent)";
+    readonly 'shadow-sm': "0 1px 2px 0 var(--doitrix-color-shadow-key), 0 1px 3px 1px var(--doitrix-color-shadow-ambient)";
+    readonly 'shadow-md': "0 1px 2px 0 var(--doitrix-color-shadow-key), 0 2px 6px 2px var(--doitrix-color-shadow-ambient)";
+    readonly 'shadow-lg': "0 1px 3px 0 var(--doitrix-color-shadow-key), 0 4px 8px 3px var(--doitrix-color-shadow-ambient)";
+    readonly 'shadow-xl': "0 4px 4px 0 var(--doitrix-color-shadow-key), 0 8px 12px 6px var(--doitrix-color-shadow-ambient)";
+    readonly 'focus-ring': "var(--doitrix-focus-ring-width) solid var(--doitrix-color-focus-ring)";
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@doitrix/tokens",
+  "version": "1.0.0",
+  "description": "Design tokens for the Doitrix design system — one source, emitted as CSS custom properties, a Tailwind v4 theme and typed TS constants.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Doitrix Tech Labs",
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "css-variables",
+    "tailwindcss",
+    "theme",
+    "dark-mode"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DOITRIX-TECH-LABS/ui_packages.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://github.com/DOITRIX-TECH-LABS/ui_packages#readme",
+  "bugs": {
+    "url": "https://github.com/DOITRIX-TECH-LABS/ui_packages/issues"
+  },
+  "files": [
+    "dist",
+    "css",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./css/tokens.css",
+    "./tailwind.css": "./css/tailwind.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "generate": "bun scripts/generate.ts",
+    "build": "bun run generate && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "iOS >= 16.4",
+    "not dead"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}