@charcoal-ui/styled 2.3.0 → 2.5.0

package/src/builders/border.ts

@@ -0,0 +1,63 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { CSSObject } from 'styled-components'
+import { keyof } from '../util'
+import { Internal, createInternal } from '../internals'
+import {
+  defineConstantProperties,
+  defineProperties,
+  definePropertyChains,
+} from '../factories/lib'
+
+export const borderDirections = ['top', 'right', 'bottom', 'left'] as const
+type BorderDirection = typeof borderDirections[number]
+
+function borderProperty(direction: BorderDirection) {
+  return `border-${direction}`
+}
+
+function borderShorthand(color: string) {
+  return `solid 1px ${color}`
+}
+
+export const createBorderCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (
+    variant: keyof T['border'],
+    directions: readonly BorderDirection[]
+  ): Internal => {
+    const all = directions.length === 0
+    const value = borderShorthand(theme.border[variant].color)
+
+    return createInternal({
+      toCSS() {
+        return {
+          ...(all
+            ? { border: value }
+            : directions.reduce<CSSObject>(
+                (acc, direction) => ({
+                  ...acc,
+                  [borderProperty(direction)]: value,
+                }),
+                {}
+              )),
+        }
+      },
+    })
+  }
+
+export default function border<T extends CharcoalAbstractTheme>(theme: T) {
+  const borderTypes = keyof<T['border']>(theme.border)
+
+  const borderCss = createBorderCss(theme)
+  const borderObject = defineConstantProperties(
+    {},
+    {
+      border: defineProperties({}, borderTypes, (variant) =>
+        definePropertyChains(borderDirections, (modifiers) =>
+          borderCss(variant, modifiers)
+        )
+      ),
+    }
+  )
+  return borderObject
+}

package/src/builders/borderRadius.ts

@@ -0,0 +1,32 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { px } from '@charcoal-ui/utils'
+import { Internal, createInternal } from '../internals'
+import { defineConstantProperties } from '../factories/lib'
+
+export const createBorderRadiusCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (size: keyof T['borderRadius']): Internal => {
+    return createInternal({
+      toCSS() {
+        return {
+          borderRadius: px(theme.borderRadius[size]),
+        }
+      },
+    })
+  }
+
+export default function borderRadius<T extends CharcoalAbstractTheme>(
+  theme: T
+) {
+  // 角丸
+  const borderRadiusCss = createBorderRadiusCss(theme)
+  const borderRadiusObject = defineConstantProperties(
+    {},
+    {
+      borderRadius: (radius: keyof T['borderRadius']) =>
+        borderRadiusCss(radius),
+    }
+  )
+
+  return borderRadiusObject
+}

package/src/builders/colors.ts

