@decidrcn/ui/dist/styles.css

Decidr UI - A comprehensive React component library built with shadcn/ui and Radix UI. Supports React, Next.js, Rails, and works with npm, yarn, and pnpm.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Typography System - Decidr Theme */
  :root {
    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */
    
    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* Color System - Light Theme */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
  
  /* Widget-specific scoped styles */
  .decidr-widget {
    --dsw-background: 0 0% 100%;
    --dsw-foreground: 222.2 84% 4.9%;
    --dsw-card: 0 0% 100%;
    --dsw-card-foreground: 222.2 84% 4.9%;
    --dsw-popover: 0 0% 100%;
    --dsw-popover-foreground: 222.2 84% 4.9%;
    --dsw-primary: 222.2 47.4% 11.2%;
    --dsw-primary-foreground: 210 40% 98%;
    --dsw-secondary: 210 40% 96%;
    --dsw-secondary-foreground: 222.2 84% 4.9%;
    --dsw-muted: 210 40% 96%;
    --dsw-muted-foreground: 215.4 16.3% 46.9%;
    --dsw-accent: 210 40% 96%;
    --dsw-accent-foreground: 222.2 84% 4.9%;
    --dsw-destructive: 0 84.2% 60.2%;
    --dsw-destructive-foreground: 210 40% 98%;
    --dsw-border: 214.3 31.8% 91.4%;
    --dsw-input: 214.3 31.8% 91.4%;
    --dsw-ring: 222.2 84% 4.9%;
    --dsw-radius: 0.5rem;
  }
  
  .decidr-widget.dark {
    --dsw-background: 222.2 84% 4.9%;
    --dsw-foreground: 210 40% 98%;
    --dsw-card: 222.2 84% 4.9%;
    --dsw-card-foreground: 210 40% 98%;
    --dsw-popover: 222.2 84% 4.9%;
    --dsw-popover-foreground: 210 40% 98%;
    --dsw-primary: 210 40% 98%;
    --dsw-primary-foreground: 222.2 47.4% 11.2%;
    --dsw-secondary: 217.2 32.6% 17.5%;
    --dsw-secondary-foreground: 210 40% 98%;
    --dsw-muted: 217.2 32.6% 17.5%;
    --dsw-muted-foreground: 215 20.2% 65.1%;
    --dsw-accent: 217.2 32.6% 17.5%;
    --dsw-accent-foreground: 210 40% 98%;
    --dsw-destructive: 0 62.8% 30.6%;
    --dsw-destructive-foreground: 210 40% 98%;
    --dsw-border: 217.2 32.6% 17.5%;
    --dsw-input: 217.2 32.6% 17.5%;
    --dsw-ring: 212.7 26.8% 83.9%;
  }
  
  /* Scoped utility classes for widget isolation */
  .decidr-widget .dsw-bg-background { background-color: hsl(var(--dsw-background)); }
  .decidr-widget .dsw-bg-foreground { background-color: hsl(var(--dsw-foreground)); }
  .decidr-widget .dsw-bg-primary { background-color: hsl(var(--dsw-primary)); }
  .decidr-widget .dsw-bg-secondary { background-color: hsl(var(--dsw-secondary)); }
  .decidr-widget .dsw-bg-muted { background-color: hsl(var(--dsw-muted)); }
  .decidr-widget .dsw-bg-accent { background-color: hsl(var(--dsw-accent)); }
  .decidr-widget .dsw-bg-destructive { background-color: hsl(var(--dsw-destructive)); }
  
  .decidr-widget .dsw-text-background { color: hsl(var(--dsw-background)); }
  .decidr-widget .dsw-text-foreground { color: hsl(var(--dsw-foreground)); }
  .decidr-widget .dsw-text-primary { color: hsl(var(--dsw-primary)); }
  .decidr-widget .dsw-text-secondary { color: hsl(var(--dsw-secondary)); }
  .decidr-widget .dsw-text-muted { color: hsl(var(--dsw-muted)); }
  .decidr-widget .dsw-text-accent { color: hsl(var(--dsw-accent)); }
  .decidr-widget .dsw-text-destructive { color: hsl(var(--dsw-destructive)); }
  
  .decidr-widget .dsw-border-border { border-color: hsl(var(--dsw-border)); }
  .decidr-widget .dsw-border-input { border-color: hsl(var(--dsw-input)); }
  
  /* Standard utility classes (for non-widget use) */
  .bg-background { background-color: hsl(var(--background)); }
  .bg-foreground { background-color: hsl(var(--foreground)); }
  .bg-primary { background-color: hsl(var(--primary)); }
  .bg-secondary { background-color: hsl(var(--secondary)); }
  .bg-muted { background-color: hsl(var(--muted)); }
  .bg-accent { background-color: hsl(var(--accent)); }
  .bg-destructive { background-color: hsl(var(--destructive)); }
  
  .text-background { color: hsl(var(--background)); }
  .text-foreground { color: hsl(var(--foreground)); }
  .text-primary { color: hsl(var(--primary)); }
  .text-secondary { color: hsl(var(--secondary)); }
  .text-muted { color: hsl(var(--muted)); }
  .text-accent { color: hsl(var(--accent)); }
  .text-destructive { color: hsl(var(--destructive)); }
  
  .border-border { border-color: hsl(var(--border)); }
  .border-input { border-color: hsl(var(--input)); }
}