@freehold/design-tokens 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Freehold
+
+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,129 @@
+# @freehold/design-tokens
+
+Design tokens for the Freehold design system. Available as TypeScript/JavaScript objects or CSS custom properties.
+
+## Installation
+
+```bash
+pnpm add @freehold/design-tokens
+# or
+npm install @freehold/design-tokens
+```
+
+## Usage
+
+### CSS Custom Properties
+
+Import the CSS file to get all tokens as `--fh-*` custom properties on `:root`:
+
+```css
+@import '@freehold/design-tokens/css';
+```
+
+Then use them in your styles:
+
+```css
+.card {
+  background: var(--fh-color-background-elevated);
+  color: var(--fh-color-text-primary);
+  border-radius: var(--fh-radius-lg);
+  box-shadow: var(--fh-shadow-default);
+  padding: var(--fh-spacing-4);
+}
+```
+
+### JavaScript / TypeScript
+
+Import individual token groups:
+
+```ts
+import { colors, typography, spacing, shadows, radii, animations } from '@freehold/design-tokens'
+
+// Use directly
+const bg = colors.background.primary  // '#FAF9F6'
+const font = typography.fonts.heading  // '"DM Serif Display", Georgia, serif'
+```
+
+### Tailwind CSS Preset
+
+The package exports a `tailwindPreset` for extending your Tailwind config:
+
+```ts
+// tailwind.config.ts
+import { tailwindPreset } from '@freehold/design-tokens'
+
+export default {
+  theme: {
+    extend: {
+      colors: tailwindPreset.colors,
+      fontFamily: tailwindPreset.fontFamily,
+      borderRadius: tailwindPreset.borderRadius,
+    },
+  },
+}
+```
+
+## Token Reference
+
+### Colors
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `background.primary` | `#FAF9F6` | Page background |
+| `background.secondary` | `#F5F3EF` | Section backgrounds |
+| `background.elevated` | `#FFFFFF` | Elevated surfaces |
+| `text.primary` | `#2C2824` | Primary text |
+| `text.secondary` | `#5C574F` | Secondary text |
+| `text.tertiary` | `#8A847A` | Muted text |
+| `sand.500` | `#B8A48E` | Primary accent |
+| `sand.600` | `#A08A6E` | Accent hover |
+
+Full sand palette: 50-900.
+
+### Status Colors
+
+Each status has `background`, `text`, `border`, and `dot` values:
+
+- `pending` — amber tones
+- `approved` / `success` — green tones
+- `paid` — blue tones
+- `error` — red tones
+- `warning` — amber tones
+
+### Typography
+
+| Token | Value |
+|-------|-------|
+| `fonts.heading` | DM Serif Display, Georgia, serif |
+| `fonts.body` | DM Sans, system-ui, sans-serif |
+| `fonts.mono` | JetBrains Mono, Consolas, monospace |
+
+Font sizes: `xs` (12px) through `5xl` (48px).
+
+### Spacing
+
+8px grid system: `0.5` (2px), `1` (4px), `2` (8px), `4` (16px), `6` (24px), `8` (32px), `12` (48px), `16` (64px), `24` (96px), `32` (128px).
+
+### Border Radius
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `sm` | 8px | Buttons, sidebar items |
+| `md` | 10px | Inputs, inner cards |
+| `lg` | 14px | Outer cards |
+| `xl` | 16px | Dashboard wrappers |
+| `full` | 9999px | Pills, badges |
+
+### Shadows
+
+Warm-tinted dual-layer shadows: `sm`, `default`, `md`, `lg`, `xl`, `elevated`, `hover`, `button`, `card`, `inner`.
+
+### Animations
+
+- **Durations**: `fast` (150ms), `default` (200ms), `slow` (350ms), `slower` (500ms)
+- **Easings**: `default`, `in`, `out`, `inOut`, `bounce`
+- **Transitions**: Pre-composed `duration + easing` strings
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,253 @@
+declare const colors: {
+    readonly background: {
+        readonly primary: "#FAF9F6";
+        readonly secondary: "#F5F3EF";
+        readonly tertiary: "#EFECE6";
+        readonly elevated: "#FFFFFF";
+    };
+    readonly sand: {
+        readonly 50: "#F9F7F4";
+        readonly 100: "#F2EDE6";
+        readonly 200: "#E5DDD1";
+        readonly 300: "#D4C8B8";
+        readonly 400: "#C4B49E";
+        readonly 500: "#B8A48E";
+        readonly 600: "#A08A6E";
+        readonly 700: "#86715A";
+        readonly 800: "#6B5A48";
+        readonly 900: "#544737";
+    };
+    readonly text: {
+        readonly primary: "#2C2824";
+        readonly secondary: "#5C574F";
+        readonly tertiary: "#8A847A";
+        readonly inverse: "#FAF9F6";
+    };
+    readonly status: {
+        readonly pending: {
+            readonly background: "#FEF3C7";
+            readonly text: "#92400E";
+            readonly border: "#FCD34D";
+            readonly dot: "#D4B86A";
+        };
+        readonly approved: {
+            readonly background: "#D1FAE5";
+            readonly text: "#065F46";
+            readonly border: "#6EE7B7";
+            readonly dot: "#8DB580";
+        };
+        readonly paid: {
+            readonly background: "#DBEAFE";
+            readonly text: "#1E40AF";
+            readonly border: "#93C5FD";
+            readonly dot: "#60A5FA";
+        };
+        readonly error: {
+            readonly background: "#FEE2E2";
+            readonly text: "#991B1B";
+            readonly border: "#FCA5A5";
+            readonly dot: "#C4796B";
+        };
+        readonly success: {
+            readonly background: "#D1FAE5";
+            readonly text: "#065F46";
+            readonly border: "#6EE7B7";
+            readonly dot: "#8DB580";
+        };
+        readonly warning: {
+            readonly background: "#FEF3C7";
+            readonly text: "#92400E";
+            readonly border: "#FCD34D";
+            readonly dot: "#D4B86A";
+        };
+    };
+    readonly semantic: {
+        readonly success: "#8DB580";
+        readonly warning: "#D4B86A";
+        readonly error: "#C4796B";
+        readonly info: "#60A5FA";
+    };
+    readonly border: {
+        readonly subtle: "rgba(184, 164, 142, 0.15)";
+        readonly default: "rgba(184, 164, 142, 0.25)";
+        readonly strong: "rgba(184, 164, 142, 0.4)";
+    };
+};
+type Colors = typeof colors;
+
+declare const typography: {
+    readonly fonts: {
+        readonly heading: "\"DM Serif Display\", Georgia, serif";
+        readonly body: "\"DM Sans\", system-ui, sans-serif";
+        readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+    };
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeights: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeights: {
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+    };
+};
+type Typography = typeof typography;
+
+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 2.5: "0.625rem";
+    readonly 3: "0.75rem";
+    readonly 3.5: "0.875rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+    readonly 11: "2.75rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 28: "7rem";
+    readonly 32: "8rem";
+};
+declare const radii: {
+    readonly none: "0";
+    readonly sm: "0.5rem";
+    readonly default: "0.5rem";
+    readonly md: "0.625rem";
+    readonly lg: "0.875rem";
+    readonly xl: "1rem";
+    readonly '2xl': "1.5rem";
+    readonly full: "9999px";
+};
+declare const radiiPx: {
+    readonly none: 0;
+    readonly sm: 8;
+    readonly default: 8;
+    readonly md: 10;
+    readonly lg: 14;
+    readonly xl: 16;
+    readonly '2xl': 24;
+    readonly full: 9999;
+};
+type Spacing = typeof spacing;
+type Radii = typeof radii;
+type RadiiPx = typeof radiiPx;
+
+declare const shadows: {
+    readonly none: "none";
+    readonly sm: string;
+    readonly default: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly elevated: string;
+    readonly hover: "0 2px 8px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.05)";
+    readonly button: "0 2px 8px rgba(26,26,26,0.12)";
+    readonly card: "0 4px 24px rgba(26,26,26,0.04), 0 12px 48px rgba(26,26,26,0.03)";
+    readonly inner: "inset 0 1px 2px 0 rgba(184, 164, 142, 0.06)";
+};
+type Shadows = typeof shadows;
+
+declare const animations: {
+    readonly durations: {
+        readonly fast: "150ms";
+        readonly default: "200ms";
+        readonly slow: "350ms";
+        readonly slower: "500ms";
+    };
+    readonly easings: {
+        readonly default: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly inOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+    readonly transitions: {
+        readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly default: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly slow: "350ms cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly hoverLift: "translateY(-2px)";
+};
+type Animations = typeof animations;
+
+declare const tailwindPreset: {
+    colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            elevated: string;
+        };
+        sand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            inverse: string;
+        };
+        status: {
+            pending: string;
+            approved: string;
+            paid: string;
+            error: string;
+        };
+    };
+    fontFamily: {
+        heading: string[];
+        body: string[];
+        mono: string[];
+    };
+    borderRadius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+};
+
+export { type Animations, type Colors, type Radii, type RadiiPx, type Shadows, type Spacing, type Typography, animations, colors, radii, radiiPx, shadows, spacing, tailwindPreset, typography };

