@charcoal-ui/tailwind-config 1.0.1-alpha.0 → 1.0.1-alpha.3

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/foundation.ts","../src/util.ts","../src/colors/utils.ts","../src/colors/toTailwindConfig.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts","../src/index.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 mapKeys<V, K extends string>(\n  object: Record<string, V>,\n  callback: (key: string) => K\n) {\n  return Object.fromEntries(\n    Object.entries(object).map(([key, value]) => [callback(key), value])\n  ) as Record<K, V>\n}\n\nexport function mapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (\n    key: SourceKey,\n    value: SourceValue\n  ) => [DestKey, DestValue] | null | undefined\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      const entry = callback(key as SourceKey, value as SourceValue)\n      if (entry) {\n        return [entry]\n      } else {\n        return []\n      }\n    })\n  ) as Record<DestKey, DestValue>\n}\n\nexport function flatMapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      return callback(key as SourceKey, value as SourceValue)\n    })\n  ) as Record<DestKey, DestValue>\n}\n\nexport function filterObject<Source, Dest extends Source>(\n  source: Record<string, Source>,\n  fn: (value: Source) => value is Dest\n) {\n  return mapObject(source, (key, value) => {\n    if (fn(value) === true) {\n      return [key, value]\n    } else {\n      return null\n    }\n  }) as Record<string, Dest>\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 { 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 { applyEffect } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { filterObject, getDefaultKeyName, mapObject } from '../util'\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 { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { filterObject, flatMapObject, mapObject } from '../util'\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, flatMapObject, mapKeys, mapObject } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  gradient,\n  GradientDirection,\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-gradienr(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradienr(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 } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\nimport { mapObject } from '../util'\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","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  mapObject,\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 { 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\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"],"names":["mergeEffect","elementEffect","effect","outline","type","opacity","getDefaultKeyName","version","setEquals","a","b","size","Array","from","every","value","has","mapObject","source","callback","Object","fromEntries","entries","flatMap","entry","flatMapObject","filterObject","fn","key","isSingleColor","color","colorsToTailwindConfig","colors","effects","targetColors","DEFAULT","colorsForAllEffects","name","varName","effectName","applyEffect","cssVariableColorPlugin","_defaultTheme","definitions","selectorOrMediaQuery","theme","css","map","toCssVariables","startsWith","plugin","addBase","DIRECTIONS","createUtilityName","gradientName","direction","suffix","replace","toLowerCase","filter","Boolean","join","leadingCancel","display","width","height","content","typographyStyle","style","margin","halfLeading","px","fontSize","lineHeight","marginTop","marginBottom","typographyPlugin","addUtilities","TYPOGRAPHY_SIZE","variants","createTailwindConfig","light","themeMap","defaultTheme","expectedColorKeys","Set","keys","expectedEffectKeys","colorKeys","effectKeys","Error","JSON","stringify","assertAllThemeHaveSameKeys","screens","screen1","screen2","breakpoint","screen3","screen4","screen5","black","white","transparent","current","borderColor","border","k","v","spacing","SPACING","pixel","full","screen","auto","length","_","i","reduce","styles","COLUMN_UNIT","GUTTER_UNIT","GRID_COUNT","gap","fixed","borderRadius","BORDER_RADIUS","transitionDuration","getVariantOption","corePlugins","plugins","gradients","utilities","directions","className","toLinearGradient","gradient","backgroundImage","applyEffectToGradient","getUtilities","classRules","cssVariableGradientPlugin","gradientColor","config"],"mappings":"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"}
+{"version":3,"file":"index.module.js","sources":["../src/foundation.ts","../src/util.ts","../src/colors/utils.ts","../src/colors/toTailwindConfig.ts","../src/colors/plugin.ts","../src/gradient/plugin.ts","../src/typography/plugin.ts","../src/index.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\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n  object: Record<string, V>,\n  callback: (key: string) => K\n) {\n  return Object.fromEntries(\n    Object.entries(object).map(([key, value]) => [callback(key), value])\n  ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (\n    key: SourceKey,\n    value: SourceValue\n  ) => [DestKey, DestValue] | null | undefined\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      const entry = callback(key as SourceKey, value as SourceValue)\n      if (entry) {\n        return [entry]\n      } else {\n        return []\n      }\n    })\n  ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n *   [key + '1', value + '1'],\n *   [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n  SourceKey extends string,\n  SourceValue,\n  DestKey extends string,\n  DestValue\n>(\n  source: Record<SourceKey, SourceValue>,\n  callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]\n) {\n  return Object.fromEntries(\n    Object.entries(source).flatMap(([key, value]) => {\n      return callback(key as SourceKey, value as SourceValue)\n    })\n  ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n *   { a: 'aa', b: 'bb', c: 'cc' },\n *   (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n  source: Record<string, Source>,\n  fn: (value: Source) => value is Dest\n) {\n  return mapObject(source, (key, value) => {\n    if (fn(value) === true) {\n      return [key, value]\n    } else {\n      return null\n    }\n  }) as Record<string, Dest>\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 { 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 { applyEffect } from '@charcoal-ui/utils'\nimport { TailwindConfig } from 'tailwindcss/tailwind-config'\nimport { MergedEffect } from '../foundation'\n\nimport { TailwindVersion } from '../types'\nimport { filterObject, getDefaultKeyName, mapObject } from '../util'\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 { Material } from '@charcoal-ui/foundation'\nimport { CharcoalTheme as Theme } from '@charcoal-ui/theme'\nimport { applyEffect } from '@charcoal-ui/utils'\nimport plugin, { TailwindPlugin } from 'tailwindcss/plugin'\nimport { mergeEffect } from '../foundation'\nimport { CSSVariableName, CSSVariables, Definition, ThemeMap } from '../types'\nimport { filterObject, flatMapObject, mapObject } from '../util'\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, flatMapObject, mapKeys, mapObject } from '../util'\nimport { GradientMaterial } from '@charcoal-ui/foundation'\nimport { ThemeColorGradient } from '@charcoal-ui/theme'\nimport {\n  applyEffectToGradient,\n  gradient,\n  GradientDirection,\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-gradienr(to top, ...)' }\n        [createUtilityName(name, className), toLinearGradient(colors)],\n\n        // こういう感じのやつ\n        // { 'hoge1--hover': 'linear-gradienr(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 } from '@charcoal-ui/utils'\nimport { px } from '@charcoal-ui/utils'\nimport { mapObject } from '../util'\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","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  mapObject,\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 { 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\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"],"names":["mergeEffect","elementEffect","effect","outline","type","opacity","getDefaultKeyName","version","setEquals","a","b","size","Array","from","every","value","has","mapObject","source","callback","Object","fromEntries","entries","flatMap","entry","flatMapObject","filterObject","fn","key","isSingleColor","color","colorsToTailwindConfig","colors","effects","targetColors","DEFAULT","colorsForAllEffects","name","varName","effectName","applyEffect","cssVariableColorPlugin","_defaultTheme","definitions","selectorOrMediaQuery","theme","css","map","toCssVariables","startsWith","plugin","addBase","DIRECTIONS","createUtilityName","gradientName","direction","suffix","replace","toLowerCase","filter","Boolean","join","leadingCancel","display","width","height","content","typographyStyle","style","margin","halfLeading","px","fontSize","lineHeight","marginTop","marginBottom","typographyPlugin","addUtilities","TYPOGRAPHY_SIZE","variants","createTailwindConfig","light","themeMap","defaultTheme","expectedColorKeys","Set","keys","expectedEffectKeys","colorKeys","effectKeys","Error","JSON","stringify","assertAllThemeHaveSameKeys","screens","screen1","screen2","breakpoint","screen3","screen4","screen5","black","white","transparent","current","borderColor","border","k","v","spacing","SPACING","pixel","full","screen","auto","length","_","i","reduce","styles","COLUMN_UNIT","GUTTER_UNIT","GRID_COUNT","gap","fixed","borderRadius","BORDER_RADIUS","transitionDuration","getVariantOption","corePlugins","plugins","gradients","utilities","directions","className","toLinearGradient","gradient","backgroundImage","applyEffectToGradient","getUtilities","classRules","cssVariableGradientPlugin","gradientColor","config"],"mappings":"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"}

package/dist/util.d.ts

@@ -8,9 +8,41 @@ import { TailwindVersion, ThemeMap } from './types';
 export declare function getDefaultKeyName(version: TailwindVersion): "DEFAULT" | "default";
 export declare function getVariantOption(version: TailwindVersion): Partial<TailwindConfig>;
 export declare function assertAllThemeHaveSameKeys(themeMap: ThemeMap): void;
+/**
+ * @example
+ * ```js
+ * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
+ * ````
+ */
 export declare function mapKeys<V, K extends string>(object: Record<string, V>, callback: (key: string) => K): Record<K, V>;
+/**
+ * @example
+ * ```js
+ * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
+ *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]
+ * ) // => { a1: "AA", c1: "CC" }
+ * ```
+ */
 export declare function mapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue] | null | undefined): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```js
+ * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
+ *   [key + '1', value + '1'],
+ *   [key + '2', value + '2'],
+ * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
+ * ```
+ */
 export declare function flatMapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```ts
+ * filterObject(
+ *   { a: 'aa', b: 'bb', c: 'cc' },
+ *   (value): value is string => value !== 'bb'
+ * ) // => { a: "aa", c: "cc" }
+ * ```
+ */
 export declare function filterObject<Source, Dest extends Source>(source: Record<string, Source>, fn: (value: Source) => value is Dest): Record<string, Dest>;
 export declare function camelToKebab(value: string): string;
 //# sourceMappingURL=util.d.ts.map

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,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}
+{"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;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,UAIzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/tailwind-config",
-  "version": "1.0.1-alpha.0",
+  "version": "1.0.1-alpha.3",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -21,13 +21,14 @@
     "microbundle": "^0.14.2",
     "postcss": "^8.4.5",
     "postcss-selector-parser": "^6.0.9",
+    "react": "^18.0.0",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.0.5",
     "typescript": "^4.5.5"
   },
   "dependencies": {
     "@charcoal-ui/foundation": "^1.0.1-alpha.0",
-    "@charcoal-ui/theme": "^2.0.0-alpha.0",
+    "@charcoal-ui/theme": "^2.0.0-alpha.3",
     "@charcoal-ui/utils": "^1.0.1-alpha.0"
   },
   "peerDependencies": {
@@ -47,5 +48,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/tailwind-config"
   },
-  "gitHead": "172c6cd4b52fb2c60caed41e3035296e237ec32f"
+  "gitHead": "f1fcafd39b0d4c2aa970cd4fdbbc3a12147c94a4"
 }

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

