@arolariu/components/src/index.css

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

/*
 * @arolariu/components — Design Tokens
 * Base UI + Mira-inspired style + Blue theme + Large radius (0.875rem)
 *
 * This file defines the CSS custom properties used across all component modules.
 * Consumers can override any token by redefining the custom property in their own CSS.
 */

:root {
  /* Radius scale */
  --ac-radius: 0.875rem;
  --ac-radius-xs: calc(var(--ac-radius) * 0.4);
  --ac-radius-sm: calc(var(--ac-radius) * 0.6);
  --ac-radius-md: calc(var(--ac-radius) * 0.8);
  --ac-radius-lg: var(--ac-radius);
  --ac-radius-xl: calc(var(--ac-radius) * 1.4);

  /* Core semantic tokens — Light mode */
  --ac-background: oklch(1 0 0);
  --ac-foreground: oklch(0.145 0.004 285.823);
  --ac-card: oklch(1 0 0);
  --ac-card-foreground: oklch(0.145 0.004 285.823);
  --ac-popover: oklch(1 0 0);
  --ac-popover-foreground: oklch(0.145 0.004 285.823);
  --ac-primary: oklch(0.488 0.243 264.376);
  --ac-primary-foreground: oklch(0.97 0.014 254.604);
  --ac-secondary: oklch(0.967 0.001 286.375);
  --ac-secondary-foreground: oklch(0.21 0.006 285.885);
  --ac-muted: oklch(0.967 0.001 286.375);
  --ac-muted-foreground: oklch(0.556 0.002 285.938);
  --ac-accent: oklch(0.967 0.001 286.375);
  --ac-accent-foreground: oklch(0.21 0.006 285.885);
  --ac-destructive: oklch(0.577 0.245 27.325);
  --ac-destructive-foreground: oklch(0.577 0.245 27.325);
  --ac-success: oklch(0.627 0.194 149.214);
  --ac-success-foreground: oklch(0.985 0 0);
  --ac-warning: oklch(0.769 0.188 70.08);
  --ac-warning-foreground: oklch(0.145 0.004 285.823);
  --ac-info: oklch(0.488 0.243 264.376);
  --ac-info-foreground: oklch(0.97 0.014 254.604);
  --ac-border: oklch(0.922 0.004 286.32);
  --ac-input: oklch(0.922 0.004 286.32);
  --ac-ring: oklch(0.488 0.243 264.376);

  /* Chart tokens */
  --ac-chart-1: oklch(0.646 0.222 41.116);
  --ac-chart-2: oklch(0.6 0.118 184.714);
  --ac-chart-3: oklch(0.398 0.07 227.392);
  --ac-chart-4: oklch(0.828 0.189 84.429);
  --ac-chart-5: oklch(0.769 0.188 70.08);

  /* Sidebar tokens */
  --ac-sidebar: oklch(0.985 0 0);
  --ac-sidebar-foreground: oklch(0.145 0.004 285.823);
  --ac-sidebar-primary: oklch(0.488 0.243 264.376);
  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --ac-sidebar-accent: oklch(0.967 0.001 286.375);
  --ac-sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --ac-sidebar-border: oklch(0.922 0.004 286.32);
  --ac-sidebar-ring: oklch(0.488 0.243 264.376);

  /* Mira sizing scale — compact density */
  --ac-size-xs: 1.25rem;   /* 20px — h-5 */
  --ac-size-sm: 1.5rem;    /* 24px — h-6 */
  --ac-size-md: 1.75rem;   /* 28px — h-7 */
  --ac-size-default: 2rem; /* 32px — h-8 */
  --ac-size-lg: 2.25rem;   /* 36px */

  /* Typography scale — Mira compact */
  --ac-text-xs: 0.75rem;
  --ac-text-sm: 0.8125rem;
  --ac-text-base: 0.875rem;
  --ac-text-lg: 1rem;
  --ac-text-xl: 1.125rem;

  /* Spacing scale */
  --ac-space-1: 0.25rem;
  --ac-space-2: 0.5rem;
  --ac-space-3: 0.75rem;
  --ac-space-4: 1rem;
  --ac-space-6: 1.5rem;
  --ac-space-8: 2rem;

  /* Transitions */
  --ac-transition-fast: 100ms ease;
  --ac-transition-normal: 150ms ease;
  --ac-transition-slow: 200ms ease-in-out;
}

/* Dark mode tokens */
.dark,
[data-theme="dark"] {
  --ac-background: oklch(0.145 0.004 285.823);
  --ac-foreground: oklch(0.985 0 0);
  --ac-card: oklch(0.145 0.004 285.823);
  --ac-card-foreground: oklch(0.985 0 0);
  --ac-popover: oklch(0.145 0.004 285.823);
  --ac-popover-foreground: oklch(0.985 0 0);
  --ac-primary: oklch(0.424 0.199 265.638);
  --ac-primary-foreground: oklch(0.97 0.014 254.604);
  --ac-secondary: oklch(0.269 0.006 285.885);
  --ac-secondary-foreground: oklch(0.985 0 0);
  --ac-muted: oklch(0.269 0.006 285.885);
  --ac-muted-foreground: oklch(0.708 0.002 286.067);
  --ac-accent: oklch(0.269 0.006 285.885);
  --ac-accent-foreground: oklch(0.985 0 0);
  --ac-destructive: oklch(0.704 0.191 22.216);
  --ac-destructive-foreground: oklch(0.704 0.191 22.216);
  --ac-success: oklch(0.527 0.164 149.214);
  --ac-success-foreground: oklch(0.985 0 0);
  --ac-warning: oklch(0.669 0.158 70.08);
  --ac-warning-foreground: oklch(0.145 0.004 285.823);
  --ac-info: oklch(0.424 0.199 265.638);
  --ac-info-foreground: oklch(0.97 0.014 254.604);
  --ac-border: oklch(0.269 0.006 285.885);
  --ac-input: oklch(0.269 0.006 285.885);
  --ac-ring: oklch(0.424 0.199 265.638);

  --ac-chart-1: oklch(0.488 0.243 264.376);
  --ac-chart-2: oklch(0.696 0.17 162.48);
  --ac-chart-3: oklch(0.769 0.188 70.08);
  --ac-chart-4: oklch(0.627 0.265 303.9);
  --ac-chart-5: oklch(0.645 0.246 16.439);

  --ac-sidebar: oklch(0.205 0.006 285.885);
  --ac-sidebar-foreground: oklch(0.985 0 0);
  --ac-sidebar-primary: oklch(0.424 0.199 265.638);
  --ac-sidebar-primary-foreground: oklch(0.97 0.014 254.604);
  --ac-sidebar-accent: oklch(0.269 0.006 285.885);
  --ac-sidebar-accent-foreground: oklch(0.985 0 0);
  --ac-sidebar-border: oklch(0.269 0.006 285.885);
  --ac-sidebar-ring: oklch(0.424 0.199 265.638);
}

/* Note: No global * reset — consumers manage their own border/box-sizing defaults */