next-template/src/styles/vars.css at main · hHolyMolly/next-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * Design tokens using oklch color space.
 * oklch provides perceptually uniform lightness and wider gamut than hsl.
 *
 * Format: lightness chroma hue
 * - lightness: 0% (black) to 100% (white)
 * - chroma: 0 (gray) to ~0.4 (most vivid)
 * - hue: 0-360 degrees (none = achromatic)
 */
:root {
  --background: 100% 0 none;
  --foreground: 20.79% 0.0399 265.7;

  --card: 100% 0 none;
  --card-foreground: 20.79% 0.0399 265.7;

  --popover: 100% 0 none;
  --popover-foreground: 20.79% 0.0399 265.7;

  --primary: 62.32% 0.1879 259.8;
  --primary-foreground: 98.38% 0.0035 247.9;

  --secondary: 98.43% 0.0017 247.8;
  --secondary-foreground: 20.79% 0.0399 265.7;

  --muted: 96.71% 0.0029 264.5;
  --muted-foreground: 55.13% 0.0233 264.4;

  --accent: 96.71% 0.0029 264.5;
  --accent-foreground: 20.79% 0.0399 265.7;

  --destructive: 63.68% 0.2078 25.3;
  --destructive-foreground: 98.48% 0 none;

  --border: 92.78% 0.0058 264.5;
  --input: 92.78% 0.0058 264.5;
  --ring: 62.32% 0.1879 259.8;
  --radius: 0.5rem;

  --shadow-color: rgba(0, 0, 0, 0.1);
}