@design-factory/styles 21.0.0-next.0 → 21.0.0

package/scss/components/table/_advancedtables.scss

@@ -1,5 +1,5 @@
 @use 'ag-grid-community/styles' as ag;
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 // TODO check new checkbox look and border radius
 @include ag.grid-styles(
@@ -37,7 +37,7 @@
 }
 
 .df-table.ag-theme-alpine {
-  --ag-background-color: var(--df-color-inert-neutral-main-background);
+  --ag-background-color: var(--df-color-neutral-alt-default-background);
   --ag-checkbox-border-radius: #{$form-check-input-border-radius};
   --ag-font-size: var(--df-typo-sizing-default);
   --ag-alpine-active-color: var(--df-color-primary-alt-active-background);
@@ -80,7 +80,7 @@
     background-color: var(--df-color-primary-subtle-background);
   }
 
-  &.df-table-white-header {
+  &.df-table-neutral-alt-header {
     --ag-header-background-color: var(--df-color-neutral-alt-default-background);
 
     .ag-header {
@@ -115,6 +115,11 @@
     color: var(--df-color-primary-alt-active-foreground);
   }
 
+  //Override ag-grid hover + selected to use hover background-color
+  .ag-row-hover.ag-row-selected::before {
+    background-image: linear-gradient(var(---ag-row-hover-color), var(--ag-row-hover-color));
+  }
+
   .ag-icon.ag-icon-desc {
     @extend .df-table-icon;
     @extend .fa-sort-amount-down;

package/scss/components/tabs/_tabs.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables' as df;
+@use '../../common.variables' as df;
 
 .nav-link {
   &:visited {
@@ -36,6 +36,11 @@
       color: var(--df-nav-link-hover-color);
     }
 
+    &:active:not(.disabled):not(:disabled) {
+      background-color: var(--df-color-primary-alt-pressed-background);
+      color: var(--df-color-primary-alt-pressed-foreground);
+    }
+
     &:focus {
       box-shadow: none;
       outline: none;

package/scss/components/toast/_toast.variables.scss

@@ -1,7 +1,8 @@
-@use 'sass:color';
+@use '../../common.variables' as df;
 
 $toast-padding-y: 0.5625rem !default;
 $toast-padding-x: var(--df-spacing-5) !default;
 $toast-border-radius: var(--df-borderRadius-main-small) !default;
 $toast-border-width: 0 !default;
 $toast-font-size: var(--df-typo-sizing-small) !default;
+$toast-box-shadow: df.$df-box-shadow !default;

package/scss/components/toggle/_toggle.scss

@@ -1,4 +1,4 @@
-@use '../../new-brand-common.variables.scss' as df;
+@use '../../common.variables.scss' as df;
 
 .form-switch {
   display: flex;
@@ -62,7 +62,7 @@
       border-color: var(--df-color-toggle-border);
     }
 
-    &:focus-visible:not(:checked):not(:disabled):not(.is-invalid) {
+    &:focus-visible:not(:checked):not(:disabled):not(.is-invalid):not(.ng-invalid.ng-touched) {
       --df-box-shadow-color: var(--df-color-toggle-border);
     }
 

package/scss/namespace.scss

@@ -1,3 +1,8 @@
+// Overriding bootstrap is done in this way:
+// We declare sass vars BEFORE bootstrap sass vars.
+// We redefine mixins and functions AFTER bootstrap mixins and functions.
+// We declare component css override AFTER bootstrap component css.
+
 @import 'variables';
 @import 'bootstrap/maps';
 @import 'bootstrap/scss/maps';
@@ -6,12 +11,25 @@
 @import 'components/fonts/fonts-family';
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
-
 @import 'bootstrap/scss/root';
 @import 'common.root';
 
+@import 'components/navbar/navbar.mixins';
+
+@import '@design-factory/tokens/css/root-dark';
+
+:root {
+  // beautiful media service ONLY works when breakpoints css vars are defined at root level :)
+  @each $breakpoint, $value in $grid-breakpoints {
+    --df-breakpoint-#{$breakpoint}: #{$value};
+  }
+}
+
 $df-css-namespace-selector: '.design-factory-v2' !default;
 
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import 'components/button/button.namespace';
+
 #{$df-css-namespace-selector} {
   @import 'bootstrap/scss/reboot';
   @import 'bootstrap/scss/type';
@@ -54,11 +72,11 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
 
   /** DESIGN FACTORY IMPORTS **/
   @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/accordion/accordion';
   @import 'components/separator/separator';
   @import 'components/button/button';
   @import 'components/media/media';
@@ -92,13 +110,18 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'components/rating/rating';
   @import 'components/speechbubble/speechbubble';
   @import 'components/list/list';
-  @import 'components/skip-links/skip-links';
   @import 'components/breadcrumbs/breadcrumbs';
   @import 'components/stepper/stepper';
   @import 'components/carousel/carousel';
+  @import 'components/sidenav/sidenav-deprecated';
   @import 'components/sidenav/sidenav';
+  @import 'components/drawer/drawer';
   @import 'components/footer/footer';
   @import 'components/toast/toast';
+  @import 'components/scrollspy/scrollspy';
+  @import 'components/timepicker/timepicker';
+  @import 'components/tooltip/tooltip';
+  @import 'components/waves/waves';
 
   @import 'bootstrap/rtl-styles-override';
 
@@ -106,26 +129,31 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   /* stylelint-disable-next-line scss/load-partial-extension */
   @import '@agnos-ui/core-bootstrap/scss/agnosui.scss';
 
-  -webkit-text-size-adjust: 100%; // 4
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
-  margin: 0; // 1
-  font-family: $font-family-base;
-  font-size: $font-size-base;
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $body-color;
-  background-color: $body-bg; // 2
-
-  .list-group-item + .list-group-item {
-    // Copy from Bootstrap 4.4.1 due to CSS namespacing and use of + selector
-    border-top-width: 0;
-
-    &.active {
-      margin-top: -$list-group-border-width;
-      border-top-width: $list-group-border-width;
-    }
+  // body
+  margin: 0;
+  font-family: var(--df-body-font-family);
+  font-size: var(--df-body-font-size);
+  font-weight: var(--df-body-font-weight);
+  line-height: var(--df-body-line-height);
+  color: var(--df-body-color);
+  text-align: var(--df-body-text-align);
+  background-color: var(--df-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  // root level CSS, mostly from bootstrap _reboot.scss
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+
+  a > code {
+    color: inherit;
   }
 
+  // making sure ag-grid legacy styles are used
+  --ag-legacy-styles-loaded: 'true';
+
+  // fixes display of validation feedback, coming from bootstrap _forms.scss
   @each $state, $data in $form-validation-states {
     @if ($state == 'valid' or $state == 'invalid') {
       .was-validated :#{$state},
@@ -145,16 +173,9 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
     }
   }
 }
-/* stylelint-disable no-invalid-position-at-import-rule */
-@import 'components/popover/popover_container';
-@import 'components/tooltip/tooltip_container';
-@import 'components/spinner/spinner_container';
-@import 'components/button/button_container';
-@import 'components/pagination/pagination_container';
-@import 'components/brand-color/brand-color_container';
-/* stylelint-enable no-invalid-position-at-import-rule */
 
-// this css is needed when modal are open to have no scroll on the background.
-.df-modal-open {
-  overflow: hidden;
-}
+@import 'components/carousel/carousel.namespace';
+@import 'components/modal/modal.namespace';
+@import 'components/pagination/pagination.namespace';
+@import 'components/select/select.namespace';
+/* stylelint-enable no-invalid-position-at-import-rule */

package/scss/utilities.scss

@@ -1,4 +1,3 @@
-@import './themes/brand2023/variables';
 @import './variables';
 @import 'bootstrap/scss/mixins/breakpoints';
 @import './components/dropdown/dropdown.mixins';

package/scss/_new-brand-common.variables.scss

@@ -1,7 +0,0 @@
-$df-box-shadow: 0px 0px 8px var(--df-color-shadow-1) !default;
-$df-focus-box-shadow:
-  0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
-  0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;
-$df-focus-inset-box-shadow:
-  inset 0 0 0 2px var(--df-inner-box-shadow-color, var(--df-body-bg)),
-  inset 0 0 0 4px var(--df-box-shadow-color, var(--df-color-primary-main-default-border)) !default;

package/scss/bootstrap/_variables-dark.scss

@@ -1,86 +0,0 @@
-// stylelint-disable scss/dollar-variable-pattern
-// Dark color mode variables
-//
-// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
-
-//
-// Global colors
-//
-
-// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-// $primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
-// $secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
-// $success-text-emphasis-dark:        tint-color($success, 40%) !default;
-// $info-text-emphasis-dark:           tint-color($info, 40%) !default;
-// $warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
-// $danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
-// $light-text-emphasis-dark:          $gray-100 !default;
-// $dark-text-emphasis-dark:           $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
-
-// scss-docs-start theme-bg-subtle-dark-variables
-// $primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
-// $secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
-// $success-bg-subtle-dark:            shade-color($success, 80%) !default;
-// $info-bg-subtle-dark:               shade-color($info, 80%) !default;
-// $warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
-// $danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
-// $light-bg-subtle-dark:              $gray-800 !default;
-// $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
-
-// scss-docs-start theme-border-subtle-dark-variables
-// $primary-border-subtle-dark:        shade-color($primary, 40%) !default;
-// $secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
-// $success-border-subtle-dark:        shade-color($success, 40%) !default;
-// $info-border-subtle-dark:           shade-color($info, 40%) !default;
-// $warning-border-subtle-dark:        shade-color($warning, 40%) !default;
-// $danger-border-subtle-dark:         shade-color($danger, 40%) !default;
-// $light-border-subtle-dark:          $gray-700 !default;
-// $dark-border-subtle-dark:           $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
-
-// $body-color-dark:                   $gray-300 !default;
-// $body-bg-dark:                      $gray-900 !default;
-// $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-// $body-secondary-bg-dark:            $gray-800 !default;
-// $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-// $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
-// $body-emphasis-color-dark:          $white !default;
-// $border-color-dark:                 $gray-700 !default;
-// $border-color-translucent-dark:     rgba($white, .15) !default;
-// $headings-color-dark:               inherit !default;
-// $link-color-dark:                   tint-color($primary, 40%) !default;
-// $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
-$code-color-dark: tint-color($pink, 40%) !default;
-// $mark-color-dark:                   $body-color-dark !default;
-// $mark-bg-dark:                      $yellow-800 !default;
-
-//
-// Forms
-//
-
-// $form-select-indicator-color-dark:  $body-color-dark !default;
-// $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-// $form-switch-color-dark:            rgba($white, .25) !default;
-// $form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
-
-// scss-docs-start form-validation-colors-dark
-// $form-valid-color-dark:             $green-300 !default;
-// $form-valid-border-color-dark:      $green-300 !default;
-// $form-invalid-color-dark:           $red-300 !default;
-// $form-invalid-border-color-dark:    $red-300 !default;
-// scss-docs-end form-validation-colors-dark
-
-//
-// Accordion
-//
-
-// $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
-// $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
-
-// $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// scss-docs-end sass-dark-mode-vars

package/scss/components/brand-color/_brand-color.variables.scss

@@ -1,146 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-
-@function df-format-transform-name($color, $action, $params) {
-  $name: $action;
-  @each $param in $params {
-    $name: $name + '-' + $param;
-  }
-  $name: $name + '-' + $color;
-  @return $name;
-}
-
-@function df-transform-loop($arrayIn, $arrayOut, $action, $params...) {
-  @each $color, $value in $arrayIn {
-    $arrayOut: map.merge(
-      (
-        df-format-transform-name($color, $action, $params): meta.call(meta.get-function($action), $value, $params...)
-      ),
-      $arrayOut
-    );
-  }
-  @return $arrayOut;
-}
-
-// Hover color
-$df-colors-transformed: () !default;
-$df-hover-transform: 'darken' !default;
-$df-hover-transform-param: 5% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-hover-transform,
-  $df-hover-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-hover-transform,
-  $df-hover-transform-param
-);
-
-$df-active-transform: 'darken' !default;
-$df-active-transform-param: 10% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-active-transform,
-  $df-active-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-active-transform,
-  $df-active-transform-param
-);
-
-// stylelint-disable-next-line scss/dollar-variable-pattern
-$df-bg-active-transform: 'mix' !default;
-$df-bg-active-transform-param1: $white !default;
-$df-bg-active-transform-param2: 15% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-active-transform,
-  $df-bg-active-transform-param1,
-  $df-bg-active-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-active-transform,
-  $df-bg-active-transform-param1,
-  $df-bg-active-transform-param2
-);
-
-$df-bg-hover-transform: 'mix' !default;
-$df-bg-hover-transform-param1: $white !default;
-$df-bg-hover-transform-param2: 10% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-hover-transform,
-  $df-bg-hover-transform-param1,
-  $df-bg-hover-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-hover-transform,
-  $df-bg-hover-transform-param1,
-  $df-bg-hover-transform-param2
-);
-
-$df-bg-transform: 'mix' !default;
-$df-bg-transform-param1: $white !default;
-$df-bg-transform-param2: 5% !default;
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $colors,
-  $df-colors-transformed,
-  $df-bg-transform,
-  $df-bg-transform-param1,
-  $df-bg-transform-param2
-);
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$df-colors-transformed: df-transform-loop(
-  $theme-colors,
-  $df-colors-transformed,
-  $df-bg-transform,
-  $df-bg-transform-param1,
-  $df-bg-transform-param2
-);
-
-/**
- * Gradients
- */
-// stylelint-disable-next-line scss/dollar-variable-pattern
-$gradients: () !default;
-// stylelint-disable-next-line
-$gradients: map.merge(
-  (
-    'gradient-blue': (
-      'from': $blue,
-      'to': $cyan
-    )
-  ),
-  $gradients
-);

package/scss/components/brand-color/_brand-color_container.scss

@@ -1,23 +0,0 @@
-#{$df-css-namespace-selector} {
-  --#{$prefix}dark-primary: #{$dark-primary};
-  --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
-  --#{$prefix}dark-primary-rgb: #{to-rgb($dark-primary)};
-  --#{$prefix}white-color: #{color-contrast($white)};
-  --#{$prefix}black-color: #{color-contrast($black)};
-
-  @each $color, $value in $shade-colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-rgb {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text {
-    --#{$prefix}#{$color}-color: #{$value};
-  }
-
-  @each $color, $value in $shade-colors-text-rgb {
-    --#{$prefix}#{$color}-color-rgb: #{$value};
-  }
-}

package/scss/components/button/_button_container.scss

@@ -1,47 +0,0 @@
-@use 'sass:color';
-
-@each $state, $value in $theme-colors {
-  $colorbtn: color-contrast($value);
-  $hover-background: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-hover-bg-shade-amount),
-    tint-color($value, $btn-hover-bg-tint-amount)
-  );
-  $hover-border: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-hover-border-shade-amount),
-    tint-color($value, $btn-hover-border-tint-amount)
-  );
-  $hover-color: color-contrast($hover-background);
-  $active-background: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-active-bg-shade-amount),
-    tint-color($value, $btn-active-bg-tint-amount)
-  );
-  $active-color: color-contrast($active-background);
-  $active-border: if(
-    $colorbtn == $color-contrast-light,
-    shade-color($value, $btn-active-border-shade-amount),
-    tint-color($value, $btn-active-border-tint-amount)
-  );
-
-  $active-background-outline: $value;
-  $active-border-outline: $value;
-  $active-color-outline: color-contrast($active-background-outline);
-
-  // this code is because
-  // .btn-check:focus + &
-  // from the file _buttons.scss is not working with the wrapper
-  #{$df-css-namespace-selector} {
-    .btn-check:checked,
-    .btn-check:active {
-      & + .btn-#{$state},
-      & + .btn-outline-#{$state} {
-        color: var(--#{$prefix}btn-active-color);
-        background-color: var(--#{$prefix}btn-active-bg);
-        border-color: var(--#{$prefix}btn-active-border-color);
-        background-image: if($enable-gradients, none, null);
-      }
-    }
-  }
-}

package/scss/components/pagination/_pagination_container.scss

@@ -1,17 +0,0 @@
-#{$df-css-namespace-selector} {
-  .active > .page-link {
-    z-index: 3;
-    color: var(--#{$prefix}pagination-active-color);
-    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
-    border-color: var(--#{$prefix}pagination-active-border-color);
-    &:hover {
-      background-color: var(--#{$prefix}pagination-hover-bg);
-    }
-  }
-  .disabled > .page-link {
-    color: var(--#{$prefix}pagination-disabled-color);
-    pointer-events: none;
-    background-color: var(--#{$prefix}pagination-disabled-bg);
-    border-color: var(--#{$prefix}pagination-disabled-border-color);
-  }
-}