@indico-data/design-system 3.22.0 → 3.23.0-beta.1

package/src/components/alert/styles/Alert.scss

@@ -0,0 +1,139 @@
+$alert-types: 'warning', 'info', 'success', 'error';
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pf-spacing-md);
+  padding: var(--pf-spacing-2xl);
+  border-radius: var(--pf-border-radius-md);
+  background-color: var(--pf-semantic-background-secondary);
+  font-family: var(--pf-font-family);
+  box-shadow:
+    0 4px 6px -4px var(--pf-semantic-elevation-1),
+    0 10px 15px -3px var(--pf-semantic-elevation-1);
+
+  // ------- Size: small (compact inline) -------
+  &--small {
+    padding: var(--pf-spacing-sm);
+    align-items: center;
+    box-shadow: none;
+  }
+
+  // ------- Variant: bordered -------
+  &--bordered {
+    border: 1px solid var(--alert-border-color);
+  }
+
+  // ------- Type-specific icon colors (soft uses semantic utility tokens) -------
+  &--soft-warning > .icon {
+    color: var(--pf-semantic-utility-warning-default);
+  }
+  &--soft-info > .icon {
+    color: var(--pf-semantic-utility-info-default);
+  }
+  &--soft-success > .icon {
+    color: var(--pf-semantic-utility-success-default);
+  }
+  &--soft-error > .icon {
+    color: var(--pf-semantic-utility-error-default);
+  }
+
+  // ------- Type-specific bordered colors (from component tokens) -------
+  @each $type in $alert-types {
+    &--bordered-#{$type} {
+      --alert-border-color: var(--pf-alert-bordered-#{$type}-border);
+
+      > .icon {
+        color: var(--pf-alert-bordered-#{$type}-icon);
+      }
+
+      .alert__title {
+        color: var(--pf-alert-bordered-#{$type}-text);
+      }
+    }
+
+    &--tinted#{&}--bordered-#{$type} {
+      background-color: var(--pf-alert-bordered-#{$type}-bg);
+    }
+  }
+
+  // ------- Sub-elements -------
+  > .icon {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-semibold);
+    line-height: 20px;
+    color: var(--pf-semantic-font-regular);
+    margin-bottom: var(--pf-spacing-xxs);
+  }
+
+  &__message {
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-regular);
+    line-height: 20px;
+    color: var(--pf-semantic-font-regular);
+
+    a {
+      color: var(--pf-semantic-font-link);
+      text-decoration: underline;
+    }
+  }
+
+  &--has-title .alert__message {
+    color: var(--pf-semantic-font-soft);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-spacing-sm);
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  &__action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: var(--pf-font-family);
+    font-size: var(--pf-font-size-md);
+    font-weight: var(--pf-font-weight-medium);
+    line-height: 20px;
+    color: var(--pf-semantic-font-link);
+    padding: 0;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    padding: var(--pf-spacing-xxs);
+    border-radius: var(--pf-border-radius-xs);
+    color: var(--pf-semantic-font-soft);
+    line-height: 1;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+
+    &:hover {
+      color: var(--pf-semantic-font-regular);
+    }
+  }
+}

package/src/components/alert/styles/_tokens.scss

@@ -0,0 +1,71 @@
+// ============================================================================
+// ALERT COMPONENT TOKENS (internal)
+// ============================================================================
+// These CSS custom properties are implementation details of the Alert component.
+// They provide light/dark theme values for the bordered variant's per-type
+// accent colors (border, title text, icon). The soft variant uses semantic
+// utility tokens directly and doesn't need component-level overrides.
+//
+// Consumers should style alerts through the component props, not by
+// overriding these variables.
+//
+// Aligned with Figma's "Alert" variable group.
+
+// ============================================================================
+// Bordered variant - Light Theme
+// ============================================================================
+:root,
+:root [data-theme='light'] {
+  // Bordered / Warning
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-150);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-400);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-600);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-400);
+
+  // Bordered / Info
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-150);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-400);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-400);
+
+  // Bordered / Success
+  --pf-alert-bordered-success-bg: var(--pf-green-color-150);
+  --pf-alert-bordered-success-border: var(--pf-green-color-450);
+  --pf-alert-bordered-success-text: var(--pf-green-color-600);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-500);
+
+  // Bordered / Error
+  --pf-alert-bordered-error-bg: var(--pf-red-color-150);
+  --pf-alert-bordered-error-border: var(--pf-red-color-250);
+  --pf-alert-bordered-error-text: var(--pf-red-color-500);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-450);
+}
+
+// ============================================================================
+// Bordered variant - Dark Theme
+// ============================================================================
+:root [data-theme='dark'] {
+  // Bordered / Warning
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-800);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-500);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-300);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-300);
+
+  // Bordered / Info
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-700);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-250);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-250);
+
+  // Bordered / Success
+  --pf-alert-bordered-success-bg: var(--pf-green-color-800);
+  --pf-alert-bordered-success-border: var(--pf-green-color-600);
+  --pf-alert-bordered-success-text: var(--pf-green-color-300);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-300);
+
+  // Bordered / Error
+  --pf-alert-bordered-error-bg: var(--pf-red-color-700);
+  --pf-alert-bordered-error-border: var(--pf-red-color-500);
+  --pf-alert-bordered-error-text: var(--pf-red-color-300);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-300);
+}

