@indico-data/design-system 1.0.58 → 2.0.0

package/src/{components → legacy/components}/modals/ModalBase/ModalBase.stories.tsx

@@ -5,7 +5,7 @@ import { ModalBase } from './ModalBase';
 
 const meta = {
   component: ModalBase,
-  title: 'Modals/ModalBase',
+  title: 'legacy/Modals/ModalBase',
 } satisfies Meta<typeof ModalBase>;
 
 export default meta;

package/src/{components → legacy/components}/modals/ModalBase/ModalBase.styles.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import ReactModal from 'react-modal';
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
-import { colorUtils } from '@/utils';
+import { COLORS } from '@/legacy/tokens';
+import { colorUtils } from '@/legacy/utils';
 
 // see: https://github.com/reactjs/react-modal/issues/603
 function ModalAdapter(props: any): React.ReactElement {

package/src/legacy/components/text-truncate/TextTruncate.stories.tsx

@@ -0,0 +1,19 @@
+import { TextTruncate } from './TextTruncate';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof TextTruncate> = {
+  component: TextTruncate,
+  tags: ['autodocs'],
+  title: 'legacy/Text Utilities/TextTruncate',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TextTruncate>;
+
+export const Normal: Story = {
+  args: {
+    string: 'This string is being truncated for length.',
+    maxChars: 30,
+  },
+};

package/src/{components → legacy/components}/user-feedback/Shrug/Shrug.stories.tsx

@@ -6,7 +6,7 @@ import { Shrug } from './Shrug';
 
 const meta = {
   component: Shrug,
-  title: 'User Feedback/Shrug',
+  title: 'legacy/User Feedback/Shrug',
   argTypes: {},
   args: {
     message: 'There are no workflows associated with this dataset.',

package/src/{components → legacy/components}/user-feedback/Shrug/Shrug.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS, TYPOGRAPHY } from '@/tokens';
+import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
 
 export const StyledShrug = styled.div`
   display: flex;

package/src/{components → legacy/components}/user-feedback/Shrug/Shrug.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button } from '@/components/buttons';
-import { Icon } from '@/components/Icon';
+import { Button } from '@/legacy/components/buttons';
+import { Icon } from '@/legacy/components/Icon';
 import { PermafrostComponent } from '@/types';
 
 import { StyledShrug } from './Shrug.styles';

package/src/{styles → legacy/styles}/globals/buttons.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle, css } from 'styled-components';
 
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/tokens';
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
 
 const buttonColor = COLORS.darkFontColor;
 const buttonBackground = COLORS.iron;

package/src/{styles → legacy/styles}/globals/forms.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/tokens';
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
 
 const formBoxShadow = 'inset 0 0 0 rgba(#000, 0)';
 const formBoxShadowFocus = formBoxShadow;

package/src/{styles → legacy/styles}/globals/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-
 import { UtilityClasses } from './utility-classes';
 import { Forms } from './forms';
-import { Buttons } from './buttons';
 import { Layout } from './layout';
 import { Lists } from './lists';
 import { Media } from './media';
@@ -13,7 +11,6 @@ import { MarginPadding } from './margin-padding';
 export const GlobalStyles = () => (
   <>
     <UtilityClasses />
-    <Buttons />
     <Forms />
     <Layout />
     <Lists />

package/src/{styles → legacy/styles}/globals/margin-padding.ts

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import { MARGINS, PADDINGS } from '@/tokens';
+import { MARGINS, PADDINGS } from '@/legacy/tokens';
 
 export const MarginPadding = createGlobalStyle`  
   .pt-md {

package/src/{styles → legacy/styles}/globals/tables.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { TYPOGRAPHY } from '@/tokens';
+import { TYPOGRAPHY } from '@/legacy/tokens';
 
 export const Tables = createGlobalStyle`
   table {

package/src/{styles → legacy/styles}/globals/typography.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/tokens';
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
 
 export const Typography = createGlobalStyle`
   html {

package/src/{styles → legacy/styles}/globals/utility-classes.ts

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 export const UtilityClasses = createGlobalStyle`
   .link-style {

package/src/styles/_borders.scss

@@ -0,0 +1,60 @@
+$sizes: thin, sm, md, lg, 0, xl;
+$values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--pf-border-lg), 0, var(--pf-border-xl);
+$directions: (
+  "t",
+  top),
+  ("b", bottom),
+  ("l", left),
+  ("r", right
+);
+$styles: dashed, dotted, double, solid;
+$color-names: "primary", "secondary", "gray", "green", "orange", "red";
+$color-grades: "100", "200", "300", "400", "500", "600", "700", "800", "900";
+$radiusSizes: 0, sm, lg, md, xl, pill, circle, shaped;
+$radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md), var(--pf-rounded-lg), var(--pf-rounded-xl), var(--pf-rounded-pill), var(--pf-rounded-circle), var(--pf-rounded-shaped);
+
+.border {
+  border: solid 1px;
+}
+
+@each $size, $value in zip($sizes, $values) {
+  .border-#{$size} {
+    border-style: solid;
+    border-width: $value;
+  }
+
+  @each $directionKey, $directionValue in $directions {
+    .border-#{$directionKey}-#{$size} {
+      border-style: solid;
+      border-#{$directionValue}-width: $value;
+    }
+  }
+}
+
+@each $style in $styles {
+  .border-#{$style} {
+    border-style: $style;
+  }
+}
+
+@each $color-name in $color-names {
+  .border-#{$color-name} {
+    border-color: var(--pf-#{$color-name}-color);
+  }
+
+  @each $color-grade in $color-grades {
+    .border-#{$color-name}-#{$color-grade} {
+      border-color: var(--pf-#{$color-name}-color-#{$color-grade});
+    }
+  }
+}
+
+.rounded {
+  border-radius: var(--pf-rounded);
+}
+
+@each $size, $value in zip($radiusSizes, $radiusValues) {
+  .rounded-#{$size} {
+    border-radius: $value;
+  }
+}

package/src/styles/_colors.scss

@@ -0,0 +1,23 @@
+
+$color-names: "primary", "secondary", "gray", "green", "orange", "red";
+$color-grades: "100", "200", "300", "400", "500", "600", "700", "800", "900";
+
+@each $color-name in $color-names {
+  .color-#{$color-name} {
+    color: var(--pf-#{$color-name}-color);
+  }
+
+  .bg-#{$color-name} {
+    background-color: var(--pf-#{$color-name}-color);
+  }
+
+  @each $color-grade in $color-grades {
+    .color-#{$color-name}-#{$color-grade} {
+      color: var(--pf-#{$color-name}-color-#{$color-grade});
+    }
+
+    .bg-#{$color-name}-#{$color-grade} {
+      background-color: var(--pf-#{$color-name}-color-#{$color-grade});
+    }
+  }
+}

package/src/styles/_margin.scss

@@ -0,0 +1,41 @@
+$sizes: auto, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$negativeSizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$classes: (
+  "ma": "margin",
+  "mx": ("margin-left", "margin-right"),
+  "my": ("margin-top", "margin-bottom"),
+  "ml": "margin-left",
+  "mr": "margin-right",
+  "mb": "margin-bottom",
+  "mt": "margin-top"
+);
+
+@each $class, $property in $classes {
+  @each $size in $sizes {
+    .#{$class}-#{$size} {
+      @if type-of($property)==list {
+        @each $prop in $property {
+          #{$prop}: var(--pf-margin-#{$size});
+        }
+      }
+
+      @else {
+        #{$property}: var(--pf-margin-#{$size});
+      }
+    }
+  }
+
+  @each $size in $negativeSizes {
+    .#{$class}-n#{$size} {
+      @if type-of($property)==list {
+        @each $prop in $property {
+          #{$prop}: var(--pf-negative-margin-#{$size});
+        }
+      }
+
+      @else {
+        #{$property}: var(--pf-negative-margin-#{$size});
+      }
+    }
+  }
+}

package/src/styles/_padding.scss

@@ -0,0 +1,26 @@
+$sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$classes: (
+  "pa": "padding",
+  "px": ("padding-left", "padding-right"),
+  "py": ("padding-top", "padding-bottom"),
+  "pl": "padding-left",
+  "pr": "padding-right",
+  "pb": "padding-bottom",
+  "pt": "padding-top"
+);
+
+@each $class, $property in $classes {
+  @each $size in $sizes {
+    .#{$class}-#{$size} {
+      @if type-of($property)==list {
+        @each $prop in $property {
+          #{$prop}: var(--pf-padding-#{$size});
+        }
+      }
+
+      @else {
+        #{$property}: var(--pf-padding-#{$size});
+      }
+    }
+  }
+}

package/src/styles/_typography.scss

@@ -0,0 +1,116 @@
+@import 'variables/typography';
+
+html {
+  font-size: var(--pf-font-size-base);
+  font-family: var(--pf-font-family-base);
+}
+// Font Sizing and Family
+@each $tag, $size in (
+  h1: --pf-font-size-h1,
+  h2: --pf-font-size-h2,
+  h3: --pf-font-size-h3,
+  h4: --pf-font-size-h4,
+  h5: --pf-font-size-h5,
+  p: --pf-font-size-body) {
+
+  #{$tag},
+  .text-#{$tag} {
+    font-size: var(#{$size});
+    font-family: var(--pf-font-family-base);
+    margin: 0;
+    padding: 0;
+
+    // If the tag is not 'p', make it bold
+    @if $tag !='p' {
+      font-weight: var(--pf-font-weight-bold);
+
+    }
+  }
+}
+.subtitle {
+  font-size: var(--pf-font-size-subtitle);
+}
+.subtitle-2 {
+  font-size: var(--pf-font-size-subtitle2);
+}
+.text-body {
+  font-size: var(--pf-font-size-body);
+}
+.text-body-2 {
+  font-size: var(--pf-font-size-body2);
+}
+.text-caption {
+  font-size: var(--pf-font-size-caption);
+}
+.text-overline {
+  font-size: var(--pf-font-size-overine);
+}
+
+
+// Transform
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+// Decoration
+.text-decoration--none {
+  text-decoration: none;
+}
+.text-decoration--underline {
+  text-decoration: underline;
+}
+.text-decoration--line-through {
+  text-decoration: line-through;
+}
+.text-decoration--overline {
+  text-decoration: overline;
+}
+
+// Weight
+.text-weight--thin {
+  font-weight: var(--pf-font-weight-thin);
+}
+.text-weight--light {
+  font-weight: var(--pf-font-weight-light);
+}
+.text-weight--regular {
+  font-weight: var(--pf-font-weight-regular);
+}
+.text-weight--medium {
+  font-weight: var(--pf-font-weight-medium);
+}
+.text-weight--bold {
+  font-weight: var(--pf-font-weight-bold);
+}
+.text-weight--heavy {
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+// Alignment
+.text-align--left {
+  text-align: left;
+}
+.text-align--center {
+  text-align: center;
+}
+.text-align--right {
+  text-align: right;
+}
+
+// Opacity *0-100 in 5% increments
+@for $i from 0 through 20 {
+  .text-opacity--#{$i * 5} {
+    opacity: $i * 0.05;
+  }
+}
+
+// Word Wrap
+.text-break--word {
+  overflow-wrap: break-word;
+}

package/src/styles/animations.scss

@@ -0,0 +1,8 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,14 @@
+// Variables
+@import 'variables/index.scss';
+
+// Components
+@import '../legacy/components/Navigation/Drawer/Drawer.scss';
+@import '../components/Button/Button.scss';
+
+// Helper Classes
+@import 'typography';
+@import 'colors';
+@import 'borders';
+@import 'padding';
+@import 'margin';
+@import 'animations';

package/src/styles/variables/_borders.scss

@@ -0,0 +1,16 @@
+: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;
+}

package/src/styles/variables/_colors.scss

@@ -0,0 +1,2 @@
+@import 'themes/light.scss';
+@import 'themes/dark.scss';

package/src/styles/variables/_margin.scss

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

@@ -0,0 +1,19 @@
+: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/_typography.scss

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+:root {
+  // Family
+  --pf-font-family-base: 'Mulish', sans-serif;
+
+
+  // Sizes
+  --pf-font-size-base: 1rem;
+  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
+  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
+  --pf-font-size-h3: var(--pf-font-size-base);
+  --pf-font-size-h4: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-h5: calc(0.75 * var(--pf-font-size-base));
+  --pf-font-size-body: var(--pf-font-size-base);
+  --pf-font-size-body2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-caption: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-subtitle: var(--pf-font-size-base);
+  --pf-font-size-subtitle2: calc(0.875 * var(--pf-font-size-base));
+  --pf-font-size-button: var(--pf-font-size-base);
+  --pf-font-size-overine: calc(0.75 * var(--pf-font-size-base));
+
+  // Weights
+  --pf-font-weight-thin: 100;
+  --pf-font-weight-light: 300;
+  --pf-font-weight-regular: 400;
+  --pf-font-weight-medium: 500;
+  --pf-font-weight-bold: 700;
+  --pf-font-weight-heavy: 900;
+
+}

package/src/styles/variables/index.scss

@@ -0,0 +1,5 @@
+@import 'typography';
+@import 'colors';
+@import 'borders';
+@import 'padding';
+@import 'margin';

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);
+}