feat(react): remove @charcoal/styled from checkbox

packages/react/src/components/Checkbox/__snapshots__/snapshot.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -35,8 +35,6 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
   -webkit-transition: all 0.2s !important;
   transition: all 0.2s !important;
 }
@@ -48,38 +46,38 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
   background-color: var(--charcoal-brand-hover);
 }
 
 .c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #5c5c5c;
+  border-color: var(--charcoal-text4);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -245,7 +243,7 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -263,8 +261,6 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
   -webkit-transition: all 0.2s !important;
   transition: all 0.2s !important;
 }
@@ -276,38 +272,38 @@ exports[`using dark theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1`
 }
 
 .c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
   background-color: var(--charcoal-brand-hover);
 }
 
 .c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #5c5c5c;
+  border-color: var(--charcoal-text4);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -398,7 +394,7 @@ exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -416,8 +412,6 @@ exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
   -webkit-transition: all 0.2s !important;
   transition: all 0.2s !important;
 }
@@ -429,38 +423,38 @@ exports[`using light theme storiesOf(index.story.tsx).add(Labelled) snapshot 1`]
 }
 
 .c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
   background-color: var(--charcoal-brand-hover);
 }
 
 .c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #adadad;
+  border-color: var(--charcoal-text4);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
@@ -626,7 +620,7 @@ exports[`using light theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -644,8 +638,6 @@ exports[`using light theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
   -webkit-transition: all 0.2s !important;
   transition: all 0.2s !important;
 }
@@ -657,38 +649,38 @@ exports[`using light theme storiesOf(index.story.tsx).add(Unlabelled) snapshot 1
 }
 
 .c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:hover[aria-disabled='false'] {
   background-color: var(--charcoal-brand-hover);
 }
 
 .c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:active[aria-disabled='false'] {
   background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #adadad;
+  border-color: var(--charcoal-text4);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }

packages/react/src/components/Checkbox/index.tsx

@@ -4,8 +4,7 @@ import styled, { css } from 'styled-components'
 import { useCheckbox } from '@react-aria/checkbox'
 import { useObjectRef } from '@react-aria/utils'
 import { useToggleState } from 'react-stately'
-import { disabledSelector, px } from '@charcoal-ui/utils'
-import { theme } from '../../styled'
+import { disabledSelector } from '@charcoal-ui/utils'
 
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import Icon from '../Icon'
@@ -83,8 +82,11 @@ const InputRoot = styled.label`
     cursor: default;
   }
 
-  gap: ${({ theme }) => px(theme.spacing[4])};
-  ${theme((o) => [o.disabled])}
+  gap: 4px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `
 
 const CheckboxRoot = styled.div`
@@ -101,14 +103,46 @@ const CheckboxInput = styled.input`
     height: 20px;
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+      background-color: var(--charcoal-brand);
+      transition: 0.2s background-color;
+
+      // TODO: 整理する
+      &:hover:not(:disabled):not([aria-disabled]),
+      &:hover[aria-disabled='false'] {
+        background-color: var(--charcoal-brand-hover);
+      }
+      &:active:not(:disabled):not([aria-disabled]),
+      &:active[aria-disabled='false'] {
+        background-color: var(--charcoal-brand-press);
+      }
     }
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.color.text4};
+      border-color: var(--charcoal-text4);
+    }
+    border-radius: 4px;
+
+    &: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);
     }
-    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
 
     /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
     transition: all 0.2s !important;
@@ -123,15 +157,15 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
 
   ${({ checked }) => checked !== true && hiddenCss};
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.font.text2])}
-
+  color: var(--charcoal-text2);
   font-size: 14px;
   /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
   line-height: 20px;