@indico-data/design-system 2.59.2 → 2.60.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.59.2",
+  "version": "2.60.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/badge/styles/Badge.scss

@@ -5,7 +5,7 @@
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-badge-background-color: var(--pf-white-color);
+  --pf-badge-background-color: var(--pf-primary-color-950);
   --pf-badge-border-color: var(--pf-border-color);
 }
 

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

@@ -31,41 +31,41 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
   // solid colors
-  --pf-button-solid-background-color: var(--pf-primary-color);
+  --pf-button-solid-background-color: var(--pf-secondary-color-400);
   --pf-button-solid-color: var(--pf-white-color);
-  --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
-  --pf-button-solid-focus-background-color: var(--pf-primary-color);
+  --pf-button-solid-hover-background-color: var(--pf-secondary-color-500);
+  --pf-button-solid-focus-background-color: var(--pf-secondary-color-400);
   --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
-  --pf-button-solid-disabled-color: var(--pf-gray-color-100);
+  --pf-button-solid-disabled-color: var(--pf-gray-color-800);
 
   // outline colors
-  --pf-button-outline-color: var(--pf-primary-color);
-  --pf-button-outline-border-color: var(--pf-primary-color);
-  --pf-button-outline-hover-color: var(--pf-primary-color-400);
+  --pf-button-outline-color: var(--pf-secondary-color-400);
+  --pf-button-outline-border-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-color: var(--pf-secondary-color-500);
   --pf-button-outline-disabled-color: var(--pf-primary-color-300);
 
   // link
-  --pf-button-link-color: var(--pf-primary-color);
-  --pf-button-link-hover-color: var(--pf-primary-color-400);
+  --pf-button-link-color: var(--pf-secondary-color-400);
+  --pf-button-link-hover-color: var(--pf-secondary-color-500);
   --pf-button-link-disabled-color: var(--pf-primary-color-300);
 
   // action
-  --pf-button-action-color: var(--pf-primary-color);
-  --pf-button-action-border-color: var(--pf-primary-color);
-  --pf-button-action-hover-background-color: var(--pf-primary-color-200);
-  --pf-button-action-hover-border-color: var(--pf-primary-color-400);
-  --pf-button-action-hover-color: var(--pf-primary-color);
-  --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
+  --pf-button-action-color: var(--pf-secondary-color-400);
+  --pf-button-action-border-color: var(--pf-secondary-color-400);
+  --pf-button-action-hover-background-color: var(--pf-secondary-color-500);
+  --pf-button-action-hover-border-color: var(--pf-secondary-color-500);
+  --pf-button-action-hover-color: var(--pf-white-color);
+  --pf-button-action-disabled-border-color: var(--pf-secondary-color-400);
   --pf-button-action-disabled-color: var(--pf-primary-color-300);
 
   // destructive
-  --pf-button-destructive-background-color: var(--pf-error-color);
+  --pf-button-destructive-background-color: var(--pf-red-color-400);
   --pf-button-destructive-color: var(--pf-white-color);
-  --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
+  --pf-button-destructive-hover-background-color: var(--pf-red-color-500);
   --pf-button-destructive-hover-color: var(--pf-white-color);
   --pf-button-destructive-focus-background-color: var(--pf-red-color);
   --pf-button-destructive-focus-color: var(--pf-white-color);
-  --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
+  --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
   --pf-button-destructive-disabled-color: var(--pf-white-color);
 
   // soft

package/src/components/forms/form/styles/Form.scss

@@ -11,11 +11,11 @@ form {
   --pf-form-input-color: var(--pf-gray-color);
   --pf-form-input-placeholder-color: var(--pf-gray-color-300);
   --pf-form-input-help-color: var(--pf-gray-color-400);
-  --pf-form-input-hover-background-color: var(--pf-gray-color-100);
-  --pf-form-input-focus-background-color: var(--pf-gray-color-100);
+  --pf-form-input-hover-background-color: var(--pf-gray-color-900);
+  --pf-form-input-focus-background-color: var(--pf-gray-color-950);
   --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
   --pf-form-input-focus-outline-color: var(--pf-primary-color);
-  --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-form-input-disabled-background-color: var(--pf-gray-color-700);
   --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
   --pf-form-input-disabled-color: var(--pf-gray-color-400);
 }

package/src/components/forms/select/styles/Select.scss

@@ -1,9 +1,9 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
   --pf-select-indicator-color: var(--pf-gray-color);
-  --pf-select-option-selected-color: var(--pf-primary-color-100);
+  --pf-select-option-selected-color: var(--pf-gray-color-950);
   --pf-select-option-color: var(--pf-gray-color);
-  --pf-select-option-hover-color: var(--pf-primary-color-100);
+  --pf-select-option-hover-color: var(--pf-gray-color-900);
 }
 
 // Dark  Theme and Default Variables

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

@@ -4,10 +4,10 @@
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-hover-color: var(--pf-gray-color-950);
   --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);
+  --pf-menu-item-focus-color: var(--pf-gray-color-900);
 }
 
 // Dark Theme Specific Variables

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

