@charcoal-ui/styled 3.9.1 → 3.10.1-beta.0

package/src/index.story.tsx

@@ -1,304 +1,113 @@
-import styled, { CSSProp, DefaultTheme, ThemeProvider } from 'styled-components'
-import { createTheme, ThemeProp, defineThemeVariables } from '.'
-import { disabledSelector } from '@charcoal-ui/utils'
+import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
 export default {
-  title: 'styled',
-}
-
-declare module 'react' {
-  interface Attributes {
-    css?: CSSProp<DefaultTheme> | ThemeProp<DefaultTheme>
-  }
+  title: 'styled/example',
 }
 
 declare module 'styled-components' {
   export interface DefaultTheme extends MyTheme {}
 }
 
-const theme = createTheme<DefaultTheme>()
-
 export const Example = () => (
   <ThemeProvider theme={myTheme}>
-    <Container>
-      <Normal>Sample</Normal>
-      <LeftTopPadding>Left Top Padding</LeftTopPadding>
-      <NestedWrap>
-        <Nested>Nested</Nested>
-      </NestedWrap>
-      <Multiline>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem dolores,
-        recusandae quidem mollitia eum non vel architecto possimus repudiandae
-        quis molestias neque facilis rem dolorum voluptatem impedit nemo
-        praesentium voluptas.
-      </Multiline>
-      <MultilineOverflow>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem dolores,
-        recusandae quidem mollitia eum non vel architecto possimus repudiandae
-        quis molestias neque facilis rem dolorum voluptatem impedit nemo
-        praesentium voluptas.
-      </MultilineOverflow>
-      <WithEffects>With effects</WithEffects>
-      <WithoutHalfLeading>Without half-leading</WithoutHalfLeading>
-      <WithoutHalfLeadingNoOptimization>
-        Without half-leading (No optimization)
-      </WithoutHalfLeadingNoOptimization>
-      <WithHalfLeading>With half-leading</WithHalfLeading>
-      <FixedSizeBox>Fixed size box</FixedSizeBox>
-      <InputContainer>
-        <Button>Button</Button>
-        <Button disabled>Disabled</Button>
-      </InputContainer>
-      <InputContainer>
-        <TextField value="text field" />
-        <TextField value="disabled" disabled />
-        <TextField value="invalid" assertive />
-      </InputContainer>
-      <BorderedBox>Border</BorderedBox>
-      <GradientBox>Gradient</GradientBox>
-      <WarningGradientBox>Gradient (Warning)</WarningGradientBox>
-      <TailwindLike />
-      <FixBox>
-        <FullBox>Full width</FullBox>
-      </FixBox>
-      <LocalTheme>This is actually text1 !</LocalTheme>
-    </Container>
+    <RootDiv>
+      <Bg1Div>
+        <TypographyDiv>
+          {'${({ theme }) => theme.utils.typography(14, true)}'}
+        </TypographyDiv>
+      </Bg1Div>
+
+      <Bg1Div>
+        <MarginDiv>
+          <Pre>
+            <Code>
+              {`\${({ theme }) => [
+    theme.utils.margin(16, 'auto'),
+    theme.utils.padding(4, 8, 16, 24),
+  ]}`}
+            </Code>
+          </Pre>
+        </MarginDiv>
+      </Bg1Div>
+
+      <Bg1Div>
+        <AssertiveRingDiv>{'theme.utils.assertiveRingCss'}</AssertiveRingDiv>
+      </Bg1Div>
+
+      <Bg1Div>
+        <StyledButton>{'theme.utils.focusVisibleFocusRingCss'}</StyledButton>
+
+        <StyledButton disabled>{'theme.utils.disabledCss'}</StyledButton>
+      </Bg1Div>
+    </RootDiv>
   </ThemeProvider>
 )
 
