@new-ui/themes 3.0.0

package/src/themes/sargam-dark.scss

@@ -0,0 +1,112 @@
+// Sargam Dark
+// Palette values copied verbatim from the official Sargam Colors.
+// Source: https://github.com/SargamDesign/sargam-colors (MIT License)
+// © Sargam Design. Colors for warm, welcoming, caring sites & apps.
+
+[data-new-ui-theme='sargam-dark'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --sg-red8: oklch(30.44% 0.101 26.17deg);
+  --sg-red7: oklch(43.38% 0.151 26.97deg);
+  --sg-red6: oklch(55.17% 0.197 27.37deg);
+  --sg-red5: oklch(62.76% 0.227 27.39deg);
+  --sg-red4: oklch(66.47% 0.198 25.21deg);
+  --sg-red3: oklch(71.36% 0.161 22.89deg);
+  --sg-red2: oklch(87.4% 0.062 19.64deg);
+  --sg-red1: oklch(98.23% 0.00857558 17.3027deg);
+  --sg-yellow8: oklch(41.38% 0.082 97.18deg);
+  --sg-yellow7: oklch(59.05% 0.119 95.65deg);
+  --sg-yellow6: oklch(75.67% 0.153 95.46deg);
+  --sg-yellow5: oklch(86.16% 0.175 95.34deg);
+  --sg-yellow4: oklch(88.08% 0.168 97.07deg);
+  --sg-yellow3: oklch(89.85% 0.149 97.89deg);
+  --sg-yellow2: oklch(95.6% 0.07 98.78deg);
+  --sg-yellow1: oklch(99.34% 0.0107311 95.1593deg);
+  --sg-green8: oklch(31.32% 0.083 148.5deg);
+  --sg-green7: oklch(44.09% 0.122 147.81deg);
+  --sg-green6: oklch(55.99% 0.159 147.49deg);
+  --sg-green5: oklch(63.66% 0.183 147.22deg);
+  --sg-green4: oklch(68.54% 0.164 149.56deg);
+  --sg-green3: oklch(73.91% 0.138 151.77deg);
+  --sg-green2: oklch(88.81% 0.057 155.23deg);
+  --sg-green1: oklch(98.32% 0.007 151.89deg);
+  --sg-teal8: oklch(31.18% 0.052 188.89deg);
+  --sg-teal7: oklch(43.57% 0.073 189.66deg);
+  --sg-teal6: oklch(55.39% 0.094 189.13deg);
+  --sg-teal5: oklch(62.84% 0.107 189.16deg);
+  --sg-teal4: oklch(68.08% 0.105 190.16deg);
+  --sg-teal3: oklch(73.51% 0.093 191.77deg);
+  --sg-teal2: oklch(88.92% 0.043 192.75deg);
+  --sg-teal1: oklch(97.99% 0.007 197.04deg);
+  --sg-lavender8: oklch(27.7% 0.061 314.12deg);
+  --sg-lavender7: oklch(38.1% 0.095 314.62deg);
+  --sg-lavender6: oklch(48.06% 0.125 314.21deg);
+  --sg-lavender5: oklch(54.39% 0.144 314.4deg);
+  --sg-lavender4: oklch(61.74% 0.12 314.62deg);
+  --sg-lavender3: oklch(69.01% 0.097 314.82deg);
+  --sg-lavender2: oklch(87.47% 0.037 314.62deg);
+  --sg-lavender1: oklch(98.18% 0.006 308.4deg);
+  --sg-pink8: oklch(33.08% 0.1 354.04deg);
+  --sg-pink7: oklch(46.99% 0.151 355.63deg);
+  --sg-pink6: oklch(59.82% 0.197 355.72deg);
+  --sg-pink5: oklch(67.97% 0.226 355.85deg);
+  --sg-pink4: oklch(71.58% 0.198 353.42deg);
+  --sg-pink3: oklch(75.96% 0.161 351.77deg);
+  --sg-pink2: oklch(89.37% 0.066 347.5deg);
+  --sg-pink1: oklch(98.54% 0.008 349.24deg);
+  --sg-silver10: oklch(16.96% 0.0017 17.32deg);
+  --sg-silver9: oklch(23.19% 0.0015 17.27deg);
+  --sg-silver8: oklch(28.97% 0.0023 67.73deg);
+  --sg-silver7: oklch(38.76% 0.0013 17.22deg);
+  --sg-silver6: oklch(55.08% 0.0061 106.6deg);
+  --sg-silver5: oklch(80.45% 0.0086 91.5deg);
+  --sg-silver4: oklch(88.49% 0.0097 93.58deg);
+  --sg-silver3: oklch(92.18% 0.0083 91.49deg);
+  --sg-silver2: oklch(97.66% 0.0017 67.8deg);
+  --sg-silver1: oklch(100% 0 0deg);
+
+  // Backgrounds
+  --background: var(--sg-silver10);
+  --background-secondary: var(--sg-silver9);
+  --background-hover: var(--sg-silver9);
+  --background-selected: var(--sg-silver8);
+  --background-selected-hover: var(--sg-silver7);
+  --background-high-contrast: var(--sg-silver10);
+
+  // Borders
+  --border-muted: var(--sg-silver8);
+  --border: var(--sg-silver7);
+  --border-strong: var(--sg-silver6);
+  --border-inked: var(--sg-silver1);
+  --border-inverse: var(--sg-silver10);
+  --border-focus: var(--sg-teal4);
+
+  // Buttons
+  --button: var(--sg-teal4);
+  --button-hover: var(--sg-teal3);
+  --button-active: var(--sg-teal2);
+  --button-disabled: var(--sg-silver8);
+
+  // Links
+  --link: var(--sg-teal4);
+  --link-hover: var(--sg-teal6);
+  --link-subtle: var(--sg-teal5);
+  --link-visited: var(--sg-lavender4);
+
+  // Support
+  --support-error: var(--sg-red4);
+  --support-warning: var(--sg-yellow4);
+  --support-success: var(--sg-green4);
+  --support-info: var(--sg-teal4);
+
+  // Content
+  --content-primary: var(--sg-silver1);
+  --content-secondary: var(--sg-silver4);
+  --content-secondary-alt: var(--sg-silver3);
+  --content-placeholder: var(--sg-silver6);
+  --content-on-color: var(--sg-silver10);
+  --content-error: var(--sg-red3);
+  --content-success: var(--sg-green3);
+  --content-inked: var(--sg-silver1);
+}

