@design-factory/design-factory 18.0.3 → 18.0.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "18.0.3",
+  "version": "18.0.5",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/styles/scss/_common.variables.scss

@@ -47,8 +47,9 @@ $df-disabled-bg-color: var(--#{$prefix}gray-100) !default;
 $df-disabled-color: var(--#{$prefix}gray-300) !default;
 $df-disabled-opacity: 1 !default;
 $df-disabled-cursor: not-allowed !default;
-$df-hover-bg-color: var(
-  --#{$prefix}primary-100
+$df-hover-bg-color: shades-css-var(
+  'white',
+  'bg-hover-color'
 ) !default; // hover on light (white) bg not button. Migrate to white color shade ?
 $df-focus-outline: none !default;
 

package/styles/scss/agnosui/_variables.scss

@@ -4,12 +4,12 @@
   $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')} !default,
   $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')} !default,
   $au-slider-handle-focus-box-shadow: (
-    0 0 0 2px var (--#{$prefix}body-bg),
+    0 0 0 2px var(--#{$prefix}body-bg),
     0 0 0 4px var(--#{$prefix}primary)
   )
   !default,
   $au-slider-handle-focus-hover-box-shadow: (
-    0 0 0 2px var (--#{$prefix}body-bg),
+    0 0 0 2px var(--#{$prefix}body-bg),
     0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
   )
   !default,

package/styles/scss/components/brand-color/_brand-color.mixins.scss

@@ -32,7 +32,10 @@
     $values: map.get($utility, values);
     @each $color, $value in $values {
       .bg-#{$color} {
-        --#{$prefix}body-bg: #{$value};
+        .btn,
+        .nav-tabs {
+          --#{$prefix}inner-box-shadow-color: #{$value};
+        }
       }
     }
   }

package/styles/scss/components/dropdown/_dropdown.scss

@@ -112,7 +112,7 @@ body,
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-subtle-active-color', true)};
     }
-    box-shadow: $df-focused-inset-box-shadow;
+    box-shadow: $df-dropdown-item-focus-box-shadow;
     border: $df-dropdown-item-focused-border;
     outline: var(--#{$prefix}focus-outline);
     border-radius: var(--#{$prefix}dropdown-item-focus-border-radius);

package/styles/scss/components/dropdown/_dropdown.variables.scss

@@ -20,3 +20,4 @@ $df-dropdown-toggle-border-color-primary: color.adjust(
 $df-dropdown-disabled-pointer: var(--#{$prefix}disabled-cursor) !default;
 $df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;
 $df-dropdown-item-focused-border: $df-focused-border !default;
+$df-dropdown-item-focus-box-shadow: $df-focused-box-shadow !default;

package/styles/scss/components/slider/_slider.scss

@@ -192,7 +192,7 @@
 
     &:focus-visible,
     &.ngx-slider-active {
-      --#{$prefix}box-shadow-color: #{$df-slider-pointer-color};
+      --#{$prefix}box-shadow-color: #{$df-slider-pointer-box-shadow};
       outline: none;
       box-shadow: $btn-focus-box-shadow;
     }

package/styles/scss/components/slider/_slider.variables.scss

@@ -13,9 +13,10 @@ $df-slider-bar-rightout-selection-color: $green !default; // $barRightOutSelecti
 
 // Pointer
 $df-slider-pointer-color: shades-css-var('primary', 'bg-color') !default; // $handleBgColor
+$df-slider-pointer-box-shadow: rgba(var($df-slider-pointer-color), 0.25) !default; // $handleBgColor
 $df-slider-pointer-size: 1.25rem !default; // $handleSize
 $df-slider-pointer-disabled-color: var(--#{$prefix}disabled-color) !default; // $handleDisabledColor
-$df-slider-pointer-hover-color: shades-css-var('primary', 'bg-color') !default; // $handleHoverColor
+$df-slider-pointer-hover-color: rgba(var($df-slider-pointer-color), 0.25) !default; // $handleHoverColor
 $df-slider-pointer-active-color: shades-css-var('primary', 'bg-color') !default; // $handleActiveColor
 
 // Labels

package/styles/scss/components/table/_advancedtables.scss

@@ -119,7 +119,7 @@
     }
   }
 
-  [class*='fa-'] {
+  .df-table-expand-icon {
     color: var(--#{$prefix}tables-aggdrid-expand-button-color);
   }
 

package/styles/scss/themes/brand2023/_variables.scss

@@ -654,6 +654,7 @@ $input-focus-border-color: var(--#{$prefix}gray-600) !default;
 $input-border-color: var(--#{$prefix}gray-600) !default;
 
 $df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
+$df-hover-bg-color: var(--#{$prefix}primary-100) !default;
 
 $df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
 
@@ -690,6 +691,7 @@ $dropdown-link-hover-bg: var(--#{$prefix}primary-100) !default;
 $dropdown-link-hover-color: var(--#{$prefix}primary-100-color) !default;
 $df-typeahead-active-color: var(--#{$prefix}primary-800) !default;
 $df-typeahead-active-bg-color: var(--#{$prefix}primary-200) !default;
+$df-dropdown-item-focus-box-shadow: $df-focused-inset-box-shadow !default;
 
 // Breadcrumb
 $breadcrumb-active-color: var(--#{$prefix}secondary-900) !default;
@@ -927,6 +929,7 @@ $df-sidenav-withactivated-item-border-start: unset !default;
 // Slider
 $df-slider-pointer-hover-border-color: var(--#{$prefix}border-width) solid var(--#{$prefix}primary-800) !default;
 $df-slider-pointer-hover-color: var(--#{$prefix}primary-700) !default;
+$df-slider-pointer-box-shadow: var(--#{$prefix}primary-500) !default; // primary bg-color mapping
 
 // Scrollspy
 $df-scrollspy-active-border-left: unset !default;