package/src/components/alert/types.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+
+export type AlertType = 'warning' | 'info' | 'success' | 'error';
+export type AlertVariant = 'soft' | 'bordered';
+export type AlertSize = 'small' | 'large';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Semantic type — controls the icon and accent color */
+  type: AlertType;
+  /** Visual style: soft (subtle bg) or bordered (colored border) */
+  variant?: AlertVariant;
+  /** Size: large (banner) or small (compact inline) */
+  size?: AlertSize;
+  /** When true, the bordered variant uses a type-specific tinted background instead of surface-secondary */
+  tinted?: boolean;
+  /** Optional title — when provided, renders above the message */
+  title?: string;
+  /** Alert body / message content */
+  children: React.ReactNode;
+  /** Optional action button label */
+  actionText?: string;
+  /** Called when the action button is clicked */
+  onAction?: () => void;
+  /** Called when the close button is clicked — omit to hide the close button */
+  onClose?: () => void;
+  /** Accessible label for the close button (for i18n) */
+  closeAriaLabel?: string;
+}

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal, ConfirmationModal } from './modal';
 export { Badge } from './badge';
 export { Pill } from './pill';
+export { Alert } from './alert';
 export { Pagination } from './pagination';
 export { TanstackTable } from './tanstackTable';
 export { Tooltip } from './tooltip';

package/src/components/pill/Pill.mdx

@@ -68,6 +68,33 @@ Multiple features can be combined freely.
 
 <Canvas of={Pill.Combined} />
 
+## Shading
+
+Use `shade` and `shadeCount` to visually differentiate pills within a single color.
+The middle shade renders the base color; shades below the midpoint blend toward white
+(up to 30% lighter), shades above blend toward black (up to 30% darker). Text and icons
+stay at full strength throughout.
+
+Pass both props together — `shade` is the 1-based index of this pill, `shadeCount` is
+the total number of pills in the group. When either prop is omitted the pill renders
+at full color as usual.
+
+<Canvas of={Pill.Shaded} />
+
+<Controls of={Pill.Shaded} />
+
+### Spectrum across colors
+
+Every chromatic color works with shading, in both solid and outline variants.
+
+<Canvas of={Pill.ShadedSpectrum} />
+
+### Dynamic shade counts
+
+The distribution adapts to any group size — no fixed token set required.
+
+<Canvas of={Pill.ShadedDynamicCount} />
+
 ## Full Color × Variant Matrix
 
 <Canvas of={Pill.FullMatrix} />

package/src/components/pill/Pill.stories.tsx

@@ -65,6 +65,8 @@ const meta: Meta<typeof Pill> = {
     iconLeft: { control: 'text' },
     iconRight: { control: 'text' },
     dot: { control: 'boolean' },
+    shade: { control: { type: 'number' } },
+    shadeCount: { control: { type: 'number' } },
     onClose: { control: false },
     children: { control: 'text' },
   },
@@ -274,6 +276,91 @@ export const CloseableMatrix: Story = {
   ),
 };
 
