kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
117 wiersze
3.3 KiB
SCSS
117 wiersze
3.3 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: hsl(var(--primary-text-color_hsl));
|
|
--background-color: hsl(var(--background-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);
|
|
--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: hsla(var(--primary-text-color_hsl), 0.6);
|
|
--warning-color--faint: hsla(var(--warning-color_hsl), 0.5);
|
|
}
|
|
|
|
.theme-mode-light {
|
|
// Primary variables
|
|
--foreground-color: #fff;
|
|
--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%;
|
|
--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%)
|
|
);
|
|
}
|
|
|
|
.theme-mode-dark {
|
|
// Primary variables
|
|
--foreground-color: #222;
|
|
--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%;
|
|
--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%)
|
|
);
|
|
}
|