@new-ui/themes 3.0.0

package/src/themes/catppuccin-latte.scss

@@ -0,0 +1,80 @@
+// Catppuccin Latte (light)
+// Palette values copied verbatim from the official Catppuccin palette (v1.8.0).
+// Source: https://github.com/catppuccin/palette (MIT License)
+// © Catppuccin. https://catppuccin.com
+
+[data-new-ui-theme='catppuccin-latte'] {
+  color-scheme: light;
+
+  // Palette (verbatim)
+  --ctp-rosewater: oklch(71.41% 0.1045 33.1deg);
+  --ctp-flamingo: oklch(68.56% 0.1259 20.87deg);
+  --ctp-pink: oklch(72.56% 0.1739 338.43deg);
+  --ctp-mauve: oklch(55.47% 0.2503 297.02deg);
+  --ctp-red: oklch(55.05% 0.2155 19.81deg);
+  --ctp-maroon: oklch(62.52% 0.1967 20.27deg);
+  --ctp-peach: oklch(69.2% 0.2041 42.43deg);
+  --ctp-yellow: oklch(71.4% 0.1494 67.78deg);
+  --ctp-green: oklch(62.5% 0.1772 140.44deg);
+  --ctp-teal: oklch(60.23% 0.0981 201.1deg);
+  --ctp-sky: oklch(68.2% 0.1448 235.38deg);
+  --ctp-sapphire: oklch(64.77% 0.1068 212.89deg);
+  --ctp-blue: oklch(55.86% 0.2255 262.09deg);
+  --ctp-lavender: oklch(66.38% 0.1751 273.13deg);
+  --ctp-text: oklch(43.55% 0.043 279.33deg);
+  --ctp-subtext1: oklch(49.2% 0.0385 279.3deg);
+  --ctp-subtext0: oklch(54.71% 0.0343 279.08deg);
+  --ctp-overlay2: oklch(60.09% 0.0305 278.69deg);
+  --ctp-overlay1: oklch(65.36% 0.0269 278.12deg);
+  --ctp-overlay0: oklch(70.77% 0.0237 274.6deg);
+  --ctp-surface2: oklch(75.84% 0.0205 273.15deg);
+  --ctp-surface1: oklch(80.83% 0.0174 271.2deg);
+  --ctp-surface0: oklch(85.75% 0.0145 268.48deg);
+  --ctp-base: oklch(95.78% 0.0058 264.53deg);
+  --ctp-mantle: oklch(93.35% 0.0087 264.52deg);
+  --ctp-crust: oklch(90.6% 0.0117 264.51deg);
+
+  // Backgrounds
+  --background: var(--ctp-base);
+  --background-secondary: var(--ctp-mantle);
+  --background-hover: var(--ctp-surface0);
+  --background-selected: var(--ctp-surface1);
+  --background-selected-hover: var(--ctp-surface2);
+  --background-high-contrast: var(--ctp-crust);
+
+  // Borders
+  --border-muted: var(--ctp-surface0);
+  --border: var(--ctp-surface1);
+  --border-strong: var(--ctp-surface2);
+  --border-inked: var(--ctp-text);
+  --border-inverse: var(--ctp-base);
+  --border-focus: var(--ctp-lavender);
+
+  // Buttons
+  --button: var(--ctp-mauve);
+  --button-hover: var(--ctp-lavender);
+  --button-active: var(--ctp-blue);
+  --button-disabled: var(--ctp-surface2);
+
+  // Links
+  --link: var(--ctp-blue);
+  --link-hover: var(--ctp-sky);
+  --link-subtle: var(--ctp-overlay1);
+  --link-visited: var(--ctp-lavender);
+
+  // Support
+  --support-error: var(--ctp-red);
+  --support-warning: var(--ctp-yellow);
+  --support-success: var(--ctp-green);
+  --support-info: var(--ctp-teal);
+
+  // Content
+  --content-primary: var(--ctp-text);
+  --content-secondary: var(--ctp-subtext1);
+  --content-secondary-alt: var(--ctp-subtext0);
+  --content-placeholder: var(--ctp-overlay1);
+  --content-on-color: var(--ctp-base);
+  --content-error: var(--ctp-red);
+  --content-success: var(--ctp-green);
+  --content-inked: var(--ctp-text);
+}

package/src/themes/catppuccin-macchiato.scss

