@indico-data/design-system 3.5.0 → 3.6.1

package/src/styles/_sheets.scss

@@ -1,7 +0,0 @@
-:root [data-theme='light'] {
-  --sheets-background-color: var(--pf-gray-color-100);
-}
-:root [data-theme='dark'],
-:root {
-  --sheets-background-color: var(--pf-primary-color-400);
-}

package/src/styles/variables/_borders.scss

@@ -1,46 +0,0 @@
-:root {
-  --pf-border-thin: thin;
-  --pf-border-sm: 1px;
-  --pf-border-md: 2px;
-  --pf-border-lg: 4px;
-  --pf-border-xl: 8px;
-  --pf-rounded: 4px;
-  --pf-rounded-0: 0px;
-  --pf-rounded-sm: 2px;
-  --pf-rounded-md: 4px;
-  --pf-rounded-lg: 8px;
-  --pf-rounded-xl: 24px;
-  --pf-rounded-pill: 9999px;
-  --pf-rounded-circle: 50%;
-  --pf-rounded-shaped: 24px 0;
-}
-
-:root [data-theme='light'] {
-  --pf-border-color-primary: var(--pf-gray-color-300);
-  --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-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);
-  --pf-border-color-success: var(--pf-success-color);
-  --pf-border-color-neutral: var(--pf-neutral-color);
-  --pf-border-color-pending: var(--pf-pending-color);
-  --pf-horizontal-line-color: var(--pf-border-color-primary);
-}
-
-:root [data-theme='dark'],
-:root {
-  --pf-border-color-primary: var(--pf-tertiary-color-700);
-  --pf-border-color-secondary: var(--pf-primary-color-600);
-  --pf-border-color-soft: var(--pf-secondary-color-600);
-  --pf-border-color-accent: var(--pf-secondary-color-400);
-  --pf-border-color-error: var(--pf-error-color);
-  --pf-border-color-warning: var(--pf-warning-color);
-  --pf-border-color-info: var(--pf-info-color);
-  --pf-border-color-success: var(--pf-success-color);
-  --pf-border-color-neutral: var(--pf-neutral-color);
-  --pf-border-color-pending: var(--pf-pending-color);
-  --pf-horizontal-line-color: var(--pf-border-color-primary);
-}

package/src/styles/variables/_gap.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-gap-0: 0;
-  --pf-gap-1: 4px;
-  --pf-gap-2: 8px;
-  --pf-gap-3: 12px;
-  --pf-gap-4: 16px;
-  --pf-gap-5: 20px;
-  --pf-gap-6: 24px;
-  --pf-gap-7: 28px;
-  --pf-gap-8: 32px;
-  --pf-gap-9: 36px;
-  --pf-gap-10: 40px;
-  --pf-gap-11: 44px;
-  --pf-gap-12: 48px;
-  --pf-gap-13: 52px;
-  --pf-gap-14: 56px;
-  --pf-gap-15: 60px;
-  --pf-gap-16: 64px;
-}

package/src/styles/variables/_icons.scss

@@ -1,7 +0,0 @@
-:root {
-  --pf-icon-size-xs: 0.6rem; // eww, probably want this to be 0.5 eventually but we use 0.6 (10px) commonly in the codebase
-  --pf-icon-size-sm: 0.75rem;
-  --pf-icon-size-md: 1rem;
-  --pf-icon-size-lg: 1.5rem;
-  --pf-icon-size-xl: 2rem;
-}

package/src/styles/variables/_margin.scss

@@ -1,37 +0,0 @@
-:root {
-  --pf-margin-auto: auto;
-  --pf-margin-0: 0;
-  --pf-margin-1: 4px;
-  --pf-margin-2: 8px;
-  --pf-margin-3: 12px;
-  --pf-margin-4: 16px;
-  --pf-margin-5: 20px;
-  --pf-margin-6: 24px;
-  --pf-margin-7: 28px;
-  --pf-margin-8: 32px;
-  --pf-margin-9: 36px;
-  --pf-margin-10: 40px;
-  --pf-margin-11: 44px;
-  --pf-margin-12: 48px;
-  --pf-margin-13: 52px;
-  --pf-margin-14: 56px;
-  --pf-margin-15: 60px;
-  --pf-margin-16: 64px;
-
-  --pf-negative-margin-1: -4px;
-  --pf-negative-margin-2: -8px;
-  --pf-negative-margin-3: -12px;
-  --pf-negative-margin-4: -16px;
-  --pf-negative-margin-5: -20px;
-  --pf-negative-margin-6: -24px;
-  --pf-negative-margin-7: -28px;
-  --pf-negative-margin-8: -32px;
-  --pf-negative-margin-9: -36px;
-  --pf-negative-margin-10: -40px;
-  --pf-negative-margin-11: -44px;
-  --pf-negative-margin-12: -48px;
-  --pf-negative-margin-13: -52px;
-  --pf-negative-margin-14: -56px;
-  --pf-negative-margin-15: -60px;
-  --pf-negative-margin-16: -64px;
-}