-export const TailwindLike = () => (
-  <div
-    css={`
-      display: flex;
-    `}
-  >
-    <div
-      css={theme((o) => [
-        o.bg.mycolor.hover.press,
-        o.font.text5.hover.press,
-        o.typography(14).bold,
-        o.padding.all(16),
-        o.borderRadius(8),
-      ])}
-    >
-      Tailwind like
-    </div>
-  </div>
-)
-
-const Container = styled.div``
-
-const LeftTopPadding = styled.div`
-  /* 配列で複数のスタイルを返すこともできます */
-  ${theme((o) => [
-    o.bg.surface3,
-    o.font.text4,
-    o.typography(32).monospace,
-    o.margin.vertical(24),
-    o.padding.left(64).top(64),
-  ])}
+const RootDiv = styled.div`
+  ${({ theme }) => theme.utils.gap(40)}
+  color: ${({ theme }) => theme.color.text1};
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
 `
 
-const Normal = styled.div`
-  ${theme((o) => [
-    o.bg.surface2,
-    o.font.text2,
-    o.typography(20).bold,
-    o.padding.all(40),
-    o.margin.vertical(24),
-  ])}
+const Pre = styled.pre`
+  margin: 0;
 `
 
-const NestedWrap = styled.div`
-  ${theme((o) => [o.bg.surface2, o.padding.all(40)])}
+const Code = styled.code`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
 `
 
-const Nested = styled.div`
-  ${theme((o) => [
-    o.bg.surface4,
-    o.font.text5,
-    o.typography(20).bold,
-    o.height.px(40),
-  ])};
+const TypographyDiv = styled.div`
+  ${({ theme }) => theme.utils.typography(14, true)}
 `
 
-const Multiline = styled.div`
-  ${theme((o) => [
-    o.bg.surface3,
-    o.font.text1,
-    o.typography(16),
-    o.width.column(4),
-    o.margin.vertical(24),
-  ])}
+const MarginDiv = styled.div`
+  color: ${({ theme }) => theme.color.text1};
+  background-color: ${({ theme }) => theme.color.background2};
+  border: 1px solid ${({ theme }) => theme.color.border};
+  ${({ theme }) => [
+    theme.utils.margin(16, 'auto'),
+    theme.utils.padding(4, 8, 16, 24),
+  ]}
 `
 
-const MultilineOverflow = styled(Multiline)`
-  ${theme((o) => o.height.px(64))}
+const Bg1Div = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  background-color: ${({ theme }) => theme.color.background1};
+  border: 1px solid ${({ theme }) => theme.color.border};
+  overflow-x: auto;
+  overflow-y: hidden;
 `
 
-const WithEffects = styled.div`
-  ${theme((o) => [
-    o.bg.surface4.hover.press,
-    o.font.text5.hover.press,
-    o.typography(20).bold,
-    o.margin.top(64).bottom(24),
-    o.padding.all(64),
-  ])}
+const AssertiveRingDiv = styled.div`
+  ${({ theme }) => [theme.utils.assertiveRingCss, theme.utils.margin(8)]}
+  transition: 0.2s box-shadow;
 `
 
-const WithoutHalfLeadingNoOptimization = styled.div`
-  ${theme((o) => [o.bg.surface3, o.typography(16).bold, o.margin.vertical(24)])}
-  ${theme((o) => [o.padding.all(24)])}
-`
+const StyledButton = styled.button`
+  ${({ theme }) => [
+    theme.utils.focusVisibleFocusRingCss,
+    theme.utils.disabledCss,
+    theme.utils.padding(0, 16),
+    theme.utils.margin(16),
+  ]}
+  transition: 0.2s box-shadow;
 
-const WithoutHalfLeading = styled.div`
-  ${theme((o) => [
-    o.bg.surface3,
-    o.typography(16).bold,
-    o.padding.all(24),
-    o.margin.vertical(24),
-  ])}
-`
-
-const WithHalfLeading = styled.div`
-  ${theme((o) => [
-    o.bg.surface3,
-    o.typography(16).bold.preserveHalfLeading,
-    o.padding.all(24),
-    o.margin.vertical(24),
-  ])}
-`
-
-const FixedSizeBox = styled.div`
-  ${theme((o) => [
-    o.bg.surface3,
-    o.font.text2,
-    o.typography(20).bold,
-    o.width.column(3),
-    o.height.px(64),
-    o.margin.vertical(24),
-  ])}
-`
-
-const InputContainer = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: start;
-  gap: 16px;
-
-  ${theme((o) => o.margin.vertical(24))}
-`
-
-const Button = styled.button`
-  font: inherit;
-  appearance: none;
-  border-style: none;
   cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-
-  ${theme((o) => [
-    o.bg.brand.hover.press,
-    o.font.text5.hover.press,
-    o.typography(14).bold,
-    o.height.px(40),
-    o.padding.horizontal(24),
-    o.disabled,
-    o.borderRadius('oval'),
-    o.outline.default.focus,
-  ])}
-
-  ${disabledSelector} {
-    cursor: unset;
+  height: 40px;
+  background-color: ${({ theme }) => theme.color.brand};
+  color: ${({ theme }) => theme.color.text5};
+  border: none;
+  border-radius: 9999px;
+
+  :not(:disabled):active {
+    background-color: var(--charcoal-brand-press);
   }
 `
