From 4e131515539b8447e62c319d05531edd8d4ef198 Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Wed, 29 Nov 2023 04:30:28 +0900
Subject: [PATCH 1/2] chore(react): remove styled from IconButton component

---
 .../__snapshots__/index.story.storyshot       | 16 +++---
 .../__snapshots__/index.story.storyshot       | 32 ++++++------
 .../react/src/components/IconButton/index.tsx | 52 +++++++++++++++----
 .../__snapshots__/TextField.story.storyshot   | 16 +++---
 4 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index ccd0f1176..94fd3dc7a 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -561,37 +561,37 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 }
 
 .c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled=false] {
+.c12:hover[aria-disabled='false'] {
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled=false] {
+.c12:active[aria-disabled='false'] {
   background-color: var(--charcoal-transparent-press);
 }
 
 .c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
+.c12[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled=false]:focus,
+.c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.c12[aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled=false]:focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible),
 .c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled=false]:active:not(:focus-visible) {
+.c12[aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled=false]:focus-visible {
+.c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index b023d9530..b488f76e1 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -64,37 +64,37 @@ exports[`Storyshots IconButton Default M 1`] = `
 }
 
 .c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:hover[aria-disabled='false'] {
   background-color: var(--charcoal-transparent-hover);
 }
 
 .c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:active[aria-disabled='false'] {
   background-color: var(--charcoal-transparent-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
+.c1[aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible),
 .c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
+.c1[aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -180,37 +180,37 @@ exports[`Storyshots IconButton Overlay M 1`] = `
 }
 
 .c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled=false] {
+.c1:hover[aria-disabled='false'] {
   background-color: var(--charcoal-surface4-hover);
 }
 
 .c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled=false] {
+.c1:active[aria-disabled='false'] {
   background-color: var(--charcoal-surface4-press);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
+.c1[aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible),
 .c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
+.c1[aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index 5fa649f50..d4bb95765 100644
--- a/packages/react/src/components/IconButton/index.tsx
+++ b/packages/react/src/components/IconButton/index.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react'
 import styled from 'styled-components'
-import { theme } from '../../styled'
 import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
 import type { KnownIconType } from '@charcoal-ui/icons'
 
@@ -42,15 +41,50 @@ const StyledIconButton = styled(Clickable).attrs<
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(${({ font }) => `--charcoal-${font}`});
+  background-color: var(${({ background }) => `--charcoal-${background}`});
+  border-radius: 999999px;
+  transition: 0.2s background-color, 0.2s box-shadow;
 
-  ${({ font, background }) =>
-    theme((o) => [
-      o.font[font],
-      o.bg[background].hover.press,
-      o.disabled,
-      o.borderRadius('oval'),
-      o.outline.default.focus,
-    ])}
+  &:hover:not(:disabled):not([aria-disabled]),
+  &:hover[aria-disabled='false'] {
+    background-color: var(
+      ${({ background }) => `--charcoal-${background}-hover`}
+    );
+  }
+
+  &:active:not(:disabled):not([aria-disabled]),
+  &:active[aria-disabled='false'] {
+    background-color: var(
+      ${({ background }) => `--charcoal-${background}-press`}
+    );
+  }
+
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
+
+  &:not(:disabled):not([aria-disabled]):focus,
+  &[aria-disabled='false']:focus,
+  &:not(:disabled):not([aria-disabled]):active,
+  &[aria-disabled='false']:active {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
+  &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+  &[aria-disabled='false']:focus:not(:focus-visible),
+  &:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+  &[aria-disabled='false']:active:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:not(:disabled):not([aria-disabled]):focus-visible,
+  &[aria-disabled='false']:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 `
 
 function styledProps(props: Required<StyledProps>) {
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
index 786f4474e..c52994e91 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
@@ -1371,37 +1371,37 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
 }
 
 .c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled=false] {
+.c12:hover[aria-disabled='false'] {
   background-color: var(--charcoal-surface4-hover);
 }
 
 .c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled=false] {
+.c12:active[aria-disabled='false'] {
   background-color: var(--charcoal-surface4-press);
 }
 
 .c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
+.c12[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled=false]:focus,
+.c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.c12[aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled=false]:focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible),
 .c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled=false]:active:not(:focus-visible) {
+.c12[aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled=false]:focus-visible {
+.c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }

From bf05eb33c38b440f64fe410d2f7557619106798f Mon Sep 17 00:00:00 2001
From: naporin0624 <naporin0624@gmail.com>
Date: Wed, 29 Nov 2023 04:35:12 +0900
Subject: [PATCH 2/2] refactor(react): refactor css

---
 .../__snapshots__/index.story.storyshot       | 35 ++++------
 .../__snapshots__/index.story.storyshot       | 70 +++++++------------
 .../react/src/components/IconButton/index.tsx | 51 +++++---------
 .../__snapshots__/TextField.story.storyshot   | 35 ++++------
 4 files changed, 66 insertions(+), 125 deletions(-)

diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index 94fd3dc7a..59ec8e419 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -560,42 +560,31 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-transparent-hover);
+.c12:not(:disabled):not([aria-disabled]):hover,
+.c12[aria-disabled='false']:hover {
+  background-color: var( --charcoal-transparent-hover );
 }
 
-.c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled='false'] {
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
+.c12:not(:disabled):not([aria-disabled]):active,
+.c12[aria-disabled='false']:active {
+  background-color: var( --charcoal-transparent-press );
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
 .c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled='false']:focus:not(:focus-visible),
-.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c12[aria-disabled='false']:active,
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c1 {
   margin: auto;
   position: relative;
diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index b488f76e1..532947362 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -63,42 +63,31 @@ exports[`Storyshots IconButton Default M 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-transparent-hover);
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  background-color: var( --charcoal-transparent-hover );
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled='false'] {
-  background-color: var(--charcoal-transparent-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var( --charcoal-transparent-press );
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
 .c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 <div
   data-dark={false}
 >
@@ -179,42 +168,31 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c1:hover:not(:disabled):not([aria-disabled]),
-.c1:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-surface4-hover);
+.c1:not(:disabled):not([aria-disabled]):hover,
+.c1[aria-disabled='false']:hover {
+  background-color: var( --charcoal-surface4-hover );
 }
 
-.c1:active:not(:disabled):not([aria-disabled]),
-.c1:active[aria-disabled='false'] {
-  background-color: var(--charcoal-surface4-press);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var( --charcoal-surface4-press );
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
 .c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled='false']:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 <div
   data-dark={false}
 >
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index d4bb95765..78f0d31a7 100644
--- a/packages/react/src/components/IconButton/index.tsx
+++ b/packages/react/src/components/IconButton/index.tsx
@@ -46,45 +46,30 @@ const StyledIconButton = styled(Clickable).attrs<
   border-radius: 999999px;
   transition: 0.2s background-color, 0.2s box-shadow;
 
-  &:hover:not(:disabled):not([aria-disabled]),
-  &:hover[aria-disabled='false'] {
-    background-color: var(
-      ${({ background }) => `--charcoal-${background}-hover`}
-    );
-  }
-
-  &:active:not(:disabled):not([aria-disabled]),
-  &:active[aria-disabled='false'] {
-    background-color: var(
-      ${({ background }) => `--charcoal-${background}-press`}
-    );
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:hover {
+      background-color: var(
+        ${({ background }) => `--charcoal-${background}-hover`}
+      );
+    }
+    &:active {
+      background-color: var(
+        ${({ background }) => `--charcoal-${background}-press`}
+      );
+    }
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
   }
 
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
   }
-
-  &:not(:disabled):not([aria-disabled]):focus,
-  &[aria-disabled='false']:focus,
-  &:not(:disabled):not([aria-disabled]):active,
-  &[aria-disabled='false']:active {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-  &[aria-disabled='false']:focus:not(:focus-visible),
-  &:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-  &[aria-disabled='false']:active:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:not(:disabled):not([aria-disabled]):focus-visible,
-  &[aria-disabled='false']:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `
 
 function styledProps(props: Required<StyledProps>) {
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
index c52994e91..ebb3dcba5 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
@@ -1370,42 +1370,31 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c12:hover:not(:disabled):not([aria-disabled]),
-.c12:hover[aria-disabled='false'] {
-  background-color: var(--charcoal-surface4-hover);
+.c12:not(:disabled):not([aria-disabled]):hover,
+.c12[aria-disabled='false']:hover {
+  background-color: var( --charcoal-surface4-hover );
 }
 
-.c12:active:not(:disabled):not([aria-disabled]),
-.c12:active[aria-disabled='false'] {
-  background-color: var(--charcoal-surface4-press);
-}
-
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
+.c12:not(:disabled):not([aria-disabled]):active,
+.c12[aria-disabled='false']:active {
+  background-color: var( --charcoal-surface4-press );
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
 .c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled='false']:focus:not(:focus-visible),
-.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled='false']:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c12[aria-disabled='false']:active,
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;