soapbox/app/styles/themes.scss

123 wiersze
3.6 KiB
SCSS
Czysty Zwykły widok Historia

/*
# CSS VARIABLE NAMING CONVENTIONS
Primary variables are fully-formed CSS properties.
Form: --{primary-name}
Examples:
--brand-color
2020-06-07 17:17:10 +00:00
--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
*/
2020-10-01 23:57:11 +00:00
body,
.site-preview {
// Primary variables
2020-06-07 03:55:00 +00:00
--brand-color: hsl(var(--brand-color_hsl));
2020-06-07 17:17:10 +00:00
--accent-color: hsl(var(--accent-color_hsl));
--primary-text-color: hsl(var(--primary-text-color_hsl));
--background-color: hsl(var(--background-color_hsl));
--foreground-color: hsl(var(--foreground-color_hsl));
2020-08-07 20:17:13 +00:00
--warning-color: hsla(var(--warning-color_hsl));
// Meta-variables
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
2020-06-07 17:17:10 +00:00
--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);
2020-08-07 20:17:13 +00:00
--warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
2020-06-07 18:14:18 +00:00
--accent-color_h: calc(var(--brand-color_h) - 15);
--accent-color_s: 86%;
--accent-color_l: 44%;
// Modifiers
2020-06-07 03:55:00 +00:00
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color--med: hsla(var(--brand-color_hsl), 0.2);
2020-06-07 18:14:18 +00:00
--accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
--accent-color--med: hsla(var(--accent-color_hsl), 0.25);
2020-06-07 17:17:10 +00:00
--accent-color--bright: hsl(
var(--accent-color_h),
var(--accent-color_s),
calc(var(--accent-color_l) + 3%)
);
2020-06-07 03:55:00 +00:00
--primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
2020-08-07 20:17:13 +00:00
--warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
}
2020-10-01 23:57:11 +00:00
.theme-mode-light {
// Primary variables
2020-06-07 03:55:00 +00:00
--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%;
2020-08-07 20:17:13 +00:00
--warning-color_h: 0;
--warning-color_s: 100%;
--warning-color_l: 66%;
// Modifiers
2020-06-07 03:55:00 +00:00
--brand-color--hicontrast: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) - 12%)
);
}
2020-10-01 23:57:11 +00:00
.theme-mode-dark {
// Primary variables
2020-06-07 03:55:00 +00:00
--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%;
2020-08-07 20:17:13 +00:00
--warning-color_h: 0;
--warning-color_s: 100%;
--warning-color_l: 66%;
// Modifiers
2020-06-07 03:55:00 +00:00
--brand-color--hicontrast: hsl(
var(--brand-color_h),
var(--brand-color_s),
calc(var(--brand-color_l) + 12%)
);
}