@indico-data/design-system 3.2.1 → 3.4.0

package/src/styles/variables/_colors.scss

@@ -1,21 +1,20 @@
 :root {
   /** BASE COLORS **/
-
-  --pf-blue-color: #1474b8;
-  --pf-blue-color-50: #f8fafc;
-  --pf-blue-color-100: #f1f5f9;
-  --pf-blue-color-150: #e8f1f7;
-  --pf-blue-color-200: #deedf7;
-  --pf-blue-color-250: #c6dff1;
-  --pf-blue-color-300: #add1eb;
-  --pf-blue-color-400: #3ea2ea;
-  --pf-blue-color-450: #188bdc;
-  --pf-blue-color-500: #1474b8;
-  --pf-blue-color-550: #1268a5;
-  --pf-blue-color-600: #0f578a;
-  --pf-blue-color-700: #1d4058;
-  --pf-blue-color-800: #132939;
-  --pf-blue-color-900: #0e151b;
+  --pf-blue-color: #2989ff;
+  --pf-blue-color-50: #f6fafd;
+  --pf-blue-color-100: #eef4fc;
+  --pf-blue-color-150: #e5effa;
+  --pf-blue-color-200: #d8e9fd;
+  --pf-blue-color-250: #bbd8fb;
+  --pf-blue-color-300: #9ec7fa;
+  --pf-blue-color-400: #2989ff;
+  --pf-blue-color-450: #0070f5;
+  --pf-blue-color-500: #005ccc;
+  --pf-blue-color-550: #0054b8;
+  --pf-blue-color-600: #004599;
+  --pf-blue-color-700: #06356f;
+  --pf-blue-color-800: #082345;
+  --pf-blue-color-900: #061323;
 
   --pf-gray-color: #808080;
   --pf-gray-color-50: #ffffff;
@@ -65,36 +64,36 @@
   --pf-pink-color-800: #321b23;
   --pf-pink-color-900: #1b0e13;
 
-  --pf-orange-color: #994b33;
-  --pf-orange-color-50: #fcf9f7;
+  --pf-orange-color: #994733;
+  --pf-orange-color-50: #fffbfa;
   --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-150: #f7ebe8;
+  --pf-orange-color-200: #f7e3de;
+  --pf-orange-color-250: #f4ccc2;
+  --pf-orange-color-300: #f5b4a3;
+  --pf-orange-color-400: #ea603e;
+  --pf-orange-color-450: #c44e31;
+  --pf-orange-color-500: #994733;
   --pf-orange-color-550: #863f2a;
-  --pf-orange-color-600: #6b3c2e;
-  --pf-orange-color-700: #522e23;
-  --pf-orange-color-800: #32201b;
+  --pf-orange-color-600: #6b3a2e;
+  --pf-orange-color-700: #522d23;
+  --pf-orange-color-800: #321f1b;
   --pf-orange-color-900: #1b110e;
 
-  --pf-yellow-color: #ad791f;
+  --pf-yellow-color: #ad871f;
   --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-100: #fcf8ee;
+  --pf-yellow-color-150: #faf5e5;
+  --pf-yellow-color-200: #f9f1dc;
+  --pf-yellow-color-250: #f4e7c2;
+  --pf-yellow-color-300: #f0dda8;
+  --pf-yellow-color-400: #eabc3e;
+  --pf-yellow-color-450: #dca818;
+  --pf-yellow-color-500: #ad871f;
   --pf-yellow-color-550: #976f00;
-  --pf-yellow-color-600: #825b17;
-  --pf-yellow-color-700: #58421d;
-  --pf-yellow-color-800: #32291b;
+  --pf-yellow-color-600: #826517;
+  --pf-yellow-color-700: #58481d;
+  --pf-yellow-color-800: #322c1b;
   --pf-yellow-color-900: #1b160e;
 
   --pf-green-color: #14b869;
@@ -102,7 +101,7 @@
   --pf-green-color-100: #effbf5;
   --pf-green-color-150: #e7f9f0;
   --pf-green-color-200: #def7eb;
-  --pf-green-color-250: #c2f4dc;
+  --pf-green-color-250: #c2f4db;
   --pf-green-color-300: #a8f0cd;
   --pf-green-color-400: #3eea97;
   --pf-green-color-450: #18dc7e;
@@ -120,7 +119,7 @@
   --pf-teal-color-200: #dcf9f9;
   --pf-teal-color-250: #bff8f8;
   --pf-teal-color-300: #a3f5f5;
-  --pf-teal-color-400: #3eeaea;
+  --pf-teal-color-400: #4edada;
   --pf-teal-color-450: #25d0d0;
   --pf-teal-color-500: #29a3a3;
   --pf-teal-color-550: #267373;
@@ -177,7 +176,7 @@
   --pf-black-color-90: rgba(0, 0, 0, 0.9);
   --pf-black-color-100: rgba(0, 0, 0, 1);
 
-  /** SEMANTIC COLORS **/
+  /** COLOR FAMILIES **/
 
   --pf-primary-color: #50647c;
   --pf-primary-color-50: #f9fafb;
@@ -195,21 +194,21 @@
   --pf-primary-color-800: #111b28;
   --pf-primary-color-900: #0c141d;
 
-  --pf-secondary-color: var(--pf-blue-color);
-  --pf-secondary-color-50: var(--pf-blue-color-50);
-  --pf-secondary-color-100: var(--pf-blue-color-100);
-  --pf-secondary-color-150: var(--pf-blue-color-150);
-  --pf-secondary-color-200: var(--pf-blue-color-200);
-  --pf-secondary-color-250: var(--pf-blue-color-250);
-  --pf-secondary-color-300: var(--pf-blue-color-300);
-  --pf-secondary-color-400: var(--pf-blue-color-400);
-  --pf-secondary-color-450: var(--pf-blue-color-450);
-  --pf-secondary-color-500: var(--pf-blue-color-500);
-  --pf-secondary-color-550: var(--pf-blue-color-550);
-  --pf-secondary-color-600: var(--pf-blue-color-600);
-  --pf-secondary-color-700: var(--pf-blue-color-700);
-  --pf-secondary-color-800: var(--pf-blue-color-800);
-  --pf-secondary-color-900: var(--pf-blue-color-900);
+  --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-550: #1268a5;
+  --pf-secondary-color-600: #0f578a;
+  --pf-secondary-color-700: #1d4058;
+  --pf-secondary-color-800: #132939;
+  --pf-secondary-color-900: #0e151b;
 
   --pf-tertiary-color: #6a7798;
   --pf-tertiary-color-50: #f8fafb;
@@ -227,22 +226,6 @@
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
 
-  --pf-brand-color: #2989ff;
-  --pf-brand-color-50: #f6fafd;
-  --pf-brand-color-100: #eef4fc;
-  --pf-brand-color-150: #e5effa;
-  --pf-brand-color-200: #d8e9fd;
-  --pf-brand-color-250: #bbd8fb;
-  --pf-brand-color-300: #9ec7fa;
-  --pf-brand-color-400: #2989ff;
-  --pf-brand-color-450: #0070f5;
-  --pf-brand-color-500: #005ccc;
-  --pf-brand-color-550: #0054b8;
-  --pf-brand-color-600: #004599;
-  --pf-brand-color-700: #06356f;
-  --pf-brand-color-800: #082345;
-  --pf-brand-color-900: #061323;
-
   /** UTILITY COLORS **/
 
   --pf-error-color: var(--pf-red-color-450);
@@ -260,9 +243,9 @@
   --pf-info-color: var(--pf-secondary-color-450);
   --pf-info-color-dark: var(--pf-secondary-color-550);
   --pf-info-color-light: var(--pf-secondary-color-400);
-  --pf-brand-color: var(--pf-brand-color-450);
-  --pf-brand-color-dark: var(--pf-brand-color-550);
-  --pf-brand-color-light: var(--pf-brand-color-300);
+  --pf-brand-color: var(--pf-blue-color-450);
+  --pf-brand-color-dark: var(--pf-blue-color-550);
+  --pf-brand-color-light: var(--pf-blue-color-300);
   --pf-pending-color: var(--pf-pink-color-500);
   --pf-pending-color-dark: var(--pf-pink-color-600);
   --pf-pending-color-light: var(--pf-pink-color-300);

package/src/styles/variables/_dropshadows.scss

@@ -1,7 +1,8 @@
 :root,
 :root [data-theme='light'],
 :root [data-theme='dark'] {
-  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-
-  --pf-focus-box-shadow-alignment: 0px 0px 0px 4px;
+  --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
+  --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  --pf-focus-alignment: 0px 0px 0px 4px;
 }

package/src/stylesAndAnimations/colors/BaseColorPalette.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Colors from './Colors.stories';
+ 
+<Meta title="Styles/Base Palette Colors" />
+# Base Palette Colors
+
+These are the base palette colors used to build semantic tokens. Do not use these directly!
+
+## Color Structure
+
+### Base Colors
+
+- **Primary**: Blue-gray palette (#50647c) - Main brand colors
+- **Secondary**: Blue palette (#1474b8) - Accent and interactive elements
+- **Tertiary**: Gray-blue palette (#6a7798) - Supporting elements
+- **Gray**: Neutral grays (#808080) - Text and backgrounds
+- **Red**: Error and destructive actions (#a3292d)
+- **Orange**: Warning and attention (#994733)
+- **Yellow**: Caution and highlights (#ad871f)
+- **Green**: Success and positive actions (#14b869)
+- **Purple**: Special and premium features (#5c29a3)
+- **Pink**: Unique and creative elements (#a3292d)
+- **Teal**: Information and data (#29a3a3)
+- **Blue**: Brand and primary actions (#2989ff)
+
+### Color Scale
+
+Each color family follows a consistent scale: 50, 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 700, 800, 900
+
+Click on the swatch to copy the color to your clipboard.
+
+<Canvas of={Colors.Default} />
+
+## CSS Variable Syntax
+
+In order to use or override a color listed above, you would use the following syntax.
+
+### Using A Variable
+
+The syntax for invoking a variable in your CSS code follows this pattern.
+
+```css
+.myElement {
+  color: var(--pf-primary-color-100);
+}
+```
+
+### Overriding A Variable
+
+The syntax for overriding a variable in your CSS code follows this pattern.
+
+```css
+:root {
+  --pf-primary-color-100: #ff0000;
+}
+```

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -1,25 +1,31 @@
 import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
-import { colorList, darkThemeColors, lightThemeColors, utilityColorList } from './constants';
+import { colorList, themeColors, 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])
+          const colorData = themeColors[color];
+          if (!colorData || !('base' in colorData)) return null;
+
+          const colorShades = Object.keys(colorData)
             .map(Number)
             .sort((a, b) => a - b);
+
           return (
             <Col sm={6} key={color}>
               <h1 className="text-capitalize my-5">{color}</h1>
+
+              <div className="my-3">
+                <Swatch key="base" color={color} colorValue={colorData.base || colorData['500']} />
+              </div>
+
               {colorShades.map((shade) => {
-                const colorValue = themeColors[color][shade];
+                const colorValue = colorData[shade.toString() as keyof typeof colorData];
+                if (!colorValue) return null;
                 return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
               })}
             </Col>
@@ -28,9 +34,28 @@ export const Colors = () => {
       </Row>
       <Row>
         <Col sm={6} key="utility">
-          <h1 className="text-capitalize my-5">Utility Colors</h1>
+          <h1 className="text-capitalize my-5">Light Mode Utility Colors</h1>
+          {utilityColorList.map((color) => {
+            return (
+              <Swatch
+                key={'light-' + color}
+                color={color}
+                colorValue={themeColors.utilityLight[color]}
+              />
+            );
+          })}
+        </Col>
+
+        <Col sm={6} key="utility">
+          <h1 className="text-capitalize my-5">Dark Mode Utility Colors</h1>
           {utilityColorList.map((color) => {
-            return <Swatch key={color} color={color} colorValue={themeColors.utility[color]} />;
+            return (
+              <Swatch
+                key={'dark-' + color}
+                color={color}
+                colorValue={themeColors.utilityDark[color]}
+              />
+            );
           })}
         </Col>
       </Row>