@indico-data/design-system 2.17.1 → 2.18.0

package/lib/src/components/button/Button.stories.d.ts

@@ -14,6 +14,7 @@ export declare const InfoOutline: Story;
 export declare const Text: Story;
 export declare const IconLeft: Story;
 export declare const IconRight: Story;
+export declare const IconOnly: Story;
 export declare const Error: Story;
 export declare const Success: Story;
 export declare const Warning: Story;

package/lib/src/components/table/Table.d.ts

@@ -1,11 +1,2 @@
-import { TableProps as RDTTableProps, Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn } from 'react-data-table-component';
-export type Direction = `${RDTDirection}`;
-export type Alignment = `${RDTAlignment}`;
-export type TableColumn<T> = RDTTableColumn<T>;
-export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    direction?: Direction;
-    subHeaderAlign?: Alignment;
-};
+import { TableProps } from './types';
 export declare const Table: <T>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/table/types.d.ts

@@ -0,0 +1,10 @@
+import { TableProps as RDTTableProps, Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn } from 'react-data-table-component';
+export type Direction = `${RDTDirection}`;
+export type Alignment = `${RDTAlignment}`;
+export type TableColumn<T> = RDTTableColumn<T>;
+export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    direction?: Direction;
+    subHeaderAlign?: Alignment;
+};

package/lib/src/legacy/components/modals/ModalBase/ModalBase.d.ts

@@ -4,7 +4,6 @@ export type ModalBaseProps = PermafrostComponent & {
     children: React.ReactNode | React.ReactNode[];
     clickToDismiss?(): void;
     describedBy?: string;
-    /** a selector representing the desired parent; defaults to `#root` */
     node?: string;
     open: boolean;
     preventEscDismiss?: boolean;

package/lib/src/types.d.ts

@@ -12,3 +12,5 @@ import { IconSizes } from './components/icons/types';
 export type { IconSizes };
 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 };

package/package.json

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

package/src/components/button/Button.mdx

@@ -86,13 +86,16 @@ The states available are enabled, `disabled`, and `loading`. The button is enabl
 
 ## Icons
 
-The Icon property requires you to pass two arguments, `iconName` and `iconPosition`. The `iconName` is the name of the icon you want to use and the `iconPosition` is the position of the icon in relation to the text. The default value for `iconPosition` is `left`. The Options for `iconPosition` are `left` and `right`.
+To include an Icon pass an `iconName` prop with a valid icon name. The `iconName` is the name of the icon you want to use. You can optionally pass an `iconPosition` argument to set the position of the icon in relation to the text. The default value for `iconPosition` is `left`. If no children are passed, the button will render as an icon-only button.
 
 <Row>
   <Col xs={6} sm={4} md={3} lg={2}>
     <Story of={ButtonStories.IconLeft} />
   </Col>
-  <Col xs={2}>
+  <Col xs={6} sm={4} md={3} lg={2}>
     <Story of={ButtonStories.IconRight} />
   </Col>
-</Row>
+  <Col xs={6} sm={4} md={3} lg={2}>
+    <Story of={ButtonStories.IconOnly} />
+  </Col>
+</Row>

package/src/components/button/Button.stories.tsx

@@ -254,6 +254,14 @@ export const IconRight: Story = {
   render: (args) => <Button {...args}>Icon Right</Button>,
 };
 
