@assure-one/design-system 0.1.1

package/dist/tokens/index.js

@@ -0,0 +1,261 @@
+// src/tokens/reference.ts
+var colors = {
+  midnightInk: "#02093a",
+  canvasDark: "#000000",
+  ghostWhite: "#f6f5f4",
+  paperWhite: "#ffffff",
+  deepGraphite: "#0b0b0b",
+  blueFrost: "#62aef0",
+  oceanGlimmer: "#0075de",
+  skySurge: "#097fe8",
+  actionIndigo: "#455dd3",
+  alertRed: "#f77463",
+  teamTeal: "#2a9d99",
+  sunnyYellow: "#ffc95e",
+  warmUmber: "#b18164",
+  coralBurst: "#ff8a33",
+  fuchsiaFlare: "#ff83dd",
+  grapeGlow: "#ad6ded",
+  harvestGold: "#ffb110",
+  hotChili: "#f64932",
+  forestGreen: "#1aae39",
+  coolGray: "#c6c6c5",
+  deepSlate: "#615d59",
+  inputBorderGray: "#dddddd",
+  offWhite: "#f2f9ff"
+};
+var typography = {
+  family: {
+    sans: "'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    serif: "'Lyon Text', Georgia, ui-serif, serif",
+    mono: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace"
+  },
+  scale: {
+    caption: { size: "12px", leading: 1.5, tracking: "0.01px" },
+    bodySm: { size: "14px", leading: 1.43, tracking: "-0.006px" },
+    body: { size: "15px", leading: 1.33, tracking: "-0.006px" },
+    subheading: { size: "20px", leading: 1.35, tracking: "-0.011px" },
+    headingSm: { size: "22px", leading: 1.33, tracking: "-0.024px" },
+    heading: { size: "26px", leading: 1.27, tracking: "-0.033px" },
+    headingLg: { size: "40px", leading: 1.23, tracking: "-0.035px" },
+    display: { size: "64px", leading: 0.83, tracking: "-0.036px" }
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+};
+var spacing = {
+  unit: "4px",
+  4: "4px",
+  8: "8px",
+  12: "12px",
+  16: "16px",
+  20: "20px",
+  24: "24px",
+  28: "28px",
+  32: "32px",
+  36: "36px",
+  40: "40px",
+  64: "64px",
+  80: "80px",
+  180: "180px"
+};
+var radii = {
+  md: "5px",
+  lg: "8px",
+  xl: "12px",
+  full: "9999px",
+  cards: "12px",
+  badges: "9999px",
+  inputs: "4px",
+  buttons: "8px",
+  general: "5px"
+};
+var shadows = {
+  subtle: "rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px"
+};
+var surfaces = {
+  canvasDark: "#000000",
+  midnightInk: "#02093a",
+  paperWhite: "#ffffff",
+  ghostWhite: "#f6f5f4"
+};
+var reference = {
+  colors,
+  typography,
+  spacing,
+  radii,
+  shadows,
+  surfaces
+};
+
+// src/tokens/system.ts
+var systemTokens = {
+  color: {
+    /* Surfaces */
+    canvas: "var(--color-canvas)",
+    surface: "var(--color-surface)",
+    surfaceRaised: "var(--color-surface-raised)",
+    surfaceSunken: "var(--color-surface-sunken)",
+    surfaceOverlay: "var(--color-surface-overlay)",
+    /* Foreground */
+    fg: "var(--color-fg)",
+    fgStrong: "var(--color-fg-strong)",
+    fgMuted: "var(--color-fg-muted)",
+    fgSubtle: "var(--color-fg-subtle)",
+    fgDisabled: "var(--color-fg-disabled)",
+    fgOnBrand: "var(--color-fg-on-brand)",
+    fgOnDark: "var(--color-fg-on-dark)",
+    fgOnLight: "var(--color-fg-on-light)",
+    /* Borders */
+    border: "var(--color-border)",
+    borderStrong: "var(--color-border-strong)",
+    borderInput: "var(--color-border-input)",
+    borderFocus: "var(--color-border-focus)",
+    /* Brand · primary action */
+    brand: "var(--color-brand)",
+    brandHover: "var(--color-brand-hover)",
+    brandActive: "var(--color-brand-active)",
+    brandFg: "var(--color-brand-fg)",
+    /* Interactive · links */
+    link: "var(--color-link)",
+    linkHover: "var(--color-link-hover)",
+    /* Status */
+    success: "var(--color-success)",
+    successSubtle: "var(--color-success-subtle)",
+    successFg: "var(--color-success-fg)",
+    warning: "var(--color-warning)",
+    warningSubtle: "var(--color-warning-subtle)",
+    warningFg: "var(--color-warning-fg)",
+    danger: "var(--color-danger)",
+    dangerSubtle: "var(--color-danger-subtle)",
+    dangerFg: "var(--color-danger-fg)",
+    info: "var(--color-info)",
+    infoSubtle: "var(--color-info-subtle)",
+    infoFg: "var(--color-info-fg)",
+    /* Decorative accents (Notion's playful palette) */
+    accentCoral: "var(--color-accent-coral)",
+    accentFuchsia: "var(--color-accent-fuchsia)",
+    accentGrape: "var(--color-accent-grape)",
+    accentTeal: "var(--color-accent-teal)",
+    accentSunny: "var(--color-accent-sunny)",
+    accentUmber: "var(--color-accent-umber)",
+    accentFrost: "var(--color-accent-frost)"
+  },
+  radius: {
+    md: "var(--radius-md)",
+    lg: "var(--radius-lg)",
+    xl: "var(--radius-xl)",
+    full: "var(--radius-full)",
+    /* Component-specific role radii */
+    cards: "var(--radius-cards)",
+    badges: "var(--radius-badges)",
+    inputs: "var(--radius-inputs)",
+    buttons: "var(--radius-buttons)",
+    general: "var(--radius-general)"
+  },
+  shadow: {
+    subtle: "var(--shadow-subtle)",
+    focus: "var(--shadow-focus)"
+  },
+  spacing: {
+    4: "var(--spacing-4)",
+    8: "var(--spacing-8)",
+    12: "var(--spacing-12)",
+    16: "var(--spacing-16)",
+    20: "var(--spacing-20)",
+    24: "var(--spacing-24)",
+    28: "var(--spacing-28)",
+    32: "var(--spacing-32)",
+    36: "var(--spacing-36)",
+    40: "var(--spacing-40)",
+    64: "var(--spacing-64)",
+    80: "var(--spacing-80)",
+    180: "var(--spacing-180)",
+    sectionGap: "var(--section-gap)",
+    cardPadding: "var(--card-padding)",
+    elementGap: "var(--element-gap)"
+  },
+  type: {
+    family: {
+      sans: "var(--font-sans)",
+      serif: "var(--font-serif)",
+      mono: "var(--font-mono)"
+    },
+    weight: {
+      regular: "var(--font-weight-regular)",
+      medium: "var(--font-weight-medium)",
+      semibold: "var(--font-weight-semibold)",
+      bold: "var(--font-weight-bold)"
+    },
+    role: {
+      caption: {
+        size: "var(--text-caption)",
+        leading: "var(--leading-caption)",
+        tracking: "var(--tracking-caption)"
+      },
+      bodySm: {
+        size: "var(--text-body-sm)",
+        leading: "var(--leading-body-sm)",
+        tracking: "var(--tracking-body-sm)"
+      },
+      body: {
+        size: "var(--text-body)",
+        leading: "var(--leading-body)",
+        tracking: "var(--tracking-body)"
+      },
+      subheading: {
+        size: "var(--text-subheading)",
+        leading: "var(--leading-subheading)",
+        tracking: "var(--tracking-subheading)"
+      },
+      headingSm: {
+        size: "var(--text-heading-sm)",
+        leading: "var(--leading-heading-sm)",
+        tracking: "var(--tracking-heading-sm)"
+      },
+      heading: {
+        size: "var(--text-heading)",
+        leading: "var(--leading-heading)",
+        tracking: "var(--tracking-heading)"
+      },
+      headingLg: {
+        size: "var(--text-heading-lg)",
+        leading: "var(--leading-heading-lg)",
+        tracking: "var(--tracking-heading-lg)"
+      },
+      display: {
+        size: "var(--text-display)",
+        leading: "var(--leading-display)",
+        tracking: "var(--tracking-display)"
+      }
+    }
+  },
+  duration: {
+    instant: "var(--duration-instant)",
+    fast: "var(--duration-fast)",
+    normal: "var(--duration-normal)",
+    slow: "var(--duration-slow)"
+  },
+  ease: {
+    out: "var(--ease-out)",
+    in: "var(--ease-in)",
+    inOut: "var(--ease-in-out)"
+  },
+  z: {
+    base: "var(--z-base)",
+    dropdown: "var(--z-dropdown)",
+    sticky: "var(--z-sticky)",
+    overlay: "var(--z-overlay)",
+    modal: "var(--z-modal)",
+    toast: "var(--z-toast)",
+    tooltip: "var(--z-tooltip)"
+  }
+};
+
+export { colors, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/reference.ts","../../src/tokens/system.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Reference tokens — Notion's named palette. Programmatic access for theme\n * switching, Figma sync, design tools, etc. Components should NOT consume\n * these directly; use system tokens (./system.ts) instead.\n *\n * Source: Notion design system reference (refero.design).\n * Brand colors will diverge later — only `system.ts` should change.\n */\n\nexport const colors = {\n  midnightInk: \"#02093a\",\n  canvasDark: \"#000000\",\n  ghostWhite: \"#f6f5f4\",\n  paperWhite: \"#ffffff\",\n  deepGraphite: \"#0b0b0b\",\n  blueFrost: \"#62aef0\",\n  oceanGlimmer: \"#0075de\",\n  skySurge: \"#097fe8\",\n  actionIndigo: \"#455dd3\",\n  alertRed: \"#f77463\",\n  teamTeal: \"#2a9d99\",\n  sunnyYellow: \"#ffc95e\",\n  warmUmber: \"#b18164\",\n  coralBurst: \"#ff8a33\",\n  fuchsiaFlare: \"#ff83dd\",\n  grapeGlow: \"#ad6ded\",\n  harvestGold: \"#ffb110\",\n  hotChili: \"#f64932\",\n  forestGreen: \"#1aae39\",\n  coolGray: \"#c6c6c5\",\n  deepSlate: \"#615d59\",\n  inputBorderGray: \"#dddddd\",\n  offWhite: \"#f2f9ff\",\n} as const;\n\nexport const typography = {\n  family: {\n    sans: \"'NotionInter', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n    serif: \"'Lyon Text', Georgia, ui-serif, serif\",\n    mono: \"'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace\",\n  },\n  scale: {\n    caption: { size: \"12px\", leading: 1.5, tracking: \"0.01px\" },\n    bodySm: { size: \"14px\", leading: 1.43, tracking: \"-0.006px\" },\n    body: { size: \"15px\", leading: 1.33, tracking: \"-0.006px\" },\n    subheading: { size: \"20px\", leading: 1.35, tracking: \"-0.011px\" },\n    headingSm: { size: \"22px\", leading: 1.33, tracking: \"-0.024px\" },\n    heading: { size: \"26px\", leading: 1.27, tracking: \"-0.033px\" },\n    headingLg: { size: \"40px\", leading: 1.23, tracking: \"-0.035px\" },\n    display: { size: \"64px\", leading: 0.83, tracking: \"-0.036px\" },\n  },\n  weight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n  },\n} as const;\n\nexport const spacing = {\n  unit: \"4px\",\n  4: \"4px\",\n  8: \"8px\",\n  12: \"12px\",\n  16: \"16px\",\n  20: \"20px\",\n  24: \"24px\",\n  28: \"28px\",\n  32: \"32px\",\n  36: \"36px\",\n  40: \"40px\",\n  64: \"64px\",\n  80: \"80px\",\n  180: \"180px\",\n} as const;\n\nexport const radii = {\n  md: \"5px\",\n  lg: \"8px\",\n  xl: \"12px\",\n  full: \"9999px\",\n  cards: \"12px\",\n  badges: \"9999px\",\n  inputs: \"4px\",\n  buttons: \"8px\",\n  general: \"5px\",\n} as const;\n\nexport const shadows = {\n  subtle:\n    \"rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px\",\n} as const;\n\nexport const surfaces = {\n  canvasDark: \"#000000\",\n  midnightInk: \"#02093a\",\n  paperWhite: \"#ffffff\",\n  ghostWhite: \"#f6f5f4\",\n} as const;\n\nexport const reference = {\n  colors,\n  typography,\n  spacing,\n  radii,\n  shadows,\n  surfaces,\n} as const;\n\nexport type ReferenceTokens = typeof reference;\nexport type ColorName = keyof typeof colors;\n","/**\n * System tokens — semantic mappings. These are the names components use.\n * Re-mapped per theme via `.dark` class. The CSS variable equivalents\n * live in `./tokens.css`.\n */\n\nexport const systemTokens = {\n  color: {\n    /* Surfaces */\n    canvas: \"var(--color-canvas)\",\n    surface: \"var(--color-surface)\",\n    surfaceRaised: \"var(--color-surface-raised)\",\n    surfaceSunken: \"var(--color-surface-sunken)\",\n    surfaceOverlay: \"var(--color-surface-overlay)\",\n\n    /* Foreground */\n    fg: \"var(--color-fg)\",\n    fgStrong: \"var(--color-fg-strong)\",\n    fgMuted: \"var(--color-fg-muted)\",\n    fgSubtle: \"var(--color-fg-subtle)\",\n    fgDisabled: \"var(--color-fg-disabled)\",\n    fgOnBrand: \"var(--color-fg-on-brand)\",\n    fgOnDark: \"var(--color-fg-on-dark)\",\n    fgOnLight: \"var(--color-fg-on-light)\",\n\n    /* Borders */\n    border: \"var(--color-border)\",\n    borderStrong: \"var(--color-border-strong)\",\n    borderInput: \"var(--color-border-input)\",\n    borderFocus: \"var(--color-border-focus)\",\n\n    /* Brand · primary action */\n    brand: \"var(--color-brand)\",\n    brandHover: \"var(--color-brand-hover)\",\n    brandActive: \"var(--color-brand-active)\",\n    brandFg: \"var(--color-brand-fg)\",\n\n    /* Interactive · links */\n    link: \"var(--color-link)\",\n    linkHover: \"var(--color-link-hover)\",\n\n    /* Status */\n    success: \"var(--color-success)\",\n    successSubtle: \"var(--color-success-subtle)\",\n    successFg: \"var(--color-success-fg)\",\n    warning: \"var(--color-warning)\",\n    warningSubtle: \"var(--color-warning-subtle)\",\n    warningFg: \"var(--color-warning-fg)\",\n    danger: \"var(--color-danger)\",\n    dangerSubtle: \"var(--color-danger-subtle)\",\n    dangerFg: \"var(--color-danger-fg)\",\n    info: \"var(--color-info)\",\n    infoSubtle: \"var(--color-info-subtle)\",\n    infoFg: \"var(--color-info-fg)\",\n\n    /* Decorative accents (Notion's playful palette) */\n    accentCoral: \"var(--color-accent-coral)\",\n    accentFuchsia: \"var(--color-accent-fuchsia)\",\n    accentGrape: \"var(--color-accent-grape)\",\n    accentTeal: \"var(--color-accent-teal)\",\n    accentSunny: \"var(--color-accent-sunny)\",\n    accentUmber: \"var(--color-accent-umber)\",\n    accentFrost: \"var(--color-accent-frost)\",\n  },\n\n  radius: {\n    md: \"var(--radius-md)\",\n    lg: \"var(--radius-lg)\",\n    xl: \"var(--radius-xl)\",\n    full: \"var(--radius-full)\",\n    /* Component-specific role radii */\n    cards: \"var(--radius-cards)\",\n    badges: \"var(--radius-badges)\",\n    inputs: \"var(--radius-inputs)\",\n    buttons: \"var(--radius-buttons)\",\n    general: \"var(--radius-general)\",\n  },\n\n  shadow: {\n    subtle: \"var(--shadow-subtle)\",\n    focus: \"var(--shadow-focus)\",\n  },\n\n  spacing: {\n    4: \"var(--spacing-4)\",\n    8: \"var(--spacing-8)\",\n    12: \"var(--spacing-12)\",\n    16: \"var(--spacing-16)\",\n    20: \"var(--spacing-20)\",\n    24: \"var(--spacing-24)\",\n    28: \"var(--spacing-28)\",\n    32: \"var(--spacing-32)\",\n    36: \"var(--spacing-36)\",\n    40: \"var(--spacing-40)\",\n    64: \"var(--spacing-64)\",\n    80: \"var(--spacing-80)\",\n    180: \"var(--spacing-180)\",\n    sectionGap: \"var(--section-gap)\",\n    cardPadding: \"var(--card-padding)\",\n    elementGap: \"var(--element-gap)\",\n  },\n\n  type: {\n    family: {\n      sans: \"var(--font-sans)\",\n      serif: \"var(--font-serif)\",\n      mono: \"var(--font-mono)\",\n    },\n    weight: {\n      regular: \"var(--font-weight-regular)\",\n      medium: \"var(--font-weight-medium)\",\n      semibold: \"var(--font-weight-semibold)\",\n      bold: \"var(--font-weight-bold)\",\n    },\n    role: {\n      caption: {\n        size: \"var(--text-caption)\",\n        leading: \"var(--leading-caption)\",\n        tracking: \"var(--tracking-caption)\",\n      },\n      bodySm: {\n        size: \"var(--text-body-sm)\",\n        leading: \"var(--leading-body-sm)\",\n        tracking: \"var(--tracking-body-sm)\",\n      },\n      body: {\n        size: \"var(--text-body)\",\n        leading: \"var(--leading-body)\",\n        tracking: \"var(--tracking-body)\",\n      },\n      subheading: {\n        size: \"var(--text-subheading)\",\n        leading: \"var(--leading-subheading)\",\n        tracking: \"var(--tracking-subheading)\",\n      },\n      headingSm: {\n        size: \"var(--text-heading-sm)\",\n        leading: \"var(--leading-heading-sm)\",\n        tracking: \"var(--tracking-heading-sm)\",\n      },\n      heading: {\n        size: \"var(--text-heading)\",\n        leading: \"var(--leading-heading)\",\n        tracking: \"var(--tracking-heading)\",\n      },\n      headingLg: {\n        size: \"var(--text-heading-lg)\",\n        leading: \"var(--leading-heading-lg)\",\n        tracking: \"var(--tracking-heading-lg)\",\n      },\n      display: {\n        size: \"var(--text-display)\",\n        leading: \"var(--leading-display)\",\n        tracking: \"var(--tracking-display)\",\n      },\n    },\n  },\n\n  duration: {\n    instant: \"var(--duration-instant)\",\n    fast: \"var(--duration-fast)\",\n    normal: \"var(--duration-normal)\",\n    slow: \"var(--duration-slow)\",\n  },\n\n  ease: {\n    out: \"var(--ease-out)\",\n    in: \"var(--ease-in)\",\n    inOut: \"var(--ease-in-out)\",\n  },\n\n  z: {\n    base: \"var(--z-base)\",\n    dropdown: \"var(--z-dropdown)\",\n    sticky: \"var(--z-sticky)\",\n    overlay: \"var(--z-overlay)\",\n    modal: \"var(--z-modal)\",\n    toast: \"var(--z-toast)\",\n    tooltip: \"var(--z-tooltip)\",\n  },\n} as const;\n\nexport type SystemTokens = typeof systemTokens;\n"]}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@assure-one/design-system",
+  "version": "0.1.1",
+  "description": "Assure One design system — tokens, primitives, and patterns for the Assure Suite.",
+  "license": "UNLICENSED",
+  "private": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Assure-One/design-system.git"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.12",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.18.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^0.11.2",
+    "next": "16.1.6",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.5.0",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsup && pnpm build:css",
+    "build:css": "tailwindcss -i ./src/tokens/tokens.css -o ./dist/styles.css --minify",
+    "dev": "tsup --watch",
+    "dev:css": "tailwindcss -i ./src/tokens/tokens.css -o ./dist/styles.css --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "format": "prettier --write src",
+    "changeset": "changeset",
+    "release": "changeset publish",
+    "version": "changeset version"
+  }
+}