@indico-data/design-system 3.4.0 → 3.6.0

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';