81 lines
1.5 KiB
SCSS
81 lines
1.5 KiB
SCSS
|
|
|
|
// theme-agnostic colors
|
|
:root
|
|
{
|
|
--color-accent: #76b900; // #f9aa19; // #76b900 // #67bdb1
|
|
--color-accent-fg: #ffffff;
|
|
|
|
--color-negative: rgb(216, 40, 83);
|
|
--color-image-bg: rgb(255, 255, 255);
|
|
|
|
// message colors
|
|
--color-accent-info: rgb(44, 162, 212);
|
|
--color-accent-info-dim: rgba(44, 162, 212, 0.3);
|
|
--color-accent-info-bg: rgba(228, 242, 249, 0.6);
|
|
--color-accent-success: rgb(47, 187, 152);
|
|
--color-accent-success-bg: rgba(47, 187, 152, 0.1);
|
|
--color-accent-warn: rgb(247, 125, 5);
|
|
--color-accent-warn-bg: rgba(247, 125, 5, 0.1);
|
|
--color-accent-error: rgb(216, 40, 83);
|
|
--color-accent-error-bg: rgba(216, 40, 83, 0.08);
|
|
}
|
|
|
|
|
|
$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": "rgb(216, 40, 83)"
|
|
);
|
|
|
|
: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}) !important;
|
|
}
|
|
|
|
.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);
|
|
} |