@breadstone/mosaik-themes 0.0.206 → 0.0.210

package/index.js

@@ -18,12 +18,12 @@ var ThemeFactory = class {
   static create(init) {
     return {
       name: init.name,
-      scheme: init.scheme ?? {},
-      palette: init.palette ?? {},
-      fontFamily: init.fontFamily ?? "",
-      typography: init.typography ?? {},
-      layout: init.layout ?? {},
-      elevation: init.elevation ?? {}
+      scheme: init.scheme,
+      palette: init.palette,
+      fontFamily: init.fontFamily,
+      typography: init.typography,
+      layout: init.layout,
+      elevation: init.elevation
     };
   }
   /**
@@ -43,7 +43,7 @@ var ThemeFactory = class {
         ...theme.palette,
         ...init.palette
       },
-      fontFamily: init.fontFamily ?? theme.fontFamily,
+      fontFamily: init.fontFamily.length > 0 ? init.fontFamily : theme.fontFamily,
       typography: {
         ...theme.typography,
         ...init.typography
@@ -60,235 +60,13 @@ var ThemeFactory = class {
   }
 };
 
-// src/Theming/Tokens/BootstrapTokens.ts
-var NAME = "bootstrap";
-var FONT_FAMILY = "'Inter', Roboto, Helvetica, sans-serif";
+// src/Theming/Tokens/JoyTokens.ts
+var NAME = "joy";
+var FONT_FAMILY = "Nunito, sans-serif";
 var LAYOUT_RADIUS = "12px";
 var LAYOUT_SPACE = "8px";
 var LAYOUT_THICKNESS = "2px";
-var COLOR_LIGHT_PRIMARY_100 = "#cfe2ff";
-var COLOR_LIGHT_PRIMARY_200 = "#9ec5fe";
-var COLOR_LIGHT_PRIMARY_300 = "#6ea8fe";
-var COLOR_LIGHT_PRIMARY_400 = "#3d8bfd";
-var COLOR_LIGHT_PRIMARY_500 = "#0d6efd";
-var COLOR_LIGHT_PRIMARY_600 = "#0a58ca";
-var COLOR_LIGHT_PRIMARY_700 = "#084298";
-var COLOR_LIGHT_PRIMARY_800 = "#052c65";
-var COLOR_LIGHT_PRIMARY_900 = "#031633";
-var COLOR_LIGHT_SECONDARY_100 = "#f8f9fa";
-var COLOR_LIGHT_SECONDARY_200 = "#e9ecef";
-var COLOR_LIGHT_SECONDARY_300 = "#dee2e6";
-var COLOR_LIGHT_SECONDARY_400 = "#ced4da";
-var COLOR_LIGHT_SECONDARY_500 = "#adb5bd";
-var COLOR_LIGHT_SECONDARY_600 = "#6c757d";
-var COLOR_LIGHT_SECONDARY_700 = "#495057";
-var COLOR_LIGHT_SECONDARY_800 = "#343a40";
-var COLOR_LIGHT_SECONDARY_900 = "#212529";
-var TYPOGRAPHY_HEADLINE1_FONT_SIZE = "80px";
-var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE1_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_HEADLINE2_FONT_SIZE = "72px";
-var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE2_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_HEADLINE3_FONT_SIZE = "64px";
-var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE3_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_HEADLINE4_FONT_SIZE = "56px";
-var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE4_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_HEADLINE5_FONT_SIZE = "48px";
-var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE5_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_HEADLINE6_FONT_SIZE = "40px";
-var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT = "1.2";
-var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADLINE6_LETTER_SPACING = "0";
-var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM = "none";
-var ELEVATION_NONE = "none";
-
-// src/Theming/BootstrapTheme.ts
-(function(BootstrapTheme2) {
-  BootstrapTheme2.BOOTSTRAP_THEME = ThemeFactory.create({
-    name: NAME,
-    scheme: {
-      light: {
-        body: "#ffffff",
-        secondary: "#ffffff",
-        tertiary: "#ffffff",
-        emphasis: "#ffffff"
-      },
-      dark: {
-        body: "#000000",
-        secondary: "#000000",
-        tertiary: "#000000",
-        emphasis: "#000000"
-      }
-    },
-    palette: {
-      light: {
-        primary: {
-          100: COLOR_LIGHT_PRIMARY_100,
-          200: COLOR_LIGHT_PRIMARY_200,
-          300: COLOR_LIGHT_PRIMARY_300,
-          400: COLOR_LIGHT_PRIMARY_400,
-          500: COLOR_LIGHT_PRIMARY_500,
-          600: COLOR_LIGHT_PRIMARY_600,
-          700: COLOR_LIGHT_PRIMARY_700,
-          800: COLOR_LIGHT_PRIMARY_800,
-          900: COLOR_LIGHT_PRIMARY_900
-        },
-        secondary: {
-          100: COLOR_LIGHT_SECONDARY_100,
-          200: COLOR_LIGHT_SECONDARY_200,
-          300: COLOR_LIGHT_SECONDARY_300,
-          400: COLOR_LIGHT_SECONDARY_400,
-          500: COLOR_LIGHT_SECONDARY_500,
-          600: COLOR_LIGHT_SECONDARY_600,
-          700: COLOR_LIGHT_SECONDARY_700,
-          800: COLOR_LIGHT_SECONDARY_800,
-          900: COLOR_LIGHT_SECONDARY_900
-        }
-      }
-    },
-    fontFamily: FONT_FAMILY,
-    typography: {
-      headline1: {
-        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM
-      },
-      headline2: {
-        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM
-      },
-      headline3: {
-        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM
-      },
-      headline4: {
-        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM
-      },
-      headline5: {
-        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM
-      },
-      headline6: {
-        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM
-      }
-    },
-    layout: {
-      radius: LAYOUT_RADIUS,
-      space: LAYOUT_SPACE,
-      thickness: LAYOUT_THICKNESS
-    },
-    elevation: {
-      light: {
-        none: ELEVATION_NONE
-      },
-      dark: {
-        none: ELEVATION_NONE
-      }
-    }
-  });
-  BootstrapTheme2.BOOTSTRAP_THEME_PALETTES = [
-    "primary",
-    "secondary"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_PALETTE_VARIANTS = [
-    "100",
-    "200",
-    "300",
-    "400",
-    "500",
-    "600",
-    "700",
-    "800",
-    "900"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_SCHEMES = [
-    "light",
-    "dark"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_SCHEME_VARIANTS = [
-    "body",
-    "secondary",
-    "tertiary",
-    "emphasis"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_ELEVATION = [
-    "light",
-    "dark"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_ELEVATION_VARIANTS = [
-    "none"
-  ];
-  BootstrapTheme2.BOOTSTRAP_THEME_METADATA = {
-    theme: BootstrapTheme2.BOOTSTRAP_THEME,
-    palettes: BootstrapTheme2.BOOTSTRAP_THEME_PALETTES,
-    paletteVariants: BootstrapTheme2.BOOTSTRAP_THEME_PALETTE_VARIANTS,
-    schemes: BootstrapTheme2.BOOTSTRAP_THEME_SCHEMES,
-    schemeVariants: BootstrapTheme2.BOOTSTRAP_THEME_SCHEME_VARIANTS,
-    elevation: BootstrapTheme2.BOOTSTRAP_THEME_ELEVATION,
-    elevationVariants: BootstrapTheme2.BOOTSTRAP_THEME_ELEVATION_VARIANTS,
-    typographies: [
-      "headline1",
-      "headline2",
-      "headline3",
-      "headline4",
-      "headline5",
-      "headline6"
-    ]
-  };
-})(BootstrapTheme || (BootstrapTheme = {}));
-var BootstrapTheme;
-
-// src/Theming/Tokens/JoyTokens.ts
-var NAME2 = "joy";
-var FONT_FAMILY2 = "Nunito, sans-serif";
-var LAYOUT_RADIUS2 = "12px";
-var LAYOUT_SPACE2 = "8px";
-var LAYOUT_THICKNESS2 = "2px";
+var SCHEME_LIGHT_SURFACE = "#f5f5f5";
 var SCHEME_LIGHT_BACKGROUND = "#eaeaea";
 var SCHEME_LIGHT_FOREGROUND = "#3c454f";
 var SCHEME_LIGHT_HIGHLIGHT = "#d1d1d1";
@@ -299,6 +77,7 @@ var SCHEME_LIGHT_SEMI_TRANSPARENT = "rgba(255, 255, 255, 0.67)";
 var SCHEME_LIGHT_DISABLED = "#686868";
 var SCHEME_LIGHT_CONTRAST = "#ffffff";
 var SCHEME_LIGHT_SELECTION = "rgba(204, 204, 204, 0.44)";
+var SCHEME_DARK_SURFACE = "#1e1e1e";
 var SCHEME_DARK_BACKGROUND = "#151515";
 var SCHEME_DARK_FOREGROUND = "#c3bab0";
 var SCHEME_DARK_HIGHLIGHT = "#2e2e2e";
@@ -311,26 +90,26 @@ var SCHEME_DARK_CONTRAST = "#000000";
 var SCHEME_DARK_SELECTION = "rgba(204, 204, 204, 0.44)";
 var COLOR_LIGHT_PRIMARY_0 = "#ffffff";
 var COLOR_LIGHT_PRIMARY_50 = "#fce4ec";
-var COLOR_LIGHT_PRIMARY_1002 = "#f8bcd0";
-var COLOR_LIGHT_PRIMARY_2002 = "#f48fb1";
-var COLOR_LIGHT_PRIMARY_3002 = "#f06292";
-var COLOR_LIGHT_PRIMARY_4002 = "#ec407a";
-var COLOR_LIGHT_PRIMARY_5002 = "#e91e63";
-var COLOR_LIGHT_PRIMARY_6002 = "#cb1a56";
-var COLOR_LIGHT_PRIMARY_7002 = "#a31545";
-var COLOR_LIGHT_PRIMARY_8002 = "#7e1035";
-var COLOR_LIGHT_PRIMARY_9002 = "#3a0819";
+var COLOR_LIGHT_PRIMARY_100 = "#f8bcd0";
+var COLOR_LIGHT_PRIMARY_200 = "#f48fb1";
+var COLOR_LIGHT_PRIMARY_300 = "#f06292";
+var COLOR_LIGHT_PRIMARY_400 = "#ec407a";
+var COLOR_LIGHT_PRIMARY_500 = "#e91e63";
+var COLOR_LIGHT_PRIMARY_600 = "#cb1a56";
+var COLOR_LIGHT_PRIMARY_700 = "#a31545";
+var COLOR_LIGHT_PRIMARY_800 = "#7e1035";
+var COLOR_LIGHT_PRIMARY_900 = "#3a0819";
 var COLOR_LIGHT_SECONDARY_0 = "#ffffff";
 var COLOR_LIGHT_SECONDARY_50 = "#e6f6e9";
-var COLOR_LIGHT_SECONDARY_1002 = "#c3e8c9";
-var COLOR_LIGHT_SECONDARY_2002 = "#9bd9a7";
-var COLOR_LIGHT_SECONDARY_3002 = "#70cb83";
-var COLOR_LIGHT_SECONDARY_4002 = "#4dbf68";
-var COLOR_LIGHT_SECONDARY_5002 = "#21b34d";
-var COLOR_LIGHT_SECONDARY_6002 = "#16a444";
-var COLOR_LIGHT_SECONDARY_7002 = "#009238";
-var COLOR_LIGHT_SECONDARY_8002 = "#00812d";
-var COLOR_LIGHT_SECONDARY_9002 = "#006218";
+var COLOR_LIGHT_SECONDARY_100 = "#c3e8c9";
+var COLOR_LIGHT_SECONDARY_200 = "#9bd9a7";
+var COLOR_LIGHT_SECONDARY_300 = "#70cb83";
+var COLOR_LIGHT_SECONDARY_400 = "#4dbf68";
+var COLOR_LIGHT_SECONDARY_500 = "#21b34d";
+var COLOR_LIGHT_SECONDARY_600 = "#16a444";
+var COLOR_LIGHT_SECONDARY_700 = "#009238";
+var COLOR_LIGHT_SECONDARY_800 = "#00812d";
+var COLOR_LIGHT_SECONDARY_900 = "#006218";
 var COLOR_LIGHT_TERTIARY_0 = "#ffffff";
 var COLOR_LIGHT_TERTIARY_50 = "#e1f5fc";
 var COLOR_LIGHT_TERTIARY_100 = "#b4e6f7";
@@ -508,47 +287,47 @@ var COLOR_DARK_NEUTRAL_700 = "#d8d8df";
 var COLOR_DARK_NEUTRAL_800 = "#ebebef";
 var COLOR_DARK_NEUTRAL_900 = "#f7f7f8";
 var TYPOGRAPHY_HEADLINE1_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE1_FONT_SIZE2 = "96px";
-var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT2 = "100px";
-var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT2 = "300";
-var TYPOGRAPHY_HEADLINE1_LETTER_SPACING2 = "-0.25px";
-var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE1_FONT_SIZE = "96px";
+var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT = "100px";
+var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT = "300";
+var TYPOGRAPHY_HEADLINE1_LETTER_SPACING = "-0.25px";
+var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_HEADLINE2_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE2_FONT_SIZE2 = "60px";
-var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT2 = "64px";
-var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT2 = "300";
-var TYPOGRAPHY_HEADLINE2_LETTER_SPACING2 = "-0.13333333333333333px";
-var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE2_FONT_SIZE = "60px";
+var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT = "64px";
+var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT = "300";
+var TYPOGRAPHY_HEADLINE2_LETTER_SPACING = "-0.13333333333333333px";
+var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_HEADLINE3_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE3_FONT_SIZE2 = "48px";
-var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT2 = "52px";
-var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT2 = "400";
-var TYPOGRAPHY_HEADLINE3_LETTER_SPACING2 = "normal";
-var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE3_FONT_SIZE = "48px";
+var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT = "52px";
+var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT = "400";
+var TYPOGRAPHY_HEADLINE3_LETTER_SPACING = "normal";
+var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_HEADLINE4_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE4_FONT_SIZE2 = "34px";
-var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT2 = "38px";
-var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT2 = "400";
-var TYPOGRAPHY_HEADLINE4_LETTER_SPACING2 = "0.11764705882352941px";
-var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE4_FONT_SIZE = "34px";
+var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT = "38px";
+var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT = "400";
+var TYPOGRAPHY_HEADLINE4_LETTER_SPACING = "0.11764705882352941px";
+var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_HEADLINE5_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE5_FONT_SIZE2 = "24px";
-var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT2 = "28px";
-var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT2 = "400";
-var TYPOGRAPHY_HEADLINE5_LETTER_SPACING2 = "normal";
-var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE5_FONT_SIZE = "24px";
+var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT = "28px";
+var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT = "400";
+var TYPOGRAPHY_HEADLINE5_LETTER_SPACING = "normal";
+var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_HEADLINE6_FONT_FAMILY = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE6_FONT_SIZE2 = "20px";
-var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT2 = "24px";
-var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT2 = "500";
-var TYPOGRAPHY_HEADLINE6_LETTER_SPACING2 = "0.2px";
-var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION2 = "none";
-var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2 = "none";
+var TYPOGRAPHY_HEADLINE6_FONT_SIZE = "20px";
+var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT = "24px";
+var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT = "500";
+var TYPOGRAPHY_HEADLINE6_LETTER_SPACING = "0.2px";
+var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION = "none";
+var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM = "none";
 var TYPOGRAPHY_SUBTITLE1_FONT_FAMILY = "Nunito, sans-serif";
 var TYPOGRAPHY_SUBTITLE1_FONT_SIZE = "16px";
 var TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT = "20px";
@@ -642,9 +421,10 @@ var VARIANT_NEUTRAL = "neutral";
 // src/Theming/JoyTheme.ts
 (function(JoyTheme2) {
   JoyTheme2.JOY_THEME = ThemeFactory.create({
-    name: NAME2,
+    name: NAME,
     scheme: {
       light: {
+        surface: SCHEME_LIGHT_SURFACE,
         background: SCHEME_LIGHT_BACKGROUND,
         foreground: SCHEME_LIGHT_FOREGROUND,
         highlight: SCHEME_LIGHT_HIGHLIGHT,
@@ -657,6 +437,7 @@ var VARIANT_NEUTRAL = "neutral";
         selection: SCHEME_LIGHT_SELECTION
       },
       dark: {
+        surface: SCHEME_DARK_SURFACE,
         background: SCHEME_DARK_BACKGROUND,
         foreground: SCHEME_DARK_FOREGROUND,
         highlight: SCHEME_DARK_HIGHLIGHT,
@@ -674,28 +455,28 @@ var VARIANT_NEUTRAL = "neutral";
         primary: {
           0: COLOR_LIGHT_PRIMARY_0,
           50: COLOR_LIGHT_PRIMARY_50,
-          100: COLOR_LIGHT_PRIMARY_1002,
-          200: COLOR_LIGHT_PRIMARY_2002,
-          300: COLOR_LIGHT_PRIMARY_3002,
-          400: COLOR_LIGHT_PRIMARY_4002,
-          500: COLOR_LIGHT_PRIMARY_5002,
-          600: COLOR_LIGHT_PRIMARY_6002,
-          700: COLOR_LIGHT_PRIMARY_7002,
-          800: COLOR_LIGHT_PRIMARY_8002,
-          900: COLOR_LIGHT_PRIMARY_9002
+          100: COLOR_LIGHT_PRIMARY_100,
+          200: COLOR_LIGHT_PRIMARY_200,
+          300: COLOR_LIGHT_PRIMARY_300,
+          400: COLOR_LIGHT_PRIMARY_400,
+          500: COLOR_LIGHT_PRIMARY_500,
+          600: COLOR_LIGHT_PRIMARY_600,
+          700: COLOR_LIGHT_PRIMARY_700,
+          800: COLOR_LIGHT_PRIMARY_800,
+          900: COLOR_LIGHT_PRIMARY_900
         },
         secondary: {
           0: COLOR_LIGHT_SECONDARY_0,
           50: COLOR_LIGHT_SECONDARY_50,
-          100: COLOR_LIGHT_SECONDARY_1002,
-          200: COLOR_LIGHT_SECONDARY_2002,
-          300: COLOR_LIGHT_SECONDARY_3002,
-          400: COLOR_LIGHT_SECONDARY_4002,
-          500: COLOR_LIGHT_SECONDARY_5002,
-          600: COLOR_LIGHT_SECONDARY_6002,
-          700: COLOR_LIGHT_SECONDARY_7002,
-          800: COLOR_LIGHT_SECONDARY_8002,
-          900: COLOR_LIGHT_SECONDARY_9002
+          100: COLOR_LIGHT_SECONDARY_100,
+          200: COLOR_LIGHT_SECONDARY_200,
+          300: COLOR_LIGHT_SECONDARY_300,
+          400: COLOR_LIGHT_SECONDARY_400,
+          500: COLOR_LIGHT_SECONDARY_500,
+          600: COLOR_LIGHT_SECONDARY_600,
+          700: COLOR_LIGHT_SECONDARY_700,
+          800: COLOR_LIGHT_SECONDARY_800,
+          900: COLOR_LIGHT_SECONDARY_900
         },
         tertiary: {
           0: COLOR_LIGHT_TERTIARY_0,
@@ -909,61 +690,61 @@ var VARIANT_NEUTRAL = "neutral";
         }
       }
     },
-    fontFamily: FONT_FAMILY2,
+    fontFamily: FONT_FAMILY,
     typography: {
       headline1: {
         fontFamily: TYPOGRAPHY_HEADLINE1_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM
       },
       headline2: {
         fontFamily: TYPOGRAPHY_HEADLINE2_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM
       },
       headline3: {
         fontFamily: TYPOGRAPHY_HEADLINE3_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM
       },
       headline4: {
         fontFamily: TYPOGRAPHY_HEADLINE4_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM
       },
       headline5: {
         fontFamily: TYPOGRAPHY_HEADLINE5_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM
       },
       headline6: {
         fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE2,
-        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT2,
-        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT2,
-        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING2,
-        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION2,
-        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2
+        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE,
+        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT,
+        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT,
+        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING,
+        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION,
+        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM
       },
       subtitle1: {
         fontFamily: TYPOGRAPHY_SUBTITLE1_FONT_FAMILY,
@@ -1030,9 +811,9 @@ var VARIANT_NEUTRAL = "neutral";
       }
     },
     layout: {
-      radius: LAYOUT_RADIUS2,
-      space: LAYOUT_SPACE2,
-      thickness: LAYOUT_THICKNESS2
+      radius: LAYOUT_RADIUS,
+      space: LAYOUT_SPACE,
+      thickness: LAYOUT_THICKNESS
     },
     elevation: {
       light: {
@@ -1082,6 +863,7 @@ var VARIANT_NEUTRAL = "neutral";
     "dark"
   ];
   JoyTheme2.JOY_THEME_SCHEME_VARIANTS = [
+    "surface",
     "background",
     "foreground",
     "highlight",
@@ -1134,11 +916,12 @@ var VARIANT_NEUTRAL = "neutral";
 var JoyTheme;
 
 // src/Theming/Tokens/MemphisTokens.ts
-var NAME3 = "memphis";
-var FONT_FAMILY3 = "Nunito, sans-serif";
-var LAYOUT_RADIUS3 = "0px";
-var LAYOUT_SPACE3 = "10px";
-var LAYOUT_THICKNESS3 = "3px";
+var NAME2 = "memphis";
+var FONT_FAMILY2 = "Nunito, sans-serif";
+var LAYOUT_RADIUS2 = "0px";
+var LAYOUT_SPACE2 = "10px";
+var LAYOUT_THICKNESS2 = "3px";
+var SCHEME_LIGHT_SURFACE2 = "#ffffff";
 var SCHEME_LIGHT_BACKGROUND2 = "#eaeaea";
 var SCHEME_LIGHT_FOREGROUND2 = "#3c454f";
 var SCHEME_LIGHT_HIGHLIGHT2 = "#d1d1d1";
@@ -1148,6 +931,8 @@ var SCHEME_LIGHT_TRANSPARENT2 = "rgba(255, 255, 255, 0)";
 var SCHEME_LIGHT_SEMI_TRANSPARENT2 = "rgba(255, 255, 255, 0.67)";
 var SCHEME_LIGHT_DISABLED2 = "#686868";
 var SCHEME_LIGHT_CONTRAST2 = "#333333";
+var SCHEME_LIGHT_SELECTION2 = "#a8c0ff";
+var SCHEME_DARK_SURFACE2 = "#2e2e2e";
 var SCHEME_DARK_BACKGROUND2 = "#151515";
 var SCHEME_DARK_FOREGROUND2 = "#c3bab0";
 var SCHEME_DARK_HIGHLIGHT2 = "#2e2e2e";
@@ -1157,202 +942,247 @@ var SCHEME_DARK_TRANSPARENT2 = "rgba(255, 255, 255, 0)";
 var SCHEME_DARK_SEMI_TRANSPARENT2 = "rgba(0, 0, 0, 0.67)";
 var SCHEME_DARK_DISABLED2 = "#474747";
 var SCHEME_DARK_CONTRAST2 = "#ffffff";
+var SCHEME_DARK_SELECTION2 = "#6666ff";
 var COLOR_LIGHT_PRIMARY_02 = "#ffffff";
-var COLOR_LIGHT_PRIMARY_502 = "#f9f9f9";
-var COLOR_LIGHT_PRIMARY_1003 = "#f2f2f2";
-var COLOR_LIGHT_PRIMARY_2003 = "#e8e8e8";
-var COLOR_LIGHT_PRIMARY_3003 = "#d8d8d8";
-var COLOR_LIGHT_PRIMARY_4003 = "#b4b4b4";
-var COLOR_LIGHT_PRIMARY_5003 = "#949494";
-var COLOR_LIGHT_PRIMARY_6003 = "#6c6c6c";
-var COLOR_LIGHT_PRIMARY_7003 = "#595959";
-var COLOR_LIGHT_PRIMARY_8003 = "#3a3a3a";
-var COLOR_LIGHT_PRIMARY_9003 = "#1a1a1a";
+var COLOR_LIGHT_PRIMARY_502 = "#fce4ec";
+var COLOR_LIGHT_PRIMARY_1002 = "#f8bcd0";
+var COLOR_LIGHT_PRIMARY_2002 = "#f48fb1";
+var COLOR_LIGHT_PRIMARY_3002 = "#f06292";
+var COLOR_LIGHT_PRIMARY_4002 = "#ec407a";
+var COLOR_LIGHT_PRIMARY_5002 = "#e91e63";
+var COLOR_LIGHT_PRIMARY_6002 = "#cb1a56";
+var COLOR_LIGHT_PRIMARY_7002 = "#a31545";
+var COLOR_LIGHT_PRIMARY_8002 = "#7e1035";
+var COLOR_LIGHT_PRIMARY_9002 = "#3a0819";
 var COLOR_LIGHT_SECONDARY_02 = "#ffffff";
-var COLOR_LIGHT_SECONDARY_502 = "#e1f3ef";
-var COLOR_LIGHT_SECONDARY_1003 = "#b5e0d6";
-var COLOR_LIGHT_SECONDARY_2003 = "#85cdbc";
-var COLOR_LIGHT_SECONDARY_3003 = "#57b9a2";
-var COLOR_LIGHT_SECONDARY_4003 = "#38a990";
-var COLOR_LIGHT_SECONDARY_5003 = "#24997e";
-var COLOR_LIGHT_SECONDARY_6003 = "#208c71";
-var COLOR_LIGHT_SECONDARY_7003 = "#1b7c62";
-var COLOR_LIGHT_SECONDARY_8003 = "#166c54";
-var COLOR_LIGHT_SECONDARY_9003 = "#0d503a";
+var COLOR_LIGHT_SECONDARY_502 = "#e6f6e9";
+var COLOR_LIGHT_SECONDARY_1002 = "#c3e8c9";
+var COLOR_LIGHT_SECONDARY_2002 = "#9bd9a7";
+var COLOR_LIGHT_SECONDARY_3002 = "#70cb83";
+var COLOR_LIGHT_SECONDARY_4002 = "#4dbf68";
+var COLOR_LIGHT_SECONDARY_5002 = "#21b34d";
+var COLOR_LIGHT_SECONDARY_6002 = "#16a444";
+var COLOR_LIGHT_SECONDARY_7002 = "#009238";
+var COLOR_LIGHT_SECONDARY_8002 = "#00812d";
+var COLOR_LIGHT_SECONDARY_9002 = "#006218";
+var COLOR_LIGHT_TERTIARY_02 = "#ffffff";
+var COLOR_LIGHT_TERTIARY_502 = "#e1f5fc";
+var COLOR_LIGHT_TERTIARY_1002 = "#b4e6f7";
+var COLOR_LIGHT_TERTIARY_2002 = "#84d5f3";
+var COLOR_LIGHT_TERTIARY_3002 = "#56c5ee";
+var COLOR_LIGHT_TERTIARY_4002 = "#35b8eb";
+var COLOR_LIGHT_TERTIARY_5002 = "#19ace9";
+var COLOR_LIGHT_TERTIARY_6002 = "#139edb";
+var COLOR_LIGHT_TERTIARY_7002 = "#098bc7";
+var COLOR_LIGHT_TERTIARY_8002 = "#087ab4";
+var COLOR_LIGHT_TERTIARY_9002 = "#005a92";
 var COLOR_LIGHT_INFO_02 = "#ffffff";
-var COLOR_LIGHT_INFO_502 = "#e8eaf9";
-var COLOR_LIGHT_INFO_1002 = "#c6c9f1";
-var COLOR_LIGHT_INFO_2002 = "#9fa7e7";
-var COLOR_LIGHT_INFO_3002 = "#7884dd";
-var COLOR_LIGHT_INFO_4002 = "#5968d6";
-var COLOR_LIGHT_INFO_5002 = "#394dcd";
-var COLOR_LIGHT_INFO_6002 = "#3344c2";
-var COLOR_LIGHT_INFO_7002 = "#293ab6";
-var COLOR_LIGHT_INFO_8002 = "#202faa";
-var COLOR_LIGHT_INFO_9002 = "#0a1a97";
+var COLOR_LIGHT_INFO_502 = "#f4faff";
+var COLOR_LIGHT_INFO_1002 = "#ddf1ff";
+var COLOR_LIGHT_INFO_2002 = "#addbff";
+var COLOR_LIGHT_INFO_3002 = "#6fb6ff";
+var COLOR_LIGHT_INFO_4002 = "#3990ff";
+var COLOR_LIGHT_INFO_5002 = "#096bde";
+var COLOR_LIGHT_INFO_6002 = "#054da7";
+var COLOR_LIGHT_INFO_7002 = "#02367d";
+var COLOR_LIGHT_INFO_8002 = "#072859";
+var COLOR_LIGHT_INFO_9002 = "#00153c";
 var COLOR_LIGHT_WARNING_02 = "#ffffff";
-var COLOR_LIGHT_WARNING_502 = "#fcfce5";
-var COLOR_LIGHT_WARNING_1002 = "#f7f6bf";
-var COLOR_LIGHT_WARNING_2002 = "#f1f294";
-var COLOR_LIGHT_WARNING_3002 = "#ebec67";
-var COLOR_LIGHT_WARNING_4002 = "#e5e741";
-var COLOR_LIGHT_WARNING_5002 = "#dfe300";
-var COLOR_LIGHT_WARNING_6002 = "#d1d100";
-var COLOR_LIGHT_WARNING_7002 = "#bfba00";
-var COLOR_LIGHT_WARNING_8002 = "#aea300";
-var COLOR_LIGHT_WARNING_9002 = "#927c00";
+var COLOR_LIGHT_WARNING_502 = "#fff8c5";
+var COLOR_LIGHT_WARNING_1002 = "#fae17d";
+var COLOR_LIGHT_WARNING_2002 = "#eac54f";
+var COLOR_LIGHT_WARNING_3002 = "#d4a72c";
+var COLOR_LIGHT_WARNING_4002 = "#bf8700";
+var COLOR_LIGHT_WARNING_5002 = "#9a6700";
+var COLOR_LIGHT_WARNING_6002 = "#7d4e00";
+var COLOR_LIGHT_WARNING_7002 = "#633c01";
+var COLOR_LIGHT_WARNING_8002 = "#4d2d00";
+var COLOR_LIGHT_WARNING_9002 = "#3b2300";
 var COLOR_LIGHT_DANGER_02 = "#ffffff";
-var COLOR_LIGHT_DANGER_502 = "#fcecef";
-var COLOR_LIGHT_DANGER_1002 = "#f8d0d5";
-var COLOR_LIGHT_DANGER_2002 = "#e69fa1";
-var COLOR_LIGHT_DANGER_3002 = "#d97b7d";
-var COLOR_LIGHT_DANGER_4002 = "#e35f5f";
-var COLOR_LIGHT_DANGER_5002 = "#e8524a";
-var COLOR_LIGHT_DANGER_6002 = "#d94a47";
-var COLOR_LIGHT_DANGER_7002 = "#c74141";
-var COLOR_LIGHT_DANGER_8002 = "#b93c3a";
-var COLOR_LIGHT_DANGER_9002 = "#ab322f";
+var COLOR_LIGHT_DANGER_502 = "#fff8f6";
+var COLOR_LIGHT_DANGER_1002 = "#ffe9e8";
+var COLOR_LIGHT_DANGER_2002 = "#ffc7c5";
+var COLOR_LIGHT_DANGER_3002 = "#ff9192";
+var COLOR_LIGHT_DANGER_4002 = "#fa5255";
+var COLOR_LIGHT_DANGER_5002 = "#d3232f";
+var COLOR_LIGHT_DANGER_6002 = "#a10e25";
+var COLOR_LIGHT_DANGER_7002 = "#77061b";
+var COLOR_LIGHT_DANGER_8002 = "#580013";
+var COLOR_LIGHT_DANGER_9002 = "#39000d";
 var COLOR_LIGHT_SUCCESS_02 = "#ffffff";
-var COLOR_LIGHT_SUCCESS_502 = "#e1f3ef";
-var COLOR_LIGHT_SUCCESS_1002 = "#b5e0d6";
-var COLOR_LIGHT_SUCCESS_2002 = "#85cdbc";
-var COLOR_LIGHT_SUCCESS_3002 = "#57b9a2";
-var COLOR_LIGHT_SUCCESS_4002 = "#38a990";
-var COLOR_LIGHT_SUCCESS_5002 = "#24997e";
-var COLOR_LIGHT_SUCCESS_6002 = "#208c71";
-var COLOR_LIGHT_SUCCESS_7002 = "#1b7c62";
-var COLOR_LIGHT_SUCCESS_8002 = "#166c54";
-var COLOR_LIGHT_SUCCESS_9002 = "#0d503a";
+var COLOR_LIGHT_SUCCESS_502 = "#f3fef5";
+var COLOR_LIGHT_SUCCESS_1002 = "#d7f5dd";
+var COLOR_LIGHT_SUCCESS_2002 = "#77ec95";
+var COLOR_LIGHT_SUCCESS_3002 = "#4cc76e";
+var COLOR_LIGHT_SUCCESS_4002 = "#2ca24d";
+var COLOR_LIGHT_SUCCESS_5002 = "#1a7d36";
+var COLOR_LIGHT_SUCCESS_6002 = "#0f5d26";
+var COLOR_LIGHT_SUCCESS_7002 = "#034318";
+var COLOR_LIGHT_SUCCESS_8002 = "#002f0f";
+var COLOR_LIGHT_SUCCESS_9002 = "#001d09";
+var COLOR_LIGHT_HIGHLIGHT_02 = "#ffffff";
+var COLOR_LIGHT_HIGHLIGHT_502 = "#fdf7ff";
+var COLOR_LIGHT_HIGHLIGHT_1002 = "#f4eaff";
+var COLOR_LIGHT_HIGHLIGHT_2002 = "#e1cbff";
+var COLOR_LIGHT_HIGHLIGHT_3002 = "#c69eff";
+var COLOR_LIGHT_HIGHLIGHT_4002 = "#a374f9";
+var COLOR_LIGHT_HIGHLIGHT_5002 = "#814dde";
+var COLOR_LIGHT_HIGHLIGHT_6002 = "#5f35ae";
+var COLOR_LIGHT_HIGHLIGHT_7002 = "#452382";
+var COLOR_LIGHT_HIGHLIGHT_8002 = "#301761";
+var COLOR_LIGHT_HIGHLIGHT_9002 = "#1d0a42";
 var COLOR_LIGHT_NEUTRAL_02 = "#ffffff";
-var COLOR_LIGHT_NEUTRAL_502 = "#f9f9f9";
-var COLOR_LIGHT_NEUTRAL_1002 = "#f2f2f2";
-var COLOR_LIGHT_NEUTRAL_2002 = "#e8e8e8";
-var COLOR_LIGHT_NEUTRAL_3002 = "#d8d8d8";
-var COLOR_LIGHT_NEUTRAL_4002 = "#b4b4b4";
-var COLOR_LIGHT_NEUTRAL_5002 = "#949494";
-var COLOR_LIGHT_NEUTRAL_6002 = "#6c6c6c";
-var COLOR_LIGHT_NEUTRAL_7002 = "#595959";
-var COLOR_LIGHT_NEUTRAL_8002 = "#3a3a3a";
-var COLOR_LIGHT_NEUTRAL_9002 = "#1a1a1a";
+var COLOR_LIGHT_NEUTRAL_502 = "#f7f7f8";
+var COLOR_LIGHT_NEUTRAL_1002 = "#ebebef";
+var COLOR_LIGHT_NEUTRAL_2002 = "#d8d8df";
+var COLOR_LIGHT_NEUTRAL_3002 = "#b9b9c6";
+var COLOR_LIGHT_NEUTRAL_4002 = "#8f8fa3";
+var COLOR_LIGHT_NEUTRAL_5002 = "#73738c";
+var COLOR_LIGHT_NEUTRAL_6002 = "#5a5a72";
+var COLOR_LIGHT_NEUTRAL_7002 = "#434356";
+var COLOR_LIGHT_NEUTRAL_8002 = "#25252d";
+var COLOR_LIGHT_NEUTRAL_9002 = "#131318";
 var COLOR_DARK_PRIMARY_02 = "#000000";
-var COLOR_DARK_PRIMARY_502 = "#1a1a1a";
-var COLOR_DARK_PRIMARY_1002 = "#3a3a3a";
-var COLOR_DARK_PRIMARY_2002 = "#595959";
-var COLOR_DARK_PRIMARY_3002 = "#6c6c6c";
-var COLOR_DARK_PRIMARY_4002 = "#949494";
-var COLOR_DARK_PRIMARY_5002 = "#b4b4b4";
-var COLOR_DARK_PRIMARY_6002 = "#d8d8d8";
-var COLOR_DARK_PRIMARY_7002 = "#e8e8e8";
-var COLOR_DARK_PRIMARY_8002 = "#f2f2f2";
-var COLOR_DARK_PRIMARY_9002 = "#f9f9f9";
+var COLOR_DARK_PRIMARY_502 = "#3a0819";
+var COLOR_DARK_PRIMARY_1002 = "#7e1035";
+var COLOR_DARK_PRIMARY_2002 = "#a31545";
+var COLOR_DARK_PRIMARY_3002 = "#cb1a56";
+var COLOR_DARK_PRIMARY_4002 = "#e91e63";
+var COLOR_DARK_PRIMARY_5002 = "#ec407a";
+var COLOR_DARK_PRIMARY_6002 = "#f06292";
+var COLOR_DARK_PRIMARY_7002 = "#f48fb1";
+var COLOR_DARK_PRIMARY_8002 = "#f8bcd0";
+var COLOR_DARK_PRIMARY_9002 = "#fce4ec";
 var COLOR_DARK_SECONDARY_02 = "#000000";
-var COLOR_DARK_SECONDARY_502 = "#0d503a";
-var COLOR_DARK_SECONDARY_1002 = "#166c54";
-var COLOR_DARK_SECONDARY_2002 = "#1b7c62";
-var COLOR_DARK_SECONDARY_3002 = "#208c71";
-var COLOR_DARK_SECONDARY_4002 = "#24997e";
-var COLOR_DARK_SECONDARY_5002 = "#38a990";
-var COLOR_DARK_SECONDARY_6002 = "#57b9a2";
-var COLOR_DARK_SECONDARY_7002 = "#85cdbc";
-var COLOR_DARK_SECONDARY_8002 = "#b5e0d6";
-var COLOR_DARK_SECONDARY_9002 = "#e1f3ef";
+var COLOR_DARK_SECONDARY_502 = "#006218";
+var COLOR_DARK_SECONDARY_1002 = "#00812d";
+var COLOR_DARK_SECONDARY_2002 = "#009238";
+var COLOR_DARK_SECONDARY_3002 = "#16a444";
+var COLOR_DARK_SECONDARY_4002 = "#21b34d";
+var COLOR_DARK_SECONDARY_5002 = "#4dbf68";
+var COLOR_DARK_SECONDARY_6002 = "#70cb83";
+var COLOR_DARK_SECONDARY_7002 = "#9bd9a7";
+var COLOR_DARK_SECONDARY_8002 = "#c3e8c9";
+var COLOR_DARK_SECONDARY_9002 = "#e6f6e9";
+var COLOR_DARK_TERTIARY_02 = "#000000";
+var COLOR_DARK_TERTIARY_502 = "#005a92";
+var COLOR_DARK_TERTIARY_1002 = "#087ab4";
+var COLOR_DARK_TERTIARY_2002 = "#098bc7";
+var COLOR_DARK_TERTIARY_3002 = "#139edb";
+var COLOR_DARK_TERTIARY_4002 = "#19ace9";
+var COLOR_DARK_TERTIARY_5002 = "#35b8eb";
+var COLOR_DARK_TERTIARY_6002 = "#56c5ee";
+var COLOR_DARK_TERTIARY_7002 = "#84d5f3";
+var COLOR_DARK_TERTIARY_8002 = "#b4e6f7";
+var COLOR_DARK_TERTIARY_9002 = "#e1f5fc";
 var COLOR_DARK_INFO_02 = "#000000";
-var COLOR_DARK_INFO_502 = "#0a1a97";
-var COLOR_DARK_INFO_1002 = "#202faa";
-var COLOR_DARK_INFO_2002 = "#293ab6";
-var COLOR_DARK_INFO_3002 = "#3344c2";
-var COLOR_DARK_INFO_4002 = "#394dcd";
-var COLOR_DARK_INFO_5002 = "#5968d6";
-var COLOR_DARK_INFO_6002 = "#7884dd";
-var COLOR_DARK_INFO_7002 = "#9fa7e7";
-var COLOR_DARK_INFO_8002 = "#c6c9f1";
-var COLOR_DARK_INFO_9002 = "#e8eaf9";
+var COLOR_DARK_INFO_502 = "#00153c";
+var COLOR_DARK_INFO_1002 = "#072859";
+var COLOR_DARK_INFO_2002 = "#02367d";
+var COLOR_DARK_INFO_3002 = "#054da7";
+var COLOR_DARK_INFO_4002 = "#096bde";
+var COLOR_DARK_INFO_5002 = "#3990ff";
+var COLOR_DARK_INFO_6002 = "#6fb6ff";
+var COLOR_DARK_INFO_7002 = "#addbff";
+var COLOR_DARK_INFO_8002 = "#ddf1ff";
+var COLOR_DARK_INFO_9002 = "#f4faff";
 var COLOR_DARK_WARNING_02 = "#000000";
-var COLOR_DARK_WARNING_502 = "#927c00";
-var COLOR_DARK_WARNING_1002 = "#aea300";
-var COLOR_DARK_WARNING_2002 = "#bfba00";
-var COLOR_DARK_WARNING_3002 = "#d1d100";
-var COLOR_DARK_WARNING_4002 = "#dfe300";
-var COLOR_DARK_WARNING_5002 = "#e5e741";
-var COLOR_DARK_WARNING_6002 = "#ebec67";
-var COLOR_DARK_WARNING_7002 = "#f1f294";
-var COLOR_DARK_WARNING_8002 = "#f7f6bf";
-var COLOR_DARK_WARNING_9002 = "#fcfce5";
+var COLOR_DARK_WARNING_502 = "#3b2300";
+var COLOR_DARK_WARNING_1002 = "#4d2d00";
+var COLOR_DARK_WARNING_2002 = "#633c01";
+var COLOR_DARK_WARNING_3002 = "#7d4e00";
+var COLOR_DARK_WARNING_4002 = "#9a6700";
+var COLOR_DARK_WARNING_5002 = "#bf8700";
+var COLOR_DARK_WARNING_6002 = "#d4a72c";
+var COLOR_DARK_WARNING_7002 = "#eac54f";
+var COLOR_DARK_WARNING_8002 = "#fae17d";
+var COLOR_DARK_WARNING_9002 = "#fff8c5";
 var COLOR_DARK_DANGER_02 = "#000000";
-var COLOR_DARK_DANGER_502 = "#ab322f";
-var COLOR_DARK_DANGER_1002 = "#b93c3a";
-var COLOR_DARK_DANGER_2002 = "#c74141";
-var COLOR_DARK_DANGER_3002 = "#d94a47";
-var COLOR_DARK_DANGER_4002 = "#e8524a";
-var COLOR_DARK_DANGER_5002 = "#e35f5f";
-var COLOR_DARK_DANGER_6002 = "#d97b7d";
-var COLOR_DARK_DANGER_7002 = "#e69fa1";
-var COLOR_DARK_DANGER_8002 = "#f8d0d5";
-var COLOR_DARK_DANGER_9002 = "#fcecef";
+var COLOR_DARK_DANGER_502 = "#39000d";
+var COLOR_DARK_DANGER_1002 = "#580013";
+var COLOR_DARK_DANGER_2002 = "#77061b";
+var COLOR_DARK_DANGER_3002 = "#a10e25";
+var COLOR_DARK_DANGER_4002 = "#d3232f";
+var COLOR_DARK_DANGER_5002 = "#fa5255";
+var COLOR_DARK_DANGER_6002 = "#ff9192";
+var COLOR_DARK_DANGER_7002 = "#ffc7c5";
+var COLOR_DARK_DANGER_8002 = "#ffe9e8";
+var COLOR_DARK_DANGER_9002 = "#fff8f6";
 var COLOR_DARK_SUCCESS_02 = "#000000";
-var COLOR_DARK_SUCCESS_502 = "#0d503a";
-var COLOR_DARK_SUCCESS_1002 = "#166c54";
-var COLOR_DARK_SUCCESS_2002 = "#1b7c62";
-var COLOR_DARK_SUCCESS_3002 = "#208c71";
-var COLOR_DARK_SUCCESS_4002 = "#24997e";
-var COLOR_DARK_SUCCESS_5002 = "#38a990";
-var COLOR_DARK_SUCCESS_6002 = "#57b9a2";
-var COLOR_DARK_SUCCESS_7002 = "#85cdbc";
-var COLOR_DARK_SUCCESS_8002 = "#b5e0d6";
-var COLOR_DARK_SUCCESS_9002 = "#e1f3ef";
+var COLOR_DARK_SUCCESS_502 = "#001d09";
+var COLOR_DARK_SUCCESS_1002 = "#002f0f";
+var COLOR_DARK_SUCCESS_2002 = "#034318";
+var COLOR_DARK_SUCCESS_3002 = "#0f5d26";
+var COLOR_DARK_SUCCESS_4002 = "#1a7d36";
+var COLOR_DARK_SUCCESS_5002 = "#2ca24d";
+var COLOR_DARK_SUCCESS_6002 = "#4cc76e";
+var COLOR_DARK_SUCCESS_7002 = "#77ec95";
+var COLOR_DARK_SUCCESS_8002 = "#d7f5dd";
+var COLOR_DARK_SUCCESS_9002 = "#f3fef5";
+var COLOR_DARK_HIGHLIGHT_02 = "#000000";
+var COLOR_DARK_HIGHLIGHT_502 = "#1d0a42";
+var COLOR_DARK_HIGHLIGHT_1002 = "#301761";
+var COLOR_DARK_HIGHLIGHT_2002 = "#452382";
+var COLOR_DARK_HIGHLIGHT_3002 = "#5f35ae";
+var COLOR_DARK_HIGHLIGHT_4002 = "#814dde";
+var COLOR_DARK_HIGHLIGHT_5002 = "#a374f9";
+var COLOR_DARK_HIGHLIGHT_6002 = "#c69eff";
+var COLOR_DARK_HIGHLIGHT_7002 = "#e1cbff";
+var COLOR_DARK_HIGHLIGHT_8002 = "#f4eaff";
+var COLOR_DARK_HIGHLIGHT_9002 = "#fdf7ff";
 var COLOR_DARK_NEUTRAL_02 = "#000000";
-var COLOR_DARK_NEUTRAL_502 = "#1a1a1a";
-var COLOR_DARK_NEUTRAL_1002 = "#3a3a3a";
-var COLOR_DARK_NEUTRAL_2002 = "#595959";
-var COLOR_DARK_NEUTRAL_3002 = "#6c6c6c";
-var COLOR_DARK_NEUTRAL_4002 = "#949494";
-var COLOR_DARK_NEUTRAL_5002 = "#b4b4b4";
-var COLOR_DARK_NEUTRAL_6002 = "#d8d8d8";
-var COLOR_DARK_NEUTRAL_7002 = "#e8e8e8";
-var COLOR_DARK_NEUTRAL_8002 = "#f2f2f2";
-var COLOR_DARK_NEUTRAL_9002 = "#f9f9f9";
+var COLOR_DARK_NEUTRAL_502 = "#131318";
+var COLOR_DARK_NEUTRAL_1002 = "#25252d";
+var COLOR_DARK_NEUTRAL_2002 = "#434356";
+var COLOR_DARK_NEUTRAL_3002 = "#5a5a72";
+var COLOR_DARK_NEUTRAL_4002 = "#73738c";
+var COLOR_DARK_NEUTRAL_5002 = "#8f8fa3";
+var COLOR_DARK_NEUTRAL_6002 = "#b9b9c6";
+var COLOR_DARK_NEUTRAL_7002 = "#d8d8df";
+var COLOR_DARK_NEUTRAL_8002 = "#ebebef";
+var COLOR_DARK_NEUTRAL_9002 = "#f7f7f8";
 var TYPOGRAPHY_HEADLINE1_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE1_FONT_SIZE3 = "96px";
-var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3 = "100px";
-var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3 = "300";
-var TYPOGRAPHY_HEADLINE1_LETTER_SPACING3 = "-0.25px";
-var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE1_FONT_SIZE2 = "96px";
+var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT2 = "100px";
+var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT2 = "300";
+var TYPOGRAPHY_HEADLINE1_LETTER_SPACING2 = "-0.25px";
+var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_HEADLINE2_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE2_FONT_SIZE3 = "60px";
-var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3 = "64px";
-var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3 = "300";
-var TYPOGRAPHY_HEADLINE2_LETTER_SPACING3 = "-0.13333333333333333px";
-var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE2_FONT_SIZE2 = "60px";
+var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT2 = "64px";
+var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT2 = "300";
+var TYPOGRAPHY_HEADLINE2_LETTER_SPACING2 = "-0.13333333333333333px";
+var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_HEADLINE3_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE3_FONT_SIZE3 = "48px";
-var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3 = "52px";
-var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3 = "400";
-var TYPOGRAPHY_HEADLINE3_LETTER_SPACING3 = "normal";
-var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE3_FONT_SIZE2 = "48px";
+var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT2 = "52px";
+var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT2 = "400";
+var TYPOGRAPHY_HEADLINE3_LETTER_SPACING2 = "normal";
+var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_HEADLINE4_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE4_FONT_SIZE3 = "34px";
-var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3 = "38px";
-var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3 = "400";
-var TYPOGRAPHY_HEADLINE4_LETTER_SPACING3 = "0.11764705882352941px";
-var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE4_FONT_SIZE2 = "34px";
+var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT2 = "38px";
+var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT2 = "400";
+var TYPOGRAPHY_HEADLINE4_LETTER_SPACING2 = "0.11764705882352941px";
+var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_HEADLINE5_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE5_FONT_SIZE3 = "24px";
-var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3 = "28px";
-var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3 = "400";
-var TYPOGRAPHY_HEADLINE5_LETTER_SPACING3 = "normal";
-var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE5_FONT_SIZE2 = "24px";
+var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT2 = "28px";
+var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT2 = "400";
+var TYPOGRAPHY_HEADLINE5_LETTER_SPACING2 = "normal";
+var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_HEADLINE6_FONT_FAMILY2 = "Nunito, sans-serif";
-var TYPOGRAPHY_HEADLINE6_FONT_SIZE3 = "20px";
-var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3 = "24px";
-var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3 = "500";
-var TYPOGRAPHY_HEADLINE6_LETTER_SPACING3 = "0.2px";
-var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3 = "none";
-var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE6_FONT_SIZE2 = "20px";
+var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT2 = "24px";
+var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT2 = "500";
+var TYPOGRAPHY_HEADLINE6_LETTER_SPACING2 = "0.2px";
+var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION2 = "none";
+var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2 = "none";
 var TYPOGRAPHY_SUBTITLE1_FONT_FAMILY2 = "Nunito, sans-serif";
 var TYPOGRAPHY_SUBTITLE1_FONT_SIZE2 = "16px";
 var TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT2 = "20px";
@@ -1444,9 +1274,10 @@ var VARIANT_NEUTRAL2 = "neutral";
 // src/Theming/MemphisTheme.ts
 (function(MemphisTheme2) {
   MemphisTheme2.MEMPHIS_THEME = ThemeFactory.create({
-    name: NAME3,
+    name: NAME2,
     scheme: {
       light: {
+        surface: SCHEME_LIGHT_SURFACE2,
         background: SCHEME_LIGHT_BACKGROUND2,
         foreground: SCHEME_LIGHT_FOREGROUND2,
         highlight: SCHEME_LIGHT_HIGHLIGHT2,
@@ -1455,9 +1286,11 @@ var VARIANT_NEUTRAL2 = "neutral";
         transparent: SCHEME_LIGHT_TRANSPARENT2,
         semiTransparent: SCHEME_LIGHT_SEMI_TRANSPARENT2,
         disabled: SCHEME_LIGHT_DISABLED2,
-        contrast: SCHEME_LIGHT_CONTRAST2
+        contrast: SCHEME_LIGHT_CONTRAST2,
+        selection: SCHEME_LIGHT_SELECTION2
       },
       dark: {
+        surface: SCHEME_DARK_SURFACE2,
         background: SCHEME_DARK_BACKGROUND2,
         foreground: SCHEME_DARK_FOREGROUND2,
         highlight: SCHEME_DARK_HIGHLIGHT2,
@@ -1466,7 +1299,8 @@ var VARIANT_NEUTRAL2 = "neutral";
         transparent: SCHEME_DARK_TRANSPARENT2,
         semiTransparent: SCHEME_DARK_SEMI_TRANSPARENT2,
         disabled: SCHEME_DARK_DISABLED2,
-        contrast: SCHEME_DARK_CONTRAST2
+        contrast: SCHEME_DARK_CONTRAST2,
+        selection: SCHEME_DARK_SELECTION2
       }
     },
     palette: {
@@ -1474,28 +1308,41 @@ var VARIANT_NEUTRAL2 = "neutral";
         primary: {
           0: COLOR_LIGHT_PRIMARY_02,
           50: COLOR_LIGHT_PRIMARY_502,
-          100: COLOR_LIGHT_PRIMARY_1003,
-          200: COLOR_LIGHT_PRIMARY_2003,
-          300: COLOR_LIGHT_PRIMARY_3003,
-          400: COLOR_LIGHT_PRIMARY_4003,
-          500: COLOR_LIGHT_PRIMARY_5003,
-          600: COLOR_LIGHT_PRIMARY_6003,
-          700: COLOR_LIGHT_PRIMARY_7003,
-          800: COLOR_LIGHT_PRIMARY_8003,
-          900: COLOR_LIGHT_PRIMARY_9003
+          100: COLOR_LIGHT_PRIMARY_1002,
+          200: COLOR_LIGHT_PRIMARY_2002,
+          300: COLOR_LIGHT_PRIMARY_3002,
+          400: COLOR_LIGHT_PRIMARY_4002,
+          500: COLOR_LIGHT_PRIMARY_5002,
+          600: COLOR_LIGHT_PRIMARY_6002,
+          700: COLOR_LIGHT_PRIMARY_7002,
+          800: COLOR_LIGHT_PRIMARY_8002,
+          900: COLOR_LIGHT_PRIMARY_9002
         },
         secondary: {
           0: COLOR_LIGHT_SECONDARY_02,
           50: COLOR_LIGHT_SECONDARY_502,
-          100: COLOR_LIGHT_SECONDARY_1003,
-          200: COLOR_LIGHT_SECONDARY_2003,
-          300: COLOR_LIGHT_SECONDARY_3003,
-          400: COLOR_LIGHT_SECONDARY_4003,
-          500: COLOR_LIGHT_SECONDARY_5003,
-          600: COLOR_LIGHT_SECONDARY_6003,
-          700: COLOR_LIGHT_SECONDARY_7003,
-          800: COLOR_LIGHT_SECONDARY_8003,
-          900: COLOR_LIGHT_SECONDARY_9003
+          100: COLOR_LIGHT_SECONDARY_1002,
+          200: COLOR_LIGHT_SECONDARY_2002,
+          300: COLOR_LIGHT_SECONDARY_3002,
+          400: COLOR_LIGHT_SECONDARY_4002,
+          500: COLOR_LIGHT_SECONDARY_5002,
+          600: COLOR_LIGHT_SECONDARY_6002,
+          700: COLOR_LIGHT_SECONDARY_7002,
+          800: COLOR_LIGHT_SECONDARY_8002,
+          900: COLOR_LIGHT_SECONDARY_9002
+        },
+        tertiary: {
+          0: COLOR_LIGHT_TERTIARY_02,
+          50: COLOR_LIGHT_TERTIARY_502,
+          100: COLOR_LIGHT_TERTIARY_1002,
+          200: COLOR_LIGHT_TERTIARY_2002,
+          300: COLOR_LIGHT_TERTIARY_3002,
+          400: COLOR_LIGHT_TERTIARY_4002,
+          500: COLOR_LIGHT_TERTIARY_5002,
+          600: COLOR_LIGHT_TERTIARY_6002,
+          700: COLOR_LIGHT_TERTIARY_7002,
+          800: COLOR_LIGHT_TERTIARY_8002,
+          900: COLOR_LIGHT_TERTIARY_9002
         },
         info: {
           0: COLOR_LIGHT_INFO_02,
@@ -1549,6 +1396,19 @@ var VARIANT_NEUTRAL2 = "neutral";
           800: COLOR_LIGHT_SUCCESS_8002,
           900: COLOR_LIGHT_SUCCESS_9002
         },
+        highlight: {
+          0: COLOR_LIGHT_HIGHLIGHT_02,
+          50: COLOR_LIGHT_HIGHLIGHT_502,
+          100: COLOR_LIGHT_HIGHLIGHT_1002,
+          200: COLOR_LIGHT_HIGHLIGHT_2002,
+          300: COLOR_LIGHT_HIGHLIGHT_3002,
+          400: COLOR_LIGHT_HIGHLIGHT_4002,
+          500: COLOR_LIGHT_HIGHLIGHT_5002,
+          600: COLOR_LIGHT_HIGHLIGHT_6002,
+          700: COLOR_LIGHT_HIGHLIGHT_7002,
+          800: COLOR_LIGHT_HIGHLIGHT_8002,
+          900: COLOR_LIGHT_HIGHLIGHT_9002
+        },
         neutral: {
           0: COLOR_LIGHT_NEUTRAL_02,
           50: COLOR_LIGHT_NEUTRAL_502,
@@ -1590,6 +1450,19 @@ var VARIANT_NEUTRAL2 = "neutral";
           800: COLOR_DARK_SECONDARY_8002,
           900: COLOR_DARK_SECONDARY_9002
         },
+        tertiary: {
+          0: COLOR_DARK_TERTIARY_02,
+          50: COLOR_DARK_TERTIARY_502,
+          100: COLOR_DARK_TERTIARY_1002,
+          200: COLOR_DARK_TERTIARY_2002,
+          300: COLOR_DARK_TERTIARY_3002,
+          400: COLOR_DARK_TERTIARY_4002,
+          500: COLOR_DARK_TERTIARY_5002,
+          600: COLOR_DARK_TERTIARY_6002,
+          700: COLOR_DARK_TERTIARY_7002,
+          800: COLOR_DARK_TERTIARY_8002,
+          900: COLOR_DARK_TERTIARY_9002
+        },
         info: {
           0: COLOR_DARK_INFO_02,
           50: COLOR_DARK_INFO_502,
@@ -1642,6 +1515,19 @@ var VARIANT_NEUTRAL2 = "neutral";
           800: COLOR_DARK_SUCCESS_8002,
           900: COLOR_DARK_SUCCESS_9002
         },
+        highlight: {
+          0: COLOR_DARK_HIGHLIGHT_02,
+          50: COLOR_DARK_HIGHLIGHT_502,
+          100: COLOR_DARK_HIGHLIGHT_1002,
+          200: COLOR_DARK_HIGHLIGHT_2002,
+          300: COLOR_DARK_HIGHLIGHT_3002,
+          400: COLOR_DARK_HIGHLIGHT_4002,
+          500: COLOR_DARK_HIGHLIGHT_5002,
+          600: COLOR_DARK_HIGHLIGHT_6002,
+          700: COLOR_DARK_HIGHLIGHT_7002,
+          800: COLOR_DARK_HIGHLIGHT_8002,
+          900: COLOR_DARK_HIGHLIGHT_9002
+        },
         neutral: {
           0: COLOR_DARK_NEUTRAL_02,
           50: COLOR_DARK_NEUTRAL_502,
@@ -1657,61 +1543,61 @@ var VARIANT_NEUTRAL2 = "neutral";
         }
       }
     },
-    fontFamily: FONT_FAMILY3,
+    fontFamily: FONT_FAMILY2,
     typography: {
       headline1: {
         fontFamily: TYPOGRAPHY_HEADLINE1_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3
+        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM2
       },
       headline2: {
         fontFamily: TYPOGRAPHY_HEADLINE2_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3
+        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM2
       },
       headline3: {
         fontFamily: TYPOGRAPHY_HEADLINE3_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3
+        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM2
       },
       headline4: {
         fontFamily: TYPOGRAPHY_HEADLINE4_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3
+        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM2
       },
       headline5: {
         fontFamily: TYPOGRAPHY_HEADLINE5_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3
-      },
-      headline6: {
-        fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY2,
-        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE3,
-        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3,
-        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3,
-        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING3,
-        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3,
-        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3
+        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM2
+      },
+      headline6: {
+        fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY2,
+        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE2,
+        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT2,
+        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT2,
+        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING2,
+        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION2,
+        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2
       },
       subtitle1: {
         fontFamily: TYPOGRAPHY_SUBTITLE1_FONT_FAMILY2,
@@ -1778,9 +1664,9 @@ var VARIANT_NEUTRAL2 = "neutral";
       }
     },
     layout: {
-      radius: LAYOUT_RADIUS3,
-      space: LAYOUT_SPACE3,
-      thickness: LAYOUT_THICKNESS3
+      radius: LAYOUT_RADIUS2,
+      space: LAYOUT_SPACE2,
+      thickness: LAYOUT_THICKNESS2
     },
     elevation: {
       light: {
@@ -1828,6 +1714,7 @@ var VARIANT_NEUTRAL2 = "neutral";
     "dark"
   ];
   MemphisTheme2.MEMPHIS_THEME_SCHEME_VARIANTS = [
+    "surface",
     "background",
     "foreground",
     "highlight",
@@ -1836,7 +1723,8 @@ var VARIANT_NEUTRAL2 = "neutral";
     "transparent",
     "semiTransparent",
     "disabled",
-    "contrast"
+    "contrast",
+    "selection"
   ];
   MemphisTheme2.MEMPHIS_THEME_ELEVATION = [
     "light",
@@ -1879,11 +1767,12 @@ var VARIANT_NEUTRAL2 = "neutral";
 var MemphisTheme;
 
 // src/Theming/Tokens/CosmopolitanTokens.ts
-var NAME4 = "cosmopolitan";
-var FONT_FAMILY4 = "'Noto Sans', sans-serif";
-var LAYOUT_RADIUS4 = "3px";
-var LAYOUT_SPACE4 = "8px";
-var LAYOUT_THICKNESS4 = "1px";
+var NAME3 = "cosmopolitan";
+var FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var LAYOUT_RADIUS3 = "3px";
+var LAYOUT_SPACE3 = "8px";
+var LAYOUT_THICKNESS3 = "1px";
+var SCHEME_LIGHT_SURFACE3 = "#fefefe";
 var SCHEME_LIGHT_CONTRAST3 = "#ffffff";
 var SCHEME_LIGHT_BACKGROUND3 = "#ffffff";
 var SCHEME_LIGHT_FOREGROUND3 = "#000000";
@@ -1893,6 +1782,8 @@ var SCHEME_LIGHT_LOWLIGHT3 = "#4d4d4d";
 var SCHEME_LIGHT_TRANSPARENT3 = "rgba(255, 255, 255, 0)";
 var SCHEME_LIGHT_SEMI_TRANSPARENT3 = "rgba(255, 255, 255, 0.67)";
 var SCHEME_LIGHT_DISABLED3 = "#b8b5b2";
+var SCHEME_LIGHT_SELECTION3 = "#ffaad4";
+var SCHEME_DARK_SURFACE3 = "#2e2d2d";
 var SCHEME_DARK_CONTRAST3 = "#ffffff";
 var SCHEME_DARK_BACKGROUND3 = "#2e2d2d";
 var SCHEME_DARK_FOREGROUND3 = "#ffffff";
@@ -1902,26 +1793,261 @@ var SCHEME_DARK_LOWLIGHT3 = "#999999";
 var SCHEME_DARK_TRANSPARENT3 = "rgba(23, 23, 23, 0)";
 var SCHEME_DARK_SEMI_TRANSPARENT3 = "rgba(23, 23, 23, 0.67)";
 var SCHEME_DARK_DISABLED3 = "#5c5956";
+var SCHEME_DARK_SELECTION3 = "#ff66aa";
 var COLOR_LIGHT_PRIMARY_03 = "#ffffff";
-var COLOR_LIGHT_PRIMARY_1004 = "#fed7ea";
-var COLOR_LIGHT_PRIMARY_5004 = "#dc1884";
+var COLOR_LIGHT_PRIMARY_503 = "#fce4ec";
+var COLOR_LIGHT_PRIMARY_1003 = "#f8bcd0";
+var COLOR_LIGHT_PRIMARY_2003 = "#f48fb1";
+var COLOR_LIGHT_PRIMARY_3003 = "#f06292";
+var COLOR_LIGHT_PRIMARY_4003 = "#ec407a";
+var COLOR_LIGHT_PRIMARY_5003 = "#e91e63";
+var COLOR_LIGHT_PRIMARY_6003 = "#cb1a56";
+var COLOR_LIGHT_PRIMARY_7003 = "#a31545";
+var COLOR_LIGHT_PRIMARY_8003 = "#7e1035";
+var COLOR_LIGHT_PRIMARY_9003 = "#3a0819";
+var COLOR_LIGHT_SECONDARY_03 = "#ffffff";
+var COLOR_LIGHT_SECONDARY_503 = "#e6f6e9";
+var COLOR_LIGHT_SECONDARY_1003 = "#c3e8c9";
+var COLOR_LIGHT_SECONDARY_2003 = "#9bd9a7";
+var COLOR_LIGHT_SECONDARY_3003 = "#70cb83";
+var COLOR_LIGHT_SECONDARY_4003 = "#4dbf68";
+var COLOR_LIGHT_SECONDARY_5003 = "#21b34d";
+var COLOR_LIGHT_SECONDARY_6003 = "#16a444";
+var COLOR_LIGHT_SECONDARY_7003 = "#009238";
+var COLOR_LIGHT_SECONDARY_8003 = "#00812d";
+var COLOR_LIGHT_SECONDARY_9003 = "#006218";
+var COLOR_LIGHT_TERTIARY_03 = "#ffffff";
+var COLOR_LIGHT_TERTIARY_503 = "#e1f5fc";
+var COLOR_LIGHT_TERTIARY_1003 = "#b4e6f7";
+var COLOR_LIGHT_TERTIARY_2003 = "#84d5f3";
+var COLOR_LIGHT_TERTIARY_3003 = "#56c5ee";
+var COLOR_LIGHT_TERTIARY_4003 = "#35b8eb";
+var COLOR_LIGHT_TERTIARY_5003 = "#19ace9";
+var COLOR_LIGHT_TERTIARY_6003 = "#139edb";
+var COLOR_LIGHT_TERTIARY_7003 = "#098bc7";
+var COLOR_LIGHT_TERTIARY_8003 = "#087ab4";
+var COLOR_LIGHT_TERTIARY_9003 = "#005a92";
+var COLOR_LIGHT_INFO_03 = "#ffffff";
+var COLOR_LIGHT_INFO_503 = "#f4faff";
+var COLOR_LIGHT_INFO_1003 = "#ddf1ff";
+var COLOR_LIGHT_INFO_2003 = "#addbff";
+var COLOR_LIGHT_INFO_3003 = "#6fb6ff";
+var COLOR_LIGHT_INFO_4003 = "#3990ff";
+var COLOR_LIGHT_INFO_5003 = "#096bde";
+var COLOR_LIGHT_INFO_6003 = "#054da7";
+var COLOR_LIGHT_INFO_7003 = "#02367d";
+var COLOR_LIGHT_INFO_8003 = "#072859";
+var COLOR_LIGHT_INFO_9003 = "#00153c";
+var COLOR_LIGHT_WARNING_03 = "#ffffff";
+var COLOR_LIGHT_WARNING_503 = "#fff8c5";
+var COLOR_LIGHT_WARNING_1003 = "#fae17d";
+var COLOR_LIGHT_WARNING_2003 = "#eac54f";
+var COLOR_LIGHT_WARNING_3003 = "#d4a72c";
+var COLOR_LIGHT_WARNING_4003 = "#bf8700";
+var COLOR_LIGHT_WARNING_5003 = "#9a6700";
+var COLOR_LIGHT_WARNING_6003 = "#7d4e00";
+var COLOR_LIGHT_WARNING_7003 = "#633c01";
+var COLOR_LIGHT_WARNING_8003 = "#4d2d00";
+var COLOR_LIGHT_WARNING_9003 = "#3b2300";
+var COLOR_LIGHT_DANGER_03 = "#ffffff";
+var COLOR_LIGHT_DANGER_503 = "#fff8f6";
+var COLOR_LIGHT_DANGER_1003 = "#ffe9e8";
+var COLOR_LIGHT_DANGER_2003 = "#ffc7c5";
+var COLOR_LIGHT_DANGER_3003 = "#ff9192";
+var COLOR_LIGHT_DANGER_4003 = "#fa5255";
+var COLOR_LIGHT_DANGER_5003 = "#d3232f";
+var COLOR_LIGHT_DANGER_6003 = "#a10e25";
+var COLOR_LIGHT_DANGER_7003 = "#77061b";
+var COLOR_LIGHT_DANGER_8003 = "#580013";
+var COLOR_LIGHT_DANGER_9003 = "#39000d";
+var COLOR_LIGHT_SUCCESS_03 = "#ffffff";
+var COLOR_LIGHT_SUCCESS_503 = "#f3fef5";
+var COLOR_LIGHT_SUCCESS_1003 = "#d7f5dd";
+var COLOR_LIGHT_SUCCESS_2003 = "#77ec95";
+var COLOR_LIGHT_SUCCESS_3003 = "#4cc76e";
+var COLOR_LIGHT_SUCCESS_4003 = "#2ca24d";
+var COLOR_LIGHT_SUCCESS_5003 = "#1a7d36";
+var COLOR_LIGHT_SUCCESS_6003 = "#0f5d26";
+var COLOR_LIGHT_SUCCESS_7003 = "#034318";
+var COLOR_LIGHT_SUCCESS_8003 = "#002f0f";
+var COLOR_LIGHT_SUCCESS_9003 = "#001d09";
+var COLOR_LIGHT_HIGHLIGHT_03 = "#ffffff";
+var COLOR_LIGHT_HIGHLIGHT_503 = "#fdf7ff";
+var COLOR_LIGHT_HIGHLIGHT_1003 = "#f4eaff";
+var COLOR_LIGHT_HIGHLIGHT_2003 = "#e1cbff";
+var COLOR_LIGHT_HIGHLIGHT_3003 = "#c69eff";
+var COLOR_LIGHT_HIGHLIGHT_4003 = "#a374f9";
+var COLOR_LIGHT_HIGHLIGHT_5003 = "#814dde";
+var COLOR_LIGHT_HIGHLIGHT_6003 = "#5f35ae";
+var COLOR_LIGHT_HIGHLIGHT_7003 = "#452382";
+var COLOR_LIGHT_HIGHLIGHT_8003 = "#301761";
+var COLOR_LIGHT_HIGHLIGHT_9003 = "#1d0a42";
+var COLOR_LIGHT_NEUTRAL_03 = "#ffffff";
+var COLOR_LIGHT_NEUTRAL_503 = "#f7f7f8";
+var COLOR_LIGHT_NEUTRAL_1003 = "#ebebef";
+var COLOR_LIGHT_NEUTRAL_2003 = "#d8d8df";
+var COLOR_LIGHT_NEUTRAL_3003 = "#b9b9c6";
+var COLOR_LIGHT_NEUTRAL_4003 = "#8f8fa3";
+var COLOR_LIGHT_NEUTRAL_5003 = "#73738c";
+var COLOR_LIGHT_NEUTRAL_6003 = "#5a5a72";
+var COLOR_LIGHT_NEUTRAL_7003 = "#434356";
+var COLOR_LIGHT_NEUTRAL_8003 = "#25252d";
+var COLOR_LIGHT_NEUTRAL_9003 = "#131318";
 var COLOR_DARK_PRIMARY_03 = "#000000";
-var COLOR_DARK_PRIMARY_1003 = "#4b0225";
-var COLOR_DARK_PRIMARY_5003 = "#dc1884";
-var TYPOGRAPHY_HEADING_FONT_FAMILY = "'Noto Sans', sans-serif";
-var TYPOGRAPHY_HEADING_FONT_SIZE = "24px";
-var TYPOGRAPHY_HEADING_LINE_HEIGHT = "28px";
-var TYPOGRAPHY_HEADING_FONT_WEIGHT = "300";
-var TYPOGRAPHY_HEADING_LETTER_SPACING = "-0.25px";
-var TYPOGRAPHY_HEADING_TEXT_DECORATION = "none";
-var TYPOGRAPHY_HEADING_TEXT_TRANSFORM = "none";
-var TYPOGRAPHY_CONTENT_FONT_FAMILY = "'Noto Sans', sans-serif";
-var TYPOGRAPHY_CONTENT_FONT_SIZE = "16px";
-var TYPOGRAPHY_CONTENT_LINE_HEIGHT = "20px";
-var TYPOGRAPHY_CONTENT_FONT_WEIGHT = "300";
-var TYPOGRAPHY_CONTENT_LETTER_SPACING = "-0.25px";
-var TYPOGRAPHY_CONTENT_TEXT_DECORATION = "none";
-var TYPOGRAPHY_CONTENT_TEXT_TRANSFORM = "none";
+var COLOR_DARK_PRIMARY_503 = "#3a0819";
+var COLOR_DARK_PRIMARY_1003 = "#7e1035";
+var COLOR_DARK_PRIMARY_2003 = "#a31545";
+var COLOR_DARK_PRIMARY_3003 = "#cb1a56";
+var COLOR_DARK_PRIMARY_4003 = "#e91e63";
+var COLOR_DARK_PRIMARY_5003 = "#ec407a";
+var COLOR_DARK_PRIMARY_6003 = "#f06292";
+var COLOR_DARK_PRIMARY_7003 = "#f48fb1";
+var COLOR_DARK_PRIMARY_8003 = "#f8bcd0";
+var COLOR_DARK_PRIMARY_9003 = "#fce4ec";
+var COLOR_DARK_SECONDARY_03 = "#000000";
+var COLOR_DARK_SECONDARY_503 = "#006218";
+var COLOR_DARK_SECONDARY_1003 = "#00812d";
+var COLOR_DARK_SECONDARY_2003 = "#009238";
+var COLOR_DARK_SECONDARY_3003 = "#16a444";
+var COLOR_DARK_SECONDARY_4003 = "#21b34d";
+var COLOR_DARK_SECONDARY_5003 = "#4dbf68";
+var COLOR_DARK_SECONDARY_6003 = "#70cb83";
+var COLOR_DARK_SECONDARY_7003 = "#9bd9a7";
+var COLOR_DARK_SECONDARY_8003 = "#c3e8c9";
+var COLOR_DARK_SECONDARY_9003 = "#e6f6e9";
+var COLOR_DARK_TERTIARY_03 = "#000000";
+var COLOR_DARK_TERTIARY_503 = "#005a92";
+var COLOR_DARK_TERTIARY_1003 = "#087ab4";
+var COLOR_DARK_TERTIARY_2003 = "#098bc7";
+var COLOR_DARK_TERTIARY_3003 = "#139edb";
+var COLOR_DARK_TERTIARY_4003 = "#19ace9";
+var COLOR_DARK_TERTIARY_5003 = "#35b8eb";
+var COLOR_DARK_TERTIARY_6003 = "#56c5ee";
+var COLOR_DARK_TERTIARY_7003 = "#84d5f3";
+var COLOR_DARK_TERTIARY_8003 = "#b4e6f7";
+var COLOR_DARK_TERTIARY_9003 = "#e1f5fc";
+var COLOR_DARK_INFO_03 = "#000000";
+var COLOR_DARK_INFO_503 = "#00153c";
+var COLOR_DARK_INFO_1003 = "#072859";
+var COLOR_DARK_INFO_2003 = "#02367d";
+var COLOR_DARK_INFO_3003 = "#054da7";
+var COLOR_DARK_INFO_4003 = "#096bde";
+var COLOR_DARK_INFO_5003 = "#3990ff";
+var COLOR_DARK_INFO_6003 = "#6fb6ff";
+var COLOR_DARK_INFO_7003 = "#addbff";
+var COLOR_DARK_INFO_8003 = "#ddf1ff";
+var COLOR_DARK_INFO_9003 = "#f4faff";
+var COLOR_DARK_WARNING_03 = "#000000";
+var COLOR_DARK_WARNING_503 = "#3b2300";
+var COLOR_DARK_WARNING_1003 = "#4d2d00";
+var COLOR_DARK_WARNING_2003 = "#633c01";
+var COLOR_DARK_WARNING_3003 = "#7d4e00";
+var COLOR_DARK_WARNING_4003 = "#9a6700";
+var COLOR_DARK_WARNING_5003 = "#bf8700";
+var COLOR_DARK_WARNING_6003 = "#d4a72c";
+var COLOR_DARK_WARNING_7003 = "#eac54f";
+var COLOR_DARK_WARNING_8003 = "#fae17d";
+var COLOR_DARK_WARNING_9003 = "#fff8c5";
+var COLOR_DARK_DANGER_03 = "#000000";
+var COLOR_DARK_DANGER_503 = "#39000d";
+var COLOR_DARK_DANGER_1003 = "#580013";
+var COLOR_DARK_DANGER_2003 = "#77061b";
+var COLOR_DARK_DANGER_3003 = "#a10e25";
+var COLOR_DARK_DANGER_4003 = "#d3232f";
+var COLOR_DARK_DANGER_5003 = "#fa5255";
+var COLOR_DARK_DANGER_6003 = "#ff9192";
+var COLOR_DARK_DANGER_7003 = "#ffc7c5";
+var COLOR_DARK_DANGER_8003 = "#ffe9e8";
+var COLOR_DARK_DANGER_9003 = "#fff8f6";
+var COLOR_DARK_SUCCESS_03 = "#000000";
+var COLOR_DARK_SUCCESS_503 = "#001d09";
+var COLOR_DARK_SUCCESS_1003 = "#002f0f";
+var COLOR_DARK_SUCCESS_2003 = "#034318";
+var COLOR_DARK_SUCCESS_3003 = "#0f5d26";
+var COLOR_DARK_SUCCESS_4003 = "#1a7d36";
+var COLOR_DARK_SUCCESS_5003 = "#2ca24d";
+var COLOR_DARK_SUCCESS_6003 = "#4cc76e";
+var COLOR_DARK_SUCCESS_7003 = "#77ec95";
+var COLOR_DARK_SUCCESS_8003 = "#d7f5dd";
+var COLOR_DARK_SUCCESS_9003 = "#f3fef5";
+var COLOR_DARK_HIGHLIGHT_03 = "#000000";
+var COLOR_DARK_HIGHLIGHT_503 = "#1d0a42";
+var COLOR_DARK_HIGHLIGHT_1003 = "#301761";
+var COLOR_DARK_HIGHLIGHT_2003 = "#452382";
+var COLOR_DARK_HIGHLIGHT_3003 = "#5f35ae";
+var COLOR_DARK_HIGHLIGHT_4003 = "#814dde";
+var COLOR_DARK_HIGHLIGHT_5003 = "#a374f9";
+var COLOR_DARK_HIGHLIGHT_6003 = "#c69eff";
+var COLOR_DARK_HIGHLIGHT_7003 = "#e1cbff";
+var COLOR_DARK_HIGHLIGHT_8003 = "#f4eaff";
+var COLOR_DARK_HIGHLIGHT_9003 = "#fdf7ff";
+var COLOR_DARK_NEUTRAL_03 = "#000000";
+var COLOR_DARK_NEUTRAL_503 = "#131318";
+var COLOR_DARK_NEUTRAL_1003 = "#25252d";
+var COLOR_DARK_NEUTRAL_2003 = "#434356";
+var COLOR_DARK_NEUTRAL_3003 = "#5a5a72";
+var COLOR_DARK_NEUTRAL_4003 = "#73738c";
+var COLOR_DARK_NEUTRAL_5003 = "#8f8fa3";
+var COLOR_DARK_NEUTRAL_6003 = "#b9b9c6";
+var COLOR_DARK_NEUTRAL_7003 = "#d8d8df";
+var COLOR_DARK_NEUTRAL_8003 = "#ebebef";
+var COLOR_DARK_NEUTRAL_9003 = "#f7f7f8";
+var TYPOGRAPHY_HEADLINE1_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE1_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE1_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE2_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE2_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE2_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE3_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE3_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE3_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE4_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE4_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE4_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE5_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE5_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE5_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_HEADLINE6_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_HEADLINE6_FONT_SIZE3 = "24px";
+var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3 = "28px";
+var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_HEADLINE6_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_BODY1_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_BODY1_FONT_SIZE3 = "16px";
+var TYPOGRAPHY_BODY1_LINE_HEIGHT3 = "20px";
+var TYPOGRAPHY_BODY1_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_BODY1_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_BODY1_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_BODY1_TEXT_TRANSFORM3 = "none";
+var TYPOGRAPHY_BODY2_FONT_FAMILY3 = "'Noto Sans', sans-serif";
+var TYPOGRAPHY_BODY2_FONT_SIZE3 = "16px";
+var TYPOGRAPHY_BODY2_LINE_HEIGHT3 = "20px";
+var TYPOGRAPHY_BODY2_FONT_WEIGHT3 = "300";
+var TYPOGRAPHY_BODY2_LETTER_SPACING3 = "-0.25px";
+var TYPOGRAPHY_BODY2_TEXT_DECORATION3 = "none";
+var TYPOGRAPHY_BODY2_TEXT_TRANSFORM3 = "none";
 var TYPOGRAPHY_BUTTON_FONT_FAMILY3 = "'Noto Sans', sans-serif";
 var TYPOGRAPHY_BUTTON_FONT_SIZE3 = "16px";
 var TYPOGRAPHY_BUTTON_LINE_HEIGHT3 = "20px";
@@ -1929,7 +2055,7 @@ var TYPOGRAPHY_BUTTON_FONT_WEIGHT3 = "700";
 var TYPOGRAPHY_BUTTON_LETTER_SPACING3 = "-0.25px";
 var TYPOGRAPHY_BUTTON_TEXT_DECORATION3 = "none";
 var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM3 = "uppercase";
-var ELEVATION_NONE2 = "none";
+var ELEVATION_NONE = "none";
 var ELEVATION_LIGHT_LIGHT3 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)";
 var ELEVATION_LIGHT_SEMILIGHT3 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)";
 var ELEVATION_LIGHT_REGULAR3 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)";
@@ -1942,8 +2068,14 @@ var ELEVATION_DARK_REGULAR3 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px
 var ELEVATION_DARK_SEMIBOLD3 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28)";
 var ELEVATION_DARK_BOLD3 = "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28)";
 var ELEVATION_DARK_EXTRABOLD3 = "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28)";
-var TYPOGRAPHY_KEY_HEADING = "heading";
-var TYPOGRAPHY_KEY_CONTENT = "content";
+var TYPOGRAPHY_KEY_HEADLINE13 = "headline1";
+var TYPOGRAPHY_KEY_HEADLINE23 = "headline2";
+var TYPOGRAPHY_KEY_HEADLINE33 = "headline3";
+var TYPOGRAPHY_KEY_HEADLINE43 = "headline4";
+var TYPOGRAPHY_KEY_HEADLINE53 = "headline5";
+var TYPOGRAPHY_KEY_HEADLINE63 = "headline6";
+var TYPOGRAPHY_KEY_BODY13 = "body1";
+var TYPOGRAPHY_KEY_BODY23 = "body2";
 var TYPOGRAPHY_KEY_BUTTON3 = "button";
 var ELEVATION_KEY_LIGHT3 = "light";
 var ELEVATION_KEY_SEMILIGHT3 = "semilight";
@@ -1958,9 +2090,10 @@ var VARIANT_TERTIARY2 = "tertiary";
 // src/Theming/CosmopolitanTheme.ts
 (function(CosmopolitanTheme2) {
   CosmopolitanTheme2.COSMOPOLITAN_THEME = ThemeFactory.create({
-    name: NAME4,
+    name: NAME3,
     scheme: {
       light: {
+        surface: SCHEME_LIGHT_SURFACE3,
         contrast: SCHEME_LIGHT_CONTRAST3,
         background: SCHEME_LIGHT_BACKGROUND3,
         foreground: SCHEME_LIGHT_FOREGROUND3,
@@ -1969,9 +2102,11 @@ var VARIANT_TERTIARY2 = "tertiary";
         lowlight: SCHEME_LIGHT_LOWLIGHT3,
         transparent: SCHEME_LIGHT_TRANSPARENT3,
         semiTransparent: SCHEME_LIGHT_SEMI_TRANSPARENT3,
-        disabled: SCHEME_LIGHT_DISABLED3
+        disabled: SCHEME_LIGHT_DISABLED3,
+        selection: SCHEME_LIGHT_SELECTION3
       },
       dark: {
+        surface: SCHEME_DARK_SURFACE3,
         contrast: SCHEME_DARK_CONTRAST3,
         background: SCHEME_DARK_BACKGROUND3,
         foreground: SCHEME_DARK_FOREGROUND3,
@@ -1980,48 +2115,323 @@ var VARIANT_TERTIARY2 = "tertiary";
         lowlight: SCHEME_DARK_LOWLIGHT3,
         transparent: SCHEME_DARK_TRANSPARENT3,
         semiTransparent: SCHEME_DARK_SEMI_TRANSPARENT3,
-        disabled: SCHEME_DARK_DISABLED3
+        disabled: SCHEME_DARK_DISABLED3,
+        selection: SCHEME_DARK_SELECTION3
       }
     },
     palette: {
       light: {
         primary: {
           0: COLOR_LIGHT_PRIMARY_03,
-          100: COLOR_LIGHT_PRIMARY_1004,
-          500: COLOR_LIGHT_PRIMARY_5004
+          50: COLOR_LIGHT_PRIMARY_503,
+          100: COLOR_LIGHT_PRIMARY_1003,
+          200: COLOR_LIGHT_PRIMARY_2003,
+          300: COLOR_LIGHT_PRIMARY_3003,
+          400: COLOR_LIGHT_PRIMARY_4003,
+          500: COLOR_LIGHT_PRIMARY_5003,
+          600: COLOR_LIGHT_PRIMARY_6003,
+          700: COLOR_LIGHT_PRIMARY_7003,
+          800: COLOR_LIGHT_PRIMARY_8003,
+          900: COLOR_LIGHT_PRIMARY_9003
+        },
+        secondary: {
+          0: COLOR_LIGHT_SECONDARY_03,
+          50: COLOR_LIGHT_SECONDARY_503,
+          100: COLOR_LIGHT_SECONDARY_1003,
+          200: COLOR_LIGHT_SECONDARY_2003,
+          300: COLOR_LIGHT_SECONDARY_3003,
+          400: COLOR_LIGHT_SECONDARY_4003,
+          500: COLOR_LIGHT_SECONDARY_5003,
+          600: COLOR_LIGHT_SECONDARY_6003,
+          700: COLOR_LIGHT_SECONDARY_7003,
+          800: COLOR_LIGHT_SECONDARY_8003,
+          900: COLOR_LIGHT_SECONDARY_9003
+        },
+        tertiary: {
+          0: COLOR_LIGHT_TERTIARY_03,
+          50: COLOR_LIGHT_TERTIARY_503,
+          100: COLOR_LIGHT_TERTIARY_1003,
+          200: COLOR_LIGHT_TERTIARY_2003,
+          300: COLOR_LIGHT_TERTIARY_3003,
+          400: COLOR_LIGHT_TERTIARY_4003,
+          500: COLOR_LIGHT_TERTIARY_5003,
+          600: COLOR_LIGHT_TERTIARY_6003,
+          700: COLOR_LIGHT_TERTIARY_7003,
+          800: COLOR_LIGHT_TERTIARY_8003,
+          900: COLOR_LIGHT_TERTIARY_9003
+        },
+        info: {
+          0: COLOR_LIGHT_INFO_03,
+          50: COLOR_LIGHT_INFO_503,
+          100: COLOR_LIGHT_INFO_1003,
+          200: COLOR_LIGHT_INFO_2003,
+          300: COLOR_LIGHT_INFO_3003,
+          400: COLOR_LIGHT_INFO_4003,
+          500: COLOR_LIGHT_INFO_5003,
+          600: COLOR_LIGHT_INFO_6003,
+          700: COLOR_LIGHT_INFO_7003,
+          800: COLOR_LIGHT_INFO_8003,
+          900: COLOR_LIGHT_INFO_9003
+        },
+        warning: {
+          0: COLOR_LIGHT_WARNING_03,
+          50: COLOR_LIGHT_WARNING_503,
+          100: COLOR_LIGHT_WARNING_1003,
+          200: COLOR_LIGHT_WARNING_2003,
+          300: COLOR_LIGHT_WARNING_3003,
+          400: COLOR_LIGHT_WARNING_4003,
+          500: COLOR_LIGHT_WARNING_5003,
+          600: COLOR_LIGHT_WARNING_6003,
+          700: COLOR_LIGHT_WARNING_7003,
+          800: COLOR_LIGHT_WARNING_8003,
+          900: COLOR_LIGHT_WARNING_9003
+        },
+        danger: {
+          0: COLOR_LIGHT_DANGER_03,
+          50: COLOR_LIGHT_DANGER_503,
+          100: COLOR_LIGHT_DANGER_1003,
+          200: COLOR_LIGHT_DANGER_2003,
+          300: COLOR_LIGHT_DANGER_3003,
+          400: COLOR_LIGHT_DANGER_4003,
+          500: COLOR_LIGHT_DANGER_5003,
+          600: COLOR_LIGHT_DANGER_6003,
+          700: COLOR_LIGHT_DANGER_7003,
+          800: COLOR_LIGHT_DANGER_8003,
+          900: COLOR_LIGHT_DANGER_9003
+        },
+        success: {
+          0: COLOR_LIGHT_SUCCESS_03,
+          50: COLOR_LIGHT_SUCCESS_503,
+          100: COLOR_LIGHT_SUCCESS_1003,
+          200: COLOR_LIGHT_SUCCESS_2003,
+          300: COLOR_LIGHT_SUCCESS_3003,
+          400: COLOR_LIGHT_SUCCESS_4003,
+          500: COLOR_LIGHT_SUCCESS_5003,
+          600: COLOR_LIGHT_SUCCESS_6003,
+          700: COLOR_LIGHT_SUCCESS_7003,
+          800: COLOR_LIGHT_SUCCESS_8003,
+          900: COLOR_LIGHT_SUCCESS_9003
+        },
+        highlight: {
+          0: COLOR_LIGHT_HIGHLIGHT_03,
+          50: COLOR_LIGHT_HIGHLIGHT_503,
+          100: COLOR_LIGHT_HIGHLIGHT_1003,
+          200: COLOR_LIGHT_HIGHLIGHT_2003,
+          300: COLOR_LIGHT_HIGHLIGHT_3003,
+          400: COLOR_LIGHT_HIGHLIGHT_4003,
+          500: COLOR_LIGHT_HIGHLIGHT_5003,
+          600: COLOR_LIGHT_HIGHLIGHT_6003,
+          700: COLOR_LIGHT_HIGHLIGHT_7003,
+          800: COLOR_LIGHT_HIGHLIGHT_8003,
+          900: COLOR_LIGHT_HIGHLIGHT_9003
         },
-        secondary: {},
-        tertiary: {}
+        neutral: {
+          0: COLOR_LIGHT_NEUTRAL_03,
+          50: COLOR_LIGHT_NEUTRAL_503,
+          100: COLOR_LIGHT_NEUTRAL_1003,
+          200: COLOR_LIGHT_NEUTRAL_2003,
+          300: COLOR_LIGHT_NEUTRAL_3003,
+          400: COLOR_LIGHT_NEUTRAL_4003,
+          500: COLOR_LIGHT_NEUTRAL_5003,
+          600: COLOR_LIGHT_NEUTRAL_6003,
+          700: COLOR_LIGHT_NEUTRAL_7003,
+          800: COLOR_LIGHT_NEUTRAL_8003,
+          900: COLOR_LIGHT_NEUTRAL_9003
+        }
       },
       dark: {
         primary: {
           0: COLOR_DARK_PRIMARY_03,
+          50: COLOR_DARK_PRIMARY_503,
           100: COLOR_DARK_PRIMARY_1003,
-          500: COLOR_DARK_PRIMARY_5003
+          200: COLOR_DARK_PRIMARY_2003,
+          300: COLOR_DARK_PRIMARY_3003,
+          400: COLOR_DARK_PRIMARY_4003,
+          500: COLOR_DARK_PRIMARY_5003,
+          600: COLOR_DARK_PRIMARY_6003,
+          700: COLOR_DARK_PRIMARY_7003,
+          800: COLOR_DARK_PRIMARY_8003,
+          900: COLOR_DARK_PRIMARY_9003
+        },
+        secondary: {
+          0: COLOR_DARK_SECONDARY_03,
+          50: COLOR_DARK_SECONDARY_503,
+          100: COLOR_DARK_SECONDARY_1003,
+          200: COLOR_DARK_SECONDARY_2003,
+          300: COLOR_DARK_SECONDARY_3003,
+          400: COLOR_DARK_SECONDARY_4003,
+          500: COLOR_DARK_SECONDARY_5003,
+          600: COLOR_DARK_SECONDARY_6003,
+          700: COLOR_DARK_SECONDARY_7003,
+          800: COLOR_DARK_SECONDARY_8003,
+          900: COLOR_DARK_SECONDARY_9003
+        },
+        tertiary: {
+          0: COLOR_DARK_TERTIARY_03,
+          50: COLOR_DARK_TERTIARY_503,
+          100: COLOR_DARK_TERTIARY_1003,
+          200: COLOR_DARK_TERTIARY_2003,
+          300: COLOR_DARK_TERTIARY_3003,
+          400: COLOR_DARK_TERTIARY_4003,
+          500: COLOR_DARK_TERTIARY_5003,
+          600: COLOR_DARK_TERTIARY_6003,
+          700: COLOR_DARK_TERTIARY_7003,
+          800: COLOR_DARK_TERTIARY_8003,
+          900: COLOR_DARK_TERTIARY_9003
+        },
+        info: {
+          0: COLOR_DARK_INFO_03,
+          50: COLOR_DARK_INFO_503,
+          100: COLOR_DARK_INFO_1003,
+          200: COLOR_DARK_INFO_2003,
+          300: COLOR_DARK_INFO_3003,
+          400: COLOR_DARK_INFO_4003,
+          500: COLOR_DARK_INFO_5003,
+          600: COLOR_DARK_INFO_6003,
+          700: COLOR_DARK_INFO_7003,
+          800: COLOR_DARK_INFO_8003,
+          900: COLOR_DARK_INFO_9003
+        },
+        warning: {
+          0: COLOR_DARK_WARNING_03,
+          50: COLOR_DARK_WARNING_503,
+          100: COLOR_DARK_WARNING_1003,
+          200: COLOR_DARK_WARNING_2003,
+          300: COLOR_DARK_WARNING_3003,
+          400: COLOR_DARK_WARNING_4003,
+          500: COLOR_DARK_WARNING_5003,
+          600: COLOR_DARK_WARNING_6003,
+          700: COLOR_DARK_WARNING_7003,
+          800: COLOR_DARK_WARNING_8003,
+          900: COLOR_DARK_WARNING_9003
+        },
+        danger: {
+          0: COLOR_DARK_DANGER_03,
+          50: COLOR_DARK_DANGER_503,
+          100: COLOR_DARK_DANGER_1003,
+          200: COLOR_DARK_DANGER_2003,
+          300: COLOR_DARK_DANGER_3003,
+          400: COLOR_DARK_DANGER_4003,
+          500: COLOR_DARK_DANGER_5003,
+          600: COLOR_DARK_DANGER_6003,
+          700: COLOR_DARK_DANGER_7003,
+          800: COLOR_DARK_DANGER_8003,
+          900: COLOR_DARK_DANGER_9003
+        },
+        success: {
+          0: COLOR_DARK_SUCCESS_03,
+          50: COLOR_DARK_SUCCESS_503,
+          100: COLOR_DARK_SUCCESS_1003,
+          200: COLOR_DARK_SUCCESS_2003,
+          300: COLOR_DARK_SUCCESS_3003,
+          400: COLOR_DARK_SUCCESS_4003,
+          500: COLOR_DARK_SUCCESS_5003,
+          600: COLOR_DARK_SUCCESS_6003,
+          700: COLOR_DARK_SUCCESS_7003,
+          800: COLOR_DARK_SUCCESS_8003,
+          900: COLOR_DARK_SUCCESS_9003
+        },
+        highlight: {
+          0: COLOR_DARK_HIGHLIGHT_03,
+          50: COLOR_DARK_HIGHLIGHT_503,
+          100: COLOR_DARK_HIGHLIGHT_1003,
+          200: COLOR_DARK_HIGHLIGHT_2003,
+          300: COLOR_DARK_HIGHLIGHT_3003,
+          400: COLOR_DARK_HIGHLIGHT_4003,
+          500: COLOR_DARK_HIGHLIGHT_5003,
+          600: COLOR_DARK_HIGHLIGHT_6003,
+          700: COLOR_DARK_HIGHLIGHT_7003,
+          800: COLOR_DARK_HIGHLIGHT_8003,
+          900: COLOR_DARK_HIGHLIGHT_9003
         },
-        secondary: {},
-        tertiary: {}
+        neutral: {
+          0: COLOR_DARK_NEUTRAL_03,
+          50: COLOR_DARK_NEUTRAL_503,
+          100: COLOR_DARK_NEUTRAL_1003,
+          200: COLOR_DARK_NEUTRAL_2003,
+          300: COLOR_DARK_NEUTRAL_3003,
+          400: COLOR_DARK_NEUTRAL_4003,
+          500: COLOR_DARK_NEUTRAL_5003,
+          600: COLOR_DARK_NEUTRAL_6003,
+          700: COLOR_DARK_NEUTRAL_7003,
+          800: COLOR_DARK_NEUTRAL_8003,
+          900: COLOR_DARK_NEUTRAL_9003
+        }
       }
     },
-    fontFamily: FONT_FAMILY4,
+    fontFamily: FONT_FAMILY3,
     typography: {
-      heading: {
-        fontFamily: TYPOGRAPHY_HEADING_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_HEADING_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_HEADING_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_HEADING_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_HEADING_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_HEADING_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_HEADING_TEXT_TRANSFORM
+      headline1: {
+        fontFamily: TYPOGRAPHY_HEADLINE1_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3
+      },
+      headline2: {
+        fontFamily: TYPOGRAPHY_HEADLINE2_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3
+      },
+      headline3: {
+        fontFamily: TYPOGRAPHY_HEADLINE3_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3
+      },
+      headline4: {
+        fontFamily: TYPOGRAPHY_HEADLINE4_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3
+      },
+      headline5: {
+        fontFamily: TYPOGRAPHY_HEADLINE5_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3
+      },
+      headline6: {
+        fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3
+      },
+      body1: {
+        fontFamily: TYPOGRAPHY_BODY1_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_BODY1_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_BODY1_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_BODY1_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_BODY1_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_BODY1_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_BODY1_TEXT_TRANSFORM3
       },
-      content: {
-        fontFamily: TYPOGRAPHY_CONTENT_FONT_FAMILY,
-        fontSize: TYPOGRAPHY_CONTENT_FONT_SIZE,
-        lineHeight: TYPOGRAPHY_CONTENT_LINE_HEIGHT,
-        fontWeight: TYPOGRAPHY_CONTENT_FONT_WEIGHT,
-        letterSpacing: TYPOGRAPHY_CONTENT_LETTER_SPACING,
-        textDecoration: TYPOGRAPHY_CONTENT_TEXT_DECORATION,
-        textTransform: TYPOGRAPHY_CONTENT_TEXT_TRANSFORM
+      body2: {
+        fontFamily: TYPOGRAPHY_BODY2_FONT_FAMILY3,
+        fontSize: TYPOGRAPHY_BODY2_FONT_SIZE3,
+        lineHeight: TYPOGRAPHY_BODY2_LINE_HEIGHT3,
+        fontWeight: TYPOGRAPHY_BODY2_FONT_WEIGHT3,
+        letterSpacing: TYPOGRAPHY_BODY2_LETTER_SPACING3,
+        textDecoration: TYPOGRAPHY_BODY2_TEXT_DECORATION3,
+        textTransform: TYPOGRAPHY_BODY2_TEXT_TRANSFORM3
       },
       button: {
         fontFamily: TYPOGRAPHY_BUTTON_FONT_FAMILY3,
@@ -2034,9 +2444,9 @@ var VARIANT_TERTIARY2 = "tertiary";
       }
     },
     layout: {
-      radius: LAYOUT_RADIUS4,
-      space: LAYOUT_SPACE4,
-      thickness: LAYOUT_THICKNESS4
+      radius: LAYOUT_RADIUS3,
+      space: LAYOUT_SPACE3,
+      thickness: LAYOUT_THICKNESS3
     },
     elevation: {
       light: {
@@ -2046,7 +2456,7 @@ var VARIANT_TERTIARY2 = "tertiary";
         semibold: ELEVATION_LIGHT_SEMIBOLD3,
         bold: ELEVATION_LIGHT_BOLD3,
         extrabold: ELEVATION_LIGHT_EXTRABOLD3,
-        none: ELEVATION_NONE2
+        none: ELEVATION_NONE
       },
       dark: {
         light: ELEVATION_DARK_LIGHT3,
@@ -2055,7 +2465,7 @@ var VARIANT_TERTIARY2 = "tertiary";
         semibold: ELEVATION_DARK_SEMIBOLD3,
         bold: ELEVATION_DARK_BOLD3,
         extrabold: ELEVATION_DARK_EXTRABOLD3,
-        none: ELEVATION_NONE2
+        none: ELEVATION_NONE
       }
     }
   });
@@ -2066,14 +2476,23 @@ var VARIANT_TERTIARY2 = "tertiary";
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_PALETTE_VARIANTS = [
     "0",
+    "50",
     "100",
-    "500"
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEMES = [
     "light",
     "dark"
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEME_VARIANTS = [
+    "surface",
     "background",
     "foreground",
     "highlight",
@@ -2082,7 +2501,8 @@ var VARIANT_TERTIARY2 = "tertiary";
     "transparent",
     "semiTransparent",
     "disabled",
-    "contrast"
+    "contrast",
+    "selection"
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_ELEVATION = [
     "light",
@@ -2097,8 +2517,14 @@ var VARIANT_TERTIARY2 = "tertiary";
     ELEVATION_KEY_EXTRABOLD3
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_TYPOGRAPHY = [
-    TYPOGRAPHY_KEY_HEADING,
-    TYPOGRAPHY_KEY_CONTENT,
+    TYPOGRAPHY_KEY_HEADLINE13,
+    TYPOGRAPHY_KEY_HEADLINE23,
+    TYPOGRAPHY_KEY_HEADLINE33,
+    TYPOGRAPHY_KEY_HEADLINE43,
+    TYPOGRAPHY_KEY_HEADLINE53,
+    TYPOGRAPHY_KEY_HEADLINE63,
+    TYPOGRAPHY_KEY_BODY13,
+    TYPOGRAPHY_KEY_BODY23,
     TYPOGRAPHY_KEY_BUTTON3
   ];
   CosmopolitanTheme2.COSMOPOLITAN_THEME_METADATA = {
@@ -2315,46 +2741,68 @@ var CssShadow;
 })(CssTime || (CssTime = {}));
 var CssTime;
 
-// src/Theming/Utils/IThemePalette.ts
-(function(IThemePalette2) {
+// src/Theming/Utils/ThemePalette.ts
+(function(ThemePalette2) {
+  const THEME_SHADE_NAMES = [
+    "0",
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"
+  ];
+  function isThemeShadeName(value) {
+    return THEME_SHADE_NAMES.includes(value);
+  }
+  __name(isThemeShadeName, "isThemeShadeName");
   function isThemePalette(value) {
-    return typeof value === "object" && value !== null;
+    if (typeof value !== "object" || value === null) {
+      return false;
+    }
+    return Object.keys(value).every((key) => isThemeShadeName(key) && typeof value[key] === "string");
   }
   __name(isThemePalette, "isThemePalette");
-  IThemePalette2.isThemePalette = isThemePalette;
-})(IThemePalette || (IThemePalette = {}));
-var IThemePalette;
+  ThemePalette2.isThemePalette = isThemePalette;
+})(ThemePalette || (ThemePalette = {}));
+var ThemePalette;
 
 // src/Theming/Utils/ITheme.ts
 (function(ITheme2) {
   function getScheme(theme, mode) {
-    const scheme = theme.scheme[mode];
-    return scheme;
+    return theme.scheme[mode];
   }
   __name(getScheme, "getScheme");
   ITheme2.getScheme = getScheme;
-  function getSchemeColor(theme, mode, key) {
+  function getSchemeColor(theme, mode, role) {
     const scheme = theme.scheme[mode];
-    const color = scheme[key];
+    const color = scheme[role];
+    if (typeof color !== "string") {
+      throw new Error(`Scheme color '${role}' is not defined for mode '${mode}'.`);
+    }
     return color;
   }
   __name(getSchemeColor, "getSchemeColor");
   ITheme2.getSchemeColor = getSchemeColor;
-  function getPalette(theme, mode, palette) {
-    const paletteObj = theme.palette[mode][palette];
-    if (!IThemePalette.isThemePalette(paletteObj)) {
-      throw new Error(`Palette '${palette}' is not a valid theme palette.`);
+  function getPalette(theme, mode, semanticColor) {
+    const paletteEntry = theme.palette[mode][semanticColor];
+    if (!ThemePalette.isThemePalette(paletteEntry)) {
+      throw new Error(`Palette '${semanticColor}' is not a valid theme palette for mode '${mode}'.`);
     }
-    return paletteObj;
+    return paletteEntry;
   }
   __name(getPalette, "getPalette");
   ITheme2.getPalette = getPalette;
-  function getPaletteColor(theme, mode, palette, key) {
-    const paletteObj = theme.palette[mode][palette];
-    if (!IThemePalette.isThemePalette(paletteObj)) {
-      throw new Error(`Palette '${palette}' is not a valid theme palette.`);
+  function getPaletteColor(theme, mode, semanticColor, shade) {
+    const palette = getPalette(theme, mode, semanticColor);
+    const color = palette[shade];
+    if (typeof color !== "string") {
+      throw new Error(`Shade '${shade}' is not defined in palette '${semanticColor}' for mode '${mode}'.`);
     }
-    const color = paletteObj[key];
     return color;
   }
   __name(getPaletteColor, "getPaletteColor");
@@ -2362,6 +2810,36 @@ var IThemePalette;
 })(ITheme || (ITheme = {}));
 var ITheme;
 
+// src/Theming/Utils/ThemeScheme.ts
+(function(ThemeScheme2) {
+  const ROLES = [
+    "surface",
+    "background",
+    "foreground",
+    "highlight",
+    "middlelight",
+    "lowlight",
+    "transparent",
+    "semiTransparent",
+    "disabled",
+    "contrast",
+    "selection"
+  ];
+  function isRole(value) {
+    return ROLES.includes(value);
+  }
+  __name(isRole, "isRole");
+  function isThemeScheme(value) {
+    if (typeof value !== "object" || value === null) {
+      return false;
+    }
+    return Object.entries(value).every(([key, color]) => isRole(key) && typeof color === "string");
+  }
+  __name(isThemeScheme, "isThemeScheme");
+  ThemeScheme2.isThemeScheme = isThemeScheme;
+})(ThemeScheme || (ThemeScheme = {}));
+var ThemeScheme;
+
 // src/Theming/Adapters/BrowserPlatformAdapter.ts
 var BrowserPlatformAdapter = class {
   static {
@@ -2490,6 +2968,13 @@ var ThemeObserver = class {
   }
   // #endregion
   // #region Methods
+  /**
+   * Applies the given theme and theme mode to the document.
+   *
+   * @public
+   * @param theme - The theme to apply (joy, cosmopolitan or memphis).
+   * @param themeMode - The theme mode to apply.
+   */
   applyTheme(theme, themeMode) {
     this._platformAdapter.setDocumentAttribute("theme", theme);
     switch (themeMode) {
@@ -2517,7 +3002,7 @@ var ThemeObserver = class {
       "theme",
       "theme-mode"
     ], (attributeName, newValue) => {
-      if (attributeName === "theme") {
+      if (attributeName === "theme" && newValue) {
         const theme = newValue;
         if (this._currentTheme !== theme) {
           this._currentTheme = theme;
@@ -2570,6 +3055,14 @@ var MaterialThemeGeneratorStrategy = class {
   }
   // #endregion
   // #region Methods
+  /**
+   * Generates a color palette for the Material theme.
+   *
+   * @public
+   * @param baseColor The base/accent color.
+   * @param mode 'light' or 'dark' mode.
+   * @returns The generated theme palette.
+   */
   generatePalette(baseColor, mode) {
     if (mode === "light") {
       const baseLight2 = chroma("#ffffff");
@@ -2642,6 +3135,14 @@ var MaterialThemeGeneratorStrategy = class {
     });
     return palette;
   }
+  /**
+   * Generates a semantic color scheme for Material theme usage, based on the generated palette.
+   *
+   * @public
+   * @param baseColor The base/accent color.
+   * @param mode 'light' or 'dark' mode.
+   * @returns The generated theme scheme.
+   */
   generateScheme(baseColor, mode) {
     const baseChroma = chroma(baseColor);
     const luminance = baseChroma.luminance();
@@ -2661,18 +3162,16 @@ var MaterialThemeGeneratorStrategy = class {
       }
       return darkened.hex();
     }, "adjustColor");
-    const middlelightAmount = isDarkBase ? 50 : -50;
-    const lowlightAmount = isDarkBase ? 80 : -80;
-    const disabledAmount = isDarkBase ? 40 : -40;
     return {
+      surface: adjustColor(baseColor, mode === "dark" ? -10 : 10),
       background: baseColor,
       foreground: adjustColor(baseColor, mode === "dark" ? 190 : -190),
       highlight: adjustColor(baseColor, mode === "dark" ? 30 : -30),
-      middlelight: adjustColor(baseColor, middlelightAmount),
-      lowlight: adjustColor(baseColor, lowlightAmount),
+      middlelight: adjustColor(baseColor, isDarkBase ? 50 : -50),
+      lowlight: adjustColor(baseColor, isDarkBase ? 80 : -80),
       transparent: `${baseColor}00`,
       semiTransparent: `${baseColor}aa`,
-      disabled: adjustColor(baseColor, disabledAmount),
+      disabled: adjustColor(baseColor, isDarkBase ? 40 : -40),
       contrast: adjustColor(baseColor, mode === "dark" ? 190 : -190),
       selection: adjustColor(baseColor, mode === "dark" ? 30 : -30)
     };
@@ -2684,7 +3183,7 @@ function createMaterialTheme() {
 }
 __name(createMaterialTheme, "createMaterialTheme");
 
-// src/Theming/Strategies/JoyThemeGeneratorStrategy.ts
+// src/Theming/Strategies/surface/JoyThemeGeneratorStrategy.ts
 var JoyThemeGeneratorStrategy = class {
   static {
     __name(this, "JoyThemeGeneratorStrategy");
@@ -2711,7 +3210,7 @@ function createJoyTheme() {
 }
 __name(createJoyTheme, "createJoyTheme");
 
-// src/Theming/Strategies/MemphisThemeGeneratorStrategy.ts
+// src/Theming/Strategies/surface/MemphisThemeGeneratorStrategy.ts
 var MemphisThemeGeneratorStrategy = class {
   static {
     __name(this, "MemphisThemeGeneratorStrategy");
@@ -2827,15 +3326,11 @@ var ThemeGenerator = class {
   // #endregion
   // #region Ctor
   /**
-   * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
    * @public
+   * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
    */
   constructor(platformAdapter) {
     this._strategies = /* @__PURE__ */ new Map([
-      [
-        "material",
-        new MaterialThemeGeneratorStrategy()
-      ],
       [
         "joy",
         new JoyThemeGeneratorStrategy()
@@ -2853,16 +3348,41 @@ var ThemeGenerator = class {
   }
   // #endregion
   // #region Methods
-  generatePalette(theme, baseColor, mode) {
+  /**
+   * Generates a theme palette.
+   *
+   * @public
+   * @param themeName The name of the theme.
+   * @param baseColor The base color (typically a 500 level shade).
+   * @param mode The theme mode ('dark', 'light', or 'system').
+   * @returns The generated theme palette.
+   */
+  generatePalette(themeName, baseColor, mode) {
     const resolvedMode = this.resolveMode(mode);
-    const strategy = this.getStrategy(theme.name);
+    const strategy = this.getStrategy(themeName);
     return strategy.generatePalette(baseColor, resolvedMode);
   }
-  generateScheme(theme, baseColor, mode) {
+  /**
+   * Generates a theme scheme.
+   *
+   * @public
+   * @param themeName The name of the theme.
+   * @param baseColor The base color (typically a background level shade).
+   * @param mode The theme mode ('dark', 'light', or 'system').
+   * @returns The generated theme scheme.
+   */
+  generateScheme(themeName, baseColor, mode) {
     const resolvedMode = this.resolveMode(mode);
-    const strategy = this.getStrategy(theme.name);
+    const strategy = this.getStrategy(themeName);
     return strategy.generateScheme(baseColor, resolvedMode);
   }
+  /**
+   * Resolves the theme mode, converting 'system' to 'dark' or 'light' based on platform settings.
+   *
+   * @private
+   * @param mode The theme mode to resolve.
+   * @returns The resolved theme mode.
+   */
   resolveMode(mode) {
     if (mode === "system") {
       const isDark = this._platformAdapter.matchMedia("(prefers-color-scheme: dark)");
@@ -2870,6 +3390,13 @@ var ThemeGenerator = class {
     }
     return mode;
   }
+  /**
+   * Gets the theme generator strategy for the specified theme name.
+   *
+   * @private
+   * @param themeName The name of the theme.
+   * @returns The theme generator strategy.
+   */
   getStrategy(themeName) {
     const strategy = this._strategies.get(themeName);
     if (!strategy) {
@@ -2952,7 +3479,7 @@ var TailwindThemeGeneratorStrategy = class {
    *
    * @param baseColor - The base/accent color
    * @param mode - 'light' or 'dark'
-   * @returns An IThemeScheme with semantic color roles.
+   * @returns An scheme with semantic color roles.
    *
    * Returned keys:
    * - background  → shade "50"
@@ -2966,9 +3493,7 @@ var TailwindThemeGeneratorStrategy = class {
     return {
       background: p["50"],
       foreground: p["900"],
-      primary: p["500"],
-      accent: p["700"],
-      muted: p["300"]
+      disabled: p["300"]
     };
   }
 };
@@ -2977,7 +3502,243 @@ function createTailwindTheme() {
   return () => strategy;
 }
 __name(createTailwindTheme, "createTailwindTheme");
+function adjust(color, amount) {
+  return Math.min(255, Math.max(0, color + amount));
+}
+__name(adjust, "adjust");
+function darken(hex, factor) {
+  const [r, g, b] = chroma(hex).rgb().map((x) => adjust(x, -factor));
+  return chroma(r, g, b, "rgb").hex();
+}
+__name(darken, "darken");
+function lighten(hex, factor) {
+  const [r, g, b] = chroma(hex).rgb().map((x) => adjust(x, factor));
+  return chroma(r, g, b, "rgb").hex();
+}
+__name(lighten, "lighten");
+
+// src/Colors/common.ts
+function hexToHSL(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max === min) {
+    h = 0;
+    s = 0;
+  } else {
+    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,
+    s,
+    l
+  ];
+}
+__name(hexToHSL, "hexToHSL");
+function hslToHex(h, s, l) {
+  const hue2rgb = /* @__PURE__ */ __name((p, q, t) => {
+    if (t < 0) {
+      t += 1;
+    }
+    if (t > 1) {
+      t -= 1;
+    }
+    if (t < 1 / 6) {
+      return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+      return q;
+    }
+    if (t < 2 / 3) {
+      return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+  }, "hue2rgb");
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (s === 0) {
+    r = l;
+    g = l;
+    b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return `#${Math.round(r * 255).toString(16).padStart(2, "0")}${Math.round(g * 255).toString(16).padStart(2, "0")}${Math.round(b * 255).toString(16).padStart(2, "0")}`;
+}
+__name(hslToHex, "hslToHex");
+function adjustHue(hsl, adjustment) {
+  return [
+    (hsl[0] + adjustment + 1) % 1,
+    hsl[1],
+    hsl[2]
+  ];
+}
+__name(adjustHue, "adjustHue");
+
+// src/Colors/generators/analogous.ts
+function generateAnalogousPalette(baseHex, adjustment) {
+  const baseHSL = hexToHSL(baseHex);
+  const adjustedHSL = adjustHue(baseHSL, adjustment);
+  const palette = {};
+  const steps = [
+    0,
+    50,
+    100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900
+  ];
+  steps.forEach((step) => {
+    let [h, s, l] = adjustedHSL;
+    if (step === 0) {
+      l = 1;
+    } else {
+      l = 1 - step / 1e3;
+    }
+    palette[`${step}`] = hslToHex(h, s, Math.max(0, Math.min(1, l)));
+  });
+  return palette;
+}
+__name(generateAnalogousPalette, "generateAnalogousPalette");
+function generateAnalogousColor(baseHex, adjustment) {
+  const baseHSL = hexToHSL(baseHex);
+  const adjustedHSL = adjustHue(baseHSL, adjustment);
+  const [h, s] = adjustedHSL;
+  return hslToHex(h, s, 0.5);
+}
+__name(generateAnalogousColor, "generateAnalogousColor");
+function generateMaterialPalette(hexColor) {
+  const baseLight = chroma("#ffffff");
+  const baseDark = chroma("#000000");
+  const palette = {};
+  const steps = [
+    0,
+    50,
+    100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900
+  ];
+  const amounts = [
+    0,
+    12,
+    30,
+    50,
+    70,
+    85,
+    100,
+    87,
+    70,
+    54,
+    25
+  ];
+  steps.forEach((step, i) => {
+    const base = step <= 500 ? baseLight : baseDark;
+    palette[`${step}`] = chroma.mix(base, hexColor, amounts[i] / 100, "rgb").hex();
+  });
+  return palette;
+}
+__name(generateMaterialPalette, "generateMaterialPalette");
+
+// src/Colors/generators/complementary.ts
+function generateComplementaryPalette(baseHex) {
+  const [h, s, l] = chroma(baseHex).hsl();
+  const complementaryH = (h + 180) % 360;
+  return generateMaterialPalette(chroma.hsl(complementaryH, s, l).hex());
+}
+__name(generateComplementaryPalette, "generateComplementaryPalette");
+function generateComplementaryColor(baseHex) {
+  const [h, s, l] = chroma(baseHex).hsl();
+  const complementaryH = (h + 180) % 360;
+  return chroma.hsl(complementaryH, s, l).hex();
+}
+__name(generateComplementaryColor, "generateComplementaryColor");
+
+// src/Colors/generators/triadic.ts
+function generateTriadicPalette(baseHex, adjustment) {
+  const baseHSL = hexToHSL(baseHex);
+  const triadicHSL = adjustHue(baseHSL, adjustment);
+  const palette = {};
+  const steps = [
+    0,
+    50,
+    100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900
+  ];
+  steps.forEach((step) => {
+    let [h, s, l] = triadicHSL;
+    if (step === 0) {
+      l = 1;
+    } else {
+      l = 1 - step / 1e3;
+    }
+    palette[`${step}`] = hslToHex(h, s, Math.max(0, Math.min(1, l)));
+  });
+  return palette;
+}
+__name(generateTriadicPalette, "generateTriadicPalette");
+function generateTriadicColor(baseHex, adjustment) {
+  const baseHSL = hexToHSL(baseHex);
+  const triadicHSL = adjustHue(baseHSL, adjustment);
+  const [h, s] = triadicHSL;
+  return hslToHex(h, s, 0.5);
+}
+__name(generateTriadicColor, "generateTriadicColor");
+
+// src/Colors/index.ts
+(function(Colors2) {
+  Colors2.toDarken = darken;
+  Colors2.toLighten = lighten;
+  Colors2.toMaterialPalette = generateMaterialPalette;
+  Colors2.toComplementaryPalette = generateComplementaryPalette;
+  Colors2.toComplementaryColor = generateComplementaryColor;
+  Colors2.toAnalogousPalette = generateAnalogousPalette;
+  Colors2.toAnalogousColor = generateAnalogousColor;
+  Colors2.toTriadicPalette = generateTriadicPalette;
+  Colors2.toTriadicColor = generateTriadicColor;
+})(Colors || (Colors = {}));
+var Colors;
 
-export { BootstrapTheme, BrowserPlatformAdapter, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, CssLength, CssShadow, CssTime, ITheme, IThemePalette, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
+export { BrowserPlatformAdapter, Colors, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, CssLength, CssShadow, CssTime, ITheme, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, ThemeObserver, ThemeObserverServiceLocator, ThemePalette, ThemeScheme, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map