@axinom/mosaic-ui 0.66.0-rc.9 → 0.67.0-rc.0

package/src/styles/variables.scss

@@ -11,155 +11,164 @@ $L-min-size: Between 1440px;
 $L-max-size: Between 1919px;
 $XL-min-size: 1920px;
 
-/* Default colors */
-$dark-blue: #00467d;
-$blue: #1478af;
-$light-blue: #28aae1;
-$red: #f06c55;
-$dark-gray: #707070;
-$gray: #b7b7b7;
-$light-gray: #dddddd;
-$light-gray-2: #eeeeee;
-$yellow: #ffc81a;
-$green: #95c852;
-
 /* Scrollbar vars */
 $scrollbar-size: 7px;
-$scrollbar-track-color: $light-gray-2;
-$scrollbar-thumb-color: $light-gray;
-$scrollbar-thumb-hover-color: $gray;
-$scrollbar-corner-color: $light-gray-2;
+$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);
 
 /* Navigation vars */
 $header-height: 70px; // Important: if this value is changed, breadcrumb arrow styling need to be adjusted as well.
-$header-border-bottom: $dark-blue;
+$header-border-bottom: var(--ax-primary-dark);
 
 /* Accordion vars */
 $accordion-header-background-color: white;
-$accordion-header-text-color: $dark-blue;
+$accordion-header-text-color: var(--ax-primary-dark);
 $accordion-item-background-color: white;
-$accordion-item-text-color: $dark-gray;
-$accordion-item-hover-color: rgba($blue, 0.15);
-$accordion-item-border: 1px solid $light-gray;
-$accordion-item-arrow-color: $blue;
-$accordion-item-arrow-disabled-color: $gray;
+$accordion-item-text-color: var(--ax-neutral-dark);
+$accordion-item-hover-color: color-mix(
+  in srgb,
+  var(--ax-primary) 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);
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;
 $explorer-header-background-color: white;
-$explorer-row-hover-background-color: rgba($blue, 0.1);
-$explorer-action-button-color: $light-blue;
-$explorer-action-button-color-hover: rgba($light-blue, 0.75);
-$explorer-row-thumbnail-bg-color: $light-gray-2;
-$explorer-external-link-color: $light-blue;
+$explorer-row-hover-background-color: color-mix(
+  in srgb,
+  var(--ax-primary) 10%,
+  transparent
+);
+$explorer-action-button-color: var(--ax-primary-light);
+$explorer-action-button-color-hover: color-mix(
+  in srgb,
+  var(--ax-primary-light) 75%,
+  transparent
+);
+$explorer-row-thumbnail-bg-color: var(--ax-neutral-lighter);
+$explorer-external-link-color: var(--ax-primary-light);
 $explorer-sort-color: white;
-$explorer-sort-stroke-color: $gray;
-$explorer-selected-sort-color: $blue;
-$explorer-column-label-color: $dark-blue;
-$explorer-list-row-border: 1px solid $light-gray;
+$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);
 
 /* List vars */
 
 $list-paddings: 0px 5px 0px 5px;
-$list-tag-background-color: $light-gray-2;
-$list-tag-overflow-background-color: $dark-gray;
+$list-tag-background-color: var(--ax-neutral-lighter);
+$list-tag-overflow-background-color: var(--ax-neutral-dark);
 
 /* Filter vars */
 $filter-background-color: white;
-$filter-background-selected-color: rgba($blue, 0.15);
-$filter-light-font-color: $dark-gray;
-$filter-option-background-color: #d7e9f1;
-$filter-context-button-color: $blue;
-$filter-title-color: $blue;
-$filter-font-size: 16px;
-$filter-width: 360px;
-$filter-controller-background-color: $light-gray-2;
-$filter-border-color: $blue;
-$multi-option-checbox-border: $blue;
-$multi-option-label-color: $dark-gray;
+$filter-background-selected-color: color-mix(
+  in srgb,
+  var(--ax-primary) 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-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);
 
 /* Details vars */
 $details-background-color: #ffffff;
 
 /* Hub vars */
-$hub-title-color: $dark-blue;
-$hub-tile-border-color: $light-blue;
-$hub-tile-color: $light-blue;
-$hub-tile-stroke-color: $dark-blue;
-$hub-tile-border-hover: $light-blue;
+$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);
 
 /* InfoPanel vars */
-$infopanel-background-color: $light-gray-2;
+$infopanel-background-color: var(--ax-neutral-lighter);
 $infopanel-border-color: #ffffff;
