291 lines
6.7 KiB
SCSS
291 lines
6.7 KiB
SCSS
|
|
/*:root, .theme-light
|
|
{
|
|
// accent colors
|
|
--color-primary: #04bfbf; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
|
|
--color-primary-fg: #fff;
|
|
--color-primary-low: rgba(4, 191, 191, 0.15);
|
|
--color-primary: #04bfbf;
|
|
--color-primary-fg: #fff;
|
|
--color-primary-two: #3d72c4;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground/text color
|
|
--color-fg: #222;
|
|
--color-fg-mid: #656f74;
|
|
--color-fg-light: #838995;
|
|
--color-fg-xlight: #b2b8c2;
|
|
|
|
// background color shades
|
|
--color-bg: #f7f8f9;
|
|
--color-bg-dark: #d4d5d6;
|
|
--color-bg-xmid: #f0f1f2;
|
|
--color-bg-mid: #f4f5f6;
|
|
--color-bg-light: #fff;
|
|
--color-bg-xlight: #f8f9fa;
|
|
--color-bg-xxlight: #fcfdfe;
|
|
|
|
// line colors
|
|
--color-line: #eaebec;
|
|
--color-line-mid: #eff0f1;
|
|
--color-line-light: #f4f5f6;
|
|
|
|
// 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.15);
|
|
|
|
// 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: 6px;
|
|
|
|
--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
|
|
{
|
|
// 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: #282c3b;
|
|
--color-bg-light: #242526;
|
|
--color-bg-xlight: #292b2c;
|
|
--color-bg-xxlight: #242526;*/
|
|
|
|
/*--color-bg: #fff;
|
|
--color-bg-light: #f8f9fa;
|
|
--color-bg-mid: #f4f5f6;*/
|
|
|
|
/*// line colors
|
|
--color-line: #2f3233;
|
|
--color-line-mid: #2f3233;
|
|
--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);
|
|
}*/
|
|
|
|
:root
|
|
{
|
|
// accent colors
|
|
--color-primary: #ff662b; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
|
|
--color-primary-fg: #fff;
|
|
--color-primary-low: rgba(229, 225, 221, 0.3);
|
|
--color-primary-two: #e5e4df;
|
|
--color-primary-line: #e0dfda;
|
|
--color-secondary: #f9e0c4;
|
|
--color-secondary-fg: #20242a;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground colors
|
|
--color-fg: #fff;
|
|
--color-fg-dim: #b0b4b8;
|
|
--color-fg-dim-two: #898b8c;
|
|
|
|
|
|
// background colors
|
|
$color-shade-base: #262c34;
|
|
--color-bg: #191e25;
|
|
--color-bg-bright: #{darken($color-shade-base, 2%)};
|
|
--color-bg-bright-two: #{desaturate(lighten($color-shade-base, 2%), 3%)};
|
|
--color-bg-bright-three: #{desaturate(lighten($color-shade-base, 6%), 5%)};
|
|
--color-bg-dim: #{darken($color-shade-base, 4%)};
|
|
/*$color-shade-base: #141617;
|
|
--color-bg: #141617;
|
|
--color-bg-bright: #{lighten($color-shade-base, 5%)};
|
|
--color-bg-bright-two: #{lighten($color-shade-base, 10%)};
|
|
--color-bg-bright-three: #{lighten($color-shade-base, 14%)};
|
|
--color-bg-dim: #{lighten($color-shade-base, 2%)};*/
|
|
|
|
// misc colors
|
|
//--color-box: #242526;
|
|
--color-shadow: rgba(0,0,0,0.3);
|
|
--color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
|
|
--color-overlay-shade: rgba(0,0,0,0.3);
|
|
|
|
// lines
|
|
--color-line: #2a2d2e;
|
|
}
|
|
|
|
|
|
|
|
// theme-agnostic colors
|
|
:root
|
|
{
|
|
// image background
|
|
--color-bg-image: #e7ecee;
|
|
|
|
// 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.15);
|
|
|
|
// sizes
|
|
|
|
--padding: 32px;
|
|
--padding-s: 24px;
|
|
--height-top: 74px;
|
|
--radius: 6px;
|
|
|
|
--font-size-xs: 12px;
|
|
--font-size-s: 13px;
|
|
--font-size: 14px;
|
|
--font-size-m: 15px;
|
|
--font-size-l: 16px;
|
|
--font-size-xl: 18px;
|
|
}
|
|
|
|
|
|
.theme-primary
|
|
{
|
|
// accent colors
|
|
--color-primary: #fff; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
|
|
--color-primary-fg: #000;
|
|
--color-primary-low: rgba(255, 255, 255, 0.15);
|
|
|
|
// foreground/text color
|
|
--color-fg: #fff;
|
|
--color-fg-mid: rgba(255, 255, 255, 0.6);
|
|
--color-fg-light: rgba(255, 255, 255, 0.4);
|
|
--color-fg-xlight: rgba(255, 255, 255, 0.3);
|
|
|
|
// background color shades
|
|
--color-bg: #04bfbf;
|
|
--color-bg-light: #04bfbf;
|
|
/*--color-bg-dark: #d4d5d6;
|
|
--color-bg-xmid: #f0f1f2;
|
|
--color-bg-mid: #f4f5f6;
|
|
--color-bg-light: #fff;
|
|
--color-bg-xlight: #f8f9fa;
|
|
--color-bg-xxlight: #fcfdfe;*/
|
|
|
|
// line colors
|
|
/*--color-line: #eaebec;
|
|
--color-line-mid: #eff0f1;
|
|
--color-line-light: #f4f5f6;
|
|
|
|
// 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.15);
|
|
|
|
// 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;
|
|
}
|
|
|
|
|
|
$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": "#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-fg);
|
|
}
|
|
|
|
.bg-color-default
|
|
{
|
|
background: var(--color-fg);
|
|
}
|
|
|
|
|
|
// font sizes
|
|
|
|
$font-size: 14px;
|
|
$font-size-s: 12px; |