104 lines
2.9 KiB
SCSS
104 lines
2.9 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 {
|
|
// Primary variables
|
|
--brand-color: hsl(var(--brand-color_hsl));
|
|
--accent-color: hsl(var(--accent-color_hsl));
|
|
--primary-text-color: hsl(var(--primary-text-color_hsl));
|
|
--background-color: hsl(var(--background-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);
|
|
--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: hsla(var(--primary-text-color_hsl), 0.6);
|
|
}
|
|
|
|
body.theme-mode-light {
|
|
// Primary variables
|
|
--foreground-color: #ffffff;
|
|
--highlight-text-color: hsl(
|
|
var(--brand-color_h),
|
|
var(--brand-color_s),
|
|
calc(var(--brand-color_l) - 8%)
|
|
);
|
|
|
|
// 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%;
|
|
|
|
// Modifiers
|
|
--brand-color--hicontrast: hsl(
|
|
var(--brand-color_h),
|
|
var(--brand-color_s),
|
|
calc(var(--brand-color_l) - 12%)
|
|
);
|
|
}
|
|
|
|
body.theme-mode-dark {
|
|
// Primary variables
|
|
--foreground-color: #222222;
|
|
--highlight-text-color: hsl(
|
|
var(--brand-color_h),
|
|
var(--brand-color_s),
|
|
calc(var(--brand-color_l) + 8%)
|
|
);
|
|
|
|
// 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%;
|
|
|
|
// Modifiers
|
|
--brand-color--hicontrast: hsl(
|
|
var(--brand-color_h),
|
|
var(--brand-color_s),
|
|
calc(var(--brand-color_l) + 12%)
|
|
);
|
|
}
|