@kaizen/components 2.3.7 → 2.5.0

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -1,366 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/animation';
-
-$border-width: var(--border-width-1);
-$notification-vertical-padding: calc(#{$spacing-6} - #{$border-width});
-$notification-fade-out: opacity 200ms ease;
-$notification-collapse-height:
-  margin-top 200ms ease,
-  margin-bottom 200ms ease;
-$notification-collapse-height-delayed:
-  margin-top 200ms ease 200ms,
-  margin-bottom 200ms ease;
-$notification-pop-up: transform 200ms ease-out;
-$notification-slide-right: transform 300ms ease-out;
-
-@layer kz-components {
-  %ca-notification {
-    display: flex;
-    box-sizing: border-box;
-    pointer-events: all;
-
-    &:focus {
-      outline-offset: 1px;
-      outline: 2px solid var(--color-blue-500);
-    }
-
-    // Variants
-    &%ca-notification---inline,
-    &%ca-notification---toast {
-      margin-bottom: $spacing-24;
-      border-width: $border-width;
-      border-style: solid;
-      border-radius: $border-solid-border-radius;
-    }
-
-    &%ca-notification---inline {
-      width: auto;
-      min-height: 46px;
-      padding: $notification-vertical-padding $spacing-12;
-      transition: $notification-fade-out, $notification-pop-up, $notification-collapse-height;
-    }
-
-    &%ca-notification---toast {
-      container-type: inline-size;
-      width: 25rem;
-      box-shadow: $shadow-small-box-shadow;
-      max-width: 100%;
-      padding: $notification-vertical-padding 10px;
-      transition:
-        $notification-fade-out, $notification-slide-right, $notification-collapse-height-delayed;
-      will-change: transform;
-    }
-
-    &%ca-notification---global {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      border-width: 0;
-      border-radius: 0;
-      margin-bottom: 0;
-      padding-top: var(--spacing-16);
-      padding-bottom: var(--spacing-16);
-      padding-inline-start: var(--spacing-8);
-      transition: $notification-collapse-height;
-      position: relative;
-      z-index: 1030;
-    }
-
-    // Types
-    &%ca-notification---positive {
-      background: $color-green-100;
-      border-color: var(--color-green-500);
-      color: $color-purple-800;
-    }
-
-    &%ca-notification---informative {
-      background: $color-blue-100;
-      border-color: var(--color-blue-400);
-      color: $color-purple-800;
-    }
-
-    &%ca-notification---cautionary {
-      background: $color-yellow-100;
-      border-color: var(--color-yellow-700);
-      color: $color-purple-800;
-    }
-
-    &%ca-notification---negative {
-      background: $color-red-100;
-      border-color: var(--color-red-500);
-      color: $color-purple-800;
-    }
-
-    // Hidden state
-    &%ca-notification---hidden {
-      opacity: 0%;
-
-      &%ca-notification---inline,
-      &%ca-notification---global {
-        margin-bottom: 0;
-      }
-
-      &%ca-notification---inline {
-        // When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
-        // We want it moving the fastest when it is the furthest off screen.
-        transition-timing-function: ease-in;
-        transform: translateY(-50%);
-      }
-
-      &%ca-notification---toast {
-        // When entering we use "ease-out", but when transitioning to hidden we want to use "ease-in".
-        // We want it moving the fastest when it is the furthest off screen.
-        transition-timing-function: ease-in;
-        transform: translateX(50%);
-      }
-
-      &%ca-notification---global {
-        z-index: 1029;
-        opacity: 100%;
-      }
-    }
-
-    // Modifiers
-    &%ca-notification---noBottomMargin {
-      margin-bottom: 0;
-    }
-
-    &%ca-notification---persistent {
-      transition: none;
-    }
-
-    // this is only for inline notifications
-    &%ca-notification---subtle {
-      background: none;
-      border: none;
-      padding: 0;
-    }
-  }
-
-  %ca-notification__icon {
-    align-items: flex-start;
-    box-sizing: content-box;
-
-    %ca-notification---positive & {
-      color: $color-green-500;
-    }
-
-    %ca-notification---informative & {
-      color: $color-blue-500;
-    }
-
-    %ca-notification---cautionary & {
-      color: var(--color-yellow-700);
-    }
-
-    %ca-notification---negative & {
-      color: $color-red-500;
-    }
-
-    %ca-notification---inline &,
-    %ca-notification---toast & {
-      width: 22px;
-      height: 22px;
-      font-size: 22px;
-      margin-top: $spacing-6;
-    }
-
-    %ca-notification---global & {
-      width: 24px;
-      height: 24px;
-      font-size: 24px;
-    }
-  }
-
-  %ca-notification__text-container {
-    box-sizing: content-box;
-    display: flex;
-    flex-flow: row wrap;
-    flex: 1 0 0;
-
-    %ca-notification---inline &,
-    %ca-notification---toast & {
-      margin-inline-start: $spacing-6;
-    }
-
-    %ca-notification---toast & {
-      margin-inline-start: $spacing-6;
-      max-width: calc(100% - #{$spacing-48});
-      overflow-wrap: break-word;
-      hyphens: auto;
-    }
-
-    %ca-notification---global & {
-      margin-inline-start: var(--spacing-8);
-    }
-
-    %ca-notification---inline & {
-      // Inline notifications often fade onto a white background.
-      // Fading the higher-contrast text out at, as well as the whole container, makes for a smoother animation.
-      transition: $notification-fade-out;
-    }
-
-    &%ca-notification---forceMultiline {
-      flex-direction: column;
-    }
-  }
-
-  %ca-notification__title {
-    position: relative;
-    font-family: $typography-heading-6-font-family;
-    font-weight: $typography-heading-6-font-weight;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-    margin: 0;
-    padding-right: 6px;
-    // overriding Bootstrap style that changes h6s to text-transform: uppercase
-    text-transform: none;
-    color: inherit;
-    top: 0.37em;
-  }
-
-  %ca-notification__text {
-    position: relative;
-    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;
-    margin: 0;
-    color: inherit;
-
-    %ca-notification---inline &,
-    %ca-notification---toast & {
-      position: relative;
-      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;
-      // When the title and text are on different lines this ensures the baselines of the first lines are exactly 1 grid unit apart.
-      // When they are both on a single line it ensures both are 1 grid unit tall.
-      margin-top: $spacing-6;
-      flex: 0 1 auto;
-      padding-bottom: $spacing-12;
-      top: 0.21em;
-    }
-    %ca-notification---toast & {
-      width: 100%;
-    }
-
-    %ca-notification---global & {
-      // Inherit baseline because the parent selector doesn't.
-      position: static;
-      font-weight: $typography-paragraph-body-font-weight;
-      font-size: $typography-paragraph-body-font-size;
-      line-height: $typography-paragraph-body-line-height;
-      letter-spacing: $typography-paragraph-body-letter-spacing;
-    }
-
-    a[href]:not([data-rac]) {
-      border-bottom: var(--spacing-1) solid $color-blue-500;
-      text-decoration: none;
-      color: $color-blue-500;
-
-      &:hover {
-        text-decoration: none;
-        color: $color-blue-600;
-        border-bottom: var(--spacing-1) solid $color-blue-600;
-      }
-    }
-
-    strong {
-      font-weight: $typography-button-secondary-font-weight;
-    }
-
-    p {
-      font-weight: inherit;
-    }
-  }
-
-  %ca-notification__cancel {
-    cursor: pointer;
-    appearance: none;
-    transition: none;
-    transform: none;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    font: inherit;
-    color: $color-purple-800;
-
-    .icon {
-      opacity: 70%;
-      transition: $animation-duration-fast opacity;
-    }
-
-    &:disabled,
-    &.disabled {
-      .icon {
-        opacity: 30%;
-      }
-    }
-
-    &:not(:disabled, .disabled) {
-      &:hover,
-      &:focus,
-      &.hover {
-        .icon {
-          opacity: 100%;
-        }
-      }
-
-      &:active,
-      &.active {
-        .icon {
-          opacity: 100%;
-        }
-      }
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-
-    // The negative margins below are so that our clickable area will overlap the notification padding
-    %ca-notification---inline &,
-    %ca-notification---toast & {
-      width: var(--spacing-48);
-      height: var(--spacing-48);
-      margin-top: calc(-1 * var(--spacing-6));
-      margin-bottom: calc(-1 * var(--spacing-6));
-    }
-
-    %ca-notification---inline & {
-      margin-inline-end: calc(-1 * var(--spacing-12));
-    }
-
-    %ca-notification---toast & {
-      margin-inline-end: -10px;
-    }
-
-    %ca-notification---global & {
-      width: var(--spacing-48);
-      height: var(--spacing-48);
-      margin-top: calc(-1 * var(--spacing-24));
-      margin-bottom: calc(-1 * var(--spacing-24));
-    }
-  }
-
-  %ca-notification__cancel__label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: rect(0 0 0 0);
-    border: 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;
-  }
-}

package/src/Text/Text.module.scss

@@ -1,74 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/typography';
-
-@layer kz-components {
-  .text {
-    --icon-vertical-align: text-bottom;
-
-    margin: 0;
-
-    strong {
-      font-weight: $typography-paragraph-bold-font-weight;
-    }
-  }
-
-  .intro-lede {
-    font-family: $typography-paragraph-intro-lede-font-family;
-    font-weight: $typography-paragraph-intro-lede-font-weight;
-    font-size: $typography-paragraph-intro-lede-font-size;
-    line-height: $typography-paragraph-intro-lede-line-height;
-    letter-spacing: $typography-paragraph-intro-lede-letter-spacing;
-  }
-
-  .body {
-    font-family: $typography-paragraph-body-font-family;
-    font-weight: $typography-paragraph-body-font-weight;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-  }
-
-  .small {
-    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;
-  }
-
-  .extra-small {
-    font-family: $typography-paragraph-extra-small-font-family;
-    font-weight: $typography-paragraph-extra-small-font-weight;
-    font-size: $typography-paragraph-extra-small-font-size;
-    line-height: $typography-paragraph-extra-small-line-height;
-    letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  }
-
-  .dark {
-    color: $color-purple-800;
-    opacity: 100%;
-  }
-
-  .dark-reduced-opacity {
-    color: $color-purple-800;
-    opacity: 70%;
-  }
-
-  .white {
-    color: $color-white;
-    opacity: 100%;
-  }
-
-  .white-reduced-opacity {
-    color: $color-white;
-    opacity: 80%;
-  }
-
-  .positive {
-    color: $color-green-600;
-  }
-
-  .negative {
-    color: $color-red-600;
-  }
-}