konnostheme.css343 lines · main
| 1 | /* |
| 2 | * Defines every Tailwind v4 --color-* design token. Tailwind generates |
| 3 | * bg-{name} / text-{name} / border-{name} / ring-{name} / border-{r,l,t,b}-{name} |
| 4 | * utilities for each entry. Semantic tokens wrap their HSL triplet in hsl(); |
| 5 | * Radix/scale/brand tokens self-reference the matching var declared in |
| 6 | * colors.css, which holds the per-theme literal values. |
| 7 | */ |
| 8 | |
| 9 | @theme inline { |
| 10 | --color-foreground: hsl(var(--foreground-default)); |
| 11 | --color-foreground-light: hsl(var(--foreground-light)); |
| 12 | --color-foreground-lighter: hsl(var(--foreground-lighter)); |
| 13 | --color-foreground-muted: hsl(var(--foreground-muted)); |
| 14 | --color-foreground-contrast: hsl(var(--foreground-contrast)); |
| 15 | --color-background-200: hsl(var(--background-200)); |
| 16 | --color-background: hsl(var(--background-default)); |
| 17 | --color-background-alternative-200: hsl(var(--background-alternative-200)); |
| 18 | --color-background-alternative: hsl(var(--background-alternative-default)); |
| 19 | --color-background-selection: hsl(var(--background-selection)); |
| 20 | --color-background-control: hsl(var(--background-control)); |
| 21 | --color-background-surface-75: hsl(var(--background-surface-75)); |
| 22 | --color-background-surface-100: hsl(var(--background-surface-100)); |
| 23 | --color-background-surface-200: hsl(var(--background-surface-200)); |
| 24 | --color-background-surface-300: hsl(var(--background-surface-300)); |
| 25 | --color-background-surface-400: hsl(var(--background-surface-400)); |
| 26 | --color-background-overlay: hsl(var(--background-overlay-default)); |
| 27 | --color-background-overlay-hover: hsl(var(--background-overlay-hover)); |
| 28 | --color-background-muted: hsl(var(--background-muted)); |
| 29 | --color-background-button: hsl(var(--background-button-default)); |
| 30 | --color-background-dialog: hsl(var(--background-dialog-default)); |
| 31 | --color-background-dash-sidebar: hsl(var(--background-dash-sidebar)); |
| 32 | --color-background-dash-canvas: hsl(var(--background-dash-canvas)); |
| 33 | --color-destructive-200: hsl(var(--destructive-200)); |
| 34 | --color-destructive-300: hsl(var(--destructive-300)); |
| 35 | --color-destructive-400: hsl(var(--destructive-400)); |
| 36 | --color-destructive-500: hsl(var(--destructive-500)); |
| 37 | --color-destructive-600: hsl(var(--destructive-600)); |
| 38 | --color-destructive: hsl(var(--destructive-default)); |
| 39 | --color-warning-200: hsl(var(--warning-200)); |
| 40 | --color-warning-300: hsl(var(--warning-300)); |
| 41 | --color-warning-400: hsl(var(--warning-400)); |
| 42 | --color-warning-500: hsl(var(--warning-500)); |
| 43 | --color-warning-600: hsl(var(--warning-600)); |
| 44 | --color-warning: hsl(var(--warning-default)); |
| 45 | --color-brand-200: hsl(var(--brand-200)); |
| 46 | --color-brand-300: hsl(var(--brand-300)); |
| 47 | --color-brand-400: hsl(var(--brand-400)); |
| 48 | --color-brand-500: hsl(var(--brand-500)); |
| 49 | --color-brand-600: hsl(var(--brand-600)); |
| 50 | --color-brand: hsl(var(--brand-default)); |
| 51 | --color-brand-link: hsl(var(--brand-link)); |
| 52 | --color-_secondary-200: hsl(var(--secondary-200)); |
| 53 | --color-_secondary-400: hsl(var(--secondary-400)); |
| 54 | --color-_secondary: hsl(var(--secondary-default)); |
| 55 | --color-code_block-1: hsl(var(--code-block-1)); |
| 56 | --color-code_block-2: hsl(var(--code-block-2)); |
| 57 | --color-code_block-3: hsl(var(--code-block-3)); |
| 58 | --color-code_block-4: hsl(var(--code-block-4)); |
| 59 | --color-code_block-5: hsl(var(--code-block-5)); |
| 60 | --color-amber-100: var(--color-amber-100); |
| 61 | --color-amber-200: var(--color-amber-200); |
| 62 | --color-amber-300: var(--color-amber-300); |
| 63 | --color-amber-400: var(--color-amber-400); |
| 64 | --color-amber-500: var(--color-amber-500); |
| 65 | --color-amber-600: var(--color-amber-600); |
| 66 | --color-amber-700: var(--color-amber-700); |
| 67 | --color-amber-800: var(--color-amber-800); |
| 68 | --color-amber-900: var(--color-amber-900); |
| 69 | --color-amber-1000: var(--color-amber-1000); |
| 70 | --color-amber-1100: var(--color-amber-1100); |
| 71 | --color-amber-1200: var(--color-amber-1200); |
| 72 | --color-blue-100: var(--color-blue-100); |
| 73 | --color-blue-200: var(--color-blue-200); |
| 74 | --color-blue-300: var(--color-blue-300); |
| 75 | --color-blue-400: var(--color-blue-400); |
| 76 | --color-blue-500: var(--color-blue-500); |
| 77 | --color-blue-600: var(--color-blue-600); |
| 78 | --color-blue-700: var(--color-blue-700); |
| 79 | --color-blue-800: var(--color-blue-800); |
| 80 | --color-blue-900: var(--color-blue-900); |
| 81 | --color-blue-1000: var(--color-blue-1000); |
| 82 | --color-blue-1100: var(--color-blue-1100); |
| 83 | --color-blue-1200: var(--color-blue-1200); |
| 84 | --color-crimson-100: var(--color-crimson-100); |
| 85 | --color-crimson-200: var(--color-crimson-200); |
| 86 | --color-crimson-300: var(--color-crimson-300); |
| 87 | --color-crimson-400: var(--color-crimson-400); |
| 88 | --color-crimson-500: var(--color-crimson-500); |
| 89 | --color-crimson-600: var(--color-crimson-600); |
| 90 | --color-crimson-700: var(--color-crimson-700); |
| 91 | --color-crimson-800: var(--color-crimson-800); |
| 92 | --color-crimson-900: var(--color-crimson-900); |
| 93 | --color-crimson-1000: var(--color-crimson-1000); |
| 94 | --color-crimson-1100: var(--color-crimson-1100); |
| 95 | --color-crimson-1200: var(--color-crimson-1200); |
| 96 | --color-gold-100: var(--color-gold-100); |
| 97 | --color-gold-200: var(--color-gold-200); |
| 98 | --color-gold-300: var(--color-gold-300); |
| 99 | --color-gold-400: var(--color-gold-400); |
| 100 | --color-gold-500: var(--color-gold-500); |
| 101 | --color-gold-600: var(--color-gold-600); |
| 102 | --color-gold-700: var(--color-gold-700); |
| 103 | --color-gold-800: var(--color-gold-800); |
| 104 | --color-gold-900: var(--color-gold-900); |
| 105 | --color-gold-1000: var(--color-gold-1000); |
| 106 | --color-gold-1100: var(--color-gold-1100); |
| 107 | --color-gold-1200: var(--color-gold-1200); |
| 108 | --color-gray-100: var(--color-gray-100); |
| 109 | --color-gray-200: var(--color-gray-200); |
| 110 | --color-gray-300: var(--color-gray-300); |
| 111 | --color-gray-400: var(--color-gray-400); |
| 112 | --color-gray-500: var(--color-gray-500); |
| 113 | --color-gray-600: var(--color-gray-600); |
| 114 | --color-gray-700: var(--color-gray-700); |
| 115 | --color-gray-800: var(--color-gray-800); |
| 116 | --color-gray-900: var(--color-gray-900); |
| 117 | --color-gray-1000: var(--color-gray-1000); |
| 118 | --color-gray-1100: var(--color-gray-1100); |
| 119 | --color-gray-1200: var(--color-gray-1200); |
| 120 | --color-green-100: var(--color-green-100); |
| 121 | --color-green-200: var(--color-green-200); |
| 122 | --color-green-300: var(--color-green-300); |
| 123 | --color-green-400: var(--color-green-400); |
| 124 | --color-green-500: var(--color-green-500); |
| 125 | --color-green-600: var(--color-green-600); |
| 126 | --color-green-700: var(--color-green-700); |
| 127 | --color-green-800: var(--color-green-800); |
| 128 | --color-green-900: var(--color-green-900); |
| 129 | --color-green-1000: var(--color-green-1000); |
| 130 | --color-green-1100: var(--color-green-1100); |
| 131 | --color-green-1200: var(--color-green-1200); |
| 132 | --color-indigo-100: var(--color-indigo-100); |
| 133 | --color-indigo-200: var(--color-indigo-200); |
| 134 | --color-indigo-300: var(--color-indigo-300); |
| 135 | --color-indigo-400: var(--color-indigo-400); |
| 136 | --color-indigo-500: var(--color-indigo-500); |
| 137 | --color-indigo-600: var(--color-indigo-600); |
| 138 | --color-indigo-700: var(--color-indigo-700); |
| 139 | --color-indigo-800: var(--color-indigo-800); |
| 140 | --color-indigo-900: var(--color-indigo-900); |
| 141 | --color-indigo-1000: var(--color-indigo-1000); |
| 142 | --color-indigo-1100: var(--color-indigo-1100); |
| 143 | --color-indigo-1200: var(--color-indigo-1200); |
| 144 | --color-orange-100: var(--color-orange-100); |
| 145 | --color-orange-200: var(--color-orange-200); |
| 146 | --color-orange-300: var(--color-orange-300); |
| 147 | --color-orange-400: var(--color-orange-400); |
| 148 | --color-orange-500: var(--color-orange-500); |
| 149 | --color-orange-600: var(--color-orange-600); |
| 150 | --color-orange-700: var(--color-orange-700); |
| 151 | --color-orange-800: var(--color-orange-800); |
| 152 | --color-orange-900: var(--color-orange-900); |
| 153 | --color-orange-1000: var(--color-orange-1000); |
| 154 | --color-orange-1100: var(--color-orange-1100); |
| 155 | --color-orange-1200: var(--color-orange-1200); |
| 156 | --color-pink-100: var(--color-pink-100); |
| 157 | --color-pink-200: var(--color-pink-200); |
| 158 | --color-pink-300: var(--color-pink-300); |
| 159 | --color-pink-400: var(--color-pink-400); |
| 160 | --color-pink-500: var(--color-pink-500); |
| 161 | --color-pink-600: var(--color-pink-600); |
| 162 | --color-pink-700: var(--color-pink-700); |
| 163 | --color-pink-800: var(--color-pink-800); |
| 164 | --color-pink-900: var(--color-pink-900); |
| 165 | --color-pink-1000: var(--color-pink-1000); |
| 166 | --color-pink-1100: var(--color-pink-1100); |
| 167 | --color-pink-1200: var(--color-pink-1200); |
| 168 | --color-purple-100: var(--color-purple-100); |
| 169 | --color-purple-200: var(--color-purple-200); |
| 170 | --color-purple-300: var(--color-purple-300); |
| 171 | --color-purple-400: var(--color-purple-400); |
| 172 | --color-purple-500: var(--color-purple-500); |
| 173 | --color-purple-600: var(--color-purple-600); |
| 174 | --color-purple-700: var(--color-purple-700); |
| 175 | --color-purple-800: var(--color-purple-800); |
| 176 | --color-purple-900: var(--color-purple-900); |
| 177 | --color-purple-1000: var(--color-purple-1000); |
| 178 | --color-purple-1100: var(--color-purple-1100); |
| 179 | --color-purple-1200: var(--color-purple-1200); |
| 180 | --color-red-100: var(--color-red-100); |
| 181 | --color-red-200: var(--color-red-200); |
| 182 | --color-red-300: var(--color-red-300); |
| 183 | --color-red-400: var(--color-red-400); |
| 184 | --color-red-500: var(--color-red-500); |
| 185 | --color-red-600: var(--color-red-600); |
| 186 | --color-red-700: var(--color-red-700); |
| 187 | --color-red-800: var(--color-red-800); |
| 188 | --color-red-900: var(--color-red-900); |
| 189 | --color-red-1000: var(--color-red-1000); |
| 190 | --color-red-1100: var(--color-red-1100); |
| 191 | --color-red-1200: var(--color-red-1200); |
| 192 | --color-slate-100: var(--color-slate-100); |
| 193 | --color-slate-200: var(--color-slate-200); |
| 194 | --color-slate-300: var(--color-slate-300); |
| 195 | --color-slate-400: var(--color-slate-400); |
| 196 | --color-slate-500: var(--color-slate-500); |
| 197 | --color-slate-600: var(--color-slate-600); |
| 198 | --color-slate-700: var(--color-slate-700); |
| 199 | --color-slate-800: var(--color-slate-800); |
| 200 | --color-slate-900: var(--color-slate-900); |
| 201 | --color-slate-1000: var(--color-slate-1000); |
| 202 | --color-slate-1100: var(--color-slate-1100); |
| 203 | --color-slate-1200: var(--color-slate-1200); |
| 204 | --color-tomato-100: var(--color-tomato-100); |
| 205 | --color-tomato-200: var(--color-tomato-200); |
| 206 | --color-tomato-300: var(--color-tomato-300); |
| 207 | --color-tomato-400: var(--color-tomato-400); |
| 208 | --color-tomato-500: var(--color-tomato-500); |
| 209 | --color-tomato-600: var(--color-tomato-600); |
| 210 | --color-tomato-700: var(--color-tomato-700); |
| 211 | --color-tomato-800: var(--color-tomato-800); |
| 212 | --color-tomato-900: var(--color-tomato-900); |
| 213 | --color-tomato-1000: var(--color-tomato-1000); |
| 214 | --color-tomato-1100: var(--color-tomato-1100); |
| 215 | --color-tomato-1200: var(--color-tomato-1200); |
| 216 | --color-violet-100: var(--color-violet-100); |
| 217 | --color-violet-200: var(--color-violet-200); |
| 218 | --color-violet-300: var(--color-violet-300); |
| 219 | --color-violet-400: var(--color-violet-400); |
| 220 | --color-violet-500: var(--color-violet-500); |
| 221 | --color-violet-600: var(--color-violet-600); |
| 222 | --color-violet-700: var(--color-violet-700); |
| 223 | --color-violet-800: var(--color-violet-800); |
| 224 | --color-violet-900: var(--color-violet-900); |
| 225 | --color-violet-1000: var(--color-violet-1000); |
| 226 | --color-violet-1100: var(--color-violet-1100); |
| 227 | --color-violet-1200: var(--color-violet-1200); |
| 228 | --color-yellow-100: var(--color-yellow-100); |
| 229 | --color-yellow-200: var(--color-yellow-200); |
| 230 | --color-yellow-300: var(--color-yellow-300); |
| 231 | --color-yellow-400: var(--color-yellow-400); |
| 232 | --color-yellow-500: var(--color-yellow-500); |
| 233 | --color-yellow-600: var(--color-yellow-600); |
| 234 | --color-yellow-700: var(--color-yellow-700); |
| 235 | --color-yellow-800: var(--color-yellow-800); |
| 236 | --color-yellow-900: var(--color-yellow-900); |
| 237 | --color-yellow-1000: var(--color-yellow-1000); |
| 238 | --color-yellow-1100: var(--color-yellow-1100); |
| 239 | --color-yellow-1200: var(--color-yellow-1200); |
| 240 | --color-scale-100: var(--color-scale-100); |
| 241 | --color-scale-200: var(--color-scale-200); |
| 242 | --color-scale-300: var(--color-scale-300); |
| 243 | --color-scale-400: var(--color-scale-400); |
| 244 | --color-scale-500: var(--color-scale-500); |
| 245 | --color-scale-600: var(--color-scale-600); |
| 246 | --color-scale-700: var(--color-scale-700); |
| 247 | --color-scale-800: var(--color-scale-800); |
| 248 | --color-scale-900: var(--color-scale-900); |
| 249 | --color-scale-1000: var(--color-scale-1000); |
| 250 | --color-scale-1100: var(--color-scale-1100); |
| 251 | --color-scale-1200: var(--color-scale-1200); |
| 252 | --color-brand-100: var(--color-brand-100); |
| 253 | --color-brand-700: var(--color-brand-700); |
| 254 | --color-brand-800: var(--color-brand-800); |
| 255 | --color-brand-900: var(--color-brand-900); |
| 256 | --color-brand-1000: var(--color-brand-1000); |
| 257 | --color-brand-1100: var(--color-brand-1100); |
| 258 | --color-brand-1200: var(--color-brand-1200); |
| 259 | --color-sidebar: hsl(var(--sidebar-background)); |
| 260 | --color-sidebar-foreground: hsl(var(--sidebar-foreground)); |
| 261 | --color-sidebar-primary: hsl(var(--sidebar-primary)); |
| 262 | --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); |
| 263 | --color-sidebar-accent: hsl(var(--sidebar-accent)); |
| 264 | --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); |
| 265 | --color-sidebar-border: hsl(var(--sidebar-border)); |
| 266 | --color-sidebar-ring: hsl(var(--sidebar-ring)); |
| 267 | --color-hi-contrast: hsl(var(--foreground-default)); |
| 268 | --color-lo-contrast: hsl(var(--background-alternative-default)); |
| 269 | |
| 270 | /* |
| 271 | * This will generate colors only for bg utilities. |
| 272 | */ |
| 273 | --background-color-200: hsl(var(--background-200)); |
| 274 | --background-color-default: hsl(var(--background-default)); |
| 275 | --background-color-muted: hsl(var(--background-muted)); |
| 276 | --background-color-alternative-200: hsl(var(--background-alternative-200)); |
| 277 | --background-color-alternative: hsl(var(--background-alternative-default)); |
| 278 | --background-color-selection: hsl(var(--background-selection)); |
| 279 | --background-color-control: hsl(var(--background-control)); |
| 280 | --background-color-surface-75: hsl(var(--background-surface-75)); |
| 281 | --background-color-surface-100: hsl(var(--background-surface-100)); |
| 282 | --background-color-surface-200: hsl(var(--background-surface-200)); |
| 283 | --background-color-surface-300: hsl(var(--background-surface-300)); |
| 284 | --background-color-surface-400: hsl(var(--background-surface-400)); |
| 285 | --background-color-overlay: hsl(var(--background-overlay-default)); |
| 286 | --background-color-overlay-hover: hsl(var(--background-overlay-hover)); |
| 287 | --background-color-button: hsl(var(--background-button-default)); |
| 288 | --background-color-dialog: hsl(var(--background-dialog-default)); |
| 289 | --background-color-dash-sidebar: hsl(var(--background-dash-sidebar)); |
| 290 | --background-color-dash-canvas: hsl(var(--background-dash-canvas)); |
| 291 | --background-color-studio: hsl(var(--background-200)); |
| 292 | |
| 293 | /* |
| 294 | * This will generate colors for all utilities, they'll have border in the name i.e. bg-border-overlay, text-border-muted |
| 295 | * This usage should be discouraged and deprecated. |
| 296 | */ |
| 297 | --color-border: hsl(var(--border-default)); |
| 298 | --color-border-overlay: hsl(var(--border-overlay)); |
| 299 | --color-border-muted: hsl(var(--border-muted)); |
| 300 | --color-border-control: hsl(var(--border-control)); |
| 301 | --color-border-strong: hsl(var(--border-strong)); |
| 302 | --color-border-stronger: hsl(var(--border-stronger)); |
| 303 | /* |
| 304 | * This will generate colors only for border utilities |
| 305 | * i.e. bg-muted and they'll only have border-color: var(--border-muted) rule |
| 306 | */ |
| 307 | --border-color-default: hsl(var(--border-default)); |
| 308 | --border-color-overlay: hsl(var(--border-overlay)); |
| 309 | --border-color-muted: hsl(var(--border-muted)); |
| 310 | --border-color-control: hsl(var(--border-control)); |
| 311 | --border-color-strong: hsl(var(--border-strong)); |
| 312 | --border-color-stronger: hsl(var(--border-stronger)); |
| 313 | --border-color-secondary: hsl(var(--border-secondary)); |
| 314 | --border-color-alternative: hsl(var(--border-alternative)); |
| 315 | --border-color-button: hsl(var(--border-button-default)); |
| 316 | --border-color-button-hover: hsl(var(--border-button-hover)); |
| 317 | |
| 318 | /* This will generate colors only for text utilities */ |
| 319 | --text-color-default: hsl(var(--foreground-default)); |
| 320 | --text-color-light: hsl(var(--foreground-light)); |
| 321 | --text-color-lighter: hsl(var(--foreground-lighter)); |
| 322 | --text-color-muted: hsl(var(--foreground-muted)); |
| 323 | --text-color-contrast: hsl(var(--foreground-contrast)); |
| 324 | |
| 325 | /* misc theme tokens — typography, breakpoints, sizing, transform-origin */ |
| 326 | --font-sans: var( |
| 327 | --font-custom, |
| 328 | Circular, |
| 329 | custom-font, |
| 330 | Helvetica Neue, |
| 331 | Helvetica, |
| 332 | Arial, |
| 333 | sans-serif |
| 334 | ); |
| 335 | --font-mono: var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace); |
| 336 | --breakpoint-xs: 480px; |
| 337 | --width-listbox: 320px; |
| 338 | --radius-panel: 6px; |
| 339 | --spacing-content: 21px; |
| 340 | --spacing-card: var(--card-padding-x); |
| 341 | --transform-origin-dropdown: var(--radix-dropdown-menu-content-transform-origin); |
| 342 | --transform-origin-popover: var(--radix-popover-menu-content-transform-origin); |
| 343 | } |