@indico-data/design-system 2.60.14 → 3.0.0

package/lib/types.d.ts

@@ -6,7 +6,7 @@ export type PermafrostComponent = {
 };
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
+export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'teal' | 'purple' | 'orange' | 'pending';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';

package/package.json

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

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

@@ -1,25 +1,25 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-badge-background-color: var(--pf-white-color);
-  --pf-badge-border-color: var(--pf-border-color);
+  --pf-badge-background-color: var(--pf-page-background-color);
   --pf-badge-font-color: var(--pf-font-color);
   --pf-badge-rounded: var(--pf-rounded);
+  --pf-badge-border-color: var(--pf-border-color-secondary);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-badge-rounded: var(--pf-rounded);
-  --pf-badge-background-color: var(--pf-primary-color-600);
-  --pf-badge-border-color: var(--pf-border-color);
+  --pf-badge-background-color: var(--pf-page-background-color);
   --pf-badge-font-color: var(--pf-font-color);
+  --pf-badge-rounded: var(--pf-rounded);
+  --pf-badge-border-color: var(--pf-border-color-secondary);
 }
 
 .badge {
+  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
   border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
   background: var(--pf-badge-background-color);
-  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
   box-sizing: border-box;
   width: fit-content;
   color: var(--pf-badge-font-color);

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

@@ -21,25 +21,25 @@
 // Button Sizes
 .btn--xs {
   line-height: var(--pf-button-line-height-xs);
-  padding: var(--pf-padding-0-5) var(--pf-padding-3);
+  padding: var(--pf-padding-1) var(--pf-padding-3);
   font-size: var(--pf-button-font-size-xs);
 }
 
 .btn--sm {
   line-height: var(--pf-button-line-height-sm);
-  padding: var(--pf-padding-1-5) var(--pf-padding-3);
+  padding: var(--pf-padding-1) var(--pf-padding-3);
   font-size: var(--pf-button-font-size-sm);
 }
 
 .btn--md {
   line-height: var(--pf-button-line-height-md);
-  padding: var(--pf-padding-2-5) var(--pf-padding-3-5);
+  padding: var(--pf-padding-2) var(--pf-padding-3);
   font-size: var(--pf-button-font-size-md);
 }
 
 .btn--lg {
   line-height: var(--pf-button-line-height-lg);
-  padding: var(--pf-padding-2-5) var(--pf-padding-4);
+  padding: var(--pf-padding-2) var(--pf-padding-4);
   font-size: var(--pf-button-font-size-lg);
 }
 
@@ -131,8 +131,7 @@
   color: var(--pf-button-outline-color);
 
   &:hover:not(:disabled) {
-    color: var(--pf-button-outline-hover-color);
-    border-color: var(--pf-button-outline-hover-color);
+    background-color: var(--pf-button-outline-hover-background-color);
   }
 
   &:focus {
@@ -168,23 +167,18 @@
 
 .btn--soft {
   color: var(--pf-button-soft-color);
-  border: var(--pf-border-sm) solid var(--pf-button-soft-border-color);
 
   &:hover {
-    color: var(--pf-button-soft-hover-color);
-    border-color: var(--pf-button-soft-hover-border-color);
+    background-color: var(--pf-button-soft-hover-background-color);
+    color: var(--pf-button-soft-color);
   }
 
   &:focus {
-    background-color: transparent;
-    color: var(--pf-button-soft-focus-color);
     border-color: var(--pf-button-soft-focus-border-color);
-    box-shadow: var(--pf-button-soft-focus-box-shadow);
   }
 
   &:disabled {
     color: var(--pf-button-soft-disabled-color);
-    border-color: var(--pf-button-soft-disabled-border-color);
   }
 }
 

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

@@ -28,25 +28,26 @@
     rgba(206, 96, 104, 0.25);
 }
 
-// Light Theme Specific Variables
+// Light Theme Specific Variableso
 :root [data-theme='light'] {
   // solid colors
-  --pf-button-solid-background-color: var(--pf-secondary-color-400);
+  --pf-button-solid-background-color: var(--pf-brand-color-500);
   --pf-button-solid-color: var(--pf-white-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-800);
+  --pf-button-solid-hover-background-color: var(--pf-brand-color-600);
+  --pf-button-solid-focus-background-color: var(--pf-brand-color-600);
+  --pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
+  --pf-button-solid-disabled-color: var(--pf-gray-color-500);
 
   // outline colors
-  --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);
+  --pf-button-outline-color: var(--pf-brand-color-500);
+  --pf-button-outline-border-color: var(--pf-brand-color-500);
+  --pf-button-outline-hover-color: var(--pf-brand-color-500);
+  --pf-button-outline-hover-background-color: var(--pf-brand-color-100);
+  --pf-button-outline-disabled-color: var(--pf-gray-color-250);
 
   // link
-  --pf-button-link-color: var(--pf-secondary-color-400);
-  --pf-button-link-hover-color: var(--pf-secondary-color-500);
+  --pf-button-link-color: var(--pf-link-color);
+  --pf-button-link-hover-color: var(--pf-link-hover-color);
   --pf-button-link-disabled-color: var(--pf-primary-color-300);
 
   // action
@@ -59,47 +60,48 @@
   --pf-button-action-disabled-color: var(--pf-primary-color-300);
 
   // destructive
-  --pf-button-destructive-background-color: var(--pf-red-color-400);
+  --pf-button-destructive-background-color: var(--pf-red-color-450);
   --pf-button-destructive-color: var(--pf-white-color);
   --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-background-color: var(--pf-red-color-500);
   --pf-button-destructive-focus-color: var(--pf-white-color);
   --pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
   --pf-button-destructive-disabled-color: var(--pf-white-color);
 
   // soft
-  --pf-button-soft-color: var(--pf-primary-color-300);
-  --pf-button-soft-border-color: var(--pf-primary-color-300);
-  --pf-button-soft-hover-color: var(--pf-primary-color-600);
-  --pf-button-soft-hover-border-color: var(--pf-primary-color-600);
-  --pf-button-soft-focus-color: var(--pf-primary-color);
-  --pf-button-soft-focus-border-color: var(--pf-primary-color);
-  --pf-button-soft-disabled-color: var(--pf-primary-color-300);
-  --pf-button-soft-disabled-border-color: var(--pf-primary-color-300);
+  --pf-button-soft-color: var(--pf-brand-color-500);
+  --pf-button-soft-border-color: transparent;
+  --pf-button-soft-hover-color: var(--pf-brand-color-500);
+  --pf-button-soft-hover-background-color: var(--pf-brand-color-150);
+  --pf-button-soft-focus-color: var(--pf-brand-color-500);
+  --pf-button-soft-focus-border-color: transparent;
+  --pf-button-soft-disabled-color: var(--pf-gray-color-500);
+  --pf-button-soft-disabled-border-color: transparent;
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   // solid Button Colors
-  --pf-button-solid-background-color: var(--pf-secondary-color);
-  --pf-button-solid-color: var(--pf-white-color);
-  --pf-button-solid-hover-background-color: var(--pf-secondary-color-550);
-  --pf-button-solid-focus-background-color: var(--pf-secondary-color);
-  --pf-button-solid-disabled-background-color: var(--pf-tertiary-color-600);
-  --pf-button-solid-disabled-color: var(--pf-tertiary-color-400);
+  --pf-button-solid-background-color: var(--pf-secondary-color-500);
+  --pf-button-solid-color: var(--pf-secondary-color-100);
+  --pf-button-solid-hover-background-color: var(--pf-secondary-color-600);
+  --pf-button-solid-focus-background-color: var(--pf-secondary-color-500);
+  --pf-button-solid-disabled-background-color: var(--pf-tertiary-color-800);
+  --pf-button-solid-disabled-color: var(--pf-gray-color-600);
 
   // outline colors
-  --pf-button-outline-color: var(--pf-secondary-color-300);
-  --pf-button-outline-border-color: var(--pf-secondary-color-300);
-  --pf-button-outline-hover-color: var(--pf-secondary-color-200);
-  --pf-button-outline-disabled-color: var(--pf-tertiary-color-450);
+  --pf-button-outline-color: var(--pf-secondary-color-400);
+  --pf-button-outline-border-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-background-color: var(--pf-primary-color-700);
+  --pf-button-outline-disabled-color: var(--pf-tertiary-color-700);
 
   // link colors
-  --pf-button-link-color: var(--pf-secondary-color-300);
-  --pf-button-link-hover-color: var(--pf-secondary-color-200);
-  --pf-button-link-disabled-color: var(--pf-tertiary-color-450);
+  --pf-button-link-color: var(--pf-secondary-color-450);
+  --pf-button-link-hover-color: var(--pf-secondary-color-400);
+  --pf-button-link-disabled-color: var(--pf-tertiary-color-70);
 
+  // - TODO - REMOVE?
   // action colors
   --pf-button-action-color: var(--pf-secondary-color-300);
   --pf-button-action-border-color: #42a7ee;
@@ -110,20 +112,17 @@
   --pf-button-action-disabled-color: var(--pf-tertiary-color-400);
 
   // destructive colors
-  --pf-button-destructive-background-color: var(--pf-error-color);
-  --pf-button-destructive-color: var(--pf-white-color);
+  --pf-button-destructive-background-color: var(--pf-red-color-450);
+  --pf-button-destructive-color: var(--pf-red-color-100);
   --pf-button-destructive-hover-background-color: var(--pf-red-color-600);
-  --pf-button-destructive-hover-color: var(--pf-white-color);
-  --pf-button-destructive-focus-background-color: var(--pf-red-color);
-  --pf-button-destructive-disabled-background-color: var(--pf-red-color-900);
-  --pf-button-destructive-disabled-color: var(--pf-white-color-40);
+  --pf-button-destructive-hover-color: var(--pf-red-color-50);
+  --pf-button-destructive-focus-background-color: var(--pf-red-color-450);
+  --pf-button-destructive-disabled-background-color: var(--pf-tertiary-color-800);
+  --pf-button-destructive-disabled-color: var(--pf-gray-color-600);
 
-  // soft colors
-  --pf-button-soft-color: var(--pf-primary-color-400);
-  --pf-button-soft-border-color: var(--pf-primary-color-400);
-  --pf-button-soft-hover-color: var(--pf-primary-color-300);
-  --pf-button-soft-hover-border-color: var(--pf-primary-color-300);
-  --pf-button-soft-focus-color: var(--pf-primary-color-400);
+  // soft colors ( tertiary )
+  --pf-button-soft-color: var(--pf-tertiary-color-250);
+  --pf-button-soft-hover-background-color: var(--pf-tertiary-color-800);
+  --pf-button-soft-hover-color: var(--pf-tertiary-color-150);
   --pf-button-soft-disabled-color: var(--pf-tertiary-color-700);
-  --pf-button-soft-disabled-border-color: var(--pf-tertiary-color-450);
 }

