Merge pull request #427 from pixiv/mimo/tailwind-config-typography

tailwind-configのTypography docs追加

docs/src/components/NavList.tsx

@@ -161,6 +161,20 @@ const themeList: ListItem[] = [
     href: '/@charcoal-ui/theme/colors',
   },
 ]
+const tailwindConfigList: ListItem[] = [
+  {
+    text: 'クイックスタート',
+    href: '/@charcoal-ui/tailwind-config/quickstart',
+  },
+  {
+    text: 'カスタマイズする',
+    href: '/@charcoal-ui/tailwind-config/customize',
+  },
+  {
+    text: 'Typography',
+    href: '/@charcoal-ui/tailwind-config/typography',
+  },
+]
 
 export const NavList: FC<{ className?: string }> = (props) => {
   const router = useRouter()

docs/src/components/tailwind-config/typography/HalfLeading.tsx

@@ -0,0 +1,27 @@
+import { sizeClasses } from './utils'
+
+export const HalfLeading: React.FC = () => (
+  <div className="p-40 bg-brand-disabled">
+    <div className="flex items-center space-x-16">
+      <p className="typography-14 text-text1 w-6/12 text-right">
+        without half leading (default)
+      </p>
+      <p className="typography-14 text-text1 w-6/12">preserve-half-leading</p>
+    </div>
+    {Object.entries(sizeClasses).map(([sizeClassName]) => (
+      <div
+        key={sizeClassName}
+        className="flex items-center justify-center space-x-16"
+      >
+        <p className={`${sizeClassName} bg-background1 text-text1`}>
+          Abcあいう123
+        </p>
+        <p
+          className={`${sizeClassName} bg-background1 text-text1 preserve-half-leading`}
+        >
+          Abcあいう123
+        </p>
+      </div>
+    ))}
+  </div>
+)

docs/src/components/tailwind-config/typography/Sizes.tsx

@@ -0,0 +1,21 @@
+import { sizeClasses } from './utils'
+
+export const Sizes: React.FC = () => (
+  <div className="space-y-64">
+    {Object.entries(sizeClasses).map(([className, value]) => (
+      <div key={className}>
+        <p className="typography-14 text-text2">{className}</p>
+        <p className={`${className} text-text1`}>
+          charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+          フロントエンドの実装に用いる npm パッケージ集のことを言います。 Lorem
+          ipsum dolor sit amet, consectetur adipiscing elit.
+        </p>
+        <p className="typography-12 text-text3">
+          font-size: <span className="text-text2">{value['font-size']}</span> /{' '}
+          line-height:{' '}
+          <span className="text-text2">{value['line-height']}</span>
+        </p>
+      </div>
+    ))}
+  </div>
+)

docs/src/components/tailwind-config/typography/utils.ts

@@ -0,0 +1,55 @@
+import { config } from '@charcoal-ui/tailwind-config'
+import { mapObject } from '@charcoal-ui/utils'
+
+type TailwindPlugin = {
+  handler: ({
+    addBase,
+    addUtilities,
+  }: {
+    addBase: unknown
+    addUtilities: unknown
+  }) => void
+}
+type UtilityClasses = Record<string, Record<string, unknown>>
+
+/**
+ * TODO:
+ * Seek for some better way to find the plugin we need here
+ * from `config.plugins` array
+ */
+const typographyPlugin: TailwindPlugin = config.plugins
+  ? (config.plugins[0] as unknown as TailwindPlugin)
+  : { handler: () => void {} }
+
+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,
+  ])
+}
+
+export const utilityClasses = getUtilities(typographyPlugin)
+
+type SizeClassValue = Readonly<{
+  'font-size': string
+  'line-height': string
+}>
+export const sizeClasses: Record<string, SizeClassValue> = Object.fromEntries(
+  Object.entries(utilityClasses).filter(
+    ([className]) => className !== 'preserve-half-leading'
+  )
+) as Record<string, SizeClassValue>

docs/src/pages/@charcoal-ui/tailwind-config/typography.page.tsx

@@ -0,0 +1,14 @@
+import { NextPage } from 'next'
+import { Sizes } from '../../../components/tailwind-config/typography/Sizes'
+import { HalfLeading } from '../../../components/tailwind-config/typography/HalfLeading'
+
+const TypographyPage: NextPage = () => (
+  <div className="w-full m-16">
+    <h2 className="typography-32 my-24">Sizes</h2>
+    <Sizes />
+
+    <h2 className="typography-32 my-24">Half leading cancellation</h2>
+    <HalfLeading />
+  </div>
+)
+export default TypographyPage