@@ -1750,6 +1750,26 @@ Array [
   "bg-assertive-hover",
   "bg-assertive-press",
   "bg-assertive-outline",
+  "bg-warning",
+  "bg-warning-disabled",
+  "bg-warning-hover",
+  "bg-warning-press",
+  "bg-warning-outline",
+  "bg-success",
+  "bg-success-disabled",
+  "bg-success-hover",
+  "bg-success-press",
+  "bg-success-outline",
+  "bg-updatedItem",
+  "bg-updatedItem-disabled",
+  "bg-updatedItem-hover",
+  "bg-updatedItem-press",
+  "bg-updatedItem-outline",
+  "bg-border",
+  "bg-border-disabled",
+  "bg-border-hover",
+  "bg-border-press",
+  "bg-border-outline",
   "bg-opacity-0",
   "bg-opacity-5",
   "bg-opacity-10",
@@ -1887,6 +1907,26 @@ Array [
   "from-assertive-hover",
   "from-assertive-press",
   "from-assertive-outline",
+  "from-warning",
+  "from-warning-disabled",
+  "from-warning-hover",
+  "from-warning-press",
+  "from-warning-outline",
+  "from-success",
+  "from-success-disabled",
+  "from-success-hover",
+  "from-success-press",
+  "from-success-outline",
+  "from-updatedItem",
+  "from-updatedItem-disabled",
+  "from-updatedItem-hover",
+  "from-updatedItem-press",
+  "from-updatedItem-outline",
+  "from-border",
+  "from-border-disabled",
+  "from-border-hover",
+  "from-border-press",
+  "from-border-outline",
   "via-black",
   "via-white",
   "via-transparent",
@@ -2000,6 +2040,26 @@ Array [
   "via-assertive-hover",
   "via-assertive-press",
   "via-assertive-outline",
+  "via-warning",
+  "via-warning-disabled",
+  "via-warning-hover",
+  "via-warning-press",
+  "via-warning-outline",
+  "via-success",
+  "via-success-disabled",
+  "via-success-hover",
+  "via-success-press",
+  "via-success-outline",
+  "via-updatedItem",
+  "via-updatedItem-disabled",
+  "via-updatedItem-hover",
+  "via-updatedItem-press",
+  "via-updatedItem-outline",
+  "via-border",
+  "via-border-disabled",
+  "via-border-hover",
+  "via-border-press",
+  "via-border-outline",
   "to-black",
   "to-white",
   "to-transparent",
@@ -2113,6 +2173,26 @@ Array [
   "to-assertive-hover",
   "to-assertive-press",
   "to-assertive-outline",
+  "to-warning",
+  "to-warning-disabled",
+  "to-warning-hover",
+  "to-warning-press",
+  "to-warning-outline",
+  "to-success",
+  "to-success-disabled",
+  "to-success-hover",
+  "to-success-press",
+  "to-success-outline",
+  "to-updatedItem",
+  "to-updatedItem-disabled",
+  "to-updatedItem-hover",
+  "to-updatedItem-press",
+  "to-updatedItem-outline",
+  "to-border",
+  "to-border-disabled",
+  "to-border-hover",
+  "to-border-press",
+  "to-border-outline",
   "decoration-slice",
   "decoration-clone",
   "box-decoration-slice",
@@ -2258,6 +2338,26 @@ Array [
   "fill-assertive-hover",
   "fill-assertive-press",
   "fill-assertive-outline",
+  "fill-warning",
+  "fill-warning-disabled",
+  "fill-warning-hover",
+  "fill-warning-press",
+  "fill-warning-outline",
+  "fill-success",
+  "fill-success-disabled",
+  "fill-success-hover",
+  "fill-success-press",
+  "fill-success-outline",
+  "fill-updatedItem",
+  "fill-updatedItem-disabled",
+  "fill-updatedItem-hover",
+  "fill-updatedItem-press",
+  "fill-updatedItem-outline",
+  "fill-border",
+  "fill-border-disabled",
+  "fill-border-hover",
+  "fill-border-press",
+  "fill-border-outline",
   "stroke-black",
   "stroke-white",
   "stroke-transparent",
@@ -2371,6 +2471,26 @@ Array [
   "stroke-assertive-hover",
   "stroke-assertive-press",
   "stroke-assertive-outline",
+  "stroke-warning",
+  "stroke-warning-disabled",
+  "stroke-warning-hover",
+  "stroke-warning-press",
+  "stroke-warning-outline",
+  "stroke-success",
+  "stroke-success-disabled",
+  "stroke-success-hover",
+  "stroke-success-press",
+  "stroke-success-outline",
+  "stroke-updatedItem",
+  "stroke-updatedItem-disabled",
+  "stroke-updatedItem-hover",
+  "stroke-updatedItem-press",
+  "stroke-updatedItem-outline",
+  "stroke-border",
+  "stroke-border-disabled",
+  "stroke-border-hover",
+  "stroke-border-press",
+  "stroke-border-outline",
   "stroke-0",
   "stroke-1",
   "stroke-2",
@@ -2664,6 +2784,26 @@ Array [
   "text-assertive-hover",
   "text-assertive-press",
   "text-assertive-outline",
+  "text-warning",
+  "text-warning-disabled",
+  "text-warning-hover",
+  "text-warning-press",
+  "text-warning-outline",
+  "text-success",
+  "text-success-disabled",
+  "text-success-hover",
+  "text-success-press",
+  "text-success-outline",
+  "text-updatedItem",
+  "text-updatedItem-disabled",
+  "text-updatedItem-hover",
+  "text-updatedItem-press",
+  "text-updatedItem-outline",
+  "text-border",
+  "text-border-disabled",
+  "text-border-hover",
+  "text-border-press",
+  "text-border-outline",
   "text-opacity-0",
   "text-opacity-5",
   "text-opacity-10",
@@ -2796,6 +2936,26 @@ Array [
   "decoration-assertive-hover",
   "decoration-assertive-press",
   "decoration-assertive-outline",
+  "decoration-warning",
+  "decoration-warning-disabled",
+  "decoration-warning-hover",
+  "decoration-warning-press",
+  "decoration-warning-outline",
+  "decoration-success",
+  "decoration-success-disabled",
+  "decoration-success-hover",
+  "decoration-success-press",
+  "decoration-success-outline",
+  "decoration-updatedItem",
+  "decoration-updatedItem-disabled",
+  "decoration-updatedItem-hover",
+  "decoration-updatedItem-press",
+  "decoration-updatedItem-outline",
+  "decoration-border",
+  "decoration-border-disabled",
+  "decoration-border-hover",
+  "decoration-border-press",
+  "decoration-border-outline",
   "decoration-solid",
   "decoration-double",
   "decoration-dotted",
@@ -2929,6 +3089,26 @@ Array [
   "placeholder-assertive-hover",
   "placeholder-assertive-press",
   "placeholder-assertive-outline",
+  "placeholder-warning",
+  "placeholder-warning-disabled",
+  "placeholder-warning-hover",
+  "placeholder-warning-press",
+  "placeholder-warning-outline",
+  "placeholder-success",
+  "placeholder-success-disabled",
+  "placeholder-success-hover",
+  "placeholder-success-press",
+  "placeholder-success-outline",
+  "placeholder-updatedItem",
+  "placeholder-updatedItem-disabled",
+  "placeholder-updatedItem-hover",
+  "placeholder-updatedItem-press",
+  "placeholder-updatedItem-outline",
+  "placeholder-border",
+  "placeholder-border-disabled",
+  "placeholder-border-hover",
+  "placeholder-border-press",
+  "placeholder-border-outline",
   "placeholder-opacity-0",
   "placeholder-opacity-5",
   "placeholder-opacity-10",
@@ -3057,6 +3237,26 @@ Array [
   "caret-assertive-hover",
   "caret-assertive-press",
   "caret-assertive-outline",
+  "caret-warning",
+  "caret-warning-disabled",
+  "caret-warning-hover",
+  "caret-warning-press",
+  "caret-warning-outline",
+  "caret-success",
+  "caret-success-disabled",
+  "caret-success-hover",
+  "caret-success-press",
+  "caret-success-outline",
+  "caret-updatedItem",
+  "caret-updatedItem-disabled",
+  "caret-updatedItem-hover",
+  "caret-updatedItem-press",
+  "caret-updatedItem-outline",
+  "caret-border",
+  "caret-border-disabled",
+  "caret-border-hover",
+  "caret-border-press",
+  "caret-border-outline",
   "accent-black",
   "accent-white",
   "accent-transparent",
@@ -3170,6 +3370,26 @@ Array [
   "accent-assertive-hover",
   "accent-assertive-press",
   "accent-assertive-outline",
+  "accent-warning",
+  "accent-warning-disabled",
+  "accent-warning-hover",
+  "accent-warning-press",
+  "accent-warning-outline",
+  "accent-success",
+  "accent-success-disabled",
+  "accent-success-hover",
+  "accent-success-press",
+  "accent-success-outline",
+  "accent-updatedItem",
+  "accent-updatedItem-disabled",
+  "accent-updatedItem-hover",
+  "accent-updatedItem-press",
+  "accent-updatedItem-outline",
+  "accent-border",
+  "accent-border-disabled",
+  "accent-border-hover",
+  "accent-border-press",
+  "accent-border-outline",
   "accent-auto",
   "opacity-0",
   "opacity-5",
@@ -3339,6 +3559,26 @@ Array [
   "shadow-assertive-hover",
   "shadow-assertive-press",
   "shadow-assertive-outline",
+  "shadow-warning",
+  "shadow-warning-disabled",
+  "shadow-warning-hover",
+  "shadow-warning-press",
+  "shadow-warning-outline",
+  "shadow-success",
+  "shadow-success-disabled",
+  "shadow-success-hover",
+  "shadow-success-press",
+  "shadow-success-outline",
+  "shadow-updatedItem",
+  "shadow-updatedItem-disabled",
+  "shadow-updatedItem-hover",
+  "shadow-updatedItem-press",
+  "shadow-updatedItem-outline",
+  "shadow-border",
+  "shadow-border-disabled",
+  "shadow-border-hover",
+  "shadow-border-press",
+  "shadow-border-outline",
   "outline-none",
   "outline",
   "outline-dashed",
@@ -3468,6 +3708,26 @@ Array [
   "outline-assertive-hover",
   "outline-assertive-press",
   "outline-assertive-outline",
+  "outline-warning",
+  "outline-warning-disabled",
+  "outline-warning-hover",
+  "outline-warning-press",
+  "outline-warning-outline",
+  "outline-success",
+  "outline-success-disabled",
+  "outline-success-hover",
+  "outline-success-press",
+  "outline-success-outline",
+  "outline-updatedItem",
+  "outline-updatedItem-disabled",
+  "outline-updatedItem-hover",
+  "outline-updatedItem-press",
+  "outline-updatedItem-outline",
+  "outline-border",
+  "outline-border-disabled",
+  "outline-border-hover",
+  "outline-border-press",
+  "outline-border-outline",
   "ring-0",
   "ring-1",
   "ring-2",
@@ -3588,6 +3848,26 @@ Array [
   "ring-assertive-hover",
   "ring-assertive-press",
   "ring-assertive-outline",
+  "ring-warning",
+  "ring-warning-disabled",
+  "ring-warning-hover",
+  "ring-warning-press",
+  "ring-warning-outline",
+  "ring-success",
+  "ring-success-disabled",
+  "ring-success-hover",
+  "ring-success-press",
+  "ring-success-outline",
+  "ring-updatedItem",
+  "ring-updatedItem-disabled",
+  "ring-updatedItem-hover",
+  "ring-updatedItem-press",
+  "ring-updatedItem-outline",
+  "ring-border",
+  "ring-border-disabled",
+  "ring-border-hover",
+  "ring-border-press",
+  "ring-border-outline",
   "ring-opacity-0",
   "ring-opacity-5",
   "ring-opacity-10",
@@ -3721,6 +4001,26 @@ Array [
   "ring-offset-assertive-hover",
   "ring-offset-assertive-press",
   "ring-offset-assertive-outline",
+  "ring-offset-warning",
+  "ring-offset-warning-disabled",
+  "ring-offset-warning-hover",
+  "ring-offset-warning-press",
+  "ring-offset-warning-outline",
+  "ring-offset-success",
+  "ring-offset-success-disabled",
+  "ring-offset-success-hover",
+  "ring-offset-success-press",
+  "ring-offset-success-outline",
+  "ring-offset-updatedItem",
+  "ring-offset-updatedItem-disabled",
+  "ring-offset-updatedItem-hover",
+  "ring-offset-updatedItem-press",
+  "ring-offset-updatedItem-outline",
+  "ring-offset-border",
+  "ring-offset-border-disabled",
+  "ring-offset-border-hover",
+  "ring-offset-border-press",
+  "ring-offset-border-outline",
   "blur-0",
   "blur-none",
   "blur-sm",
@@ -4033,6 +4333,26 @@ Array [
   "--tailwind-color-assertive--hover",
   "--tailwind-color-assertive--press",
   "--tailwind-color-assertive--outline",
+  "--tailwind-color-warning",
+  "--tailwind-color-warning--disabled",
+  "--tailwind-color-warning--hover",
+  "--tailwind-color-warning--press",
+  "--tailwind-color-warning--outline",
+  "--tailwind-color-success",
+  "--tailwind-color-success--disabled",
+  "--tailwind-color-success--hover",
+  "--tailwind-color-success--press",
+  "--tailwind-color-success--outline",
+  "--tailwind-color-updatedItem",
+  "--tailwind-color-updatedItem--disabled",
+  "--tailwind-color-updatedItem--hover",
+  "--tailwind-color-updatedItem--press",
+  "--tailwind-color-updatedItem--outline",
+  "--tailwind-color-border",
+  "--tailwind-color-border--disabled",
+  "--tailwind-color-border--hover",
+  "--tailwind-color-border--press",
+  "--tailwind-color-border--outline",
   "--tailwind-gradient-surface5-top",
   "--tailwind-gradient-surface5-top-disabled",
   "--tailwind-gradient-surface5-top-hover",

package/src/_lib/compat.ts

@@ -0,0 +1,12 @@
+import React from 'react'
+
+/**
+ * import { Story } from '@storybook/react/types-6-0'
+ *
+ * をするとstyled-componentsが壊れるので代替品を作った
+ *
+ * エラー:
+ * node_modules/@types/styled-components/ts3.7/index.d.ts
+ * `Type alias 'Interpolation' circularly references itself. ts(2456)`
+ */
+export type Story<P> = React.ComponentType<P> & { args?: P }