@axinom/mosaic-ui 0.67.0-rc.2 → 0.67.0

package/src/styles/variables.scss

@@ -13,128 +13,128 @@ $XL-min-size: 1920px;
 
 /* Scrollbar vars */
 $scrollbar-size: 7px;
-$scrollbar-track-color: var(--ax-neutral-lighter);
-$scrollbar-thumb-color: var(--ax-neutral-light);
-$scrollbar-thumb-hover-color: var(--ax-neutral);
-$scrollbar-corner-color: var(--ax-neutral-lighter);
+$scrollbar-track-color: var(--mosaic-neutral-3);
+$scrollbar-thumb-color: var(--mosaic-neutral-2);
+$scrollbar-thumb-hover-color: var(--mosaic-neutral);
+$scrollbar-corner-color: var(--mosaic-neutral-3);
 
 /* Navigation vars */
 $header-height: 70px; // Important: if this value is changed, breadcrumb arrow styling need to be adjusted as well.
-$header-border-bottom: var(--ax-primary-dark);
+$header-border-bottom: var(--mosaic-accent);
 
 /* Accordion vars */
 $accordion-header-background-color: white;
-$accordion-header-text-color: var(--ax-primary-dark);
+$accordion-header-text-color: var(--mosaic-accent);
 $accordion-item-background-color: white;
-$accordion-item-text-color: var(--ax-neutral-dark);
+$accordion-item-text-color: var(--mosaic-neutral-1);
 $accordion-item-hover-color: color-mix(
   in srgb,
-  var(--ax-primary) 15%,
+  var(--mosaic-secondary) 15%,
   transparent
 );
-$accordion-item-border: 1px solid var(--ax-neutral-light);
-$accordion-item-arrow-color: var(--ax-primary);
-$accordion-item-arrow-disabled-color: var(--ax-neutral);
+$accordion-item-border: 1px solid var(--mosaic-neutral-2);
+$accordion-item-arrow-color: var(--mosaic-secondary);
+$accordion-item-arrow-disabled-color: var(--mosaic-neutral);
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;
 $explorer-header-background-color: white;
 $explorer-row-hover-background-color: color-mix(
   in srgb,
-  var(--ax-primary) 10%,
+  var(--mosaic-secondary) 10%,
   transparent
 );
-$explorer-action-button-color: var(--ax-primary-light);
+$explorer-action-button-color: var(--mosaic-primary);
 $explorer-action-button-color-hover: color-mix(
   in srgb,
-  var(--ax-primary-light) 75%,
+  var(--mosaic-primary) 75%,
   transparent
 );
-$explorer-row-thumbnail-bg-color: var(--ax-neutral-lighter);
-$explorer-external-link-color: var(--ax-primary-light);
+$explorer-row-thumbnail-bg-color: var(--mosaic-neutral-3);
+$explorer-external-link-color: var(--mosaic-primary);
 $explorer-sort-color: white;
-$explorer-sort-stroke-color: var(--ax-neutral);
-$explorer-selected-sort-color: var(--ax-primary);
-$explorer-column-label-color: var(--ax-primary-dark);
-$explorer-list-row-border: 1px solid var(--ax-neutral-light);
+$explorer-sort-stroke-color: var(--mosaic-neutral);
+$explorer-selected-sort-color: var(--mosaic-secondary);
+$explorer-column-label-color: var(--mosaic-accent);
+$explorer-list-row-border: 1px solid var(--mosaic-neutral-2);
 
 /* List vars */
 
 $list-paddings: 0px 5px 0px 5px;
-$list-tag-background-color: var(--ax-neutral-lighter);
-$list-tag-overflow-background-color: var(--ax-neutral-dark);
+$list-tag-background-color: var(--mosaic-neutral-3);
+$list-tag-overflow-background-color: var(--mosaic-neutral-1);
 
 /* Filter vars */
 $filter-background-color: white;
 $filter-background-selected-color: color-mix(
   in srgb,
-  var(--ax-primary) 15%,
+  var(--mosaic-secondary) 15%,
   transparent
 );
