@indico-data/design-system 2.43.0 → 2.44.0

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

@@ -1,102 +1,166 @@
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   // Primary Color
-  --pf-primary-color: #262c3a;
-
-  --pf-primary-color-100: #8194c0;
-  --pf-primary-color-200: #5b6b8f;
-  --pf-primary-color-300: #3b455e;
-  --pf-primary-color-400: #323a4d;
-  --pf-primary-color-500: #262c3a;
-  --pf-primary-color-600: #182432;
-  --pf-primary-color-700: #101a26;
-  --pf-primary-color-800: #1b202c;
+  --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-1000: #271153;
+  --pf-primary-color-950: #0c141d;
 
   // Secondary Color
-  --pf-secondary-color: #0070f5;
-
-  --pf-secondary-color-100: #dceafd;
-  --pf-secondary-color-200: #b3d4fc;
-  --pf-secondary-color-300: #7ab5fa;
-  --pf-secondary-color-400: #4797f5;
-  --pf-secondary-color-500: #2482f5;
-  --pf-secondary-color-600: #2070d1;
-  --pf-secondary-color-700: #178ee0;
-  --pf-secondary-color-800: #3d5a7d;
-  --pf-secondary-color-900: #0b2647;
+  --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;
+
+  // 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;
 
   // Gray Color
-  --pf-gray-color: #bfc1c3;
+  --pf-gray-color: #525252;
 
+  --pf-gray-color-50: #f6f6f6;
   --pf-gray-color-100: #efefef;
-  --pf-gray-color-200: #eaeaea;
-  --pf-gray-color-300: #dcdcdc;
-  --pf-gray-color-400: #d2d2d2;
-  --pf-gray-color-500: #bfc1c3;
-  --pf-gray-color-600: #a0a0a0;
-  --pf-gray-color-700: #828588;
-  --pf-gray-color-800: #797979;
-  --pf-gray-color-900: #585858;
-
-  // Steel Color
-  --pf-steel-color: #3e4751;
-
-  --pf-steel-color-100: #9aa1b1;
-  --pf-steel-color-200: #7c8594;
-  --pf-steel-color-300: #6a717e;
-  --pf-steel-color-400: #545c67;
-  --pf-steel-color-500: #3e4751;
-  --pf-steel-color-600: #2d3444;
-  --pf-steel-color-700: #232a3a;
-  --pf-steel-color-800: #1a202f;
-  --pf-steel-color-900: #11161f;
+  --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;
 
-  //Green Color
-  --pf-green-color: #199d19;
-
-  --pf-green-color-100: #98ff98;
-  --pf-green-color-200: #76ff76;
-  --pf-green-color-300: #63eb63;
-  --pf-green-color-400: #41ca41;
-  --pf-green-color-500: #199d19;
-  --pf-green-color-600: #168116;
-  --pf-green-color-700: #106710;
-  --pf-green-color-800: #0d5a0d;
-  --pf-green-color-900: #003c00;
+  //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-400: #df8d91;
+  --pf-red-color-500: #ce6068;
+  --pf-red-color-600: #b94553;
+  --pf-red-color-700: #9b3544;
+  --pf-red-color-800: #822f3e;
+  --pf-red-color-900: #702b39;
+  --pf-red-color-950: #3e131b;
 
   //Orange color
-  --pf-orange-color: #da9534;
-
-  --pf-orange-color-100: #ffd599;
-  --pf-orange-color-200: #ffc676;
-  --pf-orange-color-300: #f7b75b;
-  --pf-orange-color-400: #f1ab48;
-  --pf-orange-color-500: #da9534;
-  --pf-orange-color-600: #c7892f;
-  --pf-orange-color-700: #a87428;
-  --pf-orange-color-800: #825b22;
-  --pf-orange-color-900: #68481a;
+  --pf-orange-color: #f46325;
 
-  //Red color
-  --pf-red-color: #f44d4f;
-
-  --pf-red-color-100: #ffa9aa;
-  --pf-red-color-200: #ff8a8b;
-  --pf-red-color-300: #ff7577;
-  --pf-red-color-400: #ff6466;
-  --pf-red-color-500: #f44d4f;
-  --pf-red-color-600: #ba5759;
-  --pf-red-color-700: #b4393a;
-  --pf-red-color-800: #7b2728;
-  --pf-red-color-900: #4d1717;
+  --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;
+
+  //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;
+
+  //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;
+
+  // 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: #352253;
+
+  // White color
+  --pf-white-color: #ffffff;
+  --pf-white-color-1: rgba(255, 255, 255, 0.01);
+  --pf-white-color-3: rgba(255, 255, 255, 0.03);
+  --pf-white-color-5: rgba(255, 255, 255, 0.05);
+  --pf-white-color-10: rgba(255, 255, 255, 0.1);
+  --pf-white-color-15: rgba(255, 255, 255, 0.15);
+  --pf-white-color-20: rgba(255, 255, 255, 0.2);
+  --pf-white-color-30: rgba(255, 255, 255, 0.3);
+  --pf-white-color-40: rgba(255, 255, 255, 0.4);
+  --pf-white-color-50: rgba(255, 255, 255, 0.5);
+  --pf-white-color-60: rgba(255, 255, 255, 0.6);
+  --pf-white-color-70: rgba(255, 255, 255, 0.7);
+  --pf-white-color-80: rgba(255, 255, 255, 0.8);
+  --pf-white-color-90: rgba(255, 255, 255, 0.9);
+  --pf-white-color-100: rgba(255, 255, 255, 1);
 
   // Utility Colors
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);
-  --pf-warning-color: var(--pf-orange-color);
-  --pf-neutral-color: var(--pf-gray-color);
-  --pf-info-color: var(--pf-secondary-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-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);

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

