@breadstone/mosaik-themes 0.0.205 → 0.0.209

package/tailwind/v4/memphisTailwindPresets.css

@@ -0,0 +1,322 @@
+/* ------------------------------------------------------------------------------
+ * <auto-generated>
+ *     This code was generated by a tool.
+ *     Changes to this file may cause incorrect behavior and will be lost if
+ *     the code is regenerated.
+ * </auto-generated>
+ * ------------------------------------------------------------------------------ */
+
+@theme {
+  /* border-width */
+  --border-width-layout-thickness: 3px;
+
+  /* color */
+  --color-danger-0: oklch(100.00% 0.0000 NaN);
+  --color-danger-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-danger-100: oklch(95.14% 0.0241 20.79);
+  --color-danger-100-dark: oklch(29.16% 0.1169 18.65);
+  --color-danger-200: oklch(87.87% 0.0643 20.84);
+  --color-danger-200-dark: oklch(36.34% 0.1413 20.63);
+  --color-danger-300: oklch(77.41% 0.1330 20.02);
+  --color-danger-300-dark: oklch(45.31% 0.1751 21.97);
+  --color-danger-400: oklch(67.11% 0.2042 23.57);
+  --color-danger-400-dark: oklch(55.98% 0.2080 24.57);
+  --color-danger-50: oklch(98.40% 0.0080 36.71);
+  --color-danger-50-dark: oklch(21.92% 0.0876 14.52);
+  --color-danger-500: oklch(55.98% 0.2080 24.57);
+  --color-danger-500-dark: oklch(67.11% 0.2042 23.57);
+  --color-danger-600: oklch(45.31% 0.1751 21.97);
+  --color-danger-600-dark: oklch(77.41% 0.1330 20.02);
+  --color-danger-700: oklch(36.34% 0.1413 20.63);
+  --color-danger-700-dark: oklch(87.87% 0.0643 20.84);
+  --color-danger-800: oklch(29.16% 0.1169 18.65);
+  --color-danger-800-dark: oklch(95.14% 0.0241 20.79);
+  --color-danger-900: oklch(21.92% 0.0876 14.52);
+  --color-danger-900-dark: oklch(98.40% 0.0080 36.71);
+  --color-highlight-0: oklch(100.00% 0.0000 NaN);
+  --color-highlight-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-highlight-100: oklch(95.10% 0.0298 307.19);
+  --color-highlight-100-dark: oklch(28.99% 0.1222 292.55);
+  --color-highlight-200: oklch(87.70% 0.0743 304.18);
+  --color-highlight-200-dark: oklch(36.12% 0.1494 293.98);
+  --color-highlight-300: oklch(77.21% 0.1405 302.22);
+  --color-highlight-300-dark: oklch(45.17% 0.1813 293.78);
+  --color-highlight-400: oklch(66.65% 0.1915 297.24);
+  --color-highlight-400-dark: oklch(55.72% 0.2094 295.22);
+  --color-highlight-50: oklch(98.30% 0.0123 317.91);
+  --color-highlight-50-dark: oklch(21.71% 0.0975 291.58);
+  --color-highlight-500: oklch(55.72% 0.2094 295.22);
+  --color-highlight-500-dark: oklch(66.65% 0.1915 297.24);
+  --color-highlight-600: oklch(45.17% 0.1813 293.78);
+  --color-highlight-600-dark: oklch(77.21% 0.1405 302.22);
+  --color-highlight-700: oklch(36.12% 0.1494 293.98);
+  --color-highlight-700-dark: oklch(87.70% 0.0743 304.18);
+  --color-highlight-800: oklch(28.99% 0.1222 292.55);
+  --color-highlight-800-dark: oklch(95.10% 0.0298 307.19);
+  --color-highlight-900: oklch(21.71% 0.0975 291.58);
+  --color-highlight-900-dark: oklch(98.30% 0.0123 317.91);
+  --color-info-0: oklch(100.00% 0.0000 NaN);
+  --color-info-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-info-100: oklch(94.76% 0.0284 238.21);
+  --color-info-100-dark: oklch(28.68% 0.0962 258.87);
+  --color-info-200: oklch(87.12% 0.0693 242.12);
+  --color-info-200-dark: oklch(35.06% 0.1310 258.67);
+  --color-info-300: oklch(75.94% 0.1278 250.45);
+  --color-info-300-dark: oklch(43.86% 0.1585 258.07);
+  --color-info-400: oklch(65.77% 0.1844 256.27);
+  --color-info-400-dark: oklch(54.72% 0.1933 257.47);
+  --color-info-50: oklch(98.20% 0.0092 242.79);
+  --color-info-50-dark: oklch(20.84% 0.0811 259.09);
+  --color-info-500: oklch(54.72% 0.1933 257.47);
+  --color-info-500-dark: oklch(65.77% 0.1844 256.27);
+  --color-info-600: oklch(43.86% 0.1585 258.07);
+  --color-info-600-dark: oklch(75.94% 0.1278 250.45);
+  --color-info-700: oklch(35.06% 0.1310 258.67);
+  --color-info-700-dark: oklch(87.12% 0.0693 242.12);
+  --color-info-800: oklch(28.68% 0.0962 258.87);
+  --color-info-800-dark: oklch(94.76% 0.0284 238.21);
+  --color-info-900: oklch(20.84% 0.0811 259.09);
+  --color-info-900-dark: oklch(98.20% 0.0092 242.79);
+  --color-neutral-0: oklch(100.00% 0.0000 NaN);
+  --color-neutral-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-neutral-100: oklch(94.12% 0.0053 286.52);
+  --color-neutral-100-dark: oklch(26.79% 0.0148 285.38);
+  --color-neutral-200: oklch(88.43% 0.0095 286.32);
+  --color-neutral-200-dark: oklch(39.06% 0.0320 284.84);
+  --color-neutral-300: oklch(78.98% 0.0182 286.03);
+  --color-neutral-300-dark: oklch(47.68% 0.0384 284.87);
+  --color-neutral-400: oklch(65.67% 0.0294 285.59);
+  --color-neutral-400-dark: oklch(56.46% 0.0383 285.12);
+  --color-neutral-50: oklch(97.64% 0.0013 287.31);
+  --color-neutral-50-dark: oklch(18.91% 0.0101 285.42);
+  --color-neutral-500: oklch(56.46% 0.0383 285.12);
+  --color-neutral-500-dark: oklch(65.67% 0.0294 285.59);
+  --color-neutral-600: oklch(47.68% 0.0384 284.87);
+  --color-neutral-600-dark: oklch(78.98% 0.0182 286.03);
+  --color-neutral-700: oklch(39.06% 0.0320 284.84);
+  --color-neutral-700-dark: oklch(88.43% 0.0095 286.32);
+  --color-neutral-800: oklch(26.79% 0.0148 285.38);
+  --color-neutral-800-dark: oklch(94.12% 0.0053 286.52);
+  --color-neutral-900: oklch(18.91% 0.0101 285.42);
+  --color-neutral-900-dark: oklch(97.64% 0.0013 287.31);
+  --color-primary-0: oklch(100.00% 0.0000 NaN);
+  --color-primary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-primary-100: #f8bcd0;
+  --color-primary-100-dark: oklch(38.85% 0.1431 8.52);
+  --color-primary-200: oklch(76.57% 0.1276 358.98);
+  --color-primary-200-dark: oklch(46.66% 0.1743 9.02);
+  --color-primary-300: oklch(68.78% 0.1797 1.97);
+  --color-primary-300-dark: oklch(54.73% 0.2066 9.46);
+  --color-primary-400: #ec407a;
+  --color-primary-400-dark: oklch(60.62% 0.2298 9.63);
+  --color-primary-50: oklch(94.05% 0.0282 355.51);
+  --color-primary-50-dark: oklch(23.55% 0.0784 5.22);
+  --color-primary-500: oklch(60.62% 0.2298 9.63);
+  --color-primary-500-dark: oklch(63.92% 0.2104 5.28);
+  --color-primary-600: oklch(54.73% 0.2066 9.46);
+  --color-primary-600-dark: oklch(68.78% 0.1797 1.97);
+  --color-primary-700: oklch(46.66% 0.1743 9.02);
+  --color-primary-700-dark: oklch(76.57% 0.1276 358.98);
+  --color-primary-800: oklch(38.85% 0.1431 8.52);
+  --color-primary-800-dark: oklch(85.51% 0.0733 356.98);
+  --color-primary-900: oklch(23.55% 0.0784 5.22);
+  --color-primary-900-dark: oklch(94.05% 0.0282 355.51);
+  --color-scheme-background: oklch(93.70% 0.0000 NaN);
+  --color-scheme-background-dark: oklch(19.57% 0.0000 NaN);
+  --color-scheme-contrast: oklch(32.11% 0.0000 NaN);
+  --color-scheme-contrast-dark: oklch(100.00% 0.0000 NaN);
+  --color-scheme-disabled: oklch(51.73% 0.0000 NaN);
+  --color-scheme-disabled-dark: oklch(39.79% 0.0000 NaN);
+  --color-scheme-foreground: oklch(38.62% 0.0207 251.11);
+  --color-scheme-foreground-dark: oklch(79.35% 0.0173 70.48);
+  --color-scheme-highlight: oklch(86.07% 0.0000 NaN);
+  --color-scheme-highlight-dark: oklch(30.12% 0.0000 NaN);
+  --color-scheme-lowlight: oklch(47.48% 0.0000 NaN);
+  --color-scheme-lowlight-dark: oklch(71.55% 0.0000 NaN);
+  --color-scheme-middlelight: oklch(63.34% 0.0000 NaN);
+  --color-scheme-middlelight-dark: oklch(56.24% 0.0000 NaN);
+  --color-scheme-selection: oklch(81.26% 0.0933 268.18);
+  --color-scheme-selection-dark: oklch(59.81% 0.2213 277.37);
+  --color-scheme-semiTransparent: oklch(100.00% 0.0000 NaN / 0.67);
+  --color-scheme-semiTransparent-dark: oklch(0.00% 0.0000 NaN / 0.67);
+  --color-scheme-surface: oklch(100.00% 0.0000 NaN);
+  --color-scheme-surface-dark: oklch(30.12% 0.0000 NaN);
+  --color-scheme-transparent: oklch(100.00% 0.0000 NaN / 0.00);
+  --color-scheme-transparent-dark: oklch(100.00% 0.0000 NaN / 0.00);
+  --color-secondary-0: oklch(100.00% 0.0000 NaN);
+  --color-secondary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-secondary-100: oklch(89.61% 0.0571 149.74);
+  --color-secondary-100-dark: oklch(52.56% 0.1558 147.09);
+  --color-secondary-200: oklch(82.99% 0.0942 149.93);
+  --color-secondary-200-dark: oklch(57.54% 0.1673 147.83);
+  --color-secondary-300: oklch(76.70% 0.1351 149.12);
+  --color-secondary-300-dark: oklch(62.90% 0.1763 147.89);
+  --color-secondary-400: oklch(71.84% 0.1617 148.57);
+  --color-secondary-400-dark: oklch(67.23% 0.1848 147.88);
+  --color-secondary-50: oklch(95.77% 0.0241 151.10);
+  --color-secondary-50-dark: oklch(43.14% 0.1344 145.31);
+  --color-secondary-500: oklch(67.23% 0.1848 147.88);
+  --color-secondary-500-dark: oklch(71.84% 0.1617 148.57);
+  --color-secondary-600: oklch(62.90% 0.1763 147.89);
+  --color-secondary-600-dark: oklch(76.70% 0.1351 149.12);
+  --color-secondary-700: oklch(57.54% 0.1673 147.83);
+  --color-secondary-700-dark: oklch(82.99% 0.0942 149.93);
+  --color-secondary-800: oklch(52.56% 0.1558 147.09);
+  --color-secondary-800-dark: oklch(89.61% 0.0571 149.74);
+  --color-secondary-900: oklch(43.14% 0.1344 145.31);
+  --color-secondary-900-dark: oklch(95.77% 0.0241 151.10);
+  --color-success-0: oklch(100.00% 0.0000 NaN);
+  --color-success-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-success-100: oklch(94.20% 0.0448 151.23);
+  --color-success-100-dark: oklch(26.65% 0.0750 149.11);
+  --color-success-200: oklch(85.32% 0.1616 150.11);
+  --color-success-200-dark: oklch(33.49% 0.0936 148.36);
+  --color-success-300: oklch(73.96% 0.1674 149.48);
+  --color-success-300-dark: oklch(42.02% 0.1131 148.08);
+  --color-success-400: oklch(62.86% 0.1606 148.43);
+  --color-success-400-dark: oklch(51.86% 0.1383 147.98);
+  --color-success-50: oklch(98.64% 0.0165 150.99);
+  --color-success-50-dark: oklch(20.20% 0.0538 151.47);
+  --color-success-500: oklch(51.86% 0.1383 147.98);
+  --color-success-500-dark: oklch(62.86% 0.1606 148.43);
+  --color-success-600: oklch(42.02% 0.1131 148.08);
+  --color-success-600-dark: oklch(73.96% 0.1674 149.48);
+  --color-success-700: oklch(33.49% 0.0936 148.36);
+  --color-success-700-dark: oklch(85.32% 0.1616 150.11);
+  --color-success-800: oklch(26.65% 0.0750 149.11);
+  --color-success-800-dark: oklch(94.20% 0.0448 151.23);
+  --color-success-900: oklch(20.20% 0.0538 151.47);
+  --color-success-900-dark: oklch(98.64% 0.0165 150.99);
+  --color-tertiary-0: oklch(100.00% 0.0000 NaN);
+  --color-tertiary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-tertiary-100: oklch(89.57% 0.0563 220.64);
+  --color-tertiary-100-dark: oklch(55.32% 0.1255 240.41);
+  --color-tertiary-200: oklch(83.17% 0.0896 223.70);
+  --color-tertiary-200-dark: oklch(60.48% 0.1324 238.12);
+  --color-tertiary-300: oklch(77.54% 0.1158 225.67);
+  --color-tertiary-300-dark: oklch(66.14% 0.1382 235.75);
+  --color-tertiary-400: oklch(73.53% 0.1310 229.33);
+  --color-tertiary-400-dark: oklch(70.20% 0.1419 233.82);
+  --color-tertiary-50: oklch(95.75% 0.0231 220.67);
+  --color-tertiary-50-dark: oklch(45.31% 0.1162 245.86);
+  --color-tertiary-500: oklch(70.20% 0.1419 233.82);
+  --color-tertiary-500-dark: oklch(73.53% 0.1310 229.33);
+  --color-tertiary-600: oklch(66.14% 0.1382 235.75);
+  --color-tertiary-600-dark: oklch(77.54% 0.1158 225.67);
+  --color-tertiary-700: oklch(60.48% 0.1324 238.12);
+  --color-tertiary-700-dark: oklch(83.17% 0.0896 223.70);
+  --color-tertiary-800: oklch(55.32% 0.1255 240.41);
+  --color-tertiary-800-dark: oklch(89.57% 0.0563 220.64);
+  --color-tertiary-900: oklch(45.31% 0.1162 245.86);
+  --color-tertiary-900-dark: oklch(95.75% 0.0231 220.67);
+  --color-warning-0: oklch(100.00% 0.0000 NaN);
+  --color-warning-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-warning-100: oklch(90.99% 0.1235 95.66);
+  --color-warning-100-dark: oklch(32.98% 0.0722 68.30);
+  --color-warning-200: oklch(83.42% 0.1401 91.50);
+  --color-warning-200-dark: oklch(39.37% 0.0853 68.93);
+  --color-warning-300: oklch(74.98% 0.1407 87.05);
+  --color-warning-300-dark: oklch(46.65% 0.1009 70.17);
+  --color-warning-400: oklch(66.19% 0.1374 79.24);
+  --color-warning-400-dark: oklch(55.42% 0.1169 75.00);
+  --color-warning-50: oklch(97.22% 0.0659 100.99);
+  --color-warning-50-dark: oklch(28.03% 0.0602 71.48);
+  --color-warning-500: oklch(55.42% 0.1169 75.00);
+  --color-warning-500-dark: oklch(66.19% 0.1374 79.24);
+  --color-warning-600: oklch(46.65% 0.1009 70.17);
+  --color-warning-600-dark: oklch(74.98% 0.1407 87.05);
+  --color-warning-700: oklch(39.37% 0.0853 68.93);
+  --color-warning-700-dark: oklch(83.42% 0.1401 91.50);
+  --color-warning-800: oklch(32.98% 0.0722 68.30);
+  --color-warning-800-dark: oklch(90.99% 0.1235 95.66);
+  --color-warning-900: oklch(28.03% 0.0602 71.48);
+  --color-warning-900-dark: oklch(97.22% 0.0659 100.99);
+
+  /* font-family */
+  --font-family-body1: Nunito, sans-serif;
+  --font-family-body2: Nunito, sans-serif;
+  --font-family-button: Nunito, sans-serif;
+  --font-family-caption: Nunito, sans-serif;
+  --font-family-family: Nunito, sans-serif;
+  --font-family-headline1: Nunito, sans-serif;
+  --font-family-headline2: Nunito, sans-serif;
+  --font-family-headline3: Nunito, sans-serif;
+  --font-family-headline4: Nunito, sans-serif;
+  --font-family-headline5: Nunito, sans-serif;
+  --font-family-headline6: Nunito, sans-serif;
+  --font-family-overline: Nunito, sans-serif;
+  --font-family-subtitle1: Nunito, sans-serif;
+  --font-family-subtitle2: Nunito, sans-serif;
+
+  /* font-weight */
+  --font-weight-body1: 400;
+  --font-weight-body2: 400;
+  --font-weight-button: 700;
+  --font-weight-caption: 400;
+  --font-weight-headline1: 300;
+  --font-weight-headline2: 300;
+  --font-weight-headline3: 400;
+  --font-weight-headline4: 400;
+  --font-weight-headline5: 400;
+  --font-weight-headline6: 500;
+  --font-weight-overline: 500;
+  --font-weight-subtitle1: 400;
+  --font-weight-subtitle2: 500;
+
+  /* letter-spacing */
+  --letter-spacing-body1: 0.5px;
+  --letter-spacing-body2: 0.2857142857142857px;
+  --letter-spacing-button: 1.4285714285714286px;
+  --letter-spacing-caption: 0.5333333333333333px;
+  --letter-spacing-headline1: -0.25px;
+  --letter-spacing-headline2: -0.13333333333333333px;
+  --letter-spacing-headline3: normal;
+  --letter-spacing-headline4: 0.11764705882352941px;
+  --letter-spacing-headline5: normal;
+  --letter-spacing-headline6: 0.2px;
+  --letter-spacing-overline: 2.6666666666666665px;
+  --letter-spacing-subtitle1: 0.15px;
+  --letter-spacing-subtitle2: 0.1142857142857143px;
+
+  /* line-height */
+  --line-height-body1: 20px;
+  --line-height-body2: 18px;
+  --line-height-button: 18px;
+  --line-height-caption: 16px;
+  --line-height-headline1: 100px;
+  --line-height-headline2: 64px;
+  --line-height-headline3: 52px;
+  --line-height-headline4: 38px;
+  --line-height-headline5: 28px;
+  --line-height-headline6: 24px;
+  --line-height-overline: 16px;
+  --line-height-subtitle1: 20px;
+  --line-height-subtitle2: 18px;
+
+  /* radius */
+  --radius-layout-radius: 0px;
+
+  /* shadow */
+  --shadow-bold: 6px 6px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-bold-dark: 6px 6px 0px 0px oklch(100.00% 0.0000 NaN);
+  --shadow-extrabold: 7px 7px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-extrabold-dark: 7px 7px 0px 0px oklch(100.00% 0.0000 NaN);
+  --shadow-light: 2px 2px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-light-dark: 2px 2px 0px 0px oklch(100.00% 0.0000 NaN);
+  --shadow-none: none;
+  --shadow-regular: 4px 4px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-regular-dark: 4px 4px 0px 0px oklch(100.00% 0.0000 NaN);
+  --shadow-semibold: 5px 5px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-semibold-dark: 5px 5px 0px 0px oklch(100.00% 0.0000 NaN);
+  --shadow-semilight: 3px 3px 0px 0px oklch(32.11% 0.0000 NaN);
+  --shadow-semilight-dark: 3px 3px 0px 0px oklch(100.00% 0.0000 NaN);
+
+  /* spacing */
+  --spacing-space: 10px;
+
+  /* transition-duration */
+  --transition-duration-default: 200ms 400ms 600ms;
+  --transition-duration-long: 600ms;
+  --transition-duration-medium: 400ms;
+  --transition-duration-short: 200ms;
+}