-
-const TextField = styled.input.attrs({ type: 'text' })<{ assertive?: boolean }>`
-  font: inherit;
-  appearance: none;
-  border-style: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  ${(p) =>
-    theme((o) => [
-      o.height.px(40),
-      o.width.column(2),
-      o.padding.horizontal(8).vertical(0),
-      o.borderRadius(4),
-      o.bg.surface3.hover,
-      o.font.text2,
-      o.typography(14).preserveHalfLeading,
-      o.disabled,
-      o.outline.default.focus,
-      p.assertive !== undefined && p.assertive && o.outline.assertive,
-    ])}
-`
-
-const BorderedBox = styled.div`
-  ${theme((o) => [
-    o.bg.background1,
-    o.font.text2,
-    o.typography(14),
-    o.width.column(4),
-    o.margin.vertical(40),
-    o.padding.all(24),
-    o.border.default,
-    o.borderRadius(8),
-  ])}
-`
-
-const GradientBox = styled.div`
-  ${theme((o) => [
-    o.bg.callToAction('to right').hover.press,
-    o.font.text5.hover.press,
-    o.width.column(2),
-    o.padding.all(40),
-    o.margin.vertical(24),
-    o.typography(20).bold,
-    o.borderRadius(8),
-  ])}
-
-  text-align: center;
-`
-
-const WarningGradientBox = styled.div`
-  ${theme((o) => [
-    o.bg.callToAction('to right').hover.press,
-    o.font.text5.hover.press,
-    o.width.column(2),
-    o.margin.vertical(24),
-    o.typography(20).bold,
-    o.borderRadius(8),
-  ])}
-  /* 'padding'と'typography'を同時に指定しない場合にはtransitionが使えない */
-  ${theme((o) => [o.padding.all(40)])}
-
-  text-align: center;
-`
-
-const FixBox = styled.div`
-  ${theme((o) => [o.width.column(3), o.margin.vertical(24)])}
-`
-
-const FullBox = styled.div`
-  display: inline-block;
-
-  ${theme((o) => [
-    o.width.full,
-    o.bg.surface4,
-    o.font.text5,
-    o.padding.all(16),
-  ])}
-`
-
-const LocalTheme = styled.div`
-  ${defineThemeVariables({ text1: '#ffff00' })}
-
-  ${theme((o) => [o.bg.surface4, o.font.text1])}
-`

package/src/index.test.tsx

@@ -2,9 +2,9 @@ import { light } from '@charcoal-ui/theme'
 import 'jest-styled-components'
 
 import renderer from 'react-test-renderer'