package/src/components/card/styles/Card.scss

@@ -1,32 +1,41 @@
 // Common Variables
 :root {
   --pf-card-rounded: var(--pf-rounded);
+  --pf-card-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
 }
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-card-background-color: var(--pf-white-color);
-  --pf-card-border-color: var(--pf-border-color);
+  --pf-card-background-color: var(--pf-page-background-color);
+  --pf-card-border-color: var(--pf-border-color-secondary);
+  --pf-card-heading-color: var(--pf-font-color-soft);
+  --pf-card-font-color: var(--pf-font-color);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-card-background-color: var(--pf-primary-color-600);
-  --pf-card-border-color: var(--pf-border-color);
+  --pf-card-background-color: var(--pf-page-background-color);
+  --pf-card-border-color: var(--pf-border-color-secondary);
+  --pf-card-heading-color: var(--pf-font-color-soft);
+  --pf-card-font-color: var(--pf-font-color);
 }
 
 .card {
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
   background: var(--pf-card-background-color);
-  border: var(--pf-border-sm) solid var(--pf-card-border-color);
   box-sizing: border-box;
+  color: var(--pf-card-font-color);
+  border: var(--pf-border-thin) solid var(--pf-card-border-color);
+  box-shadow: var(--pf-card-box-shadow);
 }
 
 .card__header {
   margin-bottom: var(--pf-margin-2);
+  color: var(--pf-card-heading-color);
   p {
+    color: var(--pf-card-font-color);
     font-size: var(--pf-font-size-subtitle2);
   }
 }

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

