@kaizen/components 2.3.7 → 2.5.0

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -1,139 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/animation';
-@import '../../../styles/utils/forms';
-
-@layer kz-components {
-  $animation-timing: $animation-duration-immediate $animation-easing-function-linear;
-  $focus-ring-offset: 1px;
-
-  .checkbox {
-    @include form-input-visually-hidden;
-  }
-
-  .track {
-    position: relative;
-    background-color: $color-gray-500;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $spacing-md;
-    box-sizing: content-box;
-    width: calc((#{$spacing-md} * 1.05) * 2);
-    height: calc(#{$spacing-md} * 1.25);
-    padding: 0 calc(#{$spacing-md} * 0.15);
-    display: flex;
-    align-items: center;
-    transition: background-color $animation-timing;
-
-    /* TODO: Fix */
-    /* stylelint-disable no-descending-specificity */
-    .checkbox:not(.disabled):focus + &,
-    .checkbox:not(.disabled):hover:focus + & {
-      border-color: transparent;
-      outline: 2px solid $color-blue-500;
-      outline-offset: $focus-ring-offset;
-      background-color: $color-gray-600;
-    }
-
-    .checkbox:not(.disabled) + &:hover,
-    label:hover .checkbox:not(.disabled) + & {
-      background-color: $color-purple-500;
-      background-color: $color-gray-600;
-    }
-
-    /* stylelint-enable no-descending-specificity */
-  }
-
-  .thumb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: $color-white;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $spacing-md;
-    transition:
-      left $animation-timing,
-      right $animation-timing;
-    cursor: default;
-  }
-
-  .checkIcon {
-    color: $color-green-500;
-    opacity: 0%;
-    transition-duration: $animation-duration-rapid;
-  }
-
-  /* stylelint-disable no-descending-specificity */
-  .on {
-    .checkbox + .track {
-      border-color: $border-borderless-border-color;
-      background-color: $color-green-500;
-    }
-
-    .checkbox:focus + .track {
-      border-color: transparent;
-      background-color: $color-green-600;
-    }
-
-    .thumb {
-      position: relative;
-      right: auto;
-      inset-inline-start: calc(#{$spacing-md} * 1.1);
-    }
-
-    .checkIcon {
-      opacity: 100%;
-      transition-delay: $animation-duration-immediate;
-      transition-duration: $animation-duration-fast;
-    }
-
-    .checkbox:not(.disabled) + .track:hover,
-    label:hover & .checkbox:not(.disabled) + .track {
-      background-color: $color-green-600;
-    }
-  }
-
-  .off {
-    .thumb {
-      position: relative;
-      right: auto;
-      inset-inline-start: calc(#{$spacing-md} * -0.05);
-    }
-  }
-
-  .reversed {
-    .checkbox:focus + .track,
-    .checkbox:hover:focus + .track {
-      outline-color: $color-blue-300;
-    }
-
-    &.off {
-      .track {
-        background-color: rgba($color-white-rgb, 0.2);
-      }
-
-      .checkbox:focus + .track,
-      .checkbox:hover:focus + .track {
-        background-color: rgba($color-white-rgb, 0.65);
-      }
-
-      .checkbox:not(.disabled) + .track:hover,
-      label:hover & .checkbox:not(.disabled) + .track {
-        background-color: rgba($color-white-rgb, 0.65);
-      }
-    }
-  }
-
-  // When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
-  label .disabled.track {
-    opacity: 100%;
-  }
-
-  .disabled.track {
-    opacity: 30%;
-  }
-
-  /* stylelint-enable no-descending-specificity */
-}

package/src/Tooltip/OverlayArrow.module.scss

@@ -1,45 +0,0 @@
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-
-@layer kz-components {
-  .overlayArrow {
-    display: flex;
-
-    // for correct arrow positioning with rounded corners we need to do bit trickery here
-    // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
-    // so we first set padding on arrow from all sides (that'll be used for start position computation)
-    // and then we remove it from the oposite axis
-    padding: 8px;
-
-    &[data-placement='top'],
-    &[data-placement='bottom'] {
-      padding: 0 8px;
-    }
-
-    &[data-placement='left'],
-    &[data-placement='right'] {
-      padding: 8px 0;
-    }
-
-    path {
-      fill: $color-purple-800;
-      box-shadow: $shadow-small-box-shadow;
-    }
-
-    &[data-placement='right'] svg {
-      transform: rotate(90deg);
-    }
-
-    &[data-placement='bottom'] svg {
-      transform: rotate(180deg);
-    }
-
-    &[data-placement='left'] svg {
-      transform: rotate(270deg);
-    }
-
-    &.reversed path {
-      fill: $color-white;
-    }
-  }
-}

package/src/Tooltip/Tooltip.module.scss

@@ -1,68 +0,0 @@
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/animation';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .tooltip {
-    max-width: 200px;
-    padding: $spacing-8 $spacing-12;
-    color: $color-white;
-    text-align: center;
-    font-family: $typography-paragraph-extra-small-font-family;
-    font-size: $typography-paragraph-extra-small-font-size;
-    font-weight: $typography-paragraph-extra-small-font-weight;
-    letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-    line-height: $typography-paragraph-extra-small-line-height;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-small-box-shadow;
-    background-color: $color-purple-800;
-    text-wrap: pretty;
-
-    /* fixes FF gap */
-    transform: translate3d(0, 0, 0);
-
-    &.reversed {
-      background-color: $color-white;
-      color: $color-purple-800;
-    }
-
-    &[data-placement='top'] {
-      --origin: translateY(4px);
-    }
-
-    &[data-placement='bottom'] {
-      --origin: translateY(-4px);
-    }
-
-    &[data-placement='right'] {
-      --origin: translateX(-4px);
-    }
-
-    &[data-placement='left'] {
-      --origin: translateX(4px);
-    }
-
-    &[data-entering] {
-      animation: slide $animation-duration-fast;
-    }
-
-    &[data-exiting] {
-      animation: slide $animation-duration-fast reverse $animation-easing-function-ease-in;
-    }
-  }
-}
-
-@keyframes slide {
-  from {
-    transform: var(--origin);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}