@@ -1,20 +1,20 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-skeleton-color-one: var(--pf-gray-color-200);
-  --pf-skeleton-color-two: var(--pf-gray-color-100);
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-skeleton-color-one: var(--pf-gray-color-800);
+  --pf-skeleton-color-two: var(--pf-gray-color-950);
+  --pf-skeleton-background-color: var(--pf-gray-color-700);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-skeleton-color-one: var(--pf-primary-color-500);
   --pf-skeleton-color-two: var(--pf-primary-color-400);
+  --pf-skeleton-background-color: var(--pf-gray-color-900);
 }
 
 .skeleton {
   border-radius: var(--pf-rounded);
-  background-color: var(--pf-gray-color-100);
+  background-color: var(--pf-skeleton-background-color);
   opacity: 0.7;
   animation: skeleton-loading 1s linear infinite alternate;
   display: flex;

package/src/components/stepper/styles/Stepper.scss

@@ -1,11 +1,25 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-}
-
 // Light Theme Specific Variables
 :root [data-theme='light'] {
+  // Stepper Legend
+  --pf-stepper-background-color: var(--pf-gray-color-900);
+  --pf-stepper-legend-background-color: var(--pf-gray-color-950);
+  // Default Step
+  --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
+  --pf-stepper-legend-circle-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
+  --pf-stepper-legend-step-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
+
+  // Completed Step
+  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
+  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
+  // Current Step
+  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
+  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
+  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
 }
 
 // Dark Theme Specific Variables
@@ -23,11 +37,12 @@
   // Completed Step
   --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
   --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
+  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
   --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
   // Current Step
   --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
   --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
-  --pf-stepper-legend-step-current-text-color: var(--pf-white-color);
+  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
   --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
 }
 
@@ -43,8 +58,7 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    .stepper-content {
-    }
+
     .stepper-actions {
       display: flex;
       justify-content: end;
@@ -91,6 +105,7 @@
 
     &.current {
       background-color: var(--pf-stepper-legend-circle-current-background-color);
+      color: var(--pf-stepper-legend-circle-current-text-color);
     }
   }
 
@@ -115,6 +130,12 @@
       color: var(--pf-stepper-legend-step-text-color);
     }
 
+    &--completed-step {
+      .btn {
+        color: var(--pf-stepper-legend-step-completed-text-color);
+      }
+    }
+
     &--current-step {
       .btn {
         color: var(--pf-stepper-legend-step-current-text-color);

package/src/components/table/Table.mdx

@@ -3,7 +3,7 @@ import * as TableStories from './Table.stories';
 
 
 
-<Meta title="Layout/Table" name="Table" />
+<Meta title="Layout/Table(Use Tanstack Table Instead)" name="Table" />
 
 # Table
 

package/src/components/table/Table.stories.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
 const meta: Meta = {
-  title: 'Layout/Table',
+  title: 'Layout/Table(Use Tanstack Table Instead)',
   component: Table,
   argTypes: {
     columns: {

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

@@ -166,12 +166,3 @@
     }
   }
 }
-
-.table__pagination {
-  padding-bottom: var(--pf-padding-4);
-  padding-top: var(--pf-padding-4);
-  background-color: var(--pf-table-pagination-background-color);
-  padding-left: var(
-    --pf-padding-4
-  ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist
-}

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -22,6 +22,7 @@ export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 
 export type Props<T extends object> = {
   data: T[];
+  isStriped?: boolean;
   columns: ColumnDef<T & { id: string }>[];
   className?: string;
   actionBarClassName?: string;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -22,8 +22,18 @@ const meta: Meta = {
     enableRowSelection: true,
     showPagination: false,
     onClickRow: null,
+    isStriped: true,
   },
   argTypes: {
+    isStriped: {
+      description: 'Striped rows',
+      defaultValue: { summary: 'true' },
+      control: { type: 'boolean' },
+      table: {
+        category: 'Props',
+        type: { summary: 'boolean' },
+      },
+    },
     data: {
       description:
         'Array of data items. These are the items that will be displayed in the table cell.',
@@ -181,6 +191,50 @@ const meta: Meta = {
         type: { summary: 'string' },
       },
     },
+
+    onRowClick: {
+      description: 'Callback when a row is clicked.',
+      action: 'onRowClick',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(row: Row<T>) => void' },
+      },
+    },
+    activeRows: {
+      description: 'Array of active rows.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'string[]' },
+      },
+    },
+    onSelectAllChange: {
+      description: 'Callback when all rows are selected.',
+      action: 'onSelectAllChange',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(isSelected: boolean) => void' },
+      },
+    },
+    onRowSelectionChange: {
+      description: 'Callback when a row is selected.',
+      action: 'onRowSelectionChange',
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: { summary: '(updater: Record<string, boolean>) => void' },
+      },
+    },
+    rowSelection: {
+      description: 'Row selection state.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'Record<string, boolean>' },
+      },
+    },
   },
   decorators: [(Story) => <Story />],
 };

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
 import classNames from 'classnames';
 
 import { ActionBar } from './components/ActionBar';
@@ -11,7 +11,6 @@ import { Props } from './TankstackTable.types';
 import { useTanstackTable } from './useTanstackTable';
 import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
