UNPKG

@arolariu/components

Version:

🎨 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! ⚡

109 lines (106 loc) • 4.29 kB
:root { --ac-radius: .875rem; --ac-radius-xs: calc(var(--ac-radius)*.4); --ac-radius-sm: calc(var(--ac-radius)*.6); --ac-radius-md: calc(var(--ac-radius)*.8); --ac-radius-lg: var(--ac-radius); --ac-radius-xl: calc(var(--ac-radius)*1.4); --ac-background: oklch(100% 0 0); --ac-foreground: oklch(14.5% .004 285.823); --ac-card: oklch(100% 0 0); --ac-card-foreground: oklch(14.5% .004 285.823); --ac-popover: oklch(100% 0 0); --ac-popover-foreground: oklch(14.5% .004 285.823); --ac-primary: oklch(48.8% .243 264.376); --ac-primary-foreground: oklch(97% .014 254.604); --ac-secondary: oklch(96.7% .001 286.375); --ac-secondary-foreground: oklch(21% .006 285.885); --ac-muted: oklch(96.7% .001 286.375); --ac-muted-foreground: oklch(55.6% .002 285.938); --ac-accent: oklch(96.7% .001 286.375); --ac-accent-foreground: oklch(21% .006 285.885); --ac-destructive: oklch(57.7% .245 27.325); --ac-destructive-foreground: oklch(57.7% .245 27.325); --ac-success: oklch(62.7% .194 149.214); --ac-success-foreground: oklch(98.5% 0 0); --ac-warning: oklch(76.9% .188 70.08); --ac-warning-foreground: oklch(14.5% .004 285.823); --ac-info: oklch(48.8% .243 264.376); --ac-info-foreground: oklch(97% .014 254.604); --ac-border: oklch(92.2% .004 286.32); --ac-input: oklch(92.2% .004 286.32); --ac-ring: oklch(48.8% .243 264.376); --ac-chart-1: oklch(64.6% .222 41.116); --ac-chart-2: oklch(60% .118 184.714); --ac-chart-3: oklch(39.8% .07 227.392); --ac-chart-4: oklch(82.8% .189 84.429); --ac-chart-5: oklch(76.9% .188 70.08); --ac-sidebar: oklch(98.5% 0 0); --ac-sidebar-foreground: oklch(14.5% .004 285.823); --ac-sidebar-primary: oklch(48.8% .243 264.376); --ac-sidebar-primary-foreground: oklch(97% .014 254.604); --ac-sidebar-accent: oklch(96.7% .001 286.375); --ac-sidebar-accent-foreground: oklch(21% .006 285.885); --ac-sidebar-border: oklch(92.2% .004 286.32); --ac-sidebar-ring: oklch(48.8% .243 264.376); --ac-size-xs: 1.25rem; --ac-size-sm: 1.5rem; --ac-size-md: 1.75rem; --ac-size-default: 2rem; --ac-size-lg: 2.25rem; --ac-text-xs: .75rem; --ac-text-sm: .8125rem; --ac-text-base: .875rem; --ac-text-lg: 1rem; --ac-text-xl: 1.125rem; --ac-space-1: .25rem; --ac-space-2: .5rem; --ac-space-3: .75rem; --ac-space-4: 1rem; --ac-space-6: 1.5rem; --ac-space-8: 2rem; --ac-transition-fast: .1s ease; --ac-transition-normal: .15s ease; --ac-transition-slow: .2s ease-in-out; } .dark, [data-theme="dark"] { --ac-background: oklch(14.5% .004 285.823); --ac-foreground: oklch(98.5% 0 0); --ac-card: oklch(14.5% .004 285.823); --ac-card-foreground: oklch(98.5% 0 0); --ac-popover: oklch(14.5% .004 285.823); --ac-popover-foreground: oklch(98.5% 0 0); --ac-primary: oklch(42.4% .199 265.638); --ac-primary-foreground: oklch(97% .014 254.604); --ac-secondary: oklch(26.9% .006 285.885); --ac-secondary-foreground: oklch(98.5% 0 0); --ac-muted: oklch(26.9% .006 285.885); --ac-muted-foreground: oklch(70.8% .002 286.067); --ac-accent: oklch(26.9% .006 285.885); --ac-accent-foreground: oklch(98.5% 0 0); --ac-destructive: oklch(70.4% .191 22.216); --ac-destructive-foreground: oklch(70.4% .191 22.216); --ac-success: oklch(52.7% .164 149.214); --ac-success-foreground: oklch(98.5% 0 0); --ac-warning: oklch(66.9% .158 70.08); --ac-warning-foreground: oklch(14.5% .004 285.823); --ac-info: oklch(42.4% .199 265.638); --ac-info-foreground: oklch(97% .014 254.604); --ac-border: oklch(26.9% .006 285.885); --ac-input: oklch(26.9% .006 285.885); --ac-ring: oklch(42.4% .199 265.638); --ac-chart-1: oklch(48.8% .243 264.376); --ac-chart-2: oklch(69.6% .17 162.48); --ac-chart-3: oklch(76.9% .188 70.08); --ac-chart-4: oklch(62.7% .265 303.9); --ac-chart-5: oklch(64.5% .246 16.439); --ac-sidebar: oklch(20.5% .006 285.885); --ac-sidebar-foreground: oklch(98.5% 0 0); --ac-sidebar-primary: oklch(42.4% .199 265.638); --ac-sidebar-primary-foreground: oklch(97% .014 254.604); --ac-sidebar-accent: oklch(26.9% .006 285.885); --ac-sidebar-accent-foreground: oklch(98.5% 0 0); --ac-sidebar-border: oklch(26.9% .006 285.885); --ac-sidebar-ring: oklch(42.4% .199 265.638); } /*# sourceMappingURL=index.css.map */