@@ -0,0 +1,198 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import {
+  applyEffect,
+  applyEffectToGradient,
+  customPropertyToken,
+  dur,
+  gradient,
+  GradientDirection,
+} from '@charcoal-ui/utils'
+import { CSSObject } from 'styled-components'
+import warning from 'warning'
+import {
+  keyof,
+  objectAssign,
+  isSupportedEffect,
+  onEffectPseudo,
+  variable,
+} from '../util'
+import {
+  createInternal,
+  Internal,
+  Context,
+  shouldCancelHalfLeading,
+} from '../internals'
+import {
+  defineConstantProperties,
+  defineProperties,
+  definePropertyChains,
+} from '../factories/lib'
+import { TRANSITION_DURATION } from './transition'
+
+const colorProperties = ['bg', 'font'] as const
+export type ColorProperty = typeof colorProperties[number]
+
+function targetProperty(target: ColorProperty) {
+  return target === 'bg' ? 'background-color' : 'color'
+}
+
+export const createColorCss =
+  <T extends CharcoalAbstractTheme>(_theme: T) =>
+  (
+    target: ColorProperty,
+    color: keyof T['color'],
+    effects: readonly (keyof T['effect'])[] = []
+  ): Internal => {
+    function toCSS() {
+      return {
+        [targetProperty(target)]: variable(
+          customPropertyToken(color.toString())
+        ),
+        ...effects.filter(isSupportedEffect).reduce<CSSObject>(
+          (acc, effect) => ({
+            ...acc,
+            ...onEffectPseudo(effect, {
+              [targetProperty(target)]: variable(
+                customPropertyToken(color.toString(), [effect])
+              ),
+            }),
+          }),
+          {}
+        ),
+      }
+    }
+
+    return createInternal({
+      toCSS,
+      context:
+        effects.length > 0
+          ? target === 'font'
+            ? {
+                colorTransition: true,
+              }
+            : {
+                backgroundColorTransition: true,
+              }
+          : {},
+    })
+  }
+
+export const createGradientColorCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (
+    color: keyof T['gradientColor'],
+    effects: readonly (keyof T['effect'])[] = [],
+    direction: GradientDirection
+  ): Internal => {
+    const toLinearGradient = gradient(direction)
+
+    function toCSS(context: Context): CSSObject {
+      const optimized = !shouldCancelHalfLeading(context)
+      const duration = dur(TRANSITION_DURATION)
+
+      if (optimized && effects.length > 0) {
+        return {
+          position: 'relative',
+          zIndex: 0,
+          overflow: 'hidden',
+          ...effects.filter(isSupportedEffect).reduce<CSSObject>(
+            (acc, effect) => ({
+              ...acc,
+              '&::before': {
+                zIndex: -1,
+                ...overlayElement,
+                transition: `${duration} background-color`,
+              },
+              '&::after': {
+                zIndex: -2,
+                ...overlayElement,
+                ...toLinearGradient(theme.gradientColor[color]),
+              },
+              ...onEffectPseudo(effect, {
+                '&::before': {
+                  backgroundColor: applyEffect(
+                    null,
+                    theme.effect[effect] ?? []
+                  ),
+                },
+              }),
+            }),
+            {}
+          ),
+        }
+      }
+
+      warning(
+        effects.length === 0,
+        // eslint-disable-next-line max-len
+        `'Transition' will not be applied. You can get around this by specifying 'preserveHalfLeading' or both 'padding' and 'typograpy'.`
+      )
+
+      return {
+        ...toLinearGradient(theme.gradientColor[color]),
+        ...effects.filter(isSupportedEffect).reduce<CSSObject>(
+          (acc, effect) => ({
+            ...acc,
+            ...onEffectPseudo(effect, {
+              ...toLinearGradient(
+                applyEffectToGradient(theme.effect[effect] ?? [])(
+                  theme.gradientColor[color]
+                )
+              ),
+            }),
+          }),
+          {}
+        ),
+      }
+    }
+
+    return createInternal({ toCSS })
+  }
+
+const overlayElement: CSSObject = {
+  content: "''",
+  display: 'block',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0,
+}
+
+export default function colors<T extends CharcoalAbstractTheme>(theme: T) {
+  const colors = keyof<T['color']>(theme.color)
+  const effects = keyof<T['effect']>(theme.effect)
+
+  // 色
+  const gradientColors = keyof<T['gradientColor']>(theme.gradientColor)
+  const colorCss = createColorCss(theme)
+  const gradientColorCss = createGradientColorCss(theme)
+
+  const colorObject = defineConstantProperties(
+    {},
+    {
+      bg: objectAssign(
+        defineProperties({}, colors, (color) =>
+          definePropertyChains(effects, (modifiers) =>
+            colorCss('bg', color, modifiers)
+          )
+        ),
+        defineProperties(
+          {},
+          gradientColors,
+          (color) => (direction: GradientDirection) =>
+            definePropertyChains(effects, (modifiers) =>
+              gradientColorCss(color, modifiers, direction)
+            )
+        )
+      ),
+      font: defineProperties({}, colors, (color) =>
+        definePropertyChains(effects, (modifiers) =>
+          colorCss('font', color, modifiers)
+        )
+      ),
+    }
+  )
+
+  return colorObject
+}

