@indico-data/design-system 2.43.0 → 2.44.0

package/src/components/forms/textarea/styles/Textarea.scss

@@ -1,48 +1,5 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  // Typography
-  --pf-textarea-background-color: var(--pf-white-color);
-  --pf-textarea-text-color: var(--pf-gray-color);
-  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
-  --pf-textarea-help-text-color: var(--pf-gray-color-400);
-  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
-  --pf-textarea-border-color: var(--pf-form-input-border-color);
-  --pf-textarea-disabled-color: var(--pf-gray-color-400);
-
-  // textarea Radius
-  --pf-textarea-rounded: var(--pf-rounded);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-textarea-background-color: var(--pf-primary-color);
-  --pf-textarea-border-color: var(--pf-form-input-border-color);
-  --pf-textarea-text-color: var(--pf-gray-color-100);
-  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
-  --pf-textarea-help-text-color: var(--pf-gray-color-200);
-  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
-  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
-  --pf-textarea-disabled-color: var(--pf-gray-color-400);
-}
-
 .textarea {
-  background-color: var(--pf-textarea-background-color);
-  border: 1px solid var(--pf-textarea-border-color);
-  border-radius: var(--pf-textarea-rounded);
-  color: var(--pf-textarea-text-color);
   padding: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  &::placeholder {
-    color: var(--pf-textarea-placeholder-text-color);
-  }
-
-  &:focus {
-    border-color: var(--pf-primary-color);
-  }
-
   &.error {
     border-color: var(--pf-error-color);
   }
@@ -59,11 +16,6 @@
     border-color: var(--pf-info-color);
   }
 
-  &:disabled {
-    background-color: var(--pf-textarea-disabled-background-color);
-    border-color: var(--pf-textarea-disabled-border-color);
-    color: var(--pf-textarea-disabled-color);
-  }
   &--has-icon {
     padding-left: var(--pf-padding-7);
   }
