@indico-data/design-system 2.43.1 → 2.45.0

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -1,28 +1,24 @@
 import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
-import {
-  colorList,
-  darkThemeColors,
-  lightThemeColors,
-  shades,
-  utilityColorList,
-} from './constants';
+import { colorList, darkThemeColors, lightThemeColors, 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])
+            .map(Number)
+            .sort((a, b) => a - b);
           return (
             <Col sm={6} key={color}>
               <h1 className="text-capitalize my-5">{color}</h1>
-              {Array.from({ length: shades }, (_, i) => (i + 1) * 100).map((shade) => {
+              {colorShades.map((shade) => {
                 const colorValue = themeColors[color][shade];
                 return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
               })}

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -41,34 +41,34 @@ export const UtilityClasses = () => {
           <h1 className="mb-5">Text</h1>
           <ul>
             <li>
-              <span className="color-primary">color-primary</span>
+              <span className="color-secondary">color-secondary</span>
             </li>
             <li>
-              <span className="color-primary-100">color-primary-100</span>
+              <span className="color-secondary-100">color-secondary-100</span>
             </li>
             <li>
-              <span className="color-primary-200">color-primary-200</span>
+              <span className="color-secondary-200">color-secondary-200</span>
             </li>
             <li>
-              <span className="color-primary-300">color-primary-300</span>
+              <span className="color-secondary-300">color-secondary-300</span>
             </li>
             <li>
-              <span className="color-primary-400">color-primary-400</span>
+              <span className="color-secondary-400">color-secondary-400</span>
             </li>
             <li>
-              <span className="color-primary-500">color-primary-500</span>
+              <span className="color-secondary-500">color-secondary-500</span>
             </li>
             <li>
-              <span className="color-primary-600">color-primary-600</span>
+              <span className="color-secondary-600">color-secondary-600</span>
             </li>
             <li>
-              <span className="color-primary-700">color-primary-700</span>
+              <span className="color-secondary-700">color-secondary-700</span>
             </li>
             <li>
-              <span className="color-primary-800">color-primary-800</span>
+              <span className="color-secondary-800">color-secondary-800</span>
             </li>
             <li>
-              <span className="color-primary-900">color-primary-900</span>
+              <span className="color-secondary-900">color-secondary-900</span>
             </li>
           </ul>
         </Col>
@@ -89,19 +89,25 @@ export const UtilityClasses = () => {
               <span className="color-secondary">secondary</span>
             </li>
             <li>
-              <span className="color-gray">gray</span>
+              <span className="color-tertiary">tertiary</span>
             </li>
             <li>
-              <span className="color-steel">steel</span>
+              <span className="color-gray">gray</span>
             </li>
             <li>
-              <span className="color-green">green</span>
+              <span className="color-red">red</span>
             </li>
             <li>
               <span className="color-orange">orange</span>
             </li>
             <li>
-              <span className="color-red">red</span>
+              <span className="color-yellow">yellow</span>
+            </li>
+            <li>
+              <span className="color-green">green</span>
+            </li>
+            <li>
+              <span className="color-purple">purple</span>
             </li>
           </ul>
         </Col>
@@ -123,6 +129,9 @@ export const UtilityClasses = () => {
             <li>
               <span className="color-error">error</span>
             </li>
+            <li>
+              <span className="color-brand">brand</span>
+            </li>
             <li>
               <span className="active-link-color">active-link-color</span>
             </li>

package/src/stylesAndAnimations/colors/constants.ts

@@ -1,5 +1,15 @@
-export const colorList = ['primary', 'secondary', 'gray', 'steel', 'red', 'orange', 'green'];
-export const utilityColorList = ['success', 'info', 'neutral', 'warning', 'error'];
+export const colorList = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'gray',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'purple',
+];
+export const utilityColorList = ['success', 'info', 'neutral', 'warning', 'error', 'brand'];
 export const lightThemeColors = {
   primary: {
     base: '#6833D0',
@@ -25,6 +35,18 @@ export const lightThemeColors = {
     800: '#004EAC',
     900: '#004393',
   },
+  tertiary: {
+    base: '#0070F5',
+    100: '#DCEAFD',
+    200: '#B3D4FC',
+    300: '#7AB5FA',
+    400: '#4797F5',
+    500: '#0070F5',
+    600: '#0067E1',
+    700: '#005AC4',
+    800: '#004EAC',
+    900: '#004393',
+  },
   gray: {
     base: '#444444',
     100: '#EEEEEE',
@@ -37,29 +59,17 @@ export const lightThemeColors = {
     800: '#1F1F1F',
     900: '#141414',
   },
-  steel: {
-    base: '#7C8594',
-    100: '#F4F6F8',
-    200: '#D9DEE5',
-    300: '#BCC3CD',
-    400: '#A0A9B5',
-    500: '#7C8594',
-    600: '#5F697A',
-    700: '#454E5E',
-    800: '#2D3444',
-    900: '#1B202C',
-  },
-  green: {
-    base: '#008A00',
-    100: '#D6ECD6',
-    200: '#99D099',
-    300: '#66B966',
-    400: '#33A133',
-    500: '#008A00',
-    600: '#007C00',
-    700: '#006E00',
-    800: '#006100',
-    900: '#005300',
+  red: {
+    base: '#E72326',
+    100: '#FFD6D6',
+    200: '#F49EA0',
+    300: '#EF696B',
+    400: '#EB4649',
+    500: '#E72326',
+    600: '#D52023',
+    700: '#C21D20',
+    800: '#B01B1D',
+    900: '#9D181A',
   },
   orange: {
     base: '#FFA424',
@@ -73,17 +83,41 @@ export const lightThemeColors = {
     800: '#CC831D',
     900: '#B37319',
   },
-  red: {
-    base: '#E72326',
-    100: '#FFD6D6',
-    200: '#F49EA0',
-    300: '#EF696B',
-    400: '#EB4649',
-    500: '#E72326',
-    600: '#D52023',
-    700: '#C21D20',
-    800: '#B01B1D',
-    900: '#9D181A',
+  yellow: {
+    base: '#F29C22',
+    100: '#FFF9D6',
+    200: '#FFEDAC',
+    300: '#FFE182',
+    400: '#FFD558',
+    500: '#F29C22',
+    600: '#E69420',
+    700: '#CC831D',
+    800: '#B37319',
+    900: '#9D6616',
+  },
+  green: {
+    base: '#008A00',
+    100: '#D6ECD6',
+    200: '#99D099',
+    300: '#66B966',
+    400: '#33A133',
+    500: '#008A00',
+    600: '#007C00',
+    700: '#006E00',
+    800: '#006100',
+    900: '#005300',
+  },
+  purple: {
+    base: '#8B60C7',
+    100: '#ECE2FA',
+    200: '#D5C4F5',
+    300: '#BAA1E9',
+    400: '#8C64DB',
+    500: '#6833D0',
+    600: '#5E2EBB',
+    700: '#5329A6',
+    800: '#492492',
+    900: '#3E1F7D',
   },
   utility: {
     success: '#168116',
@@ -91,100 +125,135 @@ export const lightThemeColors = {
     neutral: '#BFC1C3',
     warning: '#C7892F',
     error: '#D52023',
+    brand: '#0070F5',
   },
 } as Record<string, any>;
 
 export const darkThemeColors = {
   primary: {
-    base: '#262c3a',
-    100: '#8194c0',
-    200: '#5b6b8f',
-    300: '#3b455e',
-    400: '#323a4d',
-    500: '#262c3a',
-    600: '#1f2431',
-    700: '#1c2632',
-    800: '#1b202c',
+    50: '#bcc7da',
+    100: '#7989b5',
+    200: '#8593b3',
+    300: '#7488a4',
+    400: '#5c708c',
+    500: '#394c6b',
+    600: '#233346',
+    700: '#182432',
+    800: '#101a26',
     900: '#141b24',
+    950: '#0c141d',
   },
   secondary: {
-    base: '#0070f5',
-    100: '#dceafd',
-    200: '#b3d4fc',
-    300: '#7ab5fa',
-    400: '#4797f5',
-    500: '#0070f5',
-    600: '#0067e1',
-    700: '#005ac4',
-    800: '#004eac',
-    900: '#004393',
+    50: '#bddffa',
+    100: '#83c5f6',
+    200: '#68afee',
+    300: '#66a2d5',
+    400: '#36a1ea',
+    500: '#198bdc',
+    600: '#0070f5',
+    700: '#0c6ebd',
+    800: '#0b5899',
+    900: '#002c4e',
+    950: '#112341',
+  },
+  tertiary: {
+    50: '#dae3eb',
+    100: '#c2d4df',
+    200: '#a3b2c9',
+    300: '#8593b3',
+    400: '#656f82',
+    450: '#4d5667',
+    500: '#40464e',
+    600: '#334154',
+    700: '#3b415b',
+    800: '#344152',
+    900: '#2d3444',
+    950: '#283243',
   },
   gray: {
-    base: '#bfc1c3',
+    50: '#f6f6f6',
     100: '#efefef',
-    200: '#eaeaea',
-    300: '#dcdcdc',
-    400: '#d2d2d2',
-    500: '#bfc1c3',
-    600: '#a0a0a0',
-    700: '#828588',
-    800: '#797979',
-    900: '#585858',
-  },
-  steel: {
-    base: '#3e4751',
-    100: '#9aa1b1',
-    200: '#7c8594',
-    300: '#6a717e',
-    400: '#545c67',
-    500: '#3e4751',
-    600: '#2d3444',
-    700: '#232a3a',
-    800: '#1a202f',
-    900: '#11161f',
+    200: '#dcdcdc',
+    300: '#bdbdbd',
+    400: '#989898',
+    450: '#737373',
+    500: '#525252',
+    600: '#404040',
+    700: '#262626',
+    800: '#171717',
+    900: '#0a0a0a',
   },
-  green: {
-    base: '#199d19',
-    100: '#98ff98',
-    200: '#76ff76',
-    300: '#63eb63',
-    400: '#41ca41',
-    500: '#199d19',
-    600: '#168116',
-    700: '#106710',
-    800: '#0d5a0d',
-    900: '#0a500a',
+  red: {
+    50: '#fcf5f4',
+    100: '#fae9e9',
+    200: '#f4d7d8',
+    300: '#ebb6b8',
+    400: '#df8d91',
+    500: '#ce6068',
+    600: '#b94553',
+    700: '#9b3544',
+    800: '#822f3e',
+    900: '#702b39',
+    950: '#3e131b',
   },
   orange: {
-    base: '#da9534',
-    100: '#ffd599',
-    200: '#ffc676',
-    300: '#f7b75b',
-    400: '#f1ab48',
-    500: '#da9534',
-    600: '#c7892f',
-    700: '#a87428',
-    800: '#825b22',
-    900: '#68481a',
+    50: '#fff5ed',
+    100: '#fee9d6',
+    200: '#fcceac',
+    300: '#faac77',
+    400: '#f67e41',
+    500: '#f46325',
+    600: '#e54311',
+    700: '#be3010',
+    800: '#972815',
+    900: '#792315',
+    950: '#420f08',
   },
-  red: {
-    base: '#f44d4f',
-    100: '#ffa9aa',
-    200: '#ff8a8b',
-    300: '#ff7577',
-    400: '#ff6466',
-    500: '#f44d4f',
-    600: '#cf4244',
-    700: '#b4393a',
-    800: '#9a3132',
-    900: '#752324',
+  yellow: {
+    50: '#fbf7eb',
+    100: '#f5edcc',
+    200: '#ecd99c',
+    300: '#deb650',
+    400: '#d7a438',
+    500: '#f29c22',
+    600: '#c88e2a',
+    700: '#ac6e22',
+    800: '#80670c',
+    900: '#463703',
+    950: '#312602',
+  },
+  green: {
+    50: '#a9f1ce',
+    100: '#71e4b3',
+    200: '#14b8a6',
+    300: '#03aaaa',
+    400: '#38cf94',
+    500: '#15b77d',
+    600: '#099263',
+    700: '#087950',
+    800: '#085d43',
+    900: '#084c38',
+    950: '#032b20',
+  },
+  purple: {
+    50: '#f7f6fc',
+    100: '#f1edfa',
+    200: '#e4dff5',
+    300: '#cfc4ee',
+    400: '#b6a3e2',
+    500: '#9776d3',
+    600: '#8b60c7',
+    700: '#7a4eb3',
+    800: '#664196',
+    900: '#55377b',
+    950: '#352253',
   },
   utility: {
-    success: '#199D19',
-    info: '#0070F5',
-    neutral: '#BFC1C3',
-    warning: '#DA9534',
-    error: '#F44D4F',
+    success: '#15b77d',
+    info: '#198bdc',
+    neutral: '#dcdcdc',
+    warning: '#f29c22',
+    error: '#ce6068',
+    brand: '#0070f5',
   },
 } as Record<string, any>;
-export const shades = 9;

package/src/stylesAndAnimations/sizing/Sizing.tsx

@@ -3,8 +3,8 @@ import '../../styles/_borders.scss';
 export const Sizing = () => {
   return (
     <>
-      <p className="ma-2 border border-gray-800">ma-2</p>
-      <div className="pa-2  border border-gray-800">pa-2</div>
+      <p className="ma-2 border border-gray-300">ma-2</p>
+      <div className="pa-2  border border-gray-300">pa-2</div>
     </>
   );
 };

package/src/types.ts

@@ -5,20 +5,14 @@ export type PermafrostComponent = {
   'data-testid'?: string;
 };
 
-// TODO: Deprecrate, these are legacy types
-export type ButtonVariant = 'default' | 'primary' | 'destructive';
-export type ButtonSize = 'normal' | 'large';
-
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
 export type { TableProps, TableColumn, Direction, Alignment };
 
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
-
 import { PillColor, PillSize } from './components/pill/types';
 export type { PillColor, PillSize };

package/lib/assets/fonts/mulish/mulish.css

@@ -1,98 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Mulish';
-  font-style: italic;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./a.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Mulish';
-  font-style: italic;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./a.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Mulish';
-  font-style: italic;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./a.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
-    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Mulish';
-  font-style: italic;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./a.woff2') format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Mulish';
-  font-style: italic;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./b.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-    U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Mulish';
-  font-style: normal;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./c.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Mulish';
-  font-style: normal;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./c.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Mulish';
-  font-style: normal;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./c.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
-    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Mulish';
-  font-style: normal;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./c.woff2') format('woff2');
-  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Mulish';
-  font-style: normal;
-  font-weight: 200 1000;
-  font-display: swap;
-  src: url('./d.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-    U+FFFD;
-}

package/lib/legacy/components/Accordion/Accordion.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { PermafrostComponent } from '@/types';
-type Props = PermafrostComponent & {
-    content: React.ReactNode;
-    header?: React.ReactNode | string;
-    open?: boolean;
-};
-export declare const Accordion: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/legacy/components/Accordion/Accordion.stories.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import type { StoryObj } from '@storybook/react';
-import { Accordion } from './Accordion';
-declare const meta: {
-    component: (props: import("../../../types").PermafrostComponent & {
-        content: React.ReactNode;
-        header?: React.ReactNode | string;
-        open?: boolean;
-    }) => import("react/jsx-runtime").JSX.Element;
-    title: string;
-    argTypes: {};
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        id?: string;
-        className?: string;
-        'data-cy'?: string;
-        'data-testid'?: string;
-        content: React.ReactNode;
-        header?: React.ReactNode | string;
-        open?: boolean;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-export declare const Normal: Story;
-export declare const WithHeader: Story;

package/lib/legacy/components/Accordion/Accordion.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledAccordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, never>> & string;

package/lib/legacy/components/Accordion/index.d.ts

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

package/lib/legacy/components/ListTable/Header/Header.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-type Props = {
-    title: string;
-    headerComponent?: React.ReactNode;
-    sortBy?: {
-        value: string;
-        items: {
-            name: string;
-            value: string;
-        }[];
-        descending: boolean;
-        updateDescending: () => void;
-        onSort: (value: string) => void;
-    };
-    aggregateCount?: number;
-    selectProps?: {
-        'data-cy': string;
-    };
-};
-export declare const Header: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/legacy/components/ListTable/Header/Header.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;