Merge pull request #674 from pixiv/feat/mark-tokens-unstable

feat: mark tokens unstable
pixiv · Dec 16, 2024 · 7534b89 · 7534b89
2 parents 5fa6444 + 5a62c71
commit 7534b89
Show file tree

Hide file tree

Showing 26 changed files with 33 additions and 30 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -15,5 +15,5 @@ LICENSE
 /packages/token-cli/build/
 /packages/token-cli/tokens/
 /packages/token-cli/out/
-/packages/theme/src/css/
+/packages/theme/src/unstable-css/
 /packages/react/docs/v4.0.0.mdx
diff --git a/.storybook/theme-decorator.tsx b/.storybook/theme-decorator.tsx
@@ -4,8 +4,8 @@ import { useDarkMode } from 'storybook-dark-mode'
 import { light, dark } from '@charcoal-ui/theme'
 import { TokenInjector, themeSelector, themeSetter } from '@charcoal-ui/styled'
 
-import '../packages/theme/src/css/_variables_dark.css'
-import '../packages/theme/src/css/_variables_light.css'
+import '../packages/theme/src/unstable-css/_variables_dark.css'
+import '../packages/theme/src/unstable-css/_variables_light.css'
 import '../packages/react/dist/index.css'
 
 const setter = themeSetter()

diff --git a/packages/react/docs/TokenV2DemoStyled.tsx b/packages/react/docs/TokenV2DemoStyled.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import styled from 'styled-components'
 // This does not work :(
 // import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
-import tokens from '../../theme/dist/tokens/camel/css-variables.json'
+import tokens from '../../theme/dist/unstable-tokens/camel/css-variables.json'
 import { Button, Icon } from '@charcoal-ui/react'
 
 const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']

