@charcoal-ui/react 3.5.0 → 3.7.0

package/src/components/DropdownSelector/index.story.tsx

@@ -65,6 +65,39 @@ export const Basic: Story<DropdownSelectorProps> = (
 
 Basic.args = { ...baseProps }
 
+export const LongNames: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
+  const [selected, setSelected] = useState('10')
+  return (
+    <div
+      style={{
+        width: 288,
+      }}
+    >
+      <DropdownSelector
+        {...props}
+        onChange={(value) => {
+          setSelected(value)
+        }}
+        value={selected}
+        label="label"
+      >
+        <DropdownMenuItem value={'10'}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'20'}>
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'30'}>
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat.
+        </DropdownMenuItem>
+      </DropdownSelector>
+    </div>
+  )
+}
+
 function PlaygroundDropdownSelector(props: Partial<DropdownSelectorProps>) {
   const [selected, setSelected] = useState('10')
   return (

package/src/components/DropdownSelector/index.tsx

@@ -1,9 +1,8 @@
 import { ReactNode, useState, useRef } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
-import { theme } from '../../styled'
 import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
@@ -90,14 +89,13 @@ const DropdownSelectorRoot = styled.div`
 
   ${disabledSelector} {
     cursor: default;
-    ${theme((o) => o.disabled)}
+    opacity: 0.32;
   }
 `
 
 const DropdownFieldLabel = styled(FieldLabel)`
   width: 100%;
-
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `
 
 const DropdownButton = styled.button<{ invalid?: boolean }>`
@@ -110,36 +108,81 @@ const DropdownButton = styled.button<{ invalid?: boolean }>`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
   ${disabledSelector} {
     cursor: default;
   }
 
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+
+  transition: 0.2s box-shadow, 0.2s background-color;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+    &:hover {
+      background-color: var(--charcoal-surface3-hover);
+    }
+  }
+
   ${({ invalid }) =>
-    theme((o) => [
-      o.padding.horizontal(8),
-      o.outline.default.focus,
-      o.bg.surface3,
-      o.borderRadius(4),
-      invalid === true && o.outline.assertive,
-    ])}
+    invalid === true &&
+    css`
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
+    `}
 `
 
 const DropdownButtonText = styled.span`
   text-align: left;
-
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const DropdownButtonIcon = styled(Icon)`
-  ${theme((o) => [o.font.text2])}
+  color: var(--charcoal-text2);
 `
 
 const AssertiveText = styled.div<{ invalid?: boolean }>`
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--charcoal-text2);
+  line-height: 22px;
+  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;
+  }
+
   ${({ invalid }) =>
-    theme((o) => [
-      o.typography(14),
-      o.margin.top(8),
-      invalid === true ? o.font.assertive : o.font.text2,
-    ])}
+    invalid === true &&
+    css`
+      color: var(--charcoal-assertive);
+    `}
 `

package/src/components/FieldLabel/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { createTheme } from '@charcoal-ui/styled'
 
 export interface FieldLabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -41,22 +40,88 @@ const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
 
 export default FieldLabel
 
-const theme = createTheme(styled)
-
 const Label = styled.label`
-  ${theme((o) => [o.typography(14).bold, o.font.text1])}
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const RequiredText = styled.span`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const SubLabelClickable = styled.div`
-  ${theme((o) => [
-    o.typography(14),
-    o.font.text3.hover.press,
-    o.outline.default.focus,
-  ])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  transition: 0.2s color, 0.2s box-shadow;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:hover {
+      color: var(--charcoal-text3-hover);
+    }
+    &:active {
+      color: var(--charcoal-text3-press);
+    }
+    &:active,
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
 `
 
 const FieldLabelWrapper = styled.div`
@@ -64,10 +129,10 @@ const FieldLabelWrapper = styled.div`
   align-items: center;
 
   > ${RequiredText} {
-    ${theme((o) => o.margin.left(4))}
+    margin-left: 4px;
   }
 
   > ${SubLabelClickable} {
-    ${theme((o) => o.margin.left('auto'))}
+    margin-left: auto;
   }
 `

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;
 `