@@ -0,0 +1,80 @@
+// Catppuccin Macchiato (dark)
+// Palette values copied verbatim from the official Catppuccin palette (v1.8.0).
+// Source: https://github.com/catppuccin/palette (MIT License)
+// © Catppuccin. https://catppuccin.com
+
+[data-new-ui-theme='catppuccin-macchiato'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --ctp-rosewater: oklch(91.05% 0.0286 31.13deg);
+  --ctp-flamingo: oklch(86.29% 0.0479 18.12deg);
+  --ctp-pink: oklch(86.08% 0.083 336.18deg);
+  --ctp-mauve: oklch(77.15% 0.1259 303.9deg);
+  --ctp-red: oklch(73.7% 0.1252 11.19deg);
+  --ctp-maroon: oklch(77.02% 0.1024 14.37deg);
+  --ctp-peach: oklch(79.88% 0.1061 49.64deg);
+  --ctp-yellow: oklch(87.9% 0.0744 84.75deg);
+  --ctp-green: oklch(83.5% 0.1079 138.15deg);
+  --ctp-teal: oklch(82.14% 0.0755 184.1deg);
+  --ctp-sky: oklch(83.69% 0.0719 209.37deg);
+  --ctp-sapphire: oklch(78.51% 0.0845 228.38deg);
+  --ctp-blue: oklch(74.97% 0.1101 263.81deg);
+  --ctp-lavender: oklch(81.44% 0.0834 279.85deg);
+  --ctp-text: oklch(87.08% 0.0481 273.67deg);
+  --ctp-subtext1: oklch(81.2% 0.0459 274.27deg);
+  --ctp-subtext0: oklch(75.13% 0.0441 273.53deg);
+  --ctp-overlay2: oklch(69.05% 0.0433 274.54deg);
+  --ctp-overlay1: oklch(62.72% 0.0415 273.73deg);
+  --ctp-overlay0: oklch(56.08% 0.0407 276.47deg);
+  --ctp-surface2: oklch(49.39% 0.0389 275.68deg);
+  --ctp-surface1: oklch(42.59% 0.0385 276.95deg);
+  --ctp-surface0: oklch(35.38% 0.0369 275.99deg);
+  --ctp-base: oklch(27.88% 0.0353 276.94deg);
+  --ctp-mantle: oklch(24.93% 0.0305 278.44deg);
+  --ctp-crust: oklch(21.88% 0.0255 280.66deg);
+
+  // Backgrounds
+  --background: var(--ctp-base);
+  --background-secondary: var(--ctp-mantle);
+  --background-hover: var(--ctp-surface0);
+  --background-selected: var(--ctp-surface1);
+  --background-selected-hover: var(--ctp-surface2);
+  --background-high-contrast: var(--ctp-crust);
+
+  // Borders
+  --border-muted: var(--ctp-surface0);
+  --border: var(--ctp-surface1);
+  --border-strong: var(--ctp-surface2);
+  --border-inked: var(--ctp-text);
+  --border-inverse: var(--ctp-base);
+  --border-focus: var(--ctp-lavender);
+
+  // Buttons
+  --button: var(--ctp-mauve);
+  --button-hover: var(--ctp-lavender);
+  --button-active: var(--ctp-blue);
+  --button-disabled: var(--ctp-surface2);
+
+  // Links
+  --link: var(--ctp-blue);
+  --link-hover: var(--ctp-sky);
+  --link-subtle: var(--ctp-overlay1);
+  --link-visited: var(--ctp-lavender);
+
+  // Support
+  --support-error: var(--ctp-red);
+  --support-warning: var(--ctp-yellow);
+  --support-success: var(--ctp-green);
+  --support-info: var(--ctp-teal);
+
+  // Content
+  --content-primary: var(--ctp-text);
+  --content-secondary: var(--ctp-subtext1);
+  --content-secondary-alt: var(--ctp-subtext0);
+  --content-placeholder: var(--ctp-overlay1);
+  --content-on-color: var(--ctp-base);
+  --content-error: var(--ctp-red);
+  --content-success: var(--ctp-green);
+  --content-inked: var(--ctp-text);
+}

package/src/themes/catppuccin-mocha.scss