package/src/themes/sargam-light.scss

@@ -0,0 +1,112 @@
+// Sargam Light
+// Palette values copied verbatim from the official Sargam Colors.
+// Source: https://github.com/SargamDesign/sargam-colors (MIT License)
+// © Sargam Design. Colors for warm, welcoming, caring sites & apps.
+
+[data-new-ui-theme='sargam-light'] {
+  color-scheme: light;
+
+  // Palette (verbatim)
+  --sg-red8: oklch(30.44% 0.101 26.17deg);
+  --sg-red7: oklch(43.38% 0.151 26.97deg);
+  --sg-red6: oklch(55.17% 0.197 27.37deg);
+  --sg-red5: oklch(62.76% 0.227 27.39deg);
+  --sg-red4: oklch(66.47% 0.198 25.21deg);
+  --sg-red3: oklch(71.36% 0.161 22.89deg);
+  --sg-red2: oklch(87.4% 0.062 19.64deg);
+  --sg-red1: oklch(98.23% 0.00857558 17.3027deg);
+  --sg-yellow8: oklch(41.38% 0.082 97.18deg);
+  --sg-yellow7: oklch(59.05% 0.119 95.65deg);
+  --sg-yellow6: oklch(75.67% 0.153 95.46deg);
+  --sg-yellow5: oklch(86.16% 0.175 95.34deg);
+  --sg-yellow4: oklch(88.08% 0.168 97.07deg);
+  --sg-yellow3: oklch(89.85% 0.149 97.89deg);
+  --sg-yellow2: oklch(95.6% 0.07 98.78deg);
+  --sg-yellow1: oklch(99.34% 0.0107311 95.1593deg);
+  --sg-green8: oklch(31.32% 0.083 148.5deg);
+  --sg-green7: oklch(44.09% 0.122 147.81deg);
+  --sg-green6: oklch(55.99% 0.159 147.49deg);
+  --sg-green5: oklch(63.66% 0.183 147.22deg);
+  --sg-green4: oklch(68.54% 0.164 149.56deg);
+  --sg-green3: oklch(73.91% 0.138 151.77deg);
+  --sg-green2: oklch(88.81% 0.057 155.23deg);
+  --sg-green1: oklch(98.32% 0.007 151.89deg);
+  --sg-teal8: oklch(31.18% 0.052 188.89deg);
+  --sg-teal7: oklch(43.57% 0.073 189.66deg);
+  --sg-teal6: oklch(55.39% 0.094 189.13deg);
+  --sg-teal5: oklch(62.84% 0.107 189.16deg);
+  --sg-teal4: oklch(68.08% 0.105 190.16deg);
+  --sg-teal3: oklch(73.51% 0.093 191.77deg);
+  --sg-teal2: oklch(88.92% 0.043 192.75deg);
+  --sg-teal1: oklch(97.99% 0.007 197.04deg);
+  --sg-lavender8: oklch(27.7% 0.061 314.12deg);
+  --sg-lavender7: oklch(38.1% 0.095 314.62deg);
+  --sg-lavender6: oklch(48.06% 0.125 314.21deg);
+  --sg-lavender5: oklch(54.39% 0.144 314.4deg);
+  --sg-lavender4: oklch(61.74% 0.12 314.62deg);
+  --sg-lavender3: oklch(69.01% 0.097 314.82deg);
+  --sg-lavender2: oklch(87.47% 0.037 314.62deg);
+  --sg-lavender1: oklch(98.18% 0.006 308.4deg);
+  --sg-pink8: oklch(33.08% 0.1 354.04deg);
+  --sg-pink7: oklch(46.99% 0.151 355.63deg);
+  --sg-pink6: oklch(59.82% 0.197 355.72deg);
+  --sg-pink5: oklch(67.97% 0.226 355.85deg);
+  --sg-pink4: oklch(71.58% 0.198 353.42deg);
+  --sg-pink3: oklch(75.96% 0.161 351.77deg);
+  --sg-pink2: oklch(89.37% 0.066 347.5deg);
+  --sg-pink1: oklch(98.54% 0.008 349.24deg);
+  --sg-silver10: oklch(16.96% 0.0017 17.32deg);
+  --sg-silver9: oklch(23.19% 0.0015 17.27deg);
+  --sg-silver8: oklch(28.97% 0.0023 67.73deg);
+  --sg-silver7: oklch(38.76% 0.0013 17.22deg);
+  --sg-silver6: oklch(55.08% 0.0061 106.6deg);
+  --sg-silver5: oklch(80.45% 0.0086 91.5deg);
+  --sg-silver4: oklch(88.49% 0.0097 93.58deg);
+  --sg-silver3: oklch(92.18% 0.0083 91.49deg);
+  --sg-silver2: oklch(97.66% 0.0017 67.8deg);
+  --sg-silver1: oklch(100% 0 0deg);
+
+  // Backgrounds
+  --background: var(--sg-silver1);
+  --background-secondary: var(--sg-silver2);
+  --background-hover: var(--sg-silver2);
+  --background-selected: var(--sg-silver3);
+  --background-selected-hover: var(--sg-silver4);
+  --background-high-contrast: var(--sg-silver1);
+
+  // Borders
+  --border-muted: var(--sg-silver3);
+  --border: var(--sg-silver5);
+  --border-strong: var(--sg-silver6);
+  --border-inked: var(--sg-silver9);
+  --border-inverse: var(--sg-silver1);
+  --border-focus: var(--sg-teal6);
+
+  // Buttons
+  --button: var(--sg-teal6);
+  --button-hover: var(--sg-teal7);
+  --button-active: var(--sg-teal8);
+  --button-disabled: var(--sg-silver4);
+
+  // Links
+  --link: var(--sg-teal6);
+  --link-hover: var(--sg-teal7);
+  --link-subtle: var(--sg-teal5);
+  --link-visited: var(--sg-lavender6);
+
+  // Support
+  --support-error: var(--sg-red6);
+  --support-warning: var(--sg-yellow7);
+  --support-success: var(--sg-green6);
+  --support-info: var(--sg-teal6);
+
+  // Content
+  --content-primary: var(--sg-silver9);
+  --content-secondary: var(--sg-silver6);
+  --content-secondary-alt: var(--sg-silver7);
+  --content-placeholder: var(--sg-silver5);
+  --content-on-color: var(--sg-silver1);
+  --content-error: var(--sg-red6);
+  --content-success: var(--sg-green7);
+  --content-inked: var(--sg-silver10);
+}