-$filter-light-font-color: var(--ax-neutral-dark);
-$filter-option-background-color: var(--ax-primary-light);
-$filter-context-button-color: var(--ax-primary);
-$filter-title-color: var(--ax-primary);
+$filter-light-font-color: var(--mosaic-neutral-1);
+$filter-option-background-color: var(--mosaic-primary);
+$filter-context-button-color: var(--mosaic-secondary);
+$filter-title-color: var(--mosaic-secondary);
 $filter-font-size: 14px;
 $filter-width: 330px;
-$filter-controller-background-color: var(--ax-neutral-lighter);
-$filter-border-color: var(--ax-primary);
-$multi-option-checkbox-border: var(--ax-primary);
-$multi-option-label-color: var(--ax-neutral-dark);
+$filter-controller-background-color: var(--mosaic-neutral-3);
+$filter-border-color: var(--mosaic-secondary);
+$multi-option-checkbox-border: var(--mosaic-secondary);
+$multi-option-label-color: var(--mosaic-neutral-1);
 
 /* Details vars */
 $details-background-color: #ffffff;
 
 /* Hub vars */
-$hub-title-color: var(--ax-primary-dark);
-$hub-tile-border-color: var(--ax-primary-light);
-$hub-tile-color: var(--ax-primary-light);
-$hub-tile-stroke-color: var(--ax-primary-dark);
-$hub-tile-border-hover: var(--ax-primary-light);
+$hub-title-color: var(--mosaic-accent);
+$hub-tile-border-color: var(--mosaic-primary);
+$hub-tile-color: var(--mosaic-primary);
+$hub-tile-stroke-color: var(--mosaic-accent);
+$hub-tile-border-hover: var(--mosaic-primary);
 
 /* InfoPanel vars */
-$infopanel-background-color: var(--ax-neutral-lighter);
+$infopanel-background-color: var(--mosaic-neutral-3);
 $infopanel-border-color: #ffffff;
-$infopanel-title-color: var(--ax-primary-dark);
+$infopanel-title-color: var(--mosaic-accent);
 $infopanel-title-font-weight: bold;
-$infopanel-subtitle-color: var(--ax-neutral-dark);
-$infopanel-paragraph-color: var(--ax-neutral-dark);
+$infopanel-subtitle-color: var(--mosaic-neutral-1);
+$infopanel-paragraph-color: var(--mosaic-neutral-1);
 
 /* LandingPage vars */
-$landingpage-title-color: var(--ax-primary-dark);
+$landingpage-title-color: var(--mosaic-accent);
 $landingpage-subtitle-color: #8c8b87;
-$landingpage-largetile-background-color: var(--ax-primary-light);
+$landingpage-largetile-background-color: var(--mosaic-primary);
 $landingpage-largetile-disabled-background-color: #8c8b87;
 $landingpage-largetile-color: #fff;
-$landingpage-largetile-stroke-color: var(--ax-primary-dark);
+$landingpage-largetile-stroke-color: var(--mosaic-accent);
 $landingpage-largetile-hover-background-color: color-mix(
   in oklch,
-  var(--ax-primary-light),
+  var(--mosaic-primary),
   white 10%
 );
 $landingpage-smalltile-background-color: #ffffff;
-$landingpage-smalltile-border-color: var(--ax-primary-light);
+$landingpage-smalltile-border-color: var(--mosaic-primary);
 $landingpage-smalltile-disabled-background-color: #8c8b87;
-$landingpage-smalltile-color: var(--ax-primary-light);
-$landingpage-smalltile-stroke-color: var(--ax-primary-dark);
+$landingpage-smalltile-color: var(--mosaic-primary);
+$landingpage-smalltile-stroke-color: var(--mosaic-accent);
 
 /* PageHeader */
 $page-header-color: #ffffff;
-$page-header-background-color: var(--ax-primary-dark);
+$page-header-background-color: var(--mosaic-accent);
 $page-header-height: 100px;
 
 /* PageHeaderAction */
 $page-header-action-color: #ffffff;
-$page-header-action-background-color: var(--ax-primary-light);
-$page-header-action-tag-background-color: var(--ax-neutral-light);
+$page-header-action-background-color: var(--mosaic-primary);
+$page-header-action-tag-background-color: var(--mosaic-neutral-2);
 $page-header-action-tag-font-size: 10px;
 
-$page-header-action-confirmation-background-color: var(--ax-warning);
+$page-header-action-confirmation-background-color: var(--mosaic-warning);
 $page-header-action-pressed-color: $page-header-action-background-color;
 $page-header-action-pressed-background-color: $page-header-action-color;
 $page-header-action-icon-color: #ffffff;
 $page-header-action-active-background-color: #ffffff;