@@ -3,16 +3,16 @@
   --pf-floatui-border-radius: var(--pf-rounded);
   --pf-floatui-box-shadow: var(--pf-dropshadow);
   --pf-floatui-border: none;
-  --pf-floatui-border-color: var(--pf-border-color);
+  --pf-floatui-border-color: var(--pf-border-color-secondary);
 }
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-floatui-background-color: var(--pf-white-color);
+  --pf-floatui-background-color: var(--pf-background-color-secondary);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-floatui-background-color: var(--pf-primary-color-600);
+  --pf-floatui-background-color: var(--pf-background-color-secondary);
 }

package/src/components/forms/date/datePicker/styles/DatePicker.scss

@@ -1,35 +1,31 @@
 :root [data-theme='light'] {
-  --pf-date-picker-background-color: var(--pf-white-color);
-  --pf-date-picker-selected-date-background-color: var(--pf-primary-color);
-  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
-  --pf-date-picker-today-background-color: var(--pf-primary-color-200);
+  --pf-date-picker-background-color: var(--pf-background-color-secondary);
+  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
+  --pf-date-picker-selected-date-font-color: var(--pf-font-color-inverted);
+  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
 
   .rdp-root {
     --rdp-accent-color: var(--pf-link-color);
     --rdp-font-family: var(--pf-font-family-base);
 
     // range
-    --rdp-range_middle-background-color: var(--pf-primary-color-300);
+    --rdp-range_middle-background-color: var(--pf-page-background-color);
   }
 }
 
 :root [data-theme='dark'],
 :root {
-  // months
-  --pf-date-picker-background-color: var(--pf-primary-color-600);
-
-  // day
-  --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-400);
-  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
-  --pf-date-picker-today-background-color: var(--pf-primary-color);
+  --pf-date-picker-background-color: var(--pf-background-color-secondary);
+  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
+  --pf-date-picker-selected-date-font-color: var(--pf-font-color);
+  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
 
   .rdp-root {
     --rdp-accent-color: var(--pf-link-color);
-    --rdp-accent-background-color: var(--pf-primary-color-200);
     --rdp-font-family: var(--pf-font-family-base);
 
     // range
-    --rdp-range_middle-background-color: var(--pf-primary-color-700);
+    --rdp-range_middle-background-color: var(--pf-page-background-color);
   }
 }
 