-import { ThemeProvider } from 'styled-components'
-import { Example, TailwindLike } from './index.story'
-import { myTheme } from './storyHelper'
+import styled, { ThemeProvider } from 'styled-components'
+import { Example } from './index.story'
+import { MyTheme, myTheme } from './storyHelper'
 
 function render(children: JSX.Element) {
   return renderer
@@ -17,8 +17,58 @@ describe('Story', () => {
   test('<Example />', () => {
     expect(render(<Example />)).toMatchSnapshot()
   })
+})
 
-  test('<TailwindLike />', () => {
-    expect(render(<TailwindLike />)).toMatchSnapshot()
+describe('ThemeUtilsTest', () => {
+  test('<ThemeUtilsTest />', () => {
+    expect(
+      render(
+        <ThemeUtilsTest>
+          <Typography12 />
+          <Typography14True />
+          <Typography16TrueTrue />
+        </ThemeUtilsTest>
+      )
+    ).toMatchSnapshot()
   })
 })
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends MyTheme {}
+}
+
+const ThemeUtilsTest = styled.div`
+  ${({ theme }) => theme.utils.margin(0)}
+  ${({ theme }) => theme.utils.margin(0, 'auto')}
+  ${({ theme }) => theme.utils.margin('auto', 4, 8)}
+  ${({ theme }) => theme.utils.margin(0, 4, 8, 'auto')}
+  ${({ theme }) => theme.utils.marginTop(0)}
+  ${({ theme }) => theme.utils.marginRight(4)}
+  ${({ theme }) => theme.utils.marginBottom(8)}
+  ${({ theme }) => theme.utils.marginRight(16)}
+  ${({ theme }) => theme.utils.padding(0)}
+  ${({ theme }) => theme.utils.padding(0, 4)}
+  ${({ theme }) => theme.utils.padding(0, 4, 8)}
+  ${({ theme }) => theme.utils.padding(0, 4, 8, 16)}
+  ${({ theme }) => theme.utils.paddingTop(0)}
+  ${({ theme }) => theme.utils.paddingRight(4)}
+  ${({ theme }) => theme.utils.paddingBottom(8)}
+  ${({ theme }) => theme.utils.paddingRight(16)}
+  ${({ theme }) => theme.utils.gap(0)}
+  ${({ theme }) => theme.utils.gap(0, 4)}
+  ${({ theme }) => theme.utils.rowGap(0)}
+  ${({ theme }) => theme.utils.columnGap(4)}
+  ${({ theme }) => theme.utils.focusVisibleFocusRingCss}
+  ${({ theme }) => theme.utils.assertiveRingCss}
+  ${({ theme }) => theme.utils.disabledCss}
+`
+
+const Typography12 = styled.div`
+  ${({ theme }) => theme.utils.typography(12)}
+`
+const Typography14True = styled.div`
+  ${({ theme }) => theme.utils.typography(14, true)}
+`
+const Typography16TrueTrue = styled.div`
+  ${({ theme }) => theme.utils.typography(16, true, true)}
+`

package/src/index.ts

@@ -24,6 +24,13 @@ const nonBlank = <T>(value: T): value is T extends Blank ? never : T =>
   isPresent(value) && (value as unknown) !== false
 
 /**
+ * @deprecated
+ * 実行時のパフォーマンスが低い問題があります。
+ * ref. https://github.com/pixiv/charcoal/pull/377
+ *
+ * styled-components の theming 方法を推奨します。
+ * ref. https://styled-components.com/docs/advanced#theming
+ *
  * `theme(o => [...])` の `theme` ユーティリティを構築する
  *
  * @param _styled - DEPRECATED: styled-components の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
@@ -85,4 +92,8 @@ export type ThemeProp<T> = ({
   theme: T | undefined
 }) => CSSObject | CSSObject[]
 
-export * from './styles/focusVisibleFocusRingCss'
+export { focusVisibleFocusRingCss } from './styles/focusVisibleFocusRingCss'
+export { disabledCss } from './styles/disabledCss'
+export { assertiveRingCss } from './styles/assertiveRingCss'
+export type { CharcoalThemeUtils } from './utils/CharcoalStyledTheme'
+export { addThemeUtils } from './utils/addThemeUtils'

package/src/storyHelper.ts

@@ -1,15 +1,18 @@
 import { Material } from '@charcoal-ui/foundation'
 import { CharcoalTheme } from '@charcoal-ui/theme'
+import { CharcoalThemeUtils } from './utils/CharcoalStyledTheme'
+import { addThemeUtils } from './utils/addThemeUtils'
 
-export type MyTheme = CharcoalTheme & {
-  color: {
-    mycolor: Material
+export type MyTheme = CharcoalTheme &
+  CharcoalThemeUtils & {
+    color: {
+      mycolor: Material
+    }
   }
-}
 
 export function myTheme(theme: CharcoalTheme): MyTheme {
   return {
-    ...theme,
+    ...addThemeUtils(theme),
     color: {
       ...theme.color,
       mycolor: '#ff9e8c',

package/src/styles/assertiveRingCss.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components'
+
+export const assertiveRingCss = css`
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+`

package/src/styles/disabledCss.ts

@@ -0,0 +1,9 @@
+import { css } from 'styled-components'
+
+export const disabledCss = css`
+  :disabled,
+  [aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+    cursor: default;
+  }
+`

package/src/themeUtils.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as CheckboxStories from './index.story'
+
+<Meta title="styled/addThemeUtils" />
+
+# Theme Utils
+
+We offer utilities for spacing and common classes through `theme.utils`, which enable type-safe spacing.
+
+## Setup
+
+You can add utilities using `addThemeUtils` by passing the object to the ThemeProvider.
+
+```tsx
+// ...
+import { addThemeUtils } from '@charcoal-ui/styled'
+
+const ExampleProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [theme] = useTheme()
+  const themeWithUtils = addThemeUtils(theme === 'dark' ? dark : light)
+  useThemeSetter()
+  return (
+    <ThemeProvider theme={themeWithUtils}>
+      {...}
+    </ThemeProvider>
+  )
+}
+```
+
+## Usage
+
+You can access the theme object using [styled theming](https://styled-components.com/docs/advanced#theming).
+
+```tsx
+const AssertiveRingDiv = styled.div`
+  ${({ theme }) => [theme.utils.assertiveRingCss, theme.utils.margin(8)]}
+  transition: 0.2s box-shadow;
+`
+```
+
+### Example
+
+<Canvas of={CheckboxStories.Example} />

package/src/utils/CharcoalStyledTheme.ts

@@ -0,0 +1,47 @@
+import {
+  margin,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginTop,
+} from './margin'
+import {
+  padding,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+} from './padding'
+import { columnGap, gap, rowGap } from './gap'
+import { disabledCss } from '../styles/disabledCss'
+import { typography } from './typographyCss'
+import { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'
+import { assertiveRingCss } from '../styles/assertiveRingCss'
+
+export type CharcoalThemeUtils = {
+  utils: {
+    margin: typeof margin
+    marginTop: typeof marginTop
+    marginLeft: typeof marginLeft
+    marginBottom: typeof marginBottom
+    marginRight: typeof marginRight
+    padding: typeof padding
+    paddingTop: typeof paddingTop
+    paddingLeft: typeof paddingLeft
+    paddingBottom: typeof paddingBottom
+    paddingRight: typeof paddingRight
+    gap: typeof gap
+    rowGap: typeof rowGap
+    columnGap: typeof columnGap
+    typography: typeof typography
+    /**
+     * Generally use with `transition: 0.2s box-shadow`.
+     */
+    focusVisibleFocusRingCss: typeof focusVisibleFocusRingCss
+    /**
+     * Generally use with `transition: 0.2s box-shadow`.
+     */
+    assertiveRingCss: typeof assertiveRingCss
+    disabledCss: typeof disabledCss
+  }
+}

