@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/Text.module-SXGFOHGJ.scss

@@ -0,0 +1,173 @@
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+
+.page-title,
+h1.default-style {
+  @include ca-type-inter-page-title;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.title,
+h2.default-style {
+  @include ca-type-inter-title;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.display,
+h3.default-style {
+  @include ca-type-inter-display;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.heading,
+h4.default-style,
+h5.default-style,
+h6.default-style {
+  @include ca-type-inter-heading;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.lede {
+  @include ca-type-inter-lede;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.paragraph,
+p.default-style {
+  @include ca-type-inter-body;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.body,
+.default-style {
+  @include ca-type-inter-body;
+  margin: 0;
+}
+
+.body-bold {
+  @include ca-type-inter-body-bold;
+  margin: 0;
+}
+
+.small {
+  @include ca-type-inter-small;
+  margin: 0;
+}
+
+.small-bold {
+  @include ca-type-inter-small-bold;
+  margin: 0;
+}
+
+.notification {
+  @include ca-type-inter-notification;
+  margin: 0;
+}
+
+.label {
+  @include ca-type-inter-label;
+  margin: 0;
+}
+
+.control-action {
+  @include ca-type-inter-control-action;
+  margin: 0;
+}
+
+.button {
+  @include ca-type-inter-button;
+  margin: 0;
+}
+
+// We double the class selector to increase specificity above rules like `h1.default-style`
+.inheritBaseline.inheritBaseline {
+  @include ca-inherit-baseline;
+}
+
+// Required for aligning text alongside other elements e.g. Button
+.inline.inline {
+  display: inline-flex;
+  margin-bottom: 0;
+}
+
+// Alias classes for Elm CSS modules
+.defaultStyle {
+  composes: default-style;
+}
+.pageTitle {
+  composes: page-title;
+}
+.bodyBold {
+  composes: body-bold;
+}
+.smallBold {
+  composes: small-bold;
+}
+.controlAction {
+  composes: control-action;
+}
+
+.zen-display-0 {
+  @include kz-typography-display-0;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-1 {
+  @include kz-typography-heading-1;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-2 {
+  @include kz-typography-heading-2;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-heading-3 {
+  @include kz-typography-heading-3;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-large {
+  @include kz-typography-data-large;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-large-units {
+  @include kz-typography-data-large-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-medium {
+  @include kz-typography-data-medium;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-medium-units {
+  @include kz-typography-data-medium-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-small {
+  @include kz-typography-data-small;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}
+
+.zen-data-small-units {
+  @include kz-typography-data-small-units;
+  margin-bottom: $ca-grid;
+  margin-top: 0;
+}

package/dist/iife/TextArea.module-JLTW3M73.scss

@@ -0,0 +1,138 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "../../variables";
+@import "../mixins";
+
+// Vars
+$input-disabled-opacity: 0.3;
+$input-disabled-border-alpha: 50%;
+
+.wrapper {
+  position: relative;
+}
+
+.textarea {
+  @include form-input-reset;
+  border-radius: $border-solid-border-radius;
+  width: 100%;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  padding: $spacing-sm;
+  color: $color-purple-800-rgb;
+  display: block;
+  resize: vertical;
+
+  @include form-input-placeholder {
+    line-height: 1.5;
+    color: $dt-color-form-text-color-placeholder;
+  }
+
+  &:disabled {
+    resize: none;
+  }
+}
+
+.textarea:focus + .focusRing {
+  $focus-ring-offset: 3px;
+  position: absolute;
+  background: transparent;
+  border-radius: $border-focus-ring-border-radius;
+  border-width: $border-focus-ring-border-width;
+  border-style: $border-focus-ring-border-style;
+  border-color: transparent;
+  top: -$focus-ring-offset;
+  left: -$focus-ring-offset;
+  right: -$focus-ring-offset;
+  bottom: -$focus-ring-offset;
+  pointer-events: none;
+}
+
+.textarea.default {
+  @include form-input-focus-state {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-500;
+  }
+
+  &:not(.error):not(.caution) {
+    &:disabled {
+      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    }
+  }
+
+  &.error {
+    border-color: $color-red-500;
+
+    @include form-input-focus-state {
+      border-color: $color-red-500;
+    }
+  }
+
+  &.caution {
+    border-color: $color-yellow-600;
+
+    @include form-input-focus-state {
+      border-color: $color-yellow-600;
+    }
+  }
+
+  &.disabled {
+    background-color: $color-white;
+    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
+    }
+  }
+}
+
+// Reversed (Dark Backgrounds)
+.textarea.reversed {
+  @include form-input-focus-state {
+    background: rgba($color-white-rgb, 0.1);
+    border-color: $color-white;
+  }
+
+  border-color: rgba($color-white-rgb, 0.65);
+  background: transparent;
+  color: $color-white;
+
+  @include form-input-placeholder {
+    line-height: 1.5;
+    color: $color-white;
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-300;
+  }
+
+  &.error {
+    border-color: $color-red-300;
+
+    @include form-input-focus-state {
+      border-color: $color-red-300;
+    }
+  }
+
+  &.caution {
+    border-color: $color-yellow-400;
+
+    @include form-input-focus-state {
+      border-color: $color-yellow-400;
+    }
+  }
+
+  &.disabled {
+    background: transparent;
+    border-color: rgba($color-white-rgb, $input-disabled-opacity);
+    color: rgba($color-white-rgb, $input-disabled-opacity);
+
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
+    }
+  }
+}

package/dist/iife/TextAreaField.module-4K35MSCT.scss

@@ -0,0 +1,20 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+
+$input-disabled-background: $color-gray-300;
+$input-disabled-opacity: 0.3;
+$input-disabled-border-alpha: 50%;
+
+.message {
+  &.disabled {
+    opacity: $input-disabled-opacity;
+  }
+}
+
+.textareaLabel {
+  margin-bottom: $spacing-xs;
+}
+
+.textareaLabelProminent {
+  margin-bottom: 0;
+}

package/dist/iife/TextField.module-KFAPVZZK.scss

@@ -0,0 +1,49 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/component-library/styles/animation";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "~@kaizen/deprecated-component-library-helpers/styles/type";
+@import "~@kaizen/deprecated-component-library-helpers/styles/color";
+@import "~@kaizen/component-library/styles/utils";
+@import "~@kaizen/component-library/styles/mixins/forms";
+
+@mixin input-icon($color, $reversed) {
+  color: $color;
+
+  .withReversed & {
+    color: $reversed;
+  }
+}
+
+$input-disabled-opacity: 0.3;
+
+///////////////////////////////////////////////////
+// VALIDATION STYLES
+///////////////////////////////////////////////////
+
+.success {
+  @include input-icon($color-green-500, $color-green-400);
+  @include ca-animation-fade(in);
+
+  &.disabled {
+    @include input-icon(
+      rgba($color-green-500-rgb, $input-disabled-opacity),
+      rgba($color-green-400-rgb, $input-disabled-opacity)
+    );
+  }
+}
+
+.error {
+  @include input-icon($color-red-100, $color-purple-700);
+  @include ca-animation-fade(in);
+}
+
+.caution {
+  @include input-icon($color-yellow-200, $color-purple-700);
+  @include ca-animation-fade(in);
+}
+
+.message {
+  &.disabled {
+    opacity: $input-disabled-opacity;
+  }
+}

package/dist/iife/TileGrid.module-NJQFVYRS.scss

@@ -0,0 +1,23 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/component-library/styles/responsive";
+@import "./variables";
+
+.grid {
+  display: grid;
+  // the more we shave off the width here,
+  // the less the tiles will grow when they lose one from the row
+  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
+  grid-gap: $spacing-md;
+
+  @include ca-media-mobile {
+    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(1, 100%);
+  }
+}

package/dist/iife/TimeField.module-B4WNYAUE.scss

@@ -0,0 +1,75 @@
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+$input-height: 48px;
+
+// Classnames to simulate pseudo states in storybook
+$story-className--timefield-hover: ":global(.story__timefield-hover)";
+$story-className--timefield-focus: ":global(.story__timefield-focus)";
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  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;
+  color: $color-purple-800;
+}
+
+.input {
+  display: inline-flex;
+  align-items: center;
+  background-color: $color-white;
+  background-clip: padding-box;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+  border-radius: $border-solid-border-radius;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  padding: 0 $spacing-sm;
+  height: $input-height;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:hover,
+  #{$story-className--timefield-hover} &,
+  &:focus-within,
+  #{$story-className--timefield-focus} & {
+    border-color: $color-gray-600;
+    background-color: $color-gray-200;
+  }
+}
+
+.input:focus-within,
+#{$story-className--timefield-focus} .input {
+  .focusRing {
+    $focus-ring-offset: 3px;
+    position: absolute;
+    background: transparent;
+    border-radius: $border-focus-ring-border-radius;
+    border-width: $border-focus-ring-border-width;
+    border-style: $border-focus-ring-border-style;
+    border-color: $color-blue-500;
+    top: -$focus-ring-offset;
+    left: -$focus-ring-offset;
+    right: -$focus-ring-offset;
+    bottom: -$focus-ring-offset;
+    pointer-events: none;
+  }
+}
+
+.isDisabled {
+  pointer-events: none;
+  background-color: transparent;
+  border-color: $color-gray-500;
+  opacity: 0.3;
+}
+
+.error {
+  border: $border-solid-border-width $border-solid-border-style $color-red-500;
+}

package/dist/iife/TimeSegment.module-TKOTKIXH.scss

@@ -0,0 +1,53 @@
+@import "~@kaizen/design-tokens/sass/color";
+
+$polyfill--focus-visible: ":global(.js-focus-visible) &:global(.focus-visible)";
+
+$className--timesegment-wrapper: ".timeSegmentWrapper";
+
+// Classnames to simulate pseudo states in storybook
+$story-className--timesegment-hover: ":global(.story__timefield-hover) #{$className--timesegment-wrapper}:first-child &";
+$story-className--timesegment-focus: ":global(.story__timefield-focus) #{$className--timesegment-wrapper}:first-child &";
+
+$selectors--timesegment-hover: "&:hover, #{$story-className--timesegment-hover}";
+$selectors--timesegment-focus: "&:focus-visible, #{$polyfill--focus-visible}, #{$story-className--timesegment-focus}";
+
+// Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+// This (in combination with the invisible character ​) creates boundaries
+// for the element.
+// https://stackoverflow.com/a/34445203
+#{$className--timesegment-wrapper} {
+  white-space: nowrap;
+}
+
+.timeSegment {
+  padding: 0 4px;
+  text-align: end;
+  background-color: $color-gray-300;
+  border-radius: 3px;
+  color: $color-purple-800;
+
+  #{$selectors--timesegment-hover} {
+    background-color: $color-white;
+  }
+
+  #{$selectors--timesegment-focus} {
+    color: white;
+    background: $color-blue-500;
+    outline: none;
+  }
+}
+
+.placeholder {
+  color: rgba($color-purple-800-rgb, 0.7);
+}
+
+.literal {
+  &,
+  #{$selectors--timesegment-hover} {
+    background: none;
+  }
+}
+
+.dayPeriod {
+  margin-right: 4px;
+}

package/dist/iife/TitleBlockMenuItem.module-LWVSMJTH.scss

@@ -0,0 +1,99 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+// We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
+.menuListItem {
+  display: flex;
+}
+.menuItem {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  background: none;
+  border: 2px transparent solid;
+  text-align: left;
+  padding: 6px calc(#{$spacing-sm} - 2px);
+  margin: 0 $spacing-xs;
+  min-height: calc(1.75 * #{$spacing-md});
+  border-radius: 4px;
+  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;
+  text-decoration: none;
+  color: $color-purple-800;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:not(.menuItem--disabled):hover,
+  &:focus {
+    background: $color-blue-100;
+    color: $color-blue-500;
+
+    .menuItem__Icon {
+      color: $color-blue-500;
+    }
+
+    &.menuItem--destructive {
+      background: $color-red-100;
+      color: $color-red-600;
+
+      .menuItem__Icon {
+        color: $color-red-600;
+      }
+    }
+  }
+
+  &:focus-visible,
+  &.focus-visible {
+    border-color: $color-blue-500;
+    outline: none;
+  }
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+}
+
+.menuItem--disabled {
+  color: rgba($color-purple-800-rgb, 0.3);
+  .menuItem__Icon {
+    color: rgba($color-purple-800-rgb, 0.3);
+  }
+}
+
+.menuItem--active {
+  color: $color-blue-500;
+  font-weight: $typography-paragraph-bold-font-weight;
+}
+
+.menuItem--destructive {
+  color: $color-red-600;
+  .menuItem__Icon {
+    color: $color-red-600;
+  }
+}
+
+.menuItem--destructive.menuItem--disabled {
+  color: rgba($color-red-600-rgb, 0.3);
+  .menuItem__Icon {
+    color: rgba($color-red-600-rgb, 0.3);
+  }
+}
+
+.menuItem__Label {
+  flex-grow: 1;
+}
+
+.menuItem__Icon {
+  margin-inline-end: calc(#{$spacing-md} / 3);
+  display: flex;
+  align-self: flex-start;
+  transform: translateY(0.2em);
+  color: rgba($color-purple-800-rgb, 0.75);
+}