+export const IconOnly: Story = {
+  args: {
+    color: 'primary',
+    iconName: 'fa-check',
+  },
+  render: (args) => <Button {...args} />,
+};
+
 export const Error: Story = {
   args: {
     color: 'error',

package/src/components/button/Button.tsx

@@ -57,21 +57,29 @@ export const Button = (props: ButtonProps) => {
       onKeyDown={onKeyDown}
       {...rest}
     >
+      {/* Loading Icon */}
       {isLoading && (
         <Icon
           name="fa-circle-notch"
-          style={{
-            animation: 'spin 1s linear infinite',
-          }}
+          style={{ animation: 'spin 1s linear infinite' }}
           className="mr-2"
-          ariaLabel={'Loading...'}
+          ariaLabel="Loading..."
         />
       )}
-      {iconPosition === 'left' && iconName && (
+
+      {/* Icon without children */}
+      {!children && iconName && <Icon name={iconName} ariaLabel={`${iconName} Icon`} />}
+
+      {/* Left Icon with children */}
+      {children && iconPosition === 'left' && iconName && (
         <Icon name={iconName} className="mr-2" ariaLabel={`${iconName} Icon`} />
       )}
+
+      {/* Button children */}
       {children}
-      {iconPosition === 'right' && iconName && (
+
+      {/* Right Icon with children */}
+      {children && iconPosition === 'right' && iconName && (
         <Icon name={iconName} className="ml-2" ariaLabel={`${iconName} Icon`} />
       )}
     </button>

package/src/components/button/__tests__/Button.test.tsx

@@ -70,6 +70,7 @@ describe('Button', () => {
       expect(button).toBeDisabled();
     });
   });
+
   describe('button interactions', () => {
     beforeEach(() => {
       onClick.mockClear();
@@ -77,11 +78,13 @@ describe('Button', () => {
       onMouseExit.mockClear();
       onKeyDown.mockClear();
     });
+
     it('calls the onKeyDown function when a key is pressed', async () => {
       render(<Button onKeyDown={onKeyDown} onClick={onClick} ariaLabel="btn" />);
       await userEvent.type(screen.getByRole('button'), '{enter}');
       expect(onKeyDown).toHaveBeenCalledTimes(1);
     });
+
     it('calls the onClick function when the button is clicked', async () => {
       render(<Button onClick={onClick} ariaLabel="btn" />);
       await userEvent.click(screen.getByRole('button'));
@@ -99,10 +102,45 @@ describe('Button', () => {
       await userEvent.hover(screen.getByRole('button'));
       expect(onMouseEnter).toHaveBeenCalledTimes(1);
     });
+
     it('calls the onMouseExit function when the mouse leaves the button', async () => {
       render(<Button onMouseExit={onMouseExit} onClick={onClick} ariaLabel="btn" />);
       await userEvent.unhover(screen.getByRole('button'));
       expect(onMouseExit).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('button with icons', () => {
+    it('renders an icon when iconName is provided and no children', () => {
+      render(<Button iconName="fa-wind" ariaLabel="icon button" />);
+      const icon = screen.getByLabelText('fa-wind Icon');
+      expect(icon).toBeInTheDocument();
+      expect(icon).not.toHaveClass('mr-2');
+      expect(icon).not.toHaveClass('ml-2');
+    });
+
+    it('renders an icon to the left when iconPosition is left and children are present', () => {
+      render(
+        <Button iconName="fa-wind" iconPosition="left" ariaLabel="icon button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('fa-wind Icon');
+      const button = screen.getByRole('button');
+      expect(button).toContainElement(icon);
+      expect(icon).toHaveClass('mr-2');
+    });
+
+    it('renders an icon to the right when iconPosition is right and children are present', () => {
+      render(
+        <Button iconName="fa-wind" iconPosition="right" ariaLabel="icon button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('fa-wind Icon');
+      const button = screen.getByRole('button');
+      expect(button).toContainElement(icon);
+      expect(icon).toHaveClass('ml-2');
+    });
+  });
 });

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

@@ -47,38 +47,30 @@
     background: var(--pf-button-hover-#{$color-name}-color);
   }
 
-  &:focus {
-    border-color: var(--pf-button-focus-#{$color-name}-color);
-    background: var(--pf-button-focus-#{$color-name}-color);
-  }
-
   &:disabled {
-    background: var(--pf-button-disabled-#{$color-name}-color);
-    border-color: var(--pf-button-disabled-#{$color-name}-color);
+    background: var(--pf-button-disabled-#{$color-name}-background-color);
+    color: var(--pf-button-disabled-#{$color-name}-text-color);
+    border-color: var(--pf-button-disabled-#{$color-name}-border-color);
   }
 
   &.btn--outline {
-    color: var(--pf-button-#{$color-name}-color);
-    background-color: var(--pf-button-outline-background-color);
+    color: var(--pf-button-outline-#{$color-name}-text-color);
+    background-color: var(--pf-button-outline-#{$color-name}-background-color);
+    border-color: var(--pf-button-#{$color-name}-outline-border-color);
 
     &:hover {
-      background-color: var(--pf-button-outline-hover-#{$color-name}-color);
-      border-color: var(--pf-button-hover-#{$color-name}-color);
-    }
-
-    &:focus {
-      border-color: var(--pf-button-focus-#{$color-name}-color);
-      background-color: var(--pf-button-outline-hover-#{$color-name}-color);
-      color: var(--pf-button-focus-#{$color-name}-color);
+      color: var(--pf-button-outline-#{$color-name}-hover-text-color);
+      background-color: var(--pf-button-outline-hover-#{$color-name}-background-color);
+      border-color: var(--pf-button-hover-#{$color-name}-outline-border-color);
     }
 
     &:disabled {
-      border-color: var(--pf-button-disabled-#{$color-name}-color);
-      color: var(--pf-button-disabled-#{$color-name}-color);
+      border-color: var(--pf-button-disabled-#{$color-name}-outline-border-color);
+      color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
+      background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
       &:hover {
-        border-color: var(--pf-button-disabled-#{$color-name}-color);
-        color: var(--pf-button-disabled-#{$color-name}-color);
-        background-color: var(--pf-button-outline-background-color);
+        color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
+        background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
       }
     }
   }

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

@@ -11,7 +11,6 @@
   --pf-button-disabled-primary-color: var(--pf-primary-color-300);
   --pf-button-focus-primary-color: var(--pf-primary-color-900);
   --pf-button-hover-primary-color: var(--pf-primary-color-400);
-  --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
   --pf-button-primary-color: var(--pf-primary-color);
   --pf-button-primary-text-color: var(--pf-white-color);
 
@@ -61,8 +60,6 @@
 
   // Outline Buttons
   --pf-button-outline-background-color: var(--pf-white-color);
-
-  // Button Radius
   --pf-button-rounded: var(--pf-rounded);
 }
 
@@ -75,6 +72,47 @@
   --pf-button-background-info-color: var(--pf-info-color);
   --pf-button-hover-info-color: var(--pf-gray-color-400);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+
+  --pf-button-outline-primary-background-color: var(--pf-white-color);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color);
+  --pf-button-outline-primary-border-color: var(--pf-primary-color);
+
+  --pf-button-outline-secondary-background-color: var(--pf-white-color);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color);
+  --pf-button-outline-secondary-border-color: var(--pf-secondary-color);
+
+  // outline
+  --pf-button-primary-outline-border-color: var(--pf-primary-color);
+
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color);
+
+  // hover
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-400);
+  --pf-button-outline-hover-primary-color: var(--pf-primary-color-300);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-100);
+
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-300);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-secondary-color-100);
+
+  // disabled
+  //general
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-300);
+
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-300);
+
+  // outline
+  --pf-button-disabled-primary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-300);
+
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-secondary-color-300);
 }
 
 // Dark Theme Specific Variables
@@ -82,8 +120,43 @@
   --pf-button-disabled-success-color: var(--pf-green-color-400);
   --pf-button-disabled-warning-color: var(--pf-orange-color-400);
   --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
-
   --pf-button-background-info-color: var(--pf-gray-color-800);
   --pf-button-hover-info-color: var(--pf-gray-color-600);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
+
+  // outline
+  --pf-button-outline-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color-100);
+  --pf-button-primary-outline-border-color: var(--pf-primary-color-100);
+
+  --pf-button-outline-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color-700);
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color-700);
+
+  //hover
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-200);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-primary-border-color: var(--pf-primary-color-200);
+
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-secondary-border-color: var(--pf-secondary-color-400);
+
+  //disabled
+  // general
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-900);
+
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-900);
+  --pf-button-disabled-secondary-text-color: var(--pf-secondary-color-400);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-900);
+  // outline
+  --pf-button-disabled-primary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-400);
+
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-primary-color-400);
 }

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -4,15 +4,15 @@
 :root [data-theme='dark'] {
   --pf-checkbox-background-color: var(--pf-white-color);
   --pf-checkbox-check-color: var(--pf-primary-color);
-  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-400);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-checkbox-background-color: var(--pf-primary-color-200);
+  --pf-checkbox-background-color: var(--pf-primary-color-500);
   --pf-checkbox-check-color: var(--pf-white-color);
-  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
 }
 

package/src/components/forms/input/styles/Input.scss

@@ -4,14 +4,12 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-input-background-color: var(--pf-white-color);
-  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
   --pf-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-disabled-color: var(--pf-gray-color-400);
-  --pf-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-input-background-color: var(--pf-primary-color);
-  --pf-input-border-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);

package/src/components/forms/passwordInput/styles/PasswordInput.scss

@@ -4,14 +4,12 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-password-input-background-color: var(--pf-white-color);
-  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-password-input-help-text-color: var(--pf-gray-color-400);
   --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-password-input-border-color: var(--pf-gray-color);
   --pf-password-input-disabled-color: var(--pf-gray-color-400);
-  --pf-password-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-password-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-password-input-background-color: var(--pf-primary-color);
-  --pf-password-input-border-color: var(--pf-gray-color-100);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color-100);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color);
   --pf-password-input-help-text-color: var(--pf-gray-color-200);

package/src/components/forms/radio/styles/Radio.scss

@@ -4,15 +4,15 @@
 :root [data-theme='dark'] {
   --pf-radio-background-color: var(--pf-white-color);
   --pf-radio-check-color: var(--pf-primary-color);
-  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-400);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-radio-background-color: transparent;
+  --pf-radio-background-color: var(--pf-primary-color-600);
   --pf-radio-check-color: var(--pf-white-color);
-  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-300);
 }
 

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

@@ -2,12 +2,12 @@
 :root,
 :root [data-theme='light'] {
   --pf-select-background-color: var(--pf-white-color);
-  --pf-select-border-color: var(--pf-gray-color);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color);
   --pf-select-indicator-color: var(--pf-gray-color);
   --pf-select-placeholder-text-color: var(--pf-gray-color);
   --pf-select-hover-color: var(--pf-gray-color);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-100);
   --pf-select-option-text-color: var(--pf-gray-color);
   --pf-select-option-hover-color: var(--pf-primary-color-100);
 
@@ -19,12 +19,12 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-select-background-color: var(--pf-primary-color);
-  --pf-select-border-color: var(--pf-gray-color-100);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color-100);
   --pf-select-indicator-color: var(--pf-gray-color-100);
   --pf-select-placeholder-text-color: var(--pf-gray-color-100);
   --pf-select-hover-color: var(--pf-gray-color-100);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-900);
   --pf-select-option-text-color: var(--pf-gray-color-100);
   --pf-select-option-hover-color: var(--pf-primary-color-300);
 
@@ -65,6 +65,23 @@
       color: var(--pf-select-text-color);
     }
 
+    &multi-value {
+      background-color: var(--pf-select-option-selected-color);
+      border-radius: var(--pf-rounded);
+      &__label {
+        padding-top: 5px; // TODO -- clean up padding on this component overall
+        color: var(--pf-select-option-text-color);
+      }
+      &__remove {
+        color: var(--pf-select-option-text-color);
+        cursor: pointer;
+        &:hover {
+          background-color: var(--pf-select-option-hover-color);
+          color: var(--pf-select-hover-color);
+        }
+      }
+    }
+
     &menu {
       border: 1px solid var(--pf-select-border-color);
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);

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

@@ -4,12 +4,11 @@
 :root [data-theme='dark'] {
   // Typography
   --pf-textarea-background-color: var(--pf-white-color);
-  --pf-textarea-border-color: var(--pf-gray-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-gray-color);
+  --pf-textarea-border-color: var(--pf-form-input-border-color);
   --pf-textarea-disabled-color: var(--pf-gray-color-400);
 
   // textarea Radius
@@ -19,7 +18,7 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-textarea-background-color: var(--pf-primary-color);
-  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --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);

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

@@ -4,7 +4,7 @@
 :root [data-theme='dark'] {
   --pf-toggle-background-color: var(--pf-gray-color-200);
   --pf-toggle-circle-color: var(--pf-primary-color);
-  --pf-toggle-border-color: var(--pf-gray-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);
@@ -14,7 +14,7 @@
 :root [data-theme='dark'] {
   --pf-toggle-background-color: var(--pf-primary-color-100);
   --pf-toggle-circle-color: var(--pf-white-color);
-  --pf-toggle-border-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-checked-background-color: var(--pf-secondary-color-400);

package/src/components/table/Table.tsx

@@ -1,25 +1,10 @@
 import DataTable, {
-  TableProps as RDTTableProps,
   Direction as RDTDirection,
   Alignment as RDTAlignment,
-  TableColumn as RDTTableColumn,
 } from 'react-data-table-component';
 
 import { LoadingComponent } from './LoadingComponent';
-
-export type Direction = `${RDTDirection}`;
-export type Alignment = `${RDTAlignment}`;
-export type TableColumn<T> = RDTTableColumn<T>;
-
-export type TableProps<T> = Omit<
-  RDTTableProps<T>,
-  'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'
-> & {
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  direction?: Direction;
-  subHeaderAlign?: Alignment;
-};
+import { TableProps } from './types';
 
 export const Table = <T,>(props: TableProps<T>) => {
   const {

package/src/components/table/types.ts

@@ -0,0 +1,20 @@
+import {
+  TableProps as RDTTableProps,
+  Direction as RDTDirection,
+  Alignment as RDTAlignment,
+  TableColumn as RDTTableColumn,
+} from 'react-data-table-component';
+
+export type Direction = `${RDTDirection}`;
+export type Alignment = `${RDTAlignment}`;
+export type TableColumn<T> = RDTTableColumn<T>;
+
+export type TableProps<T> = Omit<
+  RDTTableProps<T>,
+  'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'
+> & {
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  direction?: Direction;
+  subHeaderAlign?: Alignment;
+};