@adam-milo/tokens 1.0.1

package/dist/index.js

@@ -0,0 +1,256 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  borderRadius: () => borderRadius,
+  colors: () => colors,
+  default: () => index_default,
+  fontFamily: () => fontFamily,
+  fontSize: () => fontSize,
+  gradients: () => gradients,
+  legacyColors: () => legacyColors,
+  spacing: () => spacing,
+  tokens: () => tokens
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/colors.ts
+var colors = {
+  // Main Colors
+  text: "#191A39",
+  action: "#272643",
+  clickable: "#2F9DB2",
+  popup: "#ED6726",
+  error: "#FF6868",
+  toggle: "#4B497C",
+  secondary: "#1D56EC",
+  card: "#FFFFFF",
+  // Main Greys
+  bg: "#FAFAFA",
+  bgSecondary: "#F3F3F5",
+  border: "#E5E5EA",
+  iconSecondary: "#C9C9CF",
+  systemText: "#8C8C9C"
+};
+var legacyColors = {
+  primary: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  secondary: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  neutral: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  danger: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  }
+};
+var gradients = {
+  primary: "linear-gradient(236deg, #eee -19.33%, #41c2c4 28.51%, #3ea6b0 49.57%, #3c91a0 91.6%)"
+};
+
+// src/spacing.ts
+var spacing = {
+  0: "0",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  3: "0.75rem",
+  // 12px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  10: "2.5rem",
+  // 40px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem"
+  // 64px
+};
+var borderRadius = {
+  none: "0",
+  sm: "0.125rem",
+  // 2px
+  default: "0.25rem",
+  // 4px
+  md: "0.5rem",
+  // 8px
+  lg: "0.75rem",
+  // 12px
+  xl: "1rem",
+  // 16px
+  "2xl": "1.25rem",
+  // 20px
+  "3xl": "1.5rem",
+  // 24px
+  "4xl": "2rem",
+  // 32px
+  full: "9999px"
+};
+
+// src/typography.ts
+var fontSize = {
+  // Title and Text pairs (Smart V2)
+  "title-1": ["3rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 48px - Bold
+  "text-1": ["3rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 48px - Regular
+  "title-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 40px - Bold
+  "text-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 40px - Regular
+  "title-3": ["2rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 32px - Bold
+  "text-3": ["2rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 32px - Regular
+  "title-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 28px - Bold
+  "text-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 28px - Regular
+  "title-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 24px - Bold
+  "text-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 24px - Regular
+  "title-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 20px - Bold
+  "text-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 20px - Regular
+  "title-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 18px - Bold (Main)
+  "text-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 18px - Regular
+  "title-8": ["1rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 16px - Bold
+  "text-8": ["1rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 16px - Regular (Main)
+  "title-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 14px - Bold
+  "text-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 14px - Regular
+  "title-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "700" }],
+  // 12px - Bold
+  "text-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "400" }],
+  // 12px - Regular
+  // Legacy names (keeping for backward compatibility)
+  h1: ["2.5rem", { lineHeight: "3rem", fontWeight: "700" }],
+  h2: ["2rem", { lineHeight: "2.5rem", fontWeight: "700" }],
+  h3: ["1.5rem", { lineHeight: "2rem", fontWeight: "600" }],
+  h4: ["1.25rem", { lineHeight: "1.75rem", fontWeight: "600" }],
+  "body-lg": ["1.125rem", { lineHeight: "1.75rem", fontWeight: "400" }],
+  body: ["1rem", { lineHeight: "1.5rem", fontWeight: "400" }],
+  "body-sm": ["0.875rem", { lineHeight: "1.25rem", fontWeight: "400" }],
+  caption: ["0.75rem", { lineHeight: "1rem", fontWeight: "400" }]
+};
+var fontFamily = {
+  almoni: ["Almoni DL AAA", "sans-serif"],
+  sans: ["Almoni DL AAA", "ui-sans-serif", "system-ui", "sans-serif"]
+};
+
+// src/index.ts
+var tokens = {
+  colors,
+  legacyColors,
+  gradients,
+  spacing,
+  borderRadius,
+  fontSize,
+  fontFamily
+};
+var index_default = tokens;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  borderRadius,
+  colors,
+  fontFamily,
+  fontSize,
+  gradients,
+  legacyColors,
+  spacing,
+  tokens
+});

package/dist/index.mjs

@@ -0,0 +1,36 @@
+import {
+  colors,
+  gradients,
+  legacyColors
+} from "./chunk-NFXHCTG6.mjs";
+import {
+  borderRadius,
+  spacing
+} from "./chunk-JMMDK5QW.mjs";
+import {
+  fontFamily,
+  fontSize
+} from "./chunk-7VTNCMPG.mjs";
+
+// src/index.ts
+var tokens = {
+  colors,
+  legacyColors,
+  gradients,
+  spacing,
+  borderRadius,
+  fontSize,
+  fontFamily
+};
+var index_default = tokens;
+export {
+  borderRadius,
+  colors,
+  index_default as default,
+  fontFamily,
+  fontSize,
+  gradients,
+  legacyColors,
+  spacing,
+  tokens
+};

package/dist/spacing.d.mts

@@ -0,0 +1,37 @@
+/**
+ * Smart V2 Design System - Spacing Tokens
+ * @package @adam-milo/tokens
+ */
+declare const spacing: {
+    readonly 0: "0";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+};
+declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly default: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly xl: "1rem";
+    readonly '2xl': "1.25rem";
+    readonly '3xl': "1.5rem";
+    readonly '4xl': "2rem";
+    readonly full: "9999px";
+};
+type Spacing = typeof spacing;
+type BorderRadius = typeof borderRadius;
+
+export { type BorderRadius, type Spacing, borderRadius, spacing };

package/dist/spacing.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Smart V2 Design System - Spacing Tokens
+ * @package @adam-milo/tokens
+ */
+declare const spacing: {
+    readonly 0: "0";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+};
+declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly default: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly xl: "1rem";
+    readonly '2xl': "1.25rem";
+    readonly '3xl': "1.5rem";
+    readonly '4xl': "2rem";
+    readonly full: "9999px";
+};
+type Spacing = typeof spacing;
+type BorderRadius = typeof borderRadius;
+
+export { type BorderRadius, type Spacing, borderRadius, spacing };

package/dist/spacing.js

@@ -0,0 +1,82 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/spacing.ts
+var spacing_exports = {};
+__export(spacing_exports, {
+  borderRadius: () => borderRadius,
+  spacing: () => spacing
+});
+module.exports = __toCommonJS(spacing_exports);
+var spacing = {
+  0: "0",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  3: "0.75rem",
+  // 12px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  10: "2.5rem",
+  // 40px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem"
+  // 64px
+};
+var borderRadius = {
+  none: "0",
+  sm: "0.125rem",
+  // 2px
+  default: "0.25rem",
+  // 4px
+  md: "0.5rem",
+  // 8px
+  lg: "0.75rem",
+  // 12px
+  xl: "1rem",
+  // 16px
+  "2xl": "1.25rem",
+  // 20px
+  "3xl": "1.5rem",
+  // 24px
+  "4xl": "2rem",
+  // 32px
+  full: "9999px"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  borderRadius,
+  spacing
+});

package/dist/spacing.mjs

@@ -0,0 +1,8 @@
+import {
+  borderRadius,
+  spacing
+} from "./chunk-JMMDK5QW.mjs";
+export {
+  borderRadius,
+  spacing
+};

package/dist/tokens.css

@@ -0,0 +1,90 @@
+/**
+ * Smart V2 Design System - CSS Token Variables
+ * @package @adam-milo/tokens
+ * 
+ * This file contains pure design token values as CSS custom properties.
+ * These tokens can be used in any CSS framework or vanilla CSS project.
+ */
+
+:root {
+  /* ========================================================================
+   * Colors - Main
+   * ======================================================================== */
+  --color-text: #191a39;
+  --color-action: #272643;
+  --color-clickable: #2f9db2;
+  --color-popup: #ed6726;
+  --color-error: #ff6868;
+  --color-toggle: #4b497c;
+  --color-secondary: #1d56ec;
+  --color-card: #ffffff;
+
+  /* ========================================================================
+   * Colors - Greys
+   * ======================================================================== */
+  --color-bg: #fafafa;
+  --color-bg-secondary: #f3f3f5;
+  --color-border: #e5e5ea;
+  --color-icon-secondary: #c9c9cf;
+  --color-system-text: #8c8c9c;
+  --color-grey-07: #656573; /* Figma Grey/Grey 07 - for labels */
+
+  /* ========================================================================
+   * Spacing Scale (rem)
+   * ======================================================================== */
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+
+  /* ========================================================================
+   * Border Radius (rem)
+   * ======================================================================== */
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-default: 0.25rem; /* 4px */
+  --radius-5px: 0.3125rem; /* 5px - Figma input spec */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.75rem; /* 12px */
+  --radius-xl: 1rem; /* 16px */
+  --radius-2xl: 1.25rem; /* 20px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-4xl: 2rem; /* 32px */
+
+  /* ========================================================================
+   * Typography Scale (rem)
+   * ======================================================================== */
+  --font-size-1: 3rem; /* 48px */
+  --font-size-2: 2.5rem; /* 40px */
+  --font-size-3: 2rem; /* 32px */
+  --font-size-4: 1.75rem; /* 28px */
+  --font-size-5: 1.5rem; /* 24px */
+  --font-size-6: 1.25rem; /* 20px */
+  --font-size-7: 1.125rem; /* 18px */
+  --font-size-8: 1rem; /* 16px */
+  --font-size-9: 0.875rem; /* 14px */
+  --font-size-10: 0.75rem; /* 12px */
+
+  /* ========================================================================
+   * Gradients
+   * ======================================================================== */
+  --gradient-primary: linear-gradient(
+    236deg,
+    #eee -19.33%,
+    #41c2c4 28.51%,
+    #3ea6b0 49.57%,
+    #3c91a0 91.6%
+  );
+}

package/dist/typography.d.mts

@@ -0,0 +1,127 @@
+/**
+ * Smart V2 Design System - Typography Tokens
+ * Almoni DL AAA Font Family
+ * @package @adam-milo/tokens
+ */
+declare const fontSize: {
+    readonly 'title-1': readonly ["3rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-1': readonly ["3rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-2': readonly ["2.5rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-2': readonly ["2.5rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-3': readonly ["2rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-3': readonly ["2rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-4': readonly ["1.75rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-4': readonly ["1.75rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-5': readonly ["1.5rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-5': readonly ["1.5rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-6': readonly ["1.25rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-6': readonly ["1.25rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-7': readonly ["1.125rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-7': readonly ["1.125rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-8': readonly ["1rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-8': readonly ["1rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-9': readonly ["0.875rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-9': readonly ["0.875rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly 'title-10': readonly ["0.75rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "700";
+    }];
+    readonly 'text-10': readonly ["0.75rem", {
+        readonly lineHeight: "1.2";
+        readonly fontWeight: "400";
+    }];
+    readonly h1: readonly ["2.5rem", {
+        readonly lineHeight: "3rem";
+        readonly fontWeight: "700";
+    }];
+    readonly h2: readonly ["2rem", {
+        readonly lineHeight: "2.5rem";
+        readonly fontWeight: "700";
+    }];
+    readonly h3: readonly ["1.5rem", {
+        readonly lineHeight: "2rem";
+        readonly fontWeight: "600";
+    }];
+    readonly h4: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+        readonly fontWeight: "600";
+    }];
+    readonly 'body-lg': readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+        readonly fontWeight: "400";
+    }];
+    readonly body: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+        readonly fontWeight: "400";
+    }];
+    readonly 'body-sm': readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+        readonly fontWeight: "400";
+    }];
+    readonly caption: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+        readonly fontWeight: "400";
+    }];
+};
+declare const fontFamily: {
+    readonly almoni: readonly ["Almoni DL AAA", "sans-serif"];
+    readonly sans: readonly ["Almoni DL AAA", "ui-sans-serif", "system-ui", "sans-serif"];
+};
+type FontSize = typeof fontSize;
+type FontFamily = typeof fontFamily;
+
+export { type FontFamily, type FontSize, fontFamily, fontSize };