@@ -42,10 +38,11 @@
 // Calendar
 
 .rdp-months {
+  color: var(--pf-font-color);
   background-color: var(--pf-date-picker-background-color);
   padding: var(--pf-padding-3);
   border-radius: var(--pf-rounded);
-  border: solid var(--pf-border-thin) var(--pf-border-color);
+  border: solid var(--pf-border-thin) var(--pf-border-color-primary);
   .rdp-nav {
     margin-top: var(--pf-margin-3);
     margin-right: var(--pf-margin-3);
@@ -68,6 +65,7 @@
     .rdp-day_button {
       background-color: var(--pf-date-picker-today-background-color);
       color: var(--pf-date-picker-selected-date-font-color);
+      border: none;
     }
   }
 
@@ -75,12 +73,13 @@
     .rdp-day_button {
       background-color: var(--pf-date-picker-selected-date-background-color);
       color: var(--pf-date-picker-selected-date-font-color);
-      border-color: var(--pf-border-color);
+      border: none;
     }
   }
 
   &.rdp-range_middle {
     .rdp-day_button {
+      color: var(--pf-font-color);
       background-color: transparent;
     }
   }

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -2,7 +2,7 @@ import { useId, useState, useEffect } from 'react';
 import { isValid, parse } from 'date-fns';
 import { DatePicker } from '../datePicker/DatePicker';
 import { Input } from '../../input';
