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

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);
-  }
-}

package/scss/components/popover/_popover_container.scss

@@ -1,214 +0,0 @@
-@import 'popover.mixin';
-
-// TODO update this file with the new file from bootstrap
-// Ref file is popover.scss in BS folder.
-// Attention I backport the fix from the override in popover.scss in this file too
-#{$df-css-namespace-selector} {
-  &.popover {
-    @extend .popover;
-
-    // scss-docs-start popover-css-vars
-    --#{$prefix}popover-zindex: #{$zindex-popover};
-    --#{$prefix}popover-max-width: #{$popover-max-width};
-    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-    --#{$prefix}popover-bg: #{$popover-bg};
-    --#{$prefix}popover-border-width: #{$popover-border-width};
-    --#{$prefix}popover-border-color: #{$popover-border-color};
-    --#{$prefix}popover-border-radius: #{$popover-border-radius};
-    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-    --#{$prefix}popover-header-color: #{$popover-header-color};
-    --#{$prefix}popover-header-bg: #{$popover-header-bg};
-    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-    --#{$prefix}popover-body-color: #{$popover-body-color};
-    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-
-    --#{$prefix}popover-padding: #{$df-popover-padding};
-    --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
-    --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
-    --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
-    --#{$prefix}popover-header-font-size: #{$h3-font-size};
-    --#{$prefix}popover-body-font-size: #{$font-size-base};
-    // scss-docs-end popover-css-vars
-
-    z-index: var(--#{$prefix}popover-zindex);
-    display: block;
-    max-width: var(--#{$prefix}popover-max-width);
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    @include reset-text();
-    @include font-size(var(--#{$prefix}popover-font-size));
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    word-wrap: break-word;
-    background-color: var(--#{$prefix}popover-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-radius(var(--#{$prefix}popover-border-radius));
-    @include box-shadow(var(--#{$prefix}popover-box-shadow));
-
-    &.popover-arrow {
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      height: var(--#{$prefix}popover-arrow-height);
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: '';
-        border-color: transparent;
-        border-style: solid;
-        border-width: 0;
-      }
-    }
-  }
-
-  &.bs-popover-top {
-    > .popover-arrow {
-      bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-end {
-    > .popover-arrow {
-      left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height)
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-bottom {
-    > .popover-arrow {
-      top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-
-      &::before,
-      &::after {
-        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
-      }
-    }
-
-    // This will remove the popover-header's border just below the arrow
-    .popover-header::before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -0.5); // stylelint-disable-line function-disallowed-list
-      content: '';
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
-    }
-  }
-
-  /* rtl:begin:ignore */
-  &.bs-popover-start {
-    > .popover-arrow {
-      right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0
-          calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
-      }
-
-      &::before {
-        right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  /* rtl:end:ignore */
-
-  &.bs-popover-auto {
-    &[data-popper-placement^='top'] {
-      @extend .bs-popover-top;
-    }
-    &[data-popper-placement^='right'] {
-      @extend .bs-popover-end;
-    }
-    &[data-popper-placement^='bottom'] {
-      @extend .bs-popover-bottom;
-    }
-    &[data-popper-placement^='left'] {
-      @extend .bs-popover-start;
-    }
-  }
-
-  // Offset the popover to account for the popover arrow
-  &.popover-header {
-    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
-    margin-bottom: 0; // Reset the default from Reboot
-    @include font-size(var(--#{$prefix}popover-header-font-size));
-    color: var(--#{$prefix}popover-header-color);
-    background-color: var(--#{$prefix}popover-header-bg);
-    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &.popover-body {
-    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
-    color: var(--#{$prefix}popover-body-color);
-  }
-}

package/scss/components/spinner/_spinner_container.scss

@@ -1,43 +0,0 @@
-body.df-progressindicator-open {
-  overflow: hidden;
-}
-
-#{$df-css-namespace-selector} {
-  &.df-progressindicator-backdrop,
-  &.df-progressindicator-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $df-progressindicator-container-zindex;
-  }
-
-  &.df-progressindicator-backdrop {
-    &.df-progressindicator-backdrop-global {
-      background-color: $df-progressindicator-backdrop-global-bg-color;
-      opacity: $df-progressindicator-backdrop-global-opacity;
-    }
-    &.df-progressindicator-backdrop-contextual {
-      background-color: $df-progressindicator-backdrop-contextual-bg-color;
-      opacity: $df-progressindicator-backdrop-contextual-opacity;
-    }
-  }
-
-  &.df-progressindicator-container {
-    display: flex;
-    background-color: transparent;
-    &.df-progressindicator-centered {
-      align-items: center;
-      justify-content: center;
-    }
-    &.df-progressindicator-top {
-      align-items: flex-start;
-      justify-content: center;
-    }
-    &.df-progressindicator-bottom {
-      align-items: flex-end;
-      justify-content: center;
-    }
-  }
-}