@indico-data/design-system 1.0.57 → 2.0.0

package/src/styles/variables/themes/dark.scss

@@ -0,0 +1,89 @@
+:root [data-theme="dark"] {
+
+  // Primary Color
+  --pf-primary-color: #27374D;
+
+  --pf-primary-color-100: #E2E4E8;
+  --pf-primary-color-200: #B6BAC1;
+  --pf-primary-color-300: #898F9A;
+  --pf-primary-color-400: #5D6573;
+  --pf-primary-color-500: #27374D;
+  --pf-primary-color-600: #202C3A;
+  --pf-primary-color-700: #192228;
+  --pf-primary-color-800: #131816;
+  --pf-primary-color-900: #0D0E0E;
+
+// Secondary Color
+  --pf-secondary-color: #526D82;
+
+  --pf-secondary-color-100: #E6E9EB;
+  --pf-secondary-color-200: #C0C7CD;
+  --pf-secondary-color-300: #99A5AF;
+  --pf-secondary-color-400: #738491;
+  --pf-secondary-color-500: #526D82;
+  --pf-secondary-color-600: #3F5866;
+  --pf-secondary-color-700: #2C434A;
+  --pf-secondary-color-800: #1A2E2E;
+  --pf-secondary-color-900: #071919;
+
+  // Gray Color
+  --pf-gray-color: #DDE6ED;
+
+  --pf-gray-color-100: #F7F9FA;
+  --pf-gray-color-200: #EAF2F5;
+  --pf-gray-color-300: #DDE6ED;
+  --pf-gray-color-400: #D1DAE5;
+  --pf-gray-color-500: #C4CFDD;
+  --pf-gray-color-600: #B7C3D5;
+  --pf-gray-color-700: #AAB8CD;
+  --pf-gray-color-800: #9DACB5;
+  --pf-gray-color-900: #90A19D;
+
+
+  //Green Color
+  --pf-green-color: #82DD55;
+
+  --pf-green-color-100: #F0FFF2;
+  --pf-green-color-200: #E1FFD5;
+  --pf-green-color-300: #D2FFB8;
+  --pf-green-color-400: #C3FF9B;
+  --pf-green-color-500: #82DD55;
+  --pf-green-color-600: #6FC94A;
+  --pf-green-color-700: #5CB53F;
+  --pf-green-color-800: #4AA134;
+  --pf-green-color-900: #388D29;
+
+
+  //Orange color
+  --pf-orange-color: #EDB95E;
+
+  --pf-orange-color-100: #FFF7E6;
+  --pf-orange-color-200: #FFEDCC;
+  --pf-orange-color-300: #FFE4B2;
+  --pf-orange-color-400: #FFDA99;
+  --pf-orange-color-500: #EDB95E;
+  --pf-orange-color-600: #DAA54D;
+  --pf-orange-color-700: #C7913D;
+  --pf-orange-color-800: #B47D2D;
+  --pf-orange-color-900: #A1691D;
+
+
+  //Red color
+  --pf-red-color: #E23636;
+
+  --pf-red-color-100: #FDECEC;
+  --pf-red-color-200: #FBD1D1;
+  --pf-red-color-300: #F9B6B6;
+  --pf-red-color-400: #F79B9B;
+  --pf-red-color-500: #E23636;
+  --pf-red-color-600: #C72F2F;
+  --pf-red-color-700: #AC2828;
+  --pf-red-color-800: #912121;
+  --pf-red-color-900: #761A1A;
+
+  // Utility Colors
+  --pf-error-color: var(--pf-red-color);
+  --pf-success-color: var(--pf-green-color);
+  --pf-warning-color: var(--pf-orange-color);
+  --pf-info-color: var(--pf-gray-color);
+}

package/src/styles/variables/themes/light.scss

