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

package/styles/scss/components/footer/_footer.mixins.scss

@@ -1,36 +0,0 @@
-@mixin footerlink() {
-  color: var(--#{$prefix}footer-color-link-primary-default-foreground);
-  border-bottom-color: var(--#{$prefix}footer-color-link-primary-default-foreground);
-  --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-default-border);
-
-  &:hover {
-    color: var(--#{$prefix}footer-color-link-primary-hovered-foreground);
-    border-bottom-color: var(--#{$prefix}footer-color-link-primary-hovered-foreground);
-    background-color: var(--#{$prefix}footer-color-link-primary-hovered-background);
-    --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-hovered-border);
-  }
-
-  &:active {
-    color: var(--#{$prefix}footer-color-link-primary-pressed-foreground);
-    border-bottom-color: var(--#{$prefix}footer-color-link-primary-pressed-foreground);
-    background-color: var(--#{$prefix}footer-color-link-primary-pressed-background);
-    --#{$prefix}box-shadow-color: var(--#{$prefix}footer-color-link-primary-pressed-border);
-  }
-}
-
-@mixin footerlink-visited() {
-  color: var(--#{$prefix}footer-color-link-visited-default-foreground);
-  border-bottom-color: var(--#{$prefix}footer-color-link-visited-default-foreground);
-
-  &:hover {
-    color: var(--#{$prefix}footer-color-link-visited-hovered-foreground);
-    border-bottom-color: var(--#{$prefix}footer-color-link-visited-hovered-foreground);
-    background-color: var(--#{$prefix}footer-color-link-visited-hovered-background);
-  }
-
-  &:active {
-    color: var(--#{$prefix}footer-color-link-visited-pressed-foreground);
-    border-bottom-color: var(--#{$prefix}footer-color-link-visited-pressed-foreground);
-    background-color: var(--#{$prefix}footer-color-link-visited-pressed-background);
-  }
-}

package/styles/scss/components/footer/_footer.scss

@@ -1,86 +0,0 @@
-@use 'sass:meta';
-@import 'footer.mixins';
-
-.df-app-footer {
-  --#{$prefix}footer-margin-top: #{$df-footer-margin-top};
-  --#{$prefix}footer-display: #{$df-footer-display};
-  --#{$prefix}footer-direction: #{$df-footer-direction};
-  --#{$prefix}footer-line-display: #{$df-footer-line-display};
-  --#{$prefix}footer-line-align: #{$df-footer-line-align};
-  --#{$prefix}footer-line-justify-content: #{$df-footer-line-justify-content};
-  --#{$prefix}footer-line-wrap: #{$df-footer-line-wrap};
-  --#{$prefix}footer-line-direction: #{$df-footer-line-direction};
-  --#{$prefix}footer-line-padding-start: #{$df-footer-line-padding-start};
-  --#{$prefix}footer-line-padding-end: #{$df-footer-line-padding-end};
-  --#{$prefix}footer-brand-display: #{$df-footer-brand-display};
-  --#{$prefix}footer-brand-align: #{$df-footer-brand-align};
-  --#{$prefix}footer-brand-after-display: #{$df-footer-brand-after-display};
-  --#{$prefix}footer-item-outline: #{$df-footer-item-outline};
-  margin-top: var(--#{$prefix}footer-margin-top); // to put it at the botton of the flex container
-  display: var(--#{$prefix}footer-display);
-  flex-direction: var(--#{$prefix}footer-direction);
-
-  @if not meta.variable-exists($name: 'df-enableBranding2023') {
-    a:not(.df-link-icononly) {
-      &:visited {
-        color: var(--#{$prefix}link-color);
-      }
-
-      border-bottom: 0;
-
-      &:hover {
-        background-color: unset;
-        text-decoration: underline;
-      }
-
-      &:active {
-        background-color: unset;
-        color: var(--#{$prefix}link-color);
-      }
-    }
-  } @else {
-    background-color: var(--#{$prefix}footer-color-inert-neutral-background);
-    color: var(--#{$prefix}footer-color-inert-neutral-foreground);
-
-    hr {
-      border-top-color: var(--#{$prefix}footer-color-inert-neutral-border);
-      opacity: 1;
-    }
-
-    .df-app-footer-links {
-      a {
-        &:not(:visited) {
-          @include footerlink();
-        }
-        &:visited {
-          @include footerlink-visited();
-        }
-        --#{$prefix}inner-box-shadow-color: var(--#{$prefix}footer-color-inert-neutral-background);
-      }
-    }
-  }
-
-  .df-app-footer-line {
-    display: var(--#{$prefix}footer-line-display);
-    align-items: var(--#{$prefix}footer-line-align);
-    justify-content: var(--#{$prefix}footer-line-justify-content);
-    flex-wrap: var(--#{$prefix}footer-line-wrap);
-    flex-direction: var(--#{$prefix}footer-line-direction);
-    padding-inline-start: var(--#{$prefix}footer-line-padding-start);
-  }
-
-  .df-footer-brand {
-    display: var(--#{$prefix}footer-brand-display);
-    align-items: var(--#{$prefix}footer-brand-align);
-    outline: var(--#{$prefix}footer-item-outline);
-    border-bottom: 0;
-
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      color: var(--#{$prefix}footer-color-logo-foreground);
-    }
-
-    &:after {
-      display: var(--#{$prefix}footer-brand-after-display);
-    }
-  }
-}

package/styles/scss/components/footer/_footer.variables.scss

@@ -1,14 +0,0 @@
-$df-footer-margin-top: auto !default;
-$df-footer-display: flex !default;
-$df-footer-direction: column !default;
-$df-footer-line-display: flex !default;
-$df-footer-line-align: center !default;
-$df-footer-line-justify-content: flex-start !default;
-$df-footer-line-wrap: nowrap !default;
-$df-footer-line-direction: row !default;
-$df-footer-line-padding-start: 1rem !default;
-$df-footer-line-padding-end: 1rem !default;
-$df-footer-brand-display: flex !default;
-$df-footer-brand-align: center !default;
-$df-footer-brand-after-display: none !default;
-$df-footer-item-outline: none !default;

package/styles/scss/components/form/_form.scss

@@ -1,206 +0,0 @@
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:meta';
-
-form {
-  --#{$prefix}form-sm-label-margin-bottom: #{$df-label-margin-bottom-sm};
-  --#{$prefix}form-lg-label-margin-bottom: #{$df-label-margin-bottom-sm}; // strange that we use the same value
-}
-
-.form-switch {
-  --#{$prefix}form-switch-sm-width: #{$df-form-switch-sm-width};
-  --#{$prefix}form-switch-sm-height: #{math.div($df-form-switch-sm-width, 2)};
-  --#{$prefix}form-switch-lg-width: #{$df-form-switch-lg-width};
-  --#{$prefix}form-switch-lg-height: #{math.div($df-form-switch-lg-width, 2)};
-
-  .form-check-input {
-    margin-top: 0;
-  }
-}
-
-.form-inline {
-  .form-group {
-    label {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.form-control {
-  --#{$prefix}form-input-disabled-color: #{$df-disabled-input-color};
-  --#{$prefix}form-input-disabled-cursor: #{$df-input-disabled-cursor};
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: #{$input-focus-border-color};
-  } @else {
-    --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
-  }
-
-  &:disabled {
-    color: var(--#{$prefix}form-input-disabled-color);
-    cursor: var(--#{$prefix}form-input-disabled-cursor);
-
-    &::placeholder {
-      color: var(--#{$prefix}form-input-disabled-color);
-    }
-  }
-
-  &::placeholder {
-    font-style: $df-form-placeholder-font-style;
-  }
-
-  &[readonly] {
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-}
-
-.form-check-input {
-  --#{$prefix}form-check-input-sm-width: #{$df-form-check-input-sm-width};
-  --#{$prefix}form-check-input-lg-width: #{$df-form-check-input-lg-width};
-  --#{$prefix}form-check-input-sm-margin-top: #{($line-height-sm - $df-form-check-input-sm-width) * 1};
-  --#{$prefix}form-check-input-lg-margin-top: #{($line-height-lg - $df-form-check-input-lg-width) * 0.5};
-
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'border-color')};
-  } @else {
-    --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
-  }
-}
-
-// Override warning state color
-.warning-feedback {
-  color: var(--#{$prefix}form-feedback-help-warning-color);
-}
-
-// TODO see how to add CSS var for this globally
-.invalid-feedback,
-.valid-feedback,
-.warning-feedback {
-  font-size: $font-size-sm;
-}
-
-.form-control-sm {
-  & ~ .invalid-feedback,
-  & ~ .valid-feedback,
-  & ~ .warning-feedback {
-    font-size: $df-font-size-xs;
-  }
-}
-
-.form-row {
-  // add
-  & ~ .invalid-feedback {
-    display: block;
-  }
-}
-
-.df-custom-pages-input {
-  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth};
-  --#{$prefix}custom-pages-input-width: auto;
-  min-width: var(--#{$prefix}custom-pages-input-minwidth);
-  width: var(--#{$prefix}custom-pages-input-width);
-}
-
-.form-control,
-.form-check-input {
-  @each $state, $data in $form-validation-states {
-    $colorName: map.get($df-form-validation-states-names, $state);
-    &.is-#{$state} {
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
-      } @else {
-        --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
-      }
-    }
-  }
-}
-
-// forms size small
-.form-sm {
-  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-sm};
-
-  .form-control,
-  .ng-select {
-    @extend .form-control-sm;
-  }
-
-  label {
-    :not(.col-form-label) {
-      // TODO check if can remove not used anywhere in our demo...
-      // maybe this is more &:not as in form.mixin.scss
-      margin-bottom: var(--#{$prefix}form-sm-label-margin-bottom);
-    }
-
-    font-size: $font-size-sm;
-  }
-
-  .form-check-input {
-    width: var(--#{$prefix}form-check-input-sm-width);
-    height: var(--#{$prefix}form-check-input-sm-width);
-    margin-top: var(--#{$prefix}form-check-input-sm-margin-top);
-  }
-
-  .form-switch {
-    .form-check-input {
-      margin-top: 0;
-      width: var(--#{$prefix}form-switch-sm-width);
-      height: var(--#{$prefix}form-switch-sm-height);
-    }
-  }
-
-  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
-    border-radius: var(--#{$prefix}border-radius-sm); //needed to override common bootstrap file
-  }
-
-  .invalid-feedback,
-  .valid-feedback,
-  .warning-feedback {
-    font-size: $df-font-size-xs;
-  }
-}
-
-// forms size large
-.form-lg {
-  --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
-
-  .form-control {
-    @extend .form-control-lg;
-  }
-
-  label {
-    :not(.col-form-label) {
-      // TODO check if can remove not used anywhere in our demo...
-      // maybe this is more &:not as in form.mixin.scss
-      margin-bottom: var(--#{$prefix}form-lg-label-margin-bottom);
-    }
-
-    font-size: $font-size-lg;
-  }
-
-  .form-check-input {
-    width: var(--#{$prefix}form-check-input-lg-width);
-    height: var(--#{$prefix}form-check-input-lg-width);
-    margin-top: var(--#{$prefix}form-check-input-lg-margin-top);
-  }
-
-  .form-switch {
-    .form-check-input {
-      margin-top: 0;
-      width: var(--#{$prefix}form-switch-lg-width);
-      height: var(--#{$prefix}form-switch-lg-height);
-    }
-  }
-
-  .input-group:has(input.df-input-withicon):has(.input-group-prepend) .input-group-prepend {
-    border-radius: var(--#{$prefix}border-radius-lg);
-  }
-}
-
-.ng-invalid.ng-touched {
-  @extend .is-invalid;
-}

package/styles/scss/components/form/_form.variables.scss

@@ -1,34 +0,0 @@
-@use 'sass:map';
-
-$df-disabled-input-color: var(--#{$prefix}disabled-color) !default;
-$df-input-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
-$df-label-margin-bottom-sm: 0.375rem !default;
-$df-form-feedback-warning-color: $warning !default;
-$df-form-feedback-help-warning-color: $brown !default;
-$df-form-feedback-warning-icon: '' !default;
-
-$df-form-validation-states-names: (
-  'valid': 'success',
-  'invalid': 'danger',
-  'warning': 'warning'
-) !default;
-
-// stylelint-disable scss/dollar-variable-default, scss/dollar-variable-pattern
-$form-validation-states: map.merge(
-  (
-    'warning': (
-      'color': var(--#{$prefix}form-warning-color),
-      'icon': $df-form-feedback-warning-icon,
-      'focus-box-shadow': $input-btn-focus-box-shadow
-    )
-  ),
-  $form-validation-states
-);
-
-$df-form-check-input-sm-width: $form-check-input-width * map.get($df-size-ratios, 'sm') !default;
-$df-form-check-input-lg-width: $form-check-input-width * map.get($df-size-ratios, 'lg') !default;
-$df-form-switch-sm-width: $form-switch-width * map.get($df-size-ratios, 'sm') !default;
-$df-form-switch-lg-width: $form-switch-width * map.get($df-size-ratios, 'lg') !default;
-$df-custom-pages-input-minwidth-sm: 2rem !default;
-$df-custom-pages-input-minwidth: 2.5rem !default;
-$df-custom-pages-input-minwidth-lg: 3rem !default;

package/styles/scss/components/icon/_amadeus-icon.scss

@@ -1,39 +0,0 @@
-@mixin df-svg-color($parent, $color) {
-  #{$parent} {
-    background: df-getSVGasURL($df-amadeuslogo, $color, #fff, #fff) no-repeat center center;
-    background-size: contain;
-  }
-}
-
-@each $color, $value in $theme-colors {
-  @include df-svg-color('.df-amadeuslogo-#{$color}', $value);
-}
-
-@each $color, $value in $colors {
-  @include df-svg-color('.df-amadeuslogo-#{$color}', $value);
-}
-
-@include df-svg-color('.df-amadeuslogo-black', $black);
-
-.df-logo-dim {
-  height: $df-brand-amadeus-logo-height;
-  width: $df-brand-amadeus-logo-width;
-}
-
-.df-rond-icon-only-focusable {
-  outline: none;
-  &:focus-visible {
-    &::before {
-      box-shadow: $df-icon-focused-box-shadow;
-      border-radius: 50%;
-    }
-  }
-}
-.df-square-icon-only-focusable {
-  outline: none;
-  &:focus-visible {
-    &::before {
-      box-shadow: $df-icon-focused-box-shadow;
-    }
-  }
-}

package/styles/scss/components/icon/_amadeus-icon.variables.scss

@@ -1,4 +0,0 @@
-$df-amadeuslogo: "<svg enable-background='new 0 0 510.2 67.9' version='1.1' viewBox='0 0 510.2 67.9' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path fill='#ffffff' d='m269.7 0c-8.3 0-19.8 1.4-26.9 4v61.9c5.8 1.2 16.8 2 24.4 2 26 0 36.1-10.2 36.1-34.4 0.1-21-12.8-33.5-33.6-33.5m-12.2 12.6c2.4-0.5 7-1.1 11.6-1.1 10.6 0 18.8 5.9 18.8 22 0 15.5-4.1 22.9-20.2 22.9-5.2 0-10.3-0.8-10.3-0.8v-43zm204 52.9s9 2.4 21.7 2.4c12 0 27-4.1 27-20.3 0-10.6-7.8-15.1-20.5-19.7-6.9-2.5-12.7-4.8-12.7-9.5 0-2.3 1.7-6.7 10.5-6.7 8.2 0 16.6 3.8 16.6 3.8l3.7-10.8c-2.6-1.3-10.6-4.7-21.7-4.7-12.1 0-23.8 6.4-23.8 19.3 0 13.3 12.1 17.3 21.5 20.5 6.4 2.2 11.8 4.4 11.8 8.7 0 4.1-2.3 7.7-13.1 7.7-8.9 0-18.3-2-18.3-2l-2.7 11.3zm-31.9-15.2c-3.5 1.7-11 4.5-17.9 4.5-10 0-11.7-4.5-11.7-14.9v-39.3h-2.2c-3.3 0-10.6 0.6-12.4 0.9v40.3c0 17.6 4.3 26 22.2 26 13.7 0 21.7-5.3 22.2-5.3 0.2 0 4.9 2.9 14.3 2.9v-64c-1-0.2-8.1-0.9-11.7-0.9h-2.9v49.8zm-231.1-50.3c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.6 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm-174.9-52.7c-13 0-23.2 3.2-27.1 5.2l3.1 10.9s10-3.6 19.8-3.6c8.4 0 12.7 2.4 12.7 10.6v4.7h-12.7c-21.6 0-28 9.9-28 20.8 0 14.5 11.3 19.1 21.6 19.1 12 0 18.9-5 19.8-5 0.7 0 3.1 2.6 14 2.6v-46c0-13.8-8.6-19.3-23.2-19.3m8.7 52.7c-3.1 1.2-10.7 3.7-16.2 3.7-6 0-10.6-2.1-10.6-8.7 0-5.7 3.1-9 11.4-9.3l15.4-0.6v14.9zm73.1-13.7c-0.4 0.9-0.8 2.7-1.1 3.8-0.3-1-0.8-2.8-1.1-3.8l-12.8-32.9c-2.2-5.4-5.6-6.1-11.8-6.1-2.2 0-6.6 0.3-6.6 0.3l-6.6 66.6h14.6l3.2-44.7 13.9 33.8c1 2.6 3.1 3.7 7.3 3.7 4.1 0 6.2-1 7.3-3.7l13.7-33.8 3.2 44.7h14.6l-6.6-66.6s-4.4-0.3-6.6-0.3c-6.2 0-9.6 0.7-11.8 6.1l-12.8 32.9zm206.8 25.7s11.2 3.1 25.5 3.1c15.3 0 22.3-1.7 22.3-1.7v-11.3s-7.6 1.5-18.3 1.5c-9.3 0-15.1-1.2-15.1-1.2v-16h28.9v-11.3h-28.9v-15.3s5.7-1 14.1-1c9.5 0 18.1 1.5 18.1 1.5v-11.4s-7.5-1.6-19.8-1.6c-16.3 0-27 2.9-27 2.9v61.8z'/></svg>" !default;
-$df-brand-amadeus-logo-height: 0.8125rem !default;
-$df-brand-amadeus-logo-width: 6.125rem !default;
-$df-icon-focused-box-shadow: $df-focused-box-shadow !default;

package/styles/scss/components/inputs/_inputs.mixin.scss

@@ -1,125 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:selector';
-
-@mixin df-input-with-icon-validation-state($state, $color, $position) {
-  $ltr-border-side: if($position == 'append', 'right', 'left');
-  $rtl-border-side: if($position == 'append', 'left', 'right');
-
-  &.is-#{$state} {
-    $colorName: map.get($df-form-validation-states-names, $state);
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
-    } @else {
-      --#{$prefix}box-shadow-color: rgba(#{to-rgb($color)}, #{$input-btn-focus-color-opacity});
-    }
-    & ~ .#{$state}-feedback,
-    .#{$state}-tooltip {
-      display: block;
-    }
-
-    .input-group-#{$position} {
-      border-color: $color;
-      @include ltr {
-        border-#{$ltr-border-side}: $input-border-width solid $color;
-      }
-      @include rtl {
-        border-#{$rtl-border-side}: $input-border-width solid $color;
-      }
-    }
-
-    input.df-input-withicon {
-      border-color: $color;
-      @include ltr {
-        border-#{$ltr-border-side}-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-      @include rtl {
-        border-#{$rtl-border-side}-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-    }
-
-    &.df-focused {
-      .input-group-#{$position} {
-        border-color: $color !important;
-      }
-    }
-  }
-}
-
-@mixin df-iwi-root-left($parent) {
-  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:first-of-type')} {
-    @content;
-  }
-}
-
-@mixin df-iwi-root-right($parent) {
-  @at-root #{selector.replace(&, '.input-group', $parent + '> div.input-group:last-of-type')} {
-    @content;
-  }
-}
-
-@mixin df-input-withicon-append {
-  @include ltr {
-    border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    @include df-iwi-root-right('.df-input-datepicker-range') {
-      border-left: var(--#{$prefix}iwi-dpr-to-border-left) !important;
-      border-top-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
-      border-bottom-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
-    }
-    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-  }
-  @include rtl {
-    border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    @include df-iwi-root-right('.df-input-datepicker-range') {
-      border-right: var(--#{$prefix}iwi-dpr-to-border-left) !important;
-      border-top-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
-      border-bottom-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
-    }
-    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-  }
-
-  @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-    border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-  }
-
-  @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-    border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-  }
-
-  box-shadow: none; // override mandatory
-  &:focus-visible {
-    @include ltr {
-      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    @include rtl {
-      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    box-shadow: none; // override mandatory
-  }
-}
-
-@mixin df-input-withicon-prepend() {
-  @include ltr {
-    border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-  }
-  @include rtl {
-    border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-  }
-  box-shadow: none; // override mandatory
-  padding-left: 0px; // override mandatory
-  &:focus-visible {
-    @include ltr {
-      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    @include rtl {
-      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    box-shadow: none; // override mandatory
-  }
-}

package/styles/scss/components/inputs/_inputs.root.scss

@@ -1,8 +0,0 @@
-:root {
-  --#{$prefix}focused-cross-icon: #{$df-focused-cross-icon};
-  --#{$prefix}focused-cross-font-size: #{$df-focused-cross-font-size};
-  --#{$prefix}focused-cross-border-radius: #{$df-focused-cross-border-radius};
-  --#{$prefix}focused-cross-hover-background-color: #{$df-focused-cross-hover-background-color};
-  --#{$prefix}iwi-icon-height: #{$df-iwi-icon-height};
-  --#{$prefix}iwi-icon-width: #{$df-iwi-icon-width};
-}