package/themes/___cosmopolitan-tokens.css

@@ -4,6 +4,7 @@
   --layout-radius: 3px;
   --layout-space: 8px;
   --layout-thickness: 1px;
+  --scheme-light-surface: #fefefe;
   --scheme-light-contrast: #ffffff;
   --scheme-light-background: #ffffff;
   --scheme-light-foreground: #000000;
@@ -13,6 +14,8 @@
   --scheme-light-transparent: rgba(255, 255, 255, 0);
   --scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
   --scheme-light-disabled: #b8b5b2;
+  --scheme-light-selection: #ffaad4;
+  --scheme-dark-surface: #2e2d2d;
   --scheme-dark-contrast: #ffffff;
   --scheme-dark-background: #2e2d2d;
   --scheme-dark-foreground: #ffffff;
@@ -22,24 +25,253 @@
   --scheme-dark-transparent: rgba(23, 23, 23, 0);
   --scheme-dark-semi-transparent: rgba(23, 23, 23, 0.67);
   --scheme-dark-disabled: #5c5956;
+  --scheme-dark-selection: #ff66aa;
   --color-light-primary-0: #ffffff;
-  --color-light-primary-100: #fed7ea;
-  --color-light-primary-500: #dc1884;
+  --color-light-primary-50: #fce4ec;
+  --color-light-primary-100: #f8bcd0;
+  --color-light-primary-200: #f48fb1;
+  --color-light-primary-300: #f06292;
+  --color-light-primary-400: #ec407a;
+  --color-light-primary-500: #e91e63;
+  --color-light-primary-600: #cb1a56;
+  --color-light-primary-700: #a31545;
+  --color-light-primary-800: #7e1035;
+  --color-light-primary-900: #3a0819;
+  --color-light-secondary-0: #ffffff;
+  --color-light-secondary-50: #e6f6e9;
+  --color-light-secondary-100: #c3e8c9;
+  --color-light-secondary-200: #9bd9a7;
+  --color-light-secondary-300: #70cb83;
+  --color-light-secondary-400: #4dbf68;
+  --color-light-secondary-500: #21b34d;
+  --color-light-secondary-600: #16a444;
+  --color-light-secondary-700: #009238;
+  --color-light-secondary-800: #00812d;
+  --color-light-secondary-900: #006218;
+  --color-light-tertiary-0: #ffffff;
+  --color-light-tertiary-50: #e1f5fc;
+  --color-light-tertiary-100: #b4e6f7;
+  --color-light-tertiary-200: #84d5f3;
+  --color-light-tertiary-300: #56c5ee;
+  --color-light-tertiary-400: #35b8eb;
+  --color-light-tertiary-500: #19ace9;
+  --color-light-tertiary-600: #139edb;
+  --color-light-tertiary-700: #098bc7;
+  --color-light-tertiary-800: #087ab4;
+  --color-light-tertiary-900: #005a92;
+  --color-light-info-0: #ffffff;
+  --color-light-info-50: #f4faff;
+  --color-light-info-100: #ddf1ff;
+  --color-light-info-200: #addbff;
+  --color-light-info-300: #6fb6ff;
+  --color-light-info-400: #3990ff;
+  --color-light-info-500: #096bde;
+  --color-light-info-600: #054da7;
+  --color-light-info-700: #02367d;
+  --color-light-info-800: #072859;
+  --color-light-info-900: #00153c;
+  --color-light-warning-0: #ffffff;
+  --color-light-warning-50: #fff8c5;
+  --color-light-warning-100: #fae17d;
+  --color-light-warning-200: #eac54f;
+  --color-light-warning-300: #d4a72c;
+  --color-light-warning-400: #bf8700;
+  --color-light-warning-500: #9a6700;
+  --color-light-warning-600: #7d4e00;
+  --color-light-warning-700: #633c01;
+  --color-light-warning-800: #4d2d00;
+  --color-light-warning-900: #3b2300;
+  --color-light-danger-0: #ffffff;
+  --color-light-danger-50: #fff8f6;
+  --color-light-danger-100: #ffe9e8;
+  --color-light-danger-200: #ffc7c5;
+  --color-light-danger-300: #ff9192;
+  --color-light-danger-400: #fa5255;
+  --color-light-danger-500: #d3232f;
+  --color-light-danger-600: #a10e25;
+  --color-light-danger-700: #77061b;
+  --color-light-danger-800: #580013;
+  --color-light-danger-900: #39000d;
+  --color-light-success-0: #ffffff;
+  --color-light-success-50: #f3fef5;
+  --color-light-success-100: #d7f5dd;
+  --color-light-success-200: #77ec95;
+  --color-light-success-300: #4cc76e;
+  --color-light-success-400: #2ca24d;
+  --color-light-success-500: #1a7d36;
+  --color-light-success-600: #0f5d26;
+  --color-light-success-700: #034318;
+  --color-light-success-800: #002f0f;
+  --color-light-success-900: #001d09;
+  --color-light-highlight-0: #ffffff;
+  --color-light-highlight-50: #fdf7ff;
+  --color-light-highlight-100: #f4eaff;
+  --color-light-highlight-200: #e1cbff;
+  --color-light-highlight-300: #c69eff;
+  --color-light-highlight-400: #a374f9;
+  --color-light-highlight-500: #814dde;
+  --color-light-highlight-600: #5f35ae;
+  --color-light-highlight-700: #452382;
+  --color-light-highlight-800: #301761;
+  --color-light-highlight-900: #1d0a42;
+  --color-light-neutral-0: #ffffff;
+  --color-light-neutral-50: #f7f7f8;
+  --color-light-neutral-100: #ebebef;
+  --color-light-neutral-200: #d8d8df;
+  --color-light-neutral-300: #b9b9c6;
+  --color-light-neutral-400: #8f8fa3;
+  --color-light-neutral-500: #73738c;
+  --color-light-neutral-600: #5a5a72;
+  --color-light-neutral-700: #434356;
+  --color-light-neutral-800: #25252d;
+  --color-light-neutral-900: #131318;
   --color-dark-primary-0: #000000;