@@ -0,0 +1,87 @@
+:root [data-theme='light'],
+:root {
+  // Primary Color
+  --pf-primary-color: #6833d0;
+
+  --pf-primary-color-100: #f0ebfa;
+  --pf-primary-color-200: #d5c6f2;
+  --pf-primary-color-300: #baa1e9;
+  --pf-primary-color-400: #8c64db;
+  --pf-primary-color-500: #6833d0;
+  --pf-primary-color-600: #5e2ebb;
+  --pf-primary-color-700: #5329a6;
+  --pf-primary-color-800: #492492;
+  --pf-primary-color-900: #3e1f7d;
+
+  // Secondary Color
+  --pf-secondary-color: #0070f5;
+  --pf-secondary-color-100: #dceafd;
+  --pf-secondary-color-200: #b3d4fc;
+  --pf-secondary-color-300: #7ab5fa;
+  --pf-secondary-color-400: #4797f5;
+  --pf-secondary-color-500: #0070f5;
+  --pf-secondary-color-600: #0067e1;
+  --pf-secondary-color-700: #005ac4;
+  --pf-secondary-color-800: #004eac;
+  --pf-secondary-color-900: #004393;
+
+  //Gray Color
+  --pf-gray-color: #444444;
+
+  --pf-gray-color-100: #eeeeee;
+  --pf-gray-color-200: #d0d0d0;
+  --pf-gray-color-300: #a9a9a9;
+  --pf-gray-color-400: #737373;
+  --pf-gray-color-500: #444444;
+  --pf-gray-color-600: #373737;
+  --pf-gray-color-700: #2c2c2c;
+  --pf-gray-color-800: #1f1f1f;
+  --pf-gray-color-900: #141414;
+
+  //Green Color *do success warning etc etc
+  --pf-green-color: #008a00;
+  --pf-green-color-100: #d6ecd6;
+  --pf-green-color-200: #99d099;
+  --pf-green-color-300: #66b966;
+  --pf-green-color-400: #33a133;
+  --pf-green-color-500: #008a00;
+  --pf-green-color-600: #007c00;
+  --pf-green-color-700: #006e00;
+  --pf-green-color-800: #006100;
+  --pf-green-color-900: #005300;
+
+  //Orange color
+  --pf-orange-color: #ffa424;
+  --pf-orange-color-100: #ffdfb2;
+  --pf-orange-color-200: #ffd292;
+  --pf-orange-color-300: #ffc471;
+  --pf-orange-color-400: #ffb650;
+  --pf-orange-color-500: #ffa424;
+  --pf-orange-color-600: #f29c22;
+  --pf-orange-color-700: #e69420;
+  --pf-orange-color-800: #cc831d;
+  --pf-orange-color-900: #b37319;
+
+  //Red color
+  --pf-red-color: #e72326;
+  --pf-red-color-100: #ffd6d6;
+  --pf-red-color-200: #f49ea0;
+  --pf-red-color-300: #ef696b;
+  --pf-red-color-400: #eb4649;
+  --pf-red-color-500: #e72326;
+  --pf-red-color-600: #d52023;
+  --pf-red-color-700: #c21d20;
+  --pf-red-color-800: #b01b1d;
+  --pf-red-color-900: #9d181a;
+
+  //White color
+  --pf-white-color: #ffffff;
+
+  // Utility Colors
+  --pf-error-color: var(--pf-red-color);
+  --pf-success-color: var(--pf-green-color);
+  --pf-warning-color: var(--pf-orange-color);
+  --pf-info-color: var(--pf-gray-color);
+  --pf-link-color: var(--pf-secondary-color);
+  --pf-link-hover-color: var(--pf-secondary-color-400);
+}

package/src/stylesAndAnimations/borders/BorderColor.stories.tsx

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

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import '../../styles/_borders.scss';
+import './borders.scss';
+
+export const BorderColor = () => {
+  return (
+    <div className="sb__border-story">
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-primary"></div>
+        <p className="text-align--center">border-primary</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-secondary"></div>
+        <p className="text-align--center">border-secondary</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-gray"></div>
+        <p className="text-align--center">border-gray</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-green"></div>
+        <p className="text-align--center">border-green</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-red"></div>
+        <p className="text-align--center">border-red</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-orange"></div>
+        <p className="text-align--center">border-orange</p>
+      </div>
+    </div>
+  );
+};

package/src/stylesAndAnimations/borders/BorderRadius.stories.tsx

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

package/src/stylesAndAnimations/borders/BorderRadius.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import '../../styles/_borders.scss';
+import './borders.scss';
+
+export const BorderRadius = () => {
+  return (
+    <div className="sb__border-story">
+      <div>
+        <div className="sb__square bg-gray-800 rounded"></div>
+        <p className="text-align--center">rounded</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-0"></div>
+        <p className="text-align--center">rounded-0</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-sm"></div>
+        <p className="text-align--center">rounded-sm</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-md"></div>
+        <p className="text-align--center">rounded-md</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-lg"></div>
+        <p className="text-align--center">rounded-lg</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-xl"></div>
+        <p className="text-align--center">rounded-xl</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-pill"></div>
+        <p className="text-align--center">rounded-pill</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-circle"></div>
+        <p className="text-align--center">rounded-circle</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 rounded-shaped"></div>
+        <p className="text-align--center">rounded-shaped</p>
+      </div>
+    </div>
+  );
+};