package/src/styles/variables/_padding.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-padding-0: 0;
-  --pf-padding-1: 4px;
-  --pf-padding-2: 8px;
-  --pf-padding-3: 12px;
-  --pf-padding-4: 16px;
-  --pf-padding-5: 20px;
-  --pf-padding-6: 24px;
-  --pf-padding-7: 28px;
-  --pf-padding-8: 32px;
-  --pf-padding-9: 36px;
-  --pf-padding-10: 40px;
-  --pf-padding-11: 44px;
-  --pf-padding-12: 48px;
-  --pf-padding-13: 52px;
-  --pf-padding-14: 56px;
-  --pf-padding-15: 60px;
-  --pf-padding-16: 64px;
-}

package/src/styles/variables/_size.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-size-0: 0;
-  --pf-size-1: 4px;
-  --pf-size-2: 8px;
-  --pf-size-3: 12px;
-  --pf-size-4: 16px;
-  --pf-size-5: 20px;
-  --pf-size-6: 24px;
-  --pf-size-7: 28px;
-  --pf-size-8: 32px;
-  --pf-size-9: 36px;
-  --pf-size-10: 40px;
-  --pf-size-11: 44px;
-  --pf-size-12: 48px;
-  --pf-size-13: 52px;
-  --pf-size-14: 56px;
-  --pf-size-15: 60px;
-  --pf-size-16: 64px;
-}

package/src/stylesAndAnimations/colors/BaseColorPalette.mdx

@@ -1,56 +0,0 @@
-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.stories.tsx

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

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Container, Row, Col } from 'react-grid-system';
-import { colorList, themeColors, utilityColorList } from './constants';
-import { Swatch } from './Swatch';
-
-export const Colors = () => {
-  return (
-    <Container>
-      <Row>
-        {colorList.map((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 = colorData[shade.toString() as keyof typeof colorData];
-                if (!colorValue) return null;
-                return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
-              })}
-            </Col>
-          );
-        })}
-      </Row>
-      <Row>
-        <Col sm={6} key="utility">
-          <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={'dark-' + color}
-                color={color}
-                colorValue={themeColors.utilityDark[color]}
-              />
-            );
-          })}
-        </Col>
-      </Row>
-    </Container>
-  );
-};

package/src/stylesAndAnimations/colors/constants.ts

