- Use new blue colors. (#584)

packages/theme/src/index.ts

@@ -1,6 +1,7 @@
 import "./styles/base.css";
 import "./styles/default-colors.css";
 import "./styles/default-theme.css";
+import "./styles/brand-colors.css";
 
 export * from "./util/CssColor";
 export * from "./types/ThemeColor";

packages/theme/src/styles/brand-colors.css

@@ -0,0 +1,29 @@
+:root {
+  --core-blue: #004a93;
+  --modern-red: rgb(234, 20, 61);
+  --snackskal: rgb(247, 215, 209);
+  --sjobod: rgb(176, 15, 46);
+  --tang: rgb(117, 20, 34);
+  --modern-blue: rgb(35, 120, 205);
+  --himmel: #b4d4f9;
+  --himmel-light: #cae2fb;
+  --himmel-lighter: #e1edfd;
+  --hav: rgb(26, 90, 154);
+  --mussla: rgb(18, 61, 102);
+  --sand: rgb(250, 246, 235);
+  --modern-green: rgb(116, 179, 70);
+  --moln: rgb(255, 255, 255);
+  --tjara: rgb(51, 51, 51);
+  --sand-dark-10: rgba(155, 147, 123, 0.1);
+  --sand-dark-20: rgba(155, 147, 123, 0.2);
+  --sand-dark: rgba(155, 147, 123);
+  --hav-30: rgba(26, 90, 154, 0.3);
+  --molnigare: rgb(250, 250, 248);
+  --silver: #949494;
+  --silver-light: #c9c9c9;
+  --silver-lighter: #f4f4f4;
+  --silver-dark: #6b6b6b;
+  --efp-premium: #e7ae2f;
+  --efp-flexi: var(--hav);
+  --efp-economy: var(--sjobod);
+}

packages/theme/src/styles/default-colors.css

@@ -1,65 +1,65 @@
 :root {
   /* Colors */
-  --lhds-color-blue-100: #e1eefa;
-  --lhds-color-blue-200: #afd0f1;
+  --lhds-color-blue-50: var(--himmel-lighter);
+  --lhds-color-blue-100: var(--himmel-light);
+  --lhds-color-blue-200: var(--himmel);
   --lhds-color-blue-300: #6ca9e6;
   --lhds-color-blue-400: #3a8cdd;
-  --lhds-color-blue-50: #f2f8fd;
-  --lhds-color-blue-500: #2378cd;
-  --lhds-color-blue-600: #1a5a9a;
+  --lhds-color-blue-500: var(--modern-blue);
+  --lhds-color-blue-600: var(--core-blue);
   --lhds-color-blue-700: #18518a;
-  --lhds-color-blue-800: #143e62;
+  --lhds-color-blue-800: var(--mussla);
   --lhds-color-blue-900: #0f304d;
 
+  --lhds-color-green-50: #f4fbf0;
   --lhds-color-green-100: #d1efc1;
   --lhds-color-green-200: #aee492;
   --lhds-color-green-300: #8ad861;
   --lhds-color-green-400: #6cce38;
-  --lhds-color-green-50: #f4fbf0;
   --lhds-color-green-500: #60bd2f;
   --lhds-color-green-600: #509e27;
   --lhds-color-green-700: #407e1f;
   --lhds-color-green-800: #305f18;
   --lhds-color-green-900: #284f14;
 
+  --lhds-color-orange-50: #fff8eb;
   --lhds-color-orange-100: #ffeac4;
   --lhds-color-orange-200: #ffd589;
   --lhds-color-orange-300: #ffc04e;
   --lhds-color-orange-400: #ffb633;
-  --lhds-color-orange-50: #fff8eb;
   --lhds-color-orange-500: #ffa400;
   --lhds-color-orange-600: #eb9700;
   --lhds-color-orange-700: #d88b00;
   --lhds-color-orange-800: #b17200;
   --lhds-color-orange-900: #895800;
 
+  --lhds-color-red-50: #fff1f4;
   --lhds-color-red-100: #ffdde4;
   --lhds-color-red-200: #ff899f;
   --lhds-color-red-300: #ff4e70;
   --lhds-color-red-400: #f1002e;
-  --lhds-color-red-50: #fff1f4;
   --lhds-color-red-500: #d70029;
   --lhds-color-red-600: #b00022;
   --lhds-color-red-700: #8a0019;
   --lhds-color-red-800: #710015;
   --lhds-color-red-900: #570010;
 
+  --lhds-color-turquoise-50: #eafbf9;
   --lhds-color-turquoise-100: #daf8f4;
   --lhds-color-turquoise-200: #b9f2e9;
   --lhds-color-turquoise-300: #87e8da;
   --lhds-color-turquoise-400: #46dcc6;
-  --lhds-color-turquoise-50: #eafbf9;
   --lhds-color-turquoise-500: #28d2b9;
   --lhds-color-turquoise-600: #24bda6;
   --lhds-color-turquoise-700: #1c9280;
   --lhds-color-turquoise-800: #156f62;
   --lhds-color-turquoise-900: #125f53;
 
+  --lhds-color-ui-50: #ffffff;
   --lhds-color-ui-100: #fafafb;
   --lhds-color-ui-200: #efeff2;
   --lhds-color-ui-300: #e4e5e9;
   --lhds-color-ui-400: #ced0d7;
-  --lhds-color-ui-50: #ffffff;
   --lhds-color-ui-500: #989cab;
   --lhds-color-ui-600: #5c6171;
   --lhds-color-ui-700: #424551;

packages/theme/src/styles/default-theme.css

@@ -2,12 +2,12 @@
   /* Generic colors */
   --swui-white: #fff;
   --swui-hidden: rgba(0, 0, 0, 0);
-  --swui-primary-action-color: var(--lhds-color-blue-500);
-  --swui-primary-action-color-hover: var(--lhds-color-blue-600);
+  --swui-primary-action-color: var(--core-blue);
+  --swui-primary-action-color-hover: var(--mussla);
   --swui-primary-action-color-hover-light: var(--lhds-color-blue-100);
-  --swui-primary-action-color-focus: var(--lhds-color-blue-700);
+  --swui-primary-action-color-focus: var(--modern-blue);
   --swui-primary-action-color-focus-light: var(--lhds-color-blue-100);
-  --swui-primary-action-color-active: var(--lhds-color-blue-800);
+  --swui-primary-action-color-active: var(--lhds-color-blue-900);
   --swui-primary-action-color-disabled: var(--lhds-color-ui-300);
   --swui-separator-color: var(--lhds-color-ui-300);
   --swui-handle-bg-enabled-color: var(--swui-white);