tharaday 0.1.1

package/src/styles/ds.css

@@ -0,0 +1,12 @@
+/* Layered Design Tokens (foundation -> theme refs -> semantics) */
+@import 'tokens.css';
+@import 'themes/light.css';
+@import 'themes/dark.css';
+@import 'themes/retro.css';
+@import 'semantic.css';
+
+:root {
+  font-family: var(--ds-font-family-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/src/styles/semantic.css

@@ -0,0 +1,56 @@
+:root {
+  /* Surfaces */
+  --ds-surface-0: var(--ds-ref-surface-0);
+  --ds-surface-1: var(--ds-ref-surface-1);
+  --ds-surface-2: var(--ds-ref-surface-2);
+
+  /* Text */
+  --ds-text-1: var(--ds-ref-text-1);
+  --ds-text-2: var(--ds-ref-text-2);
+  --ds-text-on-brand: var(--ds-ref-text-on-brand);
+  --ds-text-disabled: var(--ds-ref-text-disabled);
+
+  /* Borders */
+  --ds-border-1: var(--ds-ref-border-1);
+  --ds-border-2: var(--ds-ref-border-2);
+  --ds-border-disabled: var(--ds-ref-border-disabled);
+
+  /* Focus */
+  --ds-ring: var(--ds-ref-ring);
+  --ds-ring-offset: var(--ds-ref-ring-offset);
+
+  /* Intents */
+  --ds-info: var(--ds-ref-info);
+  --ds-success: var(--ds-ref-success);
+  --ds-warning: var(--ds-ref-warning);
+  --ds-danger: var(--ds-ref-danger);
+  --ds-neutral: var(--ds-ref-neutral);
+
+  --ds-info-hover: var(--ds-ref-info-hover);
+  --ds-info-active: var(--ds-ref-info-active);
+  --ds-info-subtle: var(--ds-ref-info-subtle);
+
+  --ds-success-hover: var(--ds-ref-success-hover);
+  --ds-success-active: var(--ds-ref-success-active);
+  --ds-success-subtle: var(--ds-ref-success-subtle);
+
+  --ds-warning-hover: var(--ds-ref-warning-hover);
+  --ds-warning-active: var(--ds-ref-warning-active);
+  --ds-warning-subtle: var(--ds-ref-warning-subtle);
+
+  --ds-danger-hover: var(--ds-ref-danger-hover);
+  --ds-danger-active: var(--ds-ref-danger-active);
+  --ds-danger-subtle: var(--ds-ref-danger-subtle);
+
+  --ds-neutral-hover: var(--ds-ref-neutral-hover);
+  --ds-neutral-active: var(--ds-ref-neutral-active);
+  --ds-neutral-subtle: var(--ds-ref-neutral-subtle);
+
+  /* Convenience defaults */
+  --ds-border-default: var(--ds-border-1);
+  --ds-surface-disabled: var(--ds-ref-surface-disabled);
+
+  /* Skeleton */
+  --ds-skeleton: var(--ds-ref-skeleton);
+  --ds-skeleton-highlight: var(--ds-ref-skeleton-highlight);
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,58 @@
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --ds-ref-surface-0: var(--neutral-950);
+  --ds-ref-surface-1: var(--neutral-900);
+  --ds-ref-surface-2: var(--neutral-800);
+
+  /* Text */
+  --ds-ref-text-1: var(--neutral-0);
+  --ds-ref-text-2: var(--neutral-300);
+  --ds-ref-text-on-brand: var(--neutral-950);
+
+  /* Borders */
+  --ds-ref-border-1: var(--neutral-800);
+  --ds-ref-border-2: var(--neutral-900);
+
+  /* Focus */
+  --ds-ref-ring: var(--blue-400);
+  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+
+  /* Intents (base) */
+  --ds-ref-info: var(--blue-500);
+  --ds-ref-success: var(--green-500);
+  --ds-ref-warning: var(--orange-500);
+  --ds-ref-danger: var(--red-500);
+  --ds-ref-neutral: var(--neutral-500);
+
+  /* Intents (states) */
+  --ds-ref-info-hover: var(--blue-400);
+  --ds-ref-info-active: var(--blue-300);
+  --ds-ref-info-subtle: var(--blue-950);
+
+  --ds-ref-success-hover: var(--green-400);
+  --ds-ref-success-active: var(--green-300);
+  --ds-ref-success-subtle: var(--green-950);
+
+  --ds-ref-warning-hover: var(--orange-400);
+  --ds-ref-warning-active: var(--orange-300);
+  --ds-ref-warning-subtle: var(--orange-950);
+
+  --ds-ref-danger-hover: var(--red-400);
+  --ds-ref-danger-active: var(--red-300);
+  --ds-ref-danger-subtle: var(--red-950);
+
+  --ds-ref-neutral-hover: var(--neutral-400);
+  --ds-ref-neutral-active: var(--neutral-300);
+  --ds-ref-neutral-subtle: var(--neutral-900);
+
+  /* Disabled */
+  --ds-ref-text-disabled: var(--neutral-500);
+  --ds-ref-surface-disabled: var(--neutral-900);
+  --ds-ref-border-disabled: var(--neutral-800);
+
+  /* Skeleton */
+  --ds-ref-skeleton: var(--neutral-800);
+  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.08);
+}

package/src/styles/themes/light.css

@@ -0,0 +1,58 @@
+:root {
+  color-scheme: light;
+
+  /* Surfaces */
+  --ds-ref-surface-0: var(--neutral-0);
+  --ds-ref-surface-1: var(--neutral-50);
+  --ds-ref-surface-2: var(--neutral-100);
+
+  /* Text */
+  --ds-ref-text-1: var(--neutral-900);
+  --ds-ref-text-2: var(--neutral-600);
+  --ds-ref-text-on-brand: var(--neutral-0);
+
+  /* Borders */
+  --ds-ref-border-1: var(--neutral-200);
+  --ds-ref-border-2: var(--neutral-100);
+
+  /* Focus */
+  --ds-ref-ring: var(--blue-500);
+  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+
+  /* Intents (base) */
+  --ds-ref-info: var(--blue-500);
+  --ds-ref-success: var(--green-600);
+  --ds-ref-warning: var(--orange-500);
+  --ds-ref-danger: var(--red-500);
+  --ds-ref-neutral: var(--neutral-600);
+
+  /* Intents (states) */
+  --ds-ref-info-hover: var(--blue-600);
+  --ds-ref-info-active: var(--blue-700);
+  --ds-ref-info-subtle: var(--blue-50);
+
+  --ds-ref-success-hover: var(--green-700);
+  --ds-ref-success-active: var(--green-800);
+  --ds-ref-success-subtle: var(--green-50);
+
+  --ds-ref-warning-hover: var(--orange-600);
+  --ds-ref-warning-active: var(--orange-700);
+  --ds-ref-warning-subtle: var(--orange-50);
+
+  --ds-ref-danger-hover: var(--red-600);
+  --ds-ref-danger-active: var(--red-700);
+  --ds-ref-danger-subtle: var(--red-50);
+
+  --ds-ref-neutral-hover: var(--neutral-700);
+  --ds-ref-neutral-active: var(--neutral-800);
+  --ds-ref-neutral-subtle: var(--neutral-50);
+
+  /* Disabled */
+  --ds-ref-text-disabled: var(--neutral-400);
+  --ds-ref-surface-disabled: var(--neutral-100);
+  --ds-ref-border-disabled: var(--neutral-200);
+
+  /* Skeleton */
+  --ds-ref-skeleton: var(--neutral-200);
+  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
+}

package/src/styles/themes/retro.css

@@ -0,0 +1,58 @@
+[data-theme='retro'] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --ds-ref-surface-0: var(--retro-yellow-50);
+  --ds-ref-surface-1: var(--retro-gray-50);
+  --ds-ref-surface-2: var(--retro-gray-100);
+
+  /* Text */
+  --ds-ref-text-1: var(--retro-brown-900);
+  --ds-ref-text-2: var(--retro-gray-600);
+  --ds-ref-text-on-brand: var(--retro-yellow-50);
+
+  /* Borders */
+  --ds-ref-border-1: var(--retro-gray-200);
+  --ds-ref-border-2: var(--retro-gray-100);
+
+  /* Focus */
+  --ds-ref-ring: var(--retro-teal-500);
+  --ds-ref-ring-offset: var(--ds-ref-surface-0);
+
+  /* Intents (base) */
+  --ds-ref-info: var(--retro-teal-500);
+  --ds-ref-success: var(--green-600);
+  --ds-ref-warning: var(--retro-orange-500);
+  --ds-ref-danger: var(--red-600);
+  --ds-ref-neutral: var(--retro-gray-500);
+
+  /* Intents (states) */
+  --ds-ref-info-hover: var(--retro-teal-500);
+  --ds-ref-info-active: var(--retro-teal-500);
+  --ds-ref-info-subtle: var(--retro-teal-50);
+
+  --ds-ref-success-hover: var(--green-700);
+  --ds-ref-success-active: var(--green-800);
+  --ds-ref-success-subtle: var(--green-50);
+
+  --ds-ref-warning-hover: var(--retro-orange-500);
+  --ds-ref-warning-active: var(--retro-orange-500);
+  --ds-ref-warning-subtle: var(--orange-50);
+
+  --ds-ref-danger-hover: var(--red-700);
+  --ds-ref-danger-active: var(--red-800);
+  --ds-ref-danger-subtle: var(--red-50);
+
+  --ds-ref-neutral-hover: var(--retro-gray-600);
+  --ds-ref-neutral-active: var(--retro-gray-700);
+  --ds-ref-neutral-subtle: var(--retro-gray-50);
+
+  /* Disabled */
+  --ds-ref-text-disabled: var(--retro-gray-300);
+  --ds-ref-surface-disabled: var(--retro-gray-100);
+  --ds-ref-border-disabled: var(--retro-gray-200);
+
+  /* Skeleton */
+  --ds-ref-skeleton: var(--retro-gray-100);
+  --ds-ref-skeleton-highlight: rgba(255, 255, 255, 0.4);
+}