@@ -1,280 +0,0 @@
-// Type definitions for color palettes
-interface ColorPalette {
-  base: string;
-  50: string;
-  100: string;
-  150: string;
-  200: string;
-  250: string;
-  300: string;
-  400: string;
-  450: string;
-  500: string;
-  550?: string; // Optional since not all colors have this shade
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-}
-
-interface UtilityColors {
-  success: string;
-  info: string;
-  neutral: string;
-  warning: string;
-  error: string;
-  brand: string;
-}
-
-interface ThemeColors {
-  [key: string]: ColorPalette | UtilityColors;
-  utilityDark: UtilityColors;
-  utilityLight: UtilityColors;
-}
-
-export const colorList = [
-  'primary',
-  'secondary',
-  'tertiary',
-  'blue',
-  'gray',
-  'green',
-  'orange',
-  'pink',
-  'purple',
-  'red',
-  'teal',
-  'yellow',
-] as const;
-
-export const utilityColorList = [
-  'success',
-  'info',
-  'neutral',
-  'warning',
-  'error',
-  'brand',
-] as const;
-
-export const themeColors: ThemeColors = {
-  blue: {
-    base: '#2989ff',
-    50: '#f6fafd',
-    100: '#eef4fc',
-    150: '#e5effa',
-    200: '#d8e9fd',
-    250: '#bbd8fb',
-    300: '#9ec7fa',
-    400: '#2989ff',
-    450: '#0070f5',
-    500: '#005ccc',
-    550: '#0054b8',
-    600: '#004599',
-    700: '#06356f',
-    800: '#082345',
-    900: '#061323',
-  },
-  gray: {
-    base: '#808080',
-    50: '#ffffff',
-    100: '#f7f7f7',
-    150: '#f2f2f2',
-    200: '#e6e6e6',
-    250: '#d9d9d9',
-    300: '#cccccc',
-    400: '#b2b2b2',
-    450: '#949494',
-    500: '#808080',
-    550: '#666666',
-    600: '#606060',
-    700: '#4d4d4d',
-    800: '#333333',
-    900: '#000000',
-  },
-  green: {
-    base: '#14b869',
-    50: '#f7fdfa',
-    100: '#effbf5',
-    150: '#e7f9f0',
-    200: '#def7eb',
-    250: '#c2f4dc',
-    300: '#a8f0cd',
-    400: '#3eea97',
-    450: '#18dc7e',
-    500: '#14b869',
-    550: '#129e45',
-    600: '#17824e',
-    700: '#175e3c',
-    800: '#173627',
-    900: '#0e1b15',
-  },
-  orange: {
-    base: '#994733',
-    50: '#fffbfa',
-    100: '#faf2f0',
-    150: '#f7ebe8',
-    200: '#f7e3de',
-    250: '#f4ccc2',
-    300: '#f5b4a3',
-    400: '#ea603e',
-    450: '#c44e31',
-    500: '#994733',
-    550: '#863f2a',
-    600: '#6b3a2e',
-    700: '#522d23',
-    800: '#321f1b',
-    900: '#1b110e',
-  },
-  pink: {
-    base: '#a3292d',
-    50: '#fbf8f9',
-    100: '#f8f2f4',
-    150: '#f4ebee',
-    200: '#f1e4e9',
-    250: '#eacdd7',
-    300: '#ebadc3',
-    400: '#e6417b',
-    450: '#c3285e',
-    500: '#a32954',
-    550: '#922149',
-    600: '#6b2e43',
-    700: '#4c2935',
-    800: '#321b23',
-    900: '#1b0e13',
-  },
-  primary: {
-    base: '#50647c',
-    50: '#f9fafb',
-    100: '#f3f5f7',
-    150: '#eceff3',
-    200: '#e6eaef',
-    250: '#d3dbe3',
-    300: '#c1cbd7',
-    400: '#7c92ab',
-    450: '#5f7895',
-    500: '#50647c',
-    600: '#243447',
-    700: '#192534',
-    800: '#111b28',
-    900: '#0c141d',
-  },
-  purple: {
-    base: '#5c29a3',
-    50: '#f9f6fc',
-    100: '#f4f0fa',
-    150: '#eee8f7',
-    200: '#e9def7',
-    250: '#d8c6f1',
-    300: '#c7adeb',
-    400: '#8849df',
-    450: '#6e31c4',
-    500: '#5c29a3',
-    550: '#4e218f',
-    600: '#451f7a',
-    700: '#361d58',
-    800: '#241736',
-    900: '#130e1b',
-  },
-  red: {
-    base: '#a3292d',
-    50: '#fdf6f8',
-    100: '#fceeee',
-    150: '#fae5e6',
-    200: '#f9dcdd',
-    250: '#f6acaf',
-    300: '#f28c90',
-    400: '#ea3e44',
-    450: '#d0252a',
-    500: '#a3292d',
-    550: '#8f2428',
-    600: '#732629',
-    700: '#522325',
-    800: '#321b1c',
-    900: '#181011',
-  },
-  secondary: {
-    base: '#1474b8',
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    150: '#e8f1f7',
-    200: '#deedf7',
-    250: '#c6dff1',
-    300: '#add1eb',
-    400: '#3ea2ea',
-    450: '#188bdc',
-    500: '#1474b8',
-    550: '#1268a5',
-    600: '#0f578a',
-    700: '#1d4058',
-    800: '#132939',
-    900: '#0e151b',
-  },
-  teal: {
-    base: '#29a3a3',
-    50: '#f6fdfd',
-    100: '#eefcfc',
-    150: '#e5fafa',
-    200: '#dcf9f9',
-    250: '#bff8f8',
-    300: '#a3f5f5',
-    400: '#4edada',
-    450: '#25d0d0',
-    500: '#29a3a3',
-    550: '#267373',
-    600: '#1c5656',
-    700: '#235252',
-    800: '#1b3232',
-    900: '#101818',
-  },
-  tertiary: {
-    base: '#6a7798',
-    50: '#f8fafb',
-    100: '#f4f7f9',
-    150: '#ebf0f4',
-    200: '#dae3eb',
-    250: '#c3d2de',
-    300: '#aabbcf',
-    400: '#94a5c0',
-    450: '#8593b3',
-    500: '#6a7798',
-    550: '#5f6a85',
-    600: '#58637b',
-    700: '#4b5364',
-    800: '#2c303a',
-    900: '#111317',
-  },
-  yellow: {
-    base: '#ad871f',
-    50: '#fdfbf7',
-    100: '#fcf8ee',
-    150: '#faf5e5',
-    200: '#f9f1dc',
-    250: '#f4e7c2',
-    300: '#f0dda8',
-    400: '#eabc3e',
-    450: '#dca818',
-    500: '#ad871f',
-    550: '#976f00',
-    600: '#826517',
-    700: '#58481d',
-    800: '#322c1b',
-    900: '#1b160e',
-  },
-  utilityDark: {
-    success: '#15b77d',
-    info: '#198bdc',
-    neutral: '#dcdcdc',
-    warning: '#f29c22',
-    error: '#ce6068',
-    brand: '#0070f5',
-  },
-  // light mode utility colors
-  utilityLight: {
-    success: '#14b869',
-    info: '#1474b8',
-    neutral: '#b2b2b2',
-    warning: '#ad791f',
-    error: '#a3292d',
-    brand: '#2960a3',
-  },
-};

package/src/stylesAndAnimations/colors/index.ts

@@ -1 +0,0 @@
-export { Colors } from './Colors';