package/src/stylesAndAnimations/borders/BorderStyles.stories.tsx

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

package/src/stylesAndAnimations/borders/BorderStyles.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import '../../styles/_borders.scss';
+import './borders.scss';
+
+export const BorderStyles = () => {
+  return (
+    <div className="sb__border-story">
+      <div>
+        <div className="sb__square bg-gray-800 border-dotted"></div>
+        <p className="text-align--center">border-dotted</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-dashed"></div>
+        <p className="text-align--center">border-dashed</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-solid"></div>
+        <p className="text-align--center">border-solid</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-double"></div>
+        <p className="text-align--center">border-double</p>
+      </div>
+    </div>
+  );
+};

package/src/stylesAndAnimations/borders/BorderThickness.stories.tsx

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

package/src/stylesAndAnimations/borders/BorderThickness.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import '../../styles/_borders.scss';
+import './borders.scss';
+
+export const BorderThickness = () => {
+  return (
+    <div className="sb__border-story">
+      <div>
+        <div className="sb__square bg-gray-800 border-red border"></div>
+        <p className="text-align--center">border</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-0"></div>
+        <p className="text-align--center">border-0</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-thin"></div>
+        <p className="text-align--center">border-thin</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-sm"></div>
+        <p className="text-align--center">border-sm</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-md"></div>
+        <p className="text-align--center">border-md</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-lg"></div>
+        <p className="text-align--center">border-lg</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-xl"></div>
+        <p className="text-align--center">border-xl</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-t-xl"></div>
+        <p className="text-align--center">border-t-xl</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-b-md"></div>
+        <p className="text-align--center">border-b-md</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border-red border-r-0"></div>
+        <p className="text-align--center">border-r-0</p>
+      </div>
+    </div>
+  );
+};

package/src/stylesAndAnimations/borders/Borders.mdx

@@ -0,0 +1,32 @@
+import '../../styles/_borders.scss';
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as BorderColor from './BorderColor.stories';
+import * as BorderStyles from './BorderStyles.stories';
+import * as BorderRadius from './BorderRadius.stories';
+import * as BorderThickness from './BorderThickness.stories';
+
+<Meta title="Utility Classes/Borders" />
+
+# Borders 
+
+All borders with the exception of `border-style` come with the default value of `border-style: solid` applied.
+
+### Colors
+
+The examples below pull from the color variables set. You can apply the classes to an element to apply that border colorList.
+
+<Canvas of={BorderColor.Default} />
+
+### Styles
+
+<Canvas of={BorderStyles.Default} />
+
+### Border Radius
+
+<Canvas of={BorderRadius.Default} />
+
+### Border Thickness
+
+The border thickness utility class work similar to our margin and padding, where we follow this pattern `border-{style}` for all the directions and `border-{side}-{style}` for everything else. Below are just some of the combinations you could achieve with this pattern.
+
+<Canvas of={BorderThickness.Default} />

package/src/stylesAndAnimations/borders/borders.scss

@@ -0,0 +1,13 @@
+
+.sb__square {
+  height: 100px;
+  width: 150px;
+  color: white;
+  margin: 10px;
+  padding: 10px;
+}
+
+.sb__border-story {
+  display: flex;
+  flex-wrap: wrap;
+}

package/src/stylesAndAnimations/borders/index.ts

@@ -0,0 +1,4 @@
+export { BorderColor } from './BorderColor';
+export { BorderStyles } from './BorderStyles';
+export { BorderRadius } from './BorderRadius';
+export { BorderThickness } from './BorderThickness';

package/src/stylesAndAnimations/colors/Colors.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Colors from './Colors.stories';
+ 
+ <Meta title="Styles And Animations/Colors And Swatches" />
+ # Colors
+
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-grid-system';
+import { colorList, darkThemeColors, lightThemeColors, shades } from './constants';
+import { Swatch } from './Swatch';
+import { useTheme } from './hooks'; // import the custom hook
+
+export const Colors = () => {
+  const theme = useTheme(); // use the custom hook
+
+  const themeColors = theme === 'dark' ? darkThemeColors : lightThemeColors;
+
+  return (
+    <Container>
+      <Row>
+        {colorList.map((color) => {
+          return (
+            <Col sm={4} key={color}>
+              <h1 className="text-capitalize my-5">{color}</h1>
+              {Array.from({ length: shades }, (_, i) => (i + 1) * 100).map((shade) => {
+                const colorValue = themeColors[color][shade];
+                return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
+              })}
+            </Col>
+          );
+        })}
+      </Row>
+    </Container>
+  );
+};

