@design-factory/design-factory 16.0.2 → 17.0.0

package/styles/scss/components/button/_button.scss

@@ -35,7 +35,7 @@
     }
   }
 
-  &:focus:not(:hover):not(:active) {
+  &:focus-visible:not(:hover):not(:active) {
     color: var(--#{$prefix}btn-focus-only-color);
     background-color: var(--#{$prefix}btn-focus-only-bg);
     border-color: var(--#{$prefix}btn-focus-only-border-color);
@@ -50,6 +50,10 @@
   }
 }
 
+.btn-close {
+  --#{$prefix}box-shadow-width: #{$df-btn-close-focus-shadow-width};
+}
+
 .show > .btn:not(:disabled):not(.disabled).dropdown-toggle {
   &:not(.nav-link) {
     color: var(--#{$prefix}btn-active-color);
@@ -62,7 +66,7 @@
   --#{$prefix}btn-icononly-size-sm: #{df-button-icononly-size($btn-padding-y-sm)};
   --#{$prefix}btn-icononly-size-lg: #{df-button-icononly-size($btn-padding-y-lg)};
   --#{$prefix}btn-icononly-size-xl: #{df-button-icononly-size($btn-padding-y-lg)};
-  
+
   --#{$prefix}btn-border-width: #{$df-btn-icononly-border-width};
   --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius};
   --#{$prefix}btn-padding-x: #{$df-btn-icononly-padding-x};
@@ -91,7 +95,8 @@
 }
 
 .btn-check {
-  &:focus:not(:checked):not(:hover) { // override BS (issue to open)
+  &:focus-visible:not(:checked):not(:hover) {
+    // override BS (issue to open)
     + .btn {
       color: var(--#{$prefix}btn-focus-only-color);
       @include gradient-bg(var(--#{$prefix}btn-focus-only-bg));
@@ -99,32 +104,35 @@
     }
   }
   @if variable-exists(df-btn-group-hover-box-shadow-color) {
-    &:focus:not(:checked):hover { // override BS (issue to open)
+    &:focus-visible:not(:checked):hover {
+      // override BS (issue to open)
       + .btn {
         --#{$prefix}box-shadow-color: #{$df-btn-group-hover-box-shadow-color};
       }
     }
   }
   @if variable-exists(df-btn-group-checked-box-shadow-color) {
-    &:focus:checked { // override BS (issue to open)
+    &:focus-visible:checked {
+      // override BS (issue to open)
       + .btn {
         --#{$prefix}box-shadow-color: #{$df-btn-group-checked-box-shadow-color};
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     + .btn {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        @if $enable-shadows {
-          box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-        } @else {
-          box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-        }
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
     }
   }
 
-  &.disabled, &:disabled {
-    + .btn { 
+  &.disabled,
+  &:disabled {
+    + .btn {
       cursor: var(--#{$prefix}btn-cursor-disabled);
       pointer-events: auto;
       color: var(--#{$prefix}btn-disabled-color);
@@ -136,12 +144,7 @@
 }
 
 .df-btn-xl {
-  @include button-size(
-    $df-btn-padding-y-xl,
-    $df-btn-padding-x-xl,
-    $df-btn-font-size-xl,
-    $df-btn-border-radius-xl
-  );
+  @include button-size($df-btn-padding-y-xl, $df-btn-padding-x-xl, $df-btn-font-size-xl, $df-btn-border-radius-xl);
   min-width: var(--#{$prefix}btn-min-width-xl);
 }
 
@@ -201,7 +204,8 @@
     --#{$prefix}btn-padding-x: #{$df-btn-link-padding-x-sm};
   }
 
-  &:disabled, &.disabled {
+  &:disabled,
+  &.disabled {
     color: var(--#{$prefix}btn-disabled-color);
     text-decoration: var(--#{$prefix}btn-link-text-decoration);
   }
@@ -210,10 +214,11 @@
     &:hover {
       text-decoration: var(--#{$prefix}btn-link-hover-text-decoration);
     }
-    &:active, &.active {
+    &:active,
+    &.active {
       text-decoration: var(--#{$prefix}btn-link-active-text-decoration);
     }
-    &:focus {
+    &:focus-visible {
       text-decoration: var(--#{$prefix}btn-link-focus-text-decoration);
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       &:hover:not(:active) {
@@ -255,16 +260,16 @@
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var($color, 'bg-color')};
     // stylelint-enable custom-property-no-missing-var-function
-    &:focus {
+    &:focus-visible {
       --#{$prefix}inner-box-shadow-color: var(--#{$prefix}btn-color);
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{$df-btn-focus-box-shadow-color};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
-    &:focus:hover:not(:active) {
+    &:focus-visible:hover:not(:active) {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-hover-box-shadow-color};
     }
-    &:focus:active {
+    &:focus-visible:active {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-active-box-shadow-color};
     }
   }
@@ -288,21 +293,23 @@
     --#{$prefix}btn-check-active-hover-bg: #{$bgHoverColor};
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var($color, 'bg-color')};
-      // stylelint-enable custom-property-no-missing-var-function
-    &:focus {
+    // stylelint-enable custom-property-no-missing-var-function
+    &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-box-shadow-color};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
-    &:focus:hover:not(:active):not(.active) {
+    &:focus-visible:hover:not(:active):not(.active) {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
     }
-    &:focus:active, &.active:focus {
+    &:focus-visible:active,
+    &.active:focus-visible {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
     }
   }
 
-  .btn-check { // override default behavior of outline in case of btn-check
+  .btn-check {
+    // override default behavior of outline in case of btn-check
     &:checked {
       + .btn-outline-#{$color} {
         --#{$prefix}btn-active-color: #{shades-css-var($color, $df-btn-check-active-property, true)};

package/styles/scss/components/button/_button.utils.scss

@@ -1,5 +1,5 @@
 @function df-button-icononly-size($padding-y) {
-  @return calc(#{$btn-line-height * 1em} + #{$padding-y * 2} + #{$btn-border-width * 2});
+  @return calc(#{$btn-line-height} * 1em + #{$padding-y} * 2 + #{$btn-border-width} * 2);
 }
 
 @mixin df-reset-buttongroup-radius($radius) {

package/styles/scss/components/button/_button.variables.scss

@@ -28,9 +28,7 @@ $df-btn-link-padding-x-lg: $btn-padding-x !default;
 $df-btn-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
 $df-btn-group-spaced-margin-end: 0.75rem !default; // replace $df-checkbox-radio-margin-end
 $df-btn-group-spaced-margin-bottom: 0.5rem !default; // replace $df-checkbox-radio-margin-bottom
-$df-btn-focus-box-shadow-blur: 0 !default;
-$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5) !default;
-$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
+$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
 $df-btn-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
 $df-btn-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
 $df-btn-outline-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
@@ -38,4 +36,9 @@ $df-btn-outline-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !d
 $df-btn-check-active-property: 'bg-color' !default;
 $df-btn-bg-color: transparent !default;
 $df-btn-focus-only-bg-color: transparent !default;
-$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-close-focus-shadow-width: $focus-ring-width !default;
+
+// TODO - To be removed when CSS var and focus-ring will be fully used
+$df-btn-focus-box-shadow-blur: $focus-ring-blur !default;
+$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap

package/styles/scss/components/fonts/_fonts-family.scss

@@ -45,9 +45,8 @@
 @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-Light.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-Light.woff') format('woff');
     font-style: normal;
     font-weight: 100;
     font-display: swap;
@@ -55,9 +54,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/light/AmadeusNeue-LightItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/light/AmadeusNeueWeb-LightItalic.woff') format('woff');
     font-style: italic;
     font-weight: 100;
     font-display: swap;
@@ -65,9 +63,8 @@
   
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-Bold.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-Bold.woff') format('woff');
     font-style: normal;
     font-weight: 700;
     font-display: swap;
@@ -75,9 +72,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/bold/AmadeusNeue-BoldItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/bold/AmadeusNeueWeb-BoldItalic.woff') format('woff');
     font-style: italic;
     font-weight: 700;
     font-display: swap;
@@ -85,9 +81,8 @@
   
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-Regular.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-Regular.woff') format('woff');
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -95,9 +90,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/regular/AmadeusNeue-RegularItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/regular/AmadeusNeueWeb-RegularItalic.woff') format('woff');
     font-style: italic;
     font-weight: 400;
     font-display: swap;
@@ -105,9 +99,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-Medium.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-Medium.woff') format('woff');
     font-style: normal;
     font-weight: 500;
     font-display: swap;
@@ -115,9 +108,8 @@
 
   @font-face {
     font-family: 'Amadeus';
-    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff2') format('woff2'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.woff') format('woff'),
-      url('#{$font-path}/amadeus-neue/medium/AmadeusNeue-MediumItalic.ttf') format('truetype');
+    src: url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff2') format('woff2'),
+      url('#{$font-path}/amadeus-neue/medium/AmadeusNeueWeb-MediumItalic.woff') format('woff');
     font-style: italic;
     font-weight: 500;
     font-display: swap;

package/styles/scss/components/select/_select.variables.scss

@@ -43,8 +43,8 @@ $df-select-single-input-padding: $df-select-arrow-pos + $input-padding-x !defaul
 $df-select-single-clear-input-padding: $df-select-single-input-padding + $df-select-clear-width !default;
 $df-select-border: $input-border-width solid $input-border-color !default;
 $df-select-border-radius: $form-select-border-radius !default;
-$df-select-border-radius-sm: $df-select-border-radius * map.get($df-size-ratios, 'sm') !default; // or the sm lg version of the border-radius??
-$df-select-border-radius-lg: $df-select-border-radius * map.get($df-size-ratios, 'lg') !default;
+$df-select-border-radius-sm: calc($df-select-border-radius * map.get($df-size-ratios, 'sm')) !default; // or the sm lg version of the border-radius??
+$df-select-border-radius-lg: calc($df-select-border-radius * map.get($df-size-ratios, 'lg')) !default;
 $df-select-value-margin: $form-select-padding-y !default;
 $df-select-value-margin-sm: $input-padding-y-sm !default;
 $df-select-value-margin-lg: $input-padding-y-lg !default;

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

@@ -2,10 +2,10 @@
 
 // TODO check new checkbox look and border radius
 @include ag.grid-styles(
-    (
-      theme: alpine,
-    )
-  );
+  (
+    theme: alpine
+  )
+);
 
 // See issue https://github.com/ag-grid/ag-grid/issues/4095
 .df-table:not(.df-aggrid-filtered) {
@@ -68,6 +68,7 @@
   --ag-checkbox-indeterminate-color: #{shades-css-var('primary', 'bg-color')};
   --#{$prefix}ag-odd-row-hover-background-color: var(--ag-row-hover-color);
   --ag-odd-row-background-color: var(--ag-background-color);
+  --ag-wrapper-border-radius: #{$df-tables-aggrid-wrapper-border-radius};
 
   .ag-row {
     &.ag-row-odd {
@@ -150,12 +151,14 @@
     font-weight: var(--#{$prefix}tables-aggrid-header-font-weight);
   }
 
-  .ag-header-cell:not(.ag-cell-inline-editing), .ag-cell:not(.ag-cell-inline-editing) {
+  .ag-header-cell:not(.ag-cell-inline-editing),
+  .ag-cell:not(.ag-cell-inline-editing) {
     padding-left: var(--#{$prefix}tables-aggrid-cell-padding-left);
     padding-right: var(--#{$prefix}tables-aggrid-cell-padding-left);
   }
 
-  .ag-header-cell.ag-header-cell-sortable, .ag-header-cell.ag-floating-filter {
+  .ag-header-cell.ag-header-cell-sortable,
+  .ag-header-cell.ag-floating-filter {
     padding-right: var(--#{$prefix}tables-aggrid-sortable-header-padding-right);
   }
 
@@ -163,7 +166,8 @@
     justify-content: var(--#{$prefix}tables-aggrid-cell-label-justify-content);
   }
 
-  .ag-header-icon, .ag-sort-indicator-icon {
+  .ag-header-icon,
+  .ag-sort-indicator-icon {
     // todo RTL elements
     margin-right: var(--ag-font-size);
   }
@@ -193,7 +197,8 @@
     box-shadow: $df-tables-aggrid-input-box-shadow;
   }
 
-  .ag-checkbox-input, .ag-cell {
+  .ag-checkbox-input,
+  .ag-cell {
     cursor: $df-cursor-type;
   }
 
@@ -206,7 +211,7 @@
     background-color: $form-check-input-bg;
     &::after {
       @include border-radius($form-check-input-border-radius);
-      content: "";
+      content: '';
       width: $form-check-input-width;
       height: $form-check-input-width;
       vertical-align: top;
@@ -229,7 +234,8 @@
       }
     }
     &.ag-checked {
-      &::after { // copy element from the _form-check.scss
+      &::after {
+        // copy element from the _form-check.scss
         background-color: $form-check-input-checked-bg-color;
         border-color: $form-check-input-checked-border-color;
         @if $enable-gradients {
@@ -245,4 +251,4 @@
 .df-pagination-secondary-elements {
   --#{$prefix}tables-aggrid-pagination-secondary-elements-font-size: #{$df-tables-aggrid-pagination-secondary-elements-font-size};
   font-size: var(--#{$prefix}tables-aggrid-pagination-secondary-elements-font-size);
-}
+}

package/styles/scss/components/table/_table.variables.scss

@@ -17,9 +17,9 @@ $df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-base * map
 $df-tables-aggrid-border-inline: none !default;
 $df-tables-aggrid-border-bottom-last-row: none !default;
 $df-tables-aggrid-striped-row-color: $table-striped-bg !default; // Bootstrap Variable
-$df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default; 
+$df-tables-aggrid-striped-row-color-hover: #e6e6e6 !default;
 $df-tables-aggrid-white-header: #fff !default;
 $df-tables-aggrid-background-color: #fff !default;
 $df-tables-aggrid-alpine-active-color: shades-css-var('primary', 'border-color') !default;
 $df-tables-aggrid-input-box-shadow: $df-focused-box-shadow !default;
-
+$df-tables-aggrid-wrapper-border-radius: 0 !default;

package/styles/scss/df-styles-namespace.scss

@@ -103,6 +103,8 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 
   @import 'bootstrap/rtl-styles-override';
 
+  @import '@agnos-ui/style-bootstrap/scss/agnosui';
+
   -webkit-text-size-adjust: 100%; // 4
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
   margin: 0; // 1
@@ -124,7 +126,7 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   }
 
   @each $state, $data in $form-validation-states {
-    @if ($state == "valid" or $state == "invalid") {
+    @if ($state == 'valid' or $state == 'invalid') {
       .was-validated :#{$state},
       .is-#{$state} {
         ~ .#{$state}-feedback,

package/styles/scss/df-styles.scss

@@ -104,6 +104,7 @@
 
 @import 'bootstrap/rtl-styles-override';
 
+@import '@agnos-ui/style-bootstrap/scss/agnosui';
 // this css is needed when modal are open to have no scroll on the background.
 .df-modal-open {
   overflow: hidden;