570 lines
18 KiB
SCSS
570 lines
18 KiB
SCSS
@use "functions" as *;
|
|
@use "mixins" as *;
|
|
|
|
@mixin variables($modes: "light") {
|
|
@each $mode in $modes {
|
|
@if $mode == "light" {
|
|
// COLORS
|
|
--bg-overlay: linear-gradient(
|
|
rgba(255, 255, 255, var(--dim-opacity)),
|
|
rgba(255, 255, 255, var(--dim-opacity))
|
|
);
|
|
--fg-color: #29242a;
|
|
--fg-contrast: #fcfcfa;
|
|
--red-fg: hsl(342.0779, 72%, 58%);
|
|
--red-h: 342.0779;
|
|
--red-s: 72%;
|
|
--red-l: 58%;
|
|
--orange-fg: hsl(15.771428, 74%, 54%);
|
|
--orange-h: 15.771428;
|
|
--orange-s: 74%;
|
|
--orange-l: 54%;
|
|
--yellow-fg: hsl(34.639175, 91%, 42%);
|
|
--yellow-h: 34.639175;
|
|
--yellow-s: 91%;
|
|
--yellow-l: 42%;
|
|
--green-fg: hsl(153.7815, 61%, 38%);
|
|
--green-h: 153.7815;
|
|
--green-s: 61%;
|
|
--green-l: 38%;
|
|
--blue-fg: hsl(192, 71%, 38%);
|
|
--blue-h: 192;
|
|
--blue-s: 71%;
|
|
--blue-l: 38%;
|
|
--purple-fg: hsl(254.11766, 44%, 55%);
|
|
--purple-h: 254.11766;
|
|
--purple-s: 44%;
|
|
--purple-l: 55%;
|
|
--red-bg-1: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
var(--red-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--red-bg-2: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
var(--red-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--orange-bg-1: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
var(--orange-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--orange-bg-2: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
var(--orange-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--yellow-bg-1: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
var(--yellow-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--yellow-bg-2: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
var(--yellow-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--green-bg-1: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
var(--green-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--green-bg-2: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
var(--green-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--blue-bg-1: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
var(--blue-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--blue-bg-2: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
var(--blue-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--purple-bg-1: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
var(--purple-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
--purple-bg-2: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
var(--purple-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
--red-fg-muted-1: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
calc(var(--red-l) - var(--red-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--red-fg-muted-2: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
calc(var(--red-l) - var(--red-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--orange-fg-muted-1: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
calc(var(--orange-l) - var(--orange-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--orange-fg-muted-2: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
calc(var(--orange-l) - var(--orange-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--yellow-fg-muted-1: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
calc(var(--yellow-l) - var(--yellow-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--yellow-fg-muted-2: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
calc(var(--yellow-l) - var(--yellow-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--green-fg-muted-1: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
calc(var(--green-l) - var(--green-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--green-fg-muted-2: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
calc(var(--green-l) - var(--green-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--blue-fg-muted-1: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
calc(var(--blue-l) - var(--blue-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--blue-fg-muted-2: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
calc(var(--blue-l) - var(--blue-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--purple-fg-muted-1: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
calc(var(--purple-l) - var(--purple-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--purple-fg-muted-2: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
calc(var(--purple-l) - var(--purple-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--shade-color: rgba(0, 0, 0, 0.07);
|
|
|
|
// COLORS (NEUTRAL)
|
|
--bg-muted-neutral-1: rgba(0, 0, 0, var(--color-opacity-1));
|
|
--bg-muted-neutral-2: rgba(0, 0, 0, var(--color-opacity-2));
|
|
--fg-muted-neutral-1: rgba(0, 0, 0, var(--fg-muted-1-opacity));
|
|
--fg-muted-neutral-2: rgba(0, 0, 0, var(--fg-muted-2-opacity));
|
|
|
|
// OPACITY
|
|
--scanlines-opacity: 0.4;
|
|
--fg-muted-1-opacity: 0.5;
|
|
--fg-muted-2-opacity: 0.6;
|
|
|
|
// SHADOWS
|
|
--edge-highlight: inset
|
|
0
|
|
#{rpx(-1)}
|
|
0
|
|
rgba(0, 0, 0, var(--color-opacity-1));
|
|
} @else if $mode == "dark" {
|
|
// COLORS
|
|
--bg-overlay: linear-gradient(
|
|
rgba(0, 0, 0, var(--dim-opacity)),
|
|
rgba(0, 0, 0, var(--dim-opacity))
|
|
);
|
|
--fg-color: #fcfcfa;
|
|
--fg-contrast: #29242a;
|
|
--red-fg: hsl(345.18988, 100%, 69%);
|
|
--red-h: 345.18988;
|
|
--red-s: 100%;
|
|
--red-l: 69%;
|
|
--orange-fg: hsl(19.731544, 96%, 70%);
|
|
--orange-h: 19.731544;
|
|
--orange-s: 96%;
|
|
--orange-l: 70%;
|
|
--yellow-fg: hsl(44.70588, 100%, 70%);
|
|
--yellow-h: 44.70588;
|
|
--yellow-s: 100%;
|
|
--yellow-l: 70%;
|
|
--green-fg: hsl(90, 59%, 66%);
|
|
--green-h: 90;
|
|
--green-s: 59%;
|
|
--green-l: 66%;
|
|
--blue-fg: hsl(186.42857, 71%, 69%);
|
|
--blue-h: 186.42857;
|
|
--blue-s: 71%;
|
|
--blue-l: 69%;
|
|
--purple-fg: hsl(249.88234, 77%, 78%);
|
|
--purple-h: 249.88234;
|
|
--purple-s: 77%;
|
|
--purple-l: 78%;
|
|
|
|
--red-fg-muted-1: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
calc(var(--red-l) + (100% - var(--red-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--red-fg-muted-2: hsla(
|
|
var(--red-h),
|
|
var(--red-s),
|
|
calc(var(--red-l) + (100% - var(--red-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--orange-fg-muted-1: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--orange-fg-muted-2: hsla(
|
|
var(--orange-h),
|
|
var(--orange-s),
|
|
calc(var(--orange-l) + (100% - var(--orange-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--yellow-fg-muted-1: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--yellow-fg-muted-2: hsla(
|
|
var(--yellow-h),
|
|
var(--yellow-s),
|
|
calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--green-fg-muted-1: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
calc(var(--green-l) + (100% - var(--green-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--green-fg-muted-2: hsla(
|
|
var(--green-h),
|
|
var(--green-s),
|
|
calc(var(--green-l) + (100% - var(--green-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--blue-fg-muted-1: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--blue-fg-muted-2: hsla(
|
|
var(--blue-h),
|
|
var(--blue-s),
|
|
calc(var(--blue-l) + (100% - var(--blue-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--purple-fg-muted-1: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--purple-fg-muted-2: hsla(
|
|
var(--purple-h),
|
|
var(--purple-s),
|
|
calc(var(--purple-l) + (100% - var(--purple-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--shade-color: rgba(0, 0, 0, 0.25);
|
|
|
|
// COLORS (NEUTRAL)
|
|
--bg-muted-neutral-1: rgba(255, 255, 255, var(--color-opacity-1));
|
|
--bg-muted-neutral-2: rgba(255, 255, 255, var(--color-opacity-2));
|
|
--fg-muted-neutral-1: rgba(255, 255, 255, var(--fg-muted-1-opacity));
|
|
--fg-muted-neutral-2: rgba(255, 255, 255, var(--fg-muted-2-opacity));
|
|
|
|
// OPACITY
|
|
--scanlines-opacity: 1;
|
|
--fg-muted-1-opacity: 0.6;
|
|
--fg-muted-2-opacity: 0.7;
|
|
|
|
// SHADOWS
|
|
--edge-highlight: inset
|
|
0
|
|
#{rpx(1)}
|
|
0
|
|
rgba(255, 255, 255, var(--color-opacity-1));
|
|
} @else if $mode == "common" {
|
|
// WIDTHS
|
|
--content-width: #{rpx(720)};
|
|
--sidebar-width: clamp(
|
|
calc(var(--content-width) / 3),
|
|
20vw,
|
|
calc(var(--content-width) / 2)
|
|
);
|
|
|
|
// CORNERS
|
|
--rounded-corner: 0.75rem;
|
|
--rounded-corner-small: 0.5rem;
|
|
|
|
// FILTERS
|
|
--blur: blur(0.75rem) saturate(180%);
|
|
--printed: contrast(2) brightness(0.75) grayscale(1);
|
|
--drop-shadow: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.35))
|
|
drop-shadow(0 0.4rem 0.7rem rgba(0, 0, 0, 0.18));
|
|
|
|
// FONTS
|
|
--font-system-ui: system-ui, sans-serif;
|
|
--font-ui-monospace: ui-monospace, monospace;
|
|
--font-emoji:
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
|
|
// FONT SIZES
|
|
--font-size-xx-small: 0.625rem;
|
|
--font-size-x-small: 0.75rem;
|
|
--font-size-small: 0.875rem;
|
|
--font-size-medium: 1rem;
|
|
--font-size-large: 1.25rem;
|
|
--font-size-x-large: 1.5rem;
|
|
--font-size-xx-large: 2rem;
|
|
--font-size-xxx-large: 3rem;
|
|
|
|
// FONT WEIGHTS
|
|
--font-weight-thin: 100;
|
|
--font-weight-extra-light: 200;
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semi-bold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extra-bold: 800;
|
|
--font-weight-black: 900;
|
|
|
|
// OPACITY
|
|
--color-opacity-1: 0.1;
|
|
--color-opacity-2: 0.2;
|
|
--dim-opacity: 0.8;
|
|
--disabled-opacity: 0.4;
|
|
|
|
// SHADOWS
|
|
--shadow:
|
|
0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03),
|
|
0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07),
|
|
0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03);
|
|
--shadow-inset:
|
|
inset 0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.03),
|
|
inset 0 #{rpx(1)} #{rpx(3)} #{rpx(1)} rgba(0, 0, 0, 0.07),
|
|
inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.03);
|
|
--shadow-raised:
|
|
0 0 0 #{rpx(1)} rgba(0, 0, 0, 0.06),
|
|
0 #{rpx(2)} #{rpx(6)} #{rpx(2)} rgba(0, 0, 0, 0.14),
|
|
0 #{rpx(4)} #{rpx(12)} #{rpx(4)} rgba(0, 0, 0, 0.06);
|
|
--shadow-glass: 0 #{rpx(6)} #{rpx(12)} #{rpx(-6)} rgba(0, 0, 0, 0.1);
|
|
|
|
// STATES
|
|
--hover: scale(1.1);
|
|
--active: scale(0.9);
|
|
|
|
// TRANSITIONS
|
|
--transition: 0.2s;
|
|
--transition-longer: 0.4s;
|
|
--transition-long: 0.8s;
|
|
--transition-bezier: 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28);
|
|
--transition-bezier-longer: 0.525s cubic-bezier(0.17, 0.89, 0.32, 1.28);
|
|
|
|
// ICONS
|
|
--icon-arrow-square-out: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M228%2C104a12%2C12%2C0%2C0%2C1-24%2C0V69l-59.51%2C59.51a12%2C12%2C0%2C0%2C1-17-17L187%2C52H152a12%2C12%2C0%2C0%2C1%2C0-24h64a12%2C12%2C0%2C0%2C1%2C12%2C12Zm-44%2C24a12%2C12%2C0%2C0%2C0-12%2C12v64H52V84h64a12%2C12%2C0%2C0%2C0%2C0-24H48A20%2C20%2C0%2C0%2C0%2C28%2C80V208a20%2C20%2C0%2C0%2C0%2C20%2C20H176a20%2C20%2C0%2C0%2C0%2C20-20V140A12%2C12%2C0%2C0%2C0%2C184%2C128Z%22/%3E%3C/svg%3E);
|
|
--icon-caret-down: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M216.49%2C104.49l-80%2C80a12%2C12%2C0%2C0%2C1-17%2C0l-80-80a12%2C12%2C0%2C0%2C1%2C17-17L128%2C159l71.51-71.52a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E);
|
|
--icon-check: url(data:image/svg+xml,%3Csvg%20role%3D%22img%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin variables-accent($modes: "light") {
|
|
@each $mode in $modes {
|
|
@if $mode == "light" {
|
|
--accent-color: hsl(
|
|
var(--accent-light-h),
|
|
var(--accent-light-s),
|
|
var(--accent-light-l)
|
|
);
|
|
--accent-h: var(--accent-light-h);
|
|
--accent-s: var(--accent-light-s);
|
|
--accent-l: var(--accent-light-l);
|
|
|
|
--bg-color: hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.6),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8)
|
|
);
|
|
--fg-muted-1: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--fg-muted-2: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--glass-bg-1: hsla(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.7),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9),
|
|
var(--dim-opacity)
|
|
);
|
|
--glass-bg-2: hsla(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.6),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.8),
|
|
var(--dim-opacity)
|
|
);
|
|
--crt-bg: radial-gradient(
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9)
|
|
),
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75)
|
|
)
|
|
80%,
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.65)
|
|
)
|
|
);
|
|
} @else if $mode == "dark" {
|
|
--accent-color: hsl(
|
|
var(--accent-dark-h),
|
|
var(--accent-dark-s),
|
|
var(--accent-dark-l)
|
|
);
|
|
--accent-h: var(--accent-dark-h);
|
|
--accent-s: var(--accent-dark-s);
|
|
--accent-l: var(--accent-dark-l);
|
|
|
|
--bg-color: hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.7),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.9)
|
|
);
|
|
--fg-muted-1: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
|
|
var(--fg-muted-1-opacity)
|
|
);
|
|
--fg-muted-2: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
calc(var(--accent-l) + (100% - var(--accent-l)) * 0.85),
|
|
var(--fg-muted-2-opacity)
|
|
);
|
|
--glass-bg-1: hsla(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.6),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.8),
|
|
var(--dim-opacity)
|
|
);
|
|
--glass-bg-2: hsla(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.7),
|
|
var(--dim-opacity)
|
|
);
|
|
--crt-bg: radial-gradient(
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.7)
|
|
),
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.9)
|
|
)
|
|
80%,
|
|
hsl(
|
|
var(--accent-h),
|
|
calc(var(--accent-s) - var(--accent-s) * 0.5),
|
|
calc(var(--accent-l) - var(--accent-l) * 0.95)
|
|
)
|
|
);
|
|
} @else if $mode == "common" {
|
|
// COLORS
|
|
--accent-highlight: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l),
|
|
var(--disabled-opacity)
|
|
);
|
|
|
|
// TODO: put this all in sub-mixins
|
|
--bg-muted-1: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l),
|
|
var(--color-opacity-1)
|
|
);
|
|
|
|
--bg-muted-2: hsla(
|
|
var(--accent-h),
|
|
var(--accent-s),
|
|
var(--accent-l),
|
|
var(--color-opacity-2)
|
|
);
|
|
|
|
// CONTRAST COLOR
|
|
--l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
|
|
--a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
|
|
--contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
|
|
|
|
// SHADOWS
|
|
--shadow-glow:
|
|
0 0 0 #{rpx(1)} var(--bg-muted-2),
|
|
0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1),
|
|
0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2);
|
|
--shadow-glow-inset:
|
|
inset 0 0 0 #{rpx(1)} var(--bg-muted-2),
|
|
inset 0 #{rpx(2)} #{rpx(6)} #{rpx(2)} var(--bg-muted-1),
|
|
inset 0 #{rpx(4)} #{rpx(24)} #{rpx(4)} var(--bg-muted-2);
|
|
--text-shadow-glow:
|
|
var(--bg-muted-2) 0 0 #{rpx(4)}, var(--accent-color) 0 0 #{rpx(12)};
|
|
}
|
|
}
|
|
}
|