@indico-data/design-system 2.43.0 → 2.44.0

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

@@ -3,160 +3,127 @@
 :root [data-theme='light'],
 :root [data-theme='dark'] {
   // Typography
-  --pf-button-font-weight-bold: var(--pf-font-weight-bold);
-  --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
-
-  // Primary Button Colors
-  --pf-button-background-primary-color: var(--pf-primary-color);
-  --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-primary-color: var(--pf-primary-color);
-  --pf-button-primary-text-color: var(--pf-white-color);
-
-  // Secondary Button Colors
-  --pf-button-background-secondary-color: var(--pf-secondary-color);
-  --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
-  --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
-  --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
-  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
-  --pf-button-secondary-color: var(--pf-secondary-color);
-  --pf-button-secondary-text-color: var(--pf-white-color);
-
-  // Error Button Colors
-  --pf-button-background-error-color: var(--pf-error-color);
-  --pf-button-disabled-error-color: var(--pf-red-color-300);
-  --pf-button-focus-error-color: var(--pf-red-color-900);
-  --pf-button-hover-error-color: var(--pf-red-color-400);
-  --pf-button-error-color: var(--pf-error-color);
-  --pf-button-error-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-error-color: var(--pf-red-color-100);
-
-  // Success Button Colors
-  --pf-button-background-success-color: var(--pf-success-color);
-  --pf-button-focus-success-color: var(--pf-green-color-900);
-  --pf-button-hover-success-color: var(--pf-green-color-400);
-  --pf-button-success-color: var(--pf-success-color);
-  --pf-button-success-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-success-color: var(--pf-green-color-100);
-
-  // Warning Button Colors
-  --pf-button-background-warning-color: var(--pf-warning-color);
-  --pf-button-focus-warning-color: var(--pf-orange-color-900);
-  --pf-button-hover-warning-color: var(--pf-orange-color-400);
-  --pf-button-warning-color: var(--pf-warning-color);
-  --pf-button-warning-text-color: var(--pf-white-color);
-
-  // Info Button Colors
-
-  --pf-button-disabled-info-color: var(--pf-gray-color-300);
-  --pf-button-focus-info-color: var(--pf-gray-color-900);
-  --pf-button-info-color: var(--pf-info-color);
-  --pf-button-info-text-color: var(--pf-white-color);
-
-  // Gray Button Color
-  --pf-button-gray-color: var(--pf-gray-color);
-  --pf-button-gray-disabled-color: var(--pf-gray-color-400);
-
-  // Outline Buttons
-  --pf-button-outline-background-color: var(--pf-white-color);
-  --pf-button-rounded: var(--pf-rounded);
+  --pf-button-font-weight: var(--pf-font-weight-regular);
+  --pf-button-font-size-xs: calc(0.875 * var(--pf-font-size-base));
+  --pf-button-font-size-sm: calc(0.875 * var(--pf-font-size-base));
+  --pf-button-font-size-md: calc(0.875 * var(--pf-font-size-base));
+  --pf-button-font-size-lg: var(--pf-font-size-base);
+  --pf-button-line-height-xs: var(--pf-line-height-md);
+  --pf-button-line-height-sm: var(--pf-line-height-md);
+  --pf-button-line-height-md: var(--pf-line-height-md);
+  --pf-button-line-height-lg: var(--pf-line-height-lg);
+
+  // Border radii
+  --pf-button-border-radius: var(--pf-rounded-lg);
+  --pf-button-pill-border-radius: 100px;
+
+  // Focus box shadows
+  --pf-button-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(25, 139, 220, 0.25);
+  --pf-button-solid-focus-box-shadow: var(--pf-button-focus-box-shadow);
+  --pf-button-action-focus-box-shadow: var(--pf-button-focus-box-shadow);
+  --pf-button-outline-focus-box-shadow: var(--pf-focus-box-shadow-alignment)
+    rgba(54, 161, 234, 0.25);
+  --pf-button-soft-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(92, 112, 140, 0.25);
+  --pf-button-destructive-focus-box-shadow: var(--pf-focus-box-shadow-alignment)
+    rgba(206, 96, 104, 0.25);
 }
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-button-disabled-success-color: var(--pf-green-color-300);
-  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
-  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
-
-  --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);
+  // solid colors
+  --pf-button-solid-background-color: var(--pf-primary-color);
+  --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-disabled-background-color: var(--pf-primary-color-300);
+  --pf-button-solid-disabled-color: var(--pf-gray-color-100);
+
+  // 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-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-600);
+  --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-disabled-color: var(--pf-primary-color-300);
+
+  // destructive
+  --pf-button-destructive-background-color: var(--pf-error-color);
+  --pf-button-destructive-color: var(--pf-white-color);
+  --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
+  --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-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);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --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);
+  // 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);
+
+  // 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);
+
+  // link colors
+  --pf-button-link-color: var(--pf-secondary-color-550);
+  --pf-button-link-hover-color: var(--pf-secondary-color-800);
+  --pf-button-link-disabled-color: var(--pf-primary-color-200);
+
+  // action colors
+  --pf-button-action-color: var(--pf-secondary-color-300);
+  --pf-button-action-border-color: #42a7ee;
+  --pf-button-action-hover-background-color: var(--pf-tertiary-color-450);
+  --pf-button-action-hover-border-color: #455770;
+  --pf-button-action-hover-color: var(--pf-white-color);
+  --pf-button-action-disabled-border-color: var(--pf-tertiary-color-400);
+  --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-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);
+
+  // 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);
+  --pf-button-soft-disabled-color: var(--pf-tertiary-color-700);
+  --pf-button-soft-disabled-border-color: var(--pf-tertiary-color-450);
 }

