@indico-data/design-system 3.3.0 → 3.5.0

package/src/styles/tokens/_semantic-tokens.scss

@@ -0,0 +1,172 @@
+// ============================================================================
+// SEMANTIC TOKENS - Following Figma's Exact Token Structure
+// ============================================================================
+// These tokens map semantic meaning to our base palette colors and align with Figma
+// All tokens use --pf-semantic prefix. Eventually the word 'semantic' should be removed.
+// In the meantime, it is helpful to distinguish existing tokens with figma aligned ones
+
+// Light Theme
+:root [data-theme='light'] {
+  // Utility Colors
+  --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
+  --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
+  --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
+  --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
+  --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
+  --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
+  --pf-semantic-utility-error-default: var(--pf-red-color-450);
+  --pf-semantic-utility-error-light: var(--pf-red-color-300);
+  --pf-semantic-utility-error-dark: var(--pf-red-color-600);
+  --pf-semantic-utility-success-default: var(--pf-green-color-500);
+  --pf-semantic-utility-success-light: var(--pf-green-color-400);
+  --pf-semantic-utility-success-dark: var(--pf-green-color-600);
+  --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
+  --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
+  --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
+  --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
+  --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
+  --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
+  --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
+  --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
+  --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
+  --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
+  --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
+  --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
+  --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
+  --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
+  --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
+  --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
+  --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
+  --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
+
+  // Background
+  --pf-semantic-page-background: var(--pf-gray-color-100);
+  --pf-semantic-background-primary: var(--pf-gray-color-150);
+  --pf-semantic-background-secondary: var(--pf-gray-color-50);
+  --pf-semantic-background-tertiary: var(--pf-gray-color-200);
+  --pf-semantic-background-quaternary: var(--pf-gray-color-250);
+  --pf-semantic-background-accent: var(--pf-secondary-color-200);
+  --pf-semantic-background-highlight: var(--pf-blue-color-250);
+  --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
+  --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
+
+  // Border
+  --pf-semantic-border-primary: var(--pf-gray-color-300);
+  --pf-semantic-border-secondary: var(--pf-gray-color-250);
+  --pf-semantic-border-hover: var(--pf-gray-color-400);
+  --pf-semantic-border-soft: var(--pf-secondary-color-450);
+  --pf-semantic-border-accent: var(--pf-blue-color-450);
+  --pf-semantic-border-error: var(--pf-red-color-450);
+  --pf-semantic-border-warning: var(--pf-yellow-color-400);
+  --pf-semantic-border-pending: var(--pf-orange-color-400);
+  --pf-semantic-border-success: var(--pf-green-color-500);
+  --pf-semantic-border-info: var(--pf-secondary-color-450);
+  --pf-semantic-border-neutral: var(--pf-gray-color-500);
+
+  // Brand Logo
+  --pf-semantic-logo-primary: var(--pf-blue-color-450);
+  --pf-semantic-logo-secondary: var(--pf-primary-color-800);
+
+  // Font & Icon
+  --pf-semantic-font-regular: var(--pf-primary-color-800);
+  --pf-semantic-font-inverted: var(--pf-gray-color-50);
+  --pf-semantic-font-soft: var(--pf-gray-color-700);
+  --pf-semantic-font-mute: var(--pf-gray-color-800);
+  --pf-semantic-font-link: var(--pf-blue-color-500);
+  --pf-semantic-font-placeholder: var(--pf-gray-color-450);
+  --pf-semantic-font-disabled: var(--pf-gray-color-400);
+  --pf-semantic-font-accent: var(--pf-blue-color-500);
+  --pf-semantic-font-error: var(--pf-red-color-450);
+  --pf-semantic-font-success: var(--pf-green-color-600);
+
+  // Elevation
+  --pf-semantic-elevation-1: var(--pf-opacity-black-100);
+  --pf-semantic-elevation-2: var(--pf-opacity-black-150);
+  --pf-semantic-elevation-3: var(--pf-opacity-black-200);
+  --pf-semantic-elevation-4: var(--pf-opacity-black-250);
+  --pf-semantic-elevation-5: var(--pf-opacity-black-300);
+}
+
+// Dark Theme
+:root [data-theme='dark'] {
+  // Utility Colors
+  --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
+  --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
+  --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
+  --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
+  --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
+  --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
+  --pf-semantic-utility-error-default: var(--pf-red-color-450);
+  --pf-semantic-utility-error-light: var(--pf-red-color-300);
+  --pf-semantic-utility-error-dark: var(--pf-red-color-500);
+  --pf-semantic-utility-success-default: var(--pf-green-color-500);
+  --pf-semantic-utility-success-light: var(--pf-green-color-400);
+  --pf-semantic-utility-success-dark: var(--pf-green-color-600);
+  --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
+  --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
+  --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
+  --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
+  --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
+  --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
+  --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
+  --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
+  --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
+  --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
+  --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
+  --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
+  --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
+  --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
+  --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
+  --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
+  --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
+  --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
+
+  // Background
+  --pf-semantic-page-background: var(--pf-primary-color-700);
+  --pf-semantic-background-primary: var(--pf-primary-color-900);
+  --pf-semantic-background-secondary: var(--pf-primary-color-800);
+  --pf-semantic-background-tertiary: var(--pf-primary-color-600);
+  --pf-semantic-background-quaternary: var(--pf-primary-color-500);
+  --pf-semantic-background-accent: var(--pf-blue-color-800);
+  --pf-semantic-background-highlight: var(--pf-blue-color-700);
+  --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
+  --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
+
+  // Border
+  --pf-semantic-border-primary: var(--pf-tertiary-color-700);
+  --pf-semantic-border-secondary: var(--pf-primary-color-600);
+  --pf-semantic-border-hover: var(--pf-tertiary-color-600);
+  --pf-semantic-border-soft: var(--pf-secondary-color-600);
+  --pf-semantic-border-accent: var(--pf-secondary-color-400);
+  --pf-semantic-border-error: var(--pf-red-color-450);
+  --pf-semantic-border-warning: var(--pf-yellow-color-400);
+  --pf-semantic-border-pending: var(--pf-orange-color-400);
+  --pf-semantic-border-success: var(--pf-green-color-500);
+  --pf-semantic-border-info: var(--pf-secondary-color-450);
+  --pf-semantic-border-neutral: var(--pf-gray-color-500);
+
+  // Brand Logo
+  --pf-semantic-logo-primary: var(--pf-blue-color-450);
+  --pf-semantic-logo-secondary: var(--pf-gray-color-50);
+
+  // Font & Icon
+  --pf-semantic-font-regular: var(--pf-gray-color-50);
+  --pf-semantic-font-inverted: var(--pf-gray-color-900);
+  --pf-semantic-font-soft: var(--pf-tertiary-color-300);
+  --pf-semantic-font-mute: var(--pf-tertiary-color-400);
+  --pf-semantic-font-link: var(--pf-secondary-color-400);
+  --pf-semantic-font-placeholder: var(--pf-tertiary-color-450);
+  --pf-semantic-font-disabled: var(--pf-tertiary-color-700);
+  --pf-semantic-font-accent: var(--pf-secondary-color-400);
+  --pf-semantic-font-error: var(--pf-red-color-300);
+  --pf-semantic-font-success: var(--pf-green-color-400);
+
+  // Elevation
+  --pf-semantic-elevation-1: var(--pf-opacity-black-200);
+  --pf-semantic-elevation-2: var(--pf-opacity-black-250);
+  --pf-semantic-elevation-3: var(--pf-opacity-black-300);
+  --pf-semantic-elevation-4: var(--pf-opacity-black-400);
+  --pf-semantic-elevation-5: var(--pf-opacity-black-450);
+}

package/src/styles/variables/_borders.scss

@@ -20,7 +20,7 @@
   --pf-border-color-secondary: var(--pf-gray-color-250);
   --pf-border-hover-color: var(--pf-gray-color-400);
   --pf-border-color-soft: var(--pf-secondary-color-450);
-  --pf-border-color-accent: var(--pf-brand-color-450);
+  --pf-border-color-accent: var(--pf-blue-color-450);
   --pf-border-color-error: var(--pf-error-color);
   --pf-border-color-warning: var(--pf-warning-color);
   --pf-border-color-info: var(--pf-info-color);

package/src/styles/variables/index.scss

@@ -1,5 +1,4 @@
 @import 'typography';
-@import 'colors';
 @import 'icons';
 @import 'borders';
 @import 'padding';

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>