@una-ui/preset/una.css

The default preset for @una-ui

html {
  font-size: var(--una-font-size, 16px);
  --at-apply: font-sans antialiased text-foreground bg-background;
}

* {
  @apply border-border outline-ring/50;
  scrollbar-color: oklch(var(--una-border)) transparent;
}

::selection {
  @apply bg-selection/80 text-selection-foreground;
}

body {
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  [data-wrapper] {
    @apply min-[1800px]:border-t;
  }
}
a:active,
button:active {
  @apply opacity-60 md:opacity-100;
}

:root {
  --una-primary-hex: #d08700;
  --una-primary-50: 98.7% 0.026 102.212;
  --una-primary-100: 97.3% 0.071 103.193;
  --una-primary-200: 94.5% 0.129 101.54;
  --una-primary-300: 90.5% 0.182 98.111;
  --una-primary-400: 85.2% 0.199 91.936;
  --una-primary-500: 79.5% 0.184 86.047;
  --una-primary-600: 68.1% 0.162 75.834;
  --una-primary-700: 55.4% 0.135 66.442;
  --una-primary-800: 47.6% 0.114 61.907;
  --una-primary-900: 42.1% 0.095 57.708;
  --una-primary-950: 28.6% 0.066 53.813;
  --una-gray-hex: #57534d;
  --una-gray-50: 98.5% 0.001 106.423;
  --una-gray-100: 97% 0.001 106.424;
  --una-gray-200: 92.3% 0.003 48.717;
  --una-gray-300: 86.9% 0.005 56.366;
  --una-gray-400: 70.9% 0.01 56.259;
  --una-gray-500: 55.3% 0.013 58.071;
  --una-gray-600: 44.4% 0.011 73.639;
  --una-gray-700: 37.4% 0.01 67.558;
  --una-gray-800: 26.8% 0.007 34.298;
  --una-gray-900: 21.6% 0.006 56.043;
  --una-gray-950: 14.7% 0.004 49.25;
}

:root {
  --spacing: 0.25rem;
  --una-font-size: 16px;
  --una-radius: 0.5rem;
  --una-brand: var(--una-primary-600);
  --una-primary: var(--una-primary-600);
  --una-primary-foreground: 1 0 0;
  --una-primary-active: var(--una-primary-500);
  --una-gray: var(--una-gray-600);
  --una-gray-active: var(--una-gray-500);
  --una-secondary: var(--una-gray-100);
  --una-secondary-foreground: var(--una-gray-900);
  --una-background: 1 0 0;
  --una-foreground: var(--una-gray-950);
  --una-muted: var(--una-gray-100);
  --una-muted-foreground: var(--una-gray-500);
  --una-accent: var(--una-gray-50);
  --una-accent-foreground: var(--una-gray-700);
  --una-card: 1 0 0;
  --una-card-foreground: var(--una-gray-950);
  --una-input: var(--una-gray-200);
  --una-ring: var(--una-primary-400);
  --una-border: var(--una-gray-200);
  --una-popover: 1 0 0;
  --una-popover-foreground: var(--una-gray-950);
  --una-sidebar: var(--una-gray-50);
  --una-sidebar-foreground: var(--una-gray-950);
  --una-sidebar-primary: var(--una-primary-600);
  --una-sidebar-primary-foreground: var(--una-background);
  --una-sidebar-accent: var(--una-gray-100);
  --una-sidebar-accent-foreground: var(--una-gray-900);
  --una-sidebar-border: var(--una-gray-200);
  --una-sidebar-ring: var(--una-gray-400);
  --una-selection: var(--una-primary);
  --una-selection-foreground: var(--una-primary-foreground);
}

.dark {
  --una-brand: var(--una-primary-500);
  --una-primary: var(--una-primary-500);
  --una-primary-foreground: 0 0 0;
  --una-primary-active: var(--una-primary-400);
  --una-gray: var(--una-gray-500);
  --una-gray-active: var(--una-gray-400);
  --una-secondary: var(--una-gray-800);
  --una-secondary-foreground: var(--una-gray-50);
  --una-background: var(--una-gray-950);
  --una-foreground: 1 0 0;
  --una-muted: var(--una-gray-800);
  --una-muted-foreground: var(--una-gray-400);
  --una-accent: var(--una-gray-700);
  --una-accent-foreground: var(--una-gray-50);
  --una-card: var(--una-gray-900);
  --una-card-foreground: var(--una-gray-50);
  --una-input: var(--una-gray-700);
  --una-ring: var(--una-primary-500);
  --una-border: var(--una-gray-800);
  --una-popover: var(--una-gray-900);
  --una-popover-foreground: var(--una-gray-50);
  --una-sidebar: var(--una-gray-900);
  --una-sidebar-foreground: var(--una-gray-50);
  --una-sidebar-primary: var(--una-primary-500);
  --una-sidebar-accent: var(--una-gray-800);
  --una-sidebar-accent-foreground: var(--una-gray-50);
  --una-sidebar-border: var(--una-gray-800);
  --una-sidebar-ring: var(--una-gray-600);
}