-  --color-dark-primary-100: #4b0225;
-  --color-dark-primary-500: #dc1884;
-  --typography-heading-font-size: 24px;
-  --typography-heading-line-height: 28px;
-  --typography-heading-font-weight: 300;
-  --typography-heading-letter-spacing: -0.25px;
-  --typography-heading-text-decoration: none;
-  --typography-heading-text-transform: none;
-  --typography-content-font-size: 16px;
-  --typography-content-line-height: 20px;
-  --typography-content-font-weight: 300;
-  --typography-content-letter-spacing: -0.25px;
-  --typography-content-text-decoration: none;
-  --typography-content-text-transform: none;
+  --color-dark-primary-50: #3a0819;
+  --color-dark-primary-100: #7e1035;
+  --color-dark-primary-200: #a31545;
+  --color-dark-primary-300: #cb1a56;
+  --color-dark-primary-400: #e91e63;
+  --color-dark-primary-500: #ec407a;
+  --color-dark-primary-600: #f06292;
+  --color-dark-primary-700: #f48fb1;
+  --color-dark-primary-800: #f8bcd0;
+  --color-dark-primary-900: #fce4ec;
+  --color-dark-secondary-0: #000000;
+  --color-dark-secondary-50: #006218;
+  --color-dark-secondary-100: #00812d;
+  --color-dark-secondary-200: #009238;
+  --color-dark-secondary-300: #16a444;
+  --color-dark-secondary-400: #21b34d;
+  --color-dark-secondary-500: #4dbf68;
+  --color-dark-secondary-600: #70cb83;
+  --color-dark-secondary-700: #9bd9a7;
+  --color-dark-secondary-800: #c3e8c9;
+  --color-dark-secondary-900: #e6f6e9;
+  --color-dark-tertiary-0: #000000;
+  --color-dark-tertiary-50: #005a92;
+  --color-dark-tertiary-100: #087ab4;
+  --color-dark-tertiary-200: #098bc7;
+  --color-dark-tertiary-300: #139edb;
+  --color-dark-tertiary-400: #19ace9;
+  --color-dark-tertiary-500: #35b8eb;
+  --color-dark-tertiary-600: #56c5ee;
+  --color-dark-tertiary-700: #84d5f3;
+  --color-dark-tertiary-800: #b4e6f7;
+  --color-dark-tertiary-900: #e1f5fc;
+  --color-dark-info-0: #000000;
+  --color-dark-info-50: #00153c;
+  --color-dark-info-100: #072859;
+  --color-dark-info-200: #02367d;
+  --color-dark-info-300: #054da7;
+  --color-dark-info-400: #096bde;
+  --color-dark-info-500: #3990ff;
+  --color-dark-info-600: #6fb6ff;
+  --color-dark-info-700: #addbff;
+  --color-dark-info-800: #ddf1ff;
+  --color-dark-info-900: #f4faff;
+  --color-dark-warning-0: #000000;
+  --color-dark-warning-50: #3b2300;
+  --color-dark-warning-100: #4d2d00;
+  --color-dark-warning-200: #633c01;
+  --color-dark-warning-300: #7d4e00;
+  --color-dark-warning-400: #9a6700;
+  --color-dark-warning-500: #bf8700;
+  --color-dark-warning-600: #d4a72c;
+  --color-dark-warning-700: #eac54f;
+  --color-dark-warning-800: #fae17d;
+  --color-dark-warning-900: #fff8c5;
+  --color-dark-danger-0: #000000;
+  --color-dark-danger-50: #39000d;
+  --color-dark-danger-100: #580013;
+  --color-dark-danger-200: #77061b;
+  --color-dark-danger-300: #a10e25;
+  --color-dark-danger-400: #d3232f;
+  --color-dark-danger-500: #fa5255;
+  --color-dark-danger-600: #ff9192;
+  --color-dark-danger-700: #ffc7c5;
+  --color-dark-danger-800: #ffe9e8;
+  --color-dark-danger-900: #fff8f6;
+  --color-dark-success-0: #000000;
+  --color-dark-success-50: #001d09;
+  --color-dark-success-100: #002f0f;
+  --color-dark-success-200: #034318;
+  --color-dark-success-300: #0f5d26;
+  --color-dark-success-400: #1a7d36;
+  --color-dark-success-500: #2ca24d;
+  --color-dark-success-600: #4cc76e;
+  --color-dark-success-700: #77ec95;
+  --color-dark-success-800: #d7f5dd;
+  --color-dark-success-900: #f3fef5;
+  --color-dark-highlight-0: #000000;
+  --color-dark-highlight-50: #1d0a42;
+  --color-dark-highlight-100: #301761;
+  --color-dark-highlight-200: #452382;
+  --color-dark-highlight-300: #5f35ae;
+  --color-dark-highlight-400: #814dde;
+  --color-dark-highlight-500: #a374f9;
+  --color-dark-highlight-600: #c69eff;
+  --color-dark-highlight-700: #e1cbff;
+  --color-dark-highlight-800: #f4eaff;
+  --color-dark-highlight-900: #fdf7ff;
+  --color-dark-neutral-0: #000000;
+  --color-dark-neutral-50: #131318;
+  --color-dark-neutral-100: #25252d;
+  --color-dark-neutral-200: #434356;
+  --color-dark-neutral-300: #5a5a72;
+  --color-dark-neutral-400: #73738c;
+  --color-dark-neutral-500: #8f8fa3;
+  --color-dark-neutral-600: #b9b9c6;
+  --color-dark-neutral-700: #d8d8df;
+  --color-dark-neutral-800: #ebebef;
+  --color-dark-neutral-900: #f7f7f8;
+  --typography-headline1-font-size: 24px;
+  --typography-headline1-line-height: 28px;
+  --typography-headline1-font-weight: 300;
+  --typography-headline1-letter-spacing: -0.25px;
+  --typography-headline1-text-decoration: none;
+  --typography-headline1-text-transform: none;
+  --typography-headline2-font-size: 24px;
+  --typography-headline2-line-height: 28px;
+  --typography-headline2-font-weight: 300;
+  --typography-headline2-letter-spacing: -0.25px;
+  --typography-headline2-text-decoration: none;
+  --typography-headline2-text-transform: none;
+  --typography-headline3-font-size: 24px;
+  --typography-headline3-line-height: 28px;
+  --typography-headline3-font-weight: 300;
+  --typography-headline3-letter-spacing: -0.25px;
+  --typography-headline3-text-decoration: none;
+  --typography-headline3-text-transform: none;
+  --typography-headline4-font-size: 24px;
+  --typography-headline4-line-height: 28px;
+  --typography-headline4-font-weight: 300;
+  --typography-headline4-letter-spacing: -0.25px;
+  --typography-headline4-text-decoration: none;
+  --typography-headline4-text-transform: none;
+  --typography-headline5-font-size: 24px;
+  --typography-headline5-line-height: 28px;
+  --typography-headline5-font-weight: 300;
+  --typography-headline5-letter-spacing: -0.25px;
+  --typography-headline5-text-decoration: none;
+  --typography-headline5-text-transform: none;
+  --typography-headline6-font-size: 24px;
+  --typography-headline6-line-height: 28px;
+  --typography-headline6-font-weight: 300;
+  --typography-headline6-letter-spacing: -0.25px;
+  --typography-headline6-text-decoration: none;
+  --typography-headline6-text-transform: none;
+  --typography-body1-font-size: 16px;
+  --typography-body1-line-height: 20px;
+  --typography-body1-font-weight: 300;
+  --typography-body1-letter-spacing: -0.25px;
+  --typography-body1-text-decoration: none;
+  --typography-body1-text-transform: none;
+  --typography-body2-font-size: 16px;
+  --typography-body2-line-height: 20px;
+  --typography-body2-font-weight: 300;
+  --typography-body2-letter-spacing: -0.25px;
+  --typography-body2-text-decoration: none;
+  --typography-body2-text-transform: none;
   --typography-button-font-size: 16px;
   --typography-button-line-height: 20px;
   --typography-button-font-weight: 700;
