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/.prettierignore b/.prettierignore
index c6462a6fe..3a5f305b9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -16,4 +16,4 @@ LICENSE
/packages/token-cli/tokens/
/packages/token-cli/out/
/packages/theme/src/unstable-css/
-/packages/react/docs/v4.0.0.mdx
+.storybook/src/v4.0.0.mdx
diff --git a/packages/react/docs/v4.0.0.mdx b/.storybook/src/v4.0.0.mdx
similarity index 57%
rename from packages/react/docs/v4.0.0.mdx
rename to .storybook/src/v4.0.0.mdx
index c1e475d82..4bd27ad2f 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'
-
+
# @charcoal-ui/react@v4.0.0
@@ -22,6 +22,25 @@ function App() {
}
```
+※ styled 廃止した影響で classname の優先度が変わるケースがあります。
+
+```tsx
+import { Button } from '@charcoal-ui/react'
+import styled from 'styled-components'
+
+// 今ままでと違う見た目になる可能性がある
+const NewButton = styled(Button)`
+ color: red;
+`
+```
+
+この場合 @layer 版の利用をおすすめしますが、サポート対象が iOS 15.4+ になります。
+
+```diff
+- import '@charcoal-ui/react/dist/index.css'
++ import '@charcoal-ui/react/dist/layered.css'
+```
+
## ComponentAbstraction
- `ComponentAbstraction`が削除されました。
@@ -100,7 +119,6 @@ After
## MultiSelect
-- コンポーネントが削除されました。
- `overlay`の代替として`Checkbox`の`rounded`が追加されました。
## RadioGroup
@@ -126,3 +144,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
+
+
+
+```
diff --git a/lerna.json b/lerna.json
index 9b6d81910..ec8e87a2b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -86,5 +86,5 @@
"packages": [
"packages/*"
],
- "version": "4.0.0-beta.17"
+ "version": "4.0.0-rc.0"
}
diff --git a/packages/esbuild-plugin-styled-components/package.json b/packages/esbuild-plugin-styled-components/package.json
index 5fda3891b..f13f11ad8 100644
--- a/packages/esbuild-plugin-styled-components/package.json
+++ b/packages/esbuild-plugin-styled-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/esbuild-plugin-styled-components",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"private": true,
"license": "Apache-2.0",
"main": "src/index.ts",
diff --git a/packages/foundation/package.json b/packages/foundation/package.json
index b903a987c..5c354bdef 100644
--- a/packages/foundation/package.json
+++ b/packages/foundation/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/foundation",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
diff --git a/packages/icon-files/package.json b/packages/icon-files/package.json
index 73f936833..2e7ac2566 100644
--- a/packages/icon-files/package.json
+++ b/packages/icon-files/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/icon-files",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"type": "module",
"main": "./src/index.cjs",
diff --git a/packages/icons-cli/package.json b/packages/icons-cli/package.json
index 27f463870..a08afcc1a 100644
--- a/packages/icons-cli/package.json
+++ b/packages/icons-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/icons-cli",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"bin": "./dist/index.js",
"scripts": {
diff --git a/packages/icons/package.json b/packages/icons/package.json
index a5dc3a82e..66f8cc009 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/icons",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -36,7 +36,7 @@
"vitest": "^2.0.1"
},
"dependencies": {
- "@charcoal-ui/icon-files": "^4.0.0-beta.17",
+ "@charcoal-ui/icon-files": "^4.0.0-rc.0",
"warning": "^4.0.3"
},
"files": [
diff --git a/packages/react-sandbox/package.json b/packages/react-sandbox/package.json
index 80dab0f1a..2fbb2d98c 100644
--- a/packages/react-sandbox/package.json
+++ b/packages/react-sandbox/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/react-sandbox",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -21,7 +21,7 @@
"test": "vitest run --passWithNoTests"
},
"devDependencies": {
- "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.17",
+ "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0",
"@storybook/addon-actions": "^7.4.1",
"@storybook/addon-knobs": "^7.0.2",
"@storybook/addons": "^7.4.1",
@@ -54,11 +54,11 @@
"vitest": "^2.0.2"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
- "@charcoal-ui/react": "^4.0.0-beta.17",
- "@charcoal-ui/styled": "^4.0.0-beta.17",
- "@charcoal-ui/theme": "^4.0.0-beta.17",
- "@charcoal-ui/utils": "^4.0.0-beta.17",
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
+ "@charcoal-ui/react": "^4.0.0-rc.0",
+ "@charcoal-ui/styled": "^4.0.0-rc.0",
+ "@charcoal-ui/theme": "^4.0.0-rc.0",
+ "@charcoal-ui/utils": "^4.0.0-rc.0",
"polished": "^4.1.4",
"react-spring": "^9.0.0",
"warning": "^4.0.3"
diff --git a/packages/react/package.json b/packages/react/package.json
index 09226b454..669e2c021 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/react",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -33,7 +33,7 @@
"test": "vitest run --passWithNoTests"
},
"devDependencies": {
- "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.17",
+ "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-rc.0",
"@react-types/switch": "^3.1.2",
"@storybook/addon-actions": "^8.0.5",
"@storybook/react": "^8.0.5",
@@ -62,10 +62,10 @@
"vitest": "^2.0.1"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
- "@charcoal-ui/icons": "^4.0.0-beta.17",
- "@charcoal-ui/theme": "^4.0.0-beta.17",
- "@charcoal-ui/utils": "^4.0.0-beta.17",
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
+ "@charcoal-ui/icons": "^4.0.0-rc.0",
+ "@charcoal-ui/theme": "^4.0.0-rc.0",
+ "@charcoal-ui/utils": "^4.0.0-rc.0",
"@react-aria/button": "^3.9.1",
"@react-aria/checkbox": "^3.13.0",
"@react-aria/dialog": "^3.5.10",
diff --git a/packages/styled/package.json b/packages/styled/package.json
index 657b6e9be..99b721fd4 100644
--- a/packages/styled/package.json
+++ b/packages/styled/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/styled",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"types": "./dist/index.d.ts",
"main": "./dist/index.cjs.js",
@@ -38,9 +38,9 @@
"vitest": "^2.0.2"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
- "@charcoal-ui/theme": "^4.0.0-beta.17",
- "@charcoal-ui/utils": "^4.0.0-beta.17",
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
+ "@charcoal-ui/theme": "^4.0.0-rc.0",
+ "@charcoal-ui/utils": "^4.0.0-rc.0",
"warning": "^4.0.3"
},
"peerDependencies": {
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 2666067ce..cb39d0f87 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/tailwind-config",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -32,9 +32,9 @@
"vitest": "^2.0.2"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
- "@charcoal-ui/theme": "^4.0.0-beta.17",
- "@charcoal-ui/utils": "^4.0.0-beta.17"
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
+ "@charcoal-ui/theme": "^4.0.0-rc.0",
+ "@charcoal-ui/utils": "^4.0.0-rc.0"
},
"peerDependencies": {
"csstype": ">=3.0.0",
diff --git a/packages/tailwind-diff/package.json b/packages/tailwind-diff/package.json
index fd338e6bf..8b12b210c 100644
--- a/packages/tailwind-diff/package.json
+++ b/packages/tailwind-diff/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/tailwind-diff",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"bin": "bin/tailwind-diff.js",
"scripts": {
"build": "tsc",
diff --git a/packages/theme/package.json b/packages/theme/package.json
index e00c93a8f..8f16a4bf3 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/theme",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -63,8 +63,8 @@
"vitest": "^2.0.2"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
- "@charcoal-ui/utils": "^4.0.0-beta.17",
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
+ "@charcoal-ui/utils": "^4.0.0-rc.0",
"change-case-all": "^2.1.0",
"deepmerge": "^4.3.1",
"polished": "^4.1.4"
diff --git a/packages/token-cli/package.json b/packages/token-cli/package.json
index 3d399b803..7eb53a2ad 100644
--- a/packages/token-cli/package.json
+++ b/packages/token-cli/package.json
@@ -3,7 +3,7 @@
"private": true,
"bin": "./dist/index.js",
"type": "commonjs",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"scripts": {
"build": "FORCE_COLOR=1 tsup-node",
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 442bd89f6..6a057a2c4 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@charcoal-ui/utils",
- "version": "4.0.0-beta.17",
+ "version": "4.0.0-rc.0",
"license": "Apache-2.0",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
@@ -26,7 +26,7 @@
"vitest": "^2.0.2"
},
"dependencies": {
- "@charcoal-ui/foundation": "^4.0.0-beta.17",
+ "@charcoal-ui/foundation": "^4.0.0-rc.0",
"polished": "^4.1.4"
},
"files": [
diff --git a/yarn.lock b/yarn.lock
index db0f7b3f3..99470bc37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1940,7 +1940,7 @@ __metadata:
languageName: node
linkType: hard
-"@charcoal-ui/esbuild-plugin-styled-components@^4.0.0-beta.17, @charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components":
+"@charcoal-ui/esbuild-plugin-styled-components@^4.0.0-rc.0, @charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components":
version: 0.0.0-use.local
resolution: "@charcoal-ui/esbuild-plugin-styled-components@workspace:packages/esbuild-plugin-styled-components"
dependencies:
@@ -1952,7 +1952,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/foundation@^4.0.0-beta.17, @charcoal-ui/foundation@workspace:packages/foundation":
+"@charcoal-ui/foundation@^4.0.0-rc.0, @charcoal-ui/foundation@workspace:packages/foundation":
version: 0.0.0-use.local
resolution: "@charcoal-ui/foundation@workspace:packages/foundation"
dependencies:
@@ -1964,7 +1964,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/icon-files@^4.0.0-beta.17, @charcoal-ui/icon-files@workspace:packages/icon-files":
+"@charcoal-ui/icon-files@^4.0.0-rc.0, @charcoal-ui/icon-files@workspace:packages/icon-files":
version: 0.0.0-use.local
resolution: "@charcoal-ui/icon-files@workspace:packages/icon-files"
languageName: unknown
@@ -2001,11 +2001,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/icons@^4.0.0-beta.17, @charcoal-ui/icons@workspace:packages/icons":
+"@charcoal-ui/icons@^4.0.0-rc.0, @charcoal-ui/icons@workspace:packages/icons":
version: 0.0.0-use.local
resolution: "@charcoal-ui/icons@workspace:packages/icons"
dependencies:
- "@charcoal-ui/icon-files": ^4.0.0-beta.17
+ "@charcoal-ui/icon-files": ^4.0.0-rc.0
"@storybook/react": ^8.0.5
"@types/jest": ^27.4.0
"@types/react": ^17.0.38
@@ -2046,12 +2046,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@charcoal-ui/react-sandbox@workspace:packages/react-sandbox"
dependencies:
- "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-beta.17
- "@charcoal-ui/foundation": ^4.0.0-beta.17
- "@charcoal-ui/react": ^4.0.0-beta.17
- "@charcoal-ui/styled": ^4.0.0-beta.17
- "@charcoal-ui/theme": ^4.0.0-beta.17
- "@charcoal-ui/utils": ^4.0.0-beta.17
+ "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-rc.0
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
+ "@charcoal-ui/react": ^4.0.0-rc.0
+ "@charcoal-ui/styled": ^4.0.0-rc.0
+ "@charcoal-ui/theme": ^4.0.0-rc.0
+ "@charcoal-ui/utils": ^4.0.0-rc.0
"@storybook/addon-actions": ^7.4.1
"@storybook/addon-knobs": ^7.0.2
"@storybook/addons": ^7.4.1
@@ -2092,15 +2092,15 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/react@^4.0.0-beta.17, @charcoal-ui/react@workspace:packages/react":
+"@charcoal-ui/react@^4.0.0-rc.0, @charcoal-ui/react@workspace:packages/react":
version: 0.0.0-use.local
resolution: "@charcoal-ui/react@workspace:packages/react"
dependencies:
- "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-beta.17
- "@charcoal-ui/foundation": ^4.0.0-beta.17
- "@charcoal-ui/icons": ^4.0.0-beta.17
- "@charcoal-ui/theme": ^4.0.0-beta.17
- "@charcoal-ui/utils": ^4.0.0-beta.17
+ "@charcoal-ui/esbuild-plugin-styled-components": ^4.0.0-rc.0
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
+ "@charcoal-ui/icons": ^4.0.0-rc.0
+ "@charcoal-ui/theme": ^4.0.0-rc.0
+ "@charcoal-ui/utils": ^4.0.0-rc.0
"@react-aria/button": ^3.9.1
"@react-aria/checkbox": ^3.13.0
"@react-aria/dialog": ^3.5.10
@@ -2148,13 +2148,13 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/styled@^4.0.0-beta.17, @charcoal-ui/styled@workspace:packages/styled":
+"@charcoal-ui/styled@^4.0.0-rc.0, @charcoal-ui/styled@workspace:packages/styled":
version: 0.0.0-use.local
resolution: "@charcoal-ui/styled@workspace:packages/styled"
dependencies:
- "@charcoal-ui/foundation": ^4.0.0-beta.17
- "@charcoal-ui/theme": ^4.0.0-beta.17
- "@charcoal-ui/utils": ^4.0.0-beta.17
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
+ "@charcoal-ui/theme": ^4.0.0-rc.0
+ "@charcoal-ui/utils": ^4.0.0-rc.0
"@types/react": ^17.0.38
"@types/react-test-renderer": ^17.0.2
"@types/styled-components": ^5.1.21
@@ -2181,9 +2181,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@charcoal-ui/tailwind-config@workspace:packages/tailwind-config"
dependencies:
- "@charcoal-ui/foundation": ^4.0.0-beta.17
- "@charcoal-ui/theme": ^4.0.0-beta.17
- "@charcoal-ui/utils": ^4.0.0-beta.17
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
+ "@charcoal-ui/theme": ^4.0.0-rc.0
+ "@charcoal-ui/utils": ^4.0.0-rc.0
jsdom: ^24.1.0
postcss: ^8.4.5
postcss-selector-parser: ^6.0.9
@@ -2216,12 +2216,12 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/theme@^4.0.0-beta.17, @charcoal-ui/theme@workspace:packages/theme":
+"@charcoal-ui/theme@^4.0.0-rc.0, @charcoal-ui/theme@workspace:packages/theme":
version: 0.0.0-use.local
resolution: "@charcoal-ui/theme@workspace:packages/theme"
dependencies:
- "@charcoal-ui/foundation": ^4.0.0-beta.17
- "@charcoal-ui/utils": ^4.0.0-beta.17
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
+ "@charcoal-ui/utils": ^4.0.0-rc.0
"@types/css": ^0.0.38
change-case-all: ^2.1.0
cpx: ^1.5.0
@@ -2256,11 +2256,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@charcoal-ui/utils@^4.0.0-beta.17, @charcoal-ui/utils@workspace:packages/utils":
+"@charcoal-ui/utils@^4.0.0-rc.0, @charcoal-ui/utils@workspace:packages/utils":
version: 0.0.0-use.local
resolution: "@charcoal-ui/utils@workspace:packages/utils"
dependencies:
- "@charcoal-ui/foundation": ^4.0.0-beta.17
+ "@charcoal-ui/foundation": ^4.0.0-rc.0
npm-run-all: ^4.1.5
polished: ^4.1.4
rimraf: ^3.0.2