@@ -1,5 +1,4 @@
-:root [data-theme='light'],
-:root {
+:root [data-theme='light'] {
   // Primary Color
   --pf-primary-color: #6833d0;
 

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -1,28 +1,24 @@
 import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
-import {
-  colorList,
-  darkThemeColors,
-  lightThemeColors,
-  shades,
-  utilityColorList,
-} from './constants';
+import { colorList, darkThemeColors, lightThemeColors, utilityColorList } from './constants';
 import { Swatch } from './Swatch';
 import { useTheme } from './hooks';
 
 export const Colors = () => {
   const theme = useTheme();
-
   const themeColors = theme === 'dark' ? darkThemeColors : lightThemeColors;
 
   return (
     <Container>
       <Row>
         {colorList.map((color) => {
+          const colorShades = Object.keys(themeColors[color])
+            .map(Number)
+            .sort((a, b) => a - b);
           return (
             <Col sm={6} key={color}>
               <h1 className="text-capitalize my-5">{color}</h1>
-              {Array.from({ length: shades }, (_, i) => (i + 1) * 100).map((shade) => {
+              {colorShades.map((shade) => {
                 const colorValue = themeColors[color][shade];
                 return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
               })}

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -41,34 +41,34 @@ export const UtilityClasses = () => {
           <h1 className="mb-5">Text</h1>
           <ul>
             <li>
-              <span className="color-primary">color-primary</span>
+              <span className="color-secondary">color-secondary</span>
             </li>
             <li>
-              <span className="color-primary-100">color-primary-100</span>
+              <span className="color-secondary-100">color-secondary-100</span>
             </li>
             <li>
-              <span className="color-primary-200">color-primary-200</span>
+              <span className="color-secondary-200">color-secondary-200</span>
             </li>
             <li>
-              <span className="color-primary-300">color-primary-300</span>
+              <span className="color-secondary-300">color-secondary-300</span>
             </li>
             <li>
-              <span className="color-primary-400">color-primary-400</span>
+              <span className="color-secondary-400">color-secondary-400</span>
             </li>
             <li>
-              <span className="color-primary-500">color-primary-500</span>
+              <span className="color-secondary-500">color-secondary-500</span>
             </li>
             <li>
-              <span className="color-primary-600">color-primary-600</span>
+              <span className="color-secondary-600">color-secondary-600</span>
             </li>
             <li>
-              <span className="color-primary-700">color-primary-700</span>
+              <span className="color-secondary-700">color-secondary-700</span>
             </li>
             <li>
-              <span className="color-primary-800">color-primary-800</span>
+              <span className="color-secondary-800">color-secondary-800</span>
             </li>
             <li>
-              <span className="color-primary-900">color-primary-900</span>
+              <span className="color-secondary-900">color-secondary-900</span>
             </li>
           </ul>
         </Col>
@@ -89,19 +89,25 @@ export const UtilityClasses = () => {
               <span className="color-secondary">secondary</span>
             </li>
             <li>
-              <span className="color-gray">gray</span>
+              <span className="color-tertiary">tertiary</span>
             </li>
             <li>
-              <span className="color-steel">steel</span>
+              <span className="color-gray">gray</span>
             </li>
             <li>
-              <span className="color-green">green</span>
+              <span className="color-red">red</span>
             </li>
             <li>
               <span className="color-orange">orange</span>
             </li>
             <li>
-              <span className="color-red">red</span>
+              <span className="color-yellow">yellow</span>
+            </li>
+            <li>
+              <span className="color-green">green</span>
+            </li>
+            <li>
+              <span className="color-purple">purple</span>
             </li>
           </ul>
         </Col>
@@ -123,6 +129,9 @@ export const UtilityClasses = () => {
             <li>
               <span className="color-error">error</span>
             </li>
+            <li>
+              <span className="color-brand">brand</span>
+            </li>
             <li>
               <span className="active-link-color">active-link-color</span>
             </li>