package/dist/index.d.ts

@@ -0,0 +1,253 @@
+declare const colors: {
+    readonly background: {
+        readonly primary: "#FAF9F6";
+        readonly secondary: "#F5F3EF";
+        readonly tertiary: "#EFECE6";
+        readonly elevated: "#FFFFFF";
+    };
+    readonly sand: {
+        readonly 50: "#F9F7F4";
+        readonly 100: "#F2EDE6";
+        readonly 200: "#E5DDD1";
+        readonly 300: "#D4C8B8";
+        readonly 400: "#C4B49E";
+        readonly 500: "#B8A48E";
+        readonly 600: "#A08A6E";
+        readonly 700: "#86715A";
+        readonly 800: "#6B5A48";
+        readonly 900: "#544737";
+    };
+    readonly text: {
+        readonly primary: "#2C2824";
+        readonly secondary: "#5C574F";
+        readonly tertiary: "#8A847A";
+        readonly inverse: "#FAF9F6";
+    };
+    readonly status: {
+        readonly pending: {
+            readonly background: "#FEF3C7";
+            readonly text: "#92400E";
+            readonly border: "#FCD34D";
+            readonly dot: "#D4B86A";
+        };
+        readonly approved: {
+            readonly background: "#D1FAE5";
+            readonly text: "#065F46";
+            readonly border: "#6EE7B7";
+            readonly dot: "#8DB580";
+        };
+        readonly paid: {
+            readonly background: "#DBEAFE";
+            readonly text: "#1E40AF";
+            readonly border: "#93C5FD";
+            readonly dot: "#60A5FA";
+        };
+        readonly error: {
+            readonly background: "#FEE2E2";
+            readonly text: "#991B1B";
+            readonly border: "#FCA5A5";
+            readonly dot: "#C4796B";
+        };
+        readonly success: {
+            readonly background: "#D1FAE5";
+            readonly text: "#065F46";
+            readonly border: "#6EE7B7";
+            readonly dot: "#8DB580";
+        };
+        readonly warning: {
+            readonly background: "#FEF3C7";
+            readonly text: "#92400E";
+            readonly border: "#FCD34D";
+            readonly dot: "#D4B86A";
+        };
+    };
+    readonly semantic: {
+        readonly success: "#8DB580";
+        readonly warning: "#D4B86A";
+        readonly error: "#C4796B";
+        readonly info: "#60A5FA";
+    };
+    readonly border: {
+        readonly subtle: "rgba(184, 164, 142, 0.15)";
+        readonly default: "rgba(184, 164, 142, 0.25)";
+        readonly strong: "rgba(184, 164, 142, 0.4)";
+    };
+};
+type Colors = typeof colors;
+
+declare const typography: {
+    readonly fonts: {
+        readonly heading: "\"DM Serif Display\", Georgia, serif";
+        readonly body: "\"DM Sans\", system-ui, sans-serif";
+        readonly mono: "\"JetBrains Mono\", Consolas, monospace";
+    };
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeights: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeights: {
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+    };
+};
+type Typography = typeof typography;
+
+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 2.5: "0.625rem";
+    readonly 3: "0.75rem";
+    readonly 3.5: "0.875rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+    readonly 11: "2.75rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 28: "7rem";
+    readonly 32: "8rem";
+};
+declare const radii: {
+    readonly none: "0";
+    readonly sm: "0.5rem";
+    readonly default: "0.5rem";
+    readonly md: "0.625rem";
+    readonly lg: "0.875rem";
+    readonly xl: "1rem";
+    readonly '2xl': "1.5rem";
+    readonly full: "9999px";
+};
+declare const radiiPx: {
+    readonly none: 0;
+    readonly sm: 8;
+    readonly default: 8;
+    readonly md: 10;
+    readonly lg: 14;
+    readonly xl: 16;
+    readonly '2xl': 24;
+    readonly full: 9999;
+};
+type Spacing = typeof spacing;
+type Radii = typeof radii;
+type RadiiPx = typeof radiiPx;
+
+declare const shadows: {
+    readonly none: "none";
+    readonly sm: string;
+    readonly default: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly elevated: string;
+    readonly hover: "0 2px 8px rgba(26,26,26,0.06), 0 8px 24px rgba(26,26,26,0.05)";
+    readonly button: "0 2px 8px rgba(26,26,26,0.12)";
+    readonly card: "0 4px 24px rgba(26,26,26,0.04), 0 12px 48px rgba(26,26,26,0.03)";
+    readonly inner: "inset 0 1px 2px 0 rgba(184, 164, 142, 0.06)";
+};
+type Shadows = typeof shadows;
+
+declare const animations: {
+    readonly durations: {
+        readonly fast: "150ms";
+        readonly default: "200ms";
+        readonly slow: "350ms";
+        readonly slower: "500ms";
+    };
+    readonly easings: {
+        readonly default: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly inOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+    readonly transitions: {
+        readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly default: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly slow: "350ms cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly hoverLift: "translateY(-2px)";
+};
+type Animations = typeof animations;
+
+declare const tailwindPreset: {
+    colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            elevated: string;
+        };
+        sand: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            inverse: string;
+        };
+        status: {
+            pending: string;
+            approved: string;
+            paid: string;
+            error: string;
+        };
+    };
+    fontFamily: {
+        heading: string[];
+        body: string[];
+        mono: string[];
+    };
+    borderRadius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+};
+
+export { type Animations, type Colors, type Radii, type RadiiPx, type Shadows, type Spacing, type Typography, animations, colors, radii, radiiPx, shadows, spacing, tailwindPreset, typography };