@kaizen/components 0.0.0-canary-package-bundler-v2-20241113055116 → 0.0.0-canary-link-button-wip-canary-20241121010628

package/src/GuidanceBlock/{GuidanceBlock.module.scss → GuidanceBlock.module.css}

@@ -1,27 +1,5 @@
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/layout";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/animation";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../../styles/utils/responsive";
-@import "../../styles/utils/button-reset";
-
-@mixin guidance-block-under-480 {
-  @media (max-width: 480px) {
-    @content;
-  }
-}
-
-$bannerPadding: $spacing-lg;
-$ca-banner-fade-out: opacity $animation-duration-slow ease;
-$ca-banner-collapse-height-delayed: margin-top $animation-duration-fast
-  $animation-duration-slow ease;
-$illustration-size: 155px;
-$scene-illustration-size: 300px;
-
 .rightMargin {
-  margin-right: $spacing-8;
+  margin-right: var(--spacing-8);
 }
 
 .noRightMargin {
@@ -34,30 +12,34 @@ $scene-illustration-size: 300px;
 
 .banner {
   --border-width: var(--border-width-1);
+  --banner-padding: var(--spacing-lg);
 
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: 320px;
-  max-width: $layout-breakpoints-large;
+  max-width: var(--layout-breakpoints-large);
   border: var(--border-width) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
-  padding: calc(#{$bannerPadding} - var(--border-width));
-  box-shadow: $shadow-small-box-shadow;
+  border-radius: var(--border-solid-border-radius);
+  padding: calc(var(--banner-padding) - var(--border-width));
+  box-shadow: var(--shadow-small-box-shadow);
   position: relative;
   top: -1px;
-  transition: $ca-banner-fade-out, $ca-banner-collapse-height-delayed;
-  color: $color-purple-800;
-
-  @include ca-media-desktop {
-    min-height: calc(12rem - calc(#{$bannerPadding} * 2));
+  transition:
+    opacity var(--animation-duration-slow) ease,
+    margin-top var(--animation-duration-fast) var(--animation-duration-slow)
+      ease;
+  color: var(--color-purple-800);
+
+  @media (width >= 1024px) {
+    min-height: calc(12rem - calc(var(--banner-padding) * 2));
     flex-direction: row;
-    gap: $spacing-md;
+    gap: var(--spacing-24);
     width: auto;
     align-items: center;
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     min-width: unset;
   }
 }
@@ -65,29 +47,32 @@ $scene-illustration-size: 300px;
 .illustrationWrapper {
   display: flex;
 
-  @include ca-media-tablet {
+  @media (768px <= width <= 1023px) {
     text-align: center;
     justify-content: center;
     align-self: center;
-    padding: $spacing-sm;
+    padding: var(--spacing-12);
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     display: none;
   }
 }
 
 .illustration {
-  width: $illustration-size;
-  height: $illustration-size;
+  --illustration-size: 155px;
+  --scene-illustration-size: 300px;
+
+  width: var(--illustration-size);
+  height: var(--illustration-size);
 
-  // This has been created to handle scene illustrations consistently until the tile component is created
+  /* This has been created to handle scene illustrations consistently until the tile component is created */
   .hasSceneIllustration & {
     display: flex;
     justify-content: center;
-    max-width: $scene-illustration-size;
-    max-height: $scene-illustration-size;
-    width: $scene-illustration-size;
+    max-width: var(--scene-illustration-size);
+    max-height: var(--scene-illustration-size);
+    width: var(--scene-illustration-size);
     height: auto;
 
     figure {
@@ -110,19 +95,19 @@ $scene-illustration-size: 300px;
   align-self: center;
   max-width: 780px;
 
-  @include ca-media-desktop {
-    padding: 0 $spacing-sm;
+  @media (width >= 1024px) {
+    padding: 0 var(--spacing-12);
     text-align: left;
   }
 
-  @include ca-media-mobile {
-    margin: $spacing-sm;
+  @media (width <= 767px) {
+    margin: var(--spacing-12);
     max-width: 100%;
   }
 
   [dir="rtl"] & {
-    @include ca-media-desktop {
-      padding: 0 $spacing-sm;
+    @media (width >= 1024px) {
+      padding: 0 var(--spacing-12);
       text-align: right;
     }
   }
@@ -133,9 +118,9 @@ $scene-illustration-size: 300px;
   flex: 1;
   align-items: center;
   justify-content: space-between;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: column;
     width: 100%;
     align-items: unset;
@@ -147,17 +132,17 @@ $scene-illustration-size: 300px;
   flex: 1 0 auto;
   justify-content: center;
   flex-direction: row-reverse;
-  gap: $spacing-sm;
+  gap: var(--spacing-12);
   min-width: max-content;
 
-  @include ca-media-tablet-and-up {
+  @media (width >= 768px) {
     text-align: center;
   }
 
-  @include ca-media-mobile {
+  @media (width <= 767px) {
     flex-direction: column;
     width: 100%;
-    margin-top: $spacing-xs;
+    margin-top: var(--spacing-6);
   }
 
   [dir="rtl"] & svg {
@@ -166,51 +151,12 @@ $scene-illustration-size: 300px;
 }
 
 .hidden {
-  opacity: 0%;
+  opacity: 0;
   margin-bottom: 0;
 }
 
 .headingWrapper {
-  margin-bottom: $spacing-md;
-}
-
-.cancel {
-  @include button-reset;
-
-  cursor: pointer;
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  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%;
-      }
-    }
-  }
+  margin-bottom: var(--spacing-24);
 }
 
 .default {
@@ -220,54 +166,54 @@ $scene-illustration-size: 300px;
 
 .positive {
   border-color: var(--color-green-500);
-  background: $color-green-100;
+  background: var(--color-green-100);
 }
 
 .negative,
 .assertive {
   border-color: var(--color-red-500);
-  background: $color-red-100;
+  background: var(--color-red-100);
 }
 
 .informative {
   border-color: var(--color-blue-400);
-  background: $color-blue-100;
+  background: var(--color-blue-100);
 }
 
 .cautionary {
   border-color: var(--color-yellow-700);
-  background: $color-yellow-100;
+  background: var(--color-yellow-100);
 }
 
 .prominent {
   border-color: var(--color-purple-400);
-  background: $color-purple-100;
+  background: var(--color-purple-100);
 }
 
 .inline,
 .stacked {
   flex-flow: row wrap;
   align-items: unset;
-  gap: $spacing-md;
+  gap: var(--spacing-24);
   min-width: unset;
 
-  @include ca-media-tablet-and-under {
+  @media (width <= 1023px) {
     flex-direction: unset;
   }
 
   .illustrationWrapper {
-    margin-right: $spacing-sm;
+    margin-right: var(--spacing-12);
 
     [dir="rtl"] & {
-      margin-left: $spacing-sm;
+      margin-left: var(--spacing-12);
       margin-right: inherit;
     }
 
-    @include ca-media-tablet {
+    @media (768px <= width <= 1023px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       display: flex;
     }
   }
@@ -281,36 +227,36 @@ $scene-illustration-size: 300px;
     max-width: unset;
     min-width: 320px;
 
-    @include ca-media-desktop {
+    @media (width >= 1024px) {
       padding: 0;
     }
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       margin: 0;
     }
 
     [dir="rtl"] & {
       text-align: right;
 
-      @include ca-media-desktop {
+      @media (width >= 1024px) {
         padding: 0;
       }
     }
   }
 
   .buttonContainer {
-    padding-left: $spacing-sm;
+    padding-left: var(--spacing-12);
     justify-content: flex-start;
     width: unset;
     min-width: unset;
 
-    @include ca-media-mobile {
+    @media (width <= 767px) {
       flex-direction: row-reverse;
     }
 
     [dir="rtl"] & {
       padding-left: 0;
-      padding-right: $spacing-sm;
+      padding-right: var(--spacing-12);
     }
 
     > * {

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -8,7 +8,7 @@ import { Button, ButtonProps } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
-import styles from "./GuidanceBlock.module.scss"
+import styles from "./GuidanceBlock.module.css"
 
 export type ActionProps = ButtonProps & {
   tooltip?: TooltipProps

package/src/__actions__/Button/v3/Button.module.css

@@ -0,0 +1,235 @@
+.button {
+  /* RESET */
+  appearance: none;
+  background: transparent;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --button-min-x-y: var(--spacing-40);
+  --button-border-width: var(--border-solid-border-width);
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
+
+  background-color: var(--button-bg-color, var(--color-blue-500));
+  border: var(--button-border-width) solid;
+  border-radius: var(--border-solid-border-radius);
+  border-color: var(--button-border-color, var(--color-blue-500));
+  box-sizing: border-box;
+  color: var(--button-text-color, var(--color-white));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: start;
+  font-family: var(
+    --button-font-family,
+    var(--typography-paragraph-body-font-family)
+  );
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, 1rem);
+  line-height: var(--button-line-height, 1.5rem);
+  min-height: var(--button-min-x-y);
+  min-width: var(--button-min-x-y);
+  position: relative;
+  padding: var(--button-padding-y) var(--button-padding-x);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-blue-600);
+    --button-border-color: var(--color-blue-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[data-focus-visible]::after {
+    content: "";
+    position: absolute;
+    background: transparent;
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+    border-width: var(--border-focus-ring-border-width);
+    border-style: var(--border-focus-ring-border-style);
+    inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.small {
+  --button-font-size: 0.75rem;
+  --button-line-height: 1rem;
+  --button-min-x-y: var(--spacing-32);
+  --icon-size: 16;
+}
+
+.medium {
+  --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-40);
+  --icon-size: 24;
+}
+
+.large {
+  --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-48);
+  --icon-size: 24;
+}
+
+.smallIconButton,
+.mediumIconButton {
+  --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+}
+
+.largeIconButton {
+  --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+}
+
+.secondary {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-gray-500);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+}
+
+.tertiary {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+}
+
+.primaryReversed,
+.secondaryReversed,
+.tertiaryReversed {
+  &[data-focus-visible]::after {
+    border-color: var(--color-blue-300);
+  }
+}
+
+.primaryReversed {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.secondaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.tertiaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+}
+
+.isDisabled {
+  --button-bg-color: var(--color-gray-400);
+  --button-border-color: var(--color-gray-400);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+  }
+}
+
+.hideContentWidth {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+}
+
+.retainContentWidth {
+  visibility: hidden;
+}