157 lines
3.1 KiB
SCSS
157 lines
3.1 KiB
SCSS
|
|
:root, .theme-light
|
|
{
|
|
// accent colors
|
|
--color-primary: #292b2c; // #292b2c; // #00aea2
|
|
--color-primary-fg: #fff;
|
|
--color-secondary: #1f3053;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground/text color
|
|
--color-fg: #222;
|
|
--color-fg-mid: #6f7375;
|
|
--color-fg-light: #919294;
|
|
--color-fg-xlight: #bec0c3;
|
|
|
|
// background color shades
|
|
--color-bg: #f7f7f7;
|
|
--color-bg-dark: #d4d4d4;
|
|
--color-bg-xmid: #f0f0f0;
|
|
--color-bg-mid: #f4f4f4;
|
|
--color-bg-light: #fff;
|
|
--color-bg-xlight: #f8f8f8;
|
|
--color-bg-xxlight: #fcfcfc;
|
|
|
|
// line colors
|
|
--color-line: #eaebec;
|
|
--color-line-mid: #eaebec;
|
|
--color-line-light: #f4f4f4;
|
|
|
|
// misc colors
|
|
--color-box: #fff;
|
|
--color-shadow: rgba(0,0,0,0.03);
|
|
--color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
|
|
--color-highlight: rgba(0,0,0,0.05);
|
|
--color-overlay-shade: rgba(0,0,0,0.3);
|
|
|
|
// message colors
|
|
--color-accent-info: rgb(44, 162, 212);
|
|
--color-accent-info-bg: rgba(44, 162, 212, 0.1);
|
|
--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.08);
|
|
|
|
// sizes
|
|
|
|
--padding: 32px;
|
|
--padding-s: 24px;
|
|
--height-top: 74px;
|
|
--radius: 3px;
|
|
|
|
--font-size-xs: 12px;
|
|
--font-size-s: 13px;
|
|
--font-size: 14px;
|
|
--font-size-m: 15px;
|
|
--font-size-l: 16px;
|
|
--font-size-xl: 18px;
|
|
}
|
|
|
|
.theme-dark
|
|
{
|
|
// accent colors
|
|
--color-primary: #fff;
|
|
--color-primary-fg: #222;
|
|
--color-secondary: #292b2c;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground/text color
|
|
--color-fg: #fff;
|
|
--color-fg-mid: #c1c5c9;
|
|
--color-fg-light: #919294;
|
|
--color-fg-xlight: #919294;
|
|
|
|
/*--color-fg: #222;
|
|
--color-fg-mid: #6f7375;
|
|
--color-fg-light: #919294;*/
|
|
|
|
// background color shades
|
|
--color-bg: #1c1e1f;
|
|
--color-bg-dark: #1c1e1f;
|
|
--color-bg-xmid: #292b2c;
|
|
--color-bg-mid: #292b2c;
|
|
--color-bg-light: #242526;
|
|
--color-bg-xxlight: #242526;
|
|
|
|
/*--color-bg: #fff;
|
|
--color-bg-light: #f8f9fa;
|
|
--color-bg-mid: #f4f5f6;*/
|
|
|
|
// line colors
|
|
--color-line: #2f3233;
|
|
--color-line-mid: #3b3e40;
|
|
--color-line-light: #2f3233;
|
|
|
|
// misc colors
|
|
--color-box: #242526;
|
|
--color-shadow: rgba(0,0,0,0.3);
|
|
--color-highlight: rgba(255,255,255, 0.03);
|
|
--color-overlay-shade: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
|
|
$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": "#ffd100",
|
|
"orange": "#f6b226",
|
|
"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-fg);
|
|
}
|
|
|
|
.bg-color-default
|
|
{
|
|
background: var(--color-fg);
|
|
}
|
|
|
|
|
|
// font sizes
|
|
|
|
$font-size: 14px;
|
|
$font-size-s: 12px; |