-import { columns } from './mock-data/table-configuration';
 
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
@@ -32,6 +31,7 @@ export function TanstackTable<T extends object>({
   defaultPinnedColumns,
   onRowClick,
   activeRows = [],
+  isStriped = true,
   actionBarClassName,
   ...rest
 }: Props<T & { id: string }>) {
@@ -135,6 +135,7 @@ export function TanstackTable<T extends object>({
         <table
           className={classNames('tanstack-table', className, {
             'is-Loading': isLoading,
+            'is-striped': isStriped,
           })}
         >
           <thead className="tanstack-table__thead">

package/src/components/tanstackTable/components/ActionBar/ActionBar.scss

@@ -4,7 +4,7 @@
   left: 50%;
   transform: translateX(-50%);
   z-index: 90;
-  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.45);
   &__container {
     display: flex;
     align-items: center;

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

@@ -2,23 +2,28 @@
 
 :root [data-theme='light'] {
   --pf-tanstack-table-background-color: var(--pf-white-color);
-  --pf-tanstack-table-font-color: var(--pf-gray-color);
-  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
-  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
+
+  --pf-tanstack-table-font-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
+  --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
   --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
-  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
-  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
-    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-gray-color-900);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
   --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
+
   --pf-tanstack-table-font-color: var(--pf-white-color);
   --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
   --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);

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

@@ -64,6 +64,16 @@
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 
+  &.is-striped {
+    .tanstack-table__tbody {
+      tr:nth-child(odd) {
+        td {
+          background-color: var(--pf-tanstack-table-stripe-color);
+        }
+      }
+    }
+  }
+
   .is-loading {
     border: var(--pf-border-thin) solid var(--pf-border-color);
     height: 350px;
@@ -92,7 +102,7 @@
 
     &__th {
       color: var(--pf-tanstack-table-font-color);
-      background: var(--pf-tanstack-table-background-color);
+      background: var(--pf-tanstack-table-header-background-color);
       font-size: var(--pf-tanstack-table-font-size);
       font-weight: var(--pf-font-weight-medium);
       box-sizing: border-box;
@@ -135,14 +145,14 @@
 
       &.is-selected {
         td {
-          background: var(--pf-tanstack-table-checked-color);
+          background: var(--pf-tanstack-table-checked-color) !important;
         }
       }
 
       &.show-hover {
         &:hover {
           td {
-            background-color: var(--pf-tanstack-table-hover-color);
+            background-color: var(--pf-tanstack-table-hover-color) !important;
             cursor: pointer;
           }
         }
@@ -150,7 +160,7 @@
 
       &.is-clicked {
         td {
-          background-color: var(--pf-tanstack-table-clicked-color);
+          background-color: var(--pf-tanstack-table-clicked-color) !important;
         }
       }
     }
@@ -216,3 +226,12 @@
     }
   }
 }
+
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-tanstack-table-pagination-background-color);
+  padding-left: var(
+    --pf-padding-4
+  ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist
+}

package/src/components/toast/styles/Toast.scss

@@ -1,11 +1,12 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --toastify-color-dark: var(--pf-background-color-light);
-  --toastify-color-progress-dark: var(--pf-primary-color-400);
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --toastify-color-dark: var(--pf-white-color);
+  --toastify-color-progress-dark: var(--pf-primary-color-200);
   --toastify-icon-color-success: var(--pf-success-color);
   --toastify-color-progress-bgo: 0.2;
+  --toastify-text-color-dark: var(
+    --pf-gray-color-600
+  ); // This is accurate since the library uses css-in-js but we use data-theme instead.
 }
 
 // Dark Theme Specific Variables
@@ -14,4 +15,5 @@
   --toastify-color-progress-dark: var(--pf-primary-color-400);
   --toastify-icon-color-success: var(--pf-success-color);
   --toastify-color-progress-bgo: 0.2;
+  --toastify-text-color-dark: var(--pf-font-color);
 }

package/src/styles/globals.scss

@@ -3,9 +3,9 @@
   // ***********************************************************************************************************************************
   --pf-white-color: #ffffff;
   --pf-black-color: #000000;
-  --pf-background-color-light: var(--pf-gray-color-100);
+  --pf-background-color-light: var(--pf-gray-color-900);
   --pf-background-color: var(--pf-white-color);
-  --pf-background-color-dark: var(--pf-gray-color-300);
+  --pf-background-color-dark: var(--pf-gray-color-100);
   --pf-background-secondary-color-light: var(--pf-secondary-color-300);
   --pf-background-color-secondary: var(--pf-secondary-color-500);
   --pf-background-color-secondary-dark: var(--pf-secondary-color-900);

package/src/styles/variables/_borders.scss

@@ -16,7 +16,7 @@
 }
 
 :root [data-theme='light'] {
-  --pf-border-color: var(--pf-gray-color-300);
+  --pf-border-color: var(--pf-gray-color-800);
   --pf-border-color-light: var(--pf-gray-color-100);
   --pf-horizontal-line-color: var(--pf-gray-color-200);
 }