= ({ bgColorClass, label, emphasizeLabelByDefault = false }) => (
+
+
+ {label}
+
+
+
+
+
+
+)
+
+export const Colors: React.FC = () => {
+ return (
+
+ {Object.entries(colors!!).map(([colorName, values]) => (
+
+ {typeof values === 'object' && 'DEFAULT' in values ? (
+ <>
+
+ {Object.keys(effectTypes).map((modifier) =>
+ modifier in values ? (
+
+ ) : null
+ )}
+
+ ) : (
+
+ )}
+
+ ))}
+
+ )
+}
diff --git a/docs/src/components/tailwind-config/colors/Gradients.tsx b/docs/src/components/tailwind-config/colors/Gradients.tsx
new file mode 100644
index 000000000..7d033124f
--- /dev/null
+++ b/docs/src/components/tailwind-config/colors/Gradients.tsx
@@ -0,0 +1,70 @@
+import {
+ directions,
+ effectTypes,
+ getUniqueGradientNames,
+ utilityClasses,
+} from './gradients/utils'
+
+const GradientBox: React.FC<{
+ gradientClassName: string
+ label: string
+ emphasizeLabelByDefault?: boolean
+}> = ({ gradientClassName, label, emphasizeLabelByDefault = false }) => (
+
+
+ {label}
+
+
+
+)
+
+export const Gradients: React.FC = () => {
+ const utilityClassNames = Object.keys(utilityClasses)
+ const uniqueGradientNames = getUniqueGradientNames(utilityClassNames)
+
+ return (
+
+ {uniqueGradientNames.map((gradientName) => (
+
+ {directions.map((direction) => (
+
+ {utilityClassNames.includes(`${gradientName}-${direction}`) && (
+
+ )}
+ {Object.keys(effectTypes).map(
+ (effectType) =>
+ utilityClassNames.includes(
+ `${gradientName}-${direction}-${effectType}`
+ ) && (
+
+ )
+ )}
+
+ ))}
+
+ ))}
+
+ )
+}
diff --git a/docs/src/components/tailwind-config/colors/TextColors.tsx b/docs/src/components/tailwind-config/colors/TextColors.tsx
new file mode 100644
index 000000000..90a02c11e
--- /dev/null
+++ b/docs/src/components/tailwind-config/colors/TextColors.tsx
@@ -0,0 +1,25 @@
+import { config } from '@charcoal-ui/tailwind-config'
+
+const {
+ theme: { colors },
+} = config
+
+export const TextColors: React.FC = () => (
+
+ {Object.keys(colors!!).map((colorName) => (
+
+
text-{colorName}
+
+
+
+ charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+ フロントエンドの実装に用いる npm パッケージ集のことを言います。
+
+
+
+ ))}
+
+)
diff --git a/docs/src/components/tailwind-config/colors/gradients/utils.ts b/docs/src/components/tailwind-config/colors/gradients/utils.ts
new file mode 100644
index 000000000..117c320bf
--- /dev/null
+++ b/docs/src/components/tailwind-config/colors/gradients/utils.ts
@@ -0,0 +1,92 @@
+import { config } from '@charcoal-ui/tailwind-config'
+import { EffectType } from '@charcoal-ui/theme'
+import { mapObject } from '@charcoal-ui/utils'
+
+export type TailwindPlugin = {
+ handler: ({
+ addBase,
+ addUtilities,
+ }: {
+ addBase: unknown
+ addUtilities: unknown
+ }) => void
+}
+
+type UtilityClasses = Record
>
+
+const getUtilities = (plugin: TailwindPlugin) => {
+ let utilities: UtilityClasses = {}
+
+ plugin.handler({
+ addBase: () => {
+ /**
+ * We don't need these base styles as they gonna be
+ * applied to the `:root` element by Tailwind automatically
+ */
+ },
+ addUtilities: (args: UtilityClasses) => {
+ utilities = { ...utilities, ...args }
+ },
+ })
+
+ return mapObject(utilities, (key, value) => [
+ key.startsWith('.') ? key.slice(1) : key,
+ value,
+ ])
+}
+
+/**
+ * TODO:
+ * Seek for some better way to find the plugin we need here
+ * from `config.plugins` array
+ */
+const gradientPlugin: TailwindPlugin = config.plugins
+ ? (config.plugins[2] as unknown as TailwindPlugin)
+ : { handler: () => void {} }
+
+export const utilityClasses = getUtilities(gradientPlugin)
+
+export const directions = ['top', 'bottom', 'right', 'left'] as const
+type Direction = (typeof directions)[number]
+
+export const effectTypes: { [type in EffectType]: null } = {
+ hover: null,
+ press: null,
+ disabled: null,
+}
+
+export const getUniqueGradientNames = (utilityClasses: string[]): string[] => {
+ return Array.from(
+ new Set(
+ utilityClasses
+ .map((className) => {
+ /**
+ * like `['bg', 'surface5', 'bottom', 'disabled']`
+ */
+ const classNameParts = className.split('-')
+
+ /**
+ * like `bottom`
+ */
+ const directionInClassName = directions.find((direction) =>
+ classNameParts.includes(direction)
+ )
+ if (!directionInClassName) return null
+
+ /**
+ * like `['bg', 'surface5']`
+ */
+ const classNameWithoutModifiers = classNameParts.slice(
+ 0,
+ classNameParts.indexOf(directionInClassName)
+ )
+
+ /**
+ * like `bg-surface5`
+ */
+ return classNameWithoutModifiers.join('-')
+ })
+ .filter((value): value is string => typeof value === 'string')
+ ).values()
+ )
+}
diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/colors.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/colors.page.tsx
new file mode 100644
index 000000000..8c5179e77
--- /dev/null
+++ b/docs/src/pages/@charcoal-ui/tailwind-config/colors.page.tsx
@@ -0,0 +1,18 @@
+import { NextPage } from 'next'
+import { Colors } from '../../../components/tailwind-config/colors/Colors'
+import { TextColors } from '../../../components/tailwind-config/colors/TextColors'
+import { Gradients } from '../../../components/tailwind-config/colors/Gradients'
+
+const ColorPage: NextPage = () => (
+
+
Colors
+
+
+ Text Colors
+
+
+ Gradients
+
+
+)
+export default ColorPage