@kaizen/components 2.3.6 → 2.4.0

package/src/Tag/Tag.module.scss

@@ -1,215 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '../../styles/utils/button-reset';
-
-@layer kz-components {
-  $medium: calc(#{$spacing-md} * 1.25);
-  $small: $spacing-md;
-
-  .root {
-    margin-inline-end: calc(#{$spacing-md} * 0.5);
-    font-size: $typography-paragraph-small-font-size;
-    font-weight: $typography-paragraph-small-font-weight;
-    letter-spacing: $typography-paragraph-small-letter-spacing;
-    color: $color-purple-800;
-    display: inline-block;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: calc(#{$spacing-md} * 0.75);
-    padding: 0 calc(#{$spacing-md} * 0.4);
-    box-sizing: border-box;
-
-    &.profile {
-      padding-left: calc(#{$spacing-md} * 0.2);
-    }
-  }
-
-  .layoutContainer {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .validationIcon {
-    align-items: center;
-    display: flex;
-    color: $color-white;
-    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-  }
-
-  .profile {
-    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .textContent {
-    margin-top: -1px;
-    font-family: $typography-paragraph-small-font-family;
-    font-weight: $typography-paragraph-small-font-weight;
-    font-size: $typography-paragraph-small-font-size;
-    line-height: $typography-paragraph-small-line-height;
-    letter-spacing: $typography-paragraph-small-letter-spacing;
-    white-space: nowrap;
-  }
-
-  .iconWrapper {
-    --icon-size: 16;
-
-    position: relative;
-    height: 16px;
-    width: 16px;
-  }
-
-  .dismissButton {
-    @include button-reset;
-
-    position: relative;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 $spacing-xs;
-    margin-inline: -0.225rem -0.6625rem;
-    color: rgba($color-purple-800-rgb, 0.7);
-    cursor: pointer;
-
-    &:hover {
-      color: $color-purple-800;
-    }
-
-    &:active {
-      color: $color-purple-800;
-    }
-
-    svg {
-      position: relative;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible .iconWrapper {
-      color: $color-purple-800;
-
-      &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-radius: 50%;
-        border-width: $border-focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        border-color: $color-blue-500;
-        inset: calc(-1 * #{$focus-ring-offset});
-      }
-    }
-  }
-
-  .background {
-    // As our icons are only one-tone, this span places
-    // a white background under the dismissible icon to
-    // give the illusion of a background colour that is
-    // different to the rest of the tag
-    position: absolute;
-    display: inline-block;
-    width: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-    height: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-    background-color: white;
-    left: 10px;
-    top: 10px;
-  }
-
-  .truncate {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-  }
-
-  .inline {
-    margin: 0;
-  }
-
-  .medium {
-    height: $medium;
-  }
-
-  .small {
-    height: $small;
-  }
-
-  .default {
-    background-color: $color-gray-300;
-  }
-
-  .sentimentPositive {
-    background-color: $color-green-100;
-  }
-
-  .sentimentNeutral {
-    background-color: $color-gray-300;
-  }
-
-  .sentimentNegative {
-    background-color: $color-red-100;
-  }
-
-  .sentimentNone {
-    background-color: $color-white;
-    border-color: $color-gray-300;
-  }
-
-  .validationPositive {
-    background-color: $color-green-100;
-
-    .validationIcon {
-      color: $color-green-500;
-    }
-  }
-
-  .validationInformative {
-    background-color: $color-blue-100;
-
-    .validationIcon {
-      color: $color-blue-500;
-    }
-  }
-
-  .validationNegative {
-    background-color: $color-red-100;
-
-    .validationIcon {
-      color: $color-red-500;
-    }
-  }
-
-  .validationCautionary {
-    background-color: $color-yellow-100;
-
-    .validationIcon {
-      color: var(--color-yellow-700);
-    }
-  }
-
-  .statusLive {
-    background-color: $color-green-100;
-    color: $color-purple-800;
-  }
-
-  .statusAction {
-    background-color: $color-orange-100;
-    color: $color-purple-800;
-  }
-
-  .statusClosed {
-    background-color: $color-red-100;
-  }
-
-  .statusDraft {
-    background-color: $color-blue-100;
-    color: $color-purple-800;
-  }
-}