package/src/utils/addThemeUtils.ts

@@ -0,0 +1,52 @@
+import { CharcoalTheme } from '@charcoal-ui/theme'
+import { CharcoalThemeUtils } from './CharcoalStyledTheme'
+import {
+  margin,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginTop,
+} from './margin'
+import {
+  padding,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+} from './padding'
+import { columnGap, gap, rowGap } from './gap'
+import { disabledCss } from '../styles/disabledCss'
+import { typography } from './typographyCss'
+import { focusVisibleFocusRingCss } from '../styles/focusVisibleFocusRingCss'
+import { assertiveRingCss } from '../styles/assertiveRingCss'
+
+/**
+ * Adds some utilities to the theme object.
+ * They can be used as an alternative `createTheme`(`theme(o=>)`) for styling.
+ */
+export function addThemeUtils(
+  theme: CharcoalTheme
+): CharcoalTheme & CharcoalThemeUtils {
+  return {
+    ...theme,
+    utils: {
+      margin,
+      marginTop,
+      marginLeft,
+      marginBottom,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingLeft,
+      paddingBottom,
+      paddingRight,
+      gap,
+      rowGap,
+      columnGap,
+      typography,
+      focusVisibleFocusRingCss,
+      assertiveRingCss,
+      disabledCss,
+    },
+  }
+}