chore(react): add hover and active style

pixiv · Dec 24, 2024 · 6e08538 · 6e08538
1 parent 4ad18ea
commit 6e08538
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/packages/react/src/components/SegmentedControl/index.css b/packages/react/src/components/SegmentedControl/index.css
@@ -22,18 +22,36 @@
   line-height: 22px;
 }
 
-.charcoal-segmented-control-radio__label[aria-disabled]:not(
-    [aria-disabled='false']
-  ) {
-  cursor: default;
-  opacity: 0.32;
+.charcoal-segmented-control-radio__label:not([aria-disabled='true']):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+.charcoal-segmented-control-radio__label:not([aria-disabled='true']):active {
+  background-color: var(--charcoal-surface3-press);
 }
 
 .charcoal-segmented-control-radio__label[data-checked='true'] {
   background-color: var(--charcoal-brand);
   color: var(--charcoal-text5);
 }
 
+.charcoal-segmented-control-radio__label:not(
+    [aria-disabled='true']
+  )[data-checked='true']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-segmented-control-radio__label:not(
+    [aria-disabled='true']
+  )[data-checked='true']:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-segmented-control-radio__label[aria-disabled]:not(
+    [aria-disabled='false']
+  ) {
+  cursor: default;
+  opacity: 0.32;
+}
+
 .charcoal-segmented-control-radio__input {
   position: absolute;