package/src/styles/tokens.css

@@ -0,0 +1,138 @@
+:root {
+  /* Neutral scale */
+  --neutral-0: #ffffff;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #eeeeee;
+  --neutral-300: #e0e0e0;
+  --neutral-400: #a1a1aa; /* Brighter: from #9ca3af */
+  --neutral-500: #71717a; /* Brighter: from #6b7280 */
+  --neutral-600: #52525b; /* Brighter: from #4b5563 */
+  --neutral-700: #3f3f46; /* Brighter: from #374151 */
+  --neutral-800: #27272a; /* Brighter: from #1f2937 */
+  --neutral-900: #18181b; /* Brighter: from #111827 */
+  --neutral-950: #09090b; /* Brighter: from #030712 */
+
+  /* Info / Primary (Blue) */
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  --blue-950: #172554;
+
+  /* Success (Green) */
+  --green-50: #f0fdf4; /* From #ecfdf5 */
+  --green-100: #dcfce7; /* From #d1fae5 */
+  --green-200: #bbf7d0; /* From #a7f3d0 */
+  --green-300: #86efac; /* From #6ee7b7 */
+  --green-400: #4ade80; /* Brighter: from #34d399 */
+  --green-500: #22c55e; /* Brighter: from #10b981 */
+  --green-600: #16a34a; /* Brighter: from #059669 */
+  --green-700: #15803d; /* Brighter: from #047857 */
+  --green-800: #166534;
+  --green-900: #14532d;
+  --green-950: #052e16;
+
+  /* Danger (Red) */
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+  --red-950: #450a0a;
+
+  /* Warning (Amber/Orange) */
+  --orange-50: #fffbeb;
+  --orange-100: #fef3c7;
+  --orange-200: #fde68a;
+  --orange-300: #fcd34d;
+  --orange-400: #fbbf24;
+  --orange-500: #f59e0b;
+  --orange-600: #d97706;
+  --orange-700: #b45309;
+  --orange-800: #92400e;
+  --orange-900: #78350f;
+  --orange-950: #451a03;
+
+  /* Retro palette */
+  --retro-yellow-50: #fefce8;
+  --retro-yellow-500: #eab308;
+  --retro-yellow-600: #ca8a04;
+  --retro-orange-500: #f97316;
+  --retro-brown-500: #78350f;
+  --retro-brown-900: #451a03;
+  --retro-teal-50: #e6fffa;
+  --retro-teal-500: #14b8a6;
+  --retro-gray-50: #f7f7f5;
+  --retro-gray-100: #e3e3dc;
+  --retro-gray-200: #cfcfc5;
+  --retro-gray-300: #b9b9ae;
+  --retro-gray-400: #a3a398;
+  --retro-gray-500: #8d8d82;
+  --retro-gray-600: #717168;
+  --retro-gray-700: #56564f;
+  --retro-gray-800: #3c3c37;
+  --retro-gray-900: #21211e;
+
+  /* --- TYPOGRAPHY SCALE --- */
+
+  --ds-font-family-base:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
+  --ds-font-family-mono: ui-monospace, monospace;
+
+  --ds-font-size-xs: 0.75rem; /* 12px */
+  --ds-font-size-sm: 0.875rem; /* 14px */
+  --ds-font-size-base: 1rem; /* 16px */
+  --ds-font-size-lg: 1.125rem; /* 18px */
+  --ds-font-size-xl: 1.25rem; /* 20px */
+  --ds-font-size-2xl: 1.5rem; /* 24px */
+
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-bold: 700;
+
+  --ds-line-height-tight: 1.25;
+  --ds-line-height-base: 1.5;
+
+  /* --- SPACING SCALE (Factor of 4) --- */
+
+  --ds-space-1: 0.25rem; /* 4px */
+  --ds-space-2: 0.5rem; /* 8px */
+  --ds-space-3: 0.75rem; /* 12px */
+  --ds-space-4: 1rem; /* 16px */
+  --ds-space-5: 1.25rem; /* 20px */
+  --ds-space-6: 1.5rem; /* 24px */
+  --ds-space-8: 2rem; /* 32px */
+  --ds-space-10: 2.5rem; /* 40px */
+  --ds-space-12: 3rem; /* 48px */
+  --ds-space-14: 3.5rem; /* 56px */
+  --ds-space-16: 4rem; /* 64px */
+
+  /* --- BORDERS & SHADOWS --- */
+
+  --ds-radius-sm: 0.25rem;
+  --ds-radius-md: 0.5rem;
+  --ds-radius-lg: 1rem;
+  --ds-radius-full: 9999px;
+
+  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* --- ANIMATION --- */
+
+  --ds-transition-fast: 150ms ease;
+  --ds-transition-base: 250ms ease;
+}

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      tsconfigPath: './tsconfig.app.json',
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'DesignSystem',
+      fileName: 'ds',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'jsxRuntime',
+        },
+      },
+    },
+  },
+});