style: brand color adjusted (#7)

Some adjustments of the brand colors
AxisCommunications · Sep 22, 2023 · 434a873 · 434a873
1 parent f933303
commit 434a873
Show file tree

Hide file tree

Showing 14 changed files with 170 additions and 170 deletions.
diff --git a/theme/src/index.ts b/theme/src/index.ts
@@ -9,13 +9,13 @@ import {
 // remember to run tokens:runall
 
 export const brand: BrandVariants = {
-  10: "#5C3E00",
-  20: "#795102",
-  30: "#966805",
-  40: "#AD7600",
-  50: "#BF8208",
-  60: "#D69600",
-  70: "#DFA001",
+  10: "#281E03",
+  20: "#342818",
+  30: "#3E2F1D",
+  40: "#4C381E",
+  50: "#674808",
+  60: "#B07A0F",
+  70: "#E0A101",
   80: "#EFAB01",
   90: "#FEC10C",
   100: "#FFCC33",
@@ -45,12 +45,12 @@ export const axisLightTheme: Theme = {
   colorNeutralForegroundOnBrand: "#000000",
   colorBrandBackground: "#ffcc33",
   colorBrandBackgroundHover: "#FEC10C",
-  colorBrandBackgroundPressed: "#F9BB01",
-  colorBrandBackgroundSelected: "#F9BB01",
+  colorBrandBackgroundPressed: "#B07A0F",
+  colorBrandBackgroundSelected: "#B07A0F",
   colorNeutralForegroundInverted: "#242424",
   colorCompoundBrandBackground: "#FEC10C",
-  colorCompoundBrandBackgroundHover: "#F9BB01",
-  colorCompoundBrandBackgroundPressed: "#EFAB01",
+  colorCompoundBrandBackgroundHover: "#EFAB01",
+  colorCompoundBrandBackgroundPressed: "#E0A101",
   colorBrandForegroundLink: "#028fcc",
   colorBrandForegroundLinkHover: "#0182b3",
   colorBrandForegroundLinkPressed: "#026690",

diff --git a/theme/tokens/generated/css/dark.css b/theme/tokens/generated/css/dark.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jul 2023 09:50:56 GMT
+ * Generated on Fri, 22 Sep 2023 14:14:03 GMT
  */
 
 .dark {
@@ -106,28 +106,28 @@
   --color-brand-foreground2-hover: #FFE79B;
   --color-brand-foreground2-pressed: #FFFCF1;
   --color-brand-foreground-inverted: #EFAB01;
-  --color-brand-foreground-inverted-hover: #DFA001;
-  --color-brand-foreground-inverted-pressed: #D69600;
+  --color-brand-foreground-inverted-hover: #E0A101;
+  --color-brand-foreground-inverted-pressed: #B07A0F;
   --color-brand-foreground-on-light: #EFAB01;
-  --color-brand-foreground-on-light-hover: #DFA001;
-  --color-brand-foreground-on-light-pressed: #BF8208;
-  --color-brand-foreground-on-light-selected: #D69600;
-  --color-brand-background: #DFA001;
+  --color-brand-foreground-on-light-hover: #E0A101;
+  --color-brand-foreground-on-light-pressed: #674808;
+  --color-brand-foreground-on-light-selected: #B07A0F;
+  --color-brand-background: #E0A101;
   --color-brand-background-hover: #EFAB01;
-  --color-brand-background-pressed: #AD7600;
-  --color-brand-background-selected: #D69600;
+  --color-brand-background-pressed: #4C381E;
+  --color-brand-background-selected: #B07A0F;
   --color-brand-background-static: #EFAB01;
-  --color-brand-background2: #795102;
-  --color-brand-background2-hover: #AD7600;
-  --color-brand-background2-pressed: #5C3E00;
+  --color-brand-background2: #342818;
+  --color-brand-background2-hover: #4C381E;
+  --color-brand-background2-pressed: #281E03;
   --color-brand-background-inverted: #ffffff;
   --color-brand-background-inverted-hover: #FFFCF1;
   --color-brand-background-inverted-pressed: #FFEEBA;
   --color-brand-background-inverted-selected: #FFF6D7;
   --color-brand-stroke1: #FFCC33;
   --color-brand-stroke2: #5C3E00;
-  --color-brand-stroke2-hover: #BF8208;
-  --color-brand-stroke2-pressed: #966805;
+  --color-brand-stroke2-hover: #674808;
+  --color-brand-stroke2-pressed: #3E2F1D;
   --color-brand-shadow-ambient: rgba(0,0,0,0.30);
   --color-brand-shadow-key: rgba(0,0,0,0.25);
   --color-subtle-background: transparent;

diff --git a/theme/tokens/generated/css/global.css b/theme/tokens/generated/css/global.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jul 2023 09:50:56 GMT
+ * Generated on Fri, 22 Sep 2023 14:14:03 GMT
  */
 
 :root {

diff --git a/theme/tokens/generated/css/light.css b/theme/tokens/generated/css/light.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 14 Jul 2023 09:50:56 GMT
+ * Generated on Fri, 22 Sep 2023 14:14:03 GMT
  */
 
 .light {
@@ -15,13 +15,13 @@
   --color-neutral-foreground-2-pressed: #242424;
   --color-neutral-foreground-2-selected: #242424;
   --color-neutral-foreground-2-brand-hover: #EFAB01;
-  --color-neutral-foreground-2-brand-pressed: #DFA001;
+  --color-neutral-foreground-2-brand-pressed: #E0A101;
   --color-neutral-foreground-2-brand-selected: #EFAB01;
   --color-neutral-foreground-3-hover: #424242;
   --color-neutral-foreground-3-pressed: #424242;
   --color-neutral-foreground-3-selected: #424242;
   --color-neutral-foreground-3-brand-hover: #EFAB01;
-  --color-neutral-foreground-3-brand-pressed: #DFA001;
+  --color-neutral-foreground-3-brand-pressed: #E0A101;
   --color-neutral-foreground-3-brand-selected: #EFAB01;
   --color-neutral-foreground-disabled: #bdbdbd;
   --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4);
@@ -102,20 +102,20 @@
   --color-brand-foreground-link-pressed: #026690;
   --color-brand-foreground-link-selected: #028fcc;
   --color-brand-foreground1: #EFAB01;
-  --color-brand-foreground2: #DFA001;
-  --color-brand-foreground2-hover: #D69600;
-  --color-brand-foreground2-pressed: #966805;
+  --color-brand-foreground2: #E0A101;
+  --color-brand-foreground2-hover: #B07A0F;
+  --color-brand-foreground2-pressed: #3E2F1D;
   --color-brand-foreground-inverted: #FFCC33;
   --color-brand-foreground-inverted-hover: #FFD450;
   --color-brand-foreground-inverted-pressed: #FFCC33;
   --color-brand-foreground-on-light: #EFAB01;
-  --color-brand-foreground-on-light-hover: #DFA001;
-  --color-brand-foreground-on-light-pressed: #BF8208;
-  --color-brand-foreground-on-light-selected: #D69600;
+  --color-brand-foreground-on-light-hover: #E0A101;
+  --color-brand-foreground-on-light-pressed: #674808;
+  --color-brand-foreground-on-light-selected: #B07A0F;
   --color-brand-background: #ffcc33;
   --color-brand-background-hover: #FEC10C;
-  --color-brand-background-pressed: #F9BB01;
-  --color-brand-background-selected: #F9BB01;
+  --color-brand-background-pressed: #B07A0F;
+  --color-brand-background-selected: #B07A0F;
   --color-brand-background-static: #EFAB01;
   --color-brand-background2: #FFFCF1;
   --color-brand-background2-hover: #FFF6D7;
@@ -151,14 +151,14 @@
   --color-stroke-focus1: #ffffff;
   --color-stroke-focus2: #000000;
   --color-compound-brand-foreground1: #EFAB01;
-  --color-compound-brand-foreground1-hover: #DFA001;
-  --color-compound-brand-foreground1-pressed: #D69600;
+  --color-compound-brand-foreground1-hover: #E0A101;
+  --color-compound-brand-foreground1-pressed: #B07A0F;
   --color-compound-brand-background: #FEC10C;
-  --color-compound-brand-background-hover: #F9BB01;
-  --color-compound-brand-background-pressed: #EFAB01;
+  --color-compound-brand-background-hover: #EFAB01;
+  --color-compound-brand-background-pressed: #E0A101;
   --color-compound-brand-stroke: #EFAB01;
-  --color-compound-brand-stroke-hover: #DFA001;
-  --color-compound-brand-stroke-pressed: #D69600;
+  --color-compound-brand-stroke-hover: #E0A101;
+  --color-compound-brand-stroke-pressed: #B07A0F;
   --color-background-overlay: rgba(0, 0, 0, 0.4);
   --color-scrollbar-overlay: rgba(0,0,0,0.2);
   --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);

diff --git a/theme/tokens/generated/json/colors.json b/theme/tokens/generated/json/colors.json
@@ -66,6 +66,9 @@
     "light.colorNeutralForeground1Static",
     "light.colorNeutralForegroundInverted"
   ],
+  "#281e03": [
+    "dark.colorBrandBackground2Pressed"
+  ],
   "#292929": [
     "dark.colorNeutralBackground1",
     "dark.colorNeutralBackground3Hover",
@@ -84,6 +87,9 @@
     "dark.colorSubtleBackgroundSelected",
     "light.colorNeutralBackgroundStatic"
   ],
+  "#342818": [
+    "dark.colorBrandBackground2"
+  ],
   "#34c9ff": [
     "dark.colorBrandForegroundLink",
     "dark.colorBrandForegroundLinkSelected"
@@ -97,6 +103,10 @@
     "dark.colorNeutralBackground1Hover",
     "dark.colorNeutralBackgroundStatic"
   ],
+  "#3e2f1d": [
+    "dark.colorBrandStroke2Pressed",
+    "light.colorBrandForeground2Pressed"
+  ],
   "#424242": [
     "dark.colorNeutralStrokeDisabled",
     "light.colorNeutralForeground2",
@@ -105,6 +115,10 @@
     "light.colorNeutralForeground3Selected",
     "light.colorNeutralForeground2Link"
   ],
+  "#4c381e": [
+    "dark.colorBrandBackgroundPressed",
+    "dark.colorBrandBackground2Hover"
+  ],
   "#4d4d4d": [
     "light.colorNeutralStrokeAccessiblePressed"
   ],
@@ -116,7 +130,6 @@
     "light.colorNeutralStrokeAccessibleHover"
   ],
   "#5c3e00": [
-    "dark.colorBrandBackground2Pressed",
     "dark.colorBrandStroke2"
   ],
   "#5c5c5c": [
@@ -129,6 +142,11 @@
   "#666666": [
     "dark.colorNeutralStroke1"
   ],
+  "#674808": [
+    "dark.colorBrandForegroundOnLightPressed",
+    "dark.colorBrandStroke2Hover",
+    "light.colorBrandForegroundOnLightPressed"
+  ],
   "#6b6b6b": [
     "dark.colorNeutralStroke1Pressed"
   ],
@@ -139,24 +157,24 @@
   "#757575": [
     "dark.colorNeutralStroke1Hover"
   ],
-  "#795102": [
-    "dark.colorBrandBackground2"
-  ],
-  "#966805": [
-    "dark.colorBrandStroke2Pressed",
-    "light.colorBrandForeground2Pressed"
-  ],
   "#999999": [
     "dark.colorNeutralForeground4"
   ],
-  "#ad7600": [
-    "dark.colorBrandBackgroundPressed",
-    "dark.colorBrandBackground2Hover"
-  ],
   "#adadad": [
     "dark.colorNeutralForeground3",
     "dark.colorNeutralStrokeAccessible"
   ],
+  "#b07a0f": [
+    "dark.colorBrandForegroundInvertedPressed",
+    "dark.colorBrandForegroundOnLightSelected",
+    "dark.colorBrandBackgroundSelected",
+    "light.colorBrandForeground2Hover",
+    "light.colorBrandForegroundOnLightSelected",
+    "light.colorBrandBackgroundPressed",
+    "light.colorBrandBackgroundSelected",
+    "light.colorCompoundBrandForeground1Pressed",
+    "light.colorCompoundBrandStrokePressed"
+  ],
   "#b3b3b3": [
     "dark.colorNeutralStrokeAccessiblePressed",
     "light.colorNeutralStroke1Pressed"
@@ -166,26 +184,12 @@
     "light.colorNeutralForegroundDisabled",
     "light.colorNeutralStroke1Selected"
   ],
-  "#bf8208": [
-    "dark.colorBrandForegroundOnLightPressed",
-    "dark.colorBrandStroke2Hover",
-    "light.colorBrandForegroundOnLightPressed"
-  ],
   "#c7c7c7": [
     "light.colorNeutralStroke1Hover"
   ],
   "#d1d1d1": [
     "light.colorNeutralStroke1"
   ],
-  "#d69600": [
-    "dark.colorBrandForegroundInvertedPressed",
-    "dark.colorBrandForegroundOnLightSelected",
-    "dark.colorBrandBackgroundSelected",
-    "light.colorBrandForeground2Hover",
-    "light.colorBrandForegroundOnLightSelected",
-    "light.colorCompoundBrandForeground1Pressed",
-    "light.colorCompoundBrandStrokePressed"
-  ],
   "#d6d6d6": [
     "dark.colorNeutralForeground2",
     "dark.colorNeutralForeground3Hover",
@@ -197,7 +201,7 @@
   "#dbdbdb": [
     "light.colorNeutralBackground2Pressed"
   ],
-  "#dfa001": [
+  "#e0a101": [
     "dark.colorBrandForegroundInvertedHover",
     "dark.colorBrandForegroundOnLightHover",
     "dark.colorBrandBackground",
@@ -206,6 +210,7 @@
     "light.colorBrandForeground2",
     "light.colorBrandForegroundOnLightHover",
     "light.colorCompoundBrandForeground1Hover",
+    "light.colorCompoundBrandBackgroundPressed",
     "light.colorCompoundBrandStrokeHover"
   ],
   "#e0e0e0": [
@@ -243,7 +248,7 @@
     "light.colorBrandStroke1",
     "light.colorBrandStroke2Pressed",
     "light.colorCompoundBrandForeground1",
-    "light.colorCompoundBrandBackgroundPressed",
+    "light.colorCompoundBrandBackgroundHover",
     "light.colorCompoundBrandStroke"
   ],
   "#f0f0f0": [
@@ -260,11 +265,6 @@
     "light.colorNeutralBackground5Hover",
     "light.colorSubtleBackgroundHover"
   ],
-  "#f9bb01": [
-    "light.colorBrandBackgroundPressed",
-    "light.colorBrandBackgroundSelected",
-    "light.colorCompoundBrandBackgroundHover"
-  ],
   "#fafafa": [
     "light.colorNeutralBackground2",
     "light.colorNeutralBackground4Hover",