@charcoal-ui/styled 2.4.0 → 2.5.0

package/dist/index.cjs

@@ -1,5 +1,5 @@
-var warning = require('warning');
 var utils = require('@charcoal-ui/utils');
+var warning = require('warning');
 var foundation = require('@charcoal-ui/foundation');
 var React = require('react');
 var styledComponents = require('styled-components');
@@ -51,9 +51,27 @@ var isPresent = function isPresent(value) {
 function objectAssign() {
   return Object.assign.apply(Object, [{}].concat([].slice.call(arguments)));
 }
-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];
+}
 var noThemeProvider = new Error('`theme` is invalid. `<ThemeProvider>` is not likely mounted.');
 /**
  * 子孫要素で使われるカラーテーマの CSS Variables を上書きする
@@ -89,6 +107,84 @@ function defineThemeVariables(colorParams, effectParams) {
     });
   };
 }
+function isSupportedEffect(effect) {
+  return ['hover', 'press', 'disabled'].includes(effect);
+}
+var variable = function variable(value) {
+  return "var(" + value + ")";
+};
+function onEffectPseudo(effect, css) {
+  var _hover, _active, _ref4;
+
+  return effect === 'hover' ? {
+    '&:hover': (_hover = {}, _hover[utils.notDisabledSelector] = css, _hover)
+  } : effect === 'press' ? {
+    '&:active': (_active = {}, _active[utils.notDisabledSelector] = css, _active)
+  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  effect === 'disabled' ? (_ref4 = {}, _ref4[utils.disabledSelector] = css, _ref4) : unreachable(effect);
+}
+
+/**
+ * 絶対にこれを export してはいけない
+ *
+ * さもないと `o.bg[internalSym]` みたいな叩き方が可能になってしまう（補完にも意図せず出てしまう）
+ */
+var internalSym = Symbol('internal');
+/**
+ * CSSObject に変換可能なオブジェクトを作成する
+ *
+ * 実際に CSSObject に変換するには外部から `__DO_NOT_USE_GET_INTERNAL__` を使わなければならない
+ *
+ * これ以降メソッドチェーンが続いてもいいし、続かなくても良い
+ */
+
+function createInternal(_ref) {
+  var _ref2;
+
+  var toCSS = _ref.toCSS,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {} : _ref$context;
+  return _ref2 = {}, _ref2[internalSym] = {
+    toCSS: toCSS,
+    context: context
+  }, _ref2;
+}
+
+function __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal) {
+  return internal[internalSym];
+} // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
+// -> before/afterを入れる
+
+
+var shouldCancelHalfLeading = function shouldCancelHalfLeading(_ref3) {
+  var cancelHalfLeadingPx = _ref3.cancelHalfLeadingPx,
+      _ref3$hasVerticalPadd = _ref3.hasVerticalPadding,
+      hasVerticalPadding = _ref3$hasVerticalPadd === void 0 ? false : _ref3$hasVerticalPadd;
+  return cancelHalfLeadingPx !== undefined && !hasVerticalPadding;
+};
+/**
+ * 個別の Internal（ o.〇〇 の返り値 ）が提出した context の中身を1つの context にまとめる
+ */
+
+function getContext(internals) {
+  return internals.reduce(function (context, internal) {
+    return _extends({}, context, __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(internal).context);
+  }, {});
+}
+/**
+ * 全ユーザー定義からコンテキスト生成し、styled-components 向けに CSSObject を構築
+ */
+
+function toCSSObjects(internals) {
+  // 1パス目
+  // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
+  var context = getContext(internals); // 2パス目
+  // コンテキストを見ながら最適化されたCSSを構築
+
+  return internals.map(function (v) {
+    return __DO_NOT_USE_ACCESS_PRIVATE_PROPERTY__(v).toCSS(context);
+  });
+}
 
 /**
  * 配列で指定したプロパティを動的に生やす
@@ -106,7 +202,7 @@ function defineThemeVariables(colorParams, effectParams) {
  * console.log(o.red) //=> #ff0000
  */
 
