@superdispatch/ui 0.34.0 → 0.35.0

package/dist-src/card-button/CardButton.js

@@ -22,16 +22,19 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: ColorDynamic.Dark200,
+    color: ColorDynamic.Dark100,
     borderColor: ColorDynamic.Silver500,
-    backgroundColor: ColorDynamic.Silver100
+    backgroundColor: ColorDynamic.Silver400Alpha30,
+    '& $hint': {
+      color: ColorDynamic.Dark100
+    }
   },
   error: {
     color: ColorDynamic.Red500,
     borderColor: ColorDynamic.Red500,
     backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: ColorDynamic.Red75
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {

package/dist-src/text-field/TextFieldOverrides.js

@@ -42,7 +42,7 @@ export function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: ColorDynamic.Silver30
+        backgroundColor: ColorDynamic.Silver400Alpha30
       },
       '&$error': {
         borderColor: ColorDynamic.Red500

package/dist-src/theme/Color.js

@@ -67,6 +67,7 @@ export var Color;
   Color["Silver200"] = "#F3F5F8";
   Color["Silver400"] = "#E1E5EA";
   Color["Silver500"] = "#C4CDD5";
+  Color["Silver400Alpha30"] = "rgba(225, 229, 234, 0.3)";
   Color["Blue50"] = "#EBF4FF";
   Color["Blue300"] = "#0070F5";
   Color["Blue500"] = "#0063DB";
@@ -78,6 +79,7 @@ export var Color;
   Color["Purple500"] = "#473ABB";
   Color["Red50"] = "#FFEDEB";
   Color["Red300"] = "#E5230D";
+  Color["Red300Aplha20"] = "rgba(229, 35, 13, 0.2)";
   Color["Red500"] = "#C31909";
   Color["Teal50"] = "#E3F6FC";
   Color["Teal300"] = "#007EAB";
@@ -151,6 +153,7 @@ export var ColorDark;
   ColorDark["Silver200"] = "#0D1017";
   ColorDark["Silver400"] = "#30373D";
   ColorDark["Silver500"] = "#47505B";
+  ColorDark["Silver400Alpha30"] = "rgba(48, 55, 61, 0.3)";
   ColorDark["Blue50"] = "#0E2947";
   ColorDark["Blue300"] = "#0070F5";
   ColorDark["Blue500"] = "#55ADFF";
@@ -162,6 +165,7 @@ export var ColorDark;
   ColorDark["Purple500"] = "#BFA0FF";
   ColorDark["Red50"] = "#3D0A06";
   ColorDark["Red300"] = "#E5230D";
+  ColorDark["Red300Aplha20"] = "rgba(233, 27, 12, 0.3)";
   ColorDark["Red500"] = "#FF6359";
   ColorDark["Teal50"] = "#11333D";
   ColorDark["Teal300"] = "#007EAB";
@@ -231,6 +235,7 @@ export var ColorDynamic;
   ColorDynamic["Silver200"] = "var(--sd-silver-200)";
   ColorDynamic["Silver400"] = "var(--sd-silver-400)";
   ColorDynamic["Silver500"] = "var(--sd-silver-500)";
+  ColorDynamic["Silver400Alpha30"] = "var(--sd-silver-400-alpha-30)";
   ColorDynamic["Blue50"] = "var(--sd-blue-50)";
   ColorDynamic["Blue300"] = "var(--sd-blue-300)";
   ColorDynamic["Blue500"] = "var(--sd-blue-500)";
@@ -243,6 +248,7 @@ export var ColorDynamic;
   ColorDynamic["Red50"] = "var(--sd-red-50)";
   ColorDynamic["Red300"] = "var(--sd-red-300)";
   ColorDynamic["Red500"] = "var(--sd-red-500)";
+  ColorDynamic["Red300Aplha20"] = "var(--sd-red-300-alpha-20)";
   ColorDynamic["Teal50"] = "var(--sd-teal-50)";
   ColorDynamic["Teal300"] = "var(--sd-teal-300)";
   ColorDynamic["Teal500"] = "var(--sd-teal-500)";

package/dist-src/theme/GlobalStyles.js

@@ -5,5 +5,5 @@ export var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
     theme
   } = _ref;
   var color = theme.palette.type === 'dark' ? ColorDark : Color;
-  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
+  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-red-300-alpha-20: ").concat(color.Red300Aplha20, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-silver-400-alpha-30: ").concat(color.Silver400Alpha30, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
 });

package/dist-src/theme/ThemeProvider.js