@@ -0,0 +1,80 @@
+// Catppuccin Mocha (dark)
+// Palette values copied verbatim from the official Catppuccin palette (v1.8.0).
+// Source: https://github.com/catppuccin/palette (MIT License)
+// © Catppuccin. https://catppuccin.com
+
+[data-new-ui-theme='catppuccin-mocha'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --ctp-rosewater: oklch(92.26% 0.0238 30.49deg);
+  --ctp-flamingo: oklch(87.97% 0.0418 17.98deg);
+  --ctp-pink: oklch(87% 0.0752 336.3deg);
+  --ctp-mauve: oklch(78.71% 0.1187 304.77deg);
+  --ctp-red: oklch(75.56% 0.1297 2.76deg);
+  --ctp-maroon: oklch(78.21% 0.0903 8.85deg);
+  --ctp-peach: oklch(82.37% 0.1015 52.63deg);
+  --ctp-yellow: oklch(91.93% 0.0704 86.53deg);
+  --ctp-green: oklch(85.77% 0.1092 142.72deg);
+  --ctp-teal: oklch(85.85% 0.0792 182.75deg);
+  --ctp-sky: oklch(84.67% 0.0833 210.25deg);
+  --ctp-sapphire: oklch(79.06% 0.0965 228.65deg);
+  --ctp-blue: oklch(76.64% 0.1113 259.88deg);
+  --ctp-lavender: oklch(81.66% 0.091 277.31deg);
+  --ctp-text: oklch(87.87% 0.0426 272.28deg);
+  --ctp-subtext1: oklch(81.68% 0.0403 272.86deg);
+  --ctp-subtext0: oklch(75.1% 0.0396 273.93deg);
+  --ctp-overlay2: oklch(68.65% 0.0374 274.73deg);
+  --ctp-overlay1: oklch(61.76% 0.0367 276deg);
+  --ctp-overlay0: oklch(54.97% 0.0345 277.1deg);
+  --ctp-surface2: oklch(47.65% 0.034 278.64deg);
+  --ctp-surface1: oklch(40.37% 0.032 280.15deg);
+  --ctp-surface0: oklch(32.4% 0.0319 281.98deg);
+  --ctp-base: oklch(24.29% 0.0304 283.91deg);
+  --ctp-mantle: oklch(21.55% 0.0254 284.06deg);
+  --ctp-crust: oklch(18.28% 0.0204 284.2deg);
+
+  // Backgrounds
+  --background: var(--ctp-base);
+  --background-secondary: var(--ctp-mantle);
+  --background-hover: var(--ctp-surface0);
+  --background-selected: var(--ctp-surface1);
+  --background-selected-hover: var(--ctp-surface2);
+  --background-high-contrast: var(--ctp-crust);
+
+  // Borders
+  --border-muted: var(--ctp-surface0);
+  --border: var(--ctp-surface1);
+  --border-strong: var(--ctp-surface2);
+  --border-inked: var(--ctp-text);
+  --border-inverse: var(--ctp-base);
+  --border-focus: var(--ctp-lavender);
+
+  // Buttons
+  --button: var(--ctp-mauve);
+  --button-hover: var(--ctp-lavender);
+  --button-active: var(--ctp-blue);
+  --button-disabled: var(--ctp-surface2);
+
+  // Links
+  --link: var(--ctp-blue);
+  --link-hover: var(--ctp-sky);
+  --link-subtle: var(--ctp-overlay1);
+  --link-visited: var(--ctp-lavender);
+
+  // Support
+  --support-error: var(--ctp-red);
+  --support-warning: var(--ctp-yellow);
+  --support-success: var(--ctp-green);
+  --support-info: var(--ctp-teal);
+
+  // Content
+  --content-primary: var(--ctp-text);
+  --content-secondary: var(--ctp-subtext1);
+  --content-secondary-alt: var(--ctp-subtext0);
+  --content-placeholder: var(--ctp-overlay1);
+  --content-on-color: var(--ctp-base);
+  --content-error: var(--ctp-red);
+  --content-success: var(--ctp-green);
+  --content-inked: var(--ctp-text);
+}

package/src/themes/dracula.scss

