From c39c701e71434d9ae4efdc177e64b68e96766571 Mon Sep 17 00:00:00 2001
From: mimo <mimo@pixiv.co.jp>
Date: Wed, 18 Dec 2024 14:50:19 +0900
Subject: [PATCH] feat(docs): add v4 release note

---
 .github/workflows/publish.yml                 |  1 +
 .../react/docs => .storybook/src}/v4.0.0.mdx  | 95 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 3 deletions(-)
 rename {packages/react/docs => .storybook/src}/v4.0.0.mdx (58%)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index d9e165e6a..6c42ed9de 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -14,6 +14,7 @@ on:
         options:
           - latest
           - beta
+          - rc
 
 jobs:
   build:
diff --git a/packages/react/docs/v4.0.0.mdx b/.storybook/src/v4.0.0.mdx
similarity index 58%
rename from packages/react/docs/v4.0.0.mdx
rename to .storybook/src/v4.0.0.mdx
index c1e475d82..2ae87a2ce 100644
--- a/packages/react/docs/v4.0.0.mdx
+++ b/.storybook/src/v4.0.0.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/addon-docs'
 import { Unstyled } from '@storybook/blocks'
 
-<Meta title="react/docs/v4.0.0" />
+<Meta title="v4.0.0" />
 
 # @charcoal-ui/react@v4.0.0
 
@@ -22,6 +22,23 @@ function App() {
 }
 ```
 
+※ styled 廃止した影響で classname の優先度が変わるケースがあります。
+
+```tsx
+import { Button } from '@charcoal-ui/react'
+import styled from 'styled-components'
+
+// 今ままでと違う見た目になる可能性がある
+const NewButton = styled(Button)`
+  color: red;
+`
+```
+
+```diff
+- import '@charcoal-ui/react/dist/index.css'
++ import '@charcoal-ui/react/dist/layered.css'
+```
+
 ## ComponentAbstraction
 
 - `ComponentAbstraction`が削除されました。
@@ -51,7 +68,7 @@ styled を継続して利用する場合
 // ...
 import { TokenInjector } from '@charcoal-ui/styled'
 import { ThemeProvider } from 'styled-components'
-<CharcoalProvider>
+;<CharcoalProvider>
   <TokenInjector theme={themeMap} />
   <ThemeProvider theme={themeMap[':root']}>
     <YourApp />
@@ -100,7 +117,6 @@ After
 
 ## MultiSelect
 
-- コンポーネントが削除されました。
 - `overlay`の代替として`Checkbox`の`rounded`が追加されました。
 
 ## RadioGroup
@@ -126,3 +142,76 @@ After
 
 - `input`要素の`props`を継承するように変更しました。
 - 文字数の計算ロジックを`getCount`プロパティで上書きできるように変更しました。
+
+## その他
+
+- `PixivIcon.extend` に渡す内容が sanitize されなくなります。必要な場合事前に sanitize するか、dompurify などを挟んでください [fix!(@charcoal-ui/icons): remove dompurify from v4. #643](https://github.com/pixiv/charcoal/pull/643)
+
+# Design Token 2.0 の実験的サポート
+
+## styled-components
+
+実装例: [feat: token v2 demo styled #655](https://github.com/pixiv/charcoal/pull/655)
+
+```ts
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import tokens from '@charcoal-ui/theme/unstable-tokens/css-variables.json'
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+```
+
+## tailwindcss
+
+実装例: [feat: allow design token v2 in tailwind config #650](https://github.com/pixiv/charcoal/pull/650)
+
+```diff
+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: ['**/*.tsx'],
+  presets: [
+    createTailwindConfig({
+      version: 'v3',
+      theme: {
+        ':root': light,
+        '[data-dark="true"]': dark,
+      },
++     unstableTokenV2: true,
+    }),
+  ],
+  corePlugins: {
+```
+
+```html
+<a
+  className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
+  aria-label="UserIcon"
+>
+  <Icon name="24/FaceEdit" />
+</a>
+```