starlight-theme-rose-pine 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# starlight-theme-rose-pine
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ed66cb0`](https://github.com/trueberryless-org/starlight-theme-rose-pine/commit/ed66cb05c1d2d0bcd8f6bc8f627288ad5028297e) Thanks [@trueberryless](https://github.com/trueberryless)! - Initial public release

package/README.md

@@ -0,0 +1,38 @@
+<p align="center">
+    <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
+    <h2 align="center">Rosé Pine for Starlight</h2>
+</p>
+
+<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
+
+## Usage
+
+1. Open App
+2. Under settings, import `rose-pine.theme`
+3. Select `Rosé Pine` from the themes dropdown
+
+## Gallery
+
+### Rosé Pine
+
+<img width="256" alt="Rosé Pine with Starlight" src="https://raw.githubusercontent.com/trueberryless-org/starlight-theme-rose-pine/main/assets/main.png" />
+
+### Rosé Pine Moon
+
+<img width="256" alt="Rosé Pine Moon with Starlight" src="https://raw.githubusercontent.com/trueberryless-org/starlight-theme-rose-pine/main/assets/moon.png" />
+
+### Rosé Pine Dawn
+
+<img width="256" alt="Rosé Pine Dawn with Starlight" src="https://raw.githubusercontent.com/trueberryless-org/starlight-theme-rose-pine/main/assets/dawn.png" />
+
+## Thanks to
+
+- [Felix Schneider](https://github.com/trueberryless)
+
+## Contributing
+
+Modify `colors.json` using Rosé Pine variables, then build variants:
+
+```sh
+pnpm build
+```

package/colors.json

@@ -0,0 +1,59 @@
+{
+  "flavors": {
+    "main": {
+      "base": "#191724",
+      "surface": "#1f1d2e",
+      "overlay": "#26233a",
+      "muted": "#6e6a86",
+      "subtle": "#908caa",
+      "text": "#e0def4",
+      "love": "#eb6f92",
+      "gold": "#f6c177",
+      "rose": "#ebbcba",
+      "pine": "#31748f",
+      "foam": "#9ccfd8",
+      "iris": "#c4a7e7",
+      "highlightLow": "#21202e",
+      "highlightMed": "#403d52",
+      "highlightHigh": "#524f67",
+      "type": "dark"
+    },
+    "moon": {
+      "base": "#232136",
+      "surface": "#2a273f",
+      "overlay": "#393552",
+      "muted": "#6e6a86",
+      "subtle": "#908caa",
+      "text": "#e0def4",
+      "love": "#eb6f92",
+      "gold": "#f6c177",
+      "rose": "#ea9a97",
+      "pine": "#3e8fb0",
+      "foam": "#9ccfd8",
+      "iris": "#c4a7e7",
+      "highlightLow": "#2a283e",
+      "highlightMed": "#44415a",
+      "highlightHigh": "#56526e",
+      "type": "dark"
+    },
+    "dawn": {
+      "base": "#faf4ed",
+      "surface": "#fffaf3",
+      "overlay": "#f2e9e1",
+      "muted": "#9893a5",
+      "subtle": "#797593",
+      "text": "#575279",
+      "love": "#b4637a",
+      "gold": "#ea9d34",
+      "rose": "#d7827e",
+      "pine": "#286983",
+      "foam": "#56949f",
+      "iris": "#907aa9",
+      "highlightLow": "#f4ede8",
+      "highlightMed": "#dfdad9",
+      "highlightHigh": "#cecacd",
+      "type": "light"
+    }
+  },
+  "accents": ["love", "gold", "rose", "pine", "foam", "iris"]
+}

package/index.ts

@@ -0,0 +1,29 @@
+import type { StarlightPlugin } from "@astrojs/starlight/types";
+
+type DarkFlavor = "main" | "moon";
+type LightFlavor = "dawn";
+type Accent = "love" | "gold" | "rose" | "pine" | "foam" | "iris";
+
+interface Config {
+  dark?: { flavor?: DarkFlavor; accent?: Accent };
+  light?: { flavor?: LightFlavor; accent?: Accent };
+}
+
+export default function createPlugin(config?: Config): StarlightPlugin {
+  const { dark, light } = config ?? {};
+  return {
+    name: "starlight-theme-rose-pine",
+    hooks: {
+      "config:setup": ({ config, updateConfig }) => {
+        updateConfig({
+          customCss: [
+            ...(config.customCss ?? []),
+            "starlight-theme-rose-pine/styles/shared.css",
+            `starlight-theme-rose-pine/themes/rose-pine-${dark?.flavor ?? "main"}-${dark?.accent ?? "pine"}.css`,
+            `starlight-theme-rose-pine/themes/rose-pine-${light?.flavor ?? "dawn"}-${light?.accent ?? "pine"}.css`,
+          ],
+        });
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "starlight-theme-rose-pine",
+  "version": "0.1.0",
+  "description": "Soho vibes for Starlight",
+  "keywords": [
+    "starlight",
+    "theme",
+    "rose pine",
+    "soho vibes"
+  ],
+  "homepage": "https://github.com/trueberryless-org/starlight-theme-rose-pine",
+  "bugs": {
+    "url": "https://github.com/trueberryless-org/starlight-theme-rose-pine/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trueberryless-org/starlight-theme-rose-pine.git",
+    "directory": "packages/starlight-theme-rose-pine"
+  },
+  "license": "MIT",
+  "author": "trueberryless <trueberryless@gmail.com> (https://trueberryless.org)",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./styles/*": "./styles/*",
+    "./themes/*": "./themes/*"
+  },
+  "scripts": {
+    "build": "tsx scripts/build-themes.ts"
+  },
+  "devDependencies": {
+    "@astrojs/starlight": "^0.37.6",
+    "astro": "^5.17.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.37"
+  },
+  "engines": {
+    "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/build-themes.ts

@@ -0,0 +1,107 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import colors from "../colors.json";
+
+const themesDir = path.join(process.cwd(), "themes");
+if (!fs.existsSync(themesDir)) fs.mkdirSync(themesDir);
+
+type Palette = typeof colors.flavors.main;
+type PaletteKey = keyof Palette;
+
+function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  const r = parseInt(hex.substring(1, 3), 16) / 255;
+  const g = parseInt(hex.substring(3, 5), 16) / 255;
+  const b = parseInt(hex.substring(5, 7), 16) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h = 0,
+    s = 0,
+    l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+function getHslStr(hex: string, lOffset = 0): string {
+  const { h, s, l } = hexToHsl(hex);
+  const newL = Math.min(Math.max(l + lOffset, 0), 100);
+  return `hsl(${h}, ${s}%, ${newL}%)`;
+}
+
+for (const [flavorName, palette] of Object.entries(colors.flavors)) {
+  const p = palette as Palette;
+  const isDark = p.type === "dark";
+
+  for (const accentName of colors.accents) {
+    const accentHex = p[accentName as PaletteKey];
+
+    const css = `@layer rose-pine {
+  :root${p.type === "light" ? "[data-theme='light']" : ""} {
+    --sl-color-accent-low: ${getHslStr(accentHex, isDark ? -45 : -25)};
+    --sl-color-accent: ${getHslStr(accentHex)};
+    --sl-color-accent-high: ${getHslStr(accentHex, isDark ? 25 : 45)};
+
+    --sl-color-white: ${p.text};
+    --sl-color-gray-1: ${p.subtle};
+    --sl-color-gray-2: ${p.muted};
+    --sl-color-gray-3: ${p.highlightHigh};
+    --sl-color-gray-4: ${p.highlightMed};
+    --sl-color-gray-5: ${p.overlay};
+    --sl-color-gray-6: ${p.highlightLow};
+    --sl-color-gray-7: ${p.surface};
+    --sl-color-black: ${p.base};
+
+    --sl-hue-orange: ${hexToHsl(p.gold).h};
+    --sl-color-orange-low: ${getHslStr(p.gold, isDark ? -30 : 30)};
+    --sl-color-orange: ${getHslStr(p.gold)};
+    --sl-color-orange-high: ${getHslStr(p.gold, isDark ? 15 : -15)};
+
+    --sl-hue-green: ${hexToHsl(p.pine).h};
+    --sl-color-green-low: ${getHslStr(p.pine, isDark ? -10 : 30)};
+    --sl-color-green: ${getHslStr(p.pine, isDark ? 20 : 0)};
+    --sl-color-green-high: ${getHslStr(p.pine, isDark ? 15 : -15)};
+
+    --sl-hue-blue: ${hexToHsl(p.foam).h};
+    --sl-color-blue-low: ${getHslStr(p.foam, isDark ? -30 : 30)};
+    --sl-color-blue: ${getHslStr(p.foam)};
+    --sl-color-blue-high: ${getHslStr(p.foam, isDark ? 15 : -15)};
+
+    --sl-hue-purple: ${hexToHsl(p.iris).h};
+    --sl-color-purple-low: ${getHslStr(p.iris, isDark ? -30 : 30)};
+    --sl-color-purple: ${getHslStr(p.iris)};
+    --sl-color-purple-high: ${getHslStr(p.iris, isDark ? 15 : -15)};
+
+    --sl-hue-red: ${hexToHsl(p.love).h};
+    --sl-color-red-low: ${getHslStr(p.love, isDark ? -30 : 30)};
+    --sl-color-red: ${getHslStr(p.love)};
+    --sl-color-red-high: ${getHslStr(p.love, isDark ? 15 : -15)};
+
+    color-scheme: ${p.type};
+  }
+}`;
+
+    fs.writeFileSync(
+      path.join(themesDir, `rose-pine-${flavorName}-${accentName}.css`),
+      css
+    );
+  }
+}

package/styles/shared.css

@@ -0,0 +1,195 @@
+@layer starlight, rose-pine;
+
+@layer rose-pine {
+  :root {
+    --sl-color-text: var(--sl-color-white);
+  }
+
+  .sidebar-content a,
+  .right-sidebar-panel a,
+  .sidebar-content summary {
+    color: var(--sl-color-white) !important;
+  }
+
+  .sidebar-content a[aria-current="page"],
+  .right-sidebar-panel a[aria-current="true"] {
+    color: var(--sl-color-black) !important;
+    background-color: var(--sl-color-accent-high) !important;
+    font-weight: 600;
+  }
+
+  :root[data-theme="light"] .sidebar-content a[aria-current="page"],
+  :root[data-theme="light"] .right-sidebar-panel a[aria-current="true"] {
+    color: var(--sl-color-accent) !important;
+  }
+
+  .sl-flex.edit-margin a,
+  .pagination-links a {
+    color: var(--sl-color-white) !important;
+  }
+
+  .sl-flex.edit-margin svg {
+    color: var(--sl-color-accent) !important;
+  }
+
+  header,
+  .right-sidebar,
+  .content-panel {
+    border-color: var(--sl-color-gray-5);
+  }
+
+  .expressive-code pre {
+    --code-background: var(--sl-color-gray-6) !important;
+  }
+
+  .expressive-code .title {
+    background: var(--sl-color-gray-6) !important;
+  }
+
+  .sidebar-content .sl-badge {
+    background-color: var(--sl-color-gray-6) !important;
+    border: 1px solid var(--sl-color-gray-5);
+    color: var(--sl-color-white) !important;
+  }
+
+  .sidebar-content .sl-badge.default {
+    border-color: var(--sl-color-accent-high);
+    background-color: var(--sl-color-accent-high) !important;
+    color: var(--sl-color-black) !important;
+  }
+
+  :root[data-theme="light"] .sidebar-content .sl-badge.default {
+    color: var(--sl-color-accent) !important;
+  }
+
+  .sl-badge {
+    background-color: transparent !important;
+  }
+
+  .sl-badge.default {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-accent),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-accent-low);
+    color: var(--sl-color-accent) !important;
+  }
+
+  .sl-badge.note {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-blue),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-blue-low);
+    color: var(--sl-color-blue) !important;
+  }
+
+  .sl-badge.success {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-green),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-green-low);
+    color: var(--sl-color-green) !important;
+  }
+
+  .sl-badge.tip {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-purple),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-purple-low);
+    color: var(--sl-color-purple) !important;
+  }
+
+  .sl-badge.caution {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-orange),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-orange-low);
+    color: var(--sl-color-orange) !important;
+  }
+
+  .sl-badge.danger {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-red),
+      transparent 90%
+    ) !important;
+    border: 1px solid var(--sl-color-red-low);
+    color: var(--sl-color-red) !important;
+  }
+
+  .starlight-aside {
+    background-color: transparent !important;
+    border-inline-start-width: 3px;
+  }
+
+  .starlight-aside--note {
+    --sl-color-asides-text-accent: var(--sl-color-blue);
+    --sl-color-asides-border: var(--sl-color-blue);
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-blue),
+      transparent 92%
+    ) !important;
+  }
+
+  .starlight-aside--tip {
+    --sl-color-asides-text-accent: var(--sl-color-purple);
+    --sl-color-asides-border: var(--sl-color-purple);
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-purple),
+      transparent 92%
+    ) !important;
+  }
+
+  .starlight-aside--caution {
+    --sl-color-asides-text-accent: var(--sl-color-orange);
+    --sl-color-asides-border: var(--sl-color-orange);
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-orange),
+      transparent 92%
+    ) !important;
+  }
+
+  .starlight-aside--danger {
+    --sl-color-asides-text-accent: var(--sl-color-red);
+    --sl-color-asides-border: var(--sl-color-red);
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-red),
+      transparent 92%
+    ) !important;
+  }
+
+  .card {
+    border-radius: 0.75rem;
+    background-color: var(--sl-color-gray-5);
+    border-color: var(--sl-color-gray-4);
+  }
+
+  .sl-link-card .description {
+    color: var(--sl-color-gray-1);
+  }
+
+  .tab [aria-selected="false"] {
+    color: var(--sl-color-gray-1);
+  }
+
+  starlight-file-tree .comment {
+    color: var(--sl-color-gray-2);
+  }
+
+  footer .meta a {
+    color: var(--sl-color-gray-2);
+  }
+}

package/styles-main.css

@@ -0,0 +1,34 @@
+@layer starlight, rose-pine;
+
+@layer rose-pine {
+  :root,
+  ::backdrop {
+    --sl-color-accent-low: #131e4f;
+    --sl-color-accent: #3447ff;
+    --sl-color-accent-high: #b3c7ff;
+    --sl-color-white: #ffffff;
+    --sl-color-gray-1: #eceef2;
+    --sl-color-gray-2: #c0c2c7;
+    --sl-color-gray-3: #888b96;
+    --sl-color-gray-4: #545861;
+    --sl-color-gray-5: #353841;
+    --sl-color-gray-6: #24272f;
+    --sl-color-black: #17181c;
+  }
+
+  :root[data-theme="light"],
+  [data-theme="light"] ::backdrop {
+    --sl-color-accent-low: #c7d6ff;
+    --sl-color-accent: #364bff;
+    --sl-color-accent-high: #182775;
+    --sl-color-white: #17181c;
+    --sl-color-gray-1: #24272f;
+    --sl-color-gray-2: #353841;
+    --sl-color-gray-3: #545861;
+    --sl-color-gray-4: #888b96;
+    --sl-color-gray-5: #c0c2c7;
+    --sl-color-gray-6: #eceef2;
+    --sl-color-gray-7: #f5f6f8;
+    --sl-color-black: #ffffff;
+  }
+}

package/styles-moon.css

@@ -0,0 +1,34 @@
+@layer starlight, rose-pine;
+
+@layer rose-pine {
+  :root,
+  ::backdrop {
+    --sl-color-accent-low: #131e4f;
+    --sl-color-accent: #3447ff;
+    --sl-color-accent-high: #b3c7ff;
+    --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: #2a273f;
+    --sl-color-black: #232136;
+  }
+
+  :root[data-theme="light"],
+  [data-theme="light"] ::backdrop {
+    --sl-color-accent-low: #c7d6ff;
+    --sl-color-accent: #364bff;
+    --sl-color-accent-high: #182775;
+    --sl-color-white: #17181c;
+    --sl-color-gray-1: #24272f;
+    --sl-color-gray-2: #353841;
+    --sl-color-gray-3: #545861;
+    --sl-color-gray-4: #888b96;
+    --sl-color-gray-5: #c0c2c7;
+    --sl-color-gray-6: #eceef2;
+    --sl-color-gray-7: #f5f6f8;
+    --sl-color-black: #ffffff;
+  }
+}

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

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(189, 30%, 23%);
+    --sl-color-accent: hsl(189, 30%, 48%);
+    --sl-color-accent-high: hsl(189, 30%, 93%);
+
+    --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-gold.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(35, 81%, 31%);
+    --sl-color-accent: hsl(35, 81%, 56%);
+    --sl-color-accent-high: hsl(35, 81%, 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-iris.css

@@ -0,0 +1,44 @@
+@layer rose-pine {
+  :root[data-theme="light"] {
+    --sl-color-accent-low: hsl(268, 21%, 32%);
+    --sl-color-accent: hsl(268, 21%, 57%);
+    --sl-color-accent-high: hsl(268, 21%, 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;
+  }
+}