diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index 7708dc2f6..c65cd72f5 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -562,40 +562,29 @@ 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[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.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: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: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 {
diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index 11ddddda5..a84fa09ef 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -65,40 +65,29 @@ 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[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
+.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: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: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
@@ -180,40 +169,29 @@ 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[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
+.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: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: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
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index c9ffbc1ef..f099d63af 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'
 
@@ -49,15 +48,35 @@ 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,
-    ])}
+  &: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;
+  }
 `
 
 function styledProps({ $size, $variant }: StyledIconButtonProps) {
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
index b5aa48fc6..b2623951a 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
@@ -1374,40 +1374,29 @@ 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[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
+.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: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: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 {