@handled-ai/design-system 0.8.0 → 0.9.0

package/src/styles/globals.css

@@ -0,0 +1,299 @@
+/**
+ * @handled-ai/design-system/styles.css
+ * Tailwind v4 preset — theme tokens, base styles, and source scanning.
+ *
+ * Usage in consumer apps:
+ *   @import "@handled-ai/design-system/styles.css";
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Tell Tailwind to scan the DS source files for class names.
+   Path is relative to this file's location (src/styles/). */
+@source "../**/*.{ts,tsx}";
+
+:root {
+  --font-size: 14px;
+  --background: #ffffff;
+  --foreground: #000000;
+  --card: #ffffff;
+  --card-foreground: #000000;
+  --popover: #ffffff;
+  --popover-foreground: #000000;
+  --primary: #000000;
+  --primary-foreground: #ffffff;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #000000;
+  --muted: #f8f8f8;
+  --muted-foreground: #666666;
+  --accent: #f0f0f0;
+  --accent-foreground: #000000;
+  --destructive: #000000;
+  --destructive-foreground: #ffffff;
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --input-background: #f8f8f8;
+  --switch-background: #e0e0e0;
+  --font-weight-semibold: 600;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: rgba(0, 0, 0, 0.2);
+
+  /* Grayscale system for data visualization */
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #e5e5e5;
+  --gray-300: #d4d4d4;
+  --gray-400: #a3a3a3;
+  --gray-500: #737373;
+  --gray-600: #525252;
+  --gray-700: #404040;
+  --gray-800: #262626;
+  --gray-900: #171717;
+
+  /* Priority/Score colors */
+  --priority-low: var(--gray-300);
+  --priority-medium: var(--gray-600);
+  --priority-high: var(--gray-900);
+  --score-low: var(--gray-400);
+  --score-medium: var(--gray-700);
+  --score-high: var(--gray-900);
+
+  /* Brand colors */
+  --brand-purple: #6B5FCF;
+
+  --chart-1: var(--gray-900);
+  --chart-2: var(--gray-700);
+  --chart-3: var(--gray-500);
+  --chart-4: var(--gray-400);
+  --chart-5: var(--gray-300);
+
+  --radius: 0.625rem;
+
+  --sidebar: #fafafa;
+  --sidebar-foreground: #000000;
+  --sidebar-primary: #000000;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f5f5f5;
+  --sidebar-accent-foreground: #000000;
+  --sidebar-border: #f0f0f0;
+  --sidebar-ring: rgba(0, 0, 0, 0.2);
+}
+
+.dark {
+  --background: #000000;
+  --foreground: #ffffff;
+  --card: #111111;
+  --card-foreground: #ffffff;
+  --popover: #1a1a1a;
+  --popover-foreground: #ffffff;
+  --primary: #ffffff;
+  --primary-foreground: #000000;
+  --secondary: #1f1f1f;
+  --secondary-foreground: #ffffff;
+  --muted: #2a2a2a;
+  --muted-foreground: #a3a3a3;
+  --accent: #333333;
+  --accent-foreground: #ffffff;
+  --destructive: #ffffff;
+  --destructive-foreground: #000000;
+  --border: #333333;
+  --input: #333333;
+  --input-background: #1a1a1a;
+  --switch-background: #404040;
+  --ring: rgba(255, 255, 255, 0.2);
+
+  /* Dark mode grayscale system */
+  --gray-50: #0a0a0a;
+  --gray-100: #171717;
+  --gray-200: #262626;
+  --gray-300: #404040;
+  --gray-400: #525252;
+  --gray-500: #737373;
+  --gray-600: #a3a3a3;
+  --gray-700: #d4d4d4;
+  --gray-800: #e5e5e5;
+  --gray-900: #f5f5f5;
+
+  /* Priority/Score colors inverted for dark mode */
+  --priority-low: var(--gray-400);
+  --priority-medium: var(--gray-600);
+  --priority-high: var(--gray-900);
+  --score-low: var(--gray-500);
+  --score-medium: var(--gray-700);
+  --score-high: var(--gray-900);
+
+  /* Brand colors */
+  --brand-purple: #6B5FCF;
+
+  --chart-1: var(--gray-900);
+  --chart-2: var(--gray-700);
+  --chart-3: var(--gray-600);
+  --chart-4: var(--gray-500);
+  --chart-5: var(--gray-400);
+
+  --sidebar: #0f0f0f;
+  --sidebar-foreground: #ffffff;
+  --sidebar-primary: #ffffff;
+  --sidebar-primary-foreground: #000000;
+  --sidebar-accent: #262626;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #262626;
+  --sidebar-ring: rgba(255, 255, 255, 0.2);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+
+  /* Grayscale colors for Tailwind */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+
+  /* Priority/Score colors */
+  --color-priority-low: var(--priority-low);
+  --color-priority-medium: var(--priority-medium);
+  --color-priority-high: var(--priority-high);
+  --color-score-low: var(--score-low);
+  --color-score-medium: var(--score-medium);
+  --color-score-high: var(--score-high);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-brand-purple: var(--brand-purple);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    font-variation-settings: normal;
+  }
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: 1.285rem; /* 18px */
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.01em;
+  }
+
+  h2 {
+    font-size: 1.143rem; /* 16px */
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.01em;
+  }
+
+  h3 {
+    font-size: 1rem; /* 14px */
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+  }
+
+  h4 {
+    font-size: 0.929rem; /* 13px */
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: -0.005em;
+  }
+
+  p {
+    font-size: 1rem; /* 14px */
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4;
+  }
+
+  label {
+    font-size: 0.929rem; /* 13px */
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  button {
+    font-size: 0.929rem; /* 13px */
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  input,
+  textarea {
+    font-size: 0.929rem; /* 13px */
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4;
+    color: var(--foreground);
+  }
+
+  small,
+  .text-small {
+    font-size: 0.857rem; /* 12px */
+    font-weight: var(--font-weight-normal);
+    line-height: 1.3;
+  }
+
+  .text-caption {
+    font-size: 0.786rem; /* 11px */
+    font-weight: var(--font-weight-normal);
+    line-height: 1.3;
+    color: var(--muted-foreground);
+  }
+}