@kaizen/components 3.0.1 → 3.0.3

package/src/Radio/Radio/Radio.module.scss

@@ -1,81 +0,0 @@
-@import '~@kaizen/design-tokens/sass/border';
-@import '~@kaizen/design-tokens/sass/color';
-@import '../../../styles/utils/forms';
-@import '../../../styles/utils/form-variables';
-
-@layer kz-components {
-  $radio-size: 24px;
-  $icon-size: 10px;
-  $icon-offset: 5px;
-  $focus-ring-offset: 2px;
-
-  $dt-color-radio-background-color-hover: $color-gray-200;
-  $dt-color-radio-disc-color-base: $color-gray-600;
-  $dt-color-radio-border-color-focus: $color-blue-500;
-  $dt-color-radio-border-color-focus-reversed: $color-blue-300;
-
-  .radioInput {
-    @include form-input-visually-hidden;
-  }
-
-  .icon {
-    top: $icon-offset;
-    left: $icon-offset;
-    width: $icon-size;
-    height: $icon-size;
-    border-radius: 50%;
-    background: $dt-color-radio-disc-color-base;
-    position: absolute;
-
-    &.reversed {
-      background: $color-white;
-    }
-
-    @media (forced-colors: active) {
-      // High contrast mode with remove the background color so we have to use border to create the selected icon state.
-      // Transparent is used so the user defined colors for borders will be used here
-      border: $icon-offset solid transparent;
-      width: 0;
-      height: 0;
-    }
-  }
-
-  .box {
-    display: block;
-    position: relative;
-    background: $color-white;
-    height: $radio-size;
-    width: $radio-size;
-    top: 0;
-    border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
-    box-sizing: border-box;
-    border-radius: 50%;
-
-    .radioInput:focus:not([disabled]) + & {
-      border-color: $dt-color-radio-disc-color-base;
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-    }
-
-    .radioInput:not([disabled]) + &:hover {
-      border-color: $dt-color-form-border-color-hover;
-      background-color: $dt-color-radio-background-color-hover;
-    }
-
-    &.reversed {
-      border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
-      background: transparent;
-
-      .radioInput:focus:not([disabled]) + & {
-        border-color: $color-white;
-        outline-color: $dt-color-radio-border-color-focus-reversed;
-      }
-
-      .radioInput:not([disabled]) + &:hover {
-        border-color: $color-white;
-        background-color: transparent;
-      }
-    }
-  }
-}

package/src/Radio/RadioField/RadioField.module.scss

@@ -1,50 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '../../../styles/utils/form-variables';
-
-@layer kz-components {
-  $dt-color-radio-background-color-hover: $color-gray-200;
-
-  .container {
-    position: relative;
-    overflow-wrap: anywhere;
-    word-break: normal;
-    margin-bottom: $spacing-sm;
-
-    label {
-      -webkit-tap-highlight-color: transparent;
-
-      :global(.ideal-sans) & {
-        // This is to override bootstrap styles. Remove when appropriate
-        font-size: $typography-paragraph-body-font-size;
-        padding-top: 0;
-      }
-    }
-
-    &.selected {
-      label {
-        font-family: $typography-paragraph-body-font-family;
-        font-size: $typography-paragraph-body-font-size;
-        line-height: $typography-paragraph-body-line-height;
-        letter-spacing: $typography-paragraph-body-letter-spacing;
-        font-weight: $typography-paragraph-bold-font-weight;
-        position: static;
-      }
-    }
-
-    &:not(.reversed) label:hover {
-      input:not([disabled]) + span {
-        border-color: $dt-color-form-border-color-hover;
-        background-color: $dt-color-radio-background-color-hover;
-      }
-    }
-
-    &.reversed label:hover {
-      input:not([disabled]) + span {
-        border-color: $color-white;
-        background-color: transparent;
-      }
-    }
-  }
-}