@charcoal-ui/styled 2.3.0 → 2.5.0

package/dist/index.modern.js

@@ -1,11 +1,11 @@
+import { filterObject, flatMapObject, customPropertyToken, applyEffect, notDisabledSelector, disabledSelector, px, dur, gradient, applyEffectToGradient, halfLeading } from '@charcoal-ui/utils';
 import warning from 'warning';
-import { filterObject, flatMapObject, customPropertyToken, applyEffect, notDisabledSelector, disabledSelector, px, halfLeading, dur, applyEffectToGradient, gradient } from '@charcoal-ui/utils';
 import { columnSystem } from '@charcoal-ui/foundation';
 import React, { useEffect, useState, useMemo } from 'react';
 import { createGlobalStyle, css } from 'styled-components';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -18,7 +18,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -36,9 +35,27 @@ const isPresent = value => value != null; // eslint-disable-next-line @typescrip
 function objectAssign(...sources) {
   return Object.assign({}, ...sources);
 }
-function objectKeys(obj) {
+/**
+ * Object.keys の返り値の型を厳しめにしてくれるやつ。
+ *
+ * ジェネリクスは基本的に明示して使うことを推奨。
+ *
+ * このライブラリでは Theme オブジェクトのジェネリクスを引き回すケースが多く、
+ * ジェネリクスを省略するといつのまにか keys の返り値が `string | number | symbol` になりがちなので
+ *
+ * @param obj - キーを取りたいオブジェクト。ジェネリクスを省略したとき `never[]` のような使えない型が返って欲しい
+ */
+
+function keyof(obj) {
   return Object.keys(obj);
 }
+/**
+ * 配列じゃなかったら配列にする
+ */
+
+function wrapArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
 const noThemeProvider = new Error('`theme` is invalid. `<ThemeProvider>` is not likely mounted.');
 /**
  * 子孫要素で使われるカラーテーマの CSS Variables を上書きする
@@ -68,6 +85,80 @@ function defineThemeVariables(colorParams, effectParams) {
     return flatMapObject(colors, (colorKey, color) => [[customPropertyToken(colorKey), color], ...effects.map(([effectKey, effect]) => [customPropertyToken(colorKey, [effectKey]), applyEffect(color, [effect])])]);
   };
 }
+function isSupportedEffect(effect) {
+  return ['hover', 'press', 'disabled'].includes(effect);
+}
+const variable = value => `var(${value})`;
+function onEffectPseudo(effect, css) {
+  return effect === 'hover' ? {
+    '&:hover': {
+      [notDisabledSelector]: css
+    }
+  } : effect === 'press' ? {
+    '&:active': {
+      [notDisabledSelector]: css
+    }
+  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  effect === 'disabled' ? {
+    [disabledSelector]: css
+  } : unreachable(effect);
+}
+
+/**
+ * 絶対にこれを export してはいけない
+ *
+ * さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
+ */
+const internalSym = Symbol('internal');
+/**
+ * CSSObject に変換可能なオブジェクトを作成する
+ *
+ * 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
+ *
+ * これ以降メソッドチェーンが続いてもいいし、続かなくても良い
+ */
+
+function createInternal({
+  toCSS,
+  context = {}
+}) {
+  return {
+    [internalSym]: {
+      toCSS,
+      context
+    }
+  };
+}
+
+function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
+  return internal[internalSym];
+} // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
+// -> before/afterを入れる
+
+
+const shouldCancelHalfLeading = ({
+  cancelHalfLeadingPx,
+  hasVerticalPadding: _hasVerticalPadding = false
+}) => cancelHalfLeadingPx !== undefined && !_hasVerticalPadding;
+/**
+ * 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
+ */
+
+function getContext(internals) {
+  return internals.reduce((context, internal) => _extends({}, context, __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context), {});
+}
+/**
+ * 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
+ */
+
+function toCSSObjects(internals) {
+  // 1パス目
+  // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
+  const context = getContext(internals); // 2パス目
+  // コンテキストを見ながら最適化されたCSSを構築
+
+  return internals.map(v => __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context));
+}
 
 /**
  * 配列で指定したプロパティを動的に生やす
@@ -85,7 +176,7 @@ function defineThemeVariables(colorParams, effectParams) {
  * console.log(o.red) //=> #ff0000
  */
 
