From 93d2f6be48be911c32d9f0878b97a506b17bf3aa Mon Sep 17 00:00:00 2001 From: winston Date: Sat, 6 Aug 2022 23:26:02 +0200 Subject: [PATCH] feat: update sass palette --- README.md | 4 ++ scss/Catppuccin.scss | 25 --------- scss/README.md | 68 +++++++++++++++++++++++++ scss/_catppuccin.scss | 114 ++++++++++++++++++++++++++++++++++++++++++ scss/_frappe.scss | 26 ++++++++++ scss/_latte.scss | 26 ++++++++++ scss/_macchiato.scss | 26 ++++++++++ scss/_mocha.scss | 26 ++++++++++ 8 files changed, 290 insertions(+), 25 deletions(-) delete mode 100644 scss/Catppuccin.scss create mode 100644 scss/README.md create mode 100644 scss/_catppuccin.scss create mode 100644 scss/_frappe.scss create mode 100644 scss/_latte.scss create mode 100644 scss/_macchiato.scss create mode 100644 scss/_mocha.scss diff --git a/README.md b/README.md index f46f25b..5193969 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/scss/Catppuccin.scss b/scss/Catppuccin.scss deleted file mode 100644 index 7b25850..0000000 --- a/scss/Catppuccin.scss +++ /dev/null @@ -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; diff --git a/scss/README.md b/scss/README.md new file mode 100644 index 0000000..2443eff --- /dev/null +++ b/scss/README.md @@ -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; +} +``` diff --git a/scss/_catppuccin.scss b/scss/_catppuccin.scss new file mode 100644 index 0000000..f809f05 --- /dev/null +++ b/scss/_catppuccin.scss @@ -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, + ) +) diff --git a/scss/_frappe.scss b/scss/_frappe.scss new file mode 100644 index 0000000..49485fc --- /dev/null +++ b/scss/_frappe.scss @@ -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; diff --git a/scss/_latte.scss b/scss/_latte.scss new file mode 100644 index 0000000..c1a01ca --- /dev/null +++ b/scss/_latte.scss @@ -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; diff --git a/scss/_macchiato.scss b/scss/_macchiato.scss new file mode 100644 index 0000000..9355e38 --- /dev/null +++ b/scss/_macchiato.scss @@ -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; diff --git a/scss/_mocha.scss b/scss/_mocha.scss new file mode 100644 index 0000000..728949d --- /dev/null +++ b/scss/_mocha.scss @@ -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;