@charcoal-ui/react 3.4.0 → 3.6.0

package/src/components/IconButton/__snapshots__/index.story.storyshot

@@ -17,6 +17,8 @@ exports[`Storyshots IconButton Default M 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -63,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
@@ -104,10 +95,7 @@ exports[`Storyshots IconButton Default M 1`] = `
 >
   <button
     className="c0 c1"
-    height={40}
-    size="M"
     title="close"
-    width={40}
   >
     <pixiv-icon
       name="24/Close"
@@ -133,6 +121,8 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   -ms-letter-spacing: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
   font: inherit;
   margin: 0;
   overflow: visible;
@@ -179,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
@@ -220,10 +199,7 @@ exports[`Storyshots IconButton Overlay M 1`] = `
 >
   <button
     className="c0 c1"
-    height={40}
-    size="M"
     title="close"
-    width={40}
   >
     <pixiv-icon
       name="24/Close"

package/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'
 
@@ -22,7 +21,7 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
   ) {
     validateIconSize(size, icon)
     return (
-      <StyledIconButton {...rest} ref={ref} variant={variant} size={size}>
+      <StyledIconButton {...rest} ref={ref} $size={size} $variant={variant}>
         <pixiv-icon name={icon} />
       </StyledIconButton>
     )
@@ -31,42 +30,68 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
 
 export default IconButton
 
+type StyledIconButtonProps = Required<{
+  [key in keyof Pick<
+    StyledProps,
+    'size' | 'variant'
+  > as `$${key}`]: StyledProps[key]
+}>
+
 const StyledIconButton = styled(Clickable).attrs<
-  Required<StyledProps>,
+  StyledIconButtonProps,
   ReturnType<typeof styledProps>
->(styledProps)`
+>(styledProps)<StyledIconButtonProps>`
   user-select: none;
 
-  width: ${(p) => p.width}px;
-  height: ${(p) => p.height}px;
+  width: ${(p) => p.$width}px;
+  height: ${(p) => p.$height}px;
   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;
+
+  &: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);
+    }
+  }
 
-  ${({ font, background }) =>
-    theme((o) => [
-      o.font[font],
-      o.bg[background].hover.press,
-      o.disabled,
-      o.borderRadius('oval'),
-      o.outline.default.focus,
-    ])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `
 
-function styledProps(props: Required<StyledProps>) {
+function styledProps({ $size, $variant }: StyledIconButtonProps) {
   return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size),
+    ...variantToProps($variant),
+    ...sizeToProps($size),
   }
 }
 
 function variantToProps(variant: Variant) {
   switch (variant) {
     case 'Default':
-      return { font: 'text3', background: 'transparent' } as const
+      return { $font: 'text3', $background: 'transparent' } as const
     case 'Overlay':
-      return { font: 'text5', background: 'surface4' } as const
+      return { $font: 'text5', $background: 'surface4' } as const
   }
 }
 
@@ -74,18 +99,18 @@ function sizeToProps(size: Size) {
   switch (size) {
     case 'XS':
       return {
-        width: 20,
-        height: 20,
+        $width: 20,
+        $height: 20,
       }
     case 'S':
       return {
-        width: 32,
-        height: 32,
+        $width: 32,
+        $height: 32,
       }
     case 'M':
       return {
-        width: 40,
-        height: 40,
+        $width: 40,
+        $height: 40,
       }
   }
 }

package/src/components/LoadingSpinner/index.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, useImperativeHandle, useRef, memo } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { theme } from '../../styled'
 
 export type LoadingSpinnerProps = {
   readonly size?: number
@@ -43,11 +42,9 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   opacity: 0.84;
-  ${({ transparent }) =>
-    theme((o) => [
-      o.font.text4,
-      transparent ? o.bg.transparent : o.bg.background1,
-    ])}
+  color: var(--charcoal-text4);
+  background-color: ${({ transparent }) =>
+    `var(--charcoal-${transparent ? 'transparent' : 'background1'})`};
 `
 
 const scaleOut = keyframes`

package/src/components/Modal/Dialog/index.tsx

@@ -57,7 +57,7 @@ const AnimatedStyledDialogDiv = animated(styled.div<{
     }
   }}px;
 
-  background-color: ${({ theme }) => theme.color.background1};
+  background-color: var(--charcoal-surface1);
   border-radius: 24px;
 
   @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,6 +1,5 @@
 import { BottomSheet, ModalContext, ModalTitle } from '.'
 import styled, { css } from 'styled-components'
-import { theme } from '../../styled'
 import { useContext } from 'react'
 import { maxWidth } from '@charcoal-ui/utils'
 
@@ -30,15 +29,35 @@ const ModalHeaderRoot = styled.div<{
 `
 
 const StyledModalTitle = styled(ModalTitle)`
-  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+  color: var(--charcoal-text1);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+  display: flow-root;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 export const ModalAlign = styled.div`
-  ${theme((o) => [o.padding.horizontal(16)])}
+  padding-left: 16px;
+  padding-right: 16px;
 `
 
 export const ModalBody = styled.div`
-  ${theme((o) => [o.padding.bottom(40)])}
+  padding-bottom: 40px;
 `
 
 export const ModalButtons = styled.div`
@@ -46,5 +65,7 @@ export const ModalButtons = styled.div`
   grid-auto-flow: row;
   grid-row-gap: 8px;
 
-  ${theme((o) => [o.padding.horizontal(16).top(16)])}
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
 `