starlight-theme-rose-pine 0.1.0

package/themes/rose-pine-dawn-love.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(343, 35%, 30%);
+    --sl-color-accent: hsl(343, 35%, 55%);
+    --sl-color-accent-high: hsl(343, 35%, 100%);
+
+    --sl-color-white: #575279;
+    --sl-color-gray-1: #797593;
+    --sl-color-gray-2: #9893a5;
+    --sl-color-gray-3: #cecacd;
+    --sl-color-gray-4: #dfdad9;
+    --sl-color-gray-5: #f2e9e1;
+    --sl-color-gray-6: #f4ede8;
+    --sl-color-gray-7: #fffaf3;
+    --sl-color-black: #faf4ed;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 81%, 86%);
+    --sl-color-orange: hsl(35, 81%, 56%);
+    --sl-color-orange-high: hsl(35, 81%, 41%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 53%, 64%);
+    --sl-color-green: hsl(197, 53%, 34%);
+    --sl-color-green-high: hsl(197, 53%, 19%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 30%, 78%);
+    --sl-color-blue: hsl(189, 30%, 48%);
+    --sl-color-blue-high: hsl(189, 30%, 33%);
+
+    --sl-hue-purple: 268;
+    --sl-color-purple-low: hsl(268, 21%, 87%);
+    --sl-color-purple: hsl(268, 21%, 57%);
+    --sl-color-purple-high: hsl(268, 21%, 42%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 35%, 85%);
+    --sl-color-red: hsl(343, 35%, 55%);
+    --sl-color-red-high: hsl(343, 35%, 40%);
+
+    color-scheme: light;
+  }
+}

package/themes/rose-pine-dawn-pine.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(197, 53%, 9%);
+    --sl-color-accent: hsl(197, 53%, 34%);
+    --sl-color-accent-high: hsl(197, 53%, 79%);
+
+    --sl-color-white: #575279;
+    --sl-color-gray-1: #797593;
+    --sl-color-gray-2: #9893a5;
+    --sl-color-gray-3: #cecacd;
+    --sl-color-gray-4: #dfdad9;
+    --sl-color-gray-5: #f2e9e1;
+    --sl-color-gray-6: #f4ede8;
+    --sl-color-gray-7: #fffaf3;
+    --sl-color-black: #faf4ed;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 81%, 86%);
+    --sl-color-orange: hsl(35, 81%, 56%);
+    --sl-color-orange-high: hsl(35, 81%, 41%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 53%, 64%);
+    --sl-color-green: hsl(197, 53%, 34%);
+    --sl-color-green-high: hsl(197, 53%, 19%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 30%, 78%);
+    --sl-color-blue: hsl(189, 30%, 48%);
+    --sl-color-blue-high: hsl(189, 30%, 33%);
+
+    --sl-hue-purple: 268;
+    --sl-color-purple-low: hsl(268, 21%, 87%);
+    --sl-color-purple: hsl(268, 21%, 57%);
+    --sl-color-purple-high: hsl(268, 21%, 42%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 35%, 85%);
+    --sl-color-red: hsl(343, 35%, 55%);
+    --sl-color-red-high: hsl(343, 35%, 40%);
+
+    color-scheme: light;
+  }
+}

package/themes/rose-pine-dawn-rose.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(3, 53%, 42%);
+    --sl-color-accent: hsl(3, 53%, 67%);
+    --sl-color-accent-high: hsl(3, 53%, 100%);
+
+    --sl-color-white: #575279;
+    --sl-color-gray-1: #797593;
+    --sl-color-gray-2: #9893a5;
+    --sl-color-gray-3: #cecacd;
+    --sl-color-gray-4: #dfdad9;
+    --sl-color-gray-5: #f2e9e1;
+    --sl-color-gray-6: #f4ede8;
+    --sl-color-gray-7: #fffaf3;
+    --sl-color-black: #faf4ed;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 81%, 86%);
+    --sl-color-orange: hsl(35, 81%, 56%);
+    --sl-color-orange-high: hsl(35, 81%, 41%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 53%, 64%);
+    --sl-color-green: hsl(197, 53%, 34%);
+    --sl-color-green-high: hsl(197, 53%, 19%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 30%, 78%);
+    --sl-color-blue: hsl(189, 30%, 48%);
+    --sl-color-blue-high: hsl(189, 30%, 33%);
+
+    --sl-hue-purple: 268;
+    --sl-color-purple-low: hsl(268, 21%, 87%);
+    --sl-color-purple: hsl(268, 21%, 57%);
+    --sl-color-purple-high: hsl(268, 21%, 42%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 35%, 85%);
+    --sl-color-red: hsl(343, 35%, 55%);
+    --sl-color-red-high: hsl(343, 35%, 40%);
+
+    color-scheme: light;
+  }
+}

