@kaizen/components 1.47.5 → 1.47.6

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.module.scss

@@ -30,36 +30,20 @@
     border-color: $color-blue-500;
     inset: calc(-1 * #{$focus-ring-offset});
   }
-
-  &.disabled {
-    opacity: 30%;
-
-    &:focus-visible::after {
-      color: rgba($color-purple-800-rgb, 0.3);
-      outline-offset: -2px;
-      background-color: transparent;
-      border-color: transparent;
-      opacity: 100%;
-      outline: $color-purple-800 $border-dashed-border-style
-        $border-focus-ring-border-width;
-    }
-  }
 }
 
 .default {
   background-color: $color-white;
   color: $color-purple-800;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-gray-200;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-gray-200;
+  }
 
-    &.active {
-      background-color: $color-gray-300;
-      color: $color-purple-800;
-    }
+  &.active {
+    background-color: $color-gray-300;
+    color: $color-purple-800;
   }
 }
 
@@ -67,15 +51,13 @@
   background-color: $color-white;
   color: $color-blue-500;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-blue-100;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-100;
+  }
 
-    &.active {
-      background-color: $color-blue-200;
-    }
+  &.active {
+    background-color: $color-blue-200;
   }
 }
 
@@ -83,15 +65,13 @@
   background-color: $color-blue-500;
   color: $color-white;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-blue-600;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-600;
+  }
 
-    &.active {
-      background-color: $color-blue-700;
-    }
+  &.active {
+    background-color: $color-blue-700;
   }
 }
 
@@ -99,15 +79,13 @@
   background-color: $color-red-500;
   color: $color-white;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-red-600;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-600;
+  }
 
-    &.active {
-      background-color: $color-red-700;
-    }
+  &.active {
+    background-color: $color-red-700;
   }
 }
 
@@ -115,14 +93,27 @@
   background-color: $color-white;
   color: $color-red-600;
 
-  &:not(.disabled) {
-    &:hover:not(.active),
-    &:focus-visible:not(.active) {
-      background-color: $color-red-100;
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-red-100;
+  }
+
+  &.active {
+    background-color: $color-red-200;
+  }
+}
+
+.disabled {
+  opacity: 30%;
+  pointer-events: none;
 
-    &.active {
-      background-color: $color-red-200;
-    }
+  &:focus-visible::after {
+    color: rgba($color-purple-800-rgb, 0.3);
+    outline-offset: -2px;
+    background-color: transparent;
+    border-color: transparent;
+    opacity: 100%;
+    outline: $color-purple-800 $border-dashed-border-style
+      $border-focus-ring-border-width;
   }
 }

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -52,6 +52,13 @@ const ToggleIconButtonGroup = ({
       {...props}
       disabled
     />
+    <ToggleIconButton
+      label="bold"
+      icon={<BoldIcon role="presentation" />}
+      {...props}
+      disabled
+      data-sb-pseudo-styles="focus"
+    />
   </StickerSheet.Row>
 )
 
@@ -59,7 +66,14 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
+        headings={[
+          "Default",
+          "Hover",
+          "Active",
+          "Focus",
+          "Disabled",
+          "Disabled (Focus)",
+        ]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss

@@ -32,7 +32,8 @@
 }
 
 .literal {
-  &,
+  background: none;
+
   &:hover {
     background: none;
   }

package/src/TitleBlockZen/subcomponents/NavigationTabs.module.scss

@@ -104,7 +104,7 @@
         $border-focus-ring-border-radius;
       border-width: $border-focus-ring-border-width;
       border-style: $border-focus-ring-border-style;
-      inset: 0 $focus-ring-offset $active-tab-marker-height $focus-ring-offset;
+      inset: 0 $focus-ring-offset $active-tab-marker-height;
 
       @include title-block-medium-and-small {
         border-radius: $border-focus-ring-border-radius