-$page-header-action-context-background-color: var(--ax-primary);
+$page-header-action-context-background-color: var(--mosaic-secondary);
 
 $page-header-action-hover-background-color: color-mix(
   in srgb,
@@ -168,7 +168,7 @@ $page-header-action-disabled-fg-color: color-mix(
   white 50%,
   transparent
 );
-$page-header-action-disabled-bg-color: var(--ax-neutral);
+$page-header-action-disabled-bg-color: var(--mosaic-neutral);
 
 /* PageHeaderBulkActions */
 $page-header-actions-background-color: $page-header-background-color;
@@ -176,115 +176,115 @@ $page-header-actions-background-color: $page-header-background-color;
 /* Form vars */
 $width-big: 650px;
 $width-small: 320px;
-$input-color: var(--ax-neutral-dark);
-$input-placeholder-color: var(--ax-neutral);
-$input-hover-color: var(--ax-primary);
-$input-label-color: var(--ax-primary-dark);
-$input-border-color: var(--ax-neutral-light);
+$input-color: var(--mosaic-neutral-1);
+$input-placeholder-color: var(--mosaic-neutral);
+$input-hover-color: var(--mosaic-secondary);
+$input-label-color: var(--mosaic-accent);
+$input-border-color: var(--mosaic-neutral-2);
 $input-max-width: $width-big;
 $label-size: 150px;
-$divider-color: var(--ax-neutral);
-$form-group-title-color: var(--ax-neutral);
+$divider-color: var(--mosaic-neutral);
+$form-group-title-color: var(--mosaic-neutral);
 $form-group-title-font-size: 18px;
 $label-gap: 30px;
-$input-disabled-font-color: var(--ax-neutral);
-$input-disabled-border-color: var(--ax-neutral-light);
-$input-disabled-background-color: var(--ax-neutral-lighter);
-$input-invalid-color: var(--ax-error);
-$input-invalid-border-color: var(--ax-error);
-$input-invalid-hover-color: var(--ax-error);
-$tag-border-color-1: var(--ax-neutral-light);
-$tag-border-color-2: var(--ax-primary);
-$tag-icon-color: var(--ax-primary);
-$tag-font-color: var(--ax-neutral-dark);
-$tag-background-color: var(--ax-neutral-lighter);
-$tag-enter-color: color-mix(in srgb, var(--ax-primary) 25%, transparent);
-$tag-plus-button-bg-color: var(--ax-primary);
-$tag-plus-button-hover-stroke-color: var(--ax-primary);
-$form-error-color: var(--ax-error);
-$select-arrow-color: var(--ax-primary);
-$select-disabled-arrow-color: var(--ax-neutral);
+$input-disabled-font-color: var(--mosaic-neutral);
+$input-disabled-border-color: var(--mosaic-neutral-2);
+$input-disabled-background-color: var(--mosaic-neutral-3);
+$input-invalid-color: var(--mosaic-error);
+$input-invalid-border-color: var(--mosaic-error);
+$input-invalid-hover-color: var(--mosaic-error);
+$tag-border-color-1: var(--mosaic-neutral-2);
+$tag-border-color-2: var(--mosaic-secondary);
+$tag-icon-color: var(--mosaic-secondary);
+$tag-font-color: var(--mosaic-neutral-1);
+$tag-background-color: var(--mosaic-neutral-3);
+$tag-enter-color: color-mix(in srgb, var(--mosaic-secondary) 25%, transparent);
+$tag-plus-button-bg-color: var(--mosaic-secondary);
+$tag-plus-button-hover-stroke-color: var(--mosaic-secondary);
+$form-error-color: var(--mosaic-error);
+$select-arrow-color: var(--mosaic-secondary);
+$select-disabled-arrow-color: var(--mosaic-neutral);
 $label-font-size: 16px;
-$file-upload-progress: var(--ax-primary);
-$file-upload-progress-background: var(--ax-neutral-lighter);
-$file-upload-input: var(--ax-neutral-light);
+$file-upload-progress: var(--mosaic-secondary);
+$file-upload-progress-background: var(--mosaic-neutral-3);
+$file-upload-input: var(--mosaic-neutral-2);
 $read-only-max-width: $width-big;
 $select-max-width: $width-small;
 $tags-max-width: $width-small;
 $textarea-max-width: $width-big;
 $date-picker-max-width: $width-small;
 $form-element-min-height: 50px;
-$read-only-text-background-color: var(--ax-neutral-lighter);
+$read-only-text-background-color: var(--mosaic-neutral-3);
 $select-background-color: white;
-$form-indicator-color: var(--ax-success);
-$radio-hover-stroke-color: var(--ax-primary);
-$radio-checked-fill-color: var(--ax-primary);
-$toggle-button-stroke-color: var(--ax-primary);
-$toggle-button-off-text-color: var(--ax-primary);
-$toggle-button-on-bg-color: var(--ax-primary);
-$live-suggest-border-color: var(--ax-primary);
+$form-indicator-color: var(--mosaic-success);
+$radio-hover-stroke-color: var(--mosaic-secondary);
+$radio-checked-fill-color: var(--mosaic-secondary);
+$toggle-button-stroke-color: var(--mosaic-secondary);
+$toggle-button-off-text-color: var(--mosaic-secondary);
+$toggle-button-on-bg-color: var(--mosaic-secondary);
+$live-suggest-border-color: var(--mosaic-secondary);
 $live-suggest-background-selected-color: color-mix(
   in srgb,
-  var(--ax-primary) 15%,
+  var(--mosaic-secondary) 15%,
   transparent
 );
-$live-suggest-text-color: var(--ax-primary);
+$live-suggest-text-color: var(--mosaic-secondary);
 
 /* Inline Menu */
-$inline-menu-button-stroke-color: var(--ax-primary);
-$inline-menu-button-hover-bg-color: var(--ax-primary);
-$inline-menu-button-selected-bg-color: var(--ax-primary);
+$inline-menu-button-stroke-color: var(--mosaic-secondary);
+$inline-menu-button-hover-bg-color: var(--mosaic-secondary);
+$inline-menu-button-selected-bg-color: var(--mosaic-secondary);
 
 /* Date Time Picker*/
-$calendar-tile-active: var(--ax-primary);
+$calendar-tile-active: var(--mosaic-secondary);
 $calendar-tile-active-hover: color-mix(
   in srgb,
-  var(--ax-primary) 20%,
+  var(--mosaic-secondary) 20%,
   transparent
 );
-$calendar-button-stroke-color: var(--ax-primary);
-$calendar-title-color: var(--ax-primary-dark);
-$calendar-container-border-color: var(--ax-primary);
-$calendar-container-bg-color: var(--ax-primary);
+$calendar-button-stroke-color: var(--mosaic-secondary);
+$calendar-title-color: var(--mosaic-accent);
+$calendar-container-border-color: var(--mosaic-secondary);
+$calendar-container-bg-color: var(--mosaic-secondary);
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;
 $dynamic-list-row-hover-bg-color: color-mix(
   in srgb,
-  var(--ax-primary) 10%,
+  var(--mosaic-secondary) 10%,
   transparent
 );
 $dynamic-list-row-height: 50px;
 $dynamic-list-column-gap: 20px;
 $dynamic-list-row-gap: 0px;
-$dynamic-list-position-color: var(--ax-primary);
-$dynamic-list-row-border: 1px solid var(--ax-neutral-light);
-$dynamic-list-entry-row-bg-color: var(--ax-neutral-lighter);
+$dynamic-list-position-color: var(--mosaic-secondary);
+$dynamic-list-row-border: 1px solid var(--mosaic-neutral-2);
+$dynamic-list-entry-row-bg-color: var(--mosaic-neutral-3);
 $dynamic-list-input-height: 50px;
 
 /* Actions */
 $actions-color: #ffffff;
-$actions-background-color: var(--ax-neutral-light);
-$actions-confirmation-color: var(--ax-warning);
-$actions-navigation-bg-color: var(--ax-primary-light);
-$actions-context-bg-color: var(--ax-primary);
+$actions-background-color: var(--mosaic-neutral-2);
+$actions-confirmation-color: var(--mosaic-warning);
+$actions-navigation-bg-color: var(--mosaic-primary);
+$actions-context-bg-color: var(--mosaic-secondary);
 $actions-navigation-hover-color: color-mix(
   in srgb,
-  var(--ax-primary-light) 75%,
+  var(--mosaic-primary) 75%,
   transparent
 );
 $actions-context-hover-color: color-mix(
   in srgb,
-  var(--ax-primary) 75%,
+  var(--mosaic-secondary) 75%,
   transparent
 );
-$actions-disabled-bg-color: var(--ax-neutral);
+$actions-disabled-bg-color: var(--mosaic-neutral);
 $actions-disabled-fg-color: color-mix(in srgb, white 50%, transparent);
 $actions-border-color: white;
 
 /* Background */
 $background: #ccc;
-$fallback-image-bg-color: #efefef;
+$fallback-image-bg-color: var(--mosaic-neutral-3, #efefef);
 
 /* Modal */
 $modal-back-drop-color: rgba(169, 169, 169, 0.75);
@@ -292,93 +292,218 @@ $modal-back-drop-color-hidden: rgba(169, 169, 169, 0);
 $modal-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 
 /* ProgressBar */
-$progress-bar-processing-indicator: var(--ax-primary);
-$progress-bar-completed-indicator: var(--ax-success);
-$progress-bar-warning-indicator: var(--ax-warning);
-$progress-bar-error-indicator: var(--ax-error);
-$progress-bar-background: var(--ax-neutral);
+$progress-bar-processing-indicator: var(--mosaic-secondary);
+$progress-bar-completed-indicator: var(--mosaic-success);
+$progress-bar-warning-indicator: var(--mosaic-warning);
+$progress-bar-error-indicator: var(--mosaic-error);
+$progress-bar-background: var(--mosaic-neutral);
 $progress-bar-text-color: white;
 $progress-bar-text-font-size: 16px;
 
 /* MessageBar */
-$message-bar-text-color: var(--ax-neutral-dark);
-$message-bar-toggle-color: var(--ax-primary);
+$message-bar-text-color: var(--mosaic-neutral-1);
+$message-bar-toggle-color: var(--mosaic-secondary);
 $message-bar-toggle-open-color: white;
 $message-bar-bg-color: white;
 $message-bar-error-message-bg-color: color-mix(
   in srgb,
-  var(--ax-error) 20%,
+  var(--mosaic-error) 20%,
   transparent
 );
-$message-bar-info-message-bg-color: var(--ax-neutral-lighter);
+$message-bar-info-message-bg-color: var(--mosaic-neutral-3);
 $message-bar-success-message-bg-color: color-mix(
   in srgb,
-  var(--ax-success) 20%,
+  var(--mosaic-success) 20%,
   transparent
 );
 $message-bar-warning-message-bg-color: color-mix(
   in srgb,
-  var(--ax-warning) 20%,
+  var(--mosaic-warning) 20%,
   transparent
 );
-$message-bar-error-icon-bg-color: var(--ax-error);
-$message-bar-info-icon-bg-color: var(--ax-neutral-dark);
-$message-bar-success-icon-bg-color: var(--ax-success);
-$message-bar-warning-icon-bg-color: var(--ax-warning);
+$message-bar-error-icon-bg-color: var(--mosaic-error);
+$message-bar-info-icon-bg-color: var(--mosaic-neutral-1);
+$message-bar-success-icon-bg-color: var(--mosaic-success);
+$message-bar-warning-icon-bg-color: var(--mosaic-warning);
 
 /* Confirmation */
 $confirmation-transition: 100ms;
 
 /* Info Tooltip */
-$infotooltip-icon-color: var(--ax-neutral);
-$infotooltip-background-color: var(--ax-neutral-light);
-$infotooltip-text-color: var(--ax-neutral-dark);
+$infotooltip-icon-color: var(--mosaic-neutral);
+$infotooltip-background-color: var(--mosaic-neutral-2);
+$infotooltip-text-color: var(--mosaic-neutral-1);
 $infotooltip-font-size: 16px;
 
 /* Video Player */
-$video-player-controls-background: var(--ax-neutral-lighter);
-$video-player-controls-text-color: var(--ax-neutral-dark);
+$video-player-controls-background: var(--mosaic-neutral-3);
+$video-player-controls-text-color: var(--mosaic-neutral-1);
 
 /* Buttons */
-$navigation-button-background-color: var(--ax-primary-light);
+$navigation-button-background-color: var(--mosaic-primary);
 $navigation-button-background-color-hover: color-mix(
   in srgb,
-  var(--ax-primary-light) 90%,
+  var(--mosaic-primary) 90%,
   transparent
 );
 $navigation-button-stroke-color: white;
 $navigation-button-background-active-color: white;
-$navigation-button-stroke-active-color: var(--ax-primary-light);
-$navigation-button-background-disabled-color: var(--ax-neutral);
-$active-button-background-color: var(--ax-primary);
+$navigation-button-stroke-active-color: var(--mosaic-primary);
+$navigation-button-background-disabled-color: var(--mosaic-neutral);
+$active-button-background-color: var(--mosaic-secondary);
 $active-button-hover-background-color: color-mix(
   in srgb,
-  var(--ax-primary) 90%,
+  var(--mosaic-secondary) 90%,
   transparent
 );
 $active-button-stroke-background-color: white;
 $active-button-active-background-color: white;
-$active-button-active-stroke-color: var(--ax-primary);
-$context-button-border-color: var(--ax-primary);
-$context-button-stroke-color: var(--ax-primary);
-$context-button-hover-border-color: var(--ax-primary);
-$context-button-active-color: var(--ax-primary);
-$icon-button-stroke-color: var(--ax-primary);
-$icon-button-hover-color: var(--ax-primary);
+$active-button-active-stroke-color: var(--mosaic-secondary);
+$context-button-border-color: var(--mosaic-secondary);
+$context-button-stroke-color: var(--mosaic-secondary);
+$context-button-hover-border-color: var(--mosaic-secondary);
+$context-button-active-color: var(--mosaic-secondary);
+$icon-button-stroke-color: var(--mosaic-secondary);
+$icon-button-hover-color: var(--mosaic-secondary);
 
 /* Autocomplete */
-$popper-border-color: var(--ax-primary);
-$popper-trigger-button-color: var(--ax-primary);
+$popper-border-color: var(--mosaic-secondary);
+$popper-trigger-button-color: var(--mosaic-secondary);
 $popper-item-font-size: 14px;
-$popper-text-color: var(--ax-neutral-dark);
-$popper-background-selected-color: var(--ax-neutral-lighter);
+$popper-text-color: var(--mosaic-neutral-1);
+$popper-background-selected-color: var(--mosaic-neutral-3);
 $popper-item-hover-color: color-mix(
   in srgb,
-  var(--ax-primary) 10%,
+  var(--mosaic-secondary) 10%,
   transparent
 );
 $popper-item-selected-color: color-mix(
   in srgb,
-  var(--ax-primary) 20%,
+  var(--mosaic-secondary) 20%,
   transparent
 );
+
+/* Accordion additional vars */
+$accordion-header-border-color: color-mix(
+  in srgb,
+  var(--mosaic-neutral) 85%,
+  white
+);
+$accordion-item-row-background-color: var(--mosaic-neutral-2);
+$accordion-item-row-expanded-background-color: var(--mosaic-neutral-3);
+
+/* Button additional vars */
+$button-context-disabled-border-color: var(--mosaic-neutral);
+$button-context-disabled-stroke-color: var(--mosaic-neutral);
+$button-icon-active-stroke-color: var(--mosaic-secondary);
+$button-icon-disabled-stroke-color: var(--mosaic-neutral);
+$button-active-disabled-background-color: var(--mosaic-neutral);
+$composite-button-context-disabled-border-color: var(--mosaic-neutral);
+$composite-button-context-disabled-color: var(--mosaic-neutral);
+$composite-button-active-color: var(--mosaic-secondary);
+$composite-button-active-disabled-background-color: var(--mosaic-neutral);
+$text-button-context-disabled-border-color: var(--mosaic-neutral);
+$text-button-context-disabled-color: var(--mosaic-neutral);
+$text-button-active-color: var(--mosaic-secondary);
+$text-button-active-disabled-background-color: var(--mosaic-neutral);
+
+/* DatePicker additional vars */
+$datepicker-navigation-button-disabled-bg: var(--mosaic-neutral-3);
+$datepicker-neighbor-month-color: var(--mosaic-neutral);
+$datepicker-tile-disabled-bg: var(--mosaic-neutral-3);
+$datepicker-tile-hover-bg: var(--mosaic-neutral-2);
+$datepicker-tile-has-active-bg: var(--mosaic-primary);
+$datepicker-tile-has-active-hover-bg: color-mix(
+  in srgb,
+  var(--mosaic-primary),
+  white 30%
+);
+$datepicker-tile-active-bg: var(--mosaic-accent);
+$datepicker-tile-active-hover-bg: var(--mosaic-secondary);
+$datepicker-tile-text-color: var(--mosaic-neutral-1);
+$datepicker-select-range-hover-bg: var(--mosaic-neutral-2);
+$datepicker-neighbor-month-light-color: var(--mosaic-neutral-2);
+
+/* TimePicker additional vars */
+$timepicker-inactive-title-color: var(--mosaic-neutral);
+$timepicker-item-color: var(--mosaic-neutral-1);
+$timepicker-item-active-bg: color-mix(
+  in srgb,
+  var(--mosaic-secondary) 15%,
+  transparent
+);
+$timepicker-item-selected-bg: var(--mosaic-secondary);
+$timepicker-item-selected-border: var(--mosaic-secondary);
+$timepicker-item-hover-bg: color-mix(
+  in srgb,
+  var(--mosaic-secondary) 15%,
+  transparent
+);
+$timepicker-button-stroke-color: var(--mosaic-secondary);
+$timepicker-title-color: var(--mosaic-neutral-1);
+
+/* Checkbox additional vars */
+$checkbox-warning-border-color: var(--mosaic-warning);
+$checkbox-warning-hover-border-color: var(--mosaic-warning);
+$checkbox-warning-checked-bg-color: var(--mosaic-warning);
+
+/* CustomTags additional vars */
+$custom-tags-disabled-button-stroke-color: color-mix(
+  in srgb,
+  var(--mosaic-neutral) 50%,
+  transparent
+);
+
+/* FileUploadControl additional vars */
+$file-upload-button-bg-color: var(--mosaic-secondary);
+$file-upload-button-hover-bg-color: color-mix(
+  in srgb,
+  var(--mosaic-secondary) 75%,
+  transparent
+);
+$file-upload-button-disabled-bg-color: var(--mosaic-neutral);
+
+/* Radio additional vars */
+$radio-label-color: var(--mosaic-neutral-1);
+$radio-disabled-outline-color: var(--mosaic-neutral-3);
+$radio-disabled-dot-color: var(--mosaic-neutral-2);
+$radio-outline-stroke-color: var(--mosaic-neutral);
+$radio-warning-stroke-color: var(--mosaic-warning);
+
+/* ToggleButton additional vars */
+$toggle-button-warning-border-color: var(--mosaic-warning);
+$toggle-button-warning-hover-shadow-color: var(--mosaic-warning);
+$toggle-button-warning-text-color: var(--mosaic-warning);
+$toggle-button-warning-bg-color: var(--mosaic-warning);
+
+/* List additional vars */
+$list-no-data-text-color: var(--mosaic-neutral-1);
+$list-no-data-bg-color: var(--mosaic-neutral-2);
+$list-error-text-color: var(--mosaic-error);
+$list-error-bg-color: color-mix(in srgb, var(--mosaic-error) 15%, transparent);
+
+/* ListHeader additional vars */
+$list-header-border-color: var(--mosaic-neutral-2);
+$list-header-resize-handle-border-color: var(--mosaic-neutral-2);
+
+/* ListRow additional vars */
+$list-row-disabled-text-color: var(--mosaic-neutral);
+
+/* DynamicDataList additional vars */
+$dynamic-list-header-border-color: var(--mosaic-neutral-2);
+$dynamic-list-header-resize-border-color: var(--mosaic-neutral-2);
+$dynamic-list-row-disabled-drag-icon-color: var(--mosaic-neutral-2);
+
+/* ConfirmDialog additional vars */
+$confirm-dialog-body-text-color: var(--mosaic-neutral-1);
+
+/* PageHeader additional vars */
+$page-header-subtitle-color: var(--mosaic-neutral);
+
+/* Tab additional vars */
+$tab-text-color: var(--mosaic-secondary);
+$tab-selected-text-color: var(--mosaic-accent);
+$tab-hover-bg-color: var(--mosaic-secondary);
+$tab-disabled-text-color: var(--mosaic-neutral);
+$tab-list-bg-color: var(--mosaic-neutral-3);
+$tab-list-border-color: var(--mosaic-neutral-3);