package/src/components/button/types.ts

@@ -1,10 +1,8 @@
-import { IconName, SemanticColor } from '@/types';
+import { IconName } from '../../types';
 
-export type ButtonVariants = 'solid' | 'outline' | 'text';
+export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 
-export type ButtonIconPositions = 'left' | 'right';
-
-export type ButtonSizes = 'sm' | 'md' | 'lg';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 
@@ -18,10 +16,10 @@ export interface ButtonProps {
   isLoading?: boolean;
   onClick?: (...args: any[]) => void;
   variant?: ButtonVariants;
-  iconPosition?: ButtonIconPositions;
-  color?: SemanticColor;
+  isPill?: boolean;
+  iconLeft?: IconName;
+  iconRight?: IconName;
   size?: ButtonSizes;
-  iconName?: IconName;
   type?: ButtonTypes;
   href?: string;
   isDisabled?: boolean;

package/src/components/card/Card.stories.tsx

@@ -85,7 +85,7 @@ export const Default: Story = {
               musical talents, and wide array of skills. Bards are often seen as
               jacks-of-all-trades, able to adapt to various situations and roles within a party.
               <hr />
-              <Button color="secondary" ariaLabel="Learn More" onClick={() => alert('Learn More')}>
+              <Button ariaLabel="Learn More" onClick={() => alert('Learn More')}>
                 Learn More
               </Button>
             </Card>

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

@@ -1,19 +1,19 @@
 // Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-card-background-color: var(--pf-white-color);
-  --pf-card-text-color: var(--pf-gray-color);
-  --pf-card-border-color: var(--pf-gray-color);
+:root {
   --pf-card-rounded: var(--pf-rounded);
 }
 
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-card-background-color: var(--pf-white-color);
+  --pf-card-border-color: var(--pf-border-color);
+}
+
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-card-background-color: var(--pf-primary-color);
-  --pf-card-border-color: var(--pf-primary-color-200);
-  --pf-card-text-color: var(--pf-gray-color-100);
-  --pf-card-border-color: var(--pf-steel-color-600);
+:root [data-theme='dark'],
+:root {
+  --pf-card-background-color: var(--pf-primary-color-600);
+  --pf-card-border-color: var(--pf-border-color);
 }
 
 .card {

package/src/components/floatUI/FloatUI.mdx

@@ -27,7 +27,7 @@ import React, { useState } from 'react';
 import { FloatUI } from '@/components/FloatUI';
 import { Button } from '@/components/Button';
 import { Menu } from '@/components/Menu';
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/components/icons/Icon';
 
 const ControlledExample = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -43,27 +43,27 @@ const ControlledExample = () => {
   return (
     <div>
       <FloatUI ariaLabel="Controlled Example FloatUI" isOpen={isOpen} setIsOpen={setIsOpen}>
-        <Button iconName="kabob" ariaLabel="Toggle FloatUI" onClick={handleToggle}>
+        <Button iconLeft="kabob" ariaLabel="Toggle FloatUI" onClick={handleToggle}>
           Actions
         </Button>
         <Menu>
           <Button
             ariaLabel="Refresh Data"
-            iconName="retrain"
+            iconLeft="retrain"
             onClick={() => handleActionClick('Refresh Data')}
           >
             Refresh Data
           </Button>
           <Button
             ariaLabel="Configure Fields"
-            iconName="edit"
+            iconLeft="edit"
             onClick={() => handleActionClick('Configure Fields')}
           >
             Configure Fields
           </Button>
           <Button
             ariaLabel="Delete Library"
-            iconName="trash"
+            iconLeft="trash"
             onClick={() => handleActionClick('Delete Library')}
           >
             Delete Library

package/src/components/floatUI/FloatUI.stories.tsx

@@ -105,12 +105,12 @@ type Story = StoryObj<FloatUIProps>;
 export const Uncontrolled: Story = {
   render: (args) => (
     <FloatUI {...args} ariaLabel="Example FloatUI">
-      <Button iconName="kabob" ariaLabel="Toggle FloatUI" />
+      <Button iconLeft="kabob" ariaLabel="Toggle FloatUI" variant="action" />
       <Menu>
         <Button
           data-testid="refresh-library"
           ariaLabel="Refresh Data"
-          iconName="retrain"
+          iconLeft="retrain"
           onClick={() => console.log('Refresh Data')}
         >
           Refresh Data
@@ -118,7 +118,7 @@ export const Uncontrolled: Story = {
         <Button
           data-testid="configure-fields"
           ariaLabel="Configure Fields"
-          iconName="edit"
+          iconLeft="edit"
           onClick={() => console.log('Configure Fields')}
         >
           Configure Fields
@@ -126,7 +126,7 @@ export const Uncontrolled: Story = {
         <Button
           data-testid="delete-library"
           ariaLabel="Delete Library"
-          iconName="trash"
+          iconLeft="trash"
           onClick={() => console.log('Delete Library')}
         >
           Delete Library
@@ -147,12 +147,12 @@ export const Controlled: Story = {
         isOpen={isOpen}
         setIsOpen={setIsOpen}
       >
-        <Button iconName="kabob" ariaLabel="Toggle FloatUI" />
+        <Button iconLeft="kabob" ariaLabel="Toggle FloatUI" variant="action" />
         <Menu>
           <Button
             data-testid="refresh-library"
             ariaLabel="Refresh Data"
-            iconName="retrain"
+            iconLeft="retrain"
             onClick={() => console.log('Refresh Data')}
           >
             Refresh Data
@@ -160,7 +160,7 @@ export const Controlled: Story = {
           <Button
             data-testid="configure-fields"
             ariaLabel="Configure Fields"
-            iconName="edit"
+            iconLeft="edit"
             onClick={() => console.log('Configure Fields')}
           >
             Configure Fields
@@ -168,7 +168,7 @@ export const Controlled: Story = {
           <Button
             data-testid="delete-library"
             ariaLabel="Delete Library"
-            iconName="trash"
+            iconLeft="trash"
             onClick={() => console.log('Delete Library')}
           >
             Delete Library

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -32,13 +32,13 @@ describe('FloatUI Component', () => {
       <FloatUI ariaLabel="Example FloatUI">
         <Button ariaLabel="Toggle FloatUI">Toggle</Button>
         <Menu>
-          <Button ariaLabel="Refresh Data" iconName="retrain">
+          <Button ariaLabel="Refresh Data" iconLeft="retrain">
             Refresh Data
           </Button>
-          <Button ariaLabel="Configure Fields" iconName="edit">
+          <Button ariaLabel="Configure Fields" iconLeft="edit">
             Configure Fields
           </Button>
-          <Button ariaLabel="Delete Library" iconName="trash">
+          <Button ariaLabel="Delete Library" iconLeft="trash">
             Delete Library
           </Button>
         </Menu>

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

@@ -5,7 +5,6 @@
 
 .floatui-content {
   border-radius: var(--pf-floatui-border-radius);
-  border: solid 1px;
-  border-color: var(--pf-floatui-border-color);
+  box-shadow: var(--pf-floatui-box-shadow);
   background: var(--pf-floatui-background-color);
 }

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

@@ -1,14 +1,18 @@
 // Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-floatui-background-color: var(--pf-white-color);
-  --pf-floatui-border-color: var(--pf-border-color-900);
+:root {
   --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);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-floatui-background-color: var(--pf-white-color);
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   --pf-floatui-background-color: var(--pf-primary-color-600);
-  --pf-floatui-border-color: var(--pf-border-color);
 }

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

@@ -1,21 +1,15 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-checkbox-background-color: var(--pf-white-color);
+// Light Theme Specific Variables
+:root [data-theme='light'] {
   --pf-checkbox-check-color: var(--pf-primary-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-500);
+// Dark Theme and Default Variables
+:root [data-theme='dark'],
+:root {
   --pf-checkbox-check-color: var(--pf-white-color);
-  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
 }
-
 .form-control {
   .checkbox-wrapper {
     display: flex;
@@ -51,9 +45,9 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid var(--pf-checkbox-border-color);
+    border: 1px solid var(--pf-form-input-border-color);
     border-radius: var(--pf-rounded);
-    background: var(--pf-checkbox-background-color);
+    background: var(--pf-form-input-background-color);
   }
   .checkbox-input:checked + label:after,
   .checkbox-input:not(:checked) + label:after {
@@ -93,6 +87,6 @@
   }
 
   .checkbox-input:disabled + label:after {
-    background: var(--pf-checkbox-disabled-color);
+    background: var(--pf-form-input-disabled-background-color);
   }
 }

package/src/components/forms/date/datePicker/__tests__/DatePicker.test.tsx

@@ -14,7 +14,13 @@ describe('DatePicker', () => {
     });
 
     it('renders the date picker with a custom number of months', () => {
-      render(<DatePicker numberOfMonths={3} data-testid="date-picker" />);
+      render(
+        <DatePicker
+          numberOfMonths={3}
+          defaultMonth={new Date(new Date().getFullYear(), 0, 1)}
+          data-testid="date-picker"
+        />,
+      );
       expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
     });
   });
@@ -31,7 +37,14 @@ describe('DatePicker', () => {
     });
 
     it('renders the date range picker with a custom number of months', () => {
-      render(<DatePicker mode="range" numberOfMonths={3} data-testid="date-picker" />);
+      render(
+        <DatePicker
+          mode="range"
+          numberOfMonths={3}
+          defaultMonth={new Date(new Date().getFullYear(), 0, 1)}
+          data-testid="date-picker"
+        />,
+      );
       expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
     });
   });
@@ -48,7 +61,14 @@ describe('DatePicker', () => {
     });
 
     it('renders the date picker with a custom number of months', () => {
-      render(<DatePicker mode="multiple" numberOfMonths={3} data-testid="date-picker" />);
+      render(
+        <DatePicker
+          mode="multiple"
+          numberOfMonths={3}
+          defaultMonth={new Date(new Date().getFullYear(), 0, 1)}
+          data-testid="date-picker"
+        />,
+      );
       expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
     });
   });