@indico-data/design-system 3.4.0 → 3.6.0

package/src/docs/BaseColorPalette/BaseColorPalette.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Colors from './BaseColorsPalette.stories';
+
+<Meta title="Styling/Base Colors Palette" />
+
+# Base Colors Palette
+
+Base palette colors are the foundational color values that define the complete color system. These are organized into color families (primary, secondary, red, green, etc.) with consistent scales from light to dark shades.
+
+**Do not use these directly in components.** These base palette variables are designed to be referenced by semantic color tokens, which then adapt to different themes.
+
+## 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
+- **Blue**: Brand and primary actions (#2989ff)
+- **Gray**: Neutral grays (#808080) - Text and backgrounds
+- **Red**: Error and destructive actions (#a3292d)
+- **Pink**: Unique and creative elements (#a3292d)
+- **Orange**: Warning and attention (#994733)
+- **Yellow**: Caution and highlights (#ad871f)
+- **Green**: Success and positive actions (#14b869)
+- **Teal**: Information and data (#29a3a3)
+- **Purple**: Special and premium features (#5c29a3)
+- **White**: Pure white (#ffffff) and white opacity variants
+- **Black**: Pure black (#000000) and black opacity variants
+
+### Color Scale
+
+Each color family follows the scale: 50, 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 700, 800, 900
+
+<Canvas of={Colors.Default} />

package/src/docs/BaseColorPalette/BaseColorPalette.tsx

@@ -0,0 +1,51 @@
+import { Container, Row, Col } from 'react-grid-system';
+import { Swatch } from './Swatch';
+
+const colorList = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'blue',
+  'gray',
+  'red',
+  'pink',
+  'orange',
+  'yellow',
+  'green',
+  'teal',
+  'purple',
+  'white',
+  'black',
+] as const;
+
+const colorShades = [50, 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 700, 800, 900];
+
+export const BaseColorPalette = () => {
+  return (
+    <Container>
+      <Row>
+        {colorList.map((color) => {
+          return (
+            <Col sm={6} key={color}>
+              <h1 className="text-capitalize my-5">{color}</h1>
+              <div className="my-3">
+                <Swatch key="base" color={color} colorValue="" />
+              </div>
+              {colorShades
+                .filter((shade) => {
+                  // White and black don't have 550 shade
+                  if ((color === 'white' || color === 'black') && shade === 550) {
+                    return false;
+                  }
+                  return true;
+                })
+                .map((shade) => {
+                  return <Swatch key={shade} color={color} shade={shade} colorValue="" />;
+                })}
+            </Col>
+          );
+        })}
+      </Row>
+    </Container>
+  );
+};

package/src/docs/BaseColorPalette/BaseColorsPalette.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BaseColorPalette } from './BaseColorPalette';
+
+const meta: Meta<typeof BaseColorPalette> = {
+  title: 'remove/BaseColorPalette',
+  component: BaseColorPalette,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseColorPalette>;
+
+export const Default: Story = {};

package/src/{stylesAndAnimations/colors → docs/BaseColorPalette}/Swatch.tsx

@@ -13,7 +13,36 @@ export const Swatch = ({ color, shade, colorValue }: Props) => {
     navigator.clipboard.writeText(value);
   };
 
-  const cssVar = `--pf-${color}-color${shade ? `-${shade}` : ''}`;
+  const cssVar =
+    color === 'white' || color === 'black'
+      ? `--pf-${shade ? `opacity-${color}-${shade}` : `${color}-color`}`
+      : `--pf-${color}-color${shade ? `-${shade}` : ''}`;
+
+  // Get the actual hex value from the CSS variable
+  const getHexValue = () => {
+    if (typeof window !== 'undefined') {
+      const computedStyle = getComputedStyle(document.documentElement);
+      return computedStyle.getPropertyValue(cssVar).trim();
+    }
+    return '';
+  };
+
+  const rawValue = getHexValue();
+
+  // Convert rgba to readable format
+  const formatValue = (value: string) => {
+    if (value.startsWith('rgba(')) {
+      const match = value.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+      if (match) {
+        const [, r, g, b, a] = match;
+        const opacity = Math.round(parseFloat(a) * 100);
+        return `${opacity}%`;
+      }
+    }
+    return value;
+  };
+
+  const hexValue = formatValue(rawValue);
 
   return (
     <Row className="sb__swatch" key={shade ?? colorValue}>
@@ -24,12 +53,12 @@ export const Swatch = ({ color, shade, colorValue }: Props) => {
         ></div>
       </Col>
       <Col xs={1} className="sb__swatch__description">
-        {colorValue}
+        {hexValue}
       </Col>
       <Col xs="content">
         <span
           className="sb__swatch__hex link-color"
-          onClick={() => handleCopy(colorValue)}
+          onClick={() => handleCopy(hexValue)}
           style={{ cursor: 'pointer', margin: '0 10px' }}
         >
           <Icon className="ml-8" name="fa-copy" />

package/src/docs/Primitives.mdx

@@ -0,0 +1,110 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+<Meta title="Styling/Primitives" />
+
+# Primitives
+
+Primitives are the foundational design values in the Permafrost design system. These are the raw values for spacing, typography, borders, shadows, icons, and breakpoints.
+
+**Figma is the source of truth** for all primitive values. These CSS variables are aligned with the design tokens defined in Figma.
+
+**Use these directly in components** for consistent spacing, typography, and styling. These are the building blocks that semantic tokens reference.
+
+**Note:** There are also color primitives (base palette colors), but **do not use those directly**. Use semantic color tokens instead, which reference the color primitives and adapt to different themes.
+
+## Spacing
+
+Spacing primitives provide consistent spacing values from micro (2px) to 27xl (384px), including negative values.
+
+### Scale
+
+- **Micro to 2xl**: 2px → 16px (small spacing)
+- **3xl to 10xl**: 20px → 48px (medium spacing)
+- **11xl to 27xl**: 56px → 384px (large spacing)
+- **Negative values**: Same scale but negative
+
+## Typography
+
+### Font Family
+
+- **Primary**: `Noto Sans`
+
+### Font Weights
+
+- **Light**: 300
+- **Regular**: 400
+- **Medium**: 500
+- **Semibold**: 600
+- **Bold**: 700
+
+### Font Sizes
+
+- **xs to 2xl**: 10px → 18px
+- **3xl to 5xl**: 20px → 30px
+- **6xl to 10xl**: 34px → 96px
+
+## Borders
+
+Border primitives define border widths and radius values for consistent component styling.
+
+### Border Widths
+
+- **sm**: 1px
+- **md**: 2px
+- **lg**: 4px
+- **xl**: 8px
+
+### Border Radius
+
+- **0 to 10xl**: 0px → 80px (standard radius)
+- **full**: 999px (pill shape)
+- **circle**: 50% (perfect circle)
+
+## Shadows
+
+Shadow primitives provide consistent elevation and depth through shadow opacity values.
+
+### Shadow Scale
+
+- **xs to 2xl**: 0.1 → 0.35 opacity
+- **inner**: 0.2 opacity (inset shadows)
+
+## Icon Sizes
+
+Icon size primitives ensure consistent icon scaling across the interface.
+
+### Icon Scale
+
+- **xs to 2xl**: 10px → 48px
+- **3xl**: 64px
+
+## Breakpoints
+
+Breakpoint primitives define responsive design breakpoints for consistent layouts.
+
+### Breakpoint Scale
+
+- **xs**: 480px
+- **sm**: 600px
+- **md**: 768px
+- **lg**: 1280px
+- **xl**: 1440px
+- **2xl**: 1920px
+
+## When to Use Primitives vs Semantic Tokens
+
+- **Use Primitives** for: spacing, typography, borders, shadows, icons, breakpoints
+- **Use Semantic Tokens** for: colors (background, font, border, utility colors)
+
+The base color palette primitives are the exception - they should be used via semantic color tokens, not directly.
+
+## Source Files
+
+All primitive definitions:
+
+- [`src/styles/primitives/_spacing.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_spacing.scss)
+- [`src/styles/primitives/_typography.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_typography.scss)
+- [`src/styles/primitives/_borders.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_borders.scss)
+- [`src/styles/primitives/_shadows.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_shadows.scss)
+- [`src/styles/primitives/_iconSizes.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_iconSizes.scss)
+- [`src/styles/primitives/_breakpoints.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/primitives/_breakpoints.scss)

package/src/docs/SemanticTokens/ColorSwatch.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface ColorSwatchProps {
+  colorVar: string;
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({ colorVar }) => {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        width: '16px',
+        height: '16px',
+        borderRadius: '2px',
+        marginRight: '8px',
+        verticalAlign: 'middle',
+        backgroundColor: `var(${colorVar})`,
+        border: '1px solid var(--pf-semantic-border-primary)',
+      }}
+    />
+  );
+};

package/src/docs/SemanticTokens/SemanticTokens.mdx

@@ -0,0 +1,53 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as SemanticTokensStories from './SemanticTokens.stories';
+import { ColorSwatch } from './ColorSwatch';
+
+<Meta title="Styling/Semantic Tokens" />
+
+# Semantic Tokens
+
+Semantic tokens let you use colors by meaning instead of specific values. They automatically adapt to light and dark themes, so you get the right color for any theme.
+
+The source of truth is Figma, implemented as CSS variables that map to the correct colors for each theme. This means you don't need to worry about hex values—the design system provides the right color automatically.
+
+```css
+/* ❌ Don't think about specific colors */
+.error-message {
+  color: var(--pf-red-color-400); /* Not correct for all themes, hard to maintain */
+}
+
+/* ✅ Think about what you need */
+.error-message {
+  color: var(--pf-semantic-font-error); /* Correct for any theme */
+}
+```
+
+## Token Mapping
+
+All token definitions and theme mappings: [`src/styles/tokens/_semantic-tokens.scss`](https://github.com/IndicoDataSolutions/permafrost/blob/main/src/styles/tokens/_semantic-tokens.scss)
+
+## Available Color Tokens
+
+### Background
+
+<Canvas of={SemanticTokensStories.SemanticBackgroundTokens} />
+
+### Border
+
+<Canvas of={SemanticTokensStories.SemanticBorderTokens} />
+
+### Font
+
+<Canvas of={SemanticTokensStories.SemanticFontTokens} />
+
+### Brand Logo
+
+<Canvas of={SemanticTokensStories.SemanticLogoTokens} />
+
+### Elevation
+
+<Canvas of={SemanticTokensStories.SemanticElevationTokens} />
+
+### Utility
+
+<Canvas of={SemanticTokensStories.SemanticUtilityTokens} />

package/src/docs/SemanticTokens/SemanticTokens.stories.tsx

@@ -0,0 +1,152 @@
+import { Meta } from '@storybook/react';
+import { ColorSwatch } from './ColorSwatch';
+import { Card } from '../../index';
+
+const TokenItem = ({ category, variant }: { category: string; variant: string }) => {
+  const colorVar = `--pf-semantic-${category}-${variant}`;
+  return (
+    <div style={{ display: 'flex' }}>
+      <div>
+        <ColorSwatch colorVar={colorVar} />
+      </div>
+      <div>
+        <code style={{ color: 'var(--pf-semantic-font-soft)' }}>{colorVar}</code>
+      </div>
+    </div>
+  );
+};
+
+const backgroundTokens = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'quaternary',
+  'accent',
+  'highlight',
+  'brand-solid',
+  'brand-hover',
+  'inverted',
+];
+
+const borderTokens = [
+  'primary',
+  'secondary',
+  'hover',
+  'soft',
+  'accent',
+  'error',
+  'warning',
+  'pending',
+  'success',
+  'info',
+  'neutral',
+];
+
+const fontTokens = [
+  'regular',
+  'inverted',
+  'soft',
+  'mute',
+  'link',
+  'placeholder',
+  'disabled',
+  'accent',
+  'error',
+  'success',
+];
+
+const logoTokens = ['primary', 'secondary'];
+
+const elevationTokens = ['1', '2', '3', '4', '5'];
+
+const utilityTokens = [
+  'info-light',
+  'info-default',
+  'info-dark',
+  'warning-light',
+  'warning-default',
+  'warning-dark',
+  'error-light',
+  'error-default',
+  'error-dark',
+  'success-light',
+  'success-default',
+  'success-dark',
+  'neutral-light',
+  'neutral-default',
+  'neutral-dark',
+  'brand-light',
+  'brand-default',
+  'brand-dark',
+  'pending-light',
+  'pending-default',
+  'pending-dark',
+  'orange-light',
+  'orange-default',
+  'orange-dark',
+  'purple-light',
+  'purple-default',
+  'purple-dark',
+  'teal-light',
+  'teal-default',
+  'teal-dark',
+];
+
+export const SemanticBackgroundTokens = () => (
+  <>
+    <TokenItem category="page" variant="background" />
+    {backgroundTokens.map((token) => (
+      <TokenItem key={'background-' + token} category="background" variant={token} />
+    ))}
+  </>
+);
+
+export const SemanticBorderTokens = () => (
+  <>
+    {borderTokens.map((token) => (
+      <TokenItem key={'border-' + token} category="border" variant={token} />
+    ))}
+  </>
+);
+
+export const SemanticFontTokens = () => (
+  <>
+    {fontTokens.map((token) => (
+      <TokenItem key={'font-' + token} category="font" variant={token} />
+    ))}
+  </>
+);
+
+export const SemanticLogoTokens = () => (
+  <>
+    {logoTokens.map((token) => (
+      <TokenItem key={'logo-' + token} category="logo" variant={token} />
+    ))}
+  </>
+);
+
+export const SemanticElevationTokens = () => (
+  <>
+    {elevationTokens.map((token) => (
+      <TokenItem key={'elevation-' + token} category="elevation" variant={token} />
+    ))}
+  </>
+);
+
+export const SemanticUtilityTokens = () => (
+  <>
+    {utilityTokens.map((token) => (
+      <TokenItem key={'utility-' + token} category="utility" variant={token} />
+    ))}
+  </>
+);
+
+const meta: Meta<typeof SemanticBackgroundTokens> = {
+  title: 'remove/Semantic Tokens',
+  component: SemanticBackgroundTokens,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;

package/src/styles/_borders.scss

@@ -1,20 +1,20 @@
 $sizes: thin, sm, md, lg, 0, xl;
-$values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--pf-border-lg), 0,
-  var(--pf-border-xl);
+$values: thin, var(--pf-border-sm), var(--pf-border-md), var(--pf-border-lg), 0, var(--pf-border-xl);
 $directions: ('t', top), ('b', bottom), ('l', left), ('r', right);
 $styles: dashed, dotted, double, solid;
 $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'pink', 'orange', 'yellow', 'green',
   'teal', 'brand', 'purple';
 $color-grades: '50', '100', '150', '200', '250', '300', '400', '450', '500', '600', '700', '800',
   '900';
-$radiusSizes: 0, sm, lg, md, xl, pill, circle, shaped;
-$radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md), var(--pf-rounded-lg),
-  var(--pf-rounded-xl), var(--pf-rounded-pill), var(--pf-rounded-circle), var(--pf-rounded-shaped);
+$radiusSizes: 0, sm, lg, md, xl, pill, circle;
+$radiusValues: var(--pf-border-radius-0), var(--pf-border-radius-xxs), var(--pf-border-radius-xs),
+  var(--pf-border-radius-md), var(--pf-border-radius-3xl), var(--pf-border-radius-full),
+  var(--pf-border-radius-circle);
 
 .border {
   border: solid 1px;
-  border-color: var(--pf-border-color-primary);
-  border-radius: var(--pf-rounded);
+  border-color: var(--pf-semantic-border-primary);
+  border-radius: var(--pf-border-radius-xs);
 }
 
 @each $size, $value in zip($sizes, $values) {
@@ -51,26 +51,26 @@ $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md),
 
 // Utility border color classes (no grades)
 .border-error {
-  border-color: var(--pf-border-color-error);
+  border-color: var(--pf-semantic-border-error);
 }
 .border-warning {
-  border-color: var(--pf-border-color-warning);
+  border-color: var(--pf-semantic-border-warning);
 }
 .border-info {
-  border-color: var(--pf-border-color-info);
+  border-color: var(--pf-semantic-border-info);
 }
 .border-success {
-  border-color: var(--pf-border-color-success);
+  border-color: var(--pf-semantic-border-success);
 }
 .border-neutral {
-  border-color: var(--pf-border-color-neutral);
+  border-color: var(--pf-semantic-border-neutral);
 }
 .border-pending {
-  border-color: var(--pf-border-color-pending);
+  border-color: var(--pf-semantic-border-pending);
 }
 
 .rounded {
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-border-radius-xs);
 }
 
 @each $size, $value in zip($radiusSizes, $radiusValues) {
@@ -80,11 +80,8 @@ $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md),
 }
 
 .border-primary {
-  border-color: var(--pf-border-color-primary);
+  border-color: var(--pf-semantic-border-primary);
 }
 .border-secondary {
-  border-color: var(--pf-border-color-secondary);
-}
-.border-soft-accent {
-  border-color: var(--pf-border-color-soft-accent);
+  border-color: var(--pf-semantic-border-secondary);
 }

package/src/styles/_colors.scss

@@ -1,11 +1,13 @@
 $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
-  'purple', 'pink', 'teal', 'blue';
+  'purple', 'pink', 'teal', 'blue', 'white', 'black';
+$opacity-color-names: 'white', 'black';
 $chromatic-color-names: 'blue', 'purple', 'red', 'yellow', 'gray', 'green', 'pink', 'orange', 'teal';
 $color-grades: ();
 @for $i from 1 through 20 {
   $color-grades: append($color-grades, #{$i * 50}, comma);
 }
-$utility-color-names: 'success', 'info', 'neutral', 'warning', 'error', 'brand';
+$utility-color-names: 'success', 'info', 'neutral', 'warning', 'error', 'brand', 'pending', 'orange',
+  'purple', 'teal';
 
 @each $color-name in $color-names {
   .color-#{$color-name} {
@@ -29,19 +31,27 @@ $utility-color-names: 'success', 'info', 'neutral', 'warning', 'error', 'brand';
 
 @each $color-name in $utility-color-names {
   .color-#{$color-name} {
-    color: var(--pf-#{$color-name}-color);
+    color: var(--pf-semantic-utility-#{$color-name}-default);
   }
 
   .bg-#{$color-name} {
-    background-color: var(--pf-#{$color-name}-color);
+    background-color: var(--pf-semantic-utility-#{$color-name}-default);
+  }
+}
+
+@each $color-name in $opacity-color-names {
+  @each $color-grade in $color-grades {
+    .bg-#{$color-name}-#{$color-grade} {
+      background-color: var(--pf-opacity-#{$color-name}-#{$color-grade});
+    }
   }
 }
 
 .link-color {
-  color: var(--pf-link-color);
+  color: var(--pf-semantic-font-link);
 }
 .active-link-color {
-  color: var(--pf-active-link-color);
+  color: var(--pf-semantic-font-link);
 }
 
 $item-shades-to-color-number: (