soapbox/app/styles/themes.scss

161 wiersze
4.4 KiB
SCSS

/*
# CSS VARIABLE NAMING CONVENTIONS
Primary variables are fully-formed CSS properties.
Form: --{primary-name}
Examples:
--brand-color
--accent-color
--primary-text-color
Meta-variables are combined to make primary variables.
Form: --{primary-name}_{property}
Examples:
--brand-color_h (int, hue)
--brand-color_s (percent, saturation)
--brand-color_l (percent, lightness)
--brand-color_hsl (csv of the 3 variables above)
Modifiers are variations of primary variables made by modifying their meta-values.
Form: --{primary-name}--{modifier}
Examples:
--brand-color--faint
--brand-color--hicontrast
--primary-text-color--faint
*/
body,
.site-preview {
// Primary variables
--brand-color: hsl(var(--brand-color_hsl));
--accent-color: hsl(var(--accent-color_hsl));
--primary-text-color: var(--gray-900);
--background-color: hsl(var(--background-color_hsl));
--foreground-color: hsl(var(--foreground-color_hsl));
--warning-color: hsla(var(--warning-color_hsl));
// Meta-variables
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
--primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
--foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
--warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
--accent-color_h: calc(var(--brand-color_h) - 15);
--accent-color_s: 86%;
--accent-color_l: 44%;
// Modifiers
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color--med: hsla(var(--brand-color_hsl), 0.2);
--accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
--accent-color--med: hsla(var(--accent-color_hsl), 0.25);
--accent-color--bright: hsl(
var(--accent-color_h),
var(--accent-color_s),
calc(var(--accent-color_l) + 3%)
);
--primary-text-color--faint: var(--gray-400);
--warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
// Colors
--gray-900: #08051b;
// --gray-800: #1d1932;
--gray-700: #37344c;
--gray-500: #656175;
--gray-400: #868393;
--gray-300: #c9c8cc;
--gray-50: #f9f8fc;
--white: #fff;
--dark-blue: #1d1953;
--electric-blue: #5448ee;
--electric-blue-contrast: #e8e7fd;
--sea-blue: #2feecc;
// Sizes
--border-radius-base: 4px;
--border-radius-lg: 8px;
--border-radius-xl: 12px;
// Forms
--input-height: 30px;
--input-border-color: #d1d5db;
// Typography
--font-sans: 'Inter', arial, sans-serif;
--font-weight-heading: 700;
--font-weight-body: 400;
}
.theme-mode-light {
// Primary variables
--highlight-text-color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) - 8%)
);
--vignette-color: transparent;
// Meta-variables
--primary-text-color_h: 0;
--primary-text-color_s: 0%;
--primary-text-color_l: 0%;
--background-color_h: 0;
--background-color_s: 0%;
--background-color_l: 94.9%;
--foreground-color_h: 0;
--foreground-color_s: 0%;
--foreground-color_l: 100%;
--warning-color_h: 0;
--warning-color_s: 100%;
--warning-color_l: 66%;
// Modifiers
--brand-color--hicontrast: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) - 5%)
);
--warning-color--hicontrast: hsl(
var(--warning-color_h),
var(--warning-color_s),
calc(var(--warning-color_l) - 12%)
);
}
.theme-mode-dark {
// Primary variables
--highlight-text-color: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 8%)
);
--vignette-color: #000;
// Meta-variables
--primary-text-color_h: 0;
--primary-text-color_s: 0%;
--primary-text-color_l: 100%;
--background-color_h: 0;
--background-color_s: 0%;
--background-color_l: 20%;
--foreground-color_h: 0;
--foreground-color_s: 0%;
--foreground-color_l: 13%;
--warning-color_h: 0;
--warning-color_s: 100%;
--warning-color_l: 66%;
// Modifiers
--brand-color--hicontrast: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 12%)
);
--warning-color--hicontrast: hsl(
var(--warning-color_h),
var(--warning-color_s),
calc(var(--warning-color_l) + 12%)
);
}