+export const Shaded: Story = {
+  args: {
+    children: 'Medium',
+    color: 'green',
+    shade: 3,
+    shadeCount: 5,
+  },
+  argTypes: {
+    shade: { control: { type: 'range', min: 1, max: 10, step: 1 } },
+    shadeCount: { control: { type: 'range', min: 2, max: 10, step: 1 } },
+  },
+};
+
+export const ShadedSpectrum: Story = {
+  render: () => {
+    const labels = ['Very Low', 'Low', 'Medium', 'High', 'Very High'];
+    return (
+      <>
+        {(['solid', 'outline'] as const).map((variant) => (
+          <div key={variant} style={section}>
+            <h4 style={{ marginBottom: 8, textTransform: 'capitalize' }}>{variant}</h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {COLORS.filter((c) => c !== 'soft').map((color) => (
+                <div key={color} style={row}>
+                  <span
+                    style={{
+                      width: 60,
+                      fontSize: 12,
+                      fontWeight: 500,
+                      textTransform: 'capitalize',
+                    }}
+                  >
+                    {color}
+                  </span>
+                  {labels.map((label, i) => (
+                    <Pill
+                      key={label}
+                      color={color}
+                      variant={variant}
+                      size="md"
+                      shade={i + 1}
+                      shadeCount={labels.length}
+                    >
+                      {label}
+                    </Pill>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+export const ShadedDynamicCount: Story = {
+  render: () => {
+    const counts = [3, 5, 7];
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {counts.map((count) => (
+          <div key={count}>
+            <h4 style={{ marginBottom: 8 }}>{count} shades</h4>
+            <div style={row}>
+              {Array.from({ length: count }, (_, i) => (
+                <Pill
+                  key={i}
+                  color="blue"
+                  variant="solid"
+                  size="md"
+                  shade={i + 1}
+                  shadeCount={count}
+                >
+                  {i + 1} of {count}
+                </Pill>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
 const th: React.CSSProperties = {
   padding: '6px 10px',
   fontSize: 11,

package/src/components/pill/Pill.tsx

@@ -19,11 +19,46 @@ export const Pill = ({
   iconLeft,
   iconRight,
   dot,
+  shade,
+  shadeCount,
   onClose,
   closeAriaLabel = 'Remove',
   className,
+  style,
   ...rest
 }: PillProps) => {
+  const shadeStyle = (() => {
+    if (
+      shade === undefined ||
+      shade === null ||
+      shadeCount === undefined ||
+      shadeCount === null ||
+      shadeCount <= 1
+    )
+      return undefined;
+
+    const s = Math.max(1, Math.min(shadeCount, Math.round(shade)));
+    const midpoint = (shadeCount + 1) / 2;
+
+    if (s < midpoint) {
+      const distance = (midpoint - s) / (midpoint - 1);
+      return {
+        '--pill-shade-mix': `${Math.round(100 - distance * 30)}%`,
+        '--pill-shade-target': 'white',
+      } as React.CSSProperties;
+    }
+
+    if (s > midpoint) {
+      const distance = (s - midpoint) / (shadeCount - midpoint);
+      return {
+        '--pill-shade-mix': `${Math.round(100 - distance * 30)}%`,
+        '--pill-shade-target': 'black',
+      } as React.CSSProperties;
+    }
+
+    return undefined;
+  })();
+
   return (
     <div
       className={classNames(
@@ -37,6 +72,7 @@ export const Pill = ({
           'pill--closeable': !!onClose,
         },
       )}
+      style={shadeStyle ? { ...shadeStyle, ...style } : style}
       {...rest}
     >
       {dot && <span className="pill__dot" />}

package/src/components/pill/__tests__/Pill.test.tsx

@@ -122,4 +122,97 @@ describe('Pill', () => {
     expect(container.querySelector('.pill__close')).toBeInTheDocument();
     expect(screen.getByText('All Features')).toBeInTheDocument();
   });
+
+  describe('shade', () => {
+    const getStyle = (container: HTMLElement) => (container.firstChild as HTMLElement).style;
+
+    it('sets no shade vars when both shade and shadeCount are omitted', () => {
+      const { container } = render(<Pill>Plain</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('');
+    });
+
+    it('sets no shade vars when only shade is provided', () => {
+      const { container } = render(<Pill shade={2}>Shade Only</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('sets no shade vars when only shadeCount is provided', () => {
+      const { container } = render(<Pill shadeCount={5}>Count Only</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('mixes toward white for shades below midpoint', () => {
+      const { container } = render(
+        <Pill shade={1} shadeCount={5}>
+          Lightest
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('70%');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('white');
+    });
+
+    it('mixes toward black for shades above midpoint', () => {
+      const { container } = render(
+        <Pill shade={5} shadeCount={5}>
+          Darkest
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('70%');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('black');
+    });
+
+    it('sets no shade vars at the exact midpoint (base color)', () => {
+      const { container } = render(
+        <Pill shade={3} shadeCount={5}>
+          Middle
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('');
+    });
+
+    it('handles even shadeCount (no exact midpoint)', () => {
+      const { container: c1 } = render(
+        <Pill shade={2} shadeCount={4}>
+          Below
+        </Pill>,
+      );
+      const { container: c2 } = render(
+        <Pill shade={3} shadeCount={4}>
+          Above
+        </Pill>,
+      );
+      expect(getStyle(c1).getPropertyValue('--pill-shade-target')).toBe('white');
+      expect(getStyle(c2).getPropertyValue('--pill-shade-target')).toBe('black');
+    });
+
+    it('ignores shade when shadeCount is 1 or missing', () => {
+      const { container: c1 } = render(
+        <Pill shade={1} shadeCount={1}>
+          Single
+        </Pill>,
+      );
+      const { container: c2 } = render(<Pill shade={2}>No Count</Pill>);
+      expect(getStyle(c1).getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(getStyle(c2).getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('preserves consumer style prop alongside shade vars', () => {
+      const { container } = render(
+        <Pill shade={1} shadeCount={3} style={{ maxWidth: 200 }}>
+          Styled
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).not.toBe('');
+      expect(style.maxWidth).toBe('200px');
+    });
+  });
 });

package/src/components/pill/styles/Pill.scss

@@ -18,9 +18,9 @@ $pill-variants: 'solid', 'outline';
     border-radius: var(--pf-border-radius-full);
   }
 
-  // ------- Sizes -------
+  // ------- Default Sizes -------
   &--sm {
-    padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+    padding: var(--pf-spacing-micro) var(--pf-spacing-xs);
     font-size: var(--pf-font-size-sm);
     font-weight: var(--pf-font-weight-semibold);
     line-height: 16px;
@@ -28,7 +28,7 @@ $pill-variants: 'solid', 'outline';
   }
 
   &--md {
-    padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
+    padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
     font-size: var(--pf-font-size-md);
     font-weight: var(--pf-font-weight-medium);
     line-height: 20px;
@@ -36,7 +36,7 @@ $pill-variants: 'solid', 'outline';
   }
 
   &--lg {
-    padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+    padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
     font-size: var(--pf-font-size-md);
     font-weight: var(--pf-font-weight-medium);
     line-height: 20px;
@@ -48,6 +48,19 @@ $pill-variants: 'solid', 'outline';
     border-radius: var(--pf-border-radius-md);
   }
 
+  // Pill type has wider horizontal padding than badge
+  &--sm#{&}--pill {
+    padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
+  }
+
+  &--md#{&}--pill {
+    padding: var(--pf-spacing-micro) var(--pf-spacing-md);
+  }
+
+  &--lg#{&}--pill {
+    padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
+  }
+
   // ------- Icon-only (special padding) -------
   &--icon-only {
     &.pill--sm {
@@ -63,20 +76,35 @@ $pill-variants: 'solid', 'outline';
     }
   }
 
-  // ------- Closeable (asymmetric padding) -------
+  // ------- Closeable (asymmetric padding, badge defaults) -------
   &--closeable {
+    &.pill--sm {
+      padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-xs);
+    }
+
+    &.pill--md {
+      padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
+      gap: var(--pf-spacing-xxs);
+    }
+
+    &.pill--lg {
+      padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-md);
+      gap: var(--pf-spacing-xxs);
+    }
+  }
+
+  // Pill type closeable has wider left padding
+  &--closeable#{&}--pill {
     &.pill--sm {
       padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
     }
 
     &.pill--md {
       padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
-      gap: var(--pf-spacing-xxs);
     }
 
     &.pill--lg {
       padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
-      gap: var(--pf-spacing-xxs);
     }
   }
 
@@ -84,11 +112,24 @@ $pill-variants: 'solid', 'outline';
   @each $variant in $pill-variants {
     @each $color in $pill-colors {
       &--#{$variant}-#{$color} {
-        background-color: var(--pf-pill-#{$variant}-#{$color}-bg);
+        background-color: color-mix(
+          in srgb,
+          var(--pf-pill-#{$variant}-#{$color}-bg) var(--pill-shade-mix, 100%),
+          var(--pill-shade-target, white)
+        );
         color: var(--pf-pill-#{$variant}-#{$color}-text);
 
         @if $variant == 'outline' {
-          box-shadow: inset 0 0 0 1px var(--pf-pill-#{$variant}-#{$color}-border);
+          box-shadow: inset
+            0
+            0
+            0
+            1px
+            color-mix(
+              in srgb,
+              var(--pf-pill-#{$variant}-#{$color}-border) var(--pill-shade-mix, 100%),
+              var(--pill-shade-target, white)
+            );
         }
 
         > .icon {

package/src/components/pill/types.ts

@@ -25,6 +25,10 @@ export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
   iconRight?: IconName;
   /** When true, renders a small colored dot indicator before the content */
   dot?: boolean;
+  /** 1-based shade index within a group. Used with shadeCount to vary background lightness via color-mix(). */
+  shade?: number;
+  /** Total shades in the group. Background blends lighter (white) below midpoint, darker (black) above. */
+  shadeCount?: number;
   /** When provided, renders a close button that calls this handler */
   onClose?: () => void;
   /** Accessible label for the close button (for i18n) */

package/src/index.ts

@@ -27,6 +27,7 @@ export { Card } from './components/card';
 export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';
+export { Alert } from './components/alert';
 export { Badge } from './components/badge';
 export { Modal, ConfirmationModal } from './components/modal';
 export { TanstackTable } from './components/tanstackTable';