@indico-data/design-system 2.60.14 → 3.0.0

package/src/styles/variables/themes/dark.scss

@@ -1,145 +1,208 @@
 :root [data-theme='dark'],
 :root {
   // Primary Color
-  --pf-primary-color: #394c6b;
-
-  --pf-primary-color-50: #bcc7da;
-  --pf-primary-color-100: #7989b5;
-  --pf-primary-color-200: #8593b3;
-  --pf-primary-color-300: #7488a4;
-  --pf-primary-color-400: #5c708c;
-  --pf-primary-color-500: #394c6b;
-  --pf-primary-color-600: #233346;
-  --pf-primary-color-700: #182432;
-  --pf-primary-color-800: #101a26;
-  --pf-primary-color-900: #141b24;
-  --pf-primary-color-950: #0c141d;
+  --pf-primary-color: #50647c;
+
+  --pf-primary-color-50: #f9fafb;
+  --pf-primary-color-100: #f3f5f7;
+  --pf-primary-color-150: #eceff3;
+  --pf-primary-color-200: #e6eaef;
+  --pf-primary-color-250: #d3dbe3;
+  --pf-primary-color-300: #c1cbd7;
+  --pf-primary-color-400: #7c92ab;
+  --pf-primary-color-450: #5f7895;
+  --pf-primary-color-500: #50647c;
+  --pf-primary-color-600: #243447;
+  --pf-primary-color-700: #192534;
+  --pf-primary-color-800: #111b28;
+  --pf-primary-color-900: #0c141d;
 
   // Secondary Color
-  --pf-secondary-color: #198bdc;
-
-  --pf-secondary-color-50: #bddffa;
-  --pf-secondary-color-100: #83c5f6;
-  --pf-secondary-color-200: #68afee;
-  --pf-secondary-color-300: #66a2d5;
-  --pf-secondary-color-400: #36a1ea;
-  --pf-secondary-color-500: #198bdc;
-  --pf-secondary-color-550: #0070f5;
-  --pf-secondary-color-600: #2f6a98;
-  --pf-secondary-color-700: #0c6ebd;
-  --pf-secondary-color-800: #0b5899;
-  --pf-secondary-color-900: #002c4e;
-  --pf-secondary-color-950: #112341;
+  --pf-secondary-color: #1474b8;
+
+  --pf-secondary-color-50: #f8fafc;
+  --pf-secondary-color-100: #f1f5f9;
+  --pf-secondary-color-150: #e8f1f7;
+  --pf-secondary-color-200: #deedf7;
+  --pf-secondary-color-250: #c6dff1;
+  --pf-secondary-color-300: #add1eb;
+  --pf-secondary-color-400: #3ea2ea;
+  --pf-secondary-color-450: #188bdc;
+  --pf-secondary-color-500: #1474b8;
+  --pf-secondary-color-600: #0f578a;
+  --pf-secondary-color-700: #1d4058;
+  --pf-secondary-color-800: #132939;
+  --pf-secondary-color-900: #0e151b;
 
   // Tertiary Color
-  --pf-tertiary-color: #40464e;
-
-  --pf-tertiary-color-50: #dae3eb;
-  --pf-tertiary-color-100: #c2d4df;
-  --pf-tertiary-color-200: #a3b2c9;
-  --pf-tertiary-color-300: #8593b3;
-  --pf-tertiary-color-400: #656f82;
-  --pf-tertiary-color-450: #4d5667;
-  --pf-tertiary-color-500: #40464e;
-  --pf-tertiary-color-600: #334154;
-  --pf-tertiary-color-700: #3b415b;
-  --pf-tertiary-color-800: #344152;
-  --pf-tertiary-color-900: #2d3444;
-  --pf-tertiary-color-950: #283243;
+  --pf-tertiary-color: #6a7798;
+
+  --pf-tertiary-color-50: #f8fafb;
+  --pf-tertiary-color-100: #f4f7f9;
+  --pf-tertiary-color-150: #ebf0f4;
+  --pf-tertiary-color-200: #dae3eb;
+  --pf-tertiary-color-250: #c3d2de;
+  --pf-tertiary-color-300: #aabbcf;
+  --pf-tertiary-color-400: #94a5c0;
+  --pf-tertiary-color-450: #8593b3;
+  --pf-tertiary-color-500: #6a7798;
+  --pf-tertiary-color-600: #58637b;
+  --pf-tertiary-color-700: #4b5364;
+  --pf-tertiary-color-800: #2c303a;
+  --pf-tertiary-color-900: #111317;
 
   // Gray Color
-  --pf-gray-color: #525252;
-
-  --pf-gray-color-50: #f6f6f6;
-  --pf-gray-color-100: #efefef;
-  --pf-gray-color-200: #dcdcdc;
-  --pf-gray-color-300: #bdbdbd;
-  --pf-gray-color-400: #989898;
-  --pf-gray-color-450: #737373;
-  --pf-gray-color-500: #525252;
-  --pf-gray-color-600: #404040;
-  --pf-gray-color-700: #262626;
-  --pf-gray-color-800: #171717;
-  --pf-gray-color-900: #0a0a0a;
-  --pf-gray-color-950: #000000; // MISSING
+  --pf-gray-color: #b2b2b2;
+
+  --pf-gray-color-50: #ffffff;
+  --pf-gray-color-100: #fafafa;
+  --pf-gray-color-150: #f5f5f5;
+  --pf-gray-color-200: #f0f0f0;
+  --pf-gray-color-250: #ebebeb;
+  --pf-gray-color-300: #e6e6e6;
+  --pf-gray-color-400: #dedede;
+  --pf-gray-color-450: #c7c7c7;
+  --pf-gray-color-500: #b2b2b2;
+  --pf-gray-color-600: #8f8f8f;
+  --pf-gray-color-700: #5e5959;
+  --pf-gray-color-800: #272525;
+  --pf-gray-color-900: #000000;
 
   //Red color
-  --pf-red-color: #ce6068;
-
-  --pf-red-color-50: #fcf5f4;
-  --pf-red-color-100: #fae9e9;
-  --pf-red-color-200: #f4d7d8;
-  --pf-red-color-300: #ebb6b8;
-  --pf-red-color-350: #f39bb9;
-  --pf-red-color-400: #ef76a0;
-  --pf-red-color-450: #df8d91;
-  --pf-red-color-500: #ce6068;
-  --pf-red-color-600: #b94553;
-  --pf-red-color-700: #9b3544;
-  --pf-red-color-800: #822f3e;
-  --pf-red-color-850: #702b39;
-  --pf-red-color-900: #510e2b;
-  --pf-red-color-950: #3e131b;
+  --pf-red-color: #a3292d;
+
+  --pf-red-color-50: #fdf6f8;
+  --pf-red-color-100: #fceeee;
+  --pf-red-color-150: #fae5e6;
+  --pf-red-color-200: #f9dcdd;
+  --pf-red-color-250: #f6acaf;
+  --pf-red-color-300: #f28c90;
+  --pf-red-color-400: #ea3e44;
+  --pf-red-color-450: #d0252a;
+  --pf-red-color-500: #a3292d;
+  --pf-red-color-600: #732629;
+  --pf-red-color-700: #522325;
+  --pf-red-color-800: #321b1c;
+  --pf-red-color-900: #181011;
+
+  //Pink color
+  --pf-pink-color: #a3292d;
+
+  --pf-pink-color-50: #fbf8f9;
+  --pf-pink-color-100: #f8f2f4;
+  --pf-pink-color-150: #f4ebee;
+  --pf-pink-color-200: #f1e4e9;
+  --pf-pink-color-250: #eacdd7;
+  --pf-pink-color-300: #ebadc3;
+  --pf-pink-color-400: #e6417b;
+  --pf-pink-color-450: #c3285e;
+  --pf-pink-color-500: #a32954;
+  --pf-pink-color-600: #6b2e43;
+  --pf-pink-color-700: #4c2935;
+  --pf-pink-color-800: #321b23;
+  --pf-pink-color-900: #1b0e13;
 
   //Orange color
-  --pf-orange-color: #f46325;
-
-  --pf-orange-color-50: #fff5ed;
-  --pf-orange-color-100: #fee9d6;
-  --pf-orange-color-200: #fcceac;
-  --pf-orange-color-300: #faac77;
-  --pf-orange-color-400: #f67e41;
-  --pf-orange-color-500: #f46325;
-  --pf-orange-color-600: #e54311;
-  --pf-orange-color-700: #be3010;
-  --pf-orange-color-800: #972815;
-  --pf-orange-color-900: #792315;
-  --pf-orange-color-950: #420f08;
+  --pf-orange-color: #994b33;
+
+  --pf-orange-color-50: #fcf9f7;
+  --pf-orange-color-100: #faf2f0;
+  --pf-orange-color-150: #f7ece8;
+  --pf-orange-color-200: #f7e4de;
+  --pf-orange-color-250: #f4cec2;
+  --pf-orange-color-300: #f5b6a3;
+  --pf-orange-color-400: #ea673e;
+  --pf-orange-color-450: #c45331;
+  --pf-orange-color-500: #994b33;
+  --pf-orange-color-600: #6b3c2e;
+  --pf-orange-color-700: #522e23;
+  --pf-orange-color-800: #32201b;
+  --pf-orange-color-900: #1b110e;
 
   //Yellow color
-  --pf-yellow-color: #f29c22;
-
-  --pf-yellow-color-50: #fbf7eb;
-  --pf-yellow-color-100: #f5edcc;
-  --pf-yellow-color-200: #ecd99c;
-  --pf-yellow-color-300: #deb650;
-  --pf-yellow-color-400: #d7a438;
-  --pf-yellow-color-500: #f29c22;
-  --pf-yellow-color-600: #c88e2a;
-  --pf-yellow-color-700: #ac6e22;
-  --pf-yellow-color-800: #80670c;
-  --pf-yellow-color-900: #463703;
-  --pf-yellow-color-950: #312602;
+  --pf-yellow-color: #ad791f;
+
+  --pf-yellow-color-50: #fdfbf7;
+  --pf-yellow-color-100: #fcf7ee;
+  --pf-yellow-color-150: #faf3e5;
+  --pf-yellow-color-200: #f9eedc;
+  --pf-yellow-color-250: #f4e2c2;
+  --pf-yellow-color-300: #f0d6a8;
+  --pf-yellow-color-400: #eaab3e;
+  --pf-yellow-color-450: #dc9518;
+  --pf-yellow-color-500: #ad791f;
+  --pf-yellow-color-600: #825b17;
+  --pf-yellow-color-700: #58421d;
+  --pf-yellow-color-800: #32291b;
+  --pf-yellow-color-900: #1b160e;
 
   //Green Color
-  --pf-green-color: #15b77d;
-
-  --pf-green-color-50: #a9f1ce;
-  --pf-green-color-100: #71e4b3;
-  --pf-green-color-200: #14b8a6;
-  --pf-green-color-300: #03aaaa;
-  --pf-green-color-400: #38cf94;
-  --pf-green-color-500: #15b77d;
-  --pf-green-color-600: #099263;
-  --pf-green-color-700: #087950;
-  --pf-green-color-800: #085d43;
-  --pf-green-color-900: #084c38;
-  --pf-green-color-950: #032b20;
+  --pf-green-color: #14b869;
+
+  --pf-green-color-50: #f7fdfa;
+  --pf-green-color-100: #effbf5;
+  --pf-green-color-150: #e7f9f0;
+  --pf-green-color-200: #def7eb;
+  --pf-green-color-250: #c2f4dc;
+  --pf-green-color-300: #a8f0cd;
+  --pf-green-color-400: #3eea97;
+  --pf-green-color-450: #18dc7e;
+  --pf-green-color-500: #14b869;
+  --pf-green-color-600: #17824e;
+  --pf-green-color-700: #175e3c;
+  --pf-green-color-800: #173627;
+  --pf-green-color-900: #0e1b15;
+
+  // teal Color
+  --pf-teal-color: #29a3a3;
+
+  --pf-teal-color-50: #f6fdfd;
+  --pf-teal-color-100: #eefcfc;
+  --pf-teal-color-150: #e5fafa;
+  --pf-teal-color-200: #dcf9f9;
+  --pf-teal-color-250: #bff8f8;
+  --pf-teal-color-300: #a3f5f5;
+  --pf-teal-color-400: #3eeaea;
+  --pf-teal-color-450: #25d0d0;
+  --pf-teal-color-500: #29a3a3;
+  --pf-teal-color-600: #267373;
+  --pf-teal-color-700: #235252;
+  --pf-teal-color-800: #1b3232;
+  --pf-teal-color-900: #101818;
+
+  // Brand Color
+  --pf-brand-color: #2960a3;
+
+  --pf-brand-color-50: #f6fafd;
+  --pf-brand-color-100: #eef4fc;
+  --pf-brand-color-150: #dce9f9;
+  --pf-brand-color-200: #eef4fc;
+  --pf-brand-color-250: #accdf6;
+  --pf-brand-color-300: #8cbaf2;
+  --pf-brand-color-400: #3e8bea;
+  --pf-brand-color-450: #0070f5;
+  --pf-brand-color-500: #2960a3;
+  --pf-brand-color-600: #264973;
+  --pf-brand-color-700: #233852;
+  --pf-brand-color-800: #1b2532;
+  --pf-brand-color-900: #101418;
 
   // Purple Color
-  --pf-purple-color: #9776d3;
-
-  --pf-purple-color-50: #f7f6fc;
-  --pf-purple-color-100: #f1edfa;
-  --pf-purple-color-200: #e4dff5;
-  --pf-purple-color-300: #cfc4ee;
-  --pf-purple-color-400: #b6a3e2;
-  --pf-purple-color-500: #9776d3;
-  --pf-purple-color-600: #8b60c7;
-  --pf-purple-color-700: #7a4eb3;
-  --pf-purple-color-800: #664196;
-  --pf-purple-color-900: #55377b;
-  --pf-purple-color-950: #291a40;
+  --pf-purple-color: #5c29a3;
+
+  --pf-purple-color-50: #f9f6fc;
+  --pf-purple-color-100: #f4f0fa;
+  --pf-purple-color-150: #eee8f7;
+  --pf-purple-color-200: #e9def7;
+  --pf-purple-color-250: #d8c6f1;
+  --pf-purple-color-300: #c7adeb;
+  --pf-purple-color-400: #8849df;
+  --pf-purple-color-450: #6e31c4;
+  --pf-purple-color-500: #5c29a3;
+  --pf-purple-color-600: #451f7a;
+  --pf-purple-color-700: #361d58;
+  --pf-purple-color-800: #241736;
+  --pf-purple-color-900: #130e1b;
 
   // White color
   --pf-white-color: #ffffff;
@@ -176,14 +239,11 @@
   --pf-black-color-100: rgba(0, 0, 0, 1);
 
   // Utility Colors
-  --pf-error-color: var(--pf-red-color);
-  --pf-success-color: var(--pf-green-color);
-  --pf-warning-color: var(--pf-yellow-color-300);
-  --pf-neutral-color: var(--pf-gray-color-100);
-  --pf-info-color: var(--pf-secondary-color-200);
-  --pf-brand-color: var(--pf-secondary-color-550);
-  --pf-pending-color: var(--pf-red-color-900);
-
-  --pf-link-color: var(--pf-gray-color-300);
-  --pf-link-hover-color: var(--pf-gray-color-100);
+  --pf-error-color: var(--pf-red-color-450);
+  --pf-success-color: var(--pf-green-color-500);
+  --pf-warning-color: var(--pf-yellow-color-400);
+  --pf-neutral-color: var(--pf-gray-color-500);
+  --pf-info-color: var(--pf-secondary-color-450);
+  --pf-brand-color: var(--pf-brand-color-450);
+  --pf-pending-color: var(--pf-orange-color-400);
 }