-import { IconName } from '@/types';
+import { IconName } from '../../../icons/types';
 import { DateRange } from 'react-day-picker';
 import { FloatUI } from '../../../floatUI';
 import { Col, Row } from '../../../grid';

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

@@ -6,34 +6,34 @@ form {
 }
 
 :root [data-theme='light'] {
-  --pf-form-input-border-color: var(--pf-border-color);
-  --pf-form-input-background-color: var(--pf-white-color);
-  --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-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-700);
-  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
-  --pf-form-input-disabled-color: var(--pf-gray-color-400);
+  --pf-form-input-border-color: var(--pf-border-color-primary);
+  --pf-form-input-background-color: var(--pf-background-color-secondary);
+  --pf-form-input-color: var(--pf-font-color);
+  --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
+  --pf-form-input-help-color: var(--pf-font-color-mute);
+  --pf-form-input-hover-border-color: var(--pf-border-hover-color);
+  --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
+  --pf-form-input-focus-border-color: var(--pf-border-color-accent);
+  --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
+  --pf-form-input-disabled-background-color: var(--pf-page-background-color);
+  --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
+  --pf-form-input-disabled-color: var(--pf-font-color-disabled);
 }
 
 :root [data-theme='dark'],
 :root {
-  --pf-form-input-border-color: var(--pf-border-color);
-  --pf-form-input-background-color: var(--pf-primary-color-700);
-  --pf-form-input-color: var(--pf-gray-color-100);
-  --pf-form-input-placeholder-color: var(--pf-primary-color-50);
-  --pf-form-input-help-color: var(--pf-gray-color-200);
-  --pf-form-input-hover-background-color: var(--pf-primary-color-800);
-  --pf-form-input-focus-background-color: var(--pf-primary-color-800);
-  --pf-form-input-focus-border-color: var(--pf-secondary-color-700);
-  --pf-form-input-focus-outline-color: var(--pf-primary-color);
-  --pf-form-input-disabled-background-color: var(--pf-tertiary-color-450);
-  --pf-form-input-disabled-border-color: var(--pf-tertiary-color-450);
-  --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
+  --pf-form-input-border-color: var(--pf-border-color-primary);
+  --pf-form-input-background-color: var(--pf-background-color-secondary);
+  --pf-form-input-color: var(--pf-font-color);
+  --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
+  --pf-form-input-help-color: var(--pf-font-color-mute);
+  --pf-form-input-hover-border-color: var(--pf-border-hover-color);
+  --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
+  --pf-form-input-focus-border-color: var(--pf-border-color-accent);
+  --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
+  --pf-form-input-disabled-background-color: var(--pf-page-background-color);
+  --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
+  --pf-form-input-disabled-color: var(--pf-font-color-disabled);
 }
 
 // Common input/textarea form element styles
