fix: use newest color palette and component color fixes

Autodesk · Jun 24, 2020 · 5178fdb · 5178fdb
1 parent 627a0e9
commit 5178fdb
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 32 deletions.
diff --git a/packages/theme-data/src/baseTheme/components/button.js b/packages/theme-data/src/baseTheme/components/button.js
@@ -250,7 +250,10 @@ export default {
   "button.outline.pressed.borderColor": {
     type: COLOR,
     value: {
-      ref: "button.outline.borderColor"
+      ref: "basics.colors.primary.charcoal.600"
+    },
+    transform: {
+      alpha: 0.85
     }
   },
   /**

diff --git a/packages/theme-data/src/baseTheme/components/sideNav.js b/packages/theme-data/src/baseTheme/components/sideNav.js
@@ -186,13 +186,13 @@ export default {
   "sideNav.icon.defaultColor": {
     type: COLOR,
     value: {
-      ref: "colorScheme.icon.default"
+      ref: "basics.colors.text.againstLight"
     }
   },
   "sideNav.icon.activeColor": {
     type: COLOR,
     value: {
-      ref: "colorScheme.icon.on.default"
+      ref: "basics.colors.primary.autodeskBlue.500"
     }
   },
   "sideNav.activeIndicator.backgroundColor": {

diff --git a/packages/theme-data/src/baseTheme/system/colorScheme.js b/packages/theme-data/src/baseTheme/system/colorScheme.js
@@ -119,7 +119,7 @@ export default {
   },
   "status.error": {
     value: {
-      ref: "basics.colors.secondary.red.500"
+      ref: "basics.colors.secondary.red.600"
     },
     type: COLOR
   },

diff --git a/packages/theme-data/src/basics/colors.js b/packages/theme-data/src/basics/colors.js
@@ -9,10 +9,10 @@ export default {
   "primary.autodeskBlue.300": { value: "#6ac0e7", type: COLOR },
   "primary.autodeskBlue.400": { value: "#38abdf", type: COLOR },
   "primary.autodeskBlue.500": { value: "#0696d7", type: COLOR },
-  "primary.autodeskBlue.600": { value: "#0686c2", type: COLOR },
+  "primary.autodeskBlue.600": { value: "#007fc6", type: COLOR },
   "primary.autodeskBlue.700": { value: "#006eaf", type: COLOR },
-  "primary.autodeskBlue.800": { value: "#034b6c", type: COLOR },
-  "primary.autodeskBlue.900": { value: "#022c40", type: COLOR },
+  "primary.autodeskBlue.800": { value: "#074b78", type: COLOR },
+  "primary.autodeskBlue.900": { value: "#0a324d", type: COLOR },
 
   "primary.charcoal.100": { value: "#eeeeee", type: COLOR },
   "primary.charcoal.200": { value: "#dcdcdc", type: COLOR },
@@ -26,54 +26,54 @@ export default {
 
   // Secondary colors
   "secondary.darkBlue.100": { value: "#e1ebf7", type: COLOR },
-  "secondary.darkBlue.200": { value: "#d1deee", type: COLOR },
-  "secondary.darkBlue.300": { value: "#a3bcdc", type: COLOR },
-  "secondary.darkBlue.400": { value: "#749bcb", type: COLOR },
-  "secondary.darkBlue.500": { value: "#4679b9", type: COLOR },
+  "secondary.darkBlue.200": { value: "#bcd3ee", type: COLOR },
+  "secondary.darkBlue.300": { value: "#8babdc", type: COLOR },
+  "secondary.darkBlue.400": { value: "#5f8bcb", type: COLOR },
+  "secondary.darkBlue.500": { value: "#3970b9", type: COLOR },
   "secondary.darkBlue.600": { value: "#1858a8", type: COLOR },
-  "secondary.darkBlue.700": { value: "#12437f", type: COLOR },
-  "secondary.darkBlue.800": { value: "#0e3666", type: COLOR },
+  "secondary.darkBlue.700": { value: "#064285", type: COLOR },
+  "secondary.darkBlue.800": { value: "#003163", type: COLOR },
   "secondary.darkBlue.900": { value: "#0c2c54", type: COLOR },
 
   "secondary.green.100": { value: "#e7f2d9", type: COLOR },
   "secondary.green.200": { value: "#cfe4b3", type: COLOR },
   "secondary.green.300": { value: "#b7d78c", type: COLOR },
   "secondary.green.400": { value: "#9fc966", type: COLOR },
   "secondary.green.500": { value: "#87b340", type: COLOR },
-  "secondary.green.600": { value: "#658d30", type: COLOR },
-  "secondary.green.700": { value: "#5d822c", type: COLOR },
-  "secondary.green.800": { value: "#4c6b24", type: COLOR },
-  "secondary.green.900": { value: "#445e20", type: COLOR },
+  "secondary.green.600": { value: "#6a9728", type: COLOR },
+  "secondary.green.700": { value: "#507b16", type: COLOR },
+  "secondary.green.800": { value: "#385e08", type: COLOR },
+  "secondary.green.900": { value: "#234200", type: COLOR },
 
-  "secondary.red.100": { value: "#ffd9d9", type: COLOR },
-  "secondary.red.200": { value: "#f8d3d3", type: COLOR },
-  "secondary.red.300": { value: "#f1a7a7", type: COLOR },
-  "secondary.red.400": { value: "#eb7a7a", type: COLOR },
-  "secondary.red.500": { value: "#ec4a41", type: COLOR },
+  "secondary.red.100": { value: "#faeded", type: COLOR },
+  "secondary.red.200": { value: "#f7d6d6", type: COLOR },
+  "secondary.red.300": { value: "#f9b4b4", type: COLOR },
+  "secondary.red.400": { value: "#f48686", type: COLOR },
+  "secondary.red.500": { value: "#eb5555", type: COLOR },
   "secondary.red.600": { value: "#dd2222", type: COLOR },
-  "secondary.red.700": { value: "#a61a1a", type: COLOR },
-  "secondary.red.800": { value: "#6f1111", type: COLOR },
-  "secondary.red.900": { value: "#630f0f", type: COLOR },
+  "secondary.red.700": { value: "#af1b1b", type: COLOR },
+  "secondary.red.800": { value: "#800f0f", type: COLOR },
+  "secondary.red.900": { value: "#520404", type: COLOR },
 
   "secondary.turquoise.100": { value: "#d6f2ef", type: COLOR },
   "secondary.turquoise.200": { value: "#ade4de", type: COLOR },
   "secondary.turquoise.300": { value: "#84d7ce", type: COLOR },
   "secondary.turquoise.400": { value: "#5bc9bd", type: COLOR },
   "secondary.turquoise.500": { value: "#32bcad", type: COLOR },
   "secondary.turquoise.600": { value: "#23a597", type: COLOR },
-  "secondary.turquoise.700": { value: "#268d82", type: COLOR },
-  "secondary.turquoise.800": { value: "#20756c", type: COLOR },
-  "secondary.turquoise.900": { value: "#195e57", type: COLOR },
+  "secondary.turquoise.700": { value: "#168576", type: COLOR },
+  "secondary.turquoise.800": { value: "#0c665b", type: COLOR },
+  "secondary.turquoise.900": { value: "#04403d", type: COLOR },
 
   "secondary.yellowOrange.100": { value: "#feecd1", type: COLOR },
   "secondary.yellowOrange.200": { value: "#fddaa4", type: COLOR },
   "secondary.yellowOrange.300": { value: "#fcc776", type: COLOR },
   "secondary.yellowOrange.400": { value: "#fbb549", type: COLOR },
   "secondary.yellowOrange.500": { value: "#faa21b", type: COLOR },
-  "secondary.yellowOrange.600": { value: "#bb7a14", type: COLOR },
-  "secondary.yellowOrange.700": { value: "#916010", type: COLOR },
-  "secondary.yellowOrange.800": { value: "#7d510e", type: COLOR },
-  "secondary.yellowOrange.900": { value: "#523609", type: COLOR },
+  "secondary.yellowOrange.600": { value: "#ed8d16", type: COLOR },
+  "secondary.yellowOrange.700": { value: "#d9730b", type: COLOR },
+  "secondary.yellowOrange.800": { value: "#bf5808", type: COLOR },
+  "secondary.yellowOrange.900": { value: "#8c3401", type: COLOR },
 
   // Tertiary colors
   "tertiary.pink.100": { value: "#ffebf5", type: COLOR },

diff --git a/packages/theme-data/src/colorSchemes/darkBlue/components/button.js b/packages/theme-data/src/colorSchemes/darkBlue/components/button.js
@@ -53,5 +53,13 @@ export default {
     value: {
       ref: "basics.colors.primary.autodeskBlue.500"
     }
+  },
+  "button.outline.pressed.borderColor": {
+    value: {
+      ref: "basics.colors.secondary.darkBlue.200"
+    },
+    transform: {
+      alpha: 0.75
+    }
   }
 };
diff --git a/packages/theme-data/src/colorSchemes/darkBlue/components/sideNav.js b/packages/theme-data/src/colorSchemes/darkBlue/components/sideNav.js
@@ -0,0 +1,12 @@
+export default {
+  "sideNav.icon.defaultColor": {
+    value: {
+      ref: "basics.colors.text.againstDark"
+    }
+  },
+  "sideNav.icon.activeColor": {
+    value: {
+      ref: "basics.colors.primary.autodeskBlue.400"
+    }
+  }
+};
diff --git a/packages/theme-data/src/colorSchemes/darkBlue/system/colorScheme.js b/packages/theme-data/src/colorSchemes/darkBlue/system/colorScheme.js
@@ -344,5 +344,15 @@ export default {
     transform: {
       alpha: 0.75
     }
+  },
+  "status.error": {
+    value: {
+      ref: "basics.colors.secondary.red.500"
+    }
+  },
+  "status.warning": {
+    value: {
+      ref: "basics.colors.secondary.yellowOrange.400"
+    }
   }
 };
diff --git a/packages/theme-data/src/colorSchemes/darkBlue/unresolvedRoles.js b/packages/theme-data/src/colorSchemes/darkBlue/unresolvedRoles.js
@@ -14,6 +14,7 @@ import label from "./components/label";
 import progressBar from "./components/progressBar";
 import progressRing from "./components/progressRing";
 import segmentedButton from "./components/segmentedButton";
+import sideNav from "./components/sideNav";
 import skeletonItem from "./components/skeletonItem";
 import slider from "./components/slider";
 import stepIndicator from "./components/stepIndicator";
@@ -43,6 +44,7 @@ const darkBlueThemeConfig = extendTheme(
     progressBar,
     progressRing,
     segmentedButton,
+    sideNav,
     skeletonItem,
     slider,
     stepIndicator,

diff --git a/packages/theme-data/src/colorSchemes/darkGray/components/button.js b/packages/theme-data/src/colorSchemes/darkGray/components/button.js
@@ -0,0 +1,7 @@
+export default {
+  "button.outline.pressed.borderColor": {
+    value: {
+      ref: "basics.colors.primary.white"
+    }
+  }
+};
diff --git a/packages/theme-data/src/colorSchemes/darkGray/unresolvedRoles.js b/packages/theme-data/src/colorSchemes/darkGray/unresolvedRoles.js
@@ -4,6 +4,7 @@ import darkBlueTheme from "../darkBlue";
 import system from "./system";
 import accordion from "./components/accordion";
 import avatarBundle from "./components/avatarBundle";
+import button from "./components/button";
 import checkbox from "./components/checkbox";
 import input from "./components/input";
 import segmentedButton from "./components/segmentedButton";
@@ -21,6 +22,7 @@ const darkGrayThemeConfig = extendTheme(
     mapKeys(system.colorScheme, key => `colorScheme.${key}`),
     accordion,
     avatarBundle,
+    button,
     checkbox,
     input,
     segmentedButton,