@kaizen/components 1.4.20-canary.3469 → 1.4.21

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);
+}