-const factory = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
+const defineProperties = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
   get: () => chain(key),
   enumerable: true,
   configurable: true
@@ -99,14 +190,14 @@ const factory = (source, member, chain) => Object.defineProperties(source, Objec
  *
  * @example
  *
- * const o = argumentedFactory({}, ['red', 'blue'],
+ * const o = defineMethods({}, ['red', 'blue'],
  *   (color, alpha: number) => hex(color, alpha)
  * )
  *
  * console.log(o.red(0.5)) //=> #ff000077
  */
 
-const argumentedFactory = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
+const defineMethods = (source, member, chain) => Object.defineProperties(source, Object.fromEntries(member.map(key => [key, {
   value: (...args) => chain(key, ...args),
   enumerable: true,
   configurable: true
@@ -119,7 +210,7 @@ const argumentedFactory = (source, member, chain) => Object.defineProperties(sou
  *
  * @example
  *
- * const o = constFactory({}, {
+ * const o = defineConstantProperties({}, {
  *   red: '#f00',
  *   blue: '#00f',
  * })
@@ -127,7 +218,7 @@ const argumentedFactory = (source, member, chain) => Object.defineProperties(sou
  * console.log(o.red) //=> #f00
  */
 
-const constFactory = (source, def) => factory(source, Object.keys(def), key => def[key]);
+const defineConstantProperties = (source, def) => defineProperties(source, Object.keys(def), key => def[key]);
 /**
  * 配列で指定したモディファイア(プロパティ)をチェーン可能な再帰オブジェクトを動的に生やす
  *
@@ -136,16 +227,16 @@ const constFactory = (source, def) => factory(source, Object.keys(def), key => d
  *
  * @example
  *
- * const o = modifiedArgumentedFactory(['red', 'blue'],
+ * const o = definePropertyChains(['red', 'blue'],
  *   modifiers => modifiers.map(color => hex(color)).join(',')
  * )
  *
  * console.log(o.red.blue) => #f00,#00f
  */
 
-const modifiedFactory = (modifiers, source) => function recursiveModifiedFactory(applied) {
+const definePropertyChains = (modifiers, source) => function definePropertiesRecursively(applied) {
   const notApplied = modifiers.filter(v => !applied.includes(v));
-  return factory(source(applied), notApplied, modifier => notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([...applied, modifier]));
+  return defineProperties(source(applied), notApplied, modifier => notApplied.length === 0 ? unreachable() : definePropertiesRecursively([...applied, modifier]));
 }([]);
 /**
  * 配列で指定したモディファイア(メソッド)をチェーン可能な再帰オブジェクトを動的に生やす
@@ -156,18 +247,424 @@ const modifiedFactory = (modifiers, source) => function recursiveModifiedFactory
  *
  * @example
  *
- * const o = modifiedArgumentedFactory(['red', 'blue'],
+ * const o = defineMethodChains(['red', 'blue'],
  *   modifiers => modifiers.map(([color, alpha]) => hex(color, alpha)).join(',')
  * , {} as [number])
  *
- * console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
+ * console.log(o.red(0.5).blue(1)) => #ff000077,#0000ffff
+ */
+
+const defineMethodChains = (modifiers, source, ..._inferPhantom) => function defineMethodsRecursively(applied) {
+  const notApplied = modifiers.filter(v => !applied.map(([w]) => w).includes(v));
+  return defineMethods(source(applied), notApplied, (modifier, ...args) => notApplied.length === 0 ? unreachable() : defineMethodsRecursively([...applied, [modifier, ...args]]));
+}([]);
+
+const borderDirections = ['top', 'right', 'bottom', 'left'];
+
+function borderProperty(direction) {
+  return `border-${direction}`;
+}
+
+function borderShorthand(color) {
+  return `solid 1px ${color}`;
+}
+
+const createBorderCss = theme => (variant, directions) => {
+  const all = directions.length === 0;
+  const value = borderShorthand(theme.border[variant].color);
+  return createInternal({
+    toCSS() {
+      return _extends({}, all ? {
+        border: value
+      } : directions.reduce((acc, direction) => _extends({}, acc, {
+        [borderProperty(direction)]: value
+      }), {}));
+    }
+
+  });
+};
+function border(theme) {
+  const borderTypes = keyof(theme.border);
+  const borderCss = createBorderCss(theme);
+  const borderObject = defineConstantProperties({}, {
+    border: defineProperties({}, borderTypes, variant => definePropertyChains(borderDirections, modifiers => borderCss(variant, modifiers)))
+  });
+  return borderObject;
+}
+
+const createBorderRadiusCss = theme => size => {
+  return createInternal({
+    toCSS() {
+      return {
+        borderRadius: px(theme.borderRadius[size])
+      };
+    }
+
+  });
+};
+function borderRadius(theme) {
+  // 角丸
+  const borderRadiusCss = createBorderRadiusCss(theme);
+  const borderRadiusObject = defineConstantProperties({}, {
+    borderRadius: radius => borderRadiusCss(radius)
+  });
+  return borderRadiusObject;
+}
+
+const TRANSITION_DURATION = 0.2;
+/**
+ * context の状態を元に transition を追加する。必ず一番最後に呼ぶ
+ */
+
+function transition(_theme) {
+  const duration = dur(TRANSITION_DURATION);
+
+  const transition = property => ({
+    transition: property.map(v => `${duration} ${v}`).join(', ')
+  });
+
+  function toCSS({
+    colorTransition = false,
+    backgroundColorTransition = false,
+    boxShadowTransition = false
+  }) {
+    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
+  }
+
+  return createInternal({
+    toCSS
+  });
+}
+
+function targetProperty(target) {
+  return target === 'bg' ? 'background-color' : 'color';
+}
+
+const createColorCss = _theme => (target, color, effects = []) => {
+  function toCSS() {
+    return _extends({
+      [targetProperty(target)]: variable(customPropertyToken(color.toString()))
+    }, effects.filter(isSupportedEffect).reduce((acc, effect) => _extends({}, acc, onEffectPseudo(effect, {
+      [targetProperty(target)]: variable(customPropertyToken(color.toString(), [effect]))
+    })), {}));
+  }
+
+  return createInternal({
+    toCSS,
+    context: effects.length > 0 ? target === 'font' ? {
+      colorTransition: true
+    } : {
+      backgroundColorTransition: true
+    } : {}
+  });
+};
+const createGradientColorCss = theme => (color, effects = [], direction) => {
+  const toLinearGradient = gradient(direction);
+
+  function toCSS(context) {
+    const optimized = !shouldCancelHalfLeading(context);
+    const duration = dur(TRANSITION_DURATION);
+
+    if (optimized && effects.length > 0) {
+      return _extends({
+        position: 'relative',
+        zIndex: 0,
+        overflow: 'hidden'
+      }, effects.filter(isSupportedEffect).reduce((acc, effect) => {
+        var _theme$effect$effect;
+
+        return _extends({}, acc, {
+          '&::before': _extends({
+            zIndex: -1
+          }, overlayElement, {
+            transition: `${duration} background-color`
+          }),
+          '&::after': _extends({
+            zIndex: -2
+          }, overlayElement, toLinearGradient(theme.gradientColor[color]))
+        }, onEffectPseudo(effect, {
+          '&::before': {
+            backgroundColor: applyEffect(null, (_theme$effect$effect = theme.effect[effect]) != 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 _extends({}, toLinearGradient(theme.gradientColor[color]), effects.filter(isSupportedEffect).reduce((acc, effect) => {
+      var _theme$effect$effect2;
+
+      return _extends({}, acc, onEffectPseudo(effect, _extends({}, toLinearGradient(applyEffectToGradient((_theme$effect$effect2 = theme.effect[effect]) != null ? _theme$effect$effect2 : [])(theme.gradientColor[color])))));
+    }, {}));
+  }
+
+  return createInternal({
+    toCSS
+  });
+};
+const overlayElement = {
+  content: "''",
+  display: 'block',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0
+};
+function colors(theme) {
+  const colors = keyof(theme.color);
+  const effects = keyof(theme.effect); // 色
+
+  const gradientColors = keyof(theme.gradientColor);
+  const colorCss = createColorCss();
+  const gradientColorCss = createGradientColorCss(theme);
+  const colorObject = defineConstantProperties({}, {
+    bg: objectAssign(defineProperties({}, colors, color => definePropertyChains(effects, modifiers => colorCss('bg', color, modifiers))), defineProperties({}, gradientColors, color => direction => definePropertyChains(effects, modifiers => gradientColorCss(color, modifiers, direction)))),
+    font: defineProperties({}, colors, color => definePropertyChains(effects, modifiers => colorCss('font', color, modifiers)))
+  });
+  return colorObject;
+}
+
+const createElementEffectCss = theme => (effects = []) => createInternal({
+  toCSS() {
+    return effects.filter(isSupportedEffect).reduce((acc, effect) => {
+      var _theme$elementEffect$, _theme$elementEffect$2;
+
+      return _extends({}, acc, onEffectPseudo(effect, {
+        opacity: !Array.isArray(theme.elementEffect[effect]) && ((_theme$elementEffect$ = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$.type) === 'opacity' ? (_theme$elementEffect$2 = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$2.opacity : unreachable()
+      }));
+    }, {});
+  }
+
+});
+function elementEffect(theme) {
+  const effectTypes = keyof(theme.elementEffect); // 要素へのエフェクト (etc: 透過)
+
+  const elementEffectCss = createElementEffectCss(theme);
+  const elementEffectObject = definePropertyChains(effectTypes, modifiers => elementEffectCss(modifiers));
+  return elementEffectObject;
+}
+
+const outlineType = ['focus'];
+
+const outlineCss = (weight, color) => ({
+  boxShadow: `0 0 0 ${px(weight)} ${color}`
+});
+
+const createOutlineColorCss = theme => (variant, modifiers) => {
+  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 => ({
+  [notDisabledSelector]: {
+    '&:focus, &:active': _extends({
+      outline: 'none'
+    }, css),
+    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
+      outline: 'none'
+    },
+    '&:focus-visible': _extends({
+      outline: 'none'
+    }, css)
+  }
+});
+
+function outline(theme) {
+  const outlineCss = createOutlineColorCss(theme);
+  const outlineObject = defineConstantProperties({}, {
+    outline: defineProperties({}, keyof(theme.outline), variant => definePropertyChains(outlineType, modifiers => outlineCss(variant, modifiers)))
+  });
+  return outlineObject;
+}
+
+const fixedProperties = ['width', 'height'];
+const createFixedPxCss = theme => (property, size) => createInternal({
+  toCSS() {
+    return {
+      [property]: size === 'auto' ? 'auto' : px(theme.spacing[size])
+    };
+  }
+
+});
+const createFixedRelativeCss = _theme => (property, amount) => createInternal({
+  toCSS() {
+    return {
+      [property]: amount
+    };
+  }
+
+});
+const createFixedColumnCss = theme => (property, span) => createInternal({
+  toCSS() {
+    return {
+      [property]: px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter))
+    };
+  }
+
+});
+function size(theme) {
+  const fixedPxCss = createFixedPxCss(theme);
+  const fixedColumnCss = createFixedColumnCss(theme);
+  const fixedRelativeCss = createFixedRelativeCss();
+  const fixedObject = defineProperties({}, fixedProperties, property => defineConstantProperties({}, {
+    px: size => fixedPxCss(property, size),
+    column: span => fixedColumnCss(property, span),
+    auto: fixedRelativeCss(property, 'auto'),
+    full: fixedRelativeCss(property, '100%')
+  }));
+  return fixedObject;
+}
+
+const spacingProperties = ['margin', 'padding'];
+const spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
+
+function spacingProperty(property, direction) {
+  return `${property}-${direction}`;
+}
+
+const createSpacingCss = theme => (property, modifiers) => {
+  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;
+  }, {});
+  const hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
+
+  function toCSS({
+    cancelHalfLeadingPx = 0
+  }) {
+    return _extends({}, 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
+    } : {}
+  });
+};
+function spacing(theme) {
+  const spacingCss = createSpacingCss(theme);
+  const spacingObject = defineProperties({}, spacingProperties, spacingProperty => defineMethodChains(spacingDirections, modifiers => spacingCss(spacingProperty, modifiers), {} // 推論のためのメタタイプ
+  ));
+  return spacingObject;
+}
+
+const createTypographyCss = theme => (size, options = {}) => {
+  const {
+    preserveHalfLeading = false,
+    monospace = false,
+    bold = false
+  } = options;
+  const descriptor = theme.typography.size[size];
+  const margin = -halfLeading(descriptor);
+
+  function toCSS(context) {
+    return _extends({
+      fontSize: px(descriptor.fontSize),
+      lineHeight: px(descriptor.lineHeight)
+    }, monospace && {
+      fontFamily: 'monospace'
+    }, bold && {
+      fontWeight: 'bold'
+    }, shouldCancelHalfLeading(context) && {
+      // prevent margin collapsing
+      display: 'flow-root',
+      // cancel half-leading with negative margin
+      '&::before': _extends({}, leadingCancel, {
+        marginTop: px(margin)
+      }),
+      '&::after': _extends({}, leadingCancel, {
+        marginBottom: px(margin)
+      })
+    });
+  }
+
+  return createInternal({
+    toCSS,
+    context: !preserveHalfLeading ? {
+      cancelHalfLeadingPx: margin
+    } : {}
+  });
+};
+const leadingCancel = {
+  display: 'block',
+  width: 0,
+  height: 0,
+  content: `''`
+}; // タイポグラフィ
+
+const typographyModifiers = [// TODO
+'monospace', 'bold', 'preserveHalfLeading'];
+function typography(theme) {
+  const typographyCss = createTypographyCss(theme);
+  const typographyObject = defineProperties({}, ['typography'], _ => size => definePropertyChains(typographyModifiers, modifiers => typographyCss(size, {
+    preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
+    monospace: modifiers.includes('monospace'),
+    bold: modifiers.includes('bold')
+  })));
+  return typographyObject;
+}
+
+/**
+ * `theme(o => [...])` の `o` の部分を構築する
+ *
+ * @param theme テーマオブジェクト
+ * @param DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
  */
 
-const modifiedArgumentedFactory = (modifiers, source, ..._inferPhantom) => function recursiveModifiedFactory(applied) {
-  const notApplied = modifiers.filter(v => !applied.map(([w]) => w).includes(v));
-  return argumentedFactory(source(applied), notApplied, (modifier, ...args) => notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([...applied, [modifier, ...args]]));
-}([]);
-const variable = value => `var(${value})`;
+function createO(theme, 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 {};
+  }
+
+  return objectAssign(colors(theme), typography(theme), spacing(theme), size(theme), elementEffect(theme), border(theme), borderRadius(theme), outline(theme));
+}
 
 let _ = t => t,
     _t,
@@ -428,358 +925,11 @@ const defaultProps = {
 };
 SetThemeScript.defaultProps = defaultProps;
 
-const spacingProperties = ['margin', 'padding'];
-const spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
-const fixedProperties = ['width', 'height'];
-const borderDirections = ['top', 'right', 'bottom', 'left'];
-const outlineType = ['focus'];
-/**
- * `theme(o => [...])` の `o` の部分を構築する
- *
- * @param theme テーマオブジェクト
- * @param isPhantom 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
- */
-
-function builder(theme, isPhantom = false) {
-  if (isPhantom) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {};
-  }
-
-  const colors = objectKeys(theme.color);
-  const effects = objectKeys(theme.effect); // 色
-
-  const gradientColors = objectKeys(theme.gradientColor);
-  const colorCss = createColorCss();
-  const gradientColorCss = createGradientColorCss(theme);
-  const colorObject = constFactory({}, {
-    bg: objectAssign(factory({}, colors, color => modifiedFactory(effects, modifiers => colorCss('bg', color, modifiers))), factory({}, gradientColors, color => direction => modifiedFactory(effects, modifiers => gradientColorCss(color, modifiers, direction)))),
-    font: factory({}, colors, color => modifiedFactory(effects, modifiers => colorCss('font', color, modifiers)))
-  }); // タイポグラフィ
-
-  const typographyModifiers = [// TODO
-  'monospace', 'bold', 'preserveHalfLeading'];
-  const typographyCss = createTypographyCss(theme);
-  const typographyObject = factory({}, ['typography'], _ => size => modifiedFactory(typographyModifiers, modifiers => typographyCss(size, {
-    preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
-    monospace: modifiers.includes('monospace'),
-    bold: modifiers.includes('bold')
-  }))); // スペーシング
-
-  const spacingCss = createSpacingCss(theme);
-  const spacingObject = factory({}, spacingProperties, spacingProperty => modifiedArgumentedFactory(spacingDirections, modifiers => spacingCss(spacingProperty, modifiers), {} // 推論のためのメタタイプ
-  )); // 大きさ
-
-  const fixedPxCss = createFixedPxCss(theme);
-  const fixedColumnCss = createFixedColumnCss(theme);
-  const fixedRelativeCss = createFixedRelativeCss();
-  const fixedObject = factory({}, fixedProperties, property => constFactory({}, {
-    px: size => fixedPxCss(property, size),
-    column: span => fixedColumnCss(property, span),
-    auto: fixedRelativeCss(property, 'auto'),
-    full: fixedRelativeCss(property, '100%')
-  })); // 要素へのエフェクト (etc: 透過)
-
-  const elementEffectCss = createElementEffectCss(theme);
-  const elementEffectObject = modifiedFactory(objectKeys(theme.elementEffect), modifiers => elementEffectCss(modifiers)); // ボーダー
-
-  const borderCss = createBorderCss(theme);
-  const borderObject = constFactory({}, {
-    border: factory({}, objectKeys(theme.border), variant => modifiedFactory(borderDirections, modifiers => borderCss(variant, modifiers)))
-  }); // 角丸
-
-  const borderRadiusCss = createBorderRadiusCss(theme);
-  const borderRadiusObject = constFactory({}, {
-    borderRadius: radius => borderRadiusCss(radius)
-  }); // アウトライン
-
-  const outlineCss = createOutlineColorCss(theme);
-  const outlineObject = constFactory({}, {
-    outline: factory({}, objectKeys(theme.outline), variant => modifiedFactory(outlineType, modifiers => outlineCss(variant, modifiers)))
-  });
-  return objectAssign(colorObject, typographyObject, spacingObject, fixedObject, elementEffectObject, borderObject, borderRadiusObject, outlineObject);
-}
-
-function targetProperty(target) {
-  return target === 'bg' ? 'background-color' : 'color';
-}
-
-function isSupportedEffect(effect) {
-  return ['hover', 'press', 'disabled'].includes(effect);
-}
-
-function onEffectPseudo(effect, css) {
-  return effect === 'hover' ? {
-    '&:hover': {
-      [notDisabledSelector]: css
-    }
-  } : effect === 'press' ? {
-    '&:active': {
-      [notDisabledSelector]: css
-    }
-  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  effect === 'disabled' ? {
-    [disabledSelector]: css
-  } : unreachable(effect);
-}
-
-const createColorCss = _theme => (target, color, effects = []) => internal(() => _extends({
-  [targetProperty(target)]: variable(customPropertyToken(color.toString()))
-}, effects.filter(isSupportedEffect).reduce((acc, effect) => _extends({}, acc, onEffectPseudo(effect, {
-  [targetProperty(target)]: variable(customPropertyToken(color.toString(), [effect]))
-})), {})), effects.length > 0 ? target === 'font' ? {
-  colorTransition: true
-} : {
-  backgroundColorTransition: true
-} : {}); // TODO: deprecate
-
-
-const TRANSITION_DURATION = 0.2;
-
-const createGradientColorCss = theme => (color, effects = [], direction) => {
-  const toLinearGradient = gradient(direction);
-  return internal(context => {
-    const optimized = !useHalfLeadingCanceller(context);
-    const duration = dur(TRANSITION_DURATION);
-
-    if (optimized && effects.length > 0) {
-      return _extends({
-        position: 'relative',
-        zIndex: 0,
-        overflow: 'hidden'
-      }, effects.filter(isSupportedEffect).reduce((acc, effect) => {
-        var _theme$effect$effect;
-
-        return _extends({}, acc, {
-          '&::before': _extends({
-            zIndex: -1
-          }, overlayElement, {
-            transition: `${duration} background-color`
-          }),
-          '&::after': _extends({
-            zIndex: -2
-          }, overlayElement, toLinearGradient(theme.gradientColor[color]))
-        }, onEffectPseudo(effect, {
-          '&::before': {
-            backgroundColor: applyEffect(null, (_theme$effect$effect = theme.effect[effect]) != null ? _theme$effect$effect : [])
-          }
-        }));
-      }, {}));
-    } else {
-      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 _extends({}, toLinearGradient(theme.gradientColor[color]), effects.filter(isSupportedEffect).reduce((acc, effect) => {
-        var _theme$effect$effect2;
-
-        return _extends({}, acc, onEffectPseudo(effect, _extends({}, toLinearGradient(applyEffectToGradient((_theme$effect$effect2 = theme.effect[effect]) != null ? _theme$effect$effect2 : [])(theme.gradientColor[color])))));
-      }, {}));
-    }
-  });
-};
-/**
- * @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
- */
-
-
-const onFocus = css => ({
-  [notDisabledSelector]: {
-    '&:focus, &:active': _extends({
-      outline: 'none'
-    }, css),
-    '&:focus:not(:focus-visible), &:active:not(:focus-visible)': {
-      outline: 'none'
-    },
-    '&:focus-visible': _extends({
-      outline: 'none'
-    }, css)
-  }
-});
-
-const outlineCss = (weight, color) => ({
-  boxShadow: `0 0 0 ${px(weight)} ${color}`
-});
-
-const createOutlineColorCss = theme => (variant, modifiers) => {
-  const weight = theme.outline[variant].weight;
-  const color = theme.outline[variant].color;
-  return internal(() => modifiers.includes('focus') ? onFocus(outlineCss(weight, color)) : {
-    '&&': {
-      [notDisabledSelector]: outlineCss(weight, color)
-    }
-  }, {
-    boxShadowTransition: true
-  });
-};
-
-const overlayElement = {
-  content: "''",
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-}; // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
-// -> before/afterを入れる
-
-const useHalfLeadingCanceller = ({
-  cancelHalfLeadingPx,
-  hasVerticalPadding: _hasVerticalPadding = false
-}) => cancelHalfLeadingPx !== undefined && !_hasVerticalPadding;
-
-const createTypographyCss = theme => (size, options = {}) => {
-  const {
-    preserveHalfLeading = false,
-    monospace = false,
-    bold = false
-  } = options;
-  const descriptor = theme.typography.size[size];
-  const margin = -halfLeading(descriptor);
-  return internal(context => _extends({
-    fontSize: px(descriptor.fontSize),
-    lineHeight: px(descriptor.lineHeight)
-  }, monospace && {
-    fontFamily: 'monospace'
-  }, bold && {
-    fontWeight: 'bold'
-  }, useHalfLeadingCanceller(context) && {
-    // prevent margin collapsing
-    display: 'flow-root',
-    // cancel half-leading with negative margin
-    '&::before': _extends({}, leadingCancel, {
-      marginTop: px(margin)
-    }),
-    '&::after': _extends({}, leadingCancel, {
-      marginBottom: px(margin)
-    })
-  }), !preserveHalfLeading ? {
-    cancelHalfLeadingPx: margin
-  } : {});
-};
-
-const leadingCancel = {
-  display: 'block',
-  width: 0,
-  height: 0,
-  content: `''`
-};
-
-function spacingProperty(property, direction) {
-  return `${property}-${direction}`;
-}
-
-const createSpacingCss = theme => (property, modifiers) => {
-  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;
-  }, {});
-  const hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
-  return internal(({
-    cancelHalfLeadingPx: _cancelHalfLeadingPx = 0
-  }) => _extends({}, 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])
-  }), hasVerticalPadding ? {
-    hasVerticalPadding: true
-  } : {});
-};
-
-const createFixedPxCss = theme => (property, size) => internal(() => ({
-  [property]: size === 'auto' ? 'auto' : px(theme.spacing[size])
-}));
-
-const createFixedRelativeCss = _theme => (property, amount) => internal(() => ({
-  [property]: amount
-}));
-
-const createFixedColumnCss = theme => (property, span) => internal(() => ({
-  [property]: px(columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter))
-}));
-
-const createElementEffectCss = theme => (effects = []) => internal(() => effects.filter(isSupportedEffect).reduce((acc, effect) => {
-  var _theme$elementEffect$, _theme$elementEffect$2;
-
-  return _extends({}, acc, onEffectPseudo(effect, {
-    opacity: !Array.isArray(theme.elementEffect[effect]) && ((_theme$elementEffect$ = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$.type) === 'opacity' ? (_theme$elementEffect$2 = theme.elementEffect[effect]) == null ? void 0 : _theme$elementEffect$2.opacity : unreachable()
-  }));
-}, {}));
-
-function borderProperty(direction) {
-  return `border-${direction}`;
-}
-
-function borderShorthand(color) {
-  return `solid 1px ${color}`;
-}
-
-const createBorderCss = theme => (variant, directions) => {
-  const all = directions.length === 0;
-  const value = borderShorthand(theme.border[variant].color);
-  return internal(() => _extends({}, all ? {
-    border: value
-  } : directions.reduce((acc, direction) => _extends({}, acc, {
-    [borderProperty(direction)]: value
-  }), {})));
-};
-
-const createBorderRadiusCss = theme => size => internal(() => ({
-  borderRadius: px(theme.borderRadius[size])
-}));
-
-const commonSpec = _theme => {
-  const duration = dur(TRANSITION_DURATION);
-
-  const transition = property => ({
-    transition: property.map(v => `${duration} ${v}`).join(', ')
-  });
-
-  return internal(({
-    colorTransition: _colorTransition = false,
-    backgroundColorTransition: _backgroundColorTransition = false,
-    boxShadowTransition: _boxShadowTransition = false
-  }) => transition([_colorTransition ? 'color' : null, _backgroundColorTransition ? 'background-color' : null, _boxShadowTransition ? 'box-shadow' : null].filter(isPresent)));
-};
-
-const internalSym = Symbol('internal');
-
-function internal(operation, context = {}) {
-  return {
-    [internalSym]: {
-      operation,
-      context
-    }
-  };
-}
-
 const nonBlank = value => isPresent(value) && value !== false;
 /**
  * `theme(o => [...])` の `theme` ユーティリティを構築する
  *
- * @param _styled styled-componnets の `styled` そのもの (型推論のために用いられる)
+ * @param _styled - DEPRECATED: styled-componnets の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
  *
  * @example
  *
@@ -793,33 +943,45 @@ const nonBlank = value => isPresent(value) && value !== false;
 
 
 function createTheme(_styled) {
-  // `theme(o => [...])` の `o` の部分の型推論のためだけに使う意味のない変数
-  // Tを型変数のまま渡してcreateThemeが呼ばれるまで型の具象化が行われないようにする
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-  builder({}, true); // ランタイムの `theme(o => [...])` のインターフェースを構築する
-
-
-  return ( // ユーザー定義
-  spec) => ({
-    theme
-  }) => {
-    if (!isPresent(theme)) {
-      // テーマが入っていない場合は復旧不可能なのでエラーにする
-      throw noThemeProvider;
-    } // styled-componentsのランタイムから受け取ったthemeオブジェクトをbuilderに食わせて`o`をつくる
-    // さらに、ユーザー定義にbuilderが構築した`o`を食わせる
-    // (`o`を一時変数に入れてしまうと型Tの具象化が行われるので関数合成を優先する)
-
-
-    const rawSpecDescriptor = spec(builder(theme)); // ユーザー定義の配列を整形
-
-    const specDescriptor = [...(Array.isArray(rawSpecDescriptor) ? rawSpecDescriptor : [rawSpecDescriptor]), commonSpec()].filter(nonBlank); // 1パス目
-    // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
-
-    const context = specDescriptor.reduce((acc, v) => _extends({}, acc, v[internalSym].context), {}); // 2パス目
-    // コンテキストを見ながら最適化されたCSSを構築
+  /**
+   * 本当は `type Builder = ReturnType<createO<T>>` みたいな型を作って、それを o の型にしたい。
+   * が、styled がつくられた時点の TypeScript ではこういうジェネリクスの使い方ができなかった
+   * なので代わりに特に意味のない `createO` の呼び出しをやっている
+   */
+  createO( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+  {},
+  /** DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE = */
+  true); // ランタイムの `theme(o => [...])` のインターフェースを構築する
+
+  return function theme(specFn) {
+    // styled-components のテンプレートに埋め込める関数
+    return function interpolate({
+      theme
+    }) {
+      if (!isPresent(theme)) {
+        // テーマが入っていない場合は復旧不可能なのでエラーにする
+        throw noThemeProvider;
+      }
 
-    return specDescriptor.map(v => v[internalSym].operation(context));
+      const internals = [// ユーザーが定義したルール
+      ...wrapArray(
+      /**
+       * こう書いてはいけない
+       *
+       * ❌
+       * ```ts
+       * const o = createO(theme)
+       * const declaration = spec(o)
+       * ```
+       *
+       * `o` を一時変数に入れてしまうと型 `T` の具象化が行われるので関数内に書く
+       */
+      specFn(
+      /** o = */
+      createO(theme))), // 必ず挿入される共通のルール
+      transition()].filter(nonBlank);
+      return toCSSObjects(internals);
+    };
   };
 }