@createnew/tokens 0.1.0

package/README.md

@@ -0,0 +1,64 @@
+# @createnew/tokens
+
+Design tokens for the CreateNew Design System.
+
+## Installation
+
+```bash
+npm install @createnew/tokens
+```
+
+## Usage
+
+### CSS Custom Properties
+
+Import the CSS file to get all tokens as CSS custom properties:
+
+```css
+@import "@createnew/tokens/tokens.css";
+```
+
+Or in your HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@createnew/tokens/dist/tokens.css">
+```
+
+### TypeScript
+
+Import tokens as TypeScript objects:
+
+```typescript
+import { tokens, semanticTokens, textStyles } from "@createnew/tokens";
+
+const primaryColor = tokens.semantic.color.brand.primary;
+```
+
+## Token Structure
+
+- **Core Tokens**: Raw values (colors, spacing, radii, shadows, typography)
+- **Semantic Tokens**: Component-agnostic semantic values (surface, text, brand, border)
+- **Text Styles**: Composite typographic styles (body, caption, title, display)
+
+## Building
+
+```bash
+npm run build
+```
+
+This generates:
+- `dist/tokens.js` - TypeScript exports
+- `dist/tokens.css` - CSS custom properties (generated by Style Dictionary)
+
+### Token Source
+
+Tokens are defined in JSON format in the `tokens/` directory:
+- `tokens/core.json` - Core design tokens (colors, spacing, typography, etc.)
+- `tokens/semantic.json` - Semantic tokens (references core tokens)
+- `tokens/text-styles.json` - Composite text styles
+
+Style Dictionary transforms these JSON files into CSS custom properties and TypeScript exports.
+
+## Documentation
+
+For comprehensive documentation, architecture details, and complete examples, see the [main README](../../README.md).

package/dist/tokens.css

@@ -0,0 +1,306 @@
+/**
+ * Font Face Declarations for CreateNew Design System
+ * 
+ * Rebond Grotesque: Used primarily for headings on CreateNew.co
+ * Geist: Used for body text on CreateNew.co
+ */
+
+/* Geist - Body Font (loaded from Google Fonts) */
+/* Using @import for reliable Google Fonts loading */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&display=swap');
+
+/* Rebond Grotesque - Heading Font */
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Hairline.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Thin.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Extralight.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-Extrabold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Italic variants */
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-ThinItalic.woff2') format('woff2');
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-ExtralightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-LightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-RegularItalic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-SemiboldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Rebond Grotesque';
+  src: local(''), url('/fonts/RebondGrotesque-ExtraboldItalic.woff2') format('woff2');
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-transparent: transparent;
+  --color-surface-default: #ffffff;
+  --color-surface-raised: #eceff3;
+  --color-surface-sunken: #f1f4f7;
+  --color-surface-hero: #ffffff;
+  --color-surface-dark: #0d0d12;
+  --color-surface-footer: #0d0d12;
+  --color-surface-warm: #fbfaf9;
+  --color-foreground-default: #0d0d12;
+  --color-foreground-muted: #666d80;
+  --color-foreground-muted-on-dark: #818899;
+  --color-foreground-inverted: #ffffff;
+  --color-brand-primary: #91ba00;
+  --color-brand-accent: #607a05;
+  --color-brand-violet: #c083e2;
+  --color-brand-purple: #8a5ae0;
+  --color-brand-gold: #ffc400;
+  --color-brand-orange: #ff6200;
+  --color-brand-blue: #0085ff;
+  --color-brand-teal: #00cc74;
+  --color-brand-cyan: #33d7f2;
+  --color-border-subtle: #dfe1e7;
+  --color-border-strong: #666d80;
+  --color-border-warm: #f3efec;
+  --color-overlay: rgba(0, 0, 0, 0.4);
+  --color-status-error: #ef4444;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 12px;
+  --spacing-l: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 48px;
+  --radius-xs: 4px;
+  --radius-s: 6px;
+  --radius-m: 8px;
+  --radius-l: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-m: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-l: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --font-family-heading: 'Rebond Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-md: 15px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-size-5xl: 32px;
+  --font-size-6xl: 36px;
+  --font-size-7xl: 40px;
+  --font-size-8xl: 48px;
+  --font-size-9xl: 56px;
+  --font-size-10xl: 64px;
+  --line-height-none: 1;
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.75;
+  --line-height-compact: 1.143;
+  --line-height-tight-fixed: 1.067;
+  --line-height-medium: 1.538;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --breakpoint-mobile: 810px;
+  --breakpoint-tablet: 1199px;
+  --breakpoint-desktop: 1200px;
+  --breakpoint-container-max: 1440px;
+  --breakpoint-small-mobile: 390px;
+  --text-display-font-size: 64px;
+  --text-display-line-height: 1;
+  --text-display-font-weight: 600;
+  --text-display-font-family: 'Rebond Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-heading-2-font-size: 56px;
+  --text-heading-2-line-height: 1;
+  --text-heading-2-font-weight: 600;
+  --text-heading-2-font-family: 'Rebond Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-heading-3-font-size: 32px;
+  --text-heading-3-line-height: 1.2;
+  --text-heading-3-font-weight: 500;
+  --text-heading-3-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-title-font-size: 20px;
+  --text-title-line-height: 1.3;
+  --text-title-font-weight: 500;
+  --text-title-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-body-font-size: 16px;
+  --text-body-line-height: 1.6;
+  --text-body-font-weight: 400;
+  --text-body-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-body-strong-font-size: 16px;
+  --text-body-strong-line-height: 1.6;
+  --text-body-strong-font-weight: 500;
+  --text-body-strong-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-nav-label-font-size: 15px;
+  --text-nav-label-line-height: 1.067;
+  --text-nav-label-font-weight: 500;
+  --text-nav-label-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-label-font-size: 14px;
+  --text-label-line-height: 1.143;
+  --text-label-font-weight: 500;
+  --text-label-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-caption-font-size: 14px;
+  --text-caption-line-height: 1.143;
+  --text-caption-font-weight: 400;
+  --text-caption-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --text-link-small-font-size: 13px;
+  --text-link-small-line-height: 1.538;
+  --text-link-small-font-weight: 400;
+  --text-link-small-font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+
+/* Dark Mode Theme */
+[data-theme="dark"] {
+  --color-surface-default: #0d0d12;
+  --color-surface-raised: #36384a;
+  --color-surface-sunken: #0d0d12;
+  --color-surface-hero: #1a1a24;
+  --color-surface-dark: #f1f4f7;
+  --color-surface-footer: #1a1a24;
+  --color-surface-warm: #36384a;
+  --color-foreground-default: #ffffff;
+  --color-foreground-muted: #818899;
+  --color-foreground-mutedOnDark: #666d80;
+  --color-foreground-inverted: #0d0d12;
+  --color-brand-primary: #91ba00;
+  --color-brand-accent: #607a05;
+  --color-border-subtle: #36384a;
+  --color-border-strong: #666d80;
+  --color-border-warm: #36384a;
+  --color-overlay: rgba(0, 0, 0, 0.6);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-m: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --shadow-l: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+}