feat: update sass palette
This commit is contained in:
winston
parent
9098bf0a02
commit
93d2f6be48
8 changed files with 290 additions and 25 deletions
|
|
@ -64,6 +64,10 @@ body {
|
|||
}
|
||||
```
|
||||
|
||||
### Sass
|
||||
|
||||
The usage instructions for Sass are documented [here](https://github.com/catppuccin/palette/tree/main/scss), in the `scss` folder.
|
||||
|
||||
### Gimp
|
||||
|
||||
1. Clone this repository locally
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
/* ----- Catppuccin Colors ----- */
|
||||
|
||||
$rosewater: #F5E0DC;
|
||||
$flamingo: #F2CDCD;
|
||||
$mauve: #DDB6F2;
|
||||
$pink: #F5C2E7;
|
||||
$maroon: #E8A2AF;
|
||||
$red: #F28FAD;
|
||||
$peach: #F8BD96;
|
||||
$yellow: #FAE3B0;
|
||||
$green: #ABE9B3;
|
||||
$teal: #B5E8E0;
|
||||
$blue: #96CDFB;
|
||||
$sky: #89DCEB;
|
||||
$lavender: #C9CBFF;
|
||||
|
||||
$black0: #161320;
|
||||
$black1: #1A1826;
|
||||
$black2: #1E1E2E;
|
||||
$black3: #302D41;
|
||||
$black4: #575268;
|
||||
$gray0: #6E6C7E;
|
||||
$gray1: #988BA2;
|
||||
$gray2: #C3BAC6;
|
||||
$white: #D9E0EE;
|
||||
68
scss/README.md
Normal file
68
scss/README.md
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
# Catppuccin Sass
|
||||
|
||||
There are two ways of using these Sass files:
|
||||
|
||||
## Import one-by-one
|
||||
|
||||
The easiest way to import a single flavour, is to use one of these 4 files:\
|
||||
`_latte.scss`, `_frappe.scss`, `_macchiato.scss`, `_mocha.scss`
|
||||
|
||||
Input:
|
||||
```scss
|
||||
@import "mocha";
|
||||
|
||||
.my-mocha-class {
|
||||
background: $base;
|
||||
color: $text;
|
||||
}
|
||||
```
|
||||
|
||||
Output:
|
||||
```css
|
||||
.my-mocha-class {
|
||||
background: #1e1e2e;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
```
|
||||
|
||||
## Import the single-map file
|
||||
|
||||
Another way to create all four flavours, in a single file, from a single file,
|
||||
is to use `_catppuccin.scss`.
|
||||
|
||||
Input:
|
||||
|
||||
```scss
|
||||
@use "catppuccin";
|
||||
|
||||
@each $flavour, $colour in catppuccin.$palette {
|
||||
.my-#{flavour}-class {
|
||||
background: map-get($colour, base);
|
||||
color: map-get($colour, text);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
```css
|
||||
.my-mocha-class {
|
||||
background: #1e1e2e;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
|
||||
.my-macchiato-class {
|
||||
background: #24273a;
|
||||
color: #cad3f5;
|
||||
}
|
||||
|
||||
.my-frappe-class {
|
||||
background: #303446;
|
||||
color: #c6d0f5;
|
||||
}
|
||||
|
||||
.my-latte-class {
|
||||
background: #eff1f5;
|
||||
color: #4c4f69;
|
||||
}
|
||||
```
|
||||
114
scss/_catppuccin.scss
Normal file
114
scss/_catppuccin.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
$palette: (
|
||||
"mocha": (
|
||||
"rosewater": #f5e0dc,
|
||||
"flamingo": #f2cdcd,
|
||||
"pink": #f5c2e7,
|
||||
"mauve": #cba6f7,
|
||||
"red": #f38ba8,
|
||||
"maroon": #eba0ac,
|
||||
"peach": #fab387,
|
||||
"yellow": #f9e2af,
|
||||
"green": #a6e3a1,
|
||||
"teal": #94e2d5,
|
||||
"sky": #89dceb,
|
||||
"sapphire": #74c7ec,
|
||||
"blue": #89b4fa,
|
||||
"lavender": #b4befe,
|
||||
"text": #cdd6f4,
|
||||
"subtext1": #bac2de,
|
||||
"subtext0": #a6adc8,
|
||||
"overlay2": #9399b2,
|
||||
"overlay1": #7f849c,
|
||||
"overlay0": #6c7086,
|
||||
"surface2": #585b70,
|
||||
"surface1": #45475a,
|
||||
"surface0": #313244,
|
||||
"base": #1e1e2e,
|
||||
"mantle": #181825,
|
||||
"crust": #11111b,
|
||||
),
|
||||
"macchiato": (
|
||||
"rosewater": #f4dbd6,
|
||||
"flamingo": #f0c6c6,
|
||||
"pink": #f5bde6,
|
||||
"mauve": #c6a0f6,
|
||||
"red": #ed8796,
|
||||
"maroon": #ee99a0,
|
||||
"peach": #f5a97f,
|
||||
"yellow": #eed49f,
|
||||
"green": #a6da95,
|
||||
"teal": #8bd5ca,
|
||||
"sky": #91d7e3,
|
||||
"sapphire": #7dc4e4,
|
||||
"blue": #8aadf4,
|
||||
"lavender": #b7bdf8,
|
||||
"text": #cad3f5,
|
||||
"subtext1": #b8c0e0,
|
||||
"subtext0": #a5adcb,
|
||||
"overlay2": #939ab7,
|
||||
"overlay1": #8087a2,
|
||||
"overlay0": #6e738d,
|
||||
"surface2": #5b6078,
|
||||
"surface1": #494d64,
|
||||
"surface0": #363a4f,
|
||||
"base": #24273a,
|
||||
"mantle": #1e2030,
|
||||
"crust": #181926,
|
||||
),
|
||||
"frappe": (
|
||||
"rosewater": #f2d5cf,
|
||||
"flamingo": #eebebe,
|
||||
"pink": #f4b8e4,
|
||||
"mauve": #ca9ee6,
|
||||
"red": #e78284,
|
||||
"maroon": #ea999c,
|
||||
"peach": #ef9f76,
|
||||
"yellow": #e5c890,
|
||||
"green": #a6d189,
|
||||
"teal": #81c8be,
|
||||
"sky": #99d1db,
|
||||
"sapphire": #85c1dc,
|
||||
"blue": #8caaee,
|
||||
"lavender": #babbf1,
|
||||
"text": #c6d0f5,
|
||||
"subtext1": #b5bfe2,
|
||||
"subtext0": #a5adce,
|
||||
"overlay2": #949cbb,
|
||||
"overlay1": #838ba7,
|
||||
"overlay0": #737994,
|
||||
"surface2": #626880,
|
||||
"surface1": #51576d,
|
||||
"surface0": #414559,
|
||||
"base": #303446,
|
||||
"mantle": #292c3c,
|
||||
"crust": #232634,
|
||||
),
|
||||
"latte": (
|
||||
"rosewater": #dc8a78,
|
||||
"flamingo": #dd7878,
|
||||
"pink": #ea76cb,
|
||||
"mauve": #8839ef,
|
||||
"red": #d20f39,
|
||||
"maroon": #e64553,
|
||||
"peach": #fe640b,
|
||||
"yellow": #df8e1d,
|
||||
"green": #40a02b,
|
||||
"teal": #179299,
|
||||
"sky": #04a5e5,
|
||||
"sapphire": #209fb5,
|
||||
"blue": #1e66f5,
|
||||
"lavender": #7287fd,
|
||||
"text": #4c4f69,
|
||||
"subtext1": #5c5f77,
|
||||
"subtext0": #6c6f85,
|
||||
"overlay2": #7c7f93,
|
||||
"overlay1": #8c8fa1,
|
||||
"overlay0": #9ca0b0,
|
||||
"surface2": #acb0be,
|
||||
"surface1": #bcc0cc,
|
||||
"surface0": #ccd0da,
|
||||
"crust": #dce0e8,
|
||||
"mantle": #e6e9ef,
|
||||
"base": #eff1f5,
|
||||
)
|
||||
)
|
||||
26
scss/_frappe.scss
Normal file
26
scss/_frappe.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
$rosewater: #f2d5cf;
|
||||
$flamingo: #eebebe;
|
||||
$pink: #f4b8e4;
|
||||
$mauve: #ca9ee6;
|
||||
$red: #e78284;
|
||||
$maroon: #ea999c;
|
||||
$peach: #ef9f76;
|
||||
$yellow: #e5c890;
|
||||
$green: #a6d189;
|
||||
$teal: #81c8be;
|
||||
$sky: #99d1db;
|
||||
$sapphire: #85c1dc;
|
||||
$blue: #8caaee;
|
||||
$lavender: #babbf1;
|
||||
$text: #c6d0f5;
|
||||
$subtext1: #b5bfe2;
|
||||
$subtext0: #a5adce;
|
||||
$overlay2: #949cbb;
|
||||
$overlay1: #838ba7;
|
||||
$overlay0: #737994;
|
||||
$surface2: #626880;
|
||||
$surface1: #51576d;
|
||||
$surface0: #414559;
|
||||
$base: #303446;
|
||||
$mantle: #292c3c;
|
||||
$crust: #232634;
|
||||
26
scss/_latte.scss
Normal file
26
scss/_latte.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
$rosewater: #dc8a78;
|
||||
$flamingo: #dd7878;
|
||||
$pink: #ea76cb;
|
||||
$mauve: #8839ef;
|
||||
$red: #d20f39;
|
||||
$maroon: #e64553;
|
||||
$peach: #fe640b;
|
||||
$yellow: #df8e1d;
|
||||
$green: #40a02b;
|
||||
$teal: #179299;
|
||||
$sky: #04a5e5;
|
||||
$sapphire: #209fb5;
|
||||
$blue: #1e66f5;
|
||||
$lavender: #7287fd;
|
||||
$text: #4c4f69;
|
||||
$subtext1: #5c5f77;
|
||||
$subtext0: #6c6f85;
|
||||
$overlay2: #7c7f93;
|
||||
$overlay1: #8c8fa1;
|
||||
$overlay0: #9ca0b0;
|
||||
$surface2: #acb0be;
|
||||
$surface1: #bcc0cc;
|
||||
$surface0: #ccd0da;
|
||||
$crust: #dce0e8;
|
||||
$mantle: #e6e9ef;
|
||||
$base: #eff1f5;
|
||||
26
scss/_macchiato.scss
Normal file
26
scss/_macchiato.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
$rosewater: #f4dbd6;
|
||||
$flamingo: #f0c6c6;
|
||||
$pink: #f5bde6;
|
||||
$mauve: #c6a0f6;
|
||||
$red: #ed8796;
|
||||
$maroon: #ee99a0;
|
||||
$peach: #f5a97f;
|
||||
$yellow: #eed49f;
|
||||
$green: #a6da95;
|
||||
$teal: #8bd5ca;
|
||||
$sky: #91d7e3;
|
||||
$sapphire: #7dc4e4;
|
||||
$blue: #8aadf4;
|
||||
$lavender: #b7bdf8;
|
||||
$text: #cad3f5;
|
||||
$subtext1: #b8c0e0;
|
||||
$subtext0: #a5adcb;
|
||||
$overlay2: #939ab7;
|
||||
$overlay1: #8087a2;
|
||||
$overlay0: #6e738d;
|
||||
$surface2: #5b6078;
|
||||
$surface1: #494d64;
|
||||
$surface0: #363a4f;
|
||||
$base: #24273a;
|
||||
$mantle: #1e2030;
|
||||
$crust: #181926;
|
||||
26
scss/_mocha.scss
Normal file
26
scss/_mocha.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
$rosewater: #f5e0dc;
|
||||
$flamingo: #f2cdcd;
|
||||
$pink: #f5c2e7;
|
||||
$mauve: #cba6f7;
|
||||
$red: #f38ba8;
|
||||
$maroon: #eba0ac;
|
||||
$peach: #fab387;
|
||||
$yellow: #f9e2af;
|
||||
$green: #a6e3a1;
|
||||
$teal: #94e2d5;
|
||||
$sky: #89dceb;
|
||||
$sapphire: #74c7ec;
|
||||
$blue: #89b4fa;
|
||||
$lavender: #b4befe;
|
||||
$text: #cdd6f4;
|
||||
$subtext1: #bac2de;
|
||||
$subtext0: #a6adc8;
|
||||
$overlay2: #9399b2;
|
||||
$overlay1: #7f849c;
|
||||
$overlay0: #6c7086;
|
||||
$surface2: #585b70;
|
||||
$surface1: #45475a;
|
||||
$surface0: #313244;
|
||||
$base: #1e1e2e;
|
||||
$mantle: #181825;
|
||||
$crust: #11111b;
|
||||
Loading…
Reference in a new issue