package/src/builders/elementEffect.ts

@@ -0,0 +1,54 @@
+import { CharcoalAbstractTheme, EffectType } from '@charcoal-ui/theme'
+import { CSSObject } from 'styled-components'
+import {
+  isSupportedEffect,
+  keyof,
+  onEffectPseudo,
+  ReadonlyArrayConstructor,
+  unreachable,
+} from '../util'
+import { Internal, createInternal } from '../internals'
+import { definePropertyChains } from '../factories/lib'
+
+export const createElementEffectCss =
+  <
+    T extends CharcoalAbstractTheme,
+    TElementEffect extends T['elementEffect']
+  >(theme: {
+    elementEffect: TElementEffect
+  }) =>
+  (effects: readonly (keyof TElementEffect)[] = []): Internal =>
+    createInternal({
+      toCSS() {
+        return effects.filter(isSupportedEffect).reduce<CSSObject>(
+          (acc, effect) => ({
+            ...acc,
+            ...onEffectPseudo(effect, {
+              opacity:
+                !(Array as ReadonlyArrayConstructor).isArray(
+                  theme.elementEffect[effect]
+                ) && theme.elementEffect[effect]?.type === 'opacity'
+                  ? theme.elementEffect[effect]?.opacity
+                  : unreachable(),
+            }),
+          }),
+          {}
+        )
+      },
+    })
+
+export default function elementEffect<T extends CharcoalAbstractTheme>(
+  theme: T
+) {
+  const effectTypes = keyof<T['elementEffect']>(
+    theme.elementEffect
+  ) as EffectType[]
+
+  // 要素へのエフェクト (etc: 透過)
+  const elementEffectCss = createElementEffectCss(theme)
+  const elementEffectObject = definePropertyChains(effectTypes, (modifiers) =>
+    elementEffectCss(modifiers)
+  )
+
+  return elementEffectObject
+}

package/src/builders/o.ts

@@ -0,0 +1,43 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { objectAssign } from '../util'
+import border from './border'
+import borderRadius from './borderRadius'
+import colors from './colors'
+import elementEffect from './elementEffect'
+import outline from './outline'
+import size from './size'
+import spacing from './spacing'
+import typography from './typography'
+
+/**
+ * `theme(o => [...])` の `o` の部分を構築する
+ *
+ * @param theme テーマオブジェクト
+ * @param DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
+ */
+export default function createO<T extends CharcoalAbstractTheme>(
+  theme: {
+    // factoryの第二引数に入れ込むものだけ明示的に型変数を展開しておくことで型の具象化を遅延する
+    color: T['color']
+    gradientColor: T['gradientColor']
+    border: T['border']
+    outline: T['outline']
+  } & Omit<T, 'color' | 'gradientColor' | 'border' | 'outline'>,
+  DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = false
+) {
+  if (DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return {} as never
+  }
+
+  return objectAssign(
+    colors(theme),
+    typography(theme),
+    spacing(theme),
+    size(theme),
+    elementEffect(theme),
+    border(theme),
+    borderRadius(theme),
+    outline(theme)
+  )
+}

package/src/builders/outline.ts