-$infopanel-title-color: $dark-blue;
+$infopanel-title-color: var(--ax-primary-dark);
 $infopanel-title-font-weight: bold;
-$infopanel-subtitle-color: $dark-gray;
-$infopanel-paragraph-color: $dark-gray;
+$infopanel-subtitle-color: var(--ax-neutral-dark);
+$infopanel-paragraph-color: var(--ax-neutral-dark);
 
 /* LandingPage vars */
-$landingpage-title-color: $dark-blue;
+$landingpage-title-color: var(--ax-primary-dark);
 $landingpage-subtitle-color: #8c8b87;
-$landingpage-largetile-background-color: $light-blue;
+$landingpage-largetile-background-color: var(--ax-primary-light);
 $landingpage-largetile-disabled-background-color: #8c8b87;
 $landingpage-largetile-color: #fff;
-$landingpage-largetile-stroke-color: $dark-blue;
-$landingpage-largetile-hover-background-color: adjust-color(
-  $light-blue,
-  $lightness: 10%
+$landingpage-largetile-stroke-color: var(--ax-primary-dark);
+$landingpage-largetile-hover-background-color: color-mix(
+  in oklch,
+  var(--ax-primary-light),
+  white 10%
 );
 $landingpage-smalltile-background-color: #ffffff;
-$landingpage-smalltile-border-color: $light-blue;
+$landingpage-smalltile-border-color: var(--ax-primary-light);
 $landingpage-smalltile-disabled-background-color: #8c8b87;
-$landingpage-smalltile-color: $light-blue;
-$landingpage-smalltile-stroke-color: $dark-blue;
+$landingpage-smalltile-color: var(--ax-primary-light);
+$landingpage-smalltile-stroke-color: var(--ax-primary-dark);
 
 /* PageHeader */
 $page-header-color: #ffffff;
-$page-header-background-color: $dark-blue;
+$page-header-background-color: var(--ax-primary-dark);
 $page-header-height: 100px;
 
 /* PageHeaderAction */
 $page-header-action-color: #ffffff;
-$page-header-action-background-color: $light-blue;
-$page-header-action-tag-background-color: $light-gray;
+$page-header-action-background-color: var(--ax-primary-light);
+$page-header-action-tag-background-color: var(--ax-neutral-light);
 $page-header-action-tag-font-size: 10px;
 
-$page-header-action-confirmation-background-color: $yellow;
+$page-header-action-confirmation-background-color: var(--ax-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: $blue;
+$page-header-action-context-background-color: var(--ax-primary);
 
-$page-header-action-hover-background-color: mix(
-  white,
-  $page-header-action-background-color,
-  25%
+$page-header-action-hover-background-color: color-mix(
+  in srgb,
+  $page-header-action-background-color 75%,
+  white
 );
-$page-header-action-disabled-color: mix(
-  white,
-  $page-header-action-background-color,
-  50%
+$page-header-action-disabled-color: color-mix(
+  in srgb,
+  $page-header-action-background-color 50%,
+  white
 );
 
-$page-header-action-context-hover-background-color: mix(
-  white,
-  $page-header-action-context-background-color,
-  25%
+$page-header-action-context-hover-background-color: color-mix(
+  in srgb,
+  $page-header-action-context-background-color 75%,
+  white
 );
-$page-header-action-context-disabled-color: mix(
-  white,
-  $page-header-action-context-background-color,
-  50%
+$page-header-action-context-disabled-color: color-mix(
+  in srgb,
+  $page-header-action-context-background-color 50%,
+  white
 );
 
-$page-header-action-active-hover-background-color: mix(
-  white,
-  $page-header-action-active-background-color,
-  25%
+$page-header-action-active-hover-background-color: color-mix(
+  in srgb,
+  $page-header-action-active-background-color 75%,
+  white
 );
-$page-header-action-disabled-fg-color: rgba(white, 0.5);
-$page-header-action-disabled-bg-color: $gray;
+$page-header-action-disabled-fg-color: color-mix(
+  in srgb,
+  white 50%,
+  transparent
+);
+$page-header-action-disabled-bg-color: var(--ax-neutral);
 
 /* PageHeaderBulkActions */
 $page-header-actions-background-color: $page-header-background-color;
@@ -167,90 +176,110 @@ $page-header-actions-background-color: $page-header-background-color;
 /* Form vars */
 $width-big: 650px;
 $width-small: 320px;
-$input-color: $dark-gray;
-$input-placeholder-color: $gray;
-$input-hover-color: $blue;
-$input-label-color: $dark-blue;
-$input-border-color: $light-gray;
+$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-max-width: $width-big;
 $label-size: 150px;
-$divider-color: $gray;
-$form-group-title-color: $gray;
+$divider-color: var(--ax-neutral);
+$form-group-title-color: var(--ax-neutral);
 $form-group-title-font-size: 18px;
 $label-gap: 30px;
-$input-disabled-font-color: $gray;
-$input-disabled-border-color: $light-gray;
-$input-disabled-background-color: $light-gray-2;
-$input-invalid-color: $red;
-$input-invalid-border-color: $red;
-$input-invalid-hover-color: $red;
-$tag-border-color-1: $light-gray;
-$tag-border-color-2: $blue;
-$tag-icon-color: $blue;
-$tag-font-color: $dark-gray;
-$tag-background-color: $light-gray-2;
-$tag-enter-color: rgba($blue, 0.25);
-$tag-plus-button-bg-color: $blue;
-$tag-plus-button-hover-stroke-color: $blue;
-$form-error-color: $red;
-$select-arrow-color: $blue;
-$select-disabled-arrow-color: $gray;
+$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);
 $label-font-size: 16px;
-$file-upload-progress: $blue;
-$file-upload-progress-background: $light-gray-2;
-$file-upload-input: $light-gray;
+$file-upload-progress: var(--ax-primary);
+$file-upload-progress-background: var(--ax-neutral-lighter);
+$file-upload-input: var(--ax-neutral-light);
 $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: $light-gray-2;
+$read-only-text-background-color: var(--ax-neutral-lighter);
 $select-background-color: white;
-$form-indicator-color: $green;
-$radio-hover-stroke-color: $blue;
-$radio-checked-fill-color: $blue;
-$toggle-button-stroke-color: $blue;
-$toggle-button-off-text-color: $blue;
-$toggle-button-on-bg-color: $blue;
-$live-suggest-border-color: $blue;
-$live-suggest-background-selected-color: rgba($blue, 0.15);
-$live-suggest-text-color: $blue;
+$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);
+$live-suggest-background-selected-color: color-mix(
+  in srgb,
+  var(--ax-primary) 15%,
+  transparent
+);
+$live-suggest-text-color: var(--ax-primary);
 
 /* Inline Menu */
-$inline-menu-button-stroke-color: $blue;
-$inline-menu-button-hover-bg-color: $blue;
-$inline-menu-button-selected-bg-color: $blue;
+$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);
 
 /* Date Time Picker*/
-$calendar-tile-active: $blue;
-$calendar-tile-active-hover: rgba($blue, 0.2);
-$calendar-button-stroke-color: $blue;
-$calendar-title-color: $dark-blue;
-$calendar-container-border-color: $blue;
-$calendar-container-bg-color: $blue;
+$calendar-tile-active: var(--ax-primary);
+$calendar-tile-active-hover: color-mix(
+  in srgb,
+  var(--ax-primary) 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);
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;
-$dynamic-list-row-hover-bg-color: rgba($blue, 0.1);
+$dynamic-list-row-hover-bg-color: color-mix(
+  in srgb,
+  var(--ax-primary) 10%,
+  transparent
+);
 $dynamic-list-row-height: 50px;
 $dynamic-list-column-gap: 20px;
 $dynamic-list-row-gap: 0px;
-$dynamic-list-position-color: $blue;
-$dynamic-list-row-border: 1px solid $light-gray;
-$dynamic-list-entry-row-bg-color: $light-gray-2;
+$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-input-height: 50px;
 
 /* Actions */
 $actions-color: #ffffff;
-$actions-background-color: $light-gray;
-$actions-confirmation-color: $yellow;
-$actions-navigation-bg-color: $light-blue;
-$actions-context-bg-color: $blue;
-$actions-navigation-hover-color: rgba($light-blue, 0.75);
-$actions-context-hover-color: rgba($blue, 0.75);
-$actions-disabled-bg-color: $gray;
-$actions-disabled-fg-color: rgba(white, 0.5);
+$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-navigation-hover-color: color-mix(
+  in srgb,
+  var(--ax-primary-light) 75%,
+  transparent
+);
+$actions-context-hover-color: color-mix(
+  in srgb,
+  var(--ax-primary) 75%,
+  transparent
+);
+$actions-disabled-bg-color: var(--ax-neutral);
+$actions-disabled-fg-color: color-mix(in srgb, white 50%, transparent);
 $actions-border-color: white;
 
 /* Background */
@@ -263,64 +292,93 @@ $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: $blue;
-$progress-bar-completed-indicator: $green;
-$progress-bar-warning-indicator: $yellow;
-$progress-bar-error-indicator: $red;
-$progress-bar-background: $gray;
+$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-text-color: white;
 $progress-bar-text-font-size: 16px;
 
 /* MessageBar */
-$message-bar-text-color: $dark-gray;
-$message-bar-toggle-color: $blue;
+$message-bar-text-color: var(--ax-neutral-dark);
+$message-bar-toggle-color: var(--ax-primary);
 $message-bar-toggle-open-color: white;
 $message-bar-bg-color: white;
-$message-bar-error-message-bg-color: rgba($red, 0.2);
-$message-bar-info-message-bg-color: $light-gray-2;
-$message-bar-success-message-bg-color: rgba($green, 0.2);
-$message-bar-warning-message-bg-color: rgba($yellow, 0.2);
-$message-bar-error-icon-bg-color: $red;
-$message-bar-info-icon-bg-color: $dark-gray;
-$message-bar-success-icon-bg-color: $green;
-$message-bar-warning-icon-bg-color: $yellow;
+$message-bar-error-message-bg-color: color-mix(
+  in srgb,
+  var(--ax-error) 20%,
+  transparent
+);
+$message-bar-info-message-bg-color: var(--ax-neutral-lighter);
+$message-bar-success-message-bg-color: color-mix(
+  in srgb,
+  var(--ax-success) 20%,
+  transparent
+);
+$message-bar-warning-message-bg-color: color-mix(
+  in srgb,
+  var(--ax-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);
 
 /* Confirmation */
 $confirmation-transition: 100ms;
 
 /* Info Tooltip */
-$infotooltip-icon-color: $gray;
-$infotooltip-background-color: $light-gray;
-$infotooltip-text-color: $dark-gray;
+$infotooltip-icon-color: var(--ax-neutral);
+$infotooltip-background-color: var(--ax-neutral-light);
+$infotooltip-text-color: var(--ax-neutral-dark);
 $infotooltip-font-size: 16px;
 
 /* Video Player */
-$video-player-controls-background: $light-gray-2;
-$video-player-controls-text-color: $dark-gray;
+$video-player-controls-background: var(--ax-neutral-lighter);
+$video-player-controls-text-color: var(--ax-neutral-dark);
 
 /* Buttons */
-$navigation-button-background-color: $light-blue;
-$navigation-button-background-color-hover: rgba($light-blue, 0.9);
+$navigation-button-background-color: var(--ax-primary-light);
+$navigation-button-background-color-hover: color-mix(
+  in srgb,
+  var(--ax-primary-light) 90%,
+  transparent
+);
 $navigation-button-stroke-color: white;
 $navigation-button-background-active-color: white;
-$navigation-button-stroke-active-color: $light-blue;
-$navigation-button-background-disabled-color: $gray;
-$active-button-background-color: $blue;
-$active-button-hover-background-color: rgba($blue, 0.9);
+$navigation-button-stroke-active-color: var(--ax-primary-light);
+$navigation-button-background-disabled-color: var(--ax-neutral);
+$active-button-background-color: var(--ax-primary);
+$active-button-hover-background-color: color-mix(
+  in srgb,
+  var(--ax-primary) 90%,
+  transparent
+);
 $active-button-stroke-background-color: white;
 $active-button-active-background-color: white;
-$active-button-active-stroke-color: $blue;
-$context-button-border-color: $blue;
-$context-button-stroke-color: $blue;
-$context-button-hover-border-color: $blue;
-$context-button-active-color: $blue;
-$icon-button-stroke-color: $blue;
-$icon-button-hover-color: $blue;
+$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);
 
 /* Autocomplete */
-$popper-border-color: $blue;
-$popper-trigger-button-color: $blue;
-$popper-background-color: $light-gray-2;
-$popper-item-font-size: 16px;
-$popper-text-color: $blue;
-$popper-background-selected-color: rgba($blue, 0.15);
+$popper-border-color: var(--ax-primary);
+$popper-trigger-button-color: var(--ax-primary);
+$popper-item-font-size: 14px;
+$popper-text-color: var(--ax-neutral-dark);
+$popper-background-selected-color: var(--ax-neutral-lighter);
+$popper-item-hover-color: color-mix(
+  in srgb,
+  var(--ax-primary) 10%,
+  transparent
+);
+$popper-item-selected-color: color-mix(
+  in srgb,
+  var(--ax-primary) 20%,
+  transparent
+);