@@ -47,8 +47,8 @@ function createSuperDispatchTheme(type) {
         main: color.Red300
       },
       action: {
-        hover: color.Silver100,
-        selected: color.Silver300,
+        hover: color.Silver200,
+        selected: color.Blue50,
         disabled: color.Silver400
       },
       text: {
@@ -57,7 +57,14 @@ function createSuperDispatchTheme(type) {
         hint: color.Dark100,
         disabled: color.Dark100
       },
-      divider: color.Silver400
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
     },
     typography: createTypographyOptions(breakpoints),
     props: {},

package/dist-types/index.d.ts

@@ -457,6 +457,7 @@ declare enum Color {
     Silver200 = "#F3F5F8",
     Silver400 = "#E1E5EA",
     Silver500 = "#C4CDD5",
+    Silver400Alpha30 = "rgba(225, 229, 234, 0.3)",
     Blue50 = "#EBF4FF",
     Blue300 = "#0070F5",
     Blue500 = "#0063DB",
@@ -468,6 +469,7 @@ declare enum Color {
     Purple500 = "#473ABB",
     Red50 = "#FFEDEB",
     Red300 = "#E5230D",
+    Red300Aplha20 = "rgba(229, 35, 13, 0.2)",
     Red500 = "#C31909",
     Teal50 = "#E3F6FC",
     Teal300 = "#007EAB",
@@ -571,6 +573,7 @@ declare enum ColorDark {
     Silver200 = "#0D1017",
     Silver400 = "#30373D",
     Silver500 = "#47505B",
+    Silver400Alpha30 = "rgba(48, 55, 61, 0.3)",
     Blue50 = "#0E2947",
     Blue300 = "#0070F5",
     Blue500 = "#55ADFF",
@@ -582,6 +585,7 @@ declare enum ColorDark {
     Purple500 = "#BFA0FF",
     Red50 = "#3D0A06",
     Red300 = "#E5230D",
+    Red300Aplha20 = "rgba(233, 27, 12, 0.3)",
     Red500 = "#FF6359",
     Teal50 = "#11333D",
     Teal300 = "#007EAB",
@@ -685,6 +689,7 @@ declare enum ColorDynamic {
     Silver200 = "var(--sd-silver-200)",
     Silver400 = "var(--sd-silver-400)",
     Silver500 = "var(--sd-silver-500)",
+    Silver400Alpha30 = "var(--sd-silver-400-alpha-30)",
     Blue50 = "var(--sd-blue-50)",
     Blue300 = "var(--sd-blue-300)",
     Blue500 = "var(--sd-blue-500)",
@@ -697,6 +702,7 @@ declare enum ColorDynamic {
     Red50 = "var(--sd-red-50)",
     Red300 = "var(--sd-red-300)",
     Red500 = "var(--sd-red-500)",
+    Red300Aplha20 = "var(--sd-red-300-alpha-20)",
     Teal50 = "var(--sd-teal-50)",
     Teal300 = "var(--sd-teal-300)",
     Teal500 = "var(--sd-teal-500)",

package/dist-web/index.js

@@ -475,6 +475,7 @@ var Color;
   Color["Silver200"] = "#F3F5F8";
   Color["Silver400"] = "#E1E5EA";
   Color["Silver500"] = "#C4CDD5";
+  Color["Silver400Alpha30"] = "rgba(225, 229, 234, 0.3)";
   Color["Blue50"] = "#EBF4FF";
   Color["Blue300"] = "#0070F5";
   Color["Blue500"] = "#0063DB";
@@ -486,6 +487,7 @@ var Color;
   Color["Purple500"] = "#473ABB";
   Color["Red50"] = "#FFEDEB";
   Color["Red300"] = "#E5230D";
+  Color["Red300Aplha20"] = "rgba(229, 35, 13, 0.2)";
   Color["Red500"] = "#C31909";
   Color["Teal50"] = "#E3F6FC";
   Color["Teal300"] = "#007EAB";
@@ -559,6 +561,7 @@ var ColorDark;
   ColorDark["Silver200"] = "#0D1017";
   ColorDark["Silver400"] = "#30373D";
   ColorDark["Silver500"] = "#47505B";
+  ColorDark["Silver400Alpha30"] = "rgba(48, 55, 61, 0.3)";
   ColorDark["Blue50"] = "#0E2947";
   ColorDark["Blue300"] = "#0070F5";
   ColorDark["Blue500"] = "#55ADFF";
@@ -570,6 +573,7 @@ var ColorDark;
   ColorDark["Purple500"] = "#BFA0FF";
   ColorDark["Red50"] = "#3D0A06";
   ColorDark["Red300"] = "#E5230D";
+  ColorDark["Red300Aplha20"] = "rgba(233, 27, 12, 0.3)";
   ColorDark["Red500"] = "#FF6359";
   ColorDark["Teal50"] = "#11333D";
   ColorDark["Teal300"] = "#007EAB";
@@ -639,6 +643,7 @@ var ColorDynamic;
   ColorDynamic["Silver200"] = "var(--sd-silver-200)";
   ColorDynamic["Silver400"] = "var(--sd-silver-400)";
   ColorDynamic["Silver500"] = "var(--sd-silver-500)";
+  ColorDynamic["Silver400Alpha30"] = "var(--sd-silver-400-alpha-30)";
   ColorDynamic["Blue50"] = "var(--sd-blue-50)";
   ColorDynamic["Blue300"] = "var(--sd-blue-300)";
   ColorDynamic["Blue500"] = "var(--sd-blue-500)";
@@ -651,6 +656,7 @@ var ColorDynamic;
   ColorDynamic["Red50"] = "var(--sd-red-50)";
   ColorDynamic["Red300"] = "var(--sd-red-300)";
   ColorDynamic["Red500"] = "var(--sd-red-500)";
+  ColorDynamic["Red300Aplha20"] = "var(--sd-red-300-alpha-20)";
   ColorDynamic["Teal50"] = "var(--sd-teal-50)";
   ColorDynamic["Teal300"] = "var(--sd-teal-300)";
   ColorDynamic["Teal500"] = "var(--sd-teal-500)";
@@ -835,16 +841,19 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
     transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
   },
   disabled: {
-    color: ColorDynamic.Dark200,
+    color: ColorDynamic.Dark100,
     borderColor: ColorDynamic.Silver500,
-    backgroundColor: ColorDynamic.Silver100
+    backgroundColor: ColorDynamic.Silver400Alpha30,
+    '& $hint': {
+      color: ColorDynamic.Dark100
+    }
   },
   error: {
     color: ColorDynamic.Red500,
     borderColor: ColorDynamic.Red500,
     backgroundColor: ColorDynamic.Red50,
     '&:focus': {
-      backgroundColor: ColorDynamic.Red75
+      backgroundColor: ColorDynamic.Red300Aplha20
     }
   },
   primary: {
@@ -3648,7 +3657,7 @@ function overrideTextField(theme) {
   theme.overrides.MuiInputBase = {
     root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
       '&$disabled': {
-        backgroundColor: ColorDynamic.Silver30
+        backgroundColor: ColorDynamic.Silver400Alpha30
       },
       '&$error': {
         borderColor: ColorDynamic.Red500
@@ -4013,7 +4022,7 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_ref => {
     theme
   } = _ref;
   var color = theme.palette.type === 'dark' ? ColorDark : Color;
-  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
+  return "\n    :root{\n      --sd-white: ".concat(color.White, ";\n      --sd-white-50: ").concat(color.White50, ";\n      --sd-white-40: ").concat(color.White40, ";\n      --sd-white-20: ").concat(color.White20, ";\n      --sd-white-10: ").concat(color.White10, ";\n      --sd-white-08: ").concat(color.White08, ";\n      --sd-transparent: ").concat(color.Transparent, ";\n\n      --sd-black: ").concat(color.Black, ";\n      --sd-black-50: ").concat(color.Black50, ";\n      --sd-black-20: ").concat(color.Black20, ";\n\n      --sd-dark-30: ").concat(color.Dark30, ";\n      --sd-blue-30: ").concat(color.Blue30, ";\n      --sd-green-30: ").concat(color.Green30, ";\n      --sd-red-30: ").concat(color.Red30, ";\n      --sd-red-300-alpha-20: ").concat(color.Red300Aplha20, ";\n      --sd-silver-30: ").concat(color.Silver30, ";\n\n      --sd-blue-10: ").concat(color.Blue10, ";\n      --sd-red-10: ").concat(color.Red10, ";\n\n      /* Legacy Neutral Colors */\n      --sd-grey-100: ").concat(color.Grey100, "; /* @deprecated Use Dark100 */\n      --sd-grey-200: ").concat(color.Grey200, "; /* @deprecated Use Dark200 */\n      --sd-grey-300: ").concat(color.Grey300, "; /* @deprecated Use Dark300 */\n      --sd-grey-400: ").concat(color.Grey400, "; /* @deprecated Use Dark400 */\n      --sd-grey-450: ").concat(color.Grey450, "; /* @deprecated Use Dark450 */\n      --sd-grey-500: ").concat(color.Grey500, "; /* @deprecated Use Dark500 */\n\n      --sd-dark-200: ").concat(color.Dark200, "; /* @deprecated */\n      --sd-dark-400: ").concat(color.Dark400, "; /* @deprecated */\n      --sd-dark-450: ").concat(color.Dark450, "; /* @deprecated */\n\n      --sd-silver-100: ").concat(color.Silver100, "; /* @deprecated */\n      --sd-silver-300: ").concat(color.Silver300, "; /* @deprecated */\n\n      /* Legacy Extended Palette */\n      --sd-blue-75: ").concat(color.Blue75, "; /* @deprecated */\n      --sd-blue-100: ").concat(color.Blue100, "; /* @deprecated */\n      --sd-blue-200: ").concat(color.Blue200, "; /* @deprecated */\n      --sd-blue-400: ").concat(color.Blue400, "; /* @deprecated */\n\n      --sd-green-75: ").concat(color.Green75, "; /* @deprecated */\n      --sd-green-100: ").concat(color.Green100, "; /* @deprecated */\n      --sd-green-200: ").concat(color.Green200, "; /* @deprecated */\n      --sd-green-400: ").concat(color.Green400, "; /* @deprecated */\n\n      --sd-purple-75: ").concat(color.Purple75, "; /* @deprecated */\n      --sd-purple-100: ").concat(color.Purple100, "; /* @deprecated */\n      --sd-purple-200: ").concat(color.Purple200, "; /* @deprecated */\n      --sd-purple-400: ").concat(color.Purple400, "; /* @deprecated */\n\n      --sd-red-75: ").concat(color.Red75, "; /* @deprecated */\n      --sd-red-100: ").concat(color.Red100, "; /* @deprecated */\n      --sd-red-200: ").concat(color.Red200, "; /* @deprecated */\n      --sd-red-400: ").concat(color.Red400, "; /* @deprecated */\n\n      --sd-teal-75: ").concat(color.Teal75, "; /* @deprecated */\n      --sd-teal-100: ").concat(color.Teal100, "; /* @deprecated */\n      --sd-teal-200: ").concat(color.Teal200, "; /* @deprecated */\n      --sd-teal-400: ").concat(color.Teal400, "; /* @deprecated */\n\n      --sd-yellow-75: ").concat(color.Yellow75, "; /* @deprecated */\n      --sd-yellow-100: ").concat(color.Yellow100, "; /* @deprecated */\n      --sd-yellow-200: ").concat(color.Yellow200, "; /* @deprecated */\n      --sd-yellow-400: ").concat(color.Yellow400, "; /* @deprecated */\n      --sd-dark-50: ").concat(color.Dark50, ";\n      /* extended palette */\n    \n      --sd-blue-50: ").concat(color.Blue50, ";\n      --sd-blue-500: ").concat(color.Blue500, ";\n      --sd-blue-300: ").concat(color.Blue300, ";\n      --sd-green-300: ").concat(color.Green300, ";\n      --sd-green-500: ").concat(color.Green500, ";\n      --sd-green-50: ").concat(color.Green50, ";\n      --sd-yellow-300: ").concat(color.Yellow300, ";\n      --sd-yellow-500: ").concat(color.Yellow500, ";\n      --sd-yellow-50: ").concat(color.Yellow50, ";\n      --sd-red-300: ").concat(color.Red300, ";\n      --sd-red-500: ").concat(color.Red500, ";\n      --sd-red-50: ").concat(color.Red50, ";\n      --sd-purple-300: ").concat(color.Purple300, ";\n      --sd-purple-500: ").concat(color.Purple500, ";\n      --sd-purple-50: ").concat(color.Purple50, ";\n      --sd-teal-300: ").concat(color.Teal300, ";\n      --sd-teal-500: ").concat(color.Teal500, ";\n      --sd-teal-50: ").concat(color.Teal50, ";\n      --sd-silver-500: ").concat(color.Silver500, ";\n      --sd-silver-200: ").concat(color.Silver200, ";\n      --sd-silver-400: ").concat(color.Silver400, ";\n      --sd-silver-400-alpha-30: ").concat(color.Silver400Alpha30, ";\n      --sd-dark-100: ").concat(color.Dark100, ";\n      --sd-dark-300: ").concat(color.Dark300, ";\n      --sd-dark-500: ").concat(color.Dark500, ";\n    }\n  ");
 });
 
 function createSuperDispatchTheme(type) {
@@ -4030,8 +4039,8 @@ function createSuperDispatchTheme(type) {
         main: color.Red300
       },
       action: {
-        hover: color.Silver100,
-        selected: color.Silver300,
+        hover: color.Silver200,
+        selected: color.Blue50,
         disabled: color.Silver400
       },
       text: {
@@ -4040,7 +4049,14 @@ function createSuperDispatchTheme(type) {
         hint: color.Dark100,
         disabled: color.Dark100
       },
-      divider: color.Silver400
+      common: {
+        white: color.White,
+        black: color.Black
+      },
+      divider: color.Silver400,
+      background: {
+        paper: color.White
+      }
     },
     typography: createTypographyOptions(breakpoints),
     props: {},