mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-03-21 18:04:39 -05:00
295 lines
12 KiB
CSS
295 lines
12 KiB
CSS
@layer reset, base, elements, components, utilities;
|
|
|
|
/*
|
|
⚠️⚠️⚠️
|
|
Make sure to read styles.md before editing colors in this file,
|
|
it contains important information about how the styles work and how to edit them properly
|
|
⚠️⚠️⚠️
|
|
*/
|
|
|
|
/*
|
|
All the tokens that can be set by custom themes
|
|
and their default values are defined here
|
|
|
|
These should not be consumed directly, only used as a base for other vars!
|
|
|
|
The hue and chroma values should not be edited manually, instead
|
|
use oklch-gamut.ts to generate valid color palettes!
|
|
*/
|
|
html {
|
|
--_base-h: 268;
|
|
--_base-c-0: 0;
|
|
--_base-c-1: 0.02357547860966049;
|
|
--_base-c-2: 0.031;
|
|
--_base-c-3: 0.06999999999999999;
|
|
--_base-c-4: 0.0645;
|
|
--_base-c-5: 0.068;
|
|
--_base-c-6: 0.0645;
|
|
--_base-c-7: 0.0335;
|
|
|
|
--_acc-h: 253;
|
|
--_acc-c-0: 0.0801740871856143;
|
|
--_acc-c-1: 0.1603481743712286;
|
|
--_acc-c-2: 0.0816;
|
|
--_acc-c-3: 0.06;
|
|
--_acc-c-4: 0.16343179310913686;
|
|
--_acc-c-5: 0.09867579961306376;
|
|
|
|
--_second-h: 73;
|
|
--_second-c-0: 0.055379201356259726;
|
|
--_second-c-1: 0.11075840271251945;
|
|
--_second-c-2: 0.0816;
|
|
--_second-c-3: 0.06;
|
|
--_second-c-4: 0.11288837199545253;
|
|
--_second-c-5: 0.06815901705385813;
|
|
|
|
--_radius-box: 3;
|
|
--_radius-field: 2;
|
|
--_radius-selector: 2;
|
|
|
|
--_border-width: 2;
|
|
|
|
/*
|
|
Ommited from being overridden when viewing a page that loads a custom theme
|
|
to prevent accessibility issues and layout shifts
|
|
*/
|
|
--_size-field: 1;
|
|
--_size-selector: 1;
|
|
--_size-spacing: 1;
|
|
}
|
|
|
|
/*
|
|
'low' and 'high' do not indicate lightness!
|
|
This is important because dark goes from light to dark, and light goes from dark to light
|
|
|
|
--color-base-x should rarely be consumed directly
|
|
They mostly exist as a base for other vars like --color-text and --color-bg
|
|
|
|
--color-text-accent and --color-text-second can be used as a background
|
|
or highlight color that maintains a high contrast ratio in both light and dark modes
|
|
If used as a background color, --color-text-inverse should be used as the text color
|
|
|
|
Info, success, warning, and error colors:
|
|
Preffer using --color-x-high for text
|
|
It is recommended to use --color-x-low as the background to ensure a high contrast ratio
|
|
You can use --color-x for things like borders and icons
|
|
|
|
Field icons are defined for both dark and light mode because SVGs
|
|
cannot use currentColor inside data URLs
|
|
|
|
Any changes here NEED to be reflected in oklch-gamut.ts as well
|
|
*/
|
|
html.dark {
|
|
--color-base-0: oklch(100% var(--_base-c-0) var(--_base-h));
|
|
--color-base-1: oklch(95% var(--_base-c-1) var(--_base-h));
|
|
--color-base-2: oklch(90% var(--_base-c-2) var(--_base-h));
|
|
--color-base-3: oklch(64% var(--_base-c-3) var(--_base-h));
|
|
--color-base-4: oklch(46% var(--_base-c-4) var(--_base-h));
|
|
--color-base-5: oklch(32% var(--_base-c-5) var(--_base-h));
|
|
--color-base-6: oklch(25% var(--_base-c-6) var(--_base-h));
|
|
--color-base-7: oklch(17% var(--_base-c-7) var(--_base-h));
|
|
|
|
--color-accent-low: oklch(26% var(--_acc-c-0) var(--_acc-h));
|
|
--color-accent: oklch(52% var(--_acc-c-1) var(--_acc-h));
|
|
--color-accent-high: oklch(83% var(--_acc-c-2) var(--_acc-h));
|
|
|
|
--color-second-low: oklch(
|
|
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
|
|
);
|
|
--color-second: oklch(
|
|
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
|
|
);
|
|
--color-second-high: oklch(
|
|
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
|
|
);
|
|
|
|
--color-text-accent: var(--color-accent-high);
|
|
--color-text-second: var(--color-second-high);
|
|
|
|
--color-info-low: oklch(26% 0.09 275);
|
|
--color-info: oklch(52% 0.27 275);
|
|
--color-info-high: oklch(83% 0.08 275);
|
|
|
|
--color-success-low: oklch(35% 0.08 135);
|
|
--color-success: oklch(85% 0.22 135);
|
|
--color-success-high: oklch(91% 0.12 135);
|
|
|
|
--color-warning-low: oklch(38% 0.05 85);
|
|
--color-warning: oklch(82% 0.14 85);
|
|
--color-warning-high: oklch(94% 0.05 85);
|
|
|
|
--color-error-low: oklch(31% 0.07 10);
|
|
--color-error: oklch(65% 0.25 10);
|
|
--color-error-high: oklch(87% 0.07 10);
|
|
|
|
--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(20, 20, 20)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
}
|
|
|
|
html.light {
|
|
--color-base-0: oklch(17% var(--_base-c-7) var(--_base-h));
|
|
--color-base-1: oklch(25% var(--_base-c-6) var(--_base-h));
|
|
--color-base-2: oklch(32% var(--_base-c-5) var(--_base-h));
|
|
--color-base-3: oklch(46% var(--_base-c-4) var(--_base-h));
|
|
--color-base-4: oklch(64% var(--_base-c-3) var(--_base-h));
|
|
--color-base-5: oklch(90% var(--_base-c-2) var(--_base-h));
|
|
--color-base-6: oklch(95% var(--_base-c-1) var(--_base-h));
|
|
--color-base-7: oklch(100% var(--_base-c-0) var(--_base-h));
|
|
|
|
--color-accent-low: oklch(88% var(--_acc-c-3) var(--_acc-h));
|
|
--color-accent: oklch(53% var(--_acc-c-4) var(--_acc-h));
|
|
--color-accent-high: oklch(32% var(--_acc-c-5) var(--_acc-h));
|
|
|
|
--color-second-low: oklch(
|
|
from var(--color-accent-low) l var(--_second-c-0) var(--_second-h)
|
|
);
|
|
--color-second: oklch(
|
|
from var(--color-accent) l var(--_second-c-1) var(--_second-h)
|
|
);
|
|
--color-second-high: oklch(
|
|
from var(--color-accent-high) l var(--_second-c-2) var(--_second-h)
|
|
);
|
|
|
|
--color-text-accent: var(--color-accent);
|
|
--color-text-second: var(--color-second);
|
|
|
|
--color-info-low: oklch(87.897% 0.0555 279.573);
|
|
--color-info: oklch(53.03% 0.24331 270.147);
|
|
--color-info-high: oklch(31.865% 0.1766 267.138);
|
|
|
|
--color-success-low: oklch(95.604% 0.06419 135.506);
|
|
--color-success: oklch(79.407% 0.25035 139.5);
|
|
--color-success-high: oklch(44.893% 0.13293 138.416);
|
|
|
|
--color-warning-low: oklch(94.216% 0.05193 85.101);
|
|
--color-warning: oklch(82.426% 0.15029 82.564);
|
|
--color-warning-high: oklch(46.236% 0.09033 79.825);
|
|
|
|
--color-error-low: oklch(89.949% 0.04928 355.498);
|
|
--color-error: oklch(65.223% 0.22164 5.216);
|
|
--color-error-high: oklch(41.268% 0.15511 8.446);
|
|
|
|
--field-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
--field-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
--field-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
--field-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(90, 90, 90)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
}
|
|
|
|
/*
|
|
These are the vars you mainly want to use
|
|
*/
|
|
html {
|
|
--color-text: var(--color-base-0);
|
|
--color-text-high: var(--color-base-3);
|
|
--color-text-inverse: var(--color-base-7);
|
|
|
|
--color-bg: var(--color-base-7);
|
|
--color-bg-high: var(--color-base-6);
|
|
--color-bg-higher: var(--color-base-5);
|
|
--color-bg-nav: color-mix(
|
|
in oklch,
|
|
var(--color-bg) 75%,
|
|
var(--color-bg-high) 25%
|
|
);
|
|
--color-bg-ability: oklch(11.736% 0.00867 215.976);
|
|
--color-bg-badge: oklch(0% 0 0);
|
|
|
|
--color-border: var(--color-base-5);
|
|
--color-border-high: var(--color-base-4);
|
|
--border-width: calc(var(--_border-width) * 1px);
|
|
--border-style: var(--border-width) solid var(--color-border);
|
|
--border-style-high: var(--border-width) solid var(--color-border-high);
|
|
--border-style-accent: var(--border-width) solid var(--color-text-accent);
|
|
|
|
--focus-ring: 2px solid var(--color-text-accent);
|
|
--focus-ring-error: 2px solid var(--color-error);
|
|
|
|
--font-xl: 1.5rem;
|
|
--font-lg: 1.2rem;
|
|
--font-md: 1rem;
|
|
--font-sm: 0.9rem;
|
|
--font-xs: 0.8rem;
|
|
--font-2xs: 0.7rem;
|
|
--font-3xs: 0.6rem;
|
|
|
|
--weight-extra: 700;
|
|
--weight-bold: 600;
|
|
--weight-semi: 500;
|
|
--weight-body: 400;
|
|
|
|
--line-height: 1.5;
|
|
|
|
/*
|
|
Tokens used for spacings
|
|
*/
|
|
--s-0-5: calc(var(--_size-spacing) * 0.5 * 0.25rem);
|
|
--s-1: calc(var(--_size-spacing) * 1 * 0.25rem);
|
|
--s-1-5: calc(var(--_size-spacing) * 1.5 * 0.25rem);
|
|
--s-2: calc(var(--_size-spacing) * 2 * 0.25rem);
|
|
--s-3: calc(var(--_size-spacing) * 3 * 0.25rem);
|
|
--s-4: calc(var(--_size-spacing) * 4 * 0.25rem);
|
|
--s-5: calc(var(--_size-spacing) * 5 * 0.25rem);
|
|
--s-6: calc(var(--_size-spacing) * 6 * 0.25rem);
|
|
--s-8: calc(var(--_size-spacing) * 8 * 0.25rem);
|
|
--s-10: calc(var(--_size-spacing) * 10 * 0.25rem);
|
|
--s-12: calc(var(--_size-spacing) * 12 * 0.25rem);
|
|
--s-16: calc(var(--_size-spacing) * 16 * 0.25rem);
|
|
--s-24: calc(var(--_size-spacing) * 24 * 0.25rem);
|
|
--s-32: calc(var(--_size-spacing) * 32 * 0.25rem);
|
|
|
|
/*
|
|
Tokens used to define layout dimensions
|
|
|
|
--layout-sticky-top can be used by any element with position: sticky
|
|
that sticks relative to the document scroll to ensure
|
|
a smooth transition between sticking and un-sticking
|
|
|
|
Elements with position: sticky that do not stick relative
|
|
to the document scroll do not need to use this var
|
|
*/
|
|
--layout-nav-height: 55px;
|
|
--layout-sidenav-width: 250px;
|
|
--layout-fuse-bottom-height: 90px;
|
|
--layout-main-padding: var(--s-3);
|
|
--layout-sticky-top: calc(
|
|
var(--layout-nav-height) +
|
|
var(--layout-main-padding) +
|
|
env(safe-area-inset-top)
|
|
);
|
|
|
|
/*
|
|
Boxes are elements that contain other elements, like cards, containers, and modals
|
|
but can also be top level elements in a visual hierarchy
|
|
|
|
Fields are interactive elements like buttons, inputs, and selects
|
|
but also any child of a box that is interactable or contains content
|
|
|
|
Selectors are elements like checkboxes, radio buttons, and toggles
|
|
but can also be any small element like bages, tags, and pills
|
|
that are complementary to fields
|
|
*/
|
|
--field-size-xs: calc(var(--_size-field) * 6 * 0.25rem);
|
|
--field-size-sm: calc(var(--_size-field) * 8 * 0.25rem);
|
|
--field-size: calc(var(--_size-field) * 10 * 0.25rem);
|
|
--field-size-lg: calc(var(--_size-field) * 12 * 0.25rem);
|
|
--field-size-icon: 18px;
|
|
--field-padding: 0.6rem;
|
|
|
|
--selector-size-xs: calc(var(--_size-selector) * 4 * 0.25rem);
|
|
--selector-size-sm: calc(var(--_size-selector) * 5 * 0.25rem);
|
|
--selector-size: calc(var(--_size-selector) * 6 * 0.25rem);
|
|
--selector-size-lg: calc(var(--_size-selector) * 7 * 0.25rem);
|
|
|
|
--radius-box: calc(var(--_radius-box) * 4px);
|
|
--radius-field: calc(var(--_radius-field) * 4px);
|
|
--radius-selector: calc(var(--_radius-selector) * 4px);
|
|
--radius-full: 99999px;
|
|
--radius-avatar: var(--radius-full);
|
|
|
|
--label-margin: var(--s-1);
|
|
}
|