mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
185 lines
5.2 KiB
SCSS
185 lines
5.2 KiB
SCSS
$base-color: #332f35;
|
|
$shop: #b63831;
|
|
$red: #e3474a;
|
|
$orange: #df7c25;
|
|
$green: #70a630;
|
|
|
|
$palettes: (
|
|
base: (
|
|
background: (
|
|
default: $base-color,
|
|
hover: lighten($base-color, 5%),
|
|
lighthover: lighten($base-color, 4%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 20%),
|
|
text: lighten($base-color, 50%),
|
|
bold: lighten($base-color, 60%),
|
|
weak: lighten($base-color, 30%),
|
|
link: lighten($base-color, 100%),
|
|
h1: lighten($base-color, 100%),
|
|
h2: lighten($base-color, 70%),
|
|
h3: lighten($base-color, 60%),
|
|
surveyQuestion: lighten($base-color, 60%),
|
|
hover: lighten($base-color, 40%),
|
|
separator: lighten($base-color, 5%),
|
|
disabled: lighten($base-color, 10%),
|
|
)
|
|
),
|
|
user-menu: (
|
|
background: (
|
|
default: darken($base-color, 3%),
|
|
hover: darken($base-color, 1.5%),
|
|
highlight: lighten($base-color, 3%),
|
|
highlight-hover: lighten($base-color, 5%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 50%),
|
|
symbol: lighten($base-color, 8%),
|
|
text: lighten($base-color, 50%),
|
|
hover: lighten($base-color, 100%),
|
|
)
|
|
),
|
|
menu: (
|
|
background: (
|
|
default: lighten($base-color, 5%),
|
|
hover: lighten($base-color, 15%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 50%),
|
|
hover: lighten($base-color, 100%),
|
|
)
|
|
),
|
|
button: (
|
|
background: (
|
|
default: lighten($base-color, 10%),
|
|
hover: lighten($base-color, 15%),
|
|
weak: lighten($base-color, 5%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 50%),
|
|
dropdown: lighten($base-color, 50%),
|
|
text: lighten($base-color, 60%),
|
|
symbol: lighten($base-color, 50%),
|
|
indent: lighten($base-color, 5%),
|
|
weak: lighten($base-color, 25%),
|
|
hover: lighten($base-color, 75%),
|
|
)
|
|
),
|
|
selectedTool: (
|
|
background: (
|
|
default: lighten($base-color, 10%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 50%),
|
|
)
|
|
),
|
|
subbutton: (
|
|
background: (
|
|
hover: lighten($base-color, 15%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 30%),
|
|
hover: lighten($base-color, 50%),
|
|
)
|
|
),
|
|
indent: (
|
|
background: (
|
|
default: darken($base-color, 4%),
|
|
separator: darken($base-color, 8%),
|
|
hover: lighten($base-color, 5%),
|
|
outline: lighten($base-color, 10%),
|
|
),
|
|
foreground: (
|
|
default: #fff,
|
|
text: lighten($base-color, 40%),
|
|
symbol: lighten($base-color, 5%),
|
|
symbol-hover: lighten($base-color, 20%),
|
|
weak: lighten($base-color, 20%),
|
|
form: lighten($base-color, 50%),
|
|
)
|
|
),
|
|
indent-dark: (
|
|
background: (
|
|
default: darken($base-color, 6%),
|
|
separator: darken($base-color, 11%),
|
|
button: lighten($base-color, 2.5%),
|
|
button-hover: lighten($base-color, 5%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 30%),
|
|
link: lighten($base-color, 40%),
|
|
hover: lighten($base-color, 50%),
|
|
button: lighten($base-color, 50%),
|
|
button-hover: lighten($base-color, 70%),
|
|
)
|
|
),
|
|
indent-darker: (
|
|
background: (
|
|
default: darken($base-color, 8%),
|
|
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 15%),
|
|
)
|
|
),
|
|
footer: (
|
|
background: (
|
|
default: darken($base-color, 9%),
|
|
hover: darken($base-color, 2%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 20%),
|
|
hover: lighten($base-color, 35%),
|
|
symbol: lighten($base-color, 7.5%),
|
|
),
|
|
),
|
|
warning-banner: (
|
|
background: (
|
|
default: lighten($base-color, 10%),
|
|
button: lighten($base-color, 20%),
|
|
button-hover: lighten($base-color, 25%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 50%),
|
|
button: lighten($base-color, 40%),
|
|
button-hover: lighten($base-color, 45%),
|
|
),
|
|
),
|
|
image-label: (
|
|
background: (
|
|
default: lighten($base-color, 15%),
|
|
),
|
|
foreground: (
|
|
default: lighten($base-color, 80%),
|
|
),
|
|
triangle: (
|
|
default: lighten($base-color, 6%),
|
|
),
|
|
),
|
|
shop: (
|
|
background: (
|
|
default: $shop,
|
|
hover: lighten($shop, 5%),
|
|
),
|
|
foreground: (
|
|
default: lighten($shop, 65%),
|
|
),
|
|
),
|
|
);
|
|
|
|
@function color($element: 'base', $location: 'background', $hover: 'default') {
|
|
@return map-get(map-get(map-get($palettes, $element), $location), $hover);
|
|
}
|
|
|
|
$twitter: #00b6f1;
|
|
$patreon: #F96854;
|
|
$facebook: #3b5998;
|
|
$reddit: #ff5700;
|
|
$youtube: #b31217;
|
|
$pintrest: #cb2027;
|
|
$tumblr: #2c4762;
|
|
$deviantart: #4a5d4e;
|
|
$instagram: #c2368a;
|
|
$pixeljoint: #73d731;
|