@@ -189,8 +421,14 @@
   --size-key-medium: "medium";
   --size-key-large: "large";
   --size-key-giant: "giant";
-  --typography-key-heading: "heading";
-  --typography-key-content: "content";
+  --typography-key-headline1: "headline1";
+  --typography-key-headline2: "headline2";
+  --typography-key-headline3: "headline3";
+  --typography-key-headline4: "headline4";
+  --typography-key-headline5: "headline5";
+  --typography-key-headline6: "headline6";
+  --typography-key-body1: "body1";
+  --typography-key-body2: "body2";
   --typography-key-button: "button";
   --elevation-key-light: "light";
   --elevation-key-semilight: "semilight";
@@ -204,8 +442,14 @@
   --duration-short: 200ms;
   --duration-medium: 400ms;
   --duration-long: 600ms;
-  --typography-heading-font-family: var(--font-family);
-  --typography-content-font-family: var(--font-family);
+  --typography-headline1-font-family: var(--font-family);
+  --typography-headline2-font-family: var(--font-family);
+  --typography-headline3-font-family: var(--font-family);
+  --typography-headline4-font-family: var(--font-family);
+  --typography-headline5-font-family: var(--font-family);
+  --typography-headline6-font-family: var(--font-family);
+  --typography-body1-font-family: var(--font-family);
+  --typography-body2-font-family: var(--font-family);
   --typography-button-font-family: var(--font-family);
   --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
   --elevation-key: var(--elevation-key-light) var(--elevation-key-semilight) var(--elevation-key-regular) var(--elevation-key-semibold) var(--elevation-key-bold) var(--elevation-key-extrabold);

package/themes/___joy-tokens.css

@@ -4,6 +4,7 @@
   --layout-radius: 12px;
   --layout-space: 8px;
   --layout-thickness: 2px;
+  --scheme-light-surface: #f5f5f5;
   --scheme-light-background: #eaeaea;
   --scheme-light-foreground: #3c454f;
   --scheme-light-highlight: #d1d1d1;
@@ -14,6 +15,7 @@
   --scheme-light-disabled: #686868;
   --scheme-light-contrast: #ffffff;
   --scheme-light-selection: rgba(204, 204, 204, 0.44);
+  --scheme-dark-surface: #1e1e1e;
   --scheme-dark-background: #151515;
   --scheme-dark-foreground: #c3bab0;
   --scheme-dark-highlight: #2e2e2e;