mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-09 04:02:40 -05:00
214 lines
9.3 KiB
CSS
214 lines
9.3 KiB
CSS
html {
|
|
--base-h: 260;
|
|
--base-c-0: 0.00012;
|
|
--base-c-1: 0.00588;
|
|
--base-c-2: 0.00744;
|
|
--base-c-3: 0.0168;
|
|
--base-c-4: 0.01548;
|
|
--base-c-5: 0.01632;
|
|
--base-c-6: 0.01548;
|
|
--base-c-7: 0.00804;
|
|
|
|
--acc-h: 270;
|
|
--acc-c-0: 0.0912;
|
|
--acc-c-1: 0.2664;
|
|
--acc-c-2: 0.0816;
|
|
--acc-c-3: 0.06;
|
|
--acc-c-4: 0.2616;
|
|
--acc-c-5: 0.1344;
|
|
|
|
--radius-box: 12px;
|
|
--radius-field: 8px;
|
|
--radius-selector: 8px;
|
|
--radius-full: 99999px;
|
|
|
|
--border-width: 2px;
|
|
}
|
|
|
|
/* '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 */
|
|
|
|
/* 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(94.873% var(--base-c-1) var(--base-h));
|
|
--color-base-2: oklch(81.397% var(--base-c-2) var(--base-h));
|
|
--color-base-3: oklch(63.785% var(--base-c-3) var(--base-h));
|
|
--color-base-4: oklch(46.004% var(--base-c-4) var(--base-h));
|
|
--color-base-5: oklch(34.138% var(--base-c-5) var(--base-h));
|
|
--color-base-6: oklch(27.313% var(--base-c-6) var(--base-h));
|
|
--color-base-7: oklch(20.97% var(--base-c-7) var(--base-h));
|
|
|
|
--color-accent-low: oklch(25.912% var(--acc-c-0) var(--acc-h));
|
|
--color-accent: oklch(52.262% var(--acc-c-1) var(--acc-h));
|
|
--color-accent-high: oklch(83.419% var(--acc-c-2) var(--acc-h));
|
|
|
|
--color-second-low: oklch(from var(--color-accent-low) l c calc(h + 180));
|
|
--color-second: oklch(from var(--color-accent) l c calc(h + 180));
|
|
--color-second-high: oklch(from var(--color-accent-high) l c calc(h + 180));
|
|
|
|
--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(20.97% var(--base-c-7) var(--base-h));
|
|
--color-base-1: oklch(27.313% var(--base-c-6) var(--base-h));
|
|
--color-base-2: oklch(34.138% var(--base-c-5) var(--base-h));
|
|
--color-base-3: oklch(46.004% var(--base-c-4) var(--base-h));
|
|
--color-base-4: oklch(63.785% var(--base-c-3) var(--base-h));
|
|
--color-base-5: oklch(81.397% var(--base-c-2) var(--base-h));
|
|
--color-base-6: oklch(94.873% var(--base-c-1) var(--base-h));
|
|
--color-base-7: oklch(100% var(--base-c-0) var(--base-h));
|
|
|
|
--color-accent-low: oklch(87.817% var(--acc-c-3) var(--acc-h));
|
|
--color-accent: oklch(52.919% var(--acc-c-4) var(--acc-h));
|
|
--color-accent-high: oklch(31.777% var(--acc-c-5) var(--acc-h));
|
|
|
|
--color-second-low: oklch(from var(--color-accent-low) l c calc(h + 180));
|
|
--color-second: oklch(from var(--color-accent) l c calc(h + 180));
|
|
--color-second-high: oklch(from var(--color-accent-high) l c calc(h + 180));
|
|
|
|
--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 care about */
|
|
|
|
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-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-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);
|
|
|
|
--field-size-smaller: 1.25rem;
|
|
--field-size-small: 2rem;
|
|
--field-size: 2.5rem;
|
|
--field-size-large: 3rem;
|
|
--field-padding: 1rem;
|
|
--field-line-height: 1.2rem;
|
|
--field-focus-ring: 2px solid var(--color-text-accent);
|
|
--field-focus-ring-error: 2px solid var(--color-error);
|
|
--field-icon-width: 18px;
|
|
|
|
--selector-height: 1.25rem;
|
|
|
|
--layout-nav-height: 55px;
|
|
--layout-sidenav-width: 250px;
|
|
--layout-main-padding: var(--s-4);
|
|
--layout-sticky-top: calc(
|
|
var(--layout-nav-height) +
|
|
var(--layout-main-padding)
|
|
);
|
|
}
|
|
|
|
html {
|
|
--fonts-xl: 1.5rem;
|
|
--fonts-lg: 1.2rem;
|
|
--fonts-md: 1rem;
|
|
--fonts-sm: 0.92rem;
|
|
--fonts-xsm: 0.85rem;
|
|
--fonts-xs: 0.8rem;
|
|
--fonts-xxsm: 0.75rem;
|
|
--fonts-xxs: 0.7rem;
|
|
--fonts-xxxs: 0.6rem;
|
|
--fonts-xxxxs: 0.5rem;
|
|
|
|
--extra-bold: 700;
|
|
--bold: 600;
|
|
--semi-bold: 500;
|
|
--body: 400;
|
|
|
|
--s-0-5: 0.125rem;
|
|
--s-1: 0.25rem;
|
|
--s-1-5: 0.375rem;
|
|
--s-2: 0.5rem;
|
|
--s-2-5: 0.625rem;
|
|
--s-3: 0.75rem;
|
|
--s-3-5: 0.875rem;
|
|
--s-4: 1rem;
|
|
--s-5: 1.25rem;
|
|
--s-6: 1.5rem;
|
|
--s-7: 1.75rem;
|
|
--s-8: 2rem;
|
|
--s-9: 2.25rem;
|
|
--s-10: 2.5rem;
|
|
--s-11: 2.75rem;
|
|
--s-12: 3rem;
|
|
--s-14: 3.5rem;
|
|
--s-16: 4rem;
|
|
--s-20: 5rem;
|
|
--s-24: 6rem;
|
|
--s-28: 7rem;
|
|
--s-32: 8rem;
|
|
--s-40: 10rem;
|
|
--s-48: 12rem;
|
|
|
|
--label-margin: var(--s-1);
|
|
}
|
|
|
|
/* xs: "(min-width: 480px)",
|
|
sm: "(min-width: 640px)",
|
|
md: "(min-width: 768px)",
|
|
lg: "(min-width: 1024px)",
|
|
xl: "(min-width: 1280px)", */
|