package/themes/rose-pine-main-foam.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(189, 43%, 28%);
+    --sl-color-accent: hsl(189, 43%, 73%);
+    --sl-color-accent-high: hsl(189, 43%, 98%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-main-gold.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(35, 88%, 27%);
+    --sl-color-accent: hsl(35, 88%, 72%);
+    --sl-color-accent-high: hsl(35, 88%, 97%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-main-iris.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(267, 57%, 33%);
+    --sl-color-accent: hsl(267, 57%, 78%);
+    --sl-color-accent-high: hsl(267, 57%, 100%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-main-love.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(343, 76%, 23%);
+    --sl-color-accent: hsl(343, 76%, 68%);
+    --sl-color-accent-high: hsl(343, 76%, 93%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-main-pine.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(197, 49%, 0%);
+    --sl-color-accent: hsl(197, 49%, 38%);
+    --sl-color-accent-high: hsl(197, 49%, 63%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-main-rose.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(2, 55%, 38%);
+    --sl-color-accent: hsl(2, 55%, 83%);
+    --sl-color-accent-high: hsl(2, 55%, 100%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #524f67;
+    --sl-color-gray-4: #403d52;
+    --sl-color-gray-5: #26233a;
+    --sl-color-gray-6: #21202e;
+    --sl-color-gray-7: #1f1d2e;
+    --sl-color-black: #191724;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 49%, 28%);
+    --sl-color-green: hsl(197, 49%, 58%);
+    --sl-color-green-high: hsl(197, 49%, 53%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-foam.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(189, 43%, 28%);
+    --sl-color-accent: hsl(189, 43%, 73%);
+    --sl-color-accent-high: hsl(189, 43%, 98%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-gold.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(35, 88%, 27%);
+    --sl-color-accent: hsl(35, 88%, 72%);
+    --sl-color-accent-high: hsl(35, 88%, 97%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-iris.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(267, 57%, 33%);
+    --sl-color-accent: hsl(267, 57%, 78%);
+    --sl-color-accent-high: hsl(267, 57%, 100%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-love.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(343, 76%, 23%);
+    --sl-color-accent: hsl(343, 76%, 68%);
+    --sl-color-accent-high: hsl(343, 76%, 93%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-pine.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(197, 48%, 2%);
+    --sl-color-accent: hsl(197, 48%, 47%);
+    --sl-color-accent-high: hsl(197, 48%, 72%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}

package/themes/rose-pine-moon-rose.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root {
+    --sl-color-accent-low: hsl(2, 66%, 30%);
+    --sl-color-accent: hsl(2, 66%, 75%);
+    --sl-color-accent-high: hsl(2, 66%, 100%);
+
+    --sl-color-white: #e0def4;
+    --sl-color-gray-1: #908caa;
+    --sl-color-gray-2: #6e6a86;
+    --sl-color-gray-3: #56526e;
+    --sl-color-gray-4: #44415a;
+    --sl-color-gray-5: #393552;
+    --sl-color-gray-6: #2a283e;
+    --sl-color-gray-7: #2a273f;
+    --sl-color-black: #232136;
+
+    --sl-hue-orange: 35;
+    --sl-color-orange-low: hsl(35, 88%, 42%);
+    --sl-color-orange: hsl(35, 88%, 72%);
+    --sl-color-orange-high: hsl(35, 88%, 87%);
+
+    --sl-hue-green: 197;
+    --sl-color-green-low: hsl(197, 48%, 37%);
+    --sl-color-green: hsl(197, 48%, 67%);
+    --sl-color-green-high: hsl(197, 48%, 62%);
+
+    --sl-hue-blue: 189;
+    --sl-color-blue-low: hsl(189, 43%, 43%);
+    --sl-color-blue: hsl(189, 43%, 73%);
+    --sl-color-blue-high: hsl(189, 43%, 88%);
+
+    --sl-hue-purple: 267;
+    --sl-color-purple-low: hsl(267, 57%, 48%);
+    --sl-color-purple: hsl(267, 57%, 78%);
+    --sl-color-purple-high: hsl(267, 57%, 93%);
+
+    --sl-hue-red: 343;
+    --sl-color-red-low: hsl(343, 76%, 38%);
+    --sl-color-red: hsl(343, 76%, 68%);
+    --sl-color-red-high: hsl(343, 76%, 83%);
+
+    color-scheme: dark;
+  }
+}