smui/src/globals.css at main · statico/smui · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* shadcn/ui base variables (HSL) -- Light mode (Nord Snow Storm) */
  --background: 218 27% 94%;
  --foreground: 220 16% 22%;
  --card: 218 27% 89%;
  --card-foreground: 220 16% 22%;
  --popover: 218 27% 89%;
  --popover-foreground: 220 16% 22%;
  --primary: 213 32% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 219 28% 84%;
  --secondary-foreground: 220 16% 22%;
  --muted: 219 28% 84%;
  --muted-foreground: 220 17% 28%;
  --accent: 213 20% 86%;
  --accent-foreground: 213 32% 40%;
  --destructive: 355 60% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 18% 72%;
  --input: 219 18% 72%;
  --ring: 213 32% 40%;
  --radius: 0rem;

  /* Chart colors */
  --chart-1: 213 32% 44%;
  --chart-2: 210 34% 42%;
  --chart-3: 92 30% 36%;
  --chart-4: 40 70% 35%;
  --chart-5: 311 28% 42%;

  /* Sidebar */
  --sidebar-background: 218 27% 89%;
  --sidebar-foreground: 220 16% 22%;
  --sidebar-primary: 213 32% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 213 20% 86%;
  --sidebar-accent-foreground: 213 32% 40%;
  --sidebar-border: 219 18% 72%;
  --sidebar-ring: 213 32% 40%;

  /* ---- SpaceMolt extended palette ---- */

  /* Frost (darkened for light backgrounds) */
  --smui-frost-1: 176 30% 35%;
  --smui-frost-2: 193 40% 38%;
  --smui-frost-3: 210 34% 40%;
  --smui-frost-4: 213 32% 36%;

  /* Aurora (darkened for light backgrounds) */
  --smui-red: 355 55% 44%;
  --smui-orange: 14 55% 44%;
  --smui-yellow: 40 70% 34%;
  --smui-green: 92 35% 34%;
  --smui-purple: 311 28% 40%;

  /* Surface hierarchy (Snow Storm) */
  --smui-surface-0: 218 27% 94%;
  --smui-surface-1: 218 27% 89%;
  --smui-surface-2: 219 28% 84%;
  --smui-surface-3: 219 20% 76%;

  /* Interactive border state */
  --smui-border-hover: 220 17% 50%;

  /* Font */
  --font-sans: 'JetBrains Mono', monospace;

  /* Typography scale */
  --text-label: 11px;
  --text-ui: 13px;
  --text-heading: 22px;
  --text-stat: 26px;
  --text-hero: 42px;
}

.dark {
  /* Dark mode (Nord Polar Night) */
  --background: 213 16% 12%;
  --foreground: 213 27% 88%;
  --card: 217 16% 15.5%;
  --card-foreground: 213 27% 88%;
  --popover: 217 16% 15.5%;
  --popover-foreground: 213 27% 88%;
  --primary: 193 44% 67%;
  --primary-foreground: 213 16% 12%;
  --secondary: 216 15% 19%;
  --secondary-foreground: 213 27% 88%;
  --muted: 216 15% 19%;
  --muted-foreground: 213 14% 65%;
  --accent: 193 10% 16%;
  --accent-foreground: 193 44% 67%;
  --destructive: 355 52% 65%;
  --destructive-foreground: 219 28% 94%;
  --border: 217 17% 28%;
  --input: 217 17% 28%;
  --ring: 193 44% 67%;
  --radius: 0rem;
  --chart-1: 193 44% 67%;
  --chart-2: 213 32% 52%;
  --chart-3: 92 28% 65%;
  --chart-4: 40 71% 73%;
  --chart-5: 311 24% 63%;
  --sidebar-background: 217 16% 15.5%;
  --sidebar-foreground: 213 27% 88%;
  --sidebar-primary: 193 44% 67%;
  --sidebar-primary-foreground: 213 16% 12%;
  --sidebar-accent: 193 10% 16%;
  --sidebar-accent-foreground: 193 44% 67%;
  --sidebar-border: 217 17% 28%;
  --sidebar-ring: 193 44% 67%;

  /* Frost (original Nord values for dark backgrounds) */
  --smui-frost-1: 176 25% 65%;
  --smui-frost-2: 193 44% 67%;
  --smui-frost-3: 210 34% 63%;
  --smui-frost-4: 213 32% 52%;

  /* Aurora (original Nord values for dark backgrounds) */
  --smui-red: 355 52% 64%;
  --smui-orange: 14 51% 63%;
  --smui-yellow: 40 71% 73%;
  --smui-green: 92 28% 65%;
  --smui-purple: 311 24% 63%;

  /* Surface hierarchy (Polar Night) */
  --smui-surface-0: 213 16% 12%;
  --smui-surface-1: 217 16% 15.5%;
  --smui-surface-2: 216 15% 19%;
  --smui-surface-3: 215 14% 22%;

  /* Interactive border state */
  --smui-border-hover: 216 12% 37%;

  --text-label: 11px;
  --text-ui: 13px;
  --text-heading: 22px;
  --text-stat: 26px;
  --text-hero: 42px;
}