@kaizen/components 1.4.20-canary.3469 → 1.4.21

package/dist/iife/ToggleIconButton.module-COM67MDC.scss

@@ -0,0 +1,132 @@
+@import "@kaizen/design-tokens/sass/animation";
+@import "@kaizen/design-tokens/sass/border";
+@import "@kaizen/design-tokens/sass/color";
+
+.button {
+  border: none;
+  background-color: $color-white;
+  width: 3rem;
+  height: 3rem;
+  border-radius: $border-solid-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: background-color $animation-duration-immediate;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:global(.focus-visible)::after,
+  &:focus-visible:after {
+    $focus-ring-offset: 3px;
+    content: "";
+    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: calc(-1 * #{$focus-ring-offset});
+    left: calc(-1 * #{$focus-ring-offset});
+    right: calc(-1 * #{$focus-ring-offset});
+    bottom: calc(-1 * #{$focus-ring-offset});
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    &:global(.focus-visible)::after,
+    &:focus-visible:after {
+      color: rgba($color-purple-800-rgb, 0.3);
+      outline-offset: -2px;
+      background-color: transparent;
+      border-color: transparent;
+      opacity: 1;
+      outline-style: $border-dashed-border-style;
+      outline-width: $border-focus-ring-border-width;
+      outline-color: $color-purple-800;
+    }
+  }
+}
+
+.default {
+  background-color: $color-white;
+  color: $color-purple-800;
+
+  &:not(.disabled) {
+    &:hover:not(.active),
+    &:global(.focus-visible):not(.active) {
+      background-color: $color-gray-200;
+    }
+
+    &.active {
+      background-color: $color-gray-300;
+      color: $color-purple-800;
+    }
+  }
+}
+
+.secondary {
+  background-color: $color-white;
+  color: $color-blue-500;
+
+  &:not(.disabled) {
+    &:hover:not(.active),
+    &:global(.focus-visible):not(.active) {
+      background-color: $color-blue-100;
+    }
+
+    &.active {
+      background-color: $color-blue-200;
+    }
+  }
+}
+
+.primary {
+  background-color: $color-blue-500;
+  color: $color-white;
+
+  &:not(.disabled) {
+    &:hover:not(.active),
+    &:global(.focus-visible):not(.active) {
+      background-color: $color-blue-600;
+    }
+
+    &.active {
+      background-color: $color-blue-700;
+    }
+  }
+}
+
+.destructive {
+  background-color: $color-red-500;
+  color: $color-white;
+
+  &:not(.disabled) {
+    &:hover:not(.active),
+    &:global(.focus-visible):not(.active) {
+      background-color: $color-red-600;
+    }
+
+    &.active {
+      background-color: $color-red-700;
+    }
+  }
+}
+
+.secondary-destructive {
+  background-color: $color-white;
+  color: $color-red-600;
+
+  &:not(.disabled) {
+    &:hover:not(.active),
+    &:global(.focus-visible):not(.active) {
+      background-color: $color-red-100;
+    }
+
+    &.active {
+      background-color: $color-red-200;
+    }
+  }
+}

package/dist/iife/Toolbar.module-3BZYZE6H.scss

@@ -0,0 +1,44 @@
+@import "~@kaizen/component-library/styles/grid";
+@import "~@kaizen/deprecated-component-library-helpers/styles/layout";
+@import "./mixins";
+
+.toolbar {
+  display: flex;
+  align-items: center;
+
+  .toolbarItem {
+    margin: 0 ($ca-grid / 4);
+
+    @include title-block-under-1024 {
+      margin: 0 ($ca-grid / 8);
+    }
+
+    &.noGap {
+      margin: 0;
+    }
+  }
+
+  .toolbarItem:first-of-type {
+    @include ca-margin($start: 0, $end: $ca-grid / 4);
+
+    @include title-block-under-1024 {
+      @include ca-margin($start: 0, $end: $ca-grid / 8);
+    }
+
+    &.noGap {
+      margin: 0;
+    }
+  }
+
+  .toolbarItem:last-of-type {
+    @include ca-margin($start: $ca-grid / 4, $end: 0);
+
+    @include title-block-under-1024 {
+      @include ca-margin($start: $ca-grid / 8, $end: 0);
+    }
+
+    &.noGap {
+      margin: 0;
+    }
+  }
+}

package/dist/iife/Toolbar.module-BP3GTBGW.scss

@@ -0,0 +1,6 @@
+@import "@kaizen/design-tokens/sass/color";
+
+.toolbar {
+  display: block;
+  border-bottom: 2px solid $color-gray-500;
+}

package/dist/iife/ToolbarSection.module-LZTHWGO7.scss

@@ -0,0 +1,15 @@
+@import "@kaizen/design-tokens/sass/color";
+@import "@kaizen/design-tokens/sass/spacing";
+
+.toolbarSection {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  margin: $spacing-xs 0;
+  padding: 0 $spacing-xs;
+  flex-wrap: wrap;
+}
+
+.toolbarSection + .toolbarSection {
+  border-inline-start: 1px solid rgba($color-gray-600-rgb, 0.1);
+}

package/dist/iife/Well.module-4TIRC3HQ.scss

@@ -0,0 +1,73 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.container {
+  border-radius: $border-solid-border-radius;
+  margin-bottom: $spacing-md;
+}
+
+.noMargin {
+  margin: 0;
+}
+
+// Background Style Variations
+
+.positive {
+  background: $color-green-100;
+  border-color: $color-green-300;
+  color: $color-purple-800;
+}
+
+.negative {
+  background: $color-red-100;
+  border-color: $color-red-300;
+  color: $color-purple-800;
+}
+
+.informative {
+  background: $color-blue-100;
+  border-color: $color-blue-300;
+  color: $color-purple-800;
+}
+
+.cautionary {
+  background: $color-yellow-100;
+  border-color: $color-yellow-400;
+  color: $color-purple-800;
+}
+
+.assertive {
+  background: $color-orange-100;
+  border-color: $color-orange-300;
+  color: $color-purple-800;
+}
+
+.prominent {
+  background: $color-purple-100;
+  border-color: $color-purple-300;
+  color: $color-purple-800;
+}
+
+.default {
+  background-color: $color-gray-300;
+  border-color: rgba($color-gray-600-rgb, 0.1);
+}
+
+// Border Style Variations
+
+.solid {
+  border-style: $border-solid-border-style;
+  border-width: $border-solid-border-width;
+}
+
+.dashed {
+  border-style: $border-dashed-border-style;
+  border-width: $border-dashed-border-width;
+}
+
+.none {
+  border-color: $border-borderless-border-color;
+  border-style: $border-borderless-border-style;
+  border-width: $border-borderless-border-width;
+}