@@ -81,7 +33,7 @@
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);
-    color: var(--pf-textarea-help-text-color);
+    color: var(--pf-form-input-help-color);
     font-size: var(--pf-font-size-subtitle2);
   }
   .form-label {

package/src/components/forms/toggle/styles/Toggle.scss

@@ -1,22 +1,22 @@
 // Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-toggle-background-color: var(--pf-gray-color-200);
+
+:root [data-theme='light'] {
+  --pf-toggle-background-color: var(--pf-form-input-background-color);
   --pf-toggle-circle-color: var(--pf-primary-color);
   --pf-toggle-border-color: var(--pf-form-input-border-color);
-  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
-  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
-  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
+  --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
+  --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
+  --pf-toggle-checked-background-color: var(--pf-primary-color-300);
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-toggle-background-color: var(--pf-primary-color-100);
+:root [data-theme='dark'],
+:root {
+  --pf-toggle-background-color: var(--pf-form-input-background-color);
   --pf-toggle-circle-color: var(--pf-white-color);
-  --pf-toggle-border-color: var(--pf-form-input-border-color);
-  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
-  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
+  --pf-toggle-border-color: var(--pf-primary-color);
+  --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
+  --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
   --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
 }
 .switch {
@@ -28,6 +28,7 @@
   border-radius: 20px;
   transition: all 0.3s;
   cursor: pointer;
+  border: 1px solid var(--pf-toggle-border-color);
 }
 .switch::after {
   content: '';

package/src/components/grid/styles/Grid.scss

@@ -6,10 +6,10 @@
 }
 
 .sb__sample-cell {
-  @include sample-cell-style(pf-primary-color-400, pf-gray-color);
+  @include sample-cell-style(pf-secondary-color-550, pf-white-color);
 
   &-secondary {
-    @include sample-cell-style(pf-secondary-color-400, pf-gray-color);
+    @include sample-cell-style(pf-secondary-color-400, pf-white-color);
   }
 
   &-green {
@@ -21,7 +21,7 @@
   }
 
   &-red {
-    @include sample-cell-style(pf-red-color-400, pf-gray-color);
+    @include sample-cell-style(pf-red-color-400, pf-white-color);
   }
 }
 

package/src/components/icons/__tests__/Icon.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Icon } from '@/components';
+import { Icon } from '@/components/icons/Icon';
 
 describe('Icon Component', () => {
   describe('FontAwesome Icons', () => {

package/src/components/menu/Menu.stories.tsx

@@ -30,7 +30,7 @@ export const Default: Story = {
       <Button
         data-testid="refresh-library"
         ariaLabel="Refresh Data"
-        iconName="retrain"
+        iconLeft="retrain"
         onClick={() => console.log('Refresh Data')}
       >
         Refresh Data
@@ -38,7 +38,7 @@ export const Default: Story = {
       <Button
         data-testid="configure-fields"
         ariaLabel="Configure Fields"
-        iconName="edit"
+        iconLeft="edit"
         onClick={() => console.log('Configure Fields')}
       >
         Configure Fields
@@ -46,7 +46,7 @@ export const Default: Story = {
       <Button
         data-testid="delete-library"
         ariaLabel="Delete Library"
-        iconName="trash"
+        iconLeft="trash"
         onClick={() => console.log('Delete Library')}
       >
         Delete Library

package/src/components/menu/Menu.test.tsx

@@ -7,13 +7,13 @@ describe('Menu Component', () => {
   it('renders children inside of the menu', () => {
     render(
       <Menu>
-        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconLeft="retrain">
           Refresh Data
         </Button>
-        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconLeft="edit">
           Configure Fields
         </Button>
-        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconLeft="trash">
           Delete Library
         </Button>
       </Menu>,
@@ -26,13 +26,13 @@ describe('Menu Component', () => {
   it('applies the menu-item class to its children', () => {
     render(
       <Menu>
-        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconLeft="retrain">
           Refresh Data
         </Button>
-        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconLeft="edit">
           Configure Fields
         </Button>
-        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconLeft="trash">
           Delete Library
         </Button>
       </Menu>,
@@ -53,7 +53,7 @@ describe('Menu Component', () => {
         <Button
           data-testid="refresh-library"
           ariaLabel="Refresh Data"
-          iconName="retrain"
+          iconLeft="retrain"
           onClick={mockRefresh}
         >
           Refresh Data
@@ -61,7 +61,7 @@ describe('Menu Component', () => {
         <Button
           data-testid="configure-fields"
           ariaLabel="Configure Fields"
-          iconName="edit"
+          iconLeft="edit"
           onClick={mockConfigure}
         >
           Configure Fields
@@ -69,7 +69,7 @@ describe('Menu Component', () => {
         <Button
           data-testid="delete-library"
           ariaLabel="Delete Library"
-          iconName="trash"
+          iconLeft="trash"
           onClick={mockDelete}
         >
           Delete Library

package/src/components/menu/styles/Menu.scss

@@ -15,5 +15,10 @@
     &:hover {
       background: var(--pf-menu-item-hover-color);
     }
+
+    box-shadow: none;
+    &:focus {
+      background-color: var(--pf-menu-item-focus-color);
+    }
   }
 }

package/src/components/menu/styles/_variables.scss

@@ -1,15 +1,20 @@
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
+:root {
   --pf-menu-rounded: var(--pf-rounded);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
   --pf-menu-item-hover-color: var(--pf-primary-color-100);
   --pf-menu-item-background-color: var(--pf-white-color);
   --pf-menu-item-color: var(--pf-gray-color);
+  --pf-menu-item-focus-color: var(--pf-primary-color-300);
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-menu-item-hover-color: var(--pf-primary-color-300);
+:root [data-theme='dark'],
+:root {
+  --pf-menu-item-hover-color: var(--pf-primary-color-500);
   --pf-menu-item-background-color: var(--pf-primary-color-600);
-  --pf-menu-item-color: var(--pf-gray-color-100);
+  --pf-menu-item-color: var(--pf-gray-color-50);
+  --pf-menu-item-focus-color: var(--pf-primary-color-500);
 }

package/src/components/pill/styles/Pill.scss

@@ -1,7 +1,5 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
+// Light Theme Specific Variables
+:root [data-theme='light'] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
   --pf-pill-primary-border-color: var(--pf-primary-color);
@@ -32,7 +30,8 @@
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   --pf-pill-primary-background-color: var(--pf-primary-color-900);
   --pf-pill-primary-font-color: var(--pf-white-color);
   --pf-pill-primary-border-color: var(--pf-primary-color-100);

package/src/components/skeleton/styles/Skeleton.scss

@@ -8,8 +8,8 @@
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-skeleton-color-one: var(--pf-primary-color-200);
-  --pf-skeleton-color-two: var(--pf-primary-color-100);
+  --pf-skeleton-color-one: var(--pf-primary-color-500);
+  --pf-skeleton-color-two: var(--pf-primary-color-400);
 }
 
 .skeleton {

package/src/components/table/LoadingComponent.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const LoadingComponent = () => {
   return <div className="table-loading">Loading...</div>;
 };

package/src/components/table/styles/Table.scss

@@ -1,7 +1,13 @@
 @import 'variables.scss';
 
 .table-loading {
+  background-color: var(--pf-table-background-color);
   color: var(--pf-table-font-color);
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .table {

package/src/components/table/styles/_variables.scss

@@ -1,5 +1,5 @@
 // Light Theme Specific Variables
-:root,
+
 :root [data-theme='light'] {
   --pf-table-background-color: var(--pf-white-color);
   --pf-table-font-color: var(--pf-gray-color);
@@ -14,14 +14,15 @@
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-table-background-color: var(--pf-primary-color-700);
-  --pf-table-font-color: var(--pf-gray-color);
-  --pf-table-border-color: var(--pf-primary-color-300);
-  --pf-table-stripe-color: var(--pf-primary-color-600);
-  --pf-table-hover-color: var(--pf-primary-color-400);
+:root [data-theme='dark'],
+:root {
+  --pf-table-background-color: var(--pf-primary-color-800);
+  --pf-table-font-color: var(--pf-white-color);
+  --pf-table-border-color: var(--pf-tertiary-color-800);
+  --pf-table-stripe-color: var(--pf-primary-color-700);
+  --pf-table-hover-color: var(--pf-primary-color-600);
   --pf-table-disabled-color: var(--pf-gray-color-900);
-  --pf-table-checked-color: var(--pf-secondary-color-900);
+  --pf-table-checked-color: red;
   --pf-table-highlighted-color: var(--pf-primary-color-400);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
 }

package/src/index.ts

@@ -4,60 +4,15 @@ import './setup/setupIcons';
 // This is so consumers of the DS can import floating ui functions/hooks/types from the DS rather than the (peer dependency) floating-ui package
 export * from '@floating-ui/react-dom';
 
-export { GlobalStyles } from './legacy/styles/globals/index';
-
-export {
-  ANIMATION,
-  BREAKPOINT,
-  COLORS,
-  MATH,
-  MEDIA_QUERIES,
-  MARGINS,
-  PADDINGS,
-  SPACING,
-  TYPOGRAPHY,
-} from './legacy/tokens';
-
 export {
-  AbstractRadio,
-  AbstractRadioGroup,
-  Accordion,
   BarSpinner,
-  BorderSelect,
-  Button as LegacyButton,
   CirclePulse,
   CircleSpinner,
   ConfirmModal,
-  EditableInput,
-  IconButton,
-  ListTable,
-  LoadingAwareContainer,
-  LoadingList,
   ModalBase,
-  MultiCombobox,
-  NumberInput,
-  Pagination,
-  PercentageRing,
-  Radio,
-  RadioGroup,
-  RandomLoadingMessage,
-  SearchInput,
-  Section,
-  SectionBlock,
-  SectionBody,
-  SectionHeader,
-  SectionTable,
-  Select,
-  Shrug,
-  SingleCombobox,
-  TextInput,
-  TextTruncate,
-  Toggle,
   Tooltip,
 } from './legacy/components';
 
-export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
-
 // New Components
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';

package/src/legacy/components/Tooltip/Tooltip.styles.ts

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/index';
-
 export const StyledTooltip = styled.div`
   display: inline-block;
 
@@ -15,14 +13,11 @@ export const StyledTooltip = styled.div`
   }
 
   .tool {
-    background: ${COLORS.oxfordBlue} !important;
-    border: 1px solid ${COLORS.baliHai} !important;
     border-radius: 2px !important;
     padding: 8px 11px !important;
     opacity: 1 !important;
 
     &.place-left:after {
-      border-left-color: ${COLORS.oxfordBlue} !important;
       border-top: 5px solid transparent !important;
       border-bottom: 5px solid transparent !important;
       right: -6px !important;
@@ -31,14 +26,12 @@ export const StyledTooltip = styled.div`
     }
 
     &.place-left:before {
-      border-left-color: ${COLORS.baliHai} !important;
       border-left-width: 8px !important;
       border-left-style: solid !important;
       margin-top: -10px !important;
     }
 
     &.place-right:after {
-      border-right-color: ${COLORS.oxfordBlue} !important;
       border-top: 5px solid transparent !important;
       border-bottom: 5px solid transparent !important;
       left: -6px !important;
@@ -47,28 +40,23 @@ export const StyledTooltip = styled.div`
     }
 
     &.place-right:before {
-      border-right-color: ${COLORS.baliHai} !important;
       border-right-width: 8px !important;
       border-right-style: solid !important;
       margin-top: -10px !important;
     }
 
     &.place-top:after {
-      border-top-color: ${COLORS.oxfordBlue} !important;
     }
 
     &.place-top:before {
-      border-top-color: ${COLORS.baliHai} !important;
       border-top-width: 8px !important;
       border-top-style: solid !important;
     }
 
     &.place-bottom:after {
-      border-bottom-color: ${COLORS.oxfordBlue} !important;
     }
 
     &.place-bottom:before {
-      border-bottom-color: ${COLORS.baliHai} !important;
       border-bottom-width: 8px !important;
       border-bottom-style: solid !important;
     }

package/src/legacy/components/Tooltip/Tooltip.tsx

@@ -2,9 +2,8 @@
 
 import React from 'react';
 
-import { COLORS } from '@/index';
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
+import { Icon } from '../../../components/icons/Icon';
+import { PermafrostComponent } from '../../../types';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { StyledTooltip } from './Tooltip.styles';
@@ -47,7 +46,6 @@ export const Tooltip = (props: Props) => {
     >
       {props.questionMark && (
         <i
-          style={{ color: COLORS.curiousBlue }}
           className={props.questionMarkClassName}
           // data-tip={props.clickToShow ? 'custom show' : ''}
           data-tooltip-id={props.for as string | undefined}

package/src/legacy/components/index.ts

@@ -1,32 +1,3 @@
-export { Accordion } from './Accordion';
-export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
-export { Button, IconButton } from './buttons';
-export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-
-export {
-  EditableInput,
-  NumberInput,
-  SearchInput,
-  TextInput,
-  Radio,
-  RadioGroup,
-  AbstractRadio,
-  AbstractRadioGroup,
-} from './inputs';
-export {
-  BarSpinner,
-  CirclePulse,
-  CircleSpinner,
-  LoadingList,
-  PercentageRing,
-  RandomLoadingMessage,
-  LoadingIndicator,
-} from './loading-indicators';
-export { ListTable } from './ListTable';
-export { Pagination } from './Pagination';
-export { Shrug } from './user-feedback';
+export { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
 export { ConfirmModal, ModalBase } from './modals';
-export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { TextTruncate } from './text-truncate';
-export { Toggle } from './Toggle';
 export { Tooltip } from './Tooltip';

package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.ts

@@ -1,7 +1,5 @@
 import styled, { keyframes } from 'styled-components';
 
-import { COLORS } from '@/legacy/tokens';
-
 const moveBg = keyframes`
   from {
     transform: translateX(0);
@@ -25,7 +23,6 @@ export const StyledBarSpinner = styled.div`
     border-radius: 25px;
     position: relative;
     overflow: hidden;
-    background-color: ${COLORS.curiousBlue};
 
     &:after {
       content: '';

package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 
 import { StyledBarSpinner } from './BarSpinner.styles';
 

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.styles.ts

@@ -1,7 +1,5 @@
 import styled, { keyframes } from 'styled-components';
 
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
 const ripple = (size: string) => keyframes`
   0% {
     width: 0;
@@ -74,8 +72,6 @@ export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>
     width: ${(props) => props.overallsize};
     margin-top: -50px;
 
-    color: ${COLORS.lightFontColor};
-    font-size: ${TYPOGRAPHY.fontSize.base};
     font-style: italic;
   }
 `;

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -2,9 +2,7 @@
 
 import React from 'react';
 
-import { COLORS } from '@/legacy/tokens';
-import { PermafrostComponent } from '@/types';
-import { RandomLoadingMessage } from '../RandomLoadingMessage';
+import type { PermafrostComponent } from '../../../../types';
 
 import { StyledLoadingIndicator, StyledMessageLoadingIndicator } from './CirclePulse.styles';
 
@@ -34,7 +32,6 @@ export function CirclePulse(props: Props): React.ReactElement {
         id={id}
         overallsize={returnSizeString(overallSize)}
         ripplesize={returnSizeString(rippleSize)}
-        style={color ? { color } : { color: COLORS.curiousBlue }}
       />
     );
   };
@@ -43,8 +40,6 @@ export function CirclePulse(props: Props): React.ReactElement {
     return (
       <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
         {loadingIndicator()}
-
-        <RandomLoadingMessage />
       </StyledMessageLoadingIndicator>
     );
   }

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import { Icon } from '@/components';
-import { PermafrostComponent, IconSizes } from '@/types';
+import { Icon } from '../../../../components/icons/Icon';
+import type { PermafrostComponent, IconSizes } from '../../../../types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;

package/src/legacy/components/loading-indicators/index.ts

@@ -1,7 +1,3 @@
 export { CircleSpinner } from './CircleSpinner';
 export { BarSpinner } from './BarSpinner';
 export { CirclePulse } from './CirclePulse';
-export { RandomLoadingMessage } from './RandomLoadingMessage';
-export { PercentageRing } from './PercentageRing';
-export { LoadingList } from './LoadingList';
-export { LoadingIndicator } from './LoadingIndicator';

package/src/legacy/components/modals/ConfirmModal/ConfirmModal.styles.ts

@@ -1,15 +1,12 @@
 import styled from 'styled-components';
 
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
 export const StyledConfirmModal = styled.div`
   padding: 20px;
 
   .title {
     margin: 30px 16px;
-    font-size: ${TYPOGRAPHY.fontSize.display};
+
     text-align: center;
-    color: ${COLORS.lightFontColor};
   }
 
   .message {