@indico-data/design-system 2.60.14 → 3.0.0

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

@@ -1,144 +1,207 @@
 :root [data-theme='light'] {
   // Primary Color
-  --pf-primary-color: #b4cadf;
-
-  --pf-primary-color-50: #5b8ab7;
-  --pf-primary-color-100: #6d96c3;
-  --pf-primary-color-200: #7b9fc5;
-  --pf-primary-color-300: #90adc8;
-  --pf-primary-color-400: #a3bdd4;
-  --pf-primary-color-500: #b4cadf;
-  --pf-primary-color-600: #c4d8eb;
-  --pf-primary-color-700: #d2e1f0;
-  --pf-primary-color-800: #dfeaf3;
-  --pf-primary-color-900: #eef4fa;
-  --pf-primary-color-950: #f6f9fc;
+  --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: #3892f3;
-
-  --pf-secondary-color-50: #002b66;
-  --pf-secondary-color-100: #003b8c;
-  --pf-secondary-color-200: #004cb0;
-  --pf-secondary-color-300: #0060d6;
-  --pf-secondary-color-400: #0070f5;
-  --pf-secondary-color-500: #3892f3;
-  --pf-secondary-color-550: #66adff;
-  --pf-secondary-color-600: #91c5ff;
-  --pf-secondary-color-700: #b8dbff;
-  --pf-secondary-color-800: #d4eaff;
-  --pf-secondary-color-900: #e0f2ff;
-  --pf-secondary-color-950: #eaf4ff;
+  --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: #8394a9;
-
-  --pf-tertiary-color-50: #142838;
-  --pf-tertiary-color-100: #203148;
-  --pf-tertiary-color-200: #2e4563;
-  --pf-tertiary-color-300: #3e587a;
-  --pf-tertiary-color-400: #55677f;
-  --pf-tertiary-color-450: #6d8097;
-  --pf-tertiary-color-500: #8394a9;
-  --pf-tertiary-color-600: #93a3bb;
-  --pf-tertiary-color-700: #a5b4c6;
-  --pf-tertiary-color-800: #b2bfd0;
-  --pf-tertiary-color-900: #c4ccd7;
-  --pf-tertiary-color-950: #d6dde5;
+  --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: #0a0a0a;
-  --pf-gray-color-100: #171717;
-  --pf-gray-color-200: #262626;
-  --pf-gray-color-300: #404040;
-  --pf-gray-color-400: #525252;
-  --pf-gray-color-450: #737373; // MISSING
-  --pf-gray-color-500: #737373;
-  --pf-gray-color-600: #989898;
-  --pf-gray-color-700: #bdbdbd;
-  --pf-gray-color-800: #dcdcdc;
-  --pf-gray-color-900: #efefef;
-  --pf-gray-color-950: #f6f6f6;
+  --pf-gray-color: #b2b2b2;
+
+  --pf-gray-color-50: #ffffff;
+  --pf-gray-color-100: #f8f8f8;
+  --pf-gray-color-150: #f2f2f2;
+  --pf-gray-color-200: #e6e6e6;
+  --pf-gray-color-250: #d9d9d9;
+  --pf-gray-color-300: #cccccc;
+  --pf-gray-color-400: #b2b2b2;
+  --pf-gray-color-450: #999999;
+  --pf-gray-color-500: #7f7f7f;
+  --pf-gray-color-600: #666666;
+  --pf-gray-color-700: #4d4d4d;
+  --pf-gray-color-800: #333333;
+  --pf-gray-color-900: #000000;
 
   //Red color
-  --pf-red-color: #f4a5ae;
-
-  --pf-red-color-50: #5b0d16;
-  --pf-red-color-100: #761821;
-  --pf-red-color-200: #8f252f;
-  --pf-red-color-300: #ad303d;
-  --pf-red-color-350: #b8424c;
-  --pf-red-color-400: #c84a57;
-  --pf-red-color-450: #dc5a66;
-  --pf-red-color-500: #f4a5ae;
-  --pf-red-color-600: #ebb6b8;
-  --pf-red-color-700: #f9d5dc;
-  --pf-red-color-800: #f4d7d8;
-  --pf-red-color-850: #fae9e9;
-  --pf-red-color-900: #fcebeb;
-  --pf-red-color-950: #fcf5f4;
+  --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: #ff873f;
-
-  --pf-orange-color-50: #721e01;
-  --pf-orange-color-100: #992702;
-  --pf-orange-color-200: #b33403;
-  --pf-orange-color-300: #d94b04;
-  --pf-orange-color-400: #f25c05;
-  --pf-orange-color-500: #ff873f;
-  --pf-orange-color-600: #ffa26d;
-  --pf-orange-color-700: #ffc9aa;
-  --pf-orange-color-800: #ffe3d1;
-  --pf-orange-color-900: #fff3ec;
-  --pf-orange-color-950: #fffaf7;
+  --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: #ffa400;
-
-  --pf-yellow-color-50: #312602;
-  --pf-yellow-color-100: #664200;
-  --pf-yellow-color-200: #895c00;
-  --pf-yellow-color-300: #b37300;
-  --pf-yellow-color-400: #e08e00;
-  --pf-yellow-color-500: #ffa400;
-  --pf-yellow-color-600: #ffb621;
-  --pf-yellow-color-700: #ffc344;
-  --pf-yellow-color-800: #ffd369;
-  --pf-yellow-color-900: #ffeaa1;
-  --pf-yellow-color-950: #fff4d0;
+  --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: #39c29d;
-
-  --pf-green-color-50: #003325;
-  --pf-green-color-100: #075f48;
-  --pf-green-color-200: #0a906c;
-  --pf-green-color-300: #03aaaa;
-  --pf-green-color-400: #26b890;
-  --pf-green-color-500: #39c29d;
-  --pf-green-color-600: #52ccae;
-  --pf-green-color-700: #6cd6ba;
-  --pf-green-color-800: #83e2c7;
-  --pf-green-color-900: #c1f1e2;
-  --pf-green-color-950: #83e2c7;
+  --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: #291a40;
-  --pf-purple-color-100: #55377b;
-  --pf-purple-color-200: #664196;
-  --pf-purple-color-300: #7a4eb3;
-  --pf-purple-color-400: #8b60c7;
-  --pf-purple-color-500: #9776d3;
-  --pf-purple-color-600: #b6a3e2;
-  --pf-purple-color-700: #cfc4ee;
-  --pf-purple-color-800: #e4dff5;
-  --pf-purple-color-900: #f1edfa;
-  --pf-purple-color-950: #f7f6fc;
+  --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;
@@ -175,14 +238,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);
 }

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -4,47 +4,94 @@ import './borders.scss';
 
 export const BorderColor = () => {
   return (
-    <div className="sb__border-story">
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg"></div>
-        <p className="text-align--center">border</p>
+    <>
+      <h2>Border Utility Colors</h2>
+      <div className="sb__border-story">
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg"></div>
+          <p className="text-align--center">border</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-primary"></div>
+          <p className="text-align--center">border-primary</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-secondary"></div>
+          <p className="text-align--center">border-secondary</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-soft-accent"></div>
+          <p className="text-align--center">border-soft-accent</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-error"></div>
+          <p className="text-align--center">border-error</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-warning"></div>
+          <p className="text-align--center">border-warning</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-info"></div>
+          <p className="text-align--center">border-info</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-success"></div>
+          <p className="text-align--center">border-success</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-neutral"></div>
+          <p className="text-align--center">border-neutral</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-pending"></div>
+          <p className="text-align--center">border-pending</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-brand"></div>
+          <p className="text-align--center">border-brand</p>
+        </div>
       </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-primary"></div>
-        <p className="text-align--center">border-primary</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-secondary"></div>
-        <p className="text-align--center">border-secondary</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-tertiary"></div>
-        <p className="text-align--center">border-tertiary</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-gray"></div>
-        <p className="text-align--center">border-gray</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-red"></div>
-        <p className="text-align--center">border-red</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-orange"></div>
-        <p className="text-align--center">border-orange</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-yellow"></div>
-        <p className="text-align--center">border-yellow</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-green"></div>
-        <p className="text-align--center">border-green</p>
-      </div>
-      <div>
-        <div className="sb__square bg-gray-800 border border-lg border-purple"></div>
-        <p className="text-align--center">border-purple</p>
+      <h2 className="mt-4">Border Color</h2>
+      <div className="sb__border-story">
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-tertiary"></div>
+          <p className="text-align--center">border-tertiary</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-gray"></div>
+          <p className="text-align--center">border-gray</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-red"></div>
+          <p className="text-align--center">border-red</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-pink"></div>
+          <p className="text-align--center">border-pink</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-orange"></div>
+          <p className="text-align--center">border-orange</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-yellow"></div>
+          <p className="text-align--center">border-yellow</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-green"></div>
+          <p className="text-align--center">border-green</p>
+        </div>
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-teal"></div>
+          <p className="text-align--center">border-teal</p>
+        </div>
+
+        <div>
+          <div className="sb__square bg-gray-800 border border-lg border-purple"></div>
+          <p className="text-align--center">border-purple</p>
+        </div>
       </div>
-    </div>
+    </>
   );
 };

package/src/stylesAndAnimations/colors/Swatch.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import './swatches.scss';
 import { Row, Col } from 'react-grid-system';
 import { Icon } from '../../components';