Merge pull request #430 from pixiv/mimo/tailwind-config-documents-colors

tailwind-configにcolors docs追加

docs/src/components/NavList.tsx

@@ -99,6 +99,10 @@ const tailwindConfigList: ListItem[] = [
     text: 'カスタマイズする',
     href: '/@charcoal-ui/tailwind-config/customize',
   },
+  {
+    text: 'Colors',
+    href: '/@charcoal-ui/tailwind-config/colors',
+  },
   {
     text: 'Typography',
     href: '/@charcoal-ui/tailwind-config/typography',
@@ -215,6 +219,7 @@ export const NavList: FC<{ className?: string }> = (props) => {
       {iconsList.map(renderListItem)}
       <ListItemHeader>@charcoal-ui/tailwind-config</ListItemHeader>
       {tailwindConfigList.map(renderListItem)}
+      <ListItemHeader>Links</ListItemHeader>
       <ListItemHeader>@charcoal-ui/tailwind-diff</ListItemHeader>
       {tailwindDiffList.map(renderListItem)}
       <ListItemHeader>@charcoal-ui/foundation</ListItemHeader>

docs/src/components/tailwind-config/colors/Colors.tsx

@@ -0,0 +1,89 @@
+import { config } from '@charcoal-ui/tailwind-config'
+import { EffectType } from '@charcoal-ui/theme'
+
+const effectTypes: { [type in EffectType]: null } = {
+  hover: null,
+  press: null,
+  disabled: null,
+}
+
+const {
+  theme: { colors },
+} = config
+
+const ColorBox: React.FC<{
+  bgColorClass: string
+  label: string
+  emphasizeLabelByDefault?: boolean
+}> = ({ bgColorClass, label, emphasizeLabelByDefault = false }) => (
+  <div className="group grow basis-0 space-y-8">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <div className="relative h-64 w-full">
+      <div
+        /**
+         * Display checker pattern for visualizing colors with transparency
+         */
+        className="absolute top-0 right-0 h-full w-6/12"
+        aria-hidden="true"
+        style={{
+          backgroundImage:
+            'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)',
+          backgroundSize: '12px 12px',
+          backgroundPosition: '0 0, 6px 0, 6px -6px, 0 6px',
+        }}
+      ></div>
+      <button
+        type="button"
+        className={`absolute top-0 left-0 h-full w-full border border-r-0 group-last:border-r border-default cursor-pointer ${bgColorClass}`}
+        onClick={() => {
+          void navigator.clipboard.writeText(bgColorClass)
+        }}
+      >
+        <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+          Click to copy the class
+        </span>
+      </button>
+    </div>
+  </div>
+)
+
+export const Colors: React.FC = () => {
+  return (
+    <div className="space-y-24">
+      {Object.entries(colors!!).map(([colorName, values]) => (
+        <div className="flex" key={colorName}>
+          {typeof values === 'object' && 'DEFAULT' in values ? (
+            <>
+              <ColorBox
+                bgColorClass={`bg-${colorName}`}
+                label={colorName}
+                emphasizeLabelByDefault
+              />
+              {Object.keys(effectTypes).map((modifier) =>
+                modifier in values ? (
+                  <ColorBox
+                    key={modifier}
+                    bgColorClass={`bg-${colorName}-${modifier}`}
+                    label={`-${modifier}`}
+                  />
+                ) : null
+              )}
+            </>
+          ) : (
+            <ColorBox
+              bgColorClass={`bg-${colorName}`}
+              label={colorName}
+              emphasizeLabelByDefault
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

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 }) => (
+  <div className="group grow basis-0">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <button
+      type="button"
+      className={`${gradientClassName} h-64 w-full border-none cursor-pointer`}
+      onClick={() => {
+        void navigator.clipboard.writeText(gradientClassName)
+      }}
+    >
+      <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+        Click to copy the class
+      </span>
+    </button>
+  </div>
+)
+
+export const Gradients: React.FC = () => {
+  const utilityClassNames = Object.keys(utilityClasses)
+  const uniqueGradientNames = getUniqueGradientNames(utilityClassNames)
+
+  return (
+    <div className="space-y-64">
+      {uniqueGradientNames.map((gradientName) => (
+        <div className="space-y-24" key={gradientName}>
+          {directions.map((direction) => (
+            <div className="flex" key={direction}>
+              {utilityClassNames.includes(`${gradientName}-${direction}`) && (
+                <GradientBox
+                  gradientClassName={`${gradientName}-${direction}`}
+                  label={`${gradientName}-${direction}`}
+                  emphasizeLabelByDefault
+                />
+              )}
+              {Object.keys(effectTypes).map(
+                (effectType) =>
+                  utilityClassNames.includes(
+                    `${gradientName}-${direction}-${effectType}`
+                  ) && (
+                    <GradientBox
+                      gradientClassName={`${gradientName}-${direction}-${effectType}`}
+                      label={`-${effectType}`}
+                      key={effectType}
+                    />
+                  )
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

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 = () => (
+  <div className="space-y-24">
+    {Object.keys(colors!!).map((colorName) => (
+      <div key={colorName}>
+        <p className="typography-14 text-text2 mb-4">text-{colorName}</p>
+        <div className={`relative z-0`}>
+          <div
+            className="absolute top-0 right-0 h-full w-6/12 bg-surface8 z-[-1]"
+            aria-hidden="true"
+          ></div>
+          <p className={`typography-20 text-${colorName}`}>
+            charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+            フロントエンドの実装に用いる npm パッケージ集のことを言います。
+          </p>
+        </div>
+      </div>
+    ))}
+  </div>
+)

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<string, Record<string, unknown>>
+
+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()
+  )
+}

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 = () => (
+  <div className="w-full m-16 ">
+    <h2 className="typography-32 my-24">Colors</h2>
+    <Colors />
+
+    <h2 className="typography-32 mt-64 mb-24">Text Colors</h2>
+    <TextColors />
+
+    <h2 className="typography-32 mt-64 mb-24">Gradients</h2>
+    <Gradients />
+  </div>
+)
+export default ColorPage