Styling
Our UI is based on spartan which itself is mainly following Radix UI guidelines. You can find documentation for most compenents on the website above and for any component custom to COE you can find the documentation in the "Components" section on the left.
All components both spartan and COE are styled using tailwindcss. Whenever possible tailwind should be used for styling components. However one important rule to follow is "components over tailwind". To keep the template clean and simple we only use tailwind to define components, which are then used in page templates or higher level components. Ideally a top level page should have litte to no tailwind classes and simply use pre-defined components. In the lead up to COE we are less strict about tailwind usage. But after every COE we re-evaluate and make sure that things that could be their own component are.
Variables
The UI is based on a lot of css variables. These are generally separated into shared and app specific. For the most part only colors should be app specific and everything else should be shared. Please try to use these variables whenever possible, to make theme adjustments consistent and easier.
Shared
| Sample | Var | Value |
|---|---|---|
| Sans | --font-sans | 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| Mono | --font-mono | 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; |
| Title | --font-title | 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| Default Duration | --default-duration | 150ms |
| --osu | hsl(333 77% 67%) | |
| --discord | hsl(235 86% 65%) | |
| --twitch | hsl(264 100% 64%) | |
| --radius | 0 | |
| --background | hsla(0, 0%, 100%, 1) | |
| --foreground | hsla(0, 0%, 14.5%, 1) | |
| --card | hsla(0, 0%, 100%, 1) | |
| --card-foreground | hsla(0, 0%, 14.5%, 1) | |
| --popover | hsla(0, 0%, 100%, 1) | |
| --popover-foreground | hsla(0, 0%, 14.5%, 1) | |
| --muted | hsla(0, 0%, 97%, 1) | |
| --muted-foreground | hsla(0, 0%, 55.6%, 1) | |
| --accent | hsla(0, 0%, 97%, 1) | |
| --accent-foreground | hsla(0, 0%, 20.5%, 1) | |
| --destructive | hsl(352 100% 41%) | |
| --positive | hsl(160 90% 41%) | |
| --warning | hsl(42 100% 46%) | |
| --border | hsla(0, 0%, 92.2%, 1) | |
| --input | hsla(0, 0%, 92.2%, 1) | |
| --ring | hsla(0, 0%, 70.8%, 1) | |
| --sidebar | hsla(0, 0%, 98.5%, 1) | |
| --sidebar-accent | var(--accent) | |
| --sidebar-accent-foreground | var(--accent-foreground) | |
| --sidebar-foreground | hsla(0, 0%, 14.5%, 1) | |
| --sidebar-border | hsla(0, 0%, 92.2%, 1) | |
| --sidebar-ring | hsla(0, 0%, 70.8%, 1) | |
| Dark mode | ||
| --background | hsla(0, 0%, 14.5%, 1) | |
| --foreground | hsla(0, 0%, 98.5%, 1) | |
| --card | hsla(0, 0%, 20.5%, 1) | |
| --card-foreground | hsla(0, 0%, 98.5%, 1) | |
| --popover | hsla(0, 0%, 20.5%, 1) | |
| --popover-foreground | hsla(0, 0%, 98.5%, 1) | |
| --muted | hsla(0, 0%, 26.9%, 1) | |
| --muted-foreground | hsla(0, 0%, 70.8%, 1) | |
| --accent | hsla(0, 0%, 26.9%, 1) | |
| --accent-foreground | hsla(0, 0%, 98.5%, 1) | |
| --destructive | hsl(359 100% 70%) | |
| --positive | hsl(160 90% 61%) | |
| --warning | hsl(42 100% 66%) | |
| --border | hsla(0, 0%, 100%, 0.1) | |
| --border-highlight | hsla(0, 0%, 100%, 0.3) | |
| --input | hsla(0, 0%, 100%, 0.15) | |
| --ring | hsla(0, 0%, 55.6%, 1) | |
| --sidebar | hsla(0, 0%, 20.5%, 1) | |
| --sidebar-foreground | hsla(0, 0%, 98.5%, 1) | |
| --sidebar-accent | var(--accent) | |
| --sidebar-accent-foreground | var(--accent-foreground) | |
| --sidebar-border | hsla(0, 0%, 100%, 0.1) | |
| --sidebar-ring | hsla(0, 0%, 55.6%, 1) |
App specific
| Sample | Var | Value |
|---|---|---|
| Main | cavoe.events | |
| --primary | hsl(0, 89%, 55%) | |
| --primary-foreground | hsla(0, 0%, 98.5%, 1) | |
| --secondary | hsl(39, 87%, 59%) | |
| --secondary-foreground | hsla(0, 0%, 14.5%, 1) | |
| --tertiary | hsl(215, 100%, 59%) | |
| --tertiary-foreground | hsla(0, 0%, 98.5%, 1) | |
| --sidebar-primary | var(--primary) | |
| --sidebar-primary-foreground | var(--primary-foreground) |