-var factory = function factory(source, member, chain) {
+var defineProperties = function defineProperties(source, member, chain) {
   return Object.defineProperties(source, Object.fromEntries(member.map(function (key) {
     return [key, {
       get: function get() {
@@ -126,14 +222,14 @@ var factory = function factory(source, member, chain) {
  *
  * @example
  *
- * const o = argumentedFactory({}, ['red', 'blue'],
+ * const o = defineMethods({}, ['red', 'blue'],
  *   (color, alpha: number) => hex(color, alpha)
  * )
  *
  * console.log(o.red(0.5)) //=> #ff000077
  */
 
-var argumentedFactory = function argumentedFactory(source, member, chain) {
+var defineMethods = function defineMethods(source, member, chain) {
   return Object.defineProperties(source, Object.fromEntries(member.map(function (key) {
     return [key, {
       value: function value() {
@@ -152,7 +248,7 @@ var argumentedFactory = function argumentedFactory(source, member, chain) {
  *
  * @example
  *
- * const o = constFactory({}, {
+ * const o = defineConstantProperties({}, {
  *   red: '#f00',
  *   blue: '#00f',
  * })
@@ -160,8 +256,8 @@ var argumentedFactory = function argumentedFactory(source, member, chain) {
  * console.log(o.red) //=> #f00
  */
 
-var constFactory = function constFactory(source, def) {
-  return factory(source, Object.keys(def), function (key) {
+var defineConstantProperties = function defineConstantProperties(source, def) {
+  return defineProperties(source, Object.keys(def), function (key) {
     return def[key];
   });
 };
@@ -173,20 +269,20 @@ var constFactory = function constFactory(source, def) {
  *
  * @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
  */
 
-var modifiedFactory = function modifiedFactory(modifiers, source) {
-  return function recursiveModifiedFactory(applied) {
+var definePropertyChains = function definePropertyChains(modifiers, source) {
+  return function definePropertiesRecursively(applied) {
     var notApplied = modifiers.filter(function (v) {
       return !applied.includes(v);
     });
-    return factory(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([].concat(applied, [modifier]));
+    return defineProperties(source(applied), notApplied, function (modifier) {
+      return notApplied.length === 0 ? unreachable() : definePropertiesRecursively([].concat(applied, [modifier]));
     });
   }([]);
 };
@@ -199,510 +295,289 @@ var modifiedFactory = function modifiedFactory(modifiers, source) {
  *
  * @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
  */
 
-var modifiedArgumentedFactory = function modifiedArgumentedFactory(modifiers, source) {
-  return function recursiveModifiedFactory(applied) {
+var defineMethodChains = function defineMethodChains(modifiers, source) {
+  return function defineMethodsRecursively(applied) {
     var notApplied = modifiers.filter(function (v) {
       return !applied.map(function (_ref) {
         var w = _ref[0];
         return w;
       }).includes(v);
     });
-    return argumentedFactory(source(applied), notApplied, function (modifier) {
-      return notApplied.length === 0 ? unreachable() : recursiveModifiedFactory([].concat(applied, [[modifier].concat([].slice.call(arguments, 1))]));
+    return defineMethods(source(applied), notApplied, function (modifier) {
+      return notApplied.length === 0 ? unreachable() : defineMethodsRecursively([].concat(applied, [[modifier].concat([].slice.call(arguments, 1))]));
     });
   }([]);
 };
-var variable = function variable(value) {
-  return "var(" + value + ")";
-};
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var GlobalStyle = styledComponents.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var themeMap = _ref.themeMap,
-      background = _ref.background;
-  return Object.entries(themeMap).map(function (_ref2) {
-    var key = _ref2[0],
-        theme = _ref2[1];
-    return key.startsWith('@media') ? styledComponents.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n            ", " {\n              :root {\n                ", "\n                ", "\n              }\n            }\n          "])), key, background !== undefined && styledComponents.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n                  background-color: ", ";\n                "])), theme.color[background]), defineColorVariableCSS(theme)) : styledComponents.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            /* stylelint-disable-next-line no-duplicate-selectors */\n            ", " {\n              ", "\n              ", "\n            }\n          "])), key, background !== undefined && styledComponents.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n                background-color: ", ";\n              "])), theme.color[background]), defineColorVariableCSS(theme));
-  });
-});
-function TokenInjector(_ref3) {
-  var themeMap = _ref3.theme,
-      background = _ref3.background;
-  return /*#__PURE__*/React__default["default"].createElement(GlobalStyle, {
-    themeMap: themeMap,
-    background: background
-  });
+var borderDirections = ['top', 'right', 'bottom', 'left'];
+
+function borderProperty(direction) {
+  return "border-" + direction;
 }
 
-var defineColorVariableCSS = function defineColorVariableCSS(theme) {
-  return Object.entries(defineThemeVariables(theme.color)({
-    theme: theme
-  })).map(function (_ref4) {
-    var varName = _ref4[0],
-        value = _ref4[1];
-    return variableDefinition(varName, value.toString());
-  }).join(';');
-};
+function borderShorthand(color) {
+  return "solid 1px " + color;
+}
 
-var variableDefinition = function variableDefinition(prop, value) {
-  return prop + ": " + value;
+var createBorderCss = function createBorderCss(theme) {
+  return function (variant, directions) {
+    var all = directions.length === 0;
+    var value = borderShorthand(theme.border[variant].color);
+    return createInternal({
+      toCSS: function toCSS() {
+        return _extends({}, all ? {
+          border: value
+        } : directions.reduce(function (acc, direction) {
+          var _extends2;
+
+          return _extends({}, acc, (_extends2 = {}, _extends2[borderProperty(direction)] = value, _extends2));
+        }, {}));
+      }
+    });
+  };
 };
-
-var LOCAL_STORAGE_KEY = 'charcoal-theme';
-var DEFAULT_ROOT_ATTRIBUTE = 'theme';
-var keyStringRegExp = new RegExp(/^(\w|-)+$/);
-/**
- * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
- * @param key 検証するキー
- */
-
-function assertKeyString(key) {
-  if (!keyStringRegExp.test(key)) {
-    throw new Error("Unexpected key :" + key + ", expect: /^(\\w|-)+$/");
-  }
+function border(theme) {
+  var borderTypes = keyof(theme.border);
+  var borderCss = createBorderCss(theme);
+  var borderObject = defineConstantProperties({}, {
+    border: defineProperties({}, borderTypes, function (variant) {
+      return definePropertyChains(borderDirections, function (modifiers) {
+        return borderCss(variant, modifiers);
+      });
+    })
+  });
+  return borderObject;
 }
-/**
- * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
- */
-
-var themeSetter = function themeSetter(attr) {
-  if (attr === void 0) {
-    attr = DEFAULT_ROOT_ATTRIBUTE;
-  }
 
-  return function (theme) {
-    assertKeyString(attr);
-
-    if (theme !== undefined) {
-      document.documentElement.dataset[attr] = theme;
-    } else {
-      delete document.documentElement.dataset[attr];
-    }
+var createBorderRadiusCss = function createBorderRadiusCss(theme) {
+  return function (size) {
+    return createInternal({
+      toCSS: function toCSS() {
+        return {
+          borderRadius: utils.px(theme.borderRadius[size])
+        };
+      }
+    });
   };
 };
-/**
- * `<html data-theme="dark">` にマッチするセレクタを生成する
- */
-
-function themeSelector(theme, attr) {
-  return ":root[data-" + (attr != null ? attr : DEFAULT_ROOT_ATTRIBUTE) + "='" + theme + "']";
+function borderRadius(theme) {
+  // 角丸
+  var borderRadiusCss = createBorderRadiusCss(theme);
+  var borderRadiusObject = defineConstantProperties({}, {
+    borderRadius: function borderRadius(radius) {
+      return borderRadiusCss(radius);
+    }
+  });
+  return borderRadiusObject;
 }
-/**
- * prefers-color-scheme を利用する media クエリを生成する
- */
 
-function prefersColorScheme(theme) {
-  return "@media (prefers-color-scheme: " + theme + ")";
-}
+var TRANSITION_DURATION = 0.2;
 /**
- * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
+ * context の状態を元に transition を追加する。必ず一番最後に呼ぶ
  */
 
-function useThemeSetter(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$key = _ref.key,
-      key = _ref$key === void 0 ? LOCAL_STORAGE_KEY : _ref$key,
-      _ref$setter = _ref.setter,
-      setter = _ref$setter === void 0 ? themeSetter() : _ref$setter;
-
-  var _useTheme = useTheme(key),
-      theme = _useTheme[0],
-      system = _useTheme[2];
+function transition(_theme) {
+  var duration = utils.dur(TRANSITION_DURATION);
 
-  React.useEffect(function () {
-    if (theme === undefined) {
-      return;
-    } // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
+  var transition = function transition(property) {
+    return {
+      transition: property.map(function (v) {
+        return duration + " " + v;
+      }).join(', ')
+    };
+  };
 
+  function toCSS(_ref) {
+    var _ref$colorTransition = _ref.colorTransition,
+        colorTransition = _ref$colorTransition === void 0 ? false : _ref$colorTransition,
+        _ref$backgroundColorT = _ref.backgroundColorTransition,
+        backgroundColorTransition = _ref$backgroundColorT === void 0 ? false : _ref$backgroundColorT,
+        _ref$boxShadowTransit = _ref.boxShadowTransition,
+        boxShadowTransition = _ref$boxShadowTransit === void 0 ? false : _ref$boxShadowTransit;
+    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
+  }
 
-    setter(system ? undefined : theme);
-  }, [setter, system, theme]);
+  return createInternal({
+    toCSS: toCSS
+  });
 }
-/**
- * 同期的にLocalStorageからテーマを取得するヘルパ
- */
-
-function getThemeSync(key) {
-  if (key === void 0) {
-    key = LOCAL_STORAGE_KEY;
-  }
 
-  var theme = localStorage.getItem(key);
-  return theme;
+function targetProperty(target) {
+  return target === 'bg' ? 'background-color' : 'color';
 }
-/**
- * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
- *
- * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
- */
 
-var useTheme = function useTheme(key) {
-  if (key === void 0) {
-    key = LOCAL_STORAGE_KEY;
-  }
+var createColorCss = function createColorCss(_theme) {
+  return function (target, color, effects) {
+    if (effects === void 0) {
+      effects = [];
+    }
 
-  assertKeyString(key);
-  var isDark = useMedia('(prefers-color-scheme: dark)');
-  var media = isDark !== undefined ? isDark ? 'dark' : 'light' : undefined;
+    function toCSS() {
+      var _extends2;
 
-  var _useLocalStorage = useLocalStorage(key),
-      local = _useLocalStorage[0],
-      setTheme = _useLocalStorage[1],
-      ready = _useLocalStorage[2];
+      return _extends((_extends2 = {}, _extends2[targetProperty(target)] = variable(utils.customPropertyToken(color.toString())), _extends2), effects.filter(isSupportedEffect).reduce(function (acc, effect) {
+        var _onEffectPseudo;
 
-  var theme = !ready || media === undefined ? undefined : local != null ? local : media;
-  var system = local === undefined;
-  return [theme, setTheme, system];
+        return _extends({}, acc, onEffectPseudo(effect, (_onEffectPseudo = {}, _onEffectPseudo[targetProperty(target)] = variable(utils.customPropertyToken(color.toString(), [effect])), _onEffectPseudo)));
+      }, {}));
+    }
+
+    return createInternal({
+      toCSS: toCSS,
+      context: effects.length > 0 ? target === 'font' ? {
+        colorTransition: true
+      } : {
+        backgroundColorTransition: true
+      } : {}
+    });
+  };
 };
-function useLocalStorage(key, defaultValue) {
-  var _useState = React.useState(false),
-      ready = _useState[0],
-      setReady = _useState[1];
+var createGradientColorCss = function createGradientColorCss(theme) {
+  return function (color, effects, direction) {
+    if (effects === void 0) {
+      effects = [];
+    }
 
-  var _useState2 = React.useState(),
-      state = _useState2[0],
-      setState = _useState2[1];
+    var toLinearGradient = utils.gradient(direction);
 
-  var defaultValueMemo = React.useMemo(function () {
-    return defaultValue == null ? void 0 : defaultValue();
-  }, [defaultValue]);
-  React.useEffect(function () {
-    fetch();
-    window.addEventListener('storage', handleStorage);
-    return function () {
-      window.removeEventListener('storage', handleStorage);
-    };
-  });
-
-  var handleStorage = function handleStorage(e) {
-    if (e.storageArea !== localStorage) {
-      return;
-    }
-
-    if (e.key !== key) {
-      return;
-    }
-
-    fetch();
-  };
+    function toCSS(context) {
+      var optimized = !shouldCancelHalfLeading(context);
+      var duration = utils.dur(TRANSITION_DURATION);
 
-  var fetch = function fetch() {
-    var _ref2;
+      if (optimized && effects.length > 0) {
+        return _extends({
+          position: 'relative',
+          zIndex: 0,
+          overflow: 'hidden'
+        }, effects.filter(isSupportedEffect).reduce(function (acc, effect) {
+          var _theme$effect$effect;
 
-    var raw = localStorage.getItem(key);
-    setState((_ref2 = raw !== null ? deserialize(raw) : null) != null ? _ref2 : defaultValueMemo);
-    setReady(true);
-  };
+          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: utils.applyEffect(null, (_theme$effect$effect = theme.effect[effect]) != null ? _theme$effect$effect : [])
+            }
+          }));
+        }, {}));
+      }
 
-  var set = function set(value) {
-    if (value === undefined) {
-      // undefinedがセットされる場合にはkeyごと削除
-      localStorage.removeItem(key);
-    } else {
-      var raw = serialize(value);
-      localStorage.setItem(key, raw);
-    } // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
+      warning__default["default"](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(function (acc, effect) {
+        var _theme$effect$effect2;
 
+        return _extends({}, acc, onEffectPseudo(effect, _extends({}, toLinearGradient(utils.applyEffectToGradient((_theme$effect$effect2 = theme.effect[effect]) != null ? _theme$effect$effect2 : [])(theme.gradientColor[color])))));
+      }, {}));
+    }
 
-    var event = new StorageEvent('storage', {
-      bubbles: true,
-      cancelable: false,
-      key: key,
-      url: location.href,
-      storageArea: localStorage
+    return createInternal({
+      toCSS: toCSS
     });
-    dispatchEvent(event);
   };
-
-  return [state != null ? state : defaultValueMemo, set, ready];
-}
-
-function deserialize(raw) {
-  try {
-    return JSON.parse(raw);
-  } catch (_unused) {
-    // syntax error はすべて文字列として扱う
-    return raw;
-  }
-}
-
-function serialize(value) {
-  if (typeof value === 'string') {
-    return value;
-  } else {
-    return JSON.stringify(value);
-  }
-}
-
-function useMedia(query) {
-  var _useState3 = React.useState(),
-      match = _useState3[0],
-      setState = _useState3[1];
-
-  React.useEffect(function () {
-    var matcher = window.matchMedia(query);
-
-    var onChange = function onChange() {
-      setState(matcher.matches);
-    };
-
-    matcher.addEventListener('change', onChange);
-    setState(matcher.matches);
-    return function () {
-      matcher.removeEventListener('change', onChange);
-    };
-  }, [query]);
-  return match;
-}
-
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns ソースコードの文字列
- */
-
-function makeSetThemeScriptCode(_temp) {
-  var _ref = _temp === void 0 ? defaultProps : _temp,
-      _ref$localStorageKey = _ref.localStorageKey,
-      localStorageKey = _ref$localStorageKey === void 0 ? defaultProps.localStorageKey : _ref$localStorageKey,
-      _ref$rootAttribute = _ref.rootAttribute,
-      rootAttribute = _ref$rootAttribute === void 0 ? defaultProps.rootAttribute : _ref$rootAttribute;
-
-  assertKeyString(localStorageKey);
-  assertKeyString(rootAttribute);
-  return "'use strict';\n(function () {\n    var localStorageKey = '" + localStorageKey + "'\n    var rootAttribute = '" + rootAttribute + "'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n";
-}
-/**
- * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
- * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
- * @returns
- */
-
-function SetThemeScript(props) {
-  var src = makeSetThemeScriptCode(props);
-  return /*#__PURE__*/React__default["default"].createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: src
-    }
-  });
-}
-var defaultProps = {
-  localStorageKey: LOCAL_STORAGE_KEY,
-  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
 };
-SetThemeScript.defaultProps = defaultProps;
-
-var spacingProperties = ['margin', 'padding'];
-var spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
-var fixedProperties = ['width', 'height'];
-var borderDirections = ['top', 'right', 'bottom', 'left'];
-var outlineType = ['focus'];
-/**
- * `theme(o => [...])` の `o` の部分を構築する
- *
- * @param theme テーマオブジェクト
- * @param isPhantom 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
- */
-
-function builder(theme, isPhantom) {
-  if (isPhantom === void 0) {
-    isPhantom = false;
-  }
-
-  if (isPhantom) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return {};
-  }
-
-  var colors = objectKeys(theme.color);
-  var effects = objectKeys(theme.effect); // 色
+var overlayElement = {
+  content: "''",
+  display: 'block',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0
+};
+function colors(theme) {
+  var colors = keyof(theme.color);
+  var effects = keyof(theme.effect); // 色
 
-  var gradientColors = objectKeys(theme.gradientColor);
+  var gradientColors = keyof(theme.gradientColor);
   var colorCss = createColorCss();
   var gradientColorCss = createGradientColorCss(theme);
-  var colorObject = constFactory({}, {
-    bg: objectAssign(factory({}, colors, function (color) {
-      return modifiedFactory(effects, function (modifiers) {
+  var colorObject = defineConstantProperties({}, {
+    bg: objectAssign(defineProperties({}, colors, function (color) {
+      return definePropertyChains(effects, function (modifiers) {
         return colorCss('bg', color, modifiers);
       });
-    }), factory({}, gradientColors, function (color) {
+    }), defineProperties({}, gradientColors, function (color) {
       return function (direction) {
-        return modifiedFactory(effects, function (modifiers) {
+        return definePropertyChains(effects, function (modifiers) {
           return gradientColorCss(color, modifiers, direction);
         });
       };
     })),
-    font: factory({}, colors, function (color) {
-      return modifiedFactory(effects, function (modifiers) {
+    font: defineProperties({}, colors, function (color) {
+      return definePropertyChains(effects, function (modifiers) {
         return colorCss('font', color, modifiers);
       });
     })
-  }); // タイポグラフィ
-
-  var typographyModifiers = [// TODO
-  'monospace', 'bold', 'preserveHalfLeading'];
-  var typographyCss = createTypographyCss(theme);
-  var typographyObject = factory({}, ['typography'], function (_) {
-    return function (size) {
-      return modifiedFactory(typographyModifiers, function (modifiers) {
-        return typographyCss(size, {
-          preserveHalfLeading: modifiers.includes('preserveHalfLeading'),
-          monospace: modifiers.includes('monospace'),
-          bold: modifiers.includes('bold')
-        });
-      });
-    };
-  }); // スペーシング
-
-  var spacingCss = createSpacingCss(theme);
-  var spacingObject = factory({}, spacingProperties, function (spacingProperty) {
-    return modifiedArgumentedFactory(spacingDirections, function (modifiers) {
-      return spacingCss(spacingProperty, modifiers);
-    });
-  }); // 大きさ
-
-  var fixedPxCss = createFixedPxCss(theme);
-  var fixedColumnCss = createFixedColumnCss(theme);
-  var fixedRelativeCss = createFixedRelativeCss();
-  var fixedObject = factory({}, fixedProperties, function (property) {
-    return constFactory({}, {
-      px: function px(size) {
-        return fixedPxCss(property, size);
-      },
-      column: function column(span) {
-        return fixedColumnCss(property, span);
-      },
-      auto: fixedRelativeCss(property, 'auto'),
-      full: fixedRelativeCss(property, '100%')
-    });
-  }); // 要素へのエフェクト (etc: 透過)
-
-  var elementEffectCss = createElementEffectCss(theme);
-  var elementEffectObject = modifiedFactory(objectKeys(theme.elementEffect), function (modifiers) {
-    return elementEffectCss(modifiers);
-  }); // ボーダー
-
-  var borderCss = createBorderCss(theme);
-  var borderObject = constFactory({}, {
-    border: factory({}, objectKeys(theme.border), function (variant) {
-      return modifiedFactory(borderDirections, function (modifiers) {
-        return borderCss(variant, modifiers);
-      });
-    })
-  }); // 角丸
-
-  var borderRadiusCss = createBorderRadiusCss(theme);
-  var borderRadiusObject = constFactory({}, {
-    borderRadius: function borderRadius(radius) {
-      return borderRadiusCss(radius);
-    }
-  }); // アウトライン
-
-  var outlineCss = createOutlineColorCss(theme);
-  var outlineObject = constFactory({}, {
-    outline: factory({}, objectKeys(theme.outline), function (variant) {
-      return modifiedFactory(outlineType, function (modifiers) {
-        return 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);
+  return colorObject;
 }
 
-function onEffectPseudo(effect, css) {
-  var _hover, _active, _ref;
-
-  return effect === 'hover' ? {
-    '&:hover': (_hover = {}, _hover[utils.notDisabledSelector] = css, _hover)
-  } : effect === 'press' ? {
-    '&:active': (_active = {}, _active[utils.notDisabledSelector] = css, _active)
-  } : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  effect === 'disabled' ? (_ref = {}, _ref[utils.disabledSelector] = css, _ref) : unreachable(effect);
-}
-
-var createColorCss = function createColorCss(_theme) {
-  return function (target, color, effects) {
+var createElementEffectCss = function createElementEffectCss(theme) {
+  return function (effects) {
     if (effects === void 0) {
       effects = [];
     }
 
-    return internal(function () {
-      var _extends2;
-
-      return _extends((_extends2 = {}, _extends2[targetProperty(target)] = variable(utils.customPropertyToken(color.toString())), _extends2), effects.filter(isSupportedEffect).reduce(function (acc, effect) {
-        var _onEffectPseudo;
+    return createInternal({
+      toCSS: function toCSS() {
+        return effects.filter(isSupportedEffect).reduce(function (acc, effect) {
+          var _theme$elementEffect$, _theme$elementEffect$2;
 
-        return _extends({}, acc, onEffectPseudo(effect, (_onEffectPseudo = {}, _onEffectPseudo[targetProperty(target)] = variable(utils.customPropertyToken(color.toString(), [effect])), _onEffectPseudo)));
-      }, {}));
-    }, effects.length > 0 ? target === 'font' ? {
-      colorTransition: true
-    } : {
-      backgroundColorTransition: true
-    } : {});
+          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()
+          }));
+        }, {});
+      }
+    });
   };
-}; // TODO: deprecate
-
-
-var TRANSITION_DURATION = 0.2;
+};
+function elementEffect(theme) {
+  var effectTypes = keyof(theme.elementEffect); // 要素へのエフェクト (etc: 透過)
 
-var createGradientColorCss = function createGradientColorCss(theme) {
-  return function (color, effects, direction) {
-    if (effects === void 0) {
-      effects = [];
-    }
+  var elementEffectCss = createElementEffectCss(theme);
+  var elementEffectObject = definePropertyChains(effectTypes, function (modifiers) {
+    return elementEffectCss(modifiers);
+  });
+  return elementEffectObject;
+}
 
-    var toLinearGradient = utils.gradient(direction);
-    return internal(function (context) {
-      var optimized = !useHalfLeadingCanceller(context);
-      var duration = utils.dur(TRANSITION_DURATION);
+var outlineType = ['focus'];
 
-      if (optimized && effects.length > 0) {
-        return _extends({
-          position: 'relative',
-          zIndex: 0,
-          overflow: 'hidden'
-        }, effects.filter(isSupportedEffect).reduce(function (acc, effect) {
-          var _theme$effect$effect;
+var outlineCss = function outlineCss(weight, color) {
+  return {
+    boxShadow: "0 0 0 " + utils.px(weight) + " " + color
+  };
+};
 
-          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: utils.applyEffect(null, (_theme$effect$effect = theme.effect[effect]) != null ? _theme$effect$effect : [])
-            }
-          }));
-        }, {}));
-      } else {
-        warning__default["default"](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(function (acc, effect) {
-          var _theme$effect$effect2;
+var createOutlineColorCss = function createOutlineColorCss(theme) {
+  return function (variant, modifiers) {
+    var weight = theme.outline[variant].weight;
+    var color = theme.outline[variant].color;
+    return createInternal({
+      toCSS: function toCSS() {
+        var _;
 
-          return _extends({}, acc, onEffectPseudo(effect, _extends({}, toLinearGradient(utils.applyEffectToGradient((_theme$effect$effect2 = theme.effect[effect]) != null ? _theme$effect$effect2 : [])(theme.gradientColor[color])))));
-        }, {}));
+        return modifiers.includes('focus') ? onFocus(outlineCss(weight, color)) : {
+          '&&': (_ = {}, _[utils.notDisabledSelector] = outlineCss(weight, color), _)
+        };
+      },
+      context: {
+        boxShadowTransition: true
       }
     });
   };
@@ -711,11 +586,10 @@ var createGradientColorCss = function createGradientColorCss(theme) {
  * @see https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator
  */
 
-
 var onFocus = function onFocus(css) {
-  var _ref2;
+  var _ref;
 
-  return _ref2 = {}, _ref2[utils.notDisabledSelector] = {
+  return _ref = {}, _ref[utils.notDisabledSelector] = {
     '&:focus, &:active': _extends({
       outline: 'none'
     }, css),
@@ -725,48 +599,136 @@ var onFocus = function onFocus(css) {
     '&:focus-visible': _extends({
       outline: 'none'
     }, css)
-  }, _ref2;
+  }, _ref;
 };
 
-var outlineCss = function outlineCss(weight, color) {
-  return {
-    boxShadow: "0 0 0 " + utils.px(weight) + " " + color
+function outline(theme) {
+  var outlineCss = createOutlineColorCss(theme);
+  var outlineObject = defineConstantProperties({}, {
+    outline: defineProperties({}, keyof(theme.outline), function (variant) {
+      return definePropertyChains(outlineType, function (modifiers) {
+        return outlineCss(variant, modifiers);
+      });
+    })
+  });
+  return outlineObject;
+}
+
+var fixedProperties = ['width', 'height'];
+var createFixedPxCss = function createFixedPxCss(theme) {
+  return function (property, size) {
+    return createInternal({
+      toCSS: function toCSS() {
+        var _ref;
+
+        return _ref = {}, _ref[property] = size === 'auto' ? 'auto' : utils.px(theme.spacing[size]), _ref;
+      }
+    });
   };
 };
+var createFixedRelativeCss = function createFixedRelativeCss(_theme) {
+  return function (property, amount) {
+    return createInternal({
+      toCSS: function toCSS() {
+        var _ref2;
 
-var createOutlineColorCss = function createOutlineColorCss(theme) {
-  return function (variant, modifiers) {
-    var weight = theme.outline[variant].weight;
-    var color = theme.outline[variant].color;
-    return internal(function () {
-      var _2;
+        return _ref2 = {}, _ref2[property] = amount, _ref2;
+      }
+    });
+  };
+};
+var createFixedColumnCss = function createFixedColumnCss(theme) {
+  return function (property, span) {
+    return createInternal({
+      toCSS: function toCSS() {
+        var _ref3;
 
-      return modifiers.includes('focus') ? onFocus(outlineCss(weight, color)) : {
-        '&&': (_2 = {}, _2[utils.notDisabledSelector] = outlineCss(weight, color), _2)
-      };
-    }, {
-      boxShadowTransition: true
+        return _ref3 = {}, _ref3[property] = utils.px(foundation.columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)), _ref3;
+      }
     });
   };
 };
+function size(theme) {
+  var fixedPxCss = createFixedPxCss(theme);
+  var fixedColumnCss = createFixedColumnCss(theme);
+  var fixedRelativeCss = createFixedRelativeCss();
+  var fixedObject = defineProperties({}, fixedProperties, function (property) {
+    return defineConstantProperties({}, {
+      px: function px(size) {
+        return fixedPxCss(property, size);
+      },
+      column: function column(span) {
+        return fixedColumnCss(property, span);
+      },
+      auto: fixedRelativeCss(property, 'auto'),
+      full: fixedRelativeCss(property, '100%')
+    });
+  });
+  return fixedObject;
+}
 
-var overlayElement = {
-  content: "''",
-  display: 'block',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0
-}; // half-leadingをキャンセルするとき && 垂直方向のpaddingが無い時
-// -> before/afterを入れる
+var spacingProperties = ['margin', 'padding'];
+var spacingDirections = ['top', 'right', 'bottom', 'left', 'vertical', 'horizontal', 'all'];
 
-var useHalfLeadingCanceller = function useHalfLeadingCanceller(_ref3) {
-  var cancelHalfLeadingPx = _ref3.cancelHalfLeadingPx,
-      _ref3$hasVerticalPadd = _ref3.hasVerticalPadding,
-      hasVerticalPadding = _ref3$hasVerticalPadd === void 0 ? false : _ref3$hasVerticalPadd;
-  return cancelHalfLeadingPx !== undefined && !hasVerticalPadding;
+function spacingProperty(property, direction) {
+  return property + "-" + direction;
+}
+
+var createSpacingCss = function createSpacingCss(theme) {
+  return function (property, modifiers) {
+    var _modifiers$reduce = modifiers.reduce(function (acc, _ref) {
+      var direction = _ref[0],
+          size = _ref[1];
+
+      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;
+    }, {}),
+        top = _modifiers$reduce.top,
+        right = _modifiers$reduce.right,
+        bottom = _modifiers$reduce.bottom,
+        left = _modifiers$reduce.left;
+
+    var hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
+
+    function toCSS(_ref2) {
+      var _ref3, _ref4, _ref5, _ref6;
+
+      var _ref2$cancelHalfLeadi = _ref2.cancelHalfLeadingPx,
+          cancelHalfLeadingPx = _ref2$cancelHalfLeadi === void 0 ? 0 : _ref2$cancelHalfLeadi;
+      return _extends({}, top !== undefined && (_ref3 = {}, _ref3[spacingProperty(property, 'top')] = top === 'auto' ? 'auto' : utils.px(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref3), bottom !== undefined && (_ref4 = {}, _ref4[spacingProperty(property, 'bottom')] = bottom === 'auto' ? 'auto' : utils.px(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref4), right !== undefined && (_ref5 = {}, _ref5[spacingProperty(property, 'right')] = right === 'auto' ? 'auto' : utils.px(theme.spacing[right]), _ref5), left !== undefined && (_ref6 = {}, _ref6[spacingProperty(property, 'left')] = left === 'auto' ? 'auto' : utils.px(theme.spacing[left]), _ref6));
+    }
+
+    return createInternal({
+      toCSS: toCSS,
+      context: hasVerticalPadding ? {
+        hasVerticalPadding: true
+      } : {}
+    });
+  };
 };
+function spacing(theme) {
+  var spacingCss = createSpacingCss(theme);
+  var spacingObject = defineProperties({}, spacingProperties, function (spacingProperty) {
+    return defineMethodChains(spacingDirections, function (modifiers) {
+      return spacingCss(spacingProperty, modifiers);
+    });
+  });
+  return spacingObject;
+}
 
 var createTypographyCss = function createTypographyCss(theme) {
   return function (size, options) {
@@ -783,7 +745,8 @@ var createTypographyCss = function createTypographyCss(theme) {
         bold = _options$bold === void 0 ? false : _options$bold;
     var descriptor = theme.typography.size[size];
     var margin = -utils.halfLeading(descriptor);
-    return internal(function (context) {
+
+    function toCSS(context) {
       return _extends({
         fontSize: utils.px(descriptor.fontSize),
         lineHeight: utils.px(descriptor.lineHeight)
@@ -791,7 +754,7 @@ var createTypographyCss = function createTypographyCss(theme) {
         fontFamily: 'monospace'
       }, bold && {
         fontWeight: 'bold'
-      }, useHalfLeadingCanceller(context) && {
+      }, shouldCancelHalfLeading(context) && {
         // prevent margin collapsing
         display: 'flow-root',
         // cancel half-leading with negative margin
@@ -802,182 +765,337 @@ var createTypographyCss = function createTypographyCss(theme) {
           marginBottom: utils.px(margin)
         })
       });
-    }, !preserveHalfLeading ? {
-      cancelHalfLeadingPx: margin
-    } : {});
+    }
+
+    return createInternal({
+      toCSS: toCSS,
+      context: !preserveHalfLeading ? {
+        cancelHalfLeadingPx: margin
+      } : {}
+    });
+  };
+};
+var leadingCancel = {
+  display: 'block',
+  width: 0,
+  height: 0,
+  content: "''"
+}; // タイポグラフィ
+
+var typographyModifiers = [// TODO
+'monospace', 'bold', 'preserveHalfLeading'];
+function typography(theme) {
+  var typographyCss = createTypographyCss(theme);
+  var typographyObject = defineProperties({}, ['typography'], function (_) {
+    return function (size) {
+      return definePropertyChains(typographyModifiers, function (modifiers) {
+        return 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 型推論のためだけに使う場合にランタイムコストをゼロにするフラグ
+ */
+
+function createO(theme, DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE) {
+  if (DO_NOTHING_IT_IS_JUST_CALLED_FOR_TYPE_INFERENCE === void 0) {
+    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));
+}
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var GlobalStyle = styledComponents.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var themeMap = _ref.themeMap,
+      background = _ref.background;
+  return Object.entries(themeMap).map(function (_ref2) {
+    var key = _ref2[0],
+        theme = _ref2[1];
+    return key.startsWith('@media') ? styledComponents.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n            ", " {\n              :root {\n                ", "\n                ", "\n              }\n            }\n          "])), key, background !== undefined && styledComponents.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n                  background-color: ", ";\n                "])), theme.color[background]), defineColorVariableCSS(theme)) : styledComponents.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n            /* stylelint-disable-next-line no-duplicate-selectors */\n            ", " {\n              ", "\n              ", "\n            }\n          "])), key, background !== undefined && styledComponents.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n                background-color: ", ";\n              "])), theme.color[background]), defineColorVariableCSS(theme));
+  });
+});
+function TokenInjector(_ref3) {
+  var themeMap = _ref3.theme,
+      background = _ref3.background;
+  return /*#__PURE__*/React__default["default"].createElement(GlobalStyle, {
+    themeMap: themeMap,
+    background: background
+  });
+}
+
+var defineColorVariableCSS = function defineColorVariableCSS(theme) {
+  return Object.entries(defineThemeVariables(theme.color)({
+    theme: theme
+  })).map(function (_ref4) {
+    var varName = _ref4[0],
+        value = _ref4[1];
+    return variableDefinition(varName, value.toString());
+  }).join(';');
+};
+
+var variableDefinition = function variableDefinition(prop, value) {
+  return prop + ": " + value;
+};
+
+var LOCAL_STORAGE_KEY = 'charcoal-theme';
+var DEFAULT_ROOT_ATTRIBUTE = 'theme';
+var keyStringRegExp = new RegExp(/^(\w|-)+$/);
+/**
+ * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
+ * @param key 検証するキー
+ */
+
+function assertKeyString(key) {
+  if (!keyStringRegExp.test(key)) {
+    throw new Error("Unexpected key :" + key + ", expect: /^(\\w|-)+$/");
+  }
+}
+/**
+ * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
+ */
+
+var themeSetter = function themeSetter(attr) {
+  if (attr === void 0) {
+    attr = DEFAULT_ROOT_ATTRIBUTE;
+  }
+
+  return function (theme) {
+    assertKeyString(attr);
+
+    if (theme !== undefined) {
+      document.documentElement.dataset[attr] = theme;
+    } else {
+      delete document.documentElement.dataset[attr];
+    }
   };
 };
+/**
+ * `<html data-theme="dark">` にマッチするセレクタを生成する
+ */
+
+function themeSelector(theme, attr) {
+  return ":root[data-" + (attr != null ? attr : DEFAULT_ROOT_ATTRIBUTE) + "='" + theme + "']";
+}
+/**
+ * prefers-color-scheme を利用する media クエリを生成する
+ */
 
-var leadingCancel = {
-  display: 'block',
-  width: 0,
-  height: 0,
-  content: "''"
-};
+function prefersColorScheme(theme) {
+  return "@media (prefers-color-scheme: " + theme + ")";
+}
+/**
+ * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
+ */
 
-function spacingProperty(property, direction) {
-  return property + "-" + direction;
+function useThemeSetter(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$key = _ref.key,
+      key = _ref$key === void 0 ? LOCAL_STORAGE_KEY : _ref$key,
+      _ref$setter = _ref.setter,
+      setter = _ref$setter === void 0 ? themeSetter() : _ref$setter;
+
+  var _useTheme = useTheme(key),
+      theme = _useTheme[0],
+      system = _useTheme[2];
+
+  React.useEffect(function () {
+    if (theme === undefined) {
+      return;
+    } // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
+
+
+    setter(system ? undefined : theme);
+  }, [setter, system, theme]);
 }
+/**
+ * 同期的にLocalStorageからテーマを取得するヘルパ
+ */
 
-var createSpacingCss = function createSpacingCss(theme) {
-  return function (property, modifiers) {
-    var _modifiers$reduce = modifiers.reduce(function (acc, _ref4) {
-      var direction = _ref4[0],
-          size = _ref4[1];
+function getThemeSync(key) {
+  if (key === void 0) {
+    key = LOCAL_STORAGE_KEY;
+  }
 
-      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;
-      }
+  var theme = localStorage.getItem(key);
+  return theme;
+}
+/**
+ * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
+ *
+ * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
+ */
 
-      return acc;
-    }, {}),
-        top = _modifiers$reduce.top,
-        right = _modifiers$reduce.right,
-        bottom = _modifiers$reduce.bottom,
-        left = _modifiers$reduce.left;
+var useTheme = function useTheme(key) {
+  if (key === void 0) {
+    key = LOCAL_STORAGE_KEY;
+  }
 
-    var hasVerticalPadding = property === 'padding' && top !== undefined && bottom !== undefined && top !== 'auto' && bottom !== 'auto';
-    return internal(function (_ref5) {
-      var _ref6, _ref7, _ref8, _ref9;
-
-      var _ref5$cancelHalfLeadi = _ref5.cancelHalfLeadingPx,
-          cancelHalfLeadingPx = _ref5$cancelHalfLeadi === void 0 ? 0 : _ref5$cancelHalfLeadi;
-      return _extends({}, top !== undefined && (_ref6 = {}, _ref6[spacingProperty(property, 'top')] = top === 'auto' ? 'auto' : utils.px(theme.spacing[top] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref6), bottom !== undefined && (_ref7 = {}, _ref7[spacingProperty(property, 'bottom')] = bottom === 'auto' ? 'auto' : utils.px(theme.spacing[bottom] + (hasVerticalPadding ? cancelHalfLeadingPx : 0)), _ref7), right !== undefined && (_ref8 = {}, _ref8[spacingProperty(property, 'right')] = right === 'auto' ? 'auto' : utils.px(theme.spacing[right]), _ref8), left !== undefined && (_ref9 = {}, _ref9[spacingProperty(property, 'left')] = left === 'auto' ? 'auto' : utils.px(theme.spacing[left]), _ref9));
-    }, hasVerticalPadding ? {
-      hasVerticalPadding: true
-    } : {});
-  };
-};
+  assertKeyString(key);
+  var isDark = useMedia('(prefers-color-scheme: dark)');
+  var media = isDark !== undefined ? isDark ? 'dark' : 'light' : undefined;
 
-var createFixedPxCss = function createFixedPxCss(theme) {
-  return function (property, size) {
-    return internal(function () {
-      var _ref10;
+  var _useLocalStorage = useLocalStorage(key),
+      local = _useLocalStorage[0],
+      setTheme = _useLocalStorage[1],
+      ready = _useLocalStorage[2];
 
-      return _ref10 = {}, _ref10[property] = size === 'auto' ? 'auto' : utils.px(theme.spacing[size]), _ref10;
-    });
-  };
+  var theme = !ready || media === undefined ? undefined : local != null ? local : media;
+  var system = local === undefined;
+  return [theme, setTheme, system];
 };
+function useLocalStorage(key, defaultValue) {
+  var _useState = React.useState(false),
+      ready = _useState[0],
+      setReady = _useState[1];
 
-var createFixedRelativeCss = function createFixedRelativeCss(_theme) {
-  return function (property, amount) {
-    return internal(function () {
-      var _ref11;
+  var _useState2 = React.useState(),
+      state = _useState2[0],
+      setState = _useState2[1];
 
-      return _ref11 = {}, _ref11[property] = amount, _ref11;
-    });
+  var defaultValueMemo = React.useMemo(function () {
+    return defaultValue == null ? void 0 : defaultValue();
+  }, [defaultValue]);
+  React.useEffect(function () {
+    fetch();
+    window.addEventListener('storage', handleStorage);
+    return function () {
+      window.removeEventListener('storage', handleStorage);
+    };
+  });
+
+  var handleStorage = function handleStorage(e) {
+    if (e.storageArea !== localStorage) {
+      return;
+    }
+
+    if (e.key !== key) {
+      return;
+    }
+
+    fetch();
   };
-};
 
-var createFixedColumnCss = function createFixedColumnCss(theme) {
-  return function (property, span) {
-    return internal(function () {
-      var _ref12;
+  var fetch = function fetch() {
+    var _ref2;
 
-      return _ref12 = {}, _ref12[property] = utils.px(foundation.columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)), _ref12;
-    });
+    var raw = localStorage.getItem(key);
+    setState((_ref2 = raw !== null ? deserialize(raw) : null) != null ? _ref2 : defaultValueMemo);
+    setReady(true);
   };
-};
 
-var createElementEffectCss = function createElementEffectCss(theme) {
-  return function (effects) {
-    if (effects === void 0) {
-      effects = [];
-    }
+  var set = function set(value) {
+    if (value === undefined) {
+      // undefinedがセットされる場合にはkeyごと削除
+      localStorage.removeItem(key);
+    } else {
+      var raw = serialize(value);
+      localStorage.setItem(key, raw);
+    } // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
 
-    return internal(function () {
-      return effects.filter(isSupportedEffect).reduce(function (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()
-        }));
-      }, {});
+    var event = new StorageEvent('storage', {
+      bubbles: true,
+      cancelable: false,
+      key: key,
+      url: location.href,
+      storageArea: localStorage
     });
+    dispatchEvent(event);
   };
-};
 
-function borderProperty(direction) {
-  return "border-" + direction;
+  return [state != null ? state : defaultValueMemo, set, ready];
 }
 
-function borderShorthand(color) {
-  return "solid 1px " + color;
+function deserialize(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch (_unused) {
+    // syntax error はすべて文字列として扱う
+    return raw;
+  }
 }
 
-var createBorderCss = function createBorderCss(theme) {
-  return function (variant, directions) {
-    var all = directions.length === 0;
-    var value = borderShorthand(theme.border[variant].color);
-    return internal(function () {
-      return _extends({}, all ? {
-        border: value
-      } : directions.reduce(function (acc, direction) {
-        var _extends3;
-
-        return _extends({}, acc, (_extends3 = {}, _extends3[borderProperty(direction)] = value, _extends3));
-      }, {}));
-    });
-  };
-};
+function serialize(value) {
+  if (typeof value === 'string') {
+    return value;
+  } else {
+    return JSON.stringify(value);
+  }
+}
 
-var createBorderRadiusCss = function createBorderRadiusCss(theme) {
-  return function (size) {
-    return internal(function () {
-      return {
-        borderRadius: utils.px(theme.borderRadius[size])
-      };
-    });
-  };
-};
+function useMedia(query) {
+  var _useState3 = React.useState(),
+      match = _useState3[0],
+      setState = _useState3[1];
 
-var commonSpec = function commonSpec(_theme) {
-  var duration = utils.dur(TRANSITION_DURATION);
+  React.useEffect(function () {
+    var matcher = window.matchMedia(query);
 
-  var transition = function transition(property) {
-    return {
-      transition: property.map(function (v) {
-        return duration + " " + v;
-      }).join(', ')
+    var onChange = function onChange() {
+      setState(matcher.matches);
     };
-  };
 
-  return internal(function (_ref13) {
-    var _ref13$colorTransitio = _ref13.colorTransition,
-        colorTransition = _ref13$colorTransitio === void 0 ? false : _ref13$colorTransitio,
-        _ref13$backgroundColo = _ref13.backgroundColorTransition,
-        backgroundColorTransition = _ref13$backgroundColo === void 0 ? false : _ref13$backgroundColo,
-        _ref13$boxShadowTrans = _ref13.boxShadowTransition,
-        boxShadowTransition = _ref13$boxShadowTrans === void 0 ? false : _ref13$boxShadowTrans;
-    return transition([colorTransition ? 'color' : null, backgroundColorTransition ? 'background-color' : null, boxShadowTransition ? 'box-shadow' : null].filter(isPresent));
-  });
-};
+    matcher.addEventListener('change', onChange);
+    setState(matcher.matches);
+    return function () {
+      matcher.removeEventListener('change', onChange);
+    };
+  }, [query]);
+  return match;
+}
 
-var internalSym = Symbol('internal');
+/**
+ * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
+ * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+ * @returns ソースコードの文字列
+ */
 
-function internal(operation, context) {
-  var _ref14;
+function makeSetThemeScriptCode(_temp) {
+  var _ref = _temp === void 0 ? defaultProps : _temp,
+      _ref$localStorageKey = _ref.localStorageKey,
+      localStorageKey = _ref$localStorageKey === void 0 ? defaultProps.localStorageKey : _ref$localStorageKey,
+      _ref$rootAttribute = _ref.rootAttribute,
+      rootAttribute = _ref$rootAttribute === void 0 ? defaultProps.rootAttribute : _ref$rootAttribute;
 
-  if (context === void 0) {
-    context = {};
-  }
+  assertKeyString(localStorageKey);
+  assertKeyString(rootAttribute);
+  return "'use strict';\n(function () {\n    var localStorageKey = '" + localStorageKey + "'\n    var rootAttribute = '" + rootAttribute + "'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n";
+}
+/**
+ * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
+ * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+ * @returns
+ */
 
-  return _ref14 = {}, _ref14[internalSym] = {
-    operation: operation,
-    context: context
-  }, _ref14;
+function SetThemeScript(props) {
+  var src = makeSetThemeScriptCode(props);
+  return /*#__PURE__*/React__default["default"].createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: src
+    }
+  });
 }
+var defaultProps = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+SetThemeScript.defaultProps = defaultProps;
 
 var nonBlank = function nonBlank(value) {
   return isPresent(value) && value !== false;
@@ -985,7 +1103,7 @@ var nonBlank = function nonBlank(value) {
 /**
  * `theme(o => [...])` の `theme` ユーティリティを構築する
  *
- * @param _styled styled-componnets の `styled` そのもの (型推論のために用いられる)
+ * @param _styled - DEPRECATED: styled-componnets の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
  *
  * @example
  *
@@ -999,38 +1117,43 @@ var nonBlank = function nonBlank(value) {
 
 
 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 function ( // ユーザー定義
-  spec) {
-    return function (_ref15) {
-      var theme = _ref15.theme;
+  /**
+   * 本当は `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(_ref) {
+      var theme = _ref.theme;
 
       if (!isPresent(theme)) {
         // テーマが入っていない場合は復旧不可能なのでエラーにする
         throw noThemeProvider;
-      } // styled-componentsのランタイムから受け取ったthemeオブジェクトをbuilderに食わせて`o`をつくる
-      // さらに、ユーザー定義にbuilderが構築した`o`を食わせる
-      // (`o`を一時変数に入れてしまうと型Tの具象化が行われるので関数合成を優先する)
-
-
-      var rawSpecDescriptor = spec(builder(theme)); // ユーザー定義の配列を整形
-
-      var specDescriptor = [].concat(Array.isArray(rawSpecDescriptor) ? rawSpecDescriptor : [rawSpecDescriptor], [commonSpec()]).filter(nonBlank); // 1パス目
-      // 全ユーザー定義を舐めて相互に影響し合う定義をチェックし、その結果(コンテキスト)を取得
-
-      var context = specDescriptor.reduce(function (acc, v) {
-        return _extends({}, acc, v[internalSym].context);
-      }, {}); // 2パス目
-      // コンテキストを見ながら最適化されたCSSを構築
+      }
 
-      return specDescriptor.map(function (v) {
-        return v[internalSym].operation(context);
-      });
+      var internals = [].concat(wrapArray(
+      /**
+       * こう書いてはいけない
+       *
+       * ❌
+       * ```ts
+       * const o = createO(theme)
+       * const declaration = spec(o)
+       * ```
+       *
+       * `o` を一時変数に入れてしまうと型 `T` の具象化が行われるので関数内に書く
+       */
+      specFn(
+      /** o = */
+      createO(theme))), [// 必ず挿入される共通のルール
+      transition()]).filter(nonBlank);
+      return toCSSObjects(internals);
     };
   };
 }