@design-factory/design-factory 18.0.2 → 18.0.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "18.0.2",
+  "version": "18.0.4",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -53,6 +53,8 @@
       "esm": "./esm2022/design-factory.mjs",
       "default": "./fesm2022/design-factory.mjs"
     },
+    "./design-factory.scss": "./design-factory.scss",
+    "./design-factory.css": "./design-factory.css",
     "./themes/initial-branding": {
       "sass": "./design-factory-initial-branding.scss",
       "style": "./design-factory-initial-branding.css"

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

@@ -1,18 +1,20 @@
-@use '@agnos-ui/core-bootstrap/scss/variables' with (
-  $prefix: 'df-',
-  $au-slider-color-background: var(--#{$prefix}gray-300),
-  $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')},
-  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')},
+@forward '@agnos-ui/core-bootstrap/scss/variables' with (
+  $prefix: 'df-' !default,
+  $au-slider-color-background: var(--#{$prefix}gray-300) !default,
+  $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 4px var(--#{$prefix}primary)
-  ),
+  )
+  !default,
   $au-slider-handle-focus-hover-box-shadow: (
     0 0 0 2px var(--#{$prefix}body-bg),
     0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
-  ),
-  $au-slider-label-now-font-weight: 500,
-  $au-slider-label-vertical-min-top: calc(100% - 0.5rem),
-  $au-slider-label-vertical-max-top: 0.25rem,
-  $au-slider-disabled-color: var(--#{$prefix}disabled-color)
+  )
+  !default,
+  $au-slider-label-now-font-weight: 500 !default,
+  $au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default,
+  $au-slider-label-vertical-max-top: 0.25rem !default,
+  $au-slider-disabled-color: var(--#{$prefix}disabled-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/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/df-styles-namespace.scss

@@ -58,6 +58,8 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'common';
   @import 'components/accordion/accordion';
   @import 'components/fonts/icon-font';
+  @import 'components/fonts/font-awesome-icons';
+  @import 'components/fonts/font-awesome-icons-brands';
   @import 'components/fonts/fonts';
   @import 'components/separator/separator';
   @import 'components/button/button';

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;
 
@@ -927,6 +928,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;