@charcoal-ui/tailwind-config 4.0.0-beta.0 → 4.0.0-beta.11

package/dist/_lib/TailwindBuild.d.ts

@@ -1,4 +1,4 @@
-import { TailwindConfig } from 'tailwindcss/tailwind-config';
+import type { TailwindConfig } from 'tailwindcss/tailwind-config';
 /**
  * テスト用に tailwind.css のビルドを走らせる
  *

package/dist/_lib/TailwindBuild.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TailwindBuild.d.ts","sourceRoot":"","sources":["../../src/_lib/TailwindBuild.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAI5D;;;;GAIG;AACH,qBAAa,aAAa;IAGJ,OAAO,CAAC,MAAM;IAFlC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IAEpD,OAAO;WAgCM,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM;IA6BpD,IAAI,GAAG,WAEN;IAED,IAAI,UAAU,aAEb;IAED,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAI7D,eAAe;IAaf,cAAc,CAAC,OAAO,EAAE,KAAK,MAAM,EAAE;CAWtC"}
+{"version":3,"file":"TailwindBuild.d.ts","sourceRoot":"","sources":["../../src/_lib/TailwindBuild.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAIjE;;;;GAIG;AACH,qBAAa,aAAa;IAGJ,OAAO,CAAC,MAAM;IAFlC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IAEpD,OAAO;WAgCM,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM;IA6BpD,IAAI,GAAG,WAEN;IAED,IAAI,UAAU,aAEb;IAED,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAI7D,eAAe;IAaf,cAAc,CAAC,OAAO,EAAE,KAAK,MAAM,EAAE;CAWtC"}

package/dist/_lib/compat.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * import { Story } from '@storybook/react/types-6-0'
  *

package/dist/_lib/compat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../../src/_lib/compat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;GAQG;AACH,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAA"}
+{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../../src/_lib/compat.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;;;;;;GAQG;AACH,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAA"}

package/dist/colors/toTailwindConfig.d.ts

@@ -1,4 +1,4 @@
-import { TailwindConfig } from 'tailwindcss/tailwind-config';
+import type { TailwindConfig } from 'tailwindcss/tailwind-config';
 import { MergedEffect } from '../foundation';
 import { TailwindVersion } from '../types';
 import { AnyColorTheme } from './utils';

package/dist/colors/toTailwindConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toTailwindConfig.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,OAAO,EAAE,aAAa,EAA+B,MAAM,SAAS,CAAA;AAEpE,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,YAAY,GACpB,cAAc,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAiCnC"}
+{"version":3,"file":"toTailwindConfig.d.ts","sourceRoot":"","sources":["../../src/colors/toTailwindConfig.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,OAAO,EAAE,aAAa,EAA+B,MAAM,SAAS,CAAA;AAEpE,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,YAAY,GACpB,cAAc,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAiCnC"}

package/dist/index.cjs.js

@@ -101,7 +101,7 @@ function camelToKebab(value) {
 // src/index.ts
 var import_foundation4 = require("@charcoal-ui/foundation");
 var import_theme = require("@charcoal-ui/theme");
-var import_utils8 = require("@charcoal-ui/utils");
+var import_utils7 = require("@charcoal-ui/utils");
 
 // src/colors/toTailwindConfig.ts
 var import_utils = require("@charcoal-ui/utils");
@@ -241,7 +241,6 @@ function createUtilityName(gradientName, direction, suffix = "") {
 var import_plugin3 = __toESM(require("tailwindcss/plugin"));
 var import_foundation2 = require("@charcoal-ui/foundation");
 var import_utils6 = require("@charcoal-ui/utils");
-var import_utils7 = require("@charcoal-ui/utils");
 var leadingCancel = {
   display: "block",
   width: 0,
@@ -251,15 +250,15 @@ var leadingCancel = {
 var typographyStyle = (style) => {
   const margin = -(0, import_utils6.halfLeading)(style);
   return {
-    "font-size": (0, import_utils7.px)(style.fontSize),
-    "line-height": (0, import_utils7.px)(style.lineHeight),
+    "font-size": (0, import_utils6.px)(style.fontSize),
+    "line-height": (0, import_utils6.px)(style.lineHeight),
     "&::before": {
       ...leadingCancel,
-      marginTop: (0, import_utils7.px)(margin)
+      marginTop: (0, import_utils6.px)(margin)
     },
     "&::after": {
       ...leadingCancel,
-      marginBottom: (0, import_utils7.px)(margin)
+      marginBottom: (0, import_utils6.px)(margin)
     }
   };
 };
@@ -299,11 +298,11 @@ function createTailwindConfig({
   return {
     theme: {
       screens: {
-        screen1: (0, import_utils8.px)(0),
-        screen2: (0, import_utils8.px)(defaultTheme.breakpoint.screen1),
-        screen3: (0, import_utils8.px)(defaultTheme.breakpoint.screen2),
-        screen4: (0, import_utils8.px)(defaultTheme.breakpoint.screen3),
-        screen5: (0, import_utils8.px)(defaultTheme.breakpoint.screen4)
+        screen1: (0, import_utils7.px)(0),
+        screen2: (0, import_utils7.px)(defaultTheme.breakpoint.screen1),
+        screen3: (0, import_utils7.px)(defaultTheme.breakpoint.screen2),
+        screen4: (0, import_utils7.px)(defaultTheme.breakpoint.screen3),
+        screen5: (0, import_utils7.px)(defaultTheme.breakpoint.screen4)
       },
       colors: {
         black: "#000",
@@ -315,11 +314,11 @@ function createTailwindConfig({
       borderColor: {
         ...colorsToTailwindConfig(
           version,
-          (0, import_utils8.mapObject)(defaultTheme.border, (k, v) => [k, v.color]),
+          (0, import_utils7.mapObject)(defaultTheme.border, (k, v) => [k, v.color]),
           effects
         )
       },
-      spacing: (0, import_utils8.mapObject)(import_foundation4.SPACING, (name, pixel) => [name, (0, import_utils8.px)(pixel)]),
+      spacing: (0, import_utils7.mapObject)(import_foundation4.SPACING, (name, pixel) => [name, (0, import_utils7.px)(pixel)]),
       width: {
         full: "100%",
         screen: "100vw",
@@ -328,7 +327,7 @@ function createTailwindConfig({
         ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(
           (styles, i) => ({
             ...styles,
-            [`col-span-${i}`]: (0, import_utils8.px)(import_foundation4.COLUMN_UNIT * i + import_foundation4.GUTTER_UNIT * (i - 1))
+            [`col-span-${i}`]: (0, import_utils7.px)(import_foundation4.COLUMN_UNIT * i + import_foundation4.GUTTER_UNIT * (i - 1))
           }),
           {}
         ),
@@ -341,11 +340,11 @@ function createTailwindConfig({
         )
       },
       gap: {
-        fixed: (0, import_utils8.px)(import_foundation4.GUTTER_UNIT)
+        fixed: (0, import_utils7.px)(import_foundation4.GUTTER_UNIT)
       },
-      borderRadius: (0, import_utils8.mapObject)(import_foundation4.BORDER_RADIUS, (name, value) => [
+      borderRadius: (0, import_utils7.mapObject)(import_foundation4.BORDER_RADIUS, (name, value) => [
         name,
-        (0, import_utils8.px)(value)
+        (0, import_utils7.px)(value)
       ]),
       transitionDuration: {
         [DEFAULT]: "0.2s"

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/foundation.ts","../src/util.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { mapObject, px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n        fit: 'fit-content',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n","import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n  applyEffect,\n  filterObject,\n  flatMapObject,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  flatMapObject,\n  gradient,\n  GradientDirection,\n  mapKeys,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradient(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradient(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading, mapObject } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n"],"mappings":"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","names":["import_foundation","import_utils","import_utils","plugin","import_plugin","import_utils","cssVariableColorPlugin","plugin","colors","effect","import_plugin","import_foundation","import_utils","plugin","theme","cssVariableColorPlugin"]}
+{"version":3,"sources":["../src/index.ts","../src/foundation.ts","../src/util.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { mapObject, px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n        fit: 'fit-content',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n","import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n  applyEffect,\n  filterObject,\n  flatMapObject,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  flatMapObject,\n  gradient,\n  GradientDirection,\n  mapKeys,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradient(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradient(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading, mapObject, px } from '@charcoal-ui/utils'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGO,IAAM,aAAa;AAEnB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAA0D;AACxD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;ACTO,SAAS,kBAAkB,SAA0B;AAC1D,UAAQ,SAAS;AAAA,IACf,KAAK;AAAA,IACL,KAAK,MAAM;AACT,aAAO;AAAA,IACT;AAAA,IAEA,KAAK,MAAM;AACT,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEO,SAAS,iBACd,SACyB;AACzB,UAAQ,SAAS;AAAA,IACf,KAAK,MAAM;AAIT,aAAO,CAAC;AAAA,IACV;AAAA,IAEA,KAAK;AAAA,IACL,KAAK,MAAM;AACT,aAAO,EAAE,UAAU,CAAC,EAAE;AAAA,IACxB;AAAA,EACF;AACF;AAEA,SAAS,UAAa,GAAW,GAAW;AAC1C,SAAO,EAAE,SAAS,EAAE,QAAQ,MAAM,KAAK,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,KAAK,CAAC;AACzE;AAEO,SAAS,2BAA2B,UAA0B;AACnE,QAAM,eAAe,SAAS;AAC9B,QAAM,oBAAoB,IAAI,IAAI,OAAO,KAAK,aAAa,KAAK,CAAC;AACjE,QAAM,qBAAqB,IAAI,IAAI,OAAO,KAAK,aAAa,MAAM,CAAC;AAEnE,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,QAAQ,GAAG;AACpD,UAAM,YAAY,IAAI,IAAI,OAAO,KAAK,MAAM,KAAK,CAAC;AAClD,UAAM,aAAa,IAAI,IAAI,OAAO,KAAK,MAAM,MAAM,CAAC;AAEpD,QAAI,CAAC,UAAU,WAAW,iBAAiB,GAAG;AAC5C,YAAM,IAAI,MAAM,aAAa;AAAA;AAAA,qBAEd,KAAK,UAAU,MAAM,KAAK,iBAAiB,CAAC;AAAA,OAC1D,KAAK,UAAU,MAAM,KAAK,SAAS,CAAC,GAAG;AAAA,IAC1C;AAEA,QAAI,CAAC,UAAU,YAAY,kBAAkB,GAAG;AAC9C,YAAM,IAAI,MAAM,aAAa;AAAA;AAAA,qBAEd,KAAK,UAAU,MAAM,KAAK,kBAAkB,CAAC;AAAA,OAC3D,KAAK,UAAU,MAAM,KAAK,UAAU,CAAC,GAAG;AAAA,IAC3C;AAAA,EACF;AACF;AAEO,SAAS,aAAa,OAAe;AAC1C,SAAO,MACJ,QAAQ,kDAAkD,OAAO,EACjE,YAAY;AACjB;;;AF9DA,IAAAA,qBAKO;AACP,mBAAsB;AACtB,IAAAC,gBAA8B;;;AGhB9B,mBAAqD;;;ACC9C,IAAM,eAAe;AAErB,SAAS,cAAc,OAAoC;AAChE,SAAO,OAAO,UAAU;AAC1B;;;ADIO,SAAS,uBACd,SACA,QACA,SACmC;AACnC,QAAM,mBAAe,2BAAa,QAAQ,aAAa;AACvD,QAAM,UAAU,kBAAkB,OAAO;AAczC,WAAS,oBAAoB,MAAc,OAAiB;AAC1D,UAAM,UAAU,GAAG,eAAe;AAElC,WAAO;AAAA,MACL,CAAC,UAAU,OAAO,YAAY;AAAA,MAE9B,OAAG,wBAAU,SAAS,CAAC,YAAY,WAAW;AAAA,QAC5C;AAAA,QACA,OAAO,YAAY,mBAAe,0BAAY,OAAO,MAAM;AAAA,MAC7D,CAAC;AAAA,IACH;AAAA,EACF;AAEA,aAAO,wBAAU,cAAc,CAAC,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA,oBAAoB,MAAM,KAAK;AAAA,EACjC,CAAC;AACH;;;AE7CA,IAAAC,gBAKO;AACP,oBAAuC;AAQxB,SAAR,uBAAwC;AAAA,EAC7C,SAAS;AAAA,KACN;AACL,GAA6B;AAC3B,QAAM,cAAc,mBAAmB,MAAM;AAE7C,aAAO,cAAAC,SAAO,CAAC,EAAE,QAAQ,MAAM;AAE7B,YAAQ,WAAW;AAAA,EACrB,CAAC;AACH;AAEO,SAAS,mBAAmB,QAAiC;AAClE,aAAO,yBAAU,QAAQ,CAAC,sBAAsB,UAAU;AACxD,UAAM,MAAM,eAAe,KAAK;AAEhC,QAAI,qBAAqB,WAAW,QAAQ,GAAG;AAC7C,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF,OAAO;AACL,aAAO,CAAC,sBAAsB,GAAG;AAAA,IACnC;AAAA,EACF,CAAC;AACH;AAEA,SAAS,eAAe,OAA4B;AAClD,QAAM,aAAS,4BAAa,MAAM,OAAO,aAAa;AACtD,QAAM,UAAU,OAAO,QAAQ,YAAY,KAAK,CAAC;AAEjD,aAAO,6BAAc,QAAQ,CAAC,MAAM,UAAU;AAC5C,UAAM,UAA8B,GAAG,eAAe;AAEtD,WAAO;AAAA,MACL,CAAC,SAAS,KAAK;AAAA,MAEf,GAAG,QAAQ,IAAiC,CAAC,CAAC,MAAM,MAAM,MAAM;AAAA,QAC9D,GAAG,YAAY;AAAA,YACf,2BAAY,OAAO,MAAM;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;;;AC7DA,IAAAC,iBAAmB;AAInB,IAAAC,gBAOO;AAIP,IAAM,aAAa;AAEJ,SAARC,wBACL,WACA,SACA,sBACA;AACA,QAAM,YAAY,aAAa,WAAW,OAAO;AAEjD,QAAM,iBAAa,yBAAU,WAAW,CAAC,SAAS;AAAA,IAChD,OAAO;AAAA,IACP,EAAE,iBAAiB,OAAO,aAAa,QAAQ;AAAA,EACjD,CAAC;AAED,aAAO,eAAAC,SAAO,CAAC,EAAE,SAAS,aAAa,MAAM;AAC3C,UAAM,UAAM,uBAAQ,WAAW,CAAC,SAAS,GAAG,aAAa,MAAM;AAC/D,QAAI,qBAAqB,WAAW,QAAQ,GAAG;AAE7C,cAAQ;AAAA,QACN,CAAC,uBAAuB;AAAA,UACtB,SAAS;AAAA,QACX;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AAEL,cAAQ;AAAA,QACN,CAAC,uBAAuB;AAAA,MAC1B,CAAC;AAAA,IACH;AAGA,iBAAa,YAAY;AAAA,MACvB,UAAU,CAAC,YAAY;AAAA,IACzB,CAAC;AAAA,EACH,CAAC;AACH;AAEA,IAAM,aAAa;AAAA,EACjB,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AACd;AAgBO,SAAS,aACd,WACA,QACW;AACX,QAAM,UAAU,OAAO,QAAQ,MAAM;AACrC,QAAM,aAAa,OAAO,QAAQ,UAAU;AAK5C,aAAO;AAAA,IAAc;AAAA,IAAW,CAAC,MAAM,WACrC,WAAW,QAAQ,CAAC,CAAC,WAAW,SAAS,MAAM;AAC7C,YAAM,mBAAmB,CAACC,YAA6B;AACrD,cAAM,YAAQ,wBAAS,SAAS,EAAEA,OAAM;AAExC,YAAI,EAAE,qBAAqB,QAAQ;AACjC,gBAAM,IAAI;AAAA,YACR,6CAA6C,QAAQ,aAAa;AAAA,UACpE;AAAA,QACF;AAIA,eAAO,MAAM;AAAA,MACf;AAEA,aAAO;AAAA,QAGL,CAAC,kBAAkB,MAAM,SAAS,GAAG,iBAAiB,MAAM,CAAC;AAAA,QAI7D,GAAG,QAAQ,IAA8B,CAAC,CAAC,YAAYC,OAAM,MAAM;AAAA,UACjE,kBAAkB,MAAM,WAAW,UAAU;AAAA,UAC7C,qBAAiB,qCAAsBA,OAAM,EAAE,MAAM,CAAC;AAAA,QACxD,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,SAAS,kBACP,cACA,WACA,SAAS,IACT;AACA,SAAO,CAAC,aAAa,YAAY,GAAG,WAAW,MAAM,EAClD,OAAO,OAAO,EACd,KAAK,GAAG;AACb;;;AC3HA,IAAAC,iBAAmB;AACnB,IAAAC,qBAAsD;AACtD,IAAAC,gBAA2C;AAE3C,IAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,kBAAkB,CAAC,UAAgC;AACvD,QAAM,SAAS,KAAC,2BAAY,KAAK;AAEjC,SAAO;AAAA,IACL,iBAAa,kBAAG,MAAM,QAAQ;AAAA,IAC9B,mBAAe,kBAAG,MAAM,UAAU;AAAA,IAOlC,aAAa;AAAA,MACX,GAAG;AAAA,MACH,eAAW,kBAAG,MAAM;AAAA,IACtB;AAAA,IACA,YAAY;AAAA,MACV,GAAG;AAAA,MACH,kBAAc,kBAAG,MAAM;AAAA,IACzB;AAAA,EACF;AACF;AAEA,IAAM,uBAAmB,eAAAC,SAAO,CAAC,EAAE,aAAa,MAAM;AACpD,QAAM,wBAAoB,yBAAU,oCAAiB,CAAC,UAAU,UAAU;AAAA,IACxE,eAAe;AAAA,IACf,gBAAgB,KAAK;AAAA,EACvB,CAAC;AAGD;AAAA,IACE;AAAA,MACE,GAAG;AAAA,MACH,0BAA0B;AAAA,QACxB,aAAa;AAAA,UACX,SAAS;AAAA,QACX;AAAA,QACA,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,UAAU,CAAC,YAAY;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,IAAO,iBAAQ;;;AP9BR,SAAS,qBAAqB;AAAA,EACnC,QAAQ,EAAE,SAAS,mBAAM;AAAA,EACzB,UAAU;AACZ,GAA4B;AAC1B,6BAA2B,KAAK;AAEhC,QAAM,eAAe,MAAM;AAC3B,QAAM,UAAU,YAAY,YAAY;AACxC,QAAM,UAAU,kBAAkB,OAAO;AAEzC,SAAO;AAAA,IACL,OAAO;AAAA,MACL,SAAS;AAAA,QACP,aAAS,kBAAG,CAAC;AAAA,QACb,aAAS,kBAAG,aAAa,WAAW,OAAO;AAAA,QAC3C,aAAS,kBAAG,aAAa,WAAW,OAAO;AAAA,QAC3C,aAAS,kBAAG,aAAa,WAAW,OAAO;AAAA,QAC3C,aAAS,kBAAG,aAAa,WAAW,OAAO;AAAA,MAC7C;AAAA,MACA,QAAQ;AAAA,QAEN,OAAO;AAAA,QAGP,OAAO;AAAA,QAEP,aAAa;AAAA,QACb,SAAS;AAAA,QACT,GAAG,uBAAuB,SAAS,aAAa,OAAO,OAAO;AAAA,MAChE;AAAA,MACA,aAAa;AAAA,QACX,GAAG;AAAA,UACD;AAAA,cACA,yBAAU,aAAa,QAAQ,CAAC,GAAG,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,MACA,aAAS,yBAAU,4BAAS,CAAC,MAAM,UAAU,CAAC,UAAM,kBAAG,KAAK,CAAC,CAAC;AAAA,MAC9D,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,KAAK;AAAA,QAKL,GAAG,MAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE;AAAA,UACrD,CAAC,QAAQ,OAAO;AAAA,YACd,GAAG;AAAA,YACH,CAAC,YAAY,UAAM,kBAAG,iCAAc,IAAI,kCAAe,IAAI,EAAE;AAAA,UAC/D;AAAA,UACA,CAAC;AAAA,QACH;AAAA,QAKA,GAAG,MAAM,KAAK,EAAE,QAAQ,aAAa,EAAE,GAAG,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE;AAAA,UACzD,CAAC,QAAQ,OAAO;AAAA,YACd,GAAG;AAAA,YACH,CAAC,GAAG,KAAK,eAAe,GAAI,IAAI,aAAc;AAAA,UAChD;AAAA,UACA,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,KAAK;AAAA,QACH,WAAO,kBAAG,8BAAW;AAAA,MACvB;AAAA,MACA,kBAAc,yBAAU,kCAAe,CAAC,MAAM,UAAU;AAAA,QACtD;AAAA,YACA,kBAAG,KAAK;AAAA,MACV,CAAC;AAAA,MACD,oBAAoB;AAAA,QAClB,CAAC,UAAU;AAAA,MACb;AAAA,IACF;AAAA,IAEA,GAAG,iBAAiB,OAAO;AAAA,IAE3B,aAAa;AAAA,MAGX,YAAY;AAAA,IACd;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA,uBAAuB,KAAK;AAAA,MAE5B,GAAG,OAAO,QAAQ,KAAK,EAAE;AAAA,QAAI,CAAC,CAAC,sBAAsBC,MAAK,MACxDC;AAAA,UACED,OAAM;AAAA,UACN,YAAYA,MAAK;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,SAAyB,qBAAqB,CAAC,CAAC;","names":["import_foundation","import_utils","import_utils","plugin","import_plugin","import_utils","cssVariableColorPlugin","plugin","colors","effect","import_plugin","import_foundation","import_utils","plugin","theme","cssVariableColorPlugin"]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { TailwindConfig } from 'tailwindcss/tailwind-config';
+import type { TailwindConfig } from 'tailwindcss/tailwind-config';
 import { TailwindVersion, ThemeMap } from './types';
 interface Options {
     version?: TailwindVersion;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAqBnD,UAAU,OAAO;IACf,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAA0B,EAC1B,OAAc,GACf,EAAE,OAAO,GAAG,cAAc,CA+F1B;AAED,eAAO,MAAM,MAAM,EAAE,cAAyC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAqBnD,UAAU,OAAO;IACf,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAA0B,EAC1B,OAAc,GACf,EAAE,OAAO,GAAG,cAAc,CA+F1B;AAED,eAAO,MAAM,MAAM,EAAE,cAAyC,CAAA"}

package/dist/index.esm.js

@@ -223,8 +223,7 @@ function createUtilityName(gradientName, direction, suffix = "") {
 // src/typography/plugin.ts
 import plugin3 from "tailwindcss/plugin";
 import { TYPOGRAPHY_SIZE } from "@charcoal-ui/foundation";
-import { halfLeading, mapObject as mapObject4 } from "@charcoal-ui/utils";
-import { px } from "@charcoal-ui/utils";
+import { halfLeading, mapObject as mapObject4, px } from "@charcoal-ui/utils";
 var leadingCancel = {
   display: "block",
   width: 0,

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/foundation.ts","../src/util.ts","../src/index.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { mapObject, px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n        fit: 'fit-content',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n  applyEffect,\n  filterObject,\n  flatMapObject,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  flatMapObject,\n  gradient,\n  GradientDirection,\n  mapKeys,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradient(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradient(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading, mapObject } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n"],"mappings":"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","names":["mapObject","px","applyEffect","filterObject","mapObject","mapObject","filterObject","applyEffect","plugin","flatMapObject","mapObject","cssVariableColorPlugin","plugin","colors","effect","plugin","mapObject","px","mapObject","theme","cssVariableColorPlugin"]}
+{"version":3,"sources":["../src/foundation.ts","../src/util.ts","../src/index.ts","../src/colors/toTailwindConfig.ts","../src/colors/utils.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts"],"sourcesContent":["import { Effect } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\n\nexport const GRID_COUNT = 12\n\nexport function mergeEffect({\n  elementEffect,\n  effect,\n}: Pick<Theme, 'elementEffect' | 'effect'>): MergedEffect {\n  return {\n    ...elementEffect,\n    ...effect,\n    outline: {\n      type: 'opacity',\n      opacity: 0.32,\n    } as Effect,\n  }\n}\n\nexport type MergedEffect = Record<string, Effect>\n","import type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\n/**\n * the key \"default\" or \"DEFAULT\" has special meaning and dropped from class name\n *\n * @see https://tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default\n */\nexport function getDefaultKeyName(version: TailwindVersion) {\n  switch (version) {\n    case 'v3':\n    case 'v2': {\n      return 'DEFAULT'\n    }\n\n    case 'v1': {\n      return 'default'\n    }\n  }\n}\n\nexport function getVariantOption(\n  version: TailwindVersion\n): Partial<TailwindConfig> {\n  switch (version) {\n    case 'v3': {\n      // v3 以上では variants は variantOrders に改名された\n      // そしてこれは上書きをしたいモチベがない\n      // https://v2.tailwindcss.com/docs/configuration#variant-order\n      return {}\n    }\n\n    case 'v2':\n    case 'v1': {\n      return { variants: {} }\n    }\n  }\n}\n\nfunction setEquals<T>(a: Set<T>, b: Set<T>) {\n  return a.size === b.size && Array.from(a).every((value) => b.has(value))\n}\n\nexport function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void {\n  const defaultTheme = themeMap[':root']\n  const expectedColorKeys = new Set(Object.keys(defaultTheme.color))\n  const expectedEffectKeys = new Set(Object.keys(defaultTheme.effect))\n\n  for (const [name, theme] of Object.entries(themeMap)) {\n    const colorKeys = new Set(Object.keys(theme.color))\n    const effectKeys = new Set(Object.keys(theme.effect))\n\n    if (!setEquals(colorKeys, expectedColorKeys)) {\n      throw new Error(`:root and ${name} does not have same colors.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedColorKeys))}\nGot: ${JSON.stringify(Array.from(colorKeys))}`)\n    }\n\n    if (!setEquals(effectKeys, expectedEffectKeys)) {\n      throw new Error(`:root and ${name} does not have same effects.\n\nExpected( :root ): ${JSON.stringify(Array.from(expectedEffectKeys))}\nGot: ${JSON.stringify(Array.from(effectKeys))}`)\n    }\n  }\n}\n\nexport function camelToKebab(value: string) {\n  return value\n    .replace(/(?<small>[\\da-z]|(?=[A-Z]))(?<capital>[A-Z])/gu, '$1-$2')\n    .toLowerCase()\n}\n","import { GRID_COUNT, mergeEffect } from './foundation'\n\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { TailwindVersion, ThemeMap } from './types'\n\nimport {\n  assertAllThemeHaveSameKeys,\n  getDefaultKeyName,\n  getVariantOption,\n} from './util'\nimport {\n  COLUMN_UNIT,\n  GUTTER_UNIT,\n  SPACING,\n  BORDER_RADIUS,\n} from '@charcoal-ui/foundation'\nimport { light } from '@charcoal-ui/theme'\nimport { mapObject, px } from '@charcoal-ui/utils'\nimport { colorsToTailwindConfig } from './colors/toTailwindConfig'\n\nimport cssVariableColorPlugin from './colors/plugin'\nimport cssVariableGradientPlugin from './gradient/plugin'\nimport typographyPlugin from './typography/plugin'\n\ninterface Options {\n  version?: TailwindVersion\n  theme?: ThemeMap\n}\n\nexport function createTailwindConfig({\n  theme = { ':root': light },\n  version = 'v3',\n}: Options): TailwindConfig {\n  assertAllThemeHaveSameKeys(theme)\n\n  const defaultTheme = theme[':root']\n  const effects = mergeEffect(defaultTheme)\n  const DEFAULT = getDefaultKeyName(version)\n\n  return {\n    theme: {\n      screens: {\n        screen1: px(0),\n        screen2: px(defaultTheme.breakpoint.screen1),\n        screen3: px(defaultTheme.breakpoint.screen2),\n        screen4: px(defaultTheme.breakpoint.screen3),\n        screen5: px(defaultTheme.breakpoint.screen4),\n      },\n      colors: {\n        // @deprecated\n        black: '#000',\n\n        // @deprecated\n        white: '#fff',\n\n        transparent: 'transparent',\n        current: 'currentColor',\n        ...colorsToTailwindConfig(version, defaultTheme.color, effects),\n      },\n      borderColor: {\n        ...colorsToTailwindConfig(\n          version,\n          mapObject(defaultTheme.border, (k, v) => [k, v.color]),\n          effects\n        ),\n      },\n      spacing: mapObject(SPACING, (name, pixel) => [name, px(pixel)]),\n      width: {\n        full: '100%',\n        screen: '100vw',\n        auto: 'auto',\n        fit: 'fit-content',\n\n        /**\n         * generates classes like \"w-col-span-1\"\n         */\n        ...Array.from({ length: GRID_COUNT }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`col-span-${i}`]: px(COLUMN_UNIT * i + GUTTER_UNIT * (i - 1)),\n          }),\n          {}\n        ),\n\n        /**\n         * generates classes like \"w-1/12\" (except for 12/12, which just equals to w-full)\n         */\n        ...Array.from({ length: GRID_COUNT - 1 }, (_, i) => i + 1).reduce(\n          (styles, i) => ({\n            ...styles,\n            [`${i}/${GRID_COUNT}`]: `${(i / GRID_COUNT) * 100}%`,\n          }),\n          {}\n        ),\n      },\n      gap: {\n        fixed: px(GUTTER_UNIT),\n      },\n      borderRadius: mapObject(BORDER_RADIUS, (name, value) => [\n        name,\n        px(value),\n      ]),\n      transitionDuration: {\n        [DEFAULT]: '0.2s',\n      },\n    },\n\n    ...getVariantOption(version),\n\n    corePlugins: {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error 配列にしろと言ってくるが、たぶん @types が間違っている\n      lineHeight: false,\n    },\n    plugins: [\n      typographyPlugin,\n      cssVariableColorPlugin(theme),\n\n      ...Object.entries(theme).map(([selectorOrMediaQuery, theme]) =>\n        cssVariableGradientPlugin(\n          theme.gradientColor,\n          mergeEffect(theme),\n          selectorOrMediaQuery\n        )\n      ),\n    ],\n  }\n}\n\nexport const config: TailwindConfig = createTailwindConfig({})\n","import { Material } from '@charcoal-ui/foundation'\nimport { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'\nimport type { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { getDefaultKeyName } from '../util'\n\nimport { AnyColorTheme, COLOR_PREFIX, isSingleColor } from './utils'\n\nexport function colorsToTailwindConfig(\n  version: TailwindVersion,\n  colors: AnyColorTheme,\n  effects: MergedEffect\n): TailwindConfig['theme']['colors'] {\n  const targetColors = filterObject(colors, isSingleColor)\n  const DEFAULT = getDefaultKeyName(version)\n\n  /**\n   * こういう感じのを吐き出す\n   *\n   * ```js\n   * {\n   *   DEFAULT: 'var(--tailwind-color-hoge1, #fff)',\n   *   hover: 'var(--tailwind-color-hoge1--hover, #eee)',\n   *   press: 'var(--tailwind-color-hoge1--press, #ddd)',\n   *   disabled: 'var(--tailwind-color-hoge1--disabled, #eee)',\n   * }\n   * ```\n   */\n  function colorsForAllEffects(name: string, color: Material) {\n    const varName = `${COLOR_PREFIX}${name}`\n\n    return {\n      [DEFAULT]: `var(${varName}, ${color})`,\n\n      ...mapObject(effects, (effectName, effect) => [\n        effectName,\n        `var(${varName}--${effectName}, ${applyEffect(color, effect)})`,\n      ]),\n    }\n  }\n\n  return mapObject(targetColors, (name, color) => [\n    name,\n    colorsForAllEffects(name, color),\n  ])\n}\n","import { GradientMaterial, Material } from '@charcoal-ui/foundation'\n\nexport const COLOR_PREFIX = '--tailwind-color-'\n\nexport function isSingleColor(color: AnyColor): color is Material {\n  return typeof color === 'string'\n}\n\ntype AnyColor = Material | GradientMaterial\n\nexport type AnyColorTheme = Record<string, AnyColor>\n","import { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport {\n  applyEffect,\n  filterObject,\n  flatMapObject,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { COLOR_PREFIX, isSingleColor } from './utils'\n\n/**\n * `:root` 以外のケースで各 CSS Variable がどういう値を取るかを定義する\n */\nexport default function cssVariableColorPlugin({\n  ':root': _defaultTheme,\n  ...themes\n}: ThemeMap): TailwindPlugin {\n  const definitions = defineCssVariables(themes)\n\n  return plugin(({ addBase }) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addBase(definitions)\n  })\n}\n\nexport function defineCssVariables(themes: Omit<ThemeMap, ':root'>) {\n  return mapObject(themes, (selectorOrMediaQuery, theme) => {\n    const css = toCssVariables(theme)\n\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      return [\n        selectorOrMediaQuery,\n        {\n          ':root': css,\n        },\n      ]\n    } else {\n      return [selectorOrMediaQuery, css]\n    }\n  }) as Definition\n}\n\nfunction toCssVariables(theme: Theme): CSSVariables {\n  const colors = filterObject(theme.color, isSingleColor)\n  const effects = Object.entries(mergeEffect(theme))\n\n  return flatMapObject(colors, (name, color) => {\n    const varName: keyof CSSVariables = `${COLOR_PREFIX}${name}`\n\n    return [\n      [varName, color],\n\n      ...effects.map<[CSSVariableName, Material]>(([type, effect]) => [\n        `${varName}--${type}`,\n        applyEffect(color, effect),\n      ]),\n    ]\n  })\n}\n","import plugin from 'tailwindcss/plugin'\nimport { camelToKebab } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  flatMapObject,\n  gradient,\n  GradientDirection,\n  mapKeys,\n  mapObject,\n} from '@charcoal-ui/utils'\nimport { Values } from '../types'\nimport { MergedEffect } from '../foundation'\n\nconst VAR_PREFIX = '--tailwind-gradient-'\n\nexport default function cssVariableColorPlugin(\n  gradients: ThemeColorGradient,\n  effects: MergedEffect,\n  selectorOrMediaQuery: string\n) {\n  const utilities = getUtilities(gradients, effects)\n\n  const classRules = mapObject(utilities, (name) => [\n    `.bg-${name}`,\n    { backgroundImage: `var(${VAR_PREFIX}${name})` },\n  ])\n\n  return plugin(({ addBase, addUtilities }) => {\n    const css = mapKeys(utilities, (name) => `${VAR_PREFIX}${name}`)\n    if (selectorOrMediaQuery.startsWith('@media')) {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: {\n          ':root': css,\n        },\n      })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      addBase({\n        [selectorOrMediaQuery]: css,\n      })\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    addUtilities(classRules, {\n      variants: ['responsive'],\n    })\n  })\n}\n\nconst DIRECTIONS = {\n  'to top': 'top',\n  'to bottom': 'bottom',\n  'to left': 'left',\n  'to right': 'right',\n} as const\n\n/**\n * こういう感じのやつ。この時点では `--tailwind-gradient-` のような CSS 変数名になってない\n *\n * ```js\n * {\n *   'hoge1': 'linear-gradient(to top, ...)',\n *   ...\n * }\n * ```\n */\ntype Utilities = Record<string, LinearGradient>\n\ntype LinearGradient = `linear-gradient(${string})`\n\nexport function getUtilities(\n  gradients: Record<string, GradientMaterial>,\n  effect: MergedEffect\n): Utilities {\n  const effects = Object.entries(effect)\n  const directions = Object.entries(DIRECTIONS) as [\n    GradientDirection,\n    Values<typeof DIRECTIONS>\n  ][]\n\n  return flatMapObject(gradients, (name, colors) =>\n    directions.flatMap(([direction, className]) => {\n      const toLinearGradient = (colors: GradientMaterial) => {\n        const style = gradient(direction)(colors)\n\n        if (!('backgroundImage' in style)) {\n          throw new Error(\n            `Could not generate linear-gradient() from ${name} ${direction} ${className}`\n          )\n        }\n\n        // 本当は backgroundColor も同時に生成されるんだけど、使うにはそれ用の CSS 変数も一緒に作らないといけない\n        // とりあえず background-image だけで動くのでこっちだけを利用する\n        return style.backgroundImage as LinearGradient\n      }\n\n      return [\n        // こういう感じのやつ\n        // { 'hoge1': 'linear-gradient(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradient(to top, ...)' }\n        ...effects.map<[string, LinearGradient]>(([effectName, effect]) => [\n          createUtilityName(name, className, effectName),\n          toLinearGradient(applyEffectToGradient(effect)(colors)),\n        ]),\n      ]\n    })\n  )\n}\n\nfunction createUtilityName(\n  gradientName: string,\n  direction: Values<typeof DIRECTIONS>,\n  suffix = ''\n) {\n  return [camelToKebab(gradientName), direction, suffix]\n    .filter(Boolean)\n    .join('-')\n}\n","import plugin from 'tailwindcss/plugin'\nimport { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'\nimport { halfLeading, mapObject, px } from '@charcoal-ui/utils'\n\nconst leadingCancel = {\n  display: 'block',\n  width: 0,\n  height: 0,\n  content: '\"\"',\n}\n\nconst typographyStyle = (style: TypographyDescriptor) => {\n  const margin = -halfLeading(style)\n\n  return {\n    'font-size': px(style.fontSize),\n    'line-height': px(style.lineHeight),\n\n    /**\n     * cancel leading\n     *\n     * @see https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/\n     */\n    '&::before': {\n      ...leadingCancel,\n      marginTop: px(margin),\n    },\n    '&::after': {\n      ...leadingCancel,\n      marginBottom: px(margin),\n    },\n  }\n}\n\nconst typographyPlugin = plugin(({ addUtilities }) => {\n  const typographyClasses = mapObject(TYPOGRAPHY_SIZE, (fontSize, style) => [\n    `.typography-${fontSize}`,\n    typographyStyle(style),\n  ])\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  addUtilities(\n    {\n      ...typographyClasses,\n      '.preserve-half-leading': {\n        '&::before': {\n          content: 'none',\n        },\n        '&::after': {\n          content: 'none',\n        },\n      },\n    },\n    {\n      variants: ['responsive'],\n    }\n  )\n})\n\nexport default typographyPlugin\n"],"mappings":"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","names":["mapObject","px","applyEffect","filterObject","mapObject","mapObject","filterObject","applyEffect","plugin","flatMapObject","mapObject","cssVariableColorPlugin","plugin","colors","effect","plugin","mapObject","px","mapObject","theme","cssVariableColorPlugin"]}

package/dist/typography/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/typography/plugin.ts"],"names":[],"mappings":"AAmCA,QAAA,MAAM,gBAAgB,6CAuBpB,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/typography/plugin.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,gBAAgB,6CAuBpB,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/util.d.ts

@@ -1,4 +1,4 @@
-import { TailwindConfig } from 'tailwindcss/tailwind-config';
+import type { TailwindConfig } from 'tailwindcss/tailwind-config';
 import { TailwindVersion, ThemeMap } from './types';
 /**
  * the key "default" or "DEFAULT" has special meaning and dropped from class name

package/dist/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,eAAe,yBAWzD;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,cAAc,CAAC,CAczB;AAMD,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAuBnE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,eAAe,yBAWzD;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,cAAc,CAAC,CAczB;AAMD,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAuBnE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.11",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -17,9 +17,15 @@
     "build:bundle": "FORCE_COLOR=1 tsup",
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
-    "clean": "rimraf dist .tsbuildinfo"
+    "clean": "rimraf dist .tsbuildinfo",
+    "test": "jest --passWithNoTests"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
     "postcss": "^8.4.5",
     "postcss-selector-parser": "^6.0.9",
     "react": "^18.0.0",
@@ -29,9 +35,9 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.0",
-    "@charcoal-ui/theme": "^4.0.0-beta.0",
-    "@charcoal-ui/utils": "^4.0.0-beta.0"
+    "@charcoal-ui/foundation": "^4.0.0-beta.11",
+    "@charcoal-ui/theme": "^4.0.0-beta.11",
+    "@charcoal-ui/utils": "^4.0.0-beta.11"
   },
   "peerDependencies": {
     "csstype": ">=3.0.0",
@@ -50,5 +56,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/tailwind-config"
   },
-  "gitHead": "69a560871e52e9ebbdf8a27e59e8d1e085bc552c"
+  "gitHead": "98fdec96dc55faa3cd72bf635f1c596d4be88f1a"
 }

package/src/Custom.mdx

@@ -0,0 +1,122 @@
+import { Meta, Story } from '@storybook/addon-docs'
+
+<Meta title="tailwind-config/Custom" />
+
+# カスタマイズする
+
+`createTailwindConfig` を利用することでお使いの環境、色などに適応させることができます。
+
+```js
+const { light, dark } = require('@charcoal-ui/theme')
+const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
+
+/**
+ * @type {import('tailwindcss/tailwind-config').TailwindConfig}
+ */
+module.exports = {
+  darkMode: false,
+  content: ['./src/**/*.tsx', './src/**/*.html'],
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '@media (prefers-color-scheme: dark)': dark,
+      },
+    }),
+  ],
+}
+```
+
+`createTailwindConfig` には以下のオプションを渡すことができます。
+
+| name    | type                    | description                                                                                                       |
+| ------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| theme   | `Record<string, Theme>` | 条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。                                                 |
+| version | v1 \| v2 \| v3          | Tailwind.css のバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。 |
+
+## ThemaMap について
+
+charcoal は Tailwind.css の通常のダークモード (`dark:○○`のようなクラス) をサポートしません。
+なぜなら charcoal における「色」は、見にくい事もなく light テーマと dark テーマで違うカラーコードであり得るからです。
+そこで登場するのが `@charcoal-ui/tailwind-config` で使える `theme` というオプションを受け取ります。
+
+以下の例は `:root` （つまり通常ケース）では light テーマで、システムの設定がダークモードである場合は dark テーマを使用するものです。
+
+```js
+createTailwindConfig({
+  version: 'v3',
+  theme: {
+    ':root': light,
+    '@media (prefers-color-scheme: dark)': dark,
+  },
+})
+```
+
+`theme` オプションを渡す設定の場合、ダークテーマ対応されないサービスであっても `:root` に必ず自身のプロダクトのカラーテーマを渡す必要があります。
+
+`theme` でこのように書くと、このような CSS Variables を生成します。
+
+```css
+/* 以下はイメージです */
+
+:root {
+  --tailwind-color-background1: #fff;
+  --tailwind-color-background2: #f5f5f5;
+  /* ... */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --tailwind-color-background1: #1f1f1f;
+    --tailwind-color-background2: #000000;
+    /* ... */
+  }
+}
+```
+
+このとき、以下のように置く必要はありません。
+キーが `@media` で始まる場合はビルド時に `:root` が補われます。
+
+```js
+{
+  theme: {
+    // これは間違い！！
+    '@media (prefers-color-scheme: dark)': {
+        ':root': dark
+    },
+
+    // 正しくはこう
+    '@media (prefers-color-scheme: dark)': dark
+  }
+}
+```
+
+`theme` のキーとして通常のセレクタを指定することもできます。
+これによりダークモードの切り替えが DOM の状態に依存するケースにも対応します。`localStorage` などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。
+
+```js
+createTailwindConfig({
+  version: 'v3',
+  theme: {
+    ':root': light,
+    'html[data-theme="dark"]': dark,
+  },
+})
+```
+
+```css
+/* 以下はイメージです */
+
+:root {
+  --tailwind-color-background1: #fff;
+  --tailwind-color-background2: #f5f5f5;
+  /* ... */
+}
+
+html[data-theme='dark'] {
+  --tailwind-color-background1: #1f1f1f;
+  --tailwind-color-background2: #000000;
+  /* ... */
+}
+```

package/src/README.mdx

@@ -0,0 +1,61 @@
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs'
+
+<Meta title="tailwind-config/README" />
+
+# @charcoal-ui/tailwind-config クイックスタート
+
+[![npmバッジ](https://img.shields.io/npm/v/@charcoal-ui/tailwind-config?label=%40charcoal-ui%2Ftailwind-config&style=flat-square&logo=npm)](https://www.npmjs.com/package/@charcoal-ui/tailwind-config)
+
+## インストール
+
+以下のいずれかのパッケージマネージャーを使用してインストールしてください
+
+### npm
+
+```bash
+npm install --save-dev @charcoal-ui/tailwind-config
+```
+
+### yarn
+
+```bash
+yarn add -D @charcoal-ui/tailwind-config
+```
+
+### pnpm
+
+```bash
+pnpm add -D @charcoal-ui/tailwind-config
+```
+
+### bun
+
+```bash
+bun add -D @charcoal-ui/tailwind-config
+```
+
+## 概要
+
+`@charcoal-ui/tailwind-config` は、Tailwind に `@charcoal-ui/foundation` を適用します。
+
+## 使い方
+
+`tailwind.config.js` の中で `require` して使います。
+
+### デフォルトの config を使う
+
+```javascript
+const { config } = require('@charcoal-ui/tailwind-config')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  presets: [config],
+}
+```
+
+テーマの調整などが必要な場合は[カスタマイズする](/docs/tailwind-config-custom--docs)のページを見てください。

package/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`tailwind.config.js list of classes 1`] = `
-Array [
+[
   "sr-only",
   "not-sr-only",
   "pointer-events-none",
@@ -4223,7 +4223,7 @@ Array [
 `;
 
 exports[`tailwind.config.js list of css variables 1`] = `
-Array [
+[
   "--tailwind-color-transparent",
   "--tailwind-color-transparent--disabled",
   "--tailwind-color-transparent--hover",

package/src/_lib/TailwindBuild.ts

@@ -1,7 +1,7 @@
 import postcss, { Result } from 'postcss'
 import postcssSelectorParser from 'postcss-selector-parser'
 import tailwindcss from 'tailwindcss'
-import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { TailwindConfig } from 'tailwindcss/tailwind-config'
 
 const selectorParser = postcssSelectorParser()
 

package/src/_lib/compat.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 
 /**
  * import { Story } from '@storybook/react/types-6-0'

package/src/colors/toTailwindConfig.ts

@@ -1,6 +1,6 @@
 import { Material } from '@charcoal-ui/foundation'
 import { applyEffect, filterObject, mapObject } from '@charcoal-ui/utils'
-import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { TailwindConfig } from 'tailwindcss/tailwind-config'
 import { MergedEffect } from '../foundation'
 
 import { TailwindVersion } from '../types'

package/src/docs/borderRadius/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { BorderRadius } from '.'
 
 <Meta title="tailwind-config/BorderRadius" component={[BorderRadius]} />
@@ -7,4 +8,6 @@ import { BorderRadius } from '.'
 
 <br />
 
-<BorderRadius />
+<Unstyled>
+  <BorderRadius />
+</Unstyled>

package/src/docs/colors/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { Colors, TextColors } from '.'
 
 <Meta title="tailwind-config/Colors/Doc" component={[Colors, TextColors]} />
@@ -11,7 +12,9 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<Colors />
+<Unstyled>
+  <Colors />
+</Unstyled>
 
 <br />
 <br />
@@ -20,4 +23,6 @@ import { Colors, TextColors } from '.'
 
 <br />
 
-<TextColors />
+<Unstyled>
+  <TextColors />
+</Unstyled>

package/src/docs/gradient/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { Gradients } from '.'
 
 <Meta title="tailwind-config/Gradients" component={[Gradients]} />
@@ -7,4 +8,6 @@ import { Gradients } from '.'
 
 <br />
 
-<Gradients />
+<Unstyled>
+  <Gradients />
+</Unstyled>

package/src/docs/screens/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { Screens } from '.'
 
 <Meta title="tailwind-config/Screens" component={[Screens]} />
@@ -7,4 +8,6 @@ import { Screens } from '.'
 
 <br />
 
-<Screens />
+<Unstyled>
+  <Screens />
+</Unstyled>

package/src/docs/spacing/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { Spacing } from '.'
 
 <Meta title="tailwind-config/Spacing" component={[Spacing]} />
@@ -7,4 +8,6 @@ import { Spacing } from '.'
 
 <br />
 
-<Spacing />
+<Unstyled>
+  <Spacing />
+</Unstyled>

package/src/docs/typography/index.mdx

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/addon-docs'
+import { Unstyled } from '@storybook/blocks'
 import { Sizes, HalfLeading } from '.'
 
 <Meta title="tailwind-config/Typography" component={[Sizes]} />
@@ -11,7 +12,9 @@ import { Sizes, HalfLeading } from '.'
 
 <br />
 
-<Sizes />
+<Unstyled>
+  <Sizes />
+</Unstyled>
 
 <br />
 
@@ -19,4 +22,6 @@ import { Sizes, HalfLeading } from '.'
 
 <br />
 
-<HalfLeading />
+<Unstyled>
+  <HalfLeading />
+</Unstyled>

package/src/index.ts

@@ -1,6 +1,6 @@
 import { GRID_COUNT, mergeEffect } from './foundation'
 
-import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { TailwindConfig } from 'tailwindcss/tailwind-config'
 import { TailwindVersion, ThemeMap } from './types'
 
 import {

package/src/typography/plugin.ts

@@ -1,7 +1,6 @@
 import plugin from 'tailwindcss/plugin'
 import { TypographyDescriptor, TYPOGRAPHY_SIZE } from '@charcoal-ui/foundation'
-import { halfLeading, mapObject } from '@charcoal-ui/utils'
-import { px } from '@charcoal-ui/utils'
+import { halfLeading, mapObject, px } from '@charcoal-ui/utils'
 
 const leadingCancel = {
   display: 'block',

package/src/util.ts

@@ -1,4 +1,4 @@
-import { TailwindConfig } from 'tailwindcss/tailwind-config'
+import type { TailwindConfig } from 'tailwindcss/tailwind-config'
 import { TailwindVersion, ThemeMap } from './types'
 
 /**