@adam-milo/tokens 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Adam Milo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,158 @@
+# @adam-milo/tokens
+
+Design tokens for the Adam Milo Design System (Smart V2).
+
+## Installation
+
+```bash
+npm install @adam-milo/tokens
+```
+
+## Usage
+
+### JavaScript/TypeScript
+
+```typescript
+import { colors, spacing, fontSize } from '@adam-milo/tokens';
+// Or import everything
+import tokens from '@adam-milo/tokens';
+
+console.log(colors.action); // '#272643'
+console.log(spacing[4]); // '1rem'
+console.log(fontSize['title-8']); // ['1rem', { lineHeight: '1.2', fontWeight: '700' }]
+```
+
+### CSS Variables
+
+Import the CSS file to use design tokens as CSS custom properties:
+
+```css
+/* In your main CSS file */
+@import '@adam-milo/tokens/tokens.css';
+
+/* Now you can use the tokens */
+.my-component {
+  color: var(--color-text);
+  padding: var(--spacing-4);
+  font-size: var(--font-size-8);
+  border-radius: var(--radius-md);
+}
+```
+
+**Or in your HTML:**
+
+```html
+<link rel="stylesheet" href="node_modules/@adam-milo/tokens/dist/tokens.css" />
+```
+
+**Or import in JavaScript (for bundlers like Vite/Webpack):**
+
+```javascript
+import '@adam-milo/tokens/tokens.css';
+```
+
+### Selective Imports
+
+```typescript
+import { colors } from '@adam-milo/tokens/colors';
+import { spacing } from '@adam-milo/tokens/spacing';
+import { fontSize } from '@adam-milo/tokens/typography';
+```
+
+## Tokens
+
+### Colors
+
+- **Main Colors**: text, action, clickable, popup, error, toggle, secondary, card
+- **Greys**: bg, bgSecondary, border, iconSecondary, systemText, grey-07
+- **Legacy Colors**: primary, secondary, neutral, success, danger (with 50-950 shades)
+- **Gradients**: primary gradient
+
+**CSS Variables:**
+
+- `--color-text`, `--color-action`, `--color-clickable`, etc.
+
+### Spacing
+
+Spacing scale from 0 to 16 (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 10, 11, 12, 14, 16)
+All values in `rem` units.
+
+**CSS Variables:**
+
+- `--spacing-0-5`, `--spacing-1`, `--spacing-2`, `--spacing-4`, etc.
+
+### Border Radius
+
+Scale: sm, default, md, lg, xl, 2xl, 3xl, 4xl
+
+**CSS Variables:**
+
+- `--radius-sm`, `--radius-default`, `--radius-md`, `--radius-lg`, etc.
+
+### Typography
+
+- **Smart V2 Scale**: title-1 through title-10, text-1 through text-10
+- **Font Family**: Almoni DL AAA
+- **Legacy**: h1, h2, h3, h4, body-lg, body, body-sm, caption
+
+**CSS Variables:**
+
+- `--font-size-1` through `--font-size-10`
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type { Colors, Spacing, FontSize } from '@adam-milo/tokens';
+```
+
+## Formats
+
+This package exports tokens in multiple formats:
+
+1. **JavaScript/TypeScript** - For programmatic use in React, Node.js, etc.
+2. **CSS Custom Properties** - For use in any CSS framework (React, Vue, Angular, vanilla)
+
+## Use Cases
+
+### React Components (JavaScript)
+
+```typescript
+import { colors, spacing } from '@adam-milo/tokens';
+
+const buttonStyles = {
+  backgroundColor: colors.action,
+  padding: spacing[4],
+};
+```
+
+### Vanilla CSS
+
+```css
+@import '@adam-milo/tokens/tokens.css';
+
+.button {
+  background-color: var(--color-action);
+  padding: var(--spacing-4);
+}
+```
+
+### Tailwind Configuration
+
+```javascript
+import { colors, spacing } from '@adam-milo/tokens';
+
+export default {
+  theme: {
+    extend: {
+      colors,
+      spacing,
+    },
+  },
+};
+```
+
+## License
+
+MIT

package/dist/chunk-7VTNCMPG.mjs

@@ -0,0 +1,62 @@
+// 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"]
+};
+
+export {
+  fontSize,
+  fontFamily
+};

package/dist/chunk-JMMDK5QW.mjs

@@ -0,0 +1,57 @@
+// 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"
+};
+
+export {
+  spacing,
+  borderRadius
+};

package/dist/chunk-NFXHCTG6.mjs

@@ -0,0 +1,94 @@
+// 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%)"
+};
+
+export {
+  colors,
+  legacyColors,
+  gradients
+};

package/dist/chunk-ZREVCOAD.mjs

@@ -0,0 +1,69 @@
+// 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"
+};
+var borderWidth = {
+  none: "0",
+  default: "0.0625rem",
+  // 1px
+  md: "0.125rem",
+  // 2px
+  lg: "0.1875rem",
+  // 3px
+  xl: "0.25rem"
+  // 4px
+};
+
+export {
+  spacing,
+  borderRadius,
+  borderWidth
+};

package/dist/colors.d.mts

@@ -0,0 +1,94 @@
+/**
+ * Smart V2 Design System - Color Tokens
+ * @package @adam-milo/tokens
+ */
+declare const colors: {
+    readonly text: "#191A39";
+    readonly action: "#272643";
+    readonly clickable: "#2F9DB2";
+    readonly popup: "#ED6726";
+    readonly error: "#FF6868";
+    readonly toggle: "#4B497C";
+    readonly secondary: "#1D56EC";
+    readonly card: "#FFFFFF";
+    readonly bg: "#FAFAFA";
+    readonly bgSecondary: "#F3F3F5";
+    readonly border: "#E5E5EA";
+    readonly iconSecondary: "#C9C9CF";
+    readonly systemText: "#8C8C9C";
+};
+declare const legacyColors: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly secondary: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7e22ce";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+        readonly 950: "#3b0764";
+    };
+    readonly neutral: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly danger: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+};
+declare const gradients: {
+    readonly primary: "linear-gradient(236deg, #eee -19.33%, #41c2c4 28.51%, #3ea6b0 49.57%, #3c91a0 91.6%)";
+};
+type Colors = typeof colors;
+type LegacyColors = typeof legacyColors;
+type Gradients = typeof gradients;
+
+export { type Colors, type Gradients, type LegacyColors, colors, gradients, legacyColors };

package/dist/colors.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Smart V2 Design System - Color Tokens
+ * @package @adam-milo/tokens
+ */
+declare const colors: {
+    readonly text: "#191A39";
+    readonly action: "#272643";
+    readonly clickable: "#2F9DB2";
+    readonly popup: "#ED6726";
+    readonly error: "#FF6868";
+    readonly toggle: "#4B497C";
+    readonly secondary: "#1D56EC";
+    readonly card: "#FFFFFF";
+    readonly bg: "#FAFAFA";
+    readonly bgSecondary: "#F3F3F5";
+    readonly border: "#E5E5EA";
+    readonly iconSecondary: "#C9C9CF";
+    readonly systemText: "#8C8C9C";
+};
+declare const legacyColors: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly secondary: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7e22ce";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+        readonly 950: "#3b0764";
+    };
+    readonly neutral: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly danger: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+};
+declare const gradients: {
+    readonly primary: "linear-gradient(236deg, #eee -19.33%, #41c2c4 28.51%, #3ea6b0 49.57%, #3c91a0 91.6%)";
+};
+type Colors = typeof colors;
+type LegacyColors = typeof legacyColors;
+type Gradients = typeof gradients;
+
+export { type Colors, type Gradients, type LegacyColors, colors, gradients, legacyColors };