diff --git a/packages/tailwind-config/src/tokenV2.ts b/packages/tailwind-config/src/tokenV2.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import light from '@charcoal-ui/theme/tokens/css-variables.json'
+import light from '@charcoal-ui/theme/unstable-tokens/css-variables.json'
 import {
   TailwindConfig,
   TailwindThemeFontSizes,

diff --git a/packages/theme/cli/token-object.ts b/packages/theme/cli/token-object.ts
@@ -1,9 +1,12 @@
 /* eslint-disable no-console */
 import { readFileSync, mkdirSync, writeFileSync } from 'node:fs'
 import path from 'node:path'
-import { createCSSTokenObject, createTokenObject } from '../src/token-object'
-import type { TokenDictionary } from '../src/token-object/types'
-import { camelCaseKeys } from '../src/token-object'
+import {
+  createCSSTokenObject,
+  createTokenObject,
+} from '../src/unstable-token-object'
+import type { TokenDictionary } from '../src/unstable-token-object/types'
+import { camelCaseKeys } from '../src/unstable-token-object'
 
 type ValueStyle = 'cssVariable'
 type KeyStyle = 'camelCase'
@@ -20,45 +23,45 @@ const configurations: Config[] = [
   {
     tokenFile: './src/json/pixiv-light.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/pixiv-light.json',
+    outputFile: './dist/unstable-tokens/pixiv-light.json',
     keyStyle: undefined,
     valueStyle: undefined,
   },
   {
     tokenFile: './src/json/pixiv-dark.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/pixiv-dark.json',
+    outputFile: './dist/unstable-tokens/pixiv-dark.json',
     keyStyle: undefined,
     valueStyle: undefined,
   },
 
   {
     tokenFile: './src/json/pixiv-light.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/camel/pixiv-light.json',
+    outputFile: './dist/unstable-tokens/camel/pixiv-light.json',
     keyStyle: 'camelCase',
     valueStyle: undefined,
   },
   {
     tokenFile: './src/json/pixiv-dark.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/camel/pixiv-dark.json',
+    outputFile: './dist/unstable-tokens/camel/pixiv-dark.json',
     keyStyle: 'camelCase',
     valueStyle: undefined,
   },
 
   {
     tokenFile: './src/json/pixiv-light.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/css-variables.json',
+    outputFile: './dist/unstable-tokens/css-variables.json',
     keyStyle: undefined,
     valueStyle: 'cssVariable',
   },
 
   {
     tokenFile: './src/json/pixiv-light.json',
     baseFile: './src/json/base.json',
-    outputFile: './dist/tokens/camel/css-variables.json',
+    outputFile: './dist/unstable-tokens/camel/css-variables.json',
     keyStyle: 'camelCase',
     valueStyle: 'cssVariable',
   },

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -12,25 +12,25 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
-    "./token-object": {
-      "types": "./dist/token-object/index.d.ts",
-      "require": "./dist/token-object/index.cjs.js",
-      "import": "./dist/token-object/index.esm.js",
-      "default": "./dist/token-object/index.esm.js"
+    "./unstable-token-object": {
+      "types": "./dist/unstable-token-object/index.d.ts",
+      "require": "./dist/unstable-token-object/index.cjs.js",
+      "import": "./dist/unstable-token-object/index.esm.js",
+      "default": "./dist/unstable-token-object/index.esm.js"
     },
-    "./css/*": "./dist/css/*",
-    "./tokens/*": "./dist/tokens/*"
+    "./unstable-css/*": "./dist/unstable-css/*",
+    "./unstable-tokens/*": "./dist/unstable-tokens/*"
   },
   "typesVersions": {
     "*": {
-      "token-object": [
+      "unstable-token-object": [
         "./dist/token-object/index.d.ts"
       ],
-      "tokens/*": [
-        "./dist/tokens/*"
+      "unstable-tokens/*": [
+        "./dist/unstable-tokens/*"
       ],
-      "css/*": [
-        "./dist/css/*"
+      "unstable-css/*": [
+        "./dist/unstable-css/*"
       ]
     }
   },
@@ -41,7 +41,7 @@
     "build": "npm-run-all --print-label -s 'build:*' --sequential serialize",
     "build:bundle": "FORCE_COLOR=1 tsup",
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
-    "build:copy-css": "cpx --clean 'src/css/**/*.{css,d.ts}' dist/css",
+    "build:copy-css": "cpx --clean 'src/unstable-css/**/*.{css,d.ts}' dist/unstable-css",
     "build:token-object": "tsx cli/token-object.ts",
     "serialize": "node cli/index.js",
     "typecheck": "run-p --print-label 'typecheck:*'",

diff --git a/packages/theme/src/css/_variables_dark.css → ...heme/src/unstable-css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css → ...heme/src/unstable-css/_variables_dark.css
diff --git a/...es/theme/src/css/_variables_dark.css.d.ts → ...src/unstable-css/_variables_dark.css.d.ts b/...es/theme/src/css/_variables_dark.css.d.ts → ...src/unstable-css/_variables_dark.css.d.ts
diff --git a/packages/theme/src/css/_variables_light.css → ...eme/src/unstable-css/_variables_light.css b/packages/theme/src/css/_variables_light.css → ...eme/src/unstable-css/_variables_light.css
diff --git a/...s/theme/src/css/_variables_light.css.d.ts → ...rc/unstable-css/_variables_light.css.d.ts b/...s/theme/src/css/_variables_light.css.d.ts → ...rc/unstable-css/_variables_light.css.d.ts
diff --git a/...t/__snapshots__/token-object.test.ts.snap → ...t/__snapshots__/token-object.test.ts.snap b/...t/__snapshots__/token-object.test.ts.snap → ...t/__snapshots__/token-object.test.ts.snap
diff --git a/..._snapshots__/changecase-keys.test.ts.snap → ..._snapshots__/changecase-keys.test.ts.snap b/..._snapshots__/changecase-keys.test.ts.snap → ..._snapshots__/changecase-keys.test.ts.snap
diff --git a/...-object/helpers/changecase-keys.test-d.ts → ...-object/helpers/changecase-keys.test-d.ts b/...-object/helpers/changecase-keys.test-d.ts → ...-object/helpers/changecase-keys.test-d.ts
diff --git a/...en-object/helpers/changecase-keys.test.ts → ...en-object/helpers/changecase-keys.test.ts b/...en-object/helpers/changecase-keys.test.ts → ...en-object/helpers/changecase-keys.test.ts
diff --git a/...c/token-object/helpers/changecase-keys.ts → ...e-token-object/helpers/changecase-keys.ts b/...c/token-object/helpers/changecase-keys.ts → ...e-token-object/helpers/changecase-keys.ts
diff --git a/...rc/token-object/helpers/is-empty-array.ts → ...le-token-object/helpers/is-empty-array.ts b/...rc/token-object/helpers/is-empty-array.ts → ...le-token-object/helpers/is-empty-array.ts
diff --git a/.../token-object/helpers/nest-object.test.ts → ...-token-object/helpers/nest-object.test.ts b/.../token-object/helpers/nest-object.test.ts → ...-token-object/helpers/nest-object.test.ts
diff --git a/...e/src/token-object/helpers/nest-object.ts → ...table-token-object/helpers/nest-object.ts b/...e/src/token-object/helpers/nest-object.ts → ...table-token-object/helpers/nest-object.ts
diff --git a/packages/theme/src/token-object/index.ts → .../theme/src/unstable-token-object/index.ts b/packages/theme/src/token-object/index.ts → .../theme/src/unstable-token-object/index.ts
diff --git a/.../src/token-object/reference-token.test.ts → ...able-token-object/reference-token.test.ts b/.../src/token-object/reference-token.test.ts → ...able-token-object/reference-token.test.ts
diff --git a/...theme/src/token-object/reference-token.ts → .../unstable-token-object/reference-token.ts b/...theme/src/token-object/reference-token.ts → .../unstable-token-object/reference-token.ts
diff --git a/...theme/src/token-object/to-token-object.ts → .../unstable-token-object/to-token-object.ts b/...theme/src/token-object/to-token-object.ts → .../unstable-token-object/to-token-object.ts
diff --git a/...me/src/token-object/token-object.bench.ts → ...stable-token-object/token-object.bench.ts b/...me/src/token-object/token-object.bench.ts → ...stable-token-object/token-object.bench.ts
diff --git a/...eme/src/token-object/token-object.test.ts → ...nstable-token-object/token-object.test.ts b/...eme/src/token-object/token-object.test.ts → ...nstable-token-object/token-object.test.ts
@@ -53,8 +53,8 @@ describe.each([
 })
 
 describe.each([
-  ['light theme', lightToken, '../css/_variables_light.css'],
-  ['dark theme', darkToken, '../css/_variables_dark.css'],
+  ['light theme', lightToken, '../unstable-css/_variables_light.css'],
+  ['dark theme', darkToken, '../unstable-css/_variables_dark.css'],
 ] as const)(
   'createCSSTokenObject test: %s',
   async (description, token, cssFilePath) => {

diff --git a/packages/theme/src/token-object/types.ts → .../theme/src/unstable-token-object/types.ts b/packages/theme/src/token-object/types.ts → .../theme/src/unstable-token-object/types.ts
diff --git a/packages/theme/tsup.config.ts b/packages/theme/tsup.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'tsup'
 export default defineConfig({
   entry: {
     index: 'src/index.ts',
-    'token-object/index': 'src/token-object/index.ts',
+    'unstable-token-object/index': 'src/unstable-token-object/index.ts',
   },
   format: ['esm', 'cjs'],
   outExtension({ format }) {