@@ -60,7 +60,7 @@ form {
     }
 
     &:hover {
-      background-color: var(--pf-form-input-hover-background-color);
+      border-color: var(--pf-form-input-hover-border-color);
     }
     &:focus {
       border-color: var(--pf-form-input-focus-border-color);

package/src/components/forms/select/__tests__/Select.test.tsx

@@ -12,7 +12,7 @@ const options: SelectOption[] = [
 
 describe('Select Component', () => {
   it('displays options correctly', () => {
-    render(<Select options={options} menuIsOpen />);
+    render(<Select options={options} menuIsOpen name="test-select" />);
     options.forEach((option) => {
       expect(screen.getByText(option.label)).toBeInTheDocument();
     });
@@ -20,7 +20,7 @@ describe('Select Component', () => {
 
   it('handles onChange event', () => {
     const handleChange = jest.fn();
-    render(<Select options={options} menuIsOpen onChange={handleChange} />);
+    render(<Select options={options} menuIsOpen onChange={handleChange} name="test-select" />);
     const option = screen.getByText('Option 1');
     fireEvent.click(option);
     expect(handleChange).toHaveBeenCalledWith(options[0], expect.any(Object));
@@ -28,14 +28,14 @@ describe('Select Component', () => {
 
   it('applies custom class names', () => {
     const customClassName = 'custom-select-class';
-    render(<Select options={options} className={customClassName} />);
+    render(<Select options={options} className={customClassName} name="test-select" />);
     const selectWrapper = screen.getByRole('combobox').closest('.select-wrapper');
     expect(selectWrapper).toHaveClass(customClassName);
   });
 
   it('applies custom class name prefix', () => {
     const customClassNamePrefix = 'custom-prefix';
-    render(<Select options={options} classNamePrefix={customClassNamePrefix} />);
+    render(<Select options={options} classNamePrefix={customClassNamePrefix} name="test-select" />);
     const selectWrapper = screen.getByRole('combobox');
     expect(selectWrapper).toHaveClass(`${customClassNamePrefix}__input`);
   });
@@ -46,7 +46,7 @@ describe('Select Component', () => {
       detail: `${index + 1}23 Count`,
     }));
 
-    render(<Select options={optionsWithDetail} menuIsOpen />);
+    render(<Select options={optionsWithDetail} menuIsOpen name="test-select" />);
     optionsWithDetail.forEach((option) => {
       expect(screen.getByText(option.detail)).toBeInTheDocument();
     });
@@ -59,7 +59,12 @@ describe('Select Component', () => {
     );
 
     render(
-      <Select options={oneOption} components={{ Option: CustomOptionComponent }} menuIsOpen />,
+      <Select
+        options={oneOption}
+        components={{ Option: CustomOptionComponent }}
+        menuIsOpen
+        name="test-select"
+      />,
     );
 
     expect(screen.getByTestId('custom-option')).toHaveTextContent(oneOption[0].label);

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

@@ -1,18 +1,18 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-select-indicator-color: var(--pf-gray-color);
-  --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-gray-color-900);
+  --pf-select-indicator-color: var(--pf-font-color-accent);
+  --pf-select-option-selected-color: var(--pf-background-color-accent);
+  --pf-select-option-color: var(--pf-font-color);
+  --pf-select-option-hover-color: var(--pf-background-color-highlight);
 }
 
 // Dark  Theme and Default Variables
 :root [data-theme='dark'],
 :root {
-  --pf-select-indicator-color: var(--pf-gray-color-100);
-  --pf-select-option-selected-color: var(--pf-tertiary-color-700);
-  --pf-select-option-color: var(--pf-gray-color-100);
-  --pf-select-option-hover-color: var(--pf-primary-color);
+  --pf-select-indicator-color: var(--pf-font-color-accent);
+  --pf-select-option-selected-color: var(--pf-background-color-accent);
+  --pf-select-option-color: var(--pf-font-color);
+  --pf-select-option-hover-color: var(--pf-background-color-highlight);
 }
 .select-wrapper {
   .select__ {
@@ -23,8 +23,7 @@
       box-shadow: none;
 
       &:hover:not(:focus) {
-        background-color: var(--pf-form-input-hover-background-color);
-        border-color: var(--pf-form-input-border-color);
+        border-color: var(--pf-form-input-hover-border-color);
       }
 
       &:focus,

package/src/components/index.ts

@@ -18,7 +18,7 @@ export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
-export { Modal } from './modal';
+export { Modal, ConfirmationModal } from './modal';
 export { Badge } from './badge';
 export { Pagination } from './pagination';
 export { TanstackTable } from './tanstackTable';

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

@@ -4,17 +4,17 @@
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --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-gray-color-900);
+  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
+  --pf-menu-item-background-color: var(--pf-background-color-secondary);
+  --pf-menu-item-color: var(--pf-font-color);
+  --pf-menu-item-focus-color: var(--pf-background-color-accent);
 }
 
 // Dark Theme Specific Variables
 :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-50);
-  --pf-menu-item-focus-color: var(--pf-primary-color-500);
+  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
+  --pf-menu-item-background-color: var(--pf-background-color-secondary);
+  --pf-menu-item-color: var(--pf-font-color);
+  --pf-menu-item-focus-color: var(--pf-background-color-accent);
 }