@@ -0,0 +1,79 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { px, notDisabledSelector } from '@charcoal-ui/utils'
+import { CSSObject } from 'styled-components'
+import { keyof } from '../util'
+import { Internal, createInternal } from '../internals'
+import {
+  defineConstantProperties,
+  defineProperties,
+  definePropertyChains,
+} from '../factories/lib'
+
+export const outlineType = ['focus'] as const
+type OutlineType = typeof outlineType[number]
+
+const outlineCss = (weight: number, color: string) => ({
+  boxShadow: `0 0 0 ${px(weight)} ${color}`,
+})
+
+export const createOutlineColorCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (
+    variant: keyof T['outline'],
+    modifiers: readonly OutlineType[]
+  ): Internal => {
+    const weight = theme.outline[variant].weight
+    const color = theme.outline[variant].color
+
+    return createInternal({
+      toCSS() {
+        return modifiers.includes('focus')
+          ? onFocus(outlineCss(weight, color))
+          : { '&&': { [notDisabledSelector]: outlineCss(weight, color) } }
+      },
+      context: {
+        boxShadowTransition: true,
+      },
+    })
+  }
+
+/**
+ * @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
+ */
+const onFocus = (css: CSSObject) => ({
+  [notDisabledSelector]: {
+    '&:focus, &:active': {
+      outline: 'none',
+      ...css,
+    },
+
+    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
+      outline: 'none',
+    },
+
+    '&:focus-visible': {
+      outline: 'none',
+      ...css,
+    },
+  },
+})
+
+export default function outline<T extends CharcoalAbstractTheme>(theme: T) {
+  const outlineCss = createOutlineColorCss(theme)
+
+  const outlineObject = defineConstantProperties(
+    {},
+    {
+      outline: defineProperties(
+        {},
+        keyof<T['outline']>(theme.outline),
+        (variant) =>
+          definePropertyChains(outlineType, (modifiers) =>
+            outlineCss(variant, modifiers)
+          )
+      ),
+    }
+  )
+
+  return outlineObject
+}

package/src/builders/size.ts

@@ -0,0 +1,61 @@
+import { columnSystem } from '@charcoal-ui/foundation'
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { px } from '@charcoal-ui/utils'
+import { Internal, createInternal } from '../internals'
+import { defineProperties, defineConstantProperties } from '../factories/lib'
+
+export const fixedProperties = ['width', 'height'] as const
+type FixedProperty = typeof fixedProperties[number]
+
+export const createFixedPxCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (property: FixedProperty, size: keyof T['spacing'] | 'auto'): Internal =>
+    createInternal({
+      toCSS() {
+        return {
+          [property]: size === 'auto' ? 'auto' : px(theme.spacing[size]),
+        }
+      },
+    })
+
+export const createFixedRelativeCss =
+  <T extends CharcoalAbstractTheme>(_theme: T) =>
+  (property: FixedProperty, amount: '100%' | 'auto'): Internal =>
+    createInternal({
+      toCSS() {
+        return {
+          [property]: amount,
+        }
+      },
+    })
+
+export const createFixedColumnCss =
+  <T extends CharcoalAbstractTheme>(theme: T) =>
+  (property: FixedProperty, span: number): Internal =>
+    createInternal({
+      toCSS() {
+        return {
+          [property]: px(
+            columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)
+          ),
+        }
+      },
+    })
+
+export default function size<T extends CharcoalAbstractTheme>(theme: T) {
+  const fixedPxCss = createFixedPxCss(theme)
+  const fixedColumnCss = createFixedColumnCss(theme)
+  const fixedRelativeCss = createFixedRelativeCss(theme)
+  const fixedObject = defineProperties({}, fixedProperties, (property) =>
+    defineConstantProperties(
+      {},
+      {
+        px: (size: keyof T['spacing'] | 'auto') => fixedPxCss(property, size),
+        column: (span: number) => fixedColumnCss(property, span),
+        auto: fixedRelativeCss(property, 'auto'),
+        full: fixedRelativeCss(property, '100%'),
+      }
+    )
+  )
+  return fixedObject
+}

package/src/builders/spacing.ts