@@ -0,0 +1,66 @@
+// Dracula
+// Palette values copied verbatim from the official Dracula spec.
+// Source: https://github.com/dracula/dracula-theme (MIT License)
+// © Dracula Theme. https://draculatheme.com
+
+[data-new-ui-theme='dracula'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --dt-background: oklch(28.82% 0.0221 277.51deg);
+  --dt-current-line: oklch(40.28% 0.0322 277.83deg);
+  --dt-selection: oklch(40.28% 0.0322 277.83deg);
+  --dt-foreground: oklch(97.75% 0.0079 106.55deg);
+  --dt-comment: oklch(55.98% 0.0803 270.09deg);
+  --dt-cyan: oklch(88.26% 0.0934 212.85deg);
+  --dt-green: oklch(87.1% 0.2195 148.02deg);
+  --dt-orange: oklch(83.39% 0.1241 66.56deg);
+  --dt-pink: oklch(75.46% 0.1831 346.81deg);
+  --dt-purple: oklch(74.2% 0.1485 301.88deg);
+  --dt-red: oklch(68.22% 0.2063 24.43deg);
+  --dt-yellow: oklch(95.53% 0.1342 112.76deg);
+
+  // Backgrounds
+  --background: var(--dt-background);
+  --background-secondary: oklch(25.54% 0.0188 280.49deg);
+  --background-hover: var(--dt-current-line);
+  --background-selected: var(--dt-selection);
+  --background-selected-hover: oklch(46.88% 0.042 281.2deg);
+  --background-high-contrast: oklch(21.99% 0.0137 278.8deg);
+
+  // Borders
+  --border-muted: oklch(34.02% 0.0266 276.05deg);
+  --border: var(--dt-current-line);
+  --border-strong: var(--dt-comment);
+  --border-inked: var(--dt-foreground);
+  --border-inverse: var(--dt-background);
+  --border-focus: var(--dt-purple);
+
+  // Buttons
+  --button: var(--dt-purple);
+  --button-hover: var(--dt-pink);
+  --button-active: var(--dt-pink);
+  --button-disabled: var(--dt-comment);
+
+  // Links
+  --link: var(--dt-cyan);
+  --link-hover: var(--dt-pink);
+  --link-subtle: var(--dt-comment);
+  --link-visited: var(--dt-purple);
+
+  // Support
+  --support-error: var(--dt-red);
+  --support-warning: var(--dt-orange);
+  --support-success: var(--dt-green);
+  --support-info: var(--dt-cyan);
+
+  // Content
+  --content-primary: var(--dt-foreground);
+  --content-secondary: oklch(84.43% 0.0305 281.59deg);
+  --content-secondary-alt: var(--dt-comment);
+  --content-placeholder: var(--dt-comment);
+  --content-on-color: var(--dt-background);
+  --content-error: var(--dt-red);
+  --content-success: var(--dt-green);
+  --content-inked: var(--dt-foreground);
+}

package/src/themes/flexoki-dark.scss

