Migrate Tailwind CSS palette generation to Whiskers

.github/workflows/whiskers-check.yml

@@ -0,0 +1,15 @@
+name: whiskers
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  run:
+    uses: catppuccin/actions/.github/workflows/whiskers-check.yml@v1
+    with:
+      args: tailwindcss.tera
+    secrets: inherit

packages/catppuccin-tailwindcss/README.md

@@ -60,6 +60,11 @@
 Check out some more advanced examples at
 [tailwindcss.catppuccin.com](https://tailwindcss.catppuccin.com)!
 
+## Development
+
+Install [Whiskers](https://github.com/catppuccin/whiskers) and run
+`whiskers tailwindcss.tera` from the repository root to regenerate the Sass palette.
+
 ## 💝 Thanks to
 
 **Current maintainers**

packages/catppuccin-tailwindcss/src/_palette.scss

@@ -0,0 +1,116 @@
+// Generated by Whiskers from tailwindcss.tera. Do not edit directly.
+
+$palette: (
+  "latte": (
+    "base": #eff1f5,
+    "blue": #1e66f5,
+    "crust": #dce0e8,
+    "flamingo": #dd7878,
+    "green": #40a02b,
+    "lavender": #7287fd,
+    "mantle": #e6e9ef,
+    "maroon": #e64553,
+    "mauve": #8839ef,
+    "overlay0": #9ca0b0,
+    "overlay1": #8c8fa1,
+    "overlay2": #7c7f93,
+    "peach": #fe640b,
+    "pink": #ea76cb,
+    "red": #d20f39,
+    "rosewater": #dc8a78,
+    "sapphire": #209fb5,
+    "sky": #04a5e5,
+    "subtext0": #6c6f85,
+    "subtext1": #5c5f77,
+    "surface0": #ccd0da,
+    "surface1": #bcc0cc,
+    "surface2": #acb0be,
+    "teal": #179299,
+    "text": #4c4f69,
+    "yellow": #df8e1d
+  ),
+  "frappe": (
+    "base": #303446,
+    "blue": #8caaee,
+    "crust": #232634,
+    "flamingo": #eebebe,
+    "green": #a6d189,
+    "lavender": #babbf1,
+    "mantle": #292c3c,
+    "maroon": #ea999c,
+    "mauve": #ca9ee6,
+    "overlay0": #737994,
+    "overlay1": #838ba7,
+    "overlay2": #949cbb,
+    "peach": #ef9f76,
+    "pink": #f4b8e4,
+    "red": #e78284,
+    "rosewater": #f2d5cf,
+    "sapphire": #85c1dc,
+    "sky": #99d1db,
+    "subtext0": #a5adce,
+    "subtext1": #b5bfe2,
+    "surface0": #414559,
+    "surface1": #51576d,
+    "surface2": #626880,
+    "teal": #81c8be,
+    "text": #c6d0f5,
+    "yellow": #e5c890
+  ),
+  "macchiato": (
+    "base": #24273a,
+    "blue": #8aadf4,
+    "crust": #181926,
+    "flamingo": #f0c6c6,
+    "green": #a6da95,
+    "lavender": #b7bdf8,
+    "mantle": #1e2030,
+    "maroon": #ee99a0,
+    "mauve": #c6a0f6,
+    "overlay0": #6e738d,
+    "overlay1": #8087a2,
+    "overlay2": #939ab7,
+    "peach": #f5a97f,
+    "pink": #f5bde6,
+    "red": #ed8796,
+    "rosewater": #f4dbd6,
+    "sapphire": #7dc4e4,
+    "sky": #91d7e3,
+    "subtext0": #a5adcb,
+    "subtext1": #b8c0e0,
+    "surface0": #363a4f,
+    "surface1": #494d64,
+    "surface2": #5b6078,
+    "teal": #8bd5ca,
+    "text": #cad3f5,
+    "yellow": #eed49f
+  ),
+  "mocha": (
+    "base": #1e1e2e,
+    "blue": #89b4fa,
+    "crust": #11111b,
+    "flamingo": #f2cdcd,
+    "green": #a6e3a1,
+    "lavender": #b4befe,
+    "mantle": #181825,
+    "maroon": #eba0ac,
+    "mauve": #cba6f7,
+    "overlay0": #6c7086,
+    "overlay1": #7f849c,
+    "overlay2": #9399b2,
+    "peach": #fab387,
+    "pink": #f5c2e7,
+    "red": #f38ba8,
+    "rosewater": #f5e0dc,
+    "sapphire": #74c7ec,
+    "sky": #89dceb,
+    "subtext0": #a6adc8,
+    "subtext1": #bac2de,
+    "surface0": #313244,
+    "surface1": #45475a,
+    "surface2": #585b70,
+    "teal": #94e2d5,
+    "text": #cdd6f4,
+    "yellow": #f9e2af
+  )
+);

packages/catppuccin-tailwindcss/src/_theme.scss

@@ -5,6 +5,7 @@ $dark-variant: "mocha" !default;
 @use 'sass:map';
 
 @use "@catppuccin/palette/scss/catppuccin";
+@use "palette" as generated;
 
 $prefix: '-ctp';
 $variants: (
@@ -19,14 +20,13 @@ $variants: (
 }
 
 @mixin createFlavorPalette($flavor) {
-  @each $ctp-color-name, $ctp-color-value in map.get(catppuccin.$palette, "latte") {
-    // this is using latte as a dummy because it only needs to iterate over the structure
-    --catppuccin-color-#{$ctp-color-name}: #{catppuccin.get-color( $flavor, $ctp-color-name)};
+  @each $ctp-color-name, $ctp-color-value in map.get(generated.$palette, $flavor) {
+    --catppuccin-color-#{$ctp-color-name}: #{$ctp-color-value};
     @if (isAccent($ctp-color-name)) {
       @each $variant-type, $variant-identifier in $variants {
         @for $i from 1 through list.length($variant-identifier) {
           @if ($variant-type == "default") {
-            --catppuccin-color-#{$ctp-color-name}-#{$variant-identifier}: #{catppuccin.get-color( $flavor, $ctp-color-name)};
+            --catppuccin-color-#{$ctp-color-name}-#{$variant-identifier}: #{$ctp-color-value};
           } @else {
             --catppuccin-color-#{$ctp-color-name}-#{list.nth($variant-identifier, $i)}: #{catppuccin.get-color( $flavor, $ctp-color-name, $variant-type, $i)};
           }
@@ -37,7 +37,7 @@ $variants: (
 }
 
 @theme inline {
-  @each $ctp-color-name, $ctp-color-value in map.get(catppuccin.$palette, 'latte') { // this is using latte as a dummy because it only needs to iterate over the structure
+  @each $ctp-color-name, $ctp-color-value in map.get(generated.$palette, 'latte') {
     --color#{$prefix}-#{$ctp-color-name}: var(--catppuccin-color-#{$ctp-color-name});
     @if (isAccent($ctp-color-name)) {
       @each $variant-type, $variant-identifier in $variants {

tailwindcss.tera

@@ -0,0 +1,15 @@
+---
+whiskers:
+  version: "^2.9.0"
+  matrix:
+    - output: ["palette"]
+  filename: "packages/catppuccin-tailwindcss/src/_palette.scss"
+  hex_format: "#{{r}}{{g}}{{b}}{{z}}"
+---
+// Generated by Whiskers from tailwindcss.tera. Do not edit directly.
+
+$palette: (
+{% for flavor_id in ["latte", "frappe", "macchiato", "mocha"] %}  "{{ flavor_id }}": (
+{% for color_id in ["base", "blue", "crust", "flamingo", "green", "lavender", "mantle", "maroon", "mauve", "overlay0", "overlay1", "overlay2", "peach", "pink", "red", "rosewater", "sapphire", "sky", "subtext0", "subtext1", "surface0", "surface1", "surface2", "teal", "text", "yellow"] %}    "{{ color_id }}": {{ flavors[flavor_id].colors[color_id].hex }}{% if not loop.last %},{% endif %}
+{% endfor %}  ){% if not loop.last %},{% endif %}
+{% endfor %});