package/src/themes/synthwave-84.scss

@@ -0,0 +1,75 @@
+// Synthwave '84
+// Palette values copied verbatim from the official Synthwave '84 VS Code theme.
+// Source: https://github.com/robb0wen/synthwave-vscode (MIT License)
+// © Robb Owen. Synthwave '84.
+
+[data-new-ui-theme='synthwave-84'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --sw-bg: oklch(26.79% 0.0333 291.63deg);
+  --sw-bg-panel: oklch(24.27% 0.0392 304.3deg);
+  --sw-bg-deep: oklch(20.35% 0.0219 292.68deg);
+  --sw-input: oklch(26.98% 0.0451 300.67deg);
+  --sw-menu: oklch(36.89% 0.0837 299.21deg);
+  --sw-selected: oklch(31.25% 0.0672 295.59deg);
+  --sw-hover: oklch(31.46% 0.0646 300.68deg);
+  --sw-indent: oklch(38.69% 0.0253 291.28deg);
+  --sw-border: oklch(46.85% 0.1057 274.36deg);
+  --sw-fg: oklch(100% 0 0deg);
+  --sw-fg-muted: oklch(76.45% 0.0057 17.28deg);
+  --sw-comment: oklch(65% 0.0751 277.93deg);
+  --sw-purple: oklch(46.54% 0.0909 299.31deg);
+  --sw-coral: oklch(73.07% 0.1525 27.16deg);
+  --sw-pink: oklch(76.91% 0.1889 339.11deg);
+  --sw-yellow: oklch(90.39% 0.1495 95.27deg);
+  --sw-cyan: oklch(86.09% 0.1462 201.35deg);
+  --sw-green: oklch(87.06% 0.1402 161.99deg);
+  --sw-red: oklch(66.35% 0.221 22.42deg);
+  --sw-mauve: oklch(71.79% 0.093 312.54deg);
+  --sw-on-accent: oklch(26.98% 0.0451 300.67deg);
+
+  // Backgrounds
+  --background: var(--sw-bg);
+  --background-secondary: var(--sw-bg-panel);
+  --background-hover: var(--sw-hover);
+  --background-selected: var(--sw-selected);
+  --background-selected-hover: var(--sw-menu);
+  --background-high-contrast: var(--sw-bg-deep);
+
+  // Borders
+  --border-muted: var(--sw-indent);
+  --border: var(--sw-border);
+  --border-strong: var(--sw-purple);
+  --border-inked: var(--sw-fg);
+  --border-inverse: var(--sw-bg);
+  --border-focus: var(--sw-pink);
+
+  // Buttons
+  --button: var(--sw-coral);
+  --button-hover: var(--sw-pink);
+  --button-active: var(--sw-pink);
+  --button-disabled: var(--sw-border);
+
+  // Links
+  --link: var(--sw-coral);
+  --link-hover: var(--sw-pink);
+  --link-subtle: var(--sw-comment);
+  --link-visited: var(--sw-mauve);
+
+  // Support
+  --support-error: var(--sw-red);
+  --support-warning: var(--sw-yellow);
+  --support-success: var(--sw-green);
+  --support-info: var(--sw-cyan);
+
+  // Content
+  --content-primary: var(--sw-fg);
+  --content-secondary: var(--sw-fg-muted);
+  --content-secondary-alt: var(--sw-comment);
+  --content-placeholder: var(--sw-comment);
+  --content-on-color: var(--sw-on-accent);
+  --content-error: var(--sw-red);
+  --content-success: var(--sw-green);
+  --content-inked: oklch(100% 0 0deg);
+}