package/src/stylesAndAnimations/colors/Swatch.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './swatches.scss';
+import { Row, Col } from 'react-grid-system';
+interface Props {
+  color: string;
+  shade: number;
+  colorValue: string;
+}
+
+export const Swatch = ({ color, shade, colorValue }: Props) => {
+  const handleCopy = (colorValue: string) => {
+    navigator.clipboard.writeText(colorValue);
+  };
+
+  return (
+    <Row className="sb__swatch" key={shade} onClick={() => handleCopy(colorValue)}>
+      <Col xs="content">
+        <div className={`sb__swatch__block bg-${color}-${shade}`}></div>
+      </Col>
+      <Col className="sb__swatch__description">
+        {shade} - {colorValue}
+      </Col>
+    </Row>
+  );
+};

package/src/stylesAndAnimations/colors/UtilityClasses.mdx

@@ -0,0 +1,10 @@
+import '../../styles/_colors.scss';
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as UtilityClasses from './UtilityClasses.stories';
+
+{' '}
+<Meta title="Utility Classes/Colors" />
+# Color Utility Classes 
+
+The following pattern is to be used as a method of styling your elements with the colors listed below. We support ***100 to 900*** for our variable ranges.
+<Canvas of={UtilityClasses.Default} />

package/src/stylesAndAnimations/colors/UtilityClasses.stories.tsx

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

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+export const UtilityClasses = () => {
+  return (
+    <>
+      <h1>Backgrounds</h1>
+      <br />
+      <div className="bg-primary pa-2">
+        <span className="color-gray-100">bg-primary</span>
+      </div>
+      <div className="bg-primary-100 pa-2">bg-primary-100</div>
+      <div className="bg-primary-200 pa-2">bg-primary-200</div>
+      <div className="bg-primary-300 pa-2">bg-primary-300</div>
+      <div className="bg-primary-400 pa-2">bg-primary-400</div>
+      <div className="bg-primary-500 pa-2">bg-primary-500</div>
+      <div className="bg-primary-600 pa-2">
+        <span className="color-gray-10">bg-primary-600</span>
+      </div>
+      <div className="bg-primary-700 pa-2">
+        <span className="color-gray-100">bg-primary-700</span>
+      </div>
+      <div className="bg-primary-800 pa-2">
+        <span className="color-gray-100">bg-primary-800</span>
+      </div>
+      <div className="bg-primary-900 pa-2">
+        <span className="color-gray-100">bg-primary-900</span>
+      </div>
+      <br />
+      <p>
+        The above code will apply the background color of the element to the primary color 100.
+        Omitting the number will default to 500. <strong>NOTE</strong> The background classes here
+        have no `color` style, it is added for documentation contrast
+      </p>
+      <br />
+      <h1>Text</h1>
+      <ul>
+        <li>
+          <span className="color-primary">color-primary</span>
+        </li>
+        <li>
+          <span className="color-primary-100">color-primary-100</span>
+        </li>
+        <li>
+          <span className="color-primary-200">color-primary-200</span>
+        </li>
+        <li>
+          <span className="color-primary-300">color-primary-300</span>
+        </li>
+        <li>
+          <span className="color-primary-400">color-primary-400</span>
+        </li>
+        <li>
+          <span className="color-primary-500">color-primary-500</span>
+        </li>
+        <li>
+          <span className="color-primary-600">color-primary-600</span>
+        </li>
+        <li>
+          <span className="color-primary-700">color-primary-700</span>
+        </li>
+        <li>
+          <span className="color-primary-800">color-primary-800</span>
+        </li>
+        <li>
+          <span className="color-primary-900">color-primary-900</span>
+        </li>
+      </ul>
+      <p>
+        The above code will apply the text color of the element to the primary color 100. Omitting
+        the number will default to 500.
+      </p>
+      <br />
+      <h2>Available Colors</h2>
+      <ul>
+        <li>
+          <span className="color-primary">primary</span>
+        </li>
+        <li>
+          <span className="color-secondary">secondary</span>
+        </li>
+        <li>
+          <span className="color-gray">gray</span>
+        </li>
+        <li>
+          <span className="color-green">green</span>
+        </li>
+        <li>
+          <span className="color-orange">orange</span>
+        </li>
+        <li>
+          <span className="color-red">red</span>
+        </li>
+      </ul>
+    </>
+  );
+};