@@ -0,0 +1,79 @@
+// Flexoki Dark
+// Palette values copied verbatim from the official Flexoki spec.
+// Source: https://github.com/kepano/flexoki (MIT License)
+// © Steph Ango. https://stephango.com/flexoki
+
+[data-new-ui-theme='flexoki-dark'] {
+  color-scheme: dark;
+
+  // Base ramp (verbatim)
+  --fk-paper: oklch(99.01% 0.0161 95.22deg);
+  --fk-base-50: oklch(95.37% 0.0147 98.29deg);
+  --fk-base-100: oklch(91.74% 0.0149 98.3deg);
+  --fk-base-150: oklch(88.1% 0.0137 97.46deg);
+  --fk-base-200: oklch(84.63% 0.0137 102.05deg);
+  --fk-base-300: oklch(77.21% 0.0128 96.47deg);
+  --fk-base-400: oklch(69.56% 0.0103 93.62deg);
+  --fk-base-500: oklch(61.69% 0.0078 88.67deg);
+  --fk-base-600: oklch(53.75% 0.0078 97.45deg);
+  --fk-base-700: oklch(45.31% 0.005 91.5deg);
+  --fk-base-800: oklch(36.51% 0.0044 67.69deg);
+  --fk-base-850: oklch(32.14% 0.0038 84.58deg);
+  --fk-base-900: oklch(27.34% 0.0023 67.73deg);
+  --fk-base-950: oklch(22.28% 0.0025 67.7deg);
+  --fk-black: oklch(16.96% 0.0017 17.32deg);
+
+  // Accents — 400 (verbatim)
+  --fk-red: oklch(59.7% 0.1692 28.38deg);
+  --fk-orange: oklch(65.76% 0.1539 49.3deg);
+  --fk-yellow: oklch(73.46% 0.1462 87.46deg);
+  --fk-green: oklch(65.13% 0.1242 119.38deg);
+  --fk-cyan: oklch(67.01% 0.0999 186.58deg);
+  --fk-blue: oklch(59.88% 0.1104 247deg);
+  --fk-purple: oklch(63.48% 0.1098 291deg);
+  --fk-magenta: oklch(63.48% 0.1565 350.47deg);
+
+  // Backgrounds
+  --background: var(--fk-black);
+  --background-secondary: var(--fk-base-950);
+  --background-hover: var(--fk-base-900);
+  --background-selected: var(--fk-base-850);
+  --background-selected-hover: var(--fk-base-800);
+  --background-high-contrast: var(--fk-black);
+
+  // Borders
+  --border-muted: var(--fk-base-900);
+  --border: var(--fk-base-800);
+  --border-strong: var(--fk-base-700);
+  --border-inked: var(--fk-base-200);
+  --border-inverse: var(--fk-black);
+  --border-focus: var(--fk-blue);
+
+  // Buttons
+  --button: var(--fk-purple);
+  --button-hover: var(--fk-magenta);
+  --button-active: var(--fk-magenta);
+  --button-disabled: var(--fk-base-700);
+
+  // Links
+  --link: var(--fk-blue);
+  --link-hover: var(--fk-cyan);
+  --link-subtle: var(--fk-base-500);
+  --link-visited: var(--fk-purple);
+
+  // Support
+  --support-error: var(--fk-red);
+  --support-warning: var(--fk-yellow);
+  --support-success: var(--fk-green);
+  --support-info: var(--fk-blue);
+
+  // Content
+  --content-primary: var(--fk-base-200);
+  --content-secondary: var(--fk-base-400);
+  --content-secondary-alt: var(--fk-base-500);
+  --content-placeholder: var(--fk-base-600);
+  --content-on-color: var(--fk-paper);
+  --content-error: var(--fk-red);
+  --content-success: var(--fk-green);
+  --content-inked: var(--fk-paper);
+}

package/src/themes/flexoki-light.scss

@@ -0,0 +1,79 @@
+// Flexoki Light
+// Palette values copied verbatim from the official Flexoki spec.
+// Source: https://github.com/kepano/flexoki (MIT License)
+// © Steph Ango. https://stephango.com/flexoki
+
+[data-new-ui-theme='flexoki-light'] {
+  color-scheme: light;
+
+  // Base ramp (verbatim)
+  --fk-paper: oklch(99.01% 0.0161 95.22deg);
+  --fk-base-50: oklch(95.37% 0.0147 98.29deg);
+  --fk-base-100: oklch(91.74% 0.0149 98.3deg);
+  --fk-base-150: oklch(88.1% 0.0137 97.46deg);
+  --fk-base-200: oklch(84.63% 0.0137 102.05deg);
+  --fk-base-300: oklch(77.21% 0.0128 96.47deg);
+  --fk-base-400: oklch(69.56% 0.0103 93.62deg);
+  --fk-base-500: oklch(61.69% 0.0078 88.67deg);
+  --fk-base-600: oklch(53.75% 0.0078 97.45deg);
+  --fk-base-700: oklch(45.31% 0.005 91.5deg);
+  --fk-base-800: oklch(36.51% 0.0044 67.69deg);
+  --fk-base-850: oklch(32.14% 0.0038 84.58deg);
+  --fk-base-900: oklch(27.34% 0.0023 67.73deg);
+  --fk-base-950: oklch(22.28% 0.0025 67.7deg);
+  --fk-black: oklch(16.96% 0.0017 17.32deg);
+
+  // Accents — 600 (verbatim)
+  --fk-red: oklch(50.42% 0.1648 27.84deg);
+  --fk-orange: oklch(56.65% 0.1523 45.02deg);
+  --fk-yellow: oklch(63.33% 0.1295 85.81deg);
+  --fk-green: oklch(55.93% 0.1335 122.92deg);
+  --fk-cyan: oklch(55.44% 0.0863 186.74deg);
+  --fk-blue: oklch(48.18% 0.1315 254.79deg);
+  --fk-purple: oklch(45.4% 0.1451 294.83deg);
+  --fk-magenta: oklch(49.54% 0.1614 349.76deg);
+
+  // Backgrounds
+  --background: var(--fk-paper);
+  --background-secondary: var(--fk-base-50);
+  --background-hover: var(--fk-base-100);
+  --background-selected: var(--fk-base-150);
+  --background-selected-hover: var(--fk-base-200);
+  --background-high-contrast: var(--fk-paper);
+
+  // Borders
+  --border-muted: var(--fk-base-100);
+  --border: var(--fk-base-200);
+  --border-strong: var(--fk-base-300);
+  --border-inked: var(--fk-black);
+  --border-inverse: var(--fk-paper);
+  --border-focus: var(--fk-blue);
+
+  // Buttons
+  --button: var(--fk-purple);
+  --button-hover: var(--fk-magenta);
+  --button-active: var(--fk-magenta);
+  --button-disabled: var(--fk-base-300);
+
+  // Links
+  --link: var(--fk-blue);
+  --link-hover: var(--fk-cyan);
+  --link-subtle: var(--fk-base-500);
+  --link-visited: var(--fk-purple);
+
+  // Support
+  --support-error: var(--fk-red);
+  --support-warning: var(--fk-yellow);
+  --support-success: var(--fk-green);
+  --support-info: var(--fk-blue);
+
+  // Content
+  --content-primary: var(--fk-base-800);
+  --content-secondary: var(--fk-base-600);
+  --content-secondary-alt: var(--fk-base-500);
+  --content-placeholder: var(--fk-base-400);
+  --content-on-color: var(--fk-paper);
+  --content-error: var(--fk-red);
+  --content-success: var(--fk-green);
+  --content-inked: var(--fk-black);
+}

package/src/themes/monokai.scss

@@ -0,0 +1,74 @@
+// Monokai
+// Palette values copied verbatim from the official VS Code Monokai theme.
+// Source: https://github.com/microsoft/vscode (extensions/theme-monokai, MIT License)
+// © Microsoft Corporation. Based on the original Monokai by Wimer Hazenberg.
+
+[data-new-ui-theme='monokai'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --mk-bg: oklch(27.37% 0.0109 114.8deg);
+  --mk-bg-well: oklch(23.71% 0.0058 121.89deg);
+  --mk-line: oklch(35.74% 0.0184 103deg);
+  --mk-selection: oklch(37.77% 0.0168 116.39deg);
+  --mk-surface: oklch(39.5% 0.01 114.53deg);
+  --mk-border: oklch(32.59% 0.0104 114.66deg);
+  --mk-fg: oklch(97.75% 0.0079 106.55deg);
+  --mk-fg-secondary: oklch(84.38% 0.0068 106.55deg);
+  --mk-fg-muted: oklch(65.15% 0.0087 106.64deg);
+  --mk-comment: oklch(54.67% 0.0288 97.39deg);
+  --mk-focus: oklch(66.42% 0.0347 97.49deg);
+  --mk-green: oklch(84.14% 0.2044 127.29deg);
+  --mk-green-dark: oklch(71.18% 0.167 126.9deg);
+  --mk-pink: oklch(64.16% 0.24 7.47deg);
+  --mk-orange: oklch(76.68% 0.1683 62.37deg);
+  --mk-yellow: oklch(87.92% 0.1255 103.18deg);
+  --mk-cyan: oklch(82.69% 0.108 211.96deg);
+  --mk-cyan-dark: oklch(69.95% 0.0862 210.17deg);
+  --mk-purple: oklch(70.12% 0.1812 298.06deg);
+  --mk-on-accent: oklch(27.37% 0.0109 114.8deg);
+
+  // Backgrounds
+  --background: var(--mk-bg);
+  --background-secondary: var(--mk-bg-well);
+  --background-hover: var(--mk-line);
+  --background-selected: var(--mk-selection);
+  --background-selected-hover: var(--mk-surface);
+  --background-high-contrast: var(--mk-bg-well);
+
+  // Borders
+  --border-muted: var(--mk-border);
+  --border: var(--mk-selection);
+  --border-strong: var(--mk-comment);
+  --border-inked: var(--mk-fg);
+  --border-inverse: var(--mk-bg);
+  --border-focus: var(--mk-focus);
+
+  // Buttons
+  --button: var(--mk-green);
+  --button-hover: var(--mk-green-dark);
+  --button-active: var(--mk-green-dark);
+  --button-disabled: var(--mk-comment);
+
+  // Links
+  --link: var(--mk-cyan);
+  --link-hover: var(--mk-cyan-dark);
+  --link-subtle: var(--mk-comment);
+  --link-visited: var(--mk-purple);
+
+  // Support
+  --support-error: var(--mk-pink);
+  --support-warning: var(--mk-orange);
+  --support-success: var(--mk-green);
+  --support-info: var(--mk-cyan);
+
+  // Content
+  --content-primary: var(--mk-fg);
+  --content-secondary: var(--mk-fg-secondary);
+  --content-secondary-alt: var(--mk-fg-muted);
+  --content-placeholder: var(--mk-comment);
+  --content-on-color: var(--mk-on-accent);
+  --content-error: var(--mk-pink);
+  --content-success: var(--mk-green);
+  --content-inked: oklch(100% 0 0deg);
+}