@@ -0,0 +1,113 @@
+import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
+import { px } from '@charcoal-ui/utils'
+import { CSSObject } from 'styled-components'
+import { Internal, createInternal, Context } from '../internals'
+import { defineProperties, defineMethodChains } from '../factories/lib'
+
+export const spacingProperties = ['margin', 'padding'] as const
+export const spacingDirections = [
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'vertical',
+  'horizontal',
+  'all',
+] as const
+type SpacingProperty = typeof spacingProperties[number]
+type SpacingDirection = typeof spacingDirections[number]
+
+function spacingProperty(
+  property: SpacingProperty,
+  direction: 'top' | 'right' | 'bottom' | 'left'
+) {
+  return `${property}-${direction}`
+}
+
+export const createSpacingCss =
+  <T extends CharcoalAbstractTheme>(theme: { spacing: T['spacing'] }) =>
+  (
+    property: SpacingProperty,
+    modifiers: readonly [SpacingDirection, keyof T['spacing'] | 'auto'][]
+  ): Internal => {
+    const { top, right, bottom, left } = modifiers.reduce(
+      (acc, [direction, size]) => {
+        if (direction === 'all') {
+          acc.top = size
+          acc.right = size
+          acc.bottom = size
+          acc.left = size
+        } else if (direction === 'vertical') {
+          acc.top = size
+          acc.bottom = size
+        } else if (direction === 'horizontal') {
+          acc.right = size
+          acc.left = size
+        } else {
+          acc[direction] = size
+        }
+        return acc
+      },
+      {} as Partial<
+        Record<'top' | 'right' | 'bottom' | 'left', keyof T['spacing'] | 'auto'>
+      >
+    )
+
+    const hasVerticalPadding =
+      property === 'padding' &&
+      top !== undefined &&
+      bottom !== undefined &&
+      top !== 'auto' &&
+      bottom !== 'auto'
+
+    function toCSS({ cancelHalfLeadingPx = 0 }: Context): CSSObject {
+      return {
+        ...(top !== undefined && {
+          [spacingProperty(property, 'top')]:
+            top === 'auto'
+              ? 'auto'
+              : px(
+                  theme.spacing[top] +
+                    (hasVerticalPadding ? cancelHalfLeadingPx : 0)
+                ),
+        }),
+        ...(bottom !== undefined && {
+          [spacingProperty(property, 'bottom')]:
+            bottom === 'auto'
+              ? 'auto'
+              : px(
+                  theme.spacing[bottom] +
+                    (hasVerticalPadding ? cancelHalfLeadingPx : 0)
+                ),
+        }),
+        ...(right !== undefined && {
+          [spacingProperty(property, 'right')]:
+            right === 'auto' ? 'auto' : px(theme.spacing[right]),
+        }),
+        ...(left !== undefined && {
+          [spacingProperty(property, 'left')]:
+            left === 'auto' ? 'auto' : px(theme.spacing[left]),
+        }),
+      }
+    }
+
+    return createInternal({
+      toCSS,
+      context: hasVerticalPadding ? { hasVerticalPadding: true } : {},
+    })
+  }
+
+export default function spacing<T extends CharcoalAbstractTheme>(theme: T) {
+  const spacingCss = createSpacingCss(theme)
+  const spacingObject = defineProperties(
+    {},
+    spacingProperties,
+    (spacingProperty) =>
+      defineMethodChains(
+        spacingDirections,
+        (modifiers) => spacingCss(spacingProperty, modifiers),
+        {} as keyof T['spacing'] | 'auto' // 推論のためのメタタイプ
+      )
+  )
+  return spacingObject
+}

package/src/builders/transition.ts

@@ -0,0 +1,32 @@
+import { dur } from '@charcoal-ui/utils'
+import { isPresent } from '../util'
+import { Internal, createInternal, Context } from '../internals'
+
+// TODO: deprecate
+export const TRANSITION_DURATION = 0.2
+
+/**
+ * context の状態を元に transition を追加する。必ず一番最後に呼ぶ
+ */
+export default function transition(_theme: unknown): Internal {
+  const duration = dur(TRANSITION_DURATION)
+  const transition = (property: string[]) => ({
+    transition: property.map((v) => `${duration} ${v}`).join(', '),
+  })
+
+  function toCSS({
+    colorTransition = false,
+    backgroundColorTransition = false,
+    boxShadowTransition = false,
+  }: Context) {
+    return transition(
+      [
+        colorTransition ? 'color' : null,
+        backgroundColorTransition ? 'background-color' : null,
+        boxShadowTransition ? 'box-shadow' : null,
+      ].filter(isPresent)
+    )
+  }
+
+  return createInternal({ toCSS })
+}