77 lines
1.3 KiB
SCSS
77 lines
1.3 KiB
SCSS
|
|
|
|
// theme-agnostic colors
|
|
:root
|
|
{
|
|
--color-negative: rgb(216, 40, 83);
|
|
|
|
// message colors
|
|
--color-accent-info: rgb(44, 162, 212);
|
|
--color-accent-info-dim: rgba(44, 162, 212, 0.3);
|
|
--color-accent-info-bg: rgb(228, 242, 249);
|
|
--color-accent-success: rgb(47, 187, 152);
|
|
--color-accent-success-bg: rgba(47, 187, 152, 0.15);
|
|
--color-accent-warn: rgb(211, 172, 35);
|
|
--color-accent-warn-bg: rgba(233, 193, 56, 0.1);
|
|
--color-accent-error: rgb(216, 40, 83);
|
|
--color-accent-error-bg: rgba(216, 40, 83, 0.15);
|
|
}
|
|
|
|
|
|
$accent-color-prefix: --color-accent;
|
|
$accent-colors: (
|
|
"blue-gray": "#527281",
|
|
"gray": "#8a9598",
|
|
"brown": "#795548",
|
|
"blue": "#429be2",
|
|
"purple": "#9f3f9d",
|
|
"teal": "#3bb1c0",
|
|
"green": "#2fbb98",
|
|
"lime": "#a0db61",
|
|
"yellow": "#fdd330",
|
|
"orange": "#ff662b",
|
|
"red": "#d82853"
|
|
);
|
|
|
|
:root
|
|
{
|
|
@each $name, $hex in $accent-colors
|
|
{
|
|
#{$accent-color-prefix}-#{$name}: unquote($hex);
|
|
}
|
|
}
|
|
|
|
@each $name, $hex in $accent-colors
|
|
{
|
|
$var: #{$accent-color-prefix}-#{$name};
|
|
|
|
.color-#{$name}
|
|
{
|
|
color: var(#{$var});
|
|
}
|
|
|
|
.bg-color-#{$name}
|
|
{
|
|
background: var(#{$var});
|
|
}
|
|
}
|
|
|
|
.color-default
|
|
{
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.bg-color-default
|
|
{
|
|
background: var(--color-text);
|
|
}
|
|
|
|
.color-primary
|
|
{
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.color-negative
|
|
{
|
|
color: var(--color-negative);
|
|
} |