Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: allow design token v2 in tailwind config #650

Merged
merged 9 commits into from
Dec 16, 2024
Merged

feat: allow design token v2 in tailwind config #650

merged 9 commits into from
Dec 16, 2024

Conversation

yue4u
Copy link
Contributor

@yue4u yue4u commented Oct 31, 2024 •
edited
Loading

やったこと

  • feat(@charcoal-ui/tailwind-config): allow design token v2 in tailwind config

動作確認環境

チェックリスト

不要なチェック項目は消して構いません

  • 破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
  • 追加したコンポーネントが index.ts から再 export されている
  • README やドキュメントに影響があることを確認した

@yue4u yue4u marked this pull request as draft October 31, 2024 07:25
@yue4u yue4u added the major label Oct 31, 2024
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from 750b304 to 9a61729 Compare November 22, 2024 05:05
@yue4u yue4u temporarily deployed to preview-channel November 22, 2024 05:05 — with GitHub Actions Inactive
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from 9a61729 to 9dd7852 Compare November 22, 2024 05:06
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 22, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 8ba0447):

https://pixiv-charcoal-web--pr650-feat-allow-design-to-8acot016.web.app

(expires Mon, 23 Dec 2024 01:18:40 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 22, 2024 •
edited
Loading

Size Change: +5.88 kB (+1.09%)

Total Size: 546 kB

Filename Size Change
./packages/tailwind-config/dist/index.cjs.js 14.2 kB +2.8 kB (+24.44%) 🚨
./packages/tailwind-config/dist/index.d.ts 530 B +152 B (+40.21%) 🚨
./packages/tailwind-config/dist/index.esm.js 12.1 kB +2.49 kB (+26.06%) 🚨
./packages/tailwind-config/dist/util.d.ts 865 B +204 B (+30.86%) 🚨
./packages/tailwind-config/dist/tokenV2.d.ts 179 B +179 B (new file) 🆕
./packages/tailwind-config/dist/tokenV2.test.d.ts 53 B +53 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
./packages/foundation/dist/border-radius.d.ts 692 B
./packages/foundation/dist/breakpoint.d.ts 225 B
./packages/foundation/dist/color.d.ts 171 B
./packages/foundation/dist/effect.d.ts 1.08 kB
./packages/foundation/dist/grid.d.ts 396 B
./packages/foundation/dist/index.cjs.js 2.82 kB
./packages/foundation/dist/index.d.ts 230 B
./packages/foundation/dist/index.esm.js 1.44 kB
./packages/foundation/dist/spacing.d.ts 305 B
./packages/foundation/dist/typography.d.ts 790 B
./packages/icons-cli/dist/index.js 20.3 kB
./packages/icons/dist/charcoalIconFiles.d.ts 4.74 kB
./packages/icons/dist/index.cjs.js 9.38 kB
./packages/icons/dist/index.d.ts 478 B
./packages/icons/dist/index.esm.js 7.93 kB
./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts 7.49 kB
./packages/icons/dist/loaders/CustomIconLoader.d.ts 417 B
./packages/icons/dist/loaders/index.d.ts 181 B
./packages/icons/dist/loaders/Loadable.d.ts 98 B
./packages/icons/dist/loaders/PixivIconLoadError.d.ts 153 B
./packages/icons/dist/PixivIcon.d.ts 1.55 kB
./packages/icons/dist/PixivIcon.story.d.ts 428 B
./packages/icons/dist/PixivIcon.test.d.ts 55 B
./packages/icons/dist/ssr.d.ts 75 B
./packages/pullrequest-cli/dist/index.js 6.9 kB
./packages/react-sandbox/dist/_lib/compat.d.ts 427 B
./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts 933 B
./packages/react-sandbox/dist/components/Carousel/index.d.ts 1.35 kB
./packages/react-sandbox/dist/components/CarouselButton/index.d.ts 619 B
./packages/react-sandbox/dist/components/Filter/index.d.ts 1.12 kB
./packages/react-sandbox/dist/components/HintText/index.d.ts 298 B
./packages/react-sandbox/dist/components/icons/Base.d.ts 706 B
./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts 282 B
./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts 87 B
./packages/react-sandbox/dist/components/icons/NextIcon.d.ts 281 B
./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts 462 B
./packages/react-sandbox/dist/components/Layout/index.d.ts 2.07 kB
./packages/react-sandbox/dist/components/LeftMenu/index.d.ts 382 B
./packages/react-sandbox/dist/components/MenuListItem/index.d.ts 1.8 kB
./packages/react-sandbox/dist/components/Pager/index.d.ts 529 B
./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts 340 B
./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts 235 B
./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts 381 B
./packages/react-sandbox/dist/components/WithIcon/index.d.ts 1.07 kB
./packages/react-sandbox/dist/foundation/constants.d.ts 208 B
./packages/react-sandbox/dist/foundation/hooks.d.ts 1.04 kB
./packages/react-sandbox/dist/foundation/support.d.ts 131 B
./packages/react-sandbox/dist/foundation/utils.d.ts 613 B
./packages/react-sandbox/dist/hooks/index.d.ts 148 B
./packages/react-sandbox/dist/index.cjs.js 63.4 kB
./packages/react-sandbox/dist/index.d.ts 1.38 kB
./packages/react-sandbox/dist/index.esm.js 53.6 kB
./packages/react-sandbox/dist/misc/storybook-helper.d.ts 343 B
./packages/react-sandbox/dist/styled.d.ts 12.3 kB
./packages/react/dist/_lib/compat.d.ts 1.19 kB
./packages/react/dist/_lib/createDivComponent.d.ts 565 B
./packages/react/dist/_lib/index.d.ts 1.02 kB
./packages/react/dist/_lib/useClassNames.d.ts 192 B
./packages/react/dist/_lib/useForwardedRef.d.ts 169 B
./packages/react/dist/components/Button/index.d.ts 692 B
./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts 628 B
./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts 307 B
./packages/react/dist/components/Checkbox/index.d.ts 668 B
./packages/react/dist/components/Clickable/index.d.ts 516 B
./packages/react/dist/components/DropdownSelector/Divider/index.d.ts 105 B
./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts 313 B
./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts 486 B
./packages/react/dist/components/DropdownSelector/index.d.ts 703 B
./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts 490 B
./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts 771 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts 373 B
./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts 480 B
./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts 414 B
./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts 540 B
./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts 412 B
./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts 405 B
./packages/react/dist/components/DropdownSelector/Popover/index.d.ts 630 B
./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts 140 B
./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts 411 B
./packages/react/dist/components/FieldLabel/index.d.ts 492 B
./packages/react/dist/components/Icon/index.d.ts 498 B
./packages/react/dist/components/IconButton/index.d.ts 630 B
./packages/react/dist/components/LoadingSpinner/index.d.ts 678 B
./packages/react/dist/components/Modal/Dialog/index.d.ts 418 B
./packages/react/dist/components/Modal/index.d.ts 2.09 kB
./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts 231 B
./packages/react/dist/components/Modal/ModalPlumbing.d.ts 1.57 kB
./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts 689 B
./packages/react/dist/components/Radio/index.d.ts 494 B
./packages/react/dist/components/Radio/RadioGroup/index.d.ts 699 B
./packages/react/dist/components/Radio/RadioGroupContext.d.ts 339 B
./packages/react/dist/components/Radio/RadioInput/index.d.ts 584 B
./packages/react/dist/components/SegmentedControl/index.d.ts 758 B
./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts 362 B
./packages/react/dist/components/Switch/index.d.ts 452 B
./packages/react/dist/components/Switch/SwitchInput/index.d.ts 482 B
./packages/react/dist/components/Switch/SwitchWithLabel.d.ts 308 B
./packages/react/dist/components/TagItem/index.d.ts 730 B
./packages/react/dist/components/TextArea/index.d.ts 1.32 kB
./packages/react/dist/components/TextField/AssistiveText/index.d.ts 543 B
./packages/react/dist/components/TextField/index.d.ts 1.44 kB
./packages/react/dist/components/TextField/useFocusWithClick.d.ts 242 B
./packages/react/dist/core/CharcoalProvider.d.ts 242 B
./packages/react/dist/core/OverlayProvider.d.ts 101 B
./packages/react/dist/core/SSRProvider.d.ts 242 B
./packages/react/dist/index.cjs.js 52.6 kB
./packages/react/dist/index.d.ts 1.84 kB
./packages/react/dist/index.esm.js 47.2 kB
./packages/styled/dist/addThemeUtils.story.d.ts 302 B
./packages/styled/dist/builders/border.d.ts 685 B
./packages/styled/dist/builders/borderRadius.d.ts 440 B
./packages/styled/dist/builders/colors.d.ts 1.3 kB
./packages/styled/dist/builders/elementEffect.d.ts 533 B
./packages/styled/dist/builders/o.d.ts 5.91 kB
./packages/styled/dist/builders/outline.d.ts 638 B
./packages/styled/dist/builders/size.d.ts 1.19 kB
./packages/styled/dist/builders/spacing.d.ts 1.17 kB
./packages/styled/dist/builders/transition.d.ts 287 B
./packages/styled/dist/builders/typography.d.ts 624 B
./packages/styled/dist/defineThemeVariables.test.d.ts 66 B
./packages/styled/dist/factories/lib.d.ts 3.96 kB
./packages/styled/dist/helper.d.ts 2.05 kB
./packages/styled/dist/index.cjs.js 31 kB
./packages/styled/dist/index.d.ts 6.88 kB
./packages/styled/dist/index.esm.js 27.7 kB
./packages/styled/dist/index.test.d.ts 204 B
./packages/styled/dist/internals/index.d.ts 1.6 kB
./packages/styled/dist/SetThemeScript.d.ts 905 B
./packages/styled/dist/storyHelper.d.ts 386 B
./packages/styled/dist/styles/assertiveRingCss.d.ts 141 B
./packages/styled/dist/styles/disabledCss.d.ts 131 B
./packages/styled/dist/styles/focusVisibleFocusRingCss.d.ts 318 B
./packages/styled/dist/TokenInjector.d.ts 505 B
./packages/styled/dist/util.d.ts 4.24 kB
./packages/styled/dist/utils/addThemeUtils.d.ts 383 B
./packages/styled/dist/utils/CharcoalStyledTheme.d.ts 1.43 kB
./packages/styled/dist/utils/gap.d.ts 473 B
./packages/styled/dist/utils/helpers/pxIfNum.d.ts 99 B
./packages/styled/dist/utils/helpers/SpacingType.d.ts 137 B
./packages/styled/dist/utils/margin.d.ts 905 B
./packages/styled/dist/utils/padding.d.ts 935 B
./packages/styled/dist/utils/typographyCss.d.ts 306 B
./packages/tailwind-config/dist/_lib/compat.d.ts 423 B
./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts 755 B
./packages/tailwind-config/dist/colors/plugin.d.ts 443 B
./packages/tailwind-config/dist/colors/plugin.test.d.ts 52 B
./packages/tailwind-config/dist/colors/toTailwindConfig.d.ts 399 B
./packages/tailwind-config/dist/colors/toTailwindConfig.test.d.ts 62 B
./packages/tailwind-config/dist/colors/utils.d.ts 347 B
./packages/tailwind-config/dist/docs/borderRadius/BorderRadius.d.ts 119 B
./packages/tailwind-config/dist/docs/borderRadius/index.d.ts 175 B
./packages/tailwind-config/dist/docs/colors/Colors.d.ts 107 B
./packages/tailwind-config/dist/docs/colors/index.d.ts 201 B
./packages/tailwind-config/dist/docs/colors/TextBgColor.d.ts 175 B
./packages/tailwind-config/dist/docs/colors/TextBgColor.story.d.ts 298 B
./packages/tailwind-config/dist/docs/colors/TextColors.d.ts 115 B
./packages/tailwind-config/dist/docs/gradient/Gradients.d.ts 113 B
./packages/tailwind-config/dist/docs/gradient/index.d.ts 433 B
./packages/tailwind-config/dist/docs/gradient/utils.d.ts 120 B
./packages/tailwind-config/dist/docs/index.d.ts 360 B
./packages/tailwind-config/dist/docs/screens/index.d.ts 160 B
./packages/tailwind-config/dist/docs/screens/Screens.d.ts 109 B
./packages/tailwind-config/dist/docs/spacing/index.d.ts 160 B
./packages/tailwind-config/dist/docs/spacing/Spacing.d.ts 109 B
./packages/tailwind-config/dist/docs/typography/HalfLeading.d.ts 117 B
./packages/tailwind-config/dist/docs/typography/index.d.ts 346 B
./packages/tailwind-config/dist/docs/typography/Sizes.d.ts 105 B
./packages/tailwind-config/dist/foundation.d.ts 360 B
./packages/tailwind-config/dist/gradient/plugin.d.ts 816 B
./packages/tailwind-config/dist/gradient/plugin.test.d.ts 52 B
./packages/tailwind-config/dist/index.test.d.ts 51 B
./packages/tailwind-config/dist/types.d.ts 855 B
./packages/tailwind-config/dist/typography/plugin.d.ts 146 B
./packages/tailwind-diff/dist/commands/check.d.ts 296 B
./packages/tailwind-diff/dist/commands/check.js 4.37 kB
./packages/tailwind-diff/dist/commands/dump.d.ts 185 B
./packages/tailwind-diff/dist/commands/dump.js 1.26 kB
./packages/tailwind-diff/dist/defer.d.ts 164 B
./packages/tailwind-diff/dist/defer.js 792 B
./packages/tailwind-diff/dist/index.d.ts 46 B
./packages/tailwind-diff/dist/index.js 1.84 kB
./packages/tailwind-diff/dist/packageManager.d.ts 323 B
./packages/tailwind-diff/dist/packageManager.js 1.85 kB
./packages/tailwind-diff/dist/style.d.ts 436 B
./packages/tailwind-diff/dist/style.js 2.68 kB
./packages/tailwind-diff/dist/withPackages.d.ts 464 B
./packages/tailwind-diff/dist/withPackages.js 3.24 kB
./packages/theme/dist/abstract-theme.d.ts 1.19 kB
./packages/theme/dist/css/_variables_dark.css.d.ts 26 B
./packages/theme/dist/css/_variables_light.css.d.ts 26 B
./packages/theme/dist/default.d.ts 163 B
./packages/theme/dist/index.cjs.js 5.49 kB
./packages/theme/dist/index.d.ts 121 B
./packages/theme/dist/index.esm.js 3.49 kB
./packages/theme/dist/theme.d.ts 2.87 kB
./packages/theme/dist/token-object/helpers/changecase-keys.d.ts 554 B
./packages/theme/dist/token-object/helpers/changecase-keys.test-d.d.ts 63 B
./packages/theme/dist/token-object/helpers/changecase-keys.test.d.ts 61 B
./packages/theme/dist/token-object/helpers/is-empty-array.d.ts 119 B
./packages/theme/dist/token-object/helpers/nest-object.d.ts 397 B
./packages/theme/dist/token-object/helpers/nest-object.test.d.ts 57 B
./packages/theme/dist/token-object/index.cjs.js 4.9 kB
./packages/theme/dist/token-object/index.d.ts 2.15 kB
./packages/theme/dist/token-object/index.esm.js 3.3 kB
./packages/theme/dist/token-object/reference-token.d.ts 299 B
./packages/theme/dist/token-object/reference-token.test.d.ts 61 B
./packages/theme/dist/token-object/to-token-object.d.ts 828 B
./packages/theme/dist/token-object/token-object.bench.d.ts 59 B
./packages/theme/dist/token-object/token-object.test.d.ts 58 B
./packages/theme/dist/token-object/types.d.ts 614 B
./packages/token-cli/dist/index.js 7.2 kB
./packages/utils/dist/index.cjs.js 6.81 kB
./packages/utils/dist/index.d.ts 3.17 kB
./packages/utils/dist/index.esm.js 4.67 kB

compressed-size-action

@yue4u yue4u temporarily deployed to preview-channel December 12, 2024 01:59 — with GitHub Actions Inactive
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from 9dd7852 to ab01bf3 Compare December 13, 2024 12:40
@yue4u yue4u temporarily deployed to preview-channel December 13, 2024 12:40 — with GitHub Actions Inactive
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from ab01bf3 to a6f9ca9 Compare December 13, 2024 12:51
@yue4u yue4u temporarily deployed to preview-channel December 13, 2024 12:51 — with GitHub Actions Inactive
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from a6f9ca9 to 02260f6 Compare December 13, 2024 12:52
@yue4u yue4u temporarily deployed to preview-channel December 13, 2024 12:52 — with GitHub Actions Inactive
@yue4u yue4u force-pushed the feat/allow-design-token-v2-in-tailwind-config branch from 02260f6 to d106c78 Compare December 13, 2024 12:54
@yue4u yue4u temporarily deployed to preview-channel December 13, 2024 12:54 — with GitHub Actions Inactive
@yue4u yue4u temporarily deployed to preview-channel December 13, 2024 12:57 — with GitHub Actions Inactive
@yue4u yue4u temporarily deployed to preview-channel December 16, 2024 01:01 — with GitHub Actions Inactive
@yue4u yue4u marked this pull request as ready for review December 16, 2024 01:01
@yue4u yue4u temporarily deployed to preview-channel December 16, 2024 01:10 — with GitHub Actions Inactive
yue4u
yue4u commented Dec 16, 2024
View reviewed changes
.storybook/main.js
@@ -63,17 +63,13 @@ module.exports = {
if (configType === 'PRODUCTION') {
return config
}
// 事前ビルドが不要になるようにマッピング
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

今までaliasでなんとか動いたが、ビルド時生成されたものが増えたり、package.jsonのexportsと相性悪いので、考え直す必要があります。
今でもビルドしないと動かないので一旦外します

.storybook/theme-decorator.tsx
@@ -6,6 +6,7 @@ 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/react/dist/index.css'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dist依存するのがよくないですがこうするしかなさそう

packages/tailwind-config/src/index.ts
Comment on lines +137 to +143
...(unstableTokenV2
? {
borderWidth: borderWidthV2,
fontSize: fontSizeV2,
fontWeight: fontWeightV2,
}
: {}),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

borderWidth: undefinedがあるとデフォルトのclassが消えるのでkey自体を避ける必要があります

@yue4u yue4u added the image snapshots update Pull requests that update image snapshots label Dec 16, 2024
@yue4u yue4u requested review from naporin0624 and mimokmt December 16, 2024 01:54
@yue4u yue4u self-assigned this Dec 16, 2024
@yue4u
Copy link
Contributor Author

yue4u commented Dec 16, 2024

merging as beta

@yue4u yue4u merged commit dde4f95 into v4.0.0 Dec 16, 2024
14 of 15 checks passed
@yue4u yue4u deleted the feat/allow-design-token-v2-in-tailwind-config branch December 16, 2024 04:59
naporin0624
naporin0624 reviewed Dec 17, 2024
View reviewed changes
Copy link
Member

@naporin0624 naporin0624 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@naporin0624 naporin0624 naporin0624 left review comments

@mimokmt mimokmt Awaiting requested review from mimokmt

Assignees

@yue4u yue4u

Labels
image snapshots update Pull requests that update image snapshots major
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@yue4u @naporin0624