package/src/themes/night-owl.scss

@@ -0,0 +1,75 @@
+// Night Owl (dark)
+// Palette values copied verbatim from the official Night Owl VS Code theme.
+// Source: https://github.com/sdras/night-owl-vscode-theme (MIT License)
+// © Sarah Drasner. Night Owl.
+
+[data-new-ui-theme='night-owl'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --no-bg: oklch(19.28% 0.0452 243.97deg);
+  --no-bg-elevated: oklch(25.62% 0.0508 246.06deg);
+  --no-bg-hover: oklch(27.22% 0.0525 246.03deg);
+  --no-bg-deep: oklch(16.94% 0.0357 239.42deg);
+  --no-selection: oklch(34.09% 0.0556 244.62deg);
+  --no-selection-hover: oklch(40.74% 0.0754 246.24deg);
+  --no-fg: oklch(89.84% 0.0198 260.17deg);
+  --no-fg-muted: oklch(70.61% 0.0452 244.18deg);
+  --no-comment: oklch(55.31% 0.0236 196.49deg);
+  --no-slate: oklch(57.88% 0.0525 243.13deg);
+  --no-slate-strong: oklch(66.44% 0.0422 243.79deg);
+  --no-purple: oklch(54.95% 0.1615 297.66deg);
+  --no-purple-light: oklch(72.42% 0.115 290.1deg);
+  --no-teal: oklch(79.12% 0.0755 188.24deg);
+  --no-blue: oklch(74.41% 0.1311 264.28deg);
+  --no-magenta: oklch(74.27% 0.1348 311.06deg);
+  --no-string: oklch(84.25% 0.0844 75.06deg);
+  --no-red: oklch(65.39% 0.1926 25.14deg);
+  --no-green: oklch(77.99% 0.2035 150.74deg);
+  --no-yellow: oklch(86.22% 0.1681 88.31deg);
+  --no-info: oklch(74.82% 0.1235 244.75deg);
+
+  // Backgrounds
+  --background: var(--no-bg);
+  --background-secondary: var(--no-bg-elevated);
+  --background-hover: var(--no-bg-hover);
+  --background-selected: var(--no-selection);
+  --background-selected-hover: var(--no-selection-hover);
+  --background-high-contrast: var(--no-bg-deep);
+
+  // Borders
+  --border-muted: var(--no-bg-hover);
+  --border: var(--no-slate);
+  --border-strong: var(--no-slate-strong);
+  --border-inked: var(--no-fg);
+  --border-inverse: var(--no-bg);
+  --border-focus: var(--no-blue);
+
+  // Buttons
+  --button: var(--no-purple);
+  --button-hover: var(--no-purple-light);
+  --button-active: var(--no-purple-light);
+  --button-disabled: var(--no-slate);
+
+  // Links
+  --link: var(--no-teal);
+  --link-hover: var(--no-blue);
+  --link-subtle: var(--no-comment);
+  --link-visited: var(--no-magenta);
+
+  // Support
+  --support-error: var(--no-red);
+  --support-warning: var(--no-yellow);
+  --support-success: var(--no-green);
+  --support-info: var(--no-info);
+
+  // Content
+  --content-primary: var(--no-fg);
+  --content-secondary: var(--no-fg-muted);
+  --content-secondary-alt: var(--no-slate);
+  --content-placeholder: var(--no-comment);
+  --content-on-color: oklch(100% 0 0deg);
+  --content-error: var(--no-red);
+  --content-success: var(--no-green);
+  --content-inked: oklch(100% 0 0deg);
+}