package/src/themes/tokyo-night.scss

@@ -0,0 +1,72 @@
+// Tokyo Night (dark)
+// Palette values copied verbatim from the official Tokyo Night VS Code theme.
+// Source: https://github.com/enkia/tokyo-night-vscode-theme (MIT License)
+// © enkia. Tokyo Night.
+
+[data-new-ui-theme='tokyo-night'] {
+  color-scheme: dark;
+
+  // Palette (verbatim)
+  --tn-bg: oklch(22.63% 0.0214 280.49deg);
+  --tn-bg-dark: oklch(20.4% 0.0158 284.91deg);
+  --tn-bg-highlight: oklch(30.56% 0.0369 273.23deg);
+  --tn-terminal-black: oklch(35.88% 0.0439 275.25deg);
+  --tn-fg: oklch(76.66% 0.0537 275.49deg);
+  --tn-fg-bright: oklch(84.56% 0.0611 274.76deg);
+  --tn-fg-dark: oklch(59.34% 0.0444 278.79deg);
+  --tn-comment: oklch(49.55% 0.0682 274.37deg);
+  --tn-blue: oklch(71.9% 0.1322 264.2deg);
+  --tn-cyan: oklch(82% 0.1051 235.72deg);
+  --tn-teal: oklch(67.26% 0.0944 208.79deg);
+  --tn-green: oklch(79.53% 0.1395 130.14deg);
+  --tn-red: oklch(72.27% 0.1589 10.28deg);
+  --tn-magenta: oklch(75.15% 0.1344 299.5deg);
+  --tn-orange: oklch(78.7% 0.1373 50.56deg);
+  --tn-yellow: oklch(78.39% 0.1057 75.43deg);
+  --tn-button: oklch(47.94% 0.1207 266.01deg);
+  --tn-link: oklch(60.79% 0.0941 260.07deg);
+
+  // Backgrounds
+  --background: var(--tn-bg);
+  --background-secondary: var(--tn-bg-dark);
+  --background-hover: oklch(25.91% 0.0249 274.44deg);
+  --background-selected: var(--tn-bg-highlight);
+  --background-selected-hover: var(--tn-terminal-black);
+  --background-high-contrast: oklch(17.49% 0.0082 285.52deg);
+
+  // Borders
+  --border-muted: var(--tn-bg-highlight);
+  --border: var(--tn-terminal-black);
+  --border-strong: var(--tn-comment);
+  --border-inked: var(--tn-fg-bright);
+  --border-inverse: var(--tn-bg);
+  --border-focus: var(--tn-blue);
+
+  // Buttons
+  --button: var(--tn-button);
+  --button-hover: var(--tn-blue);
+  --button-active: var(--tn-link);
+  --button-disabled: var(--tn-comment);
+
+  // Links
+  --link: var(--tn-link);
+  --link-hover: var(--tn-cyan);
+  --link-subtle: var(--tn-comment);
+  --link-visited: var(--tn-magenta);
+
+  // Support
+  --support-error: var(--tn-red);
+  --support-warning: var(--tn-yellow);
+  --support-success: var(--tn-green);
+  --support-info: var(--tn-blue);
+
+  // Content
+  --content-primary: var(--tn-fg-bright);
+  --content-secondary: var(--tn-fg);
+  --content-secondary-alt: var(--tn-fg-dark);
+  --content-placeholder: var(--tn-comment);
+  --content-on-color: oklch(100% 0 0deg);
+  --content-error: var(--tn-red);
+  --content-success: var(--tn-green);
+  --content-inked: var(--tn-fg-bright);
+}