feat(bezier-tokens): create a CSS entry point and add composition tokens #1769
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 539f902 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Chromatic Report🚀 Congratulations! Your build was successful! |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## alpha #1769 +/- ##
=======================================
Coverage 86.90% 86.90%
=======================================
Files 283 283
Lines 3970 3970
Branches 830 830
=======================================
Hits 3450 3450
Misses 448 448
Partials 72 72 ☔ View full report in Codecov by Sentry. |
sungik-choi
commented
Dec 1, 2023
There was a problem hiding this comment.
Typography
- typography는 global인가, semantic인가? font 토큰을 레퍼런싱하므로 semantic인가?
- web/mobile 스펙이 다른데, 현 구조에서 bezier-tokens에 위치하는 게 맞는가?
- 토큰의 조합을 믹스인에서 하는가, Text 컴포넌트에서 하는가? (scope 문제)
Common
- _tokens.scss에 bezier-react에서 주입한 토큰은 별다른 처리를 해주지 않으면
TokenProvider가 공급하는 token set에 포함되지 않는다. 어떻게 처리하면 좋을까? - 해당 처리는 bezier-tokens에서 해주고 있는데, 그렇다면 bezier-tokens로 옮기는 것이 맞는가? input의 경우는 component specific 토큰인데, 우리 디자인 시스템의 토큰 레벨에선 다루지 않는다. 믹스인에 가깝다. 그런데 가져다 사용하는 애플리케이션도 많다..!
…ier-tokens Using composition tokens as simple strings without compositing
sungik-choi
changed the title
styles.css[data-bezier-theme="dark"] {
--shdw-inner-base: var(--white-8);
--shdw-base: var(--black-8);
--shdw-small: var(--black-15);
--shdw-medium: var(--black-20);
--shdw-large: var(--black-40);
--shdw-xlarge: var(--black-60);
--bdr-white: var(--grey-700);
--bdr-grey-light: var(--grey-700);
--bdr-black-lightest: var(--white-5);
--bdr-black-light: var(--white-12);
--bdr-black-dark: var(--white-20);
--txt-white-normal: var(--grey-900);
--txt-black-dark: var(--white-40);
--txt-black-darker: var(--white-60);
--txt-black-darkest: var(--white-80);
--txt-black-pure: var(--white-100);
--bgtxt-absolute-white-lightest: var(--white-20);
--bgtxt-absolute-white-lighter: var(--white-40);
--bgtxt-absolute-white-light: var(--white-60);
--bgtxt-absolute-white-normal: var(--white-90);
--bgtxt-absolute-white-dark: var(--white-100);
--bgtxt-absolute-black-lightest: var(--black-20);
--bgtxt-absolute-black-lighter: var(--black-40);
--bgtxt-absolute-black-light: var(--black-60);
--bgtxt-absolute-black-normal: var(--black-85);
--bgtxt-absolute-black-dark: var(--black-100);
--bgtxt-navy-lightest: var(--navy-300-20);
--bgtxt-navy-lighter: var(--navy-300-30);
--bgtxt-navy-light: var(--navy-300-40);
--bgtxt-navy-normal: var(--navy-300);
--bgtxt-navy-dark: var(--navy-400);
--bgtxt-purple-lightest: var(--purple-300-20);
--bgtxt-purple-lighter: var(--purple-300-30);
--bgtxt-purple-light: var(--purple-300-40);
--bgtxt-purple-normal: var(--purple-300);
--bgtxt-purple-dark: var(--purple-400);
--bgtxt-pink-lightest: var(--pink-300-20);
--bgtxt-pink-lighter: var(--pink-300-30);
--bgtxt-pink-light: var(--pink-300-40);
--bgtxt-pink-normal: var(--pink-300);
--bgtxt-pink-dark: var(--pink-400);
--bgtxt-red-lightest: var(--red-300-20);
--bgtxt-red-lighter: var(--red-300-30);
--bgtxt-red-light: var(--red-300-40);
--bgtxt-red-normal: var(--red-300);
--bgtxt-red-dark: var(--red-400);
--bgtxt-orange-lightest: var(--orange-300-20);
--bgtxt-orange-lighter: var(--orange-300-30);
--bgtxt-orange-light: var(--orange-300-40);
--bgtxt-orange-normal: var(--orange-300);
--bgtxt-orange-dark: var(--orange-400);
--bgtxt-yellow-lightest: var(--yellow-300-20);
--bgtxt-yellow-lighter: var(--yellow-300-30);
--bgtxt-yellow-light: var(--yellow-300-40);
--bgtxt-yellow-normal: var(--yellow-300);
--bgtxt-yellow-dark: var(--yellow-400);
--bgtxt-olive-lightest: var(--olive-300-20);
--bgtxt-olive-lighter: var(--olive-300-30);
--bgtxt-olive-light: var(--olive-300-40);
--bgtxt-olive-normal: var(--olive-300);
--bgtxt-olive-dark: var(--olive-400);
--bgtxt-green-lightest: var(--green-300-20);
--bgtxt-green-lighter: var(--green-300-30);
--bgtxt-green-light: var(--green-300-40);
--bgtxt-green-normal: var(--green-300);
--bgtxt-green-dark: var(--green-400);
--bgtxt-teal-lightest: var(--teal-300-20);
--bgtxt-teal-lighter: var(--teal-300-30);
--bgtxt-teal-light: var(--teal-300-40);
--bgtxt-teal-normal: var(--teal-300);
--bgtxt-teal-dark: var(--teal-400);
--bgtxt-cobalt-lightest: var(--cobalt-300-20);
--bgtxt-cobalt-lighter: var(--cobalt-300-30);
--bgtxt-cobalt-light: var(--cobalt-300-40);
--bgtxt-cobalt-normal: var(--cobalt-300);
--bgtxt-cobalt-dark: var(--cobalt-400);
--bgtxt-blue-lightest: var(--blue-300-20);
--bgtxt-blue-lighter: var(--blue-300-30);
--bgtxt-blue-light: var(--blue-300-40);
--bgtxt-blue-normal: var(--blue-300);
--bgtxt-blue-dark: var(--blue-400);
--bg-grey-lightest: var(--grey-850);
--bg-grey-lighter: var(--grey-800);
--bg-grey-light: var(--grey-700);
--bg-grey-dim-lightest: var(--grey-850-80);
--bg-grey-dark: var(--grey-500);
--bg-grey-darkest: var(--white-100);
--bg-black-lightest: var(--white-5);
--bg-black-lighter: var(--white-8);
--bg-black-light: var(--white-12);
--bg-black-dark: var(--white-20);
--bg-black-darker: var(--white-40);
--bg-black-darkest: var(--white-60);
--bg-lounge: var(--grey-800-90);
--bg-header: var(--grey-800);
--bg-navi: var(--grey-800-80);
--bg-gnb: var(--grey-700-80);
--bg-white-dim-light: var(--black-20);
--bg-white-dim-dark: var(--black-60);
--bg-white-low: var(--grey-800);
--bg-white-normal: var(--grey-900);
--bg-white-high: var(--grey-700);
--input-box-shadow-invalid: 0 0 0 3px var(--bgtxt-orange-light), inset 0 0 0 1px var(--bgtxt-orange-normal);
--input-box-shadow-focused: 0 0 0 3px var(--bgtxt-blue-light), inset 0 0 0 1px var(--bgtxt-blue-normal);
--input-box-shadow: 0 1px 2px var(--bg-black-lighter), inset 0 0 0 1px var(--bg-black-dark);
--ev-base: 0 0 2px 0 var(--shdw-base);
--ev-inner: inset 0 0 2px 0 var(--shdw-inner-base);
--ev-6: var(--ev-inner), var(--ev-base), 0 12px 60px var(--shdw-xlarge);
--ev-5: var(--ev-inner), var(--ev-base), 0 6px 40px var(--shdw-xlarge);
--ev-4: var(--ev-inner), var(--ev-base), 0 4px 20px var(--shdw-large);
--ev-3: var(--ev-inner), var(--ev-base), 0 4px 12px var(--shdw-medium);
--ev-2: var(--ev-inner), var(--ev-base), 0 2px 6px var(--shdw-small);
--ev-1: var(--ev-inner), var(--ev-base), 0 1px 2px var(--shdw-small);
}
:where(:root, :host) {
--z-index-important: 2000;
--z-index-tooltip: 1300;
--z-index-toast: 1200;
--z-index-modal: 1100;
--z-index-overlay: 1000;
--z-index-floating: 1;
--z-index-base: 0;
--z-index-hidden: -1;
--transition-duration-l: 450ms;
--transition-duration-m: 300ms;
--transition-duration-s: 150ms;
--transition-timing-function-default: cubic-bezier(0.3, 0, 0, 1);
--radius-100-p: 100%;
--radius-42-p: 42%;
--radius-44: 44px;
--radius-32: 32px;
--radius-20: 20px;
--radius-16: 16px;
--radius-14: 14px;
--radius-12: 12px;
--radius-10: 10px;
--radius-8: 8px;
--radius-6: 6px;
--radius-4: 4px;
--radius-3: 3px;
--radius-2: 2px;
--opacity-disabled: 0.4;
--font-letter-spacing-2: -0.4px;
--font-letter-spacing-1: -0.1px;
--font-family-mono: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace';
--font-family-sans-jp: 'Inter', 'NotoSansJP', 'NotoSansKR', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif';
--font-family-sans-kr: 'Inter', 'NotoSansKR', 'NotoSansJP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif';
--font-weight-700: 700;
--font-weight-400: 400;
--font-line-height-44: 4.4rem;
--font-line-height-36: 3.6rem;
--font-line-height-32: 3.2rem;
--font-line-height-28: 2.8rem;
--font-line-height-24: 2.4rem;
--font-line-height-22: 2.2rem;
--font-line-height-20: 2rem;
--font-line-height-18: 1.8rem;
--font-line-height-16: 1.6rem;
--font-size-36: 3.6rem;
--font-size-30: 3rem;
--font-size-24: 2.4rem;
--font-size-22: 2.2rem;
--font-size-18: 1.8rem;
--font-size-17: 1.7rem;
--font-size-16: 1.6rem;
--font-size-15: 1.5rem;
--font-size-14: 1.4rem;
--font-size-13: 1.3rem;
--font-size-12: 1.2rem;
--font-size-11: 1.1rem;
--black-100: #000000;
--black-85: #000000D9;
--black-60: #00000099;
--black-40: #00000066;
--black-30: #0000004D;
--black-22: #00000038;
--black-20: #00000033;
--black-15: #00000026;
--black-8: #00000014;
--black-5: #0000000D;
--black-3: #00000008;
--white-100: #FFFFFF;
--white-90: #FFFFFFE6;
--white-80: #FFFFFFCC;
--white-60: #FFFFFF99;
--white-40: #FFFFFF66;
--white-20: #FFFFFF33;
--white-12: #FFFFFF1F;
--white-8: #FFFFFF14;
--white-5: #FFFFFF0D;
--grey-900-90: #242428E6;
--grey-850-80: #2A2B2DCC;
--grey-800-80: #313234CC;
--grey-800-90: #313234E6;
--grey-700-80: #464748CC;
--grey-200-80: #EFEFF0CC;
--grey-100-80: #F7F7F8CC;
--grey-100-90: #F7F7F8E6;
--grey-50-80: #FCFCFCCC;
--grey-900: #242428;
--grey-850: #2A2B2D;
--grey-800: #313234;
--grey-700: #464748;
--grey-500: #A7A7AA;
--grey-200: #EFEFF0;
--grey-100: #F7F7F8;
--grey-50: #FCFCFC;
--navy-400-10: #3A4F8D1A;
--navy-400-20: #3A4F8D33;
--navy-400-30: #3A4F8D4D;
--navy-300-20: #647CC933;
--navy-300-30: #647CC94D;
--navy-300-40: #647CC966;
--navy-500: #333D5B;
--navy-400: #3A4F8D;
--navy-300: #647CC9;
--purple-400-10: #915CE01A;
--purple-400-20: #915CE033;
--purple-400-30: #915CE04D;
--purple-300-20: #B570FF33;
--purple-300-30: #B570FF4D;
--purple-300-40: #B570FF66;
--purple-500: #6B23B3;
--purple-400: #915CE0;
--purple-300: #B570FF;
--pink-400-10: #CB48AD1A;
--pink-400-20: #CB48AD33;
--pink-400-30: #CB48AD4D;
--pink-300-20: #EC6FD333;
--pink-300-30: #EC6FD34D;
--pink-300-40: #EC6FD366;
--pink-500: #A32E92;
--pink-400: #CB48AD;
--pink-300: #EC6FD3;
--red-400-10: #E94E581A;
--red-400-20: #E94E5833;
--red-400-30: #E94E584D;
--red-300-20: #FF5C5C33;
--red-300-30: #FF5C5C4D;
--red-300-40: #FF5C5C66;
--red-500: #AC3E46;
--red-400: #E94E58;
--red-300: #FF5C5C;
--orange-400-10: #F4800B1A;
--orange-400-20: #F4800B33;
--orange-400-30: #F4800B4D;
--orange-300-20: #FFAB5C33;
--orange-300-30: #FFAB5C4D;
--orange-300-40: #FFAB5C66;
--orange-500: #C57417;
--orange-400: #F4800B;
--orange-300: #FFAB5C;
--yellow-400-10: #EDBC401A;
--yellow-400-20: #EDBC4033;
--yellow-400-30: #EDBC404D;
--yellow-300-20: #FDD35333;
--yellow-300-30: #FDD3534D;
--yellow-300-40: #FDD35366;
--yellow-500: #C39E37;
--yellow-400: #EDBC40;
--yellow-300: #FDD353;
--olive-400-10: #A0A5401A;
--olive-400-20: #A0A54033;
--olive-400-30: #A0A5404D;
--olive-300-20: #CAD54833;
--olive-300-30: #CAD5484D;
--olive-300-40: #CAD54866;
--olive-500: #818628;
--olive-400: #A0A540;
--olive-300: #CAD548;
--green-400-10: #31A5521A;
--green-400-20: #31A55233;
--green-400-30: #31A5524D;
--green-300-20: #3ACF5A33;
--green-300-30: #3ACF5A4D;
--green-300-40: #3ACF5A66;
--green-500: #41904F;
--green-400: #31A552;
--green-300: #3ACF5A;
--teal-400-10: #0FB3A31A;
--teal-400-20: #0FB3A333;
--teal-400-30: #0FB3A34D;
--teal-300-20: #3CDDCD33;
--teal-300-30: #3CDDCD4D;
--teal-300-40: #3CDDCD66;
--teal-500: #449C8A;
--teal-400: #0FB3A3;
--teal-300: #3CDDCD;
--cobalt-400-10: #329BE71A;
--cobalt-400-20: #329BE733;
--cobalt-400-30: #329BE74D;
--cobalt-300-20: #47C8FF33;
--cobalt-300-30: #47C8FF4D;
--cobalt-300-40: #47C8FF66;
--cobalt-500: #327AB8;
--cobalt-400: #329BE7;
--cobalt-300: #47C8FF;
--blue-400-10: #5E56F01A;
--blue-400-20: #5E56F033;
--blue-400-30: #5E56F04D;
--blue-300-20: #6687FF33;
--blue-300-30: #6687FF4D;
--blue-300-40: #6687FF66;
--blue-500: #4E40C9;
--blue-400: #5E56F0;
--blue-300: #6687FF;
--typography-size-36-letter-spacing: var(--font-letter-spacing-2);
--typography-size-36-line-height: var(--font-line-height-44);
--typography-size-36-font-size: var(--font-size-36);
--typography-size-30-letter-spacing: var(--font-letter-spacing-2);
--typography-size-30-line-height: var(--font-line-height-36);
--typography-size-30-font-size: var(--font-size-30);
--typography-size-24-letter-spacing: var(--font-letter-spacing-2);
--typography-size-24-line-height: var(--font-line-height-32);
--typography-size-24-font-size: var(--font-size-24);
--typography-size-22-letter-spacing: var(--font-letter-spacing-2);
--typography-size-22-line-height: var(--font-line-height-28);
--typography-size-22-font-size: var(--font-size-22);
--typography-size-18-line-height: var(--font-line-height-24);
--typography-size-18-font-size: var(--font-size-18);
--typography-size-17-letter-spacing: var(--font-letter-spacing-1);
--typography-size-17-line-height: var(--font-line-height-22);
--typography-size-17-font-size: var(--font-size-17);
--typography-size-16-letter-spacing: var(--font-letter-spacing-1);
--typography-size-16-line-height: var(--font-line-height-22);
--typography-size-16-font-size: var(--font-size-16);
--typography-size-15-letter-spacing: var(--font-letter-spacing-1);
--typography-size-15-line-height: var(--font-line-height-20);
--typography-size-15-font-size: var(--font-size-15);
--typography-size-14-line-height: var(--font-line-height-18);
--typography-size-14-font-size: var(--font-size-14);
--typography-size-13-line-height: var(--font-line-height-18);
--typography-size-13-font-size: var(--font-size-13);
--typography-size-12-line-height: var(--font-line-height-16);
--typography-size-12-font-size: var(--font-size-12);
--typography-size-11-line-height: var(--font-line-height-16);
--typography-size-11-font-size: var(--font-size-11);
--transition-l: var(--transition-duration-l) var(--transition-timing-function-default);
--transition-m: var(--transition-duration-m) var(--transition-timing-function-default);
--transition-s: var(--transition-duration-s) var(--transition-timing-function-default);
}
:where(:root, :host), [data-bezier-theme="light"] {
--shdw-inner-base: var(--white-12);
--shdw-base: var(--black-5);
--shdw-small: var(--black-8);
--shdw-medium: var(--black-15);
--shdw-large: var(--black-22);
--shdw-xlarge: var(--black-30);
--bdr-white: var(--white-100);
--bdr-grey-light: var(--grey-200);
--bdr-black-lightest: var(--black-3);
--bdr-black-light: var(--black-8);
--bdr-black-dark: var(--black-15);
--txt-white-normal: var(--white-100);
--txt-black-dark: var(--black-40);
--txt-black-darker: var(--black-60);
--txt-black-darkest: var(--black-85);
--txt-black-pure: var(--black-100);
--bgtxt-absolute-white-lightest: var(--white-20);
--bgtxt-absolute-white-lighter: var(--white-40);
--bgtxt-absolute-white-light: var(--white-60);
--bgtxt-absolute-white-normal: var(--white-90);
--bgtxt-absolute-white-dark: var(--white-100);
--bgtxt-absolute-black-lightest: var(--black-20);
--bgtxt-absolute-black-lighter: var(--black-40);
--bgtxt-absolute-black-light: var(--black-60);
--bgtxt-absolute-black-normal: var(--black-85);
--bgtxt-absolute-black-dark: var(--black-100);
--bgtxt-navy-lightest: var(--navy-400-10);
--bgtxt-navy-lighter: var(--navy-400-20);
--bgtxt-navy-light: var(--navy-400-30);
--bgtxt-navy-normal: var(--navy-400);
--bgtxt-navy-dark: var(--navy-500);
--bgtxt-purple-lightest: var(--purple-400-10);
--bgtxt-purple-lighter: var(--purple-400-20);
--bgtxt-purple-light: var(--purple-400-30);
--bgtxt-purple-normal: var(--purple-400);
--bgtxt-purple-dark: var(--purple-500);
--bgtxt-pink-lightest: var(--pink-400-10);
--bgtxt-pink-lighter: var(--pink-400-20);
--bgtxt-pink-light: var(--pink-400-30);
--bgtxt-pink-normal: var(--pink-400);
--bgtxt-pink-dark: var(--pink-500);
--bgtxt-red-lightest: var(--red-400-10);
--bgtxt-red-lighter: var(--red-400-20);
--bgtxt-red-light: var(--red-400-30);
--bgtxt-red-normal: var(--red-400);
--bgtxt-red-dark: var(--red-500);
--bgtxt-orange-lightest: var(--orange-400-10);
--bgtxt-orange-lighter: var(--orange-400-20);
--bgtxt-orange-light: var(--orange-400-30);
--bgtxt-orange-normal: var(--orange-400);
--bgtxt-orange-dark: var(--orange-500);
--bgtxt-yellow-lightest: var(--yellow-400-10);
--bgtxt-yellow-lighter: var(--yellow-400-20);
--bgtxt-yellow-light: var(--yellow-400-30);
--bgtxt-yellow-normal: var(--yellow-400);
--bgtxt-yellow-dark: var(--yellow-500);
--bgtxt-olive-lightest: var(--olive-400-10);
--bgtxt-olive-lighter: var(--olive-400-20);
--bgtxt-olive-light: var(--olive-400-30);
--bgtxt-olive-normal: var(--olive-400);
--bgtxt-olive-dark: var(--olive-500);
--bgtxt-green-lightest: var(--green-400-10);
--bgtxt-green-lighter: var(--green-400-20);
--bgtxt-green-light: var(--green-400-30);
--bgtxt-green-normal: var(--green-400);
--bgtxt-green-dark: var(--green-500);
--bgtxt-teal-lightest: var(--teal-400-10);
--bgtxt-teal-lighter: var(--teal-400-20);
--bgtxt-teal-light: var(--teal-400-30);
--bgtxt-teal-normal: var(--teal-400);
--bgtxt-teal-dark: var(--teal-500);
--bgtxt-cobalt-lightest: var(--cobalt-400-10);
--bgtxt-cobalt-lighter: var(--cobalt-400-20);
--bgtxt-cobalt-light: var(--cobalt-400-30);
--bgtxt-cobalt-normal: var(--cobalt-400);
--bgtxt-cobalt-dark: var(--cobalt-500);
--bgtxt-blue-lightest: var(--blue-400-10);
--bgtxt-blue-lighter: var(--blue-400-20);
--bgtxt-blue-light: var(--blue-400-30);
--bgtxt-blue-normal: var(--blue-400);
--bgtxt-blue-dark: var(--blue-500);
--bg-grey-lightest: var(--grey-50);
--bg-grey-lighter: var(--grey-100);
--bg-grey-light: var(--grey-200);
--bg-grey-dim-lightest: var(--grey-50-80);
--bg-grey-dark: var(--grey-500);
--bg-grey-darkest: var(--grey-900);
--bg-black-lightest: var(--black-3);
--bg-black-lighter: var(--black-5);
--bg-black-light: var(--black-8);
--bg-black-dark: var(--black-15);
--bg-black-darker: var(--black-40);
--bg-black-darkest: var(--black-60);
--bg-lounge: var(--grey-100-90);
--bg-header: var(--white-100);
--bg-navi: var(--grey-100-80);
--bg-gnb: var(--grey-200-80);
--bg-white-dim-light: var(--white-20);
--bg-white-dim-dark: var(--white-60);
--bg-white-low: var(--white-100);
--bg-white-normal: var(--white-100);
--bg-white-high: var(--white-100);
--input-box-shadow-invalid: 0 0 0 3px var(--bgtxt-orange-light), inset 0 0 0 1px var(--bgtxt-orange-normal);
--input-box-shadow-focused: 0 0 0 3px var(--bgtxt-blue-light), inset 0 0 0 1px var(--bgtxt-blue-normal);
--input-box-shadow: 0 1px 2px var(--bg-black-lighter), inset 0 0 0 1px var(--bg-black-dark);
--ev-base: 0 0 2px 0 var(--shdw-base);
--ev-inner: inset 0 0 2px 0 var(--shdw-inner-base);
--ev-6: var(--ev-inner), var(--ev-base), 0 12px 60px var(--shdw-xlarge);
--ev-5: var(--ev-inner), var(--ev-base), 0 6px 40px var(--shdw-xlarge);
--ev-4: var(--ev-inner), var(--ev-base), 0 4px 20px var(--shdw-large);
--ev-3: var(--ev-inner), var(--ev-base), 0 4px 12px var(--shdw-medium);
--ev-2: var(--ev-inner), var(--ev-base), 0 2px 6px var(--shdw-small);
--ev-1: var(--ev-inner), var(--ev-base), 0 1px 2px var(--shdw-small);
} |
lightTheme.mjsexport default {
"elevation": {
"ev-1": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 1px 2px #00000014",
"ev-2": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 2px 6px #00000014",
"ev-3": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 4px 12px #00000026",
"ev-4": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 4px 20px #00000038",
"ev-5": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 6px 40px #0000004D",
"ev-6": "inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 0 #0000000D, 0 12px 60px #0000004D",
"ev-inner": "inset 0 0 2px 0 #FFFFFF1F",
"ev-base": "0 0 2px 0 #0000000D",
},
"input": {
"input-box-shadow": "0 1px 2px #0000000D, inset 0 0 0 1px #00000026",
"input-box-shadow-focused": "0 0 0 3px #5E56F04D, inset 0 0 0 1px #5E56F0",
"input-box-shadow-invalid": "0 0 0 3px #F4800B4D, inset 0 0 0 1px #F4800B",
},
"color": {
"bg-white-high": "#FFFFFF",
"bg-white-normal": "#FFFFFF",
"bg-white-low": "#FFFFFF",
"bg-white-dim-dark": "#FFFFFF99",
"bg-white-dim-light": "#FFFFFF33",
"bg-gnb": "#EFEFF0CC",
"bg-navi": "#F7F7F8CC",
"bg-header": "#FFFFFF",
"bg-lounge": "#F7F7F8E6",
"bg-black-darkest": "#00000099",
"bg-black-darker": "#00000066",
"bg-black-dark": "#00000026",
"bg-black-light": "#00000014",
"bg-black-lighter": "#0000000D",
"bg-black-lightest": "#00000008",
"bg-grey-darkest": "#242428",
"bg-grey-dark": "#A7A7AA",
"bg-grey-dim-lightest": "#FCFCFCCC",
"bg-grey-light": "#EFEFF0",
"bg-grey-lighter": "#F7F7F8",
"bg-grey-lightest": "#FCFCFC",
"bgtxt-blue-dark": "#4E40C9",
"bgtxt-blue-normal": "#5E56F0",
"bgtxt-blue-light": "#5E56F04D",
"bgtxt-blue-lighter": "#5E56F033",
"bgtxt-blue-lightest": "#5E56F01A",
"bgtxt-cobalt-dark": "#327AB8",
"bgtxt-cobalt-normal": "#329BE7",
"bgtxt-cobalt-light": "#329BE74D",
"bgtxt-cobalt-lighter": "#329BE733",
"bgtxt-cobalt-lightest": "#329BE71A",
"bgtxt-teal-dark": "#449C8A",
"bgtxt-teal-normal": "#0FB3A3",
"bgtxt-teal-light": "#0FB3A34D",
"bgtxt-teal-lighter": "#0FB3A333",
"bgtxt-teal-lightest": "#0FB3A31A",
"bgtxt-green-dark": "#41904F",
"bgtxt-green-normal": "#31A552",
"bgtxt-green-light": "#31A5524D",
"bgtxt-green-lighter": "#31A55233",
"bgtxt-green-lightest": "#31A5521A",
"bgtxt-olive-dark": "#818628",
"bgtxt-olive-normal": "#A0A540",
"bgtxt-olive-light": "#A0A5404D",
"bgtxt-olive-lighter": "#A0A54033",
"bgtxt-olive-lightest": "#A0A5401A",
"bgtxt-yellow-dark": "#C39E37",
"bgtxt-yellow-normal": "#EDBC40",
"bgtxt-yellow-light": "#EDBC404D",
"bgtxt-yellow-lighter": "#EDBC4033",
"bgtxt-yellow-lightest": "#EDBC401A",
"bgtxt-orange-dark": "#C57417",
"bgtxt-orange-normal": "#F4800B",
"bgtxt-orange-light": "#F4800B4D",
"bgtxt-orange-lighter": "#F4800B33",
"bgtxt-orange-lightest": "#F4800B1A",
"bgtxt-red-dark": "#AC3E46",
"bgtxt-red-normal": "#E94E58",
"bgtxt-red-light": "#E94E584D",
"bgtxt-red-lighter": "#E94E5833",
"bgtxt-red-lightest": "#E94E581A",
"bgtxt-pink-dark": "#A32E92",
"bgtxt-pink-normal": "#CB48AD",
"bgtxt-pink-light": "#CB48AD4D",
"bgtxt-pink-lighter": "#CB48AD33",
"bgtxt-pink-lightest": "#CB48AD1A",
"bgtxt-purple-dark": "#6B23B3",
"bgtxt-purple-normal": "#915CE0",
"bgtxt-purple-light": "#915CE04D",
"bgtxt-purple-lighter": "#915CE033",
"bgtxt-purple-lightest": "#915CE01A",
"bgtxt-navy-dark": "#333D5B",
"bgtxt-navy-normal": "#3A4F8D",
"bgtxt-navy-light": "#3A4F8D4D",
"bgtxt-navy-lighter": "#3A4F8D33",
"bgtxt-navy-lightest": "#3A4F8D1A",
"bgtxt-absolute-black-dark": "#000000",
"bgtxt-absolute-black-normal": "#000000D9",
"bgtxt-absolute-black-light": "#00000099",
"bgtxt-absolute-black-lighter": "#00000066",
"bgtxt-absolute-black-lightest": "#00000033",
"bgtxt-absolute-white-dark": "#FFFFFF",
"bgtxt-absolute-white-normal": "#FFFFFFE6",
"bgtxt-absolute-white-light": "#FFFFFF99",
"bgtxt-absolute-white-lighter": "#FFFFFF66",
"bgtxt-absolute-white-lightest": "#FFFFFF33",
"txt-black-pure": "#000000",
"txt-black-darkest": "#000000D9",
"txt-black-darker": "#00000099",
"txt-black-dark": "#00000066",
"txt-white-normal": "#FFFFFF",
"bdr-black-dark": "#00000026",
"bdr-black-light": "#00000014",
"bdr-black-lightest": "#00000008",
"bdr-grey-light": "#EFEFF0",
"bdr-white": "#FFFFFF",
"shdw-xlarge": "#0000004D",
"shdw-large": "#00000038",
"shdw-medium": "#00000026",
"shdw-small": "#00000014",
"shdw-base": "#0000000D",
"shdw-inner-base": "#FFFFFF1F",
}
} |
global.mjsexport default {
"color": {
"blue-300": "#6687FF",
"blue-400": "#5E56F0",
"blue-500": "#4E40C9",
"blue-300-40": "#6687FF66",
"blue-300-30": "#6687FF4D",
"blue-300-20": "#6687FF33",
"blue-400-30": "#5E56F04D",
"blue-400-20": "#5E56F033",
"blue-400-10": "#5E56F01A",
"cobalt-300": "#47C8FF",
"cobalt-400": "#329BE7",
"cobalt-500": "#327AB8",
"cobalt-300-40": "#47C8FF66",
"cobalt-300-30": "#47C8FF4D",
"cobalt-300-20": "#47C8FF33",
"cobalt-400-30": "#329BE74D",
"cobalt-400-20": "#329BE733",
"cobalt-400-10": "#329BE71A",
"teal-300": "#3CDDCD",
"teal-400": "#0FB3A3",
"teal-500": "#449C8A",
"teal-300-40": "#3CDDCD66",
"teal-300-30": "#3CDDCD4D",
"teal-300-20": "#3CDDCD33",
"teal-400-30": "#0FB3A34D",
"teal-400-20": "#0FB3A333",
"teal-400-10": "#0FB3A31A",
"green-300": "#3ACF5A",
"green-400": "#31A552",
"green-500": "#41904F",
"green-300-40": "#3ACF5A66",
"green-300-30": "#3ACF5A4D",
"green-300-20": "#3ACF5A33",
"green-400-30": "#31A5524D",
"green-400-20": "#31A55233",
"green-400-10": "#31A5521A",
"olive-300": "#CAD548",
"olive-400": "#A0A540",
"olive-500": "#818628",
"olive-300-40": "#CAD54866",
"olive-300-30": "#CAD5484D",
"olive-300-20": "#CAD54833",
"olive-400-30": "#A0A5404D",
"olive-400-20": "#A0A54033",
"olive-400-10": "#A0A5401A",
"yellow-300": "#FDD353",
"yellow-400": "#EDBC40",
"yellow-500": "#C39E37",
"yellow-300-40": "#FDD35366",
"yellow-300-30": "#FDD3534D",
"yellow-300-20": "#FDD35333",
"yellow-400-30": "#EDBC404D",
"yellow-400-20": "#EDBC4033",
"yellow-400-10": "#EDBC401A",
"orange-300": "#FFAB5C",
"orange-400": "#F4800B",
"orange-500": "#C57417",
"orange-300-40": "#FFAB5C66",
"orange-300-30": "#FFAB5C4D",
"orange-300-20": "#FFAB5C33",
"orange-400-30": "#F4800B4D",
"orange-400-20": "#F4800B33",
"orange-400-10": "#F4800B1A",
"red-300": "#FF5C5C",
"red-400": "#E94E58",
"red-500": "#AC3E46",
"red-300-40": "#FF5C5C66",
"red-300-30": "#FF5C5C4D",
"red-300-20": "#FF5C5C33",
"red-400-30": "#E94E584D",
"red-400-20": "#E94E5833",
"red-400-10": "#E94E581A",
"pink-300": "#EC6FD3",
"pink-400": "#CB48AD",
"pink-500": "#A32E92",
"pink-300-40": "#EC6FD366",
"pink-300-30": "#EC6FD34D",
"pink-300-20": "#EC6FD333",
"pink-400-30": "#CB48AD4D",
"pink-400-20": "#CB48AD33",
"pink-400-10": "#CB48AD1A",
"purple-300": "#B570FF",
"purple-400": "#915CE0",
"purple-500": "#6B23B3",
"purple-300-40": "#B570FF66",
"purple-300-30": "#B570FF4D",
"purple-300-20": "#B570FF33",
"purple-400-30": "#915CE04D",
"purple-400-20": "#915CE033",
"purple-400-10": "#915CE01A",
"navy-300": "#647CC9",
"navy-400": "#3A4F8D",
"navy-500": "#333D5B",
"navy-300-40": "#647CC966",
"navy-300-30": "#647CC94D",
"navy-300-20": "#647CC933",
"navy-400-30": "#3A4F8D4D",
"navy-400-20": "#3A4F8D33",
"navy-400-10": "#3A4F8D1A",
"grey-50": "#FCFCFC",
"grey-100": "#F7F7F8",
"grey-200": "#EFEFF0",
"grey-500": "#A7A7AA",
"grey-700": "#464748",
"grey-800": "#313234",
"grey-850": "#2A2B2D",
"grey-900": "#242428",
"grey-50-80": "#FCFCFCCC",
"grey-100-90": "#F7F7F8E6",
"grey-100-80": "#F7F7F8CC",
"grey-200-80": "#EFEFF0CC",
"grey-700-80": "#464748CC",
"grey-800-90": "#313234E6",
"grey-800-80": "#313234CC",
"grey-850-80": "#2A2B2DCC",
"grey-900-90": "#242428E6",
"white-5": "#FFFFFF0D",
"white-8": "#FFFFFF14",
"white-12": "#FFFFFF1F",
"white-20": "#FFFFFF33",
"white-40": "#FFFFFF66",
"white-60": "#FFFFFF99",
"white-80": "#FFFFFFCC",
"white-90": "#FFFFFFE6",
"white-100": "#FFFFFF",
"black-3": "#00000008",
"black-5": "#0000000D",
"black-8": "#00000014",
"black-15": "#00000026",
"black-20": "#00000033",
"black-22": "#00000038",
"black-30": "#0000004D",
"black-40": "#00000066",
"black-60": "#00000099",
"black-85": "#000000D9",
"black-100": "#000000",
},
"font": {
"font-size-11": "1.1rem",
"font-size-12": "1.2rem",
"font-size-13": "1.3rem",
"font-size-14": "1.4rem",
"font-size-15": "1.5rem",
"font-size-16": "1.6rem",
"font-size-17": "1.7rem",
"font-size-18": "1.8rem",
"font-size-22": "2.2rem",
"font-size-24": "2.4rem",
"font-size-30": "3rem",
"font-size-36": "3.6rem",
"font-line-height-16": "1.6rem",
"font-line-height-18": "1.8rem",
"font-line-height-20": "2rem",
"font-line-height-22": "2.2rem",
"font-line-height-24": "2.4rem",
"font-line-height-28": "2.8rem",
"font-line-height-32": "3.2rem",
"font-line-height-36": "3.6rem",
"font-line-height-44": "4.4rem",
"font-weight-400": 400,
"font-weight-700": 700,
"font-family-sans-kr": "'Inter', 'NotoSansKR', 'NotoSansJP', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif'",
"font-family-sans-jp": "'Inter', 'NotoSansJP', 'NotoSansKR', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'system-ui', 'sans-serif'",
"font-family-mono": "'ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace'",
"font-letter-spacing-1": "-0.1px",
"font-letter-spacing-2": "-0.4px",
},
"opacity": {
"opacity-disabled": 0.4,
},
"radius": {
"radius-2": "2px",
"radius-3": "3px",
"radius-4": "4px",
"radius-6": "6px",
"radius-8": "8px",
"radius-10": "10px",
"radius-12": "12px",
"radius-14": "14px",
"radius-16": "16px",
"radius-20": "20px",
"radius-32": "32px",
"radius-44": "44px",
"radius-42-p": "42%",
"radius-100-p": "100%",
},
"transition": {
"transition-timing-function-default": "cubic-bezier(0.3, 0, 0, 1)",
"transition-duration-s": "150ms",
"transition-duration-m": "300ms",
"transition-duration-l": "450ms",
"transition-s": "150ms cubic-bezier(0.3, 0, 0, 1)",
"transition-m": "300ms cubic-bezier(0.3, 0, 0, 1)",
"transition-l": "450ms cubic-bezier(0.3, 0, 0, 1)",
},
"typography": {
"typography-size-11-font-size": "1.1rem",
"typography-size-11-line-height": "1.6rem",
"typography-size-12-font-size": "1.2rem",
"typography-size-12-line-height": "1.6rem",
"typography-size-13-font-size": "1.3rem",
"typography-size-13-line-height": "1.8rem",
"typography-size-14-font-size": "1.4rem",
"typography-size-14-line-height": "1.8rem",
"typography-size-15-font-size": "1.5rem",
"typography-size-15-line-height": "2rem",
"typography-size-15-letter-spacing": "-0.1px",
"typography-size-16-font-size": "1.6rem",
"typography-size-16-line-height": "2.2rem",
"typography-size-16-letter-spacing": "-0.1px",
"typography-size-17-font-size": "1.7rem",
"typography-size-17-line-height": "2.2rem",
"typography-size-17-letter-spacing": "-0.1px",
"typography-size-18-font-size": "1.8rem",
"typography-size-18-line-height": "2.4rem",
"typography-size-22-font-size": "2.2rem",
"typography-size-22-line-height": "2.8rem",
"typography-size-22-letter-spacing": "-0.4px",
"typography-size-24-font-size": "2.4rem",
"typography-size-24-line-height": "3.2rem",
"typography-size-24-letter-spacing": "-0.4px",
"typography-size-30-font-size": "3rem",
"typography-size-30-line-height": "3.6rem",
"typography-size-30-letter-spacing": "-0.4px",
"typography-size-36-font-size": "3.6rem",
"typography-size-36-line-height": "4.4rem",
"typography-size-36-letter-spacing": "-0.4px",
},
"z-index": {
"z-index-hidden": -1,
"z-index-base": 0,
"z-index-floating": 1,
"z-index-overlay": 1000,
"z-index-modal": 1100,
"z-index-toast": 1200,
"z-index-tooltip": 1300,
"z-index-important": 2000,
}
} |
yangwooseong
reviewed
Dec 5, 2023
yangwooseong
approved these changes
Dec 5, 2023
6 tasks
sungik-choi
added a commit
that referenced
this pull request
Dec 12, 2023
…licate CSS (#1779) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Summary <!-- Please brief explanation of the changes made --> - Composition token의 스펙을 DTCG format과 비슷하게 정의하고, 커스텀 Transformer를 구현합니다. - 공통 Semantic token이 불필요하게 라이트 테마, 다크 테마에 중복해서 들어가던 문제를 수정합니다. ## Details <!-- Please elaborate description of the changes --> - Composition token이 CSS spec에 의존하지 않도록 [DTCG format](https://design-tokens.github.io/community-group/format/#composite-types)을 참고하여 수정했습니다. shadow와 transition 타입에 적용했습니다. - letter-spacing에도 rem 단위를 적용합니다. dimension type을 만들어서 기존 font-size와 line-height에 적용하던 custom Transformer를 적용했습니다. - 공통 Semantic token이 불필요하게 들어가는 문제를 해결하기 위해서는 기존 defineConfig 함수를 해체하는 것이 불가피했습니다. CSS/JS 빌드를 구분하는 플래그 등을 만들어서 기존 defineConfig를 재사용하는 것도 가능했으나, 오히려 가독성이 떨어진다고 판단했습니다. 기존에 global, light theme, dark theme 빌드를 3번 진행했다면 이제는 global, light theme로 묶어서 빌드를 1번 진행하고, dark theme로 따로 한번 더 진행합니다. 스타일 시트를 확인해보면, global token 영역에 공통 semantic token도 포함되어 있는 걸 확인하실 수 있습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1769 - https://github.com/tokens-studio/sd-transforms/tree/main : composite token transformer 구현 참고
sungik-choi
pushed a commit
that referenced
this pull request
Dec 12, 2023
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to alpha, this PR will be updated.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ `alpha` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `alpha`.⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ # Releases ## @channel.io/bezier-codemod@0.5.0-alpha.0 ### Minor Changes - Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. ([#1781](#1781)) by @yangwooseong They cover theme, transition, elevation, rounding, and border of foundation. ## @channel.io/bezier-react@2.0.0-alpha.2 ### Minor Changes - Implement multi theme feature based on data attributes. ([#1756](#1756)) by @sungik-choi ## @channel.io/bezier-tokens@0.1.0-alpha.2 ### Minor Changes - Add composition tokens, such as box-shadow. ([#1769](#1769)) by @sungik-choi - Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. ([#1769](#1769)) by @sungik-choi - Add z-index and opacity tokens. ([#1766](#1766)) by @sungik-choi - Add categories by token to the JavaScript build file. ([#1766](#1766)) by @sungik-choi ### Patch Changes - Remove duplicate styles in styles.css ([#1779](#1779)) by @sungik-choi ## bezier-figma-plugin@0.4.11-alpha.1 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@2.0.0-alpha.2 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
sungik-choi
pushed a commit
that referenced
this pull request
Mar 26, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/bezier-react@2.0.0 ### Major Changes - **Breaking Changes: Property updates in `Avatar` component** ([#1871](#1871)) by @yangwooseong No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking changes: Remove TagBadge-related types** ([#2114](#2114)) by @sungik-choi - Remove `color` prop of `TagProps` and `TagBadgeBgColorPreset`. - Remove `TagBadgeSize`. Please change it to `TagSize` and `BadgeSize`. - Remove `TagBadgeVariant`. Please change it to `TagVariant` and `BadgeVariant`. - **Breaking Changes: Property updates in `SegmentedControl` component** ([#1866](#1866)) by @sungik-choi No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `ListItem` component** ([#1925](#1925)) by @sungik-choi - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `iconStyle`, `iconClassName`, `iconInterpolation`, `contentStyle`, `contentClassName` and `contentInterpolation`. This decision was made to reduce excessive flexibility in the interface. - No longer support `leftIcon` property. Removed for consistency with other component interfaces. Replace it to `leftContent`. - No longer support `name` property. The second argument (name) of `onClick` is also removed. If you need an identifier, combine functions outside of the component. - No longer support `hide`, `nested`, `optionKey` and `disableIconActive` property. Removed because it is a legacy property. Replace `hide` property with conditional rendering. - The size changes according to the `ListItemSize`. This is a change to unify the design. Please change it like below. - `ListItemSize.S` -> `ListItemSize.XS` - `ListItemSize.M` -> `ListItemSize.S` - `ListItemSize.L` -> `ListItemSize.M` - `ListItemSize.XL` -> `ListItemSize.L` **Minor Changes:** - Fix incorrect text size for `XL`(now `L`) size. - **Breaking Changes: Property updates in `Overlay` component** ([#1949](#1949)) by @sungik-choi - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `containerInterpolation` property. Replace any usage of `containerInterpolation` property with appropriate `containerStyle` or `containerClassName` implementations. - No longer support `wrapperTestId` property. - **Breaking Changes: Remove `TooltipProvider` and Property updates in `Tooltip` component** ([#1974](#1974)) by @sungik-choi - No longer support `TooltipProvider` and `TooltipProviderProps`. `Tooltip` component was implemented via radix-ui's Tooltip, which required the use of a `TooltipProvider`, which caused all subcomponents to be re-rendered and caused a performance hit. We decided that the ability to share hover delay time between `Tooltip` components via `TooltipProvider` was not a feature we needed, even with the performance penalty. Also, by providing `TooltipProvider` built-in to `AppProvider`, we were unnecessarily importing modules from our library usage that didn't require `Tooltip`. - `Tooltip` component now contains a `TooltipProvider` inside it. **Minor Changes:** - Change the default value of `delayShow` prop from `300` to `0`. - **Breaking Changes: Property updates in `Tag` and `Badge` component** ([#1872](#1872)) by @yangwooseong No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `CheckableAvatar` component** ([#1921](#1921)) by @sungik-choi No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: `AlphaSmoothCornersBox` component is now `SmoothCornersBox` component.** ([#2079](#2079)) by @sungik-choi - **Breaking Changes: Property updates in `LegacyTooltip` component** ([#1945](#1945)) by @sungik-choi - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `contentInterpolation` property. Replace any usage of `contentInterpolation` property with appropriate `contentStyle` or `contentClassName` implementations. - No longer support `contentWrapperInterpolation` property. Replace any usage of `contentWrapperInterpolation` property with appropriate `contentWrapperStyle` or `contentWrapperClassName` implementations. - **Breaking Changes: `AlphaCenter` component is now `Center` component. Property updates in `Center` component** ([#1854](#1854)) by @sungik-choi - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - Now supports margin props, layout props and `display` prop. - **Breaking Changes: Property updates in `FormLabel`, `FormHelperText`, and `FormErrorMessage` component** ([#1893](#1893)) by @yangwooseong No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `NavGroup` and `NavItem` component** ([#1931](#1931)) by @sungik-choi `leftIcon` renamed to `leftContent`. Changed to improve consistency of interface property names across libraries. - **Breaking Changes: The enum type that the component receives as props is changed to a string (or number) literal type** ([#2059](#2059)) by @yangwooseong The properties that change are: - `AvatarGroupEllipsisType` - `IconSize` - `LegacyTooltipPosition` - `ModalTitleSize` - `OverlayPosition` - `ProgressBarSize`, `ProgressBarVariant` - `SpinnerSize` - `SwitchSize` - `TagBadgeSize`, `TagBadgeVariant` - `TextAreaHeight` - `TextFieldSize`, `TextFieldVariant` - `ToastPlacement`, `ToastAppearance`, `ToastPreset` - `TooltipPosition` Also, `SpinnerThickness` props of `Spinner` is not supported any more. When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16`, and `IconSize.normal` is converted to `m` for consistency - **Breaking Changes: Property updates in `FormControl`, `Select`, and `TextField` component** ([#1948](#1948)) by @yangwooseong - `FormControl` component no longer supports `leftLabelWrapperHeight` props. - `FormControl` component now supports `size` props, which is passed as context to the child component such as `TextField` and `Select` and specified as the size property. - The size property of `Select` and `TextField` component changes from enum to string literal union type. Also, `SelectSize` and `TextFieldSize` enum are deprecated. - **Breaking changes: Remove `testId` and related properties** ([#1971](#1971)) by @sungik-choi No longer supports `testId` and related properties(e.g. `wrapperTestId`). `testId` is a property used internally by the library for testing with testing-library (`getByTestId`). We don't see a need to expose this as a public API, so we remove it. If you were using it, please replace it with the `data-testid` property. See <https://testing-library.com/docs/queries/bytestid/>. - **Breaking Changes: Property updates in `FormControl` component** ([#1935](#1935)) by @yangwooseong No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `Select` component** ([#1913](#1913)) by @sungik-choi - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `dropdownInterpolation` property. Replace any usage of `dropdownInterpolation` property with appropriate `dropdownStyle` or `dropdownClassName` implementations. - The type of `zIndex` property is changed to a z-index token. (e.g. `"modal"`) - **Breaking Changes: Reorganizing `SectionLabel` component** ([#1936](#1936)) by @sungik-choi `SectionLabel` is a complex component that can be used both in the form of an accordion and as a simple heading. To better meet the needs of both, we've changed the internal implementation of the component. We've also made changes to make styling overrides as predictable as they are for other components. The style override property, which was unnecessarily open, is now removed. - Remove the internal div wrapper. `style`, `className` properties are now injected into the component instead of the old `wrapperStyle`, `wrapperClassName`. - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support additional style properties of `wrapper`, `contentWrapper`, `leftWrapper` and `rightWrapper`. - No longer support `divider` property. Replace it by adding `Divider` component to the component's before. - The side content property is changed. It is no longer possible to override `iconColor`. - When injecting `onClick` handler, the root element now behaves as a `button` element. This change is to better support keyboard focus control. - **Breaking Changes: Property updates in `Emoji` component** ([#1881](#1881)) by @yangwooseong No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `Radio` component** ([#1923](#1923)) by @sungik-choi No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Deprecated modules for internal use** ([#1963](#1963)) by @sungik-choi - No longer provides `useEventHandler` and `useMergeRefs` hook. - No longer provides `useId` hook. Use `useId` hook of `react` instead. - No longer provides `getRootElement` hook. Use `useWindow` hook instead. - No longer provides `StyleUtils` and `StringUtils` utils. - **Breaking Changes: Property updates in `ProgressBar` component** ([#1947](#1947)) by @sungik-choi - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `activeStyle`, `activeClassName` and `activeInterpolation` property. - No longer support `activeTestId` property. - **Breaking Changes: Property updates in `Tabs`-related components** ([#1960](#1960)) by @sungik-choi No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `Text` component** ([#1820](#1820)) by @sungik-choi `typo` prop in the `Text` component has been changed to accept only string literals in order to simplify the API and improve the predictability of text styling, particularly in the context of the removal of `styled-components` from `bezier-react`, which has led to the unavailability of CSS Interpolation. **Migration Instructions:** Use [`v2-text-component-interface`](https://github.com/channel-io/bezier-react/tree/alpha/packages/bezier-codemod#change-interface-of-text) transformer from `bezier-codemod` for automated migration. - **Breaking Changes: Reorganizing `KeyValueListItem` component** ([#1941](#1941)) by @sungik-choi - **Renamed to `KeyValueItem`.** - - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `valueWrapperStyle`, `valueWrapperClassName`, `valueWrapperInterpolation`, `keyWrapperStyle`, `keyWrapperClassName` and `keyWrapperInterpolation`. This decision was made to reduce excessive flexibility in the interface. - No longer support `AdditionalColorProps` and `show` property of ItemAction. - The icon inside ItemAction is now implemented through `Button` component. - The Value Container will now always have 100% of the parent's width. - Add new margin properties to `Icon` component ([#1863](#1863)) by @yangwooseong - `margin` - `marginHorizontal` - `marginVertical` - **Breaking Changes: Property updates in `NavItem` and `NavGroup` component** ([#1905](#1905)) by @yangwooseong No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: The enum type that the component receives as props is changed to a string literal type** ([#2059](#2059)) by @yangwooseong The properties that change are: - `AvatarSize` - `BannerVariant` - `ButtonColorVariant`, `ButtonStyleVariant`, `ButtonSize` - `EmojiSize` - `SegmentedControlSize` - `TabSize` - `ListItemVariant`, `ListItemSize` - `StatusType`, `StatusSize` When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `ButtonStyleVariant.MonoChromeDark` -> `monochrome-dark`, `StatusType.OnlineCrescent` -> `online-crescent` - **Breaking Changes: Property updates in `Modal`-related components** ([#1903](#1903)) by @sungik-choi - No longer supports `as` and `interpolation` props. - The type of `zIndex` property is changed to a z-index token. (e.g. `"modal"`) - **Breaking Change: Removal of `LegacySegmentedControl` Component** ([#1786](#1786)) by @sungik-choi We have removed the `LegacySegmentedControl` component from our library. This change follows its deprecation in `next-v1.204`. **Reasons for Removal:** - To enhance web accessibility and improve keyboard navigation. - To align with our goals of design modernization and consistent user experience. **Impact:** `LegacySegmentedControl` component is no longer available and cannot be used in your projects. Replace all instances of `LegacySegmentedControl` with `SegmentedControl` component. - **Breaking Changes: Property updates in `LegacyStack` components** ([#1944](#1944)) by @sungik-choi - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer export `AxisAlignment` type. - **Breaking Changes: Property updates in `TextField` component** ([#1904](#1904)) by @sungik-choi - No longer support `interpolation`-related properties. Replace any usage of `interpolation` -related properties with appropriate `***style` or `***className` implementations. - No longer support `inputStyle` and `inputClassName` properties. Replace any usage of `inputStyle` and `inputClassName` with appropriate `style` or `className` implementations. - Change the value of `TextFieldVariant` enum value to string. - **Breaking Changes: Remove the default offset(`GNB_WIDTH`) in `Toast`** ([#2117](#2117)) by @sungik-choi Remove the style because it was dependent on a specific application. Use `{ left: 68 }` instead. - **Breaking Changes: Property updates in `Banner` component** ([#1891](#1891)) by @sungik-choi No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. **Other changes in `Banner` component** - now supports HTML attributes. - now supports style props. - **Breaking Change: Removal of `LegacyRadio` Component** ([#1943](#1943)) by @sungik-choi - `LegacyRadio` component has been removed from the library. Please use `RadioGroup` and `Radio` component instead. - Now if `Radio` has no label, its size is reduced by an indicator. - **Breaking Changes: Property updates in `Checkbox` component** ([#1918](#1918)) by @sungik-choi No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - **Breaking Changes: Property updates in `Switch` component** ([#1885](#1885)) by @yangwooseong No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - Export the css style sheet for the new design system. ([#1492](#1492)) by @sungik-choi - **Breaking Changes: Reorganizing `OutlineItem` component** ([#1930](#1930)) by @sungik-choi `OutlineItem` component was originally designed as a component to draw a tree-like view, _but it was not used as intended in production_. We simplified the component's responsibilities by removing unused properties while retaining the component's ability to apply indentation to subcomponents. - No longer support `paddingLeft` property. **By default, 6px of left padding has been added.** If you need to make changes, override the style. - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `iconStyle`, `iconClassName`, `iconInterpolation`, `contentStyle`, `contentClassName` and `contentInterpolation`. This decision was made to reduce excessive flexibility in the interface. - No longer support `leftIcon` property. Removed for consistency with other component interfaces. Replace it to `leftContent`. - No longer support `leftIconColor` and `leftIconTestId` property. - No longer support `name` property. The second argument (name) of `onClick` is also removed. If you need an identifier, combine functions outside of the component. - No longer support `hide`, `optionKey` and `disableIconActive` property. Replace `hide` property with conditional rendering. - No longer support `onOpen`, `onClickArrow`, `selectedOutlineItemIndex` and `onChangeOption` property. - **Breaking Changes: Property updates in `Slider` component** ([#1883](#1883)) by @yangwooseong - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - `dir` type is narrowed from `string | undefined` to `ltr | rtl | undefined` - **Breaking Changes: Property updates in `Button` component** ([#1882](#1882)) by @sungik-choi - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - `ButtonSize` and `ButtonColorVariant` enums have been updated to use kebab case. - **Breaking Change: No longer supports `smoothCorners` mixin. Use `AlphaSmoothCornersBox` components instead.** ([#1892](#1892)) by @sungik-choi ```tsx // Before const Box = styled.div` ${smoothCorners({ borderRadius: 10, shadow: '0 5px 15px 0 var(--shdw-large)', shadowBlur: 15, backgroundColor: 'var(--bgtxt-absolute-white-dark)', hasBackgroundImage: true, })} ` <Box>...</Box> // After <AlphaSmoothCornersBox borderRadius={10} shadow={{ offsetX: 0, offsetY: 5, blurRadius: 15, spreadRadius: 0, color: 'shdw-large', }} backgroundColor="bgtxt-absolute-white-dark" backgroundImage="..." >...</AlphaSmoothCornersBox> ``` - **Breaking Changes: `Toast`-related modules** ([#1950](#1950)) by @sungik-choi - No longer support `actionContent` and `onClick` properties in `ToastOptions`. - Value type of `zIndex` property in `ToastOptions` is changed from `number` to `ZIndex` token. - No longer export `ToastIconColor` enum. - **Breaking Changes: Property updates in `TextArea` component** ([#1914](#1914)) by @sungik-choi - No longer support `as` and `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `wrapperStyle`, `wrapperClassName` and `wrapperInterpolation` property. It was never properly implemented before, and the Wrapper element inside was also removed. - **Breaking Changes: Deprecate support for `styled-components` related modules** ([#1962](#1962)) by @sungik-choi - No longer support legacy foundation modules. Use the `useToken` hook and components to replace it - `LightFoundation` and `DarkFoundation` - `Spacing` - `ev1`, `ev2`, `ev3`, `ev4`, `ev5` and `ev6` - `createThemes`, `Theme`, `SemanticNames`, `LightTheme` and `DarkTheme` - `TransitionDuration` and `Transition` - `Border` - `Typography`, `TypoAbsoluteNumber`, `LineHeightAbsoluteNumber` and `TypographyType` - `absoluteCenter`, `disableAutoMinimum`, `hideScrollbars` and `ellipsis` - `ThemeVarsAdditionalType` and `ThemeVars` - `GlobalStyle` - `Foundation` - `GlobalStyleProp` - `createGlobalStyle`, `styled`, `css`, `FoundationProvider`, `useFoundation`, `keyframes`, `StyleSheetManager` and `ServerStyleSheet` - No longer support `BezierProvider`. Use the `AppProvider` instead - No longer support `gap` and `touchableHover` mixins. Please implement and use your own ```tsx function gap(spacing: number): InjectedInterpolation { return css` gap: ${spacing}px; @supports not (gap: ${spacing}px) { margin-top: ${-spacing}px; margin-left: ${-spacing}px; > * { margin-top: ${spacing}px; margin-left: ${spacing}px; } } `; } function touchableHover( interpolation: InjectedInterpolation, ): InjectedInterpolation { return css` @media (hover: hover) { &:hover { ${interpolation} } } @media (hover: none) { &:active { ${interpolation} } } `; } ``` - No longer support `inputTextStyle`, `inputPlaceholderStyle`, `inputWrapperStyle`, `focusedInputWrapperStyle` and `erroredInputWrapperStyle`. Please migrate using `@channel.io/bezier-codemod`'s `v2-interpolation-to-css-variable` transformer. - **Breaking Changes: `AlphaStack` component has been changed to a `Stack` component, and `Stack` component has been changed to `LegacyStack` component.** ([#1837](#1837)) by @sungik-choi Changes to remove the dependency of `Stack` and `StackItem` to allow stack layouts to be configured without additional DOM elements. And improved the existing `AlphaStack` to support more Flex layout related properties like reverse, wrap, and more align options, etc. See StackProps for more information. We also added new `HStack` and `VStack` components, which are shorthand components that fix the direction prop of `AlphaStack`. As mentioned above, the existing components become `LegacyHStack`, `LegacyVStack`. The layout implemented by `StackItem` can be partially replaced by the Layout component's `grow`, `shrink` common properties and margin common properties. Note that the `align`, `justify` (align-self, justify-self in CSS flex) properties provided by `StackItem` are not provided by the Layout component. ```jsx /* AS-IS */ return ( <Stack direction="horizontal" spacing={8} style={{ width: 300, height: 50 }} > <StackItem grow shrink weight={1} /> <StackItem weight={0} size={10} marginBefore={20}> <Stack direction="vertical" /> </StackItem> </Stack> ); /* TO-BE */ return ( <Stack direction="horizontal" spacing={8} width={300} height={50}> <Box grow={1} shrink={1} /> <Stack direction="vertical" shrink={0} width={10} ml={12} /> </Stack> ); ``` The changes also apply to other components that use `Stack` internally, and there are a few breaking changes. - `RadioGroup`, `ButtonGroup`, `FormGroup` no longer support `as` prop. - **Breaking Change: Removal of `ListMenuTitle` Component** ([#1900](#1900)) by @yangwooseong - It was no longer being managed or utilized by our designers. - If you are currently using `ListMenuTitle` in your application, please replace it with the `SectionLabel` component for similar functionality. ### Minor Changes - Implement multi theme feature based on data attributes ([#1756](#1756)) by @sungik-choi - Move `@channel.io/bezier-tokens` from dev depdency to dependency ([#1985](#1985)) by @sungik-choi - Add the `TooltipPrimitive` component, which is the same as the [`Tooltip` component in radix-ui](https://www.radix-ui.com/primitives/docs/components/tooltip). You can use it by importing it from the `/alpha` path. ([#2049](#2049)) by @sungik-choi ```tsx import { TooltipPrimitive, TooltipPrimitiveArrow, TooltipPrimitiveContent, TooltipPrimitivePortal, TooltipPrimitiveProvider, TooltipPrimitiveTrigger, } from "@channel.io/bezier-react/alpha"; ``` - When you pass a value of number type to the dimension-related properties of margin prop and layout prop, they implicitly add px units as a suffix. See: <https://react.dev/reference/react-dom/components/common#common> ([#1823](#1823)) by @sungik-choi - Add `Box` component. `Box` component is responsible for the primitive layout and provides easy access to the design tokens in the design system ([#1785](#1785)) by @sungik-choi ```tsx <Box width="100px" height="100px" p="6px" m="6px" bgColor="bg-black-light" /> ``` - Fixes style inheritance issues by explicitly giving CSS custom properties an initial value ([#1846](#1846)) by @sungik-choi - Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector ([#1495](#1495)) by @sungik-choi - Add the `DialogPrimitive` component, which is the same as the [`Dialog` component in radix-ui](https://www.radix-ui.com/primitives/docs/components/dialog). You can use it by importing it from the `/alpha` path. ([#2049](#2049)) by @sungik-choi ```tsx import { DialogPrimitive, DialogPrimitiveClose, DialogPrimitiveContent, DialogPrimitiveDescription, DialogPrimitiveOverlay, DialogPrimitivePortal, DialogPrimitiveTitle, DialogPrimitiveTrigger, } from "@channel.io/bezier-react/alpha"; ``` - `ButtonGroup` now supports HTML attributes ([#1890](#1890)) by @sungik-choi - `Banner` will now render content even if the `content` prop is not a string. The same applies to link-related props. ([#1972](#1972)) by @sungik-choi - Rename `AlphaAppProvider` to `AppProvider` ([#1834](#1834)) by @sungik-choi - Rename the `style.css` file to `styles.css` ([#1791](#1791)) by @sungik-choi - Add `align` prop to `Text` component. This prop is used to set horizontal alignment of text ([#1820](#1820)) by @sungik-choi ```tsx <Text align="left" /> <Text align="center" /> <Text align="right" /> ``` - Remove `borderStyle` prop from Layout props ([#1848](#1848)) by @sungik-choi - Add `useRootElement` hook. It is only available to `WindowProvider` children, and provides easy access to the root element of window context value. ([#1981](#1981)) by @sungik-choi ```tsx const { window, document, rootElement } = useWindow(); // Same as useWindow().rootElement const rootElement = useRootElement(); ``` ### Patch Changes - Fixes an issue with color inheritance across components. ([#2009](#2009)) by @sungik-choi - Add missing default margin styles of `LegacyStackItem` ([#2004](#2004)) by @sungik-choi - Fixes issue with `ModalBody`, `ModalFooter` not applying styling correctly when wrapped in other elements. ([#2017](#2017)) by @sungik-choi - Add `overflow: hidden` to `ListItem` component ([#2013](#2013)) by @yangwooseong - Fix invalid `aria-modal` value in Modal Content. ([#2052](#2052)) by @sungik-choi - Fix `TabAction` typography style for size M. ([#2035](#2035)) by @sungik-choi - Minify the CSS output ([#1791](#1791)) by @sungik-choi - Update background color of `TextField`'s secondary variant. ([#2016](#2016)) by @sungik-choi - Mute the error of `smoothCornerScript` when called twice. ([#2010](#2010)) by @chaejunlee - Now exports the `tokens` object from `@channel.io/bezier-tokens`. ([#1992](#1992)) by @sungik-choi - Adds icon and typo size for avatar size `"72"`, which were missing from `AvatarGroup`. ([#2071](#2071)) by @sungik-choi - Add missing `overflow: hidden` style to item wrapper of `KeyValueItem` component. ([#2036](#2036)) by @sungik-choi - Fixes `Overlay` not closing in other windows. ([#2037](#2037)) by @sungik-choi - Fixes a bug where onHide is called when clicking inside the overlay, causing the overlay to close. ([#1977](#1977)) by @yangwooseong - Fix invalid style migrations of `Tabs` component. ([#2014](#2014)) by @sungik-choi - Add missing spreading props to `ThemeProvider` and related components. ([#1986](#1986)) by @sungik-choi - Fix `ListItem`'s left icon color specificity issue. ([#2018](#2018)) by @sungik-choi - Fix `Badge` component style issue ([#2068](#2068)) by @yangwooseong - Fixes an issue where multi line truncated in `Text` was not being applied. ([#1994](#1994)) by @sungik-choi - Updated dependencies - @channel.io/bezier-tokens@0.1.0 ## @channel.io/bezier-codemod@0.5.0 ### Minor Changes - Changes in `v2-text-component-interface` codemod ([#1932](#1932)) by @yangwooseong Previously, both the component name and the name of the property were checked, but now only the name of the component property is checked. - Add codemod for Stack component ([#1836](#1836)) by @yangwooseong - Add more various cases to `v2-enum-member-to-string-literal` ([#2059](#2059)) by @yangwooseong - Fix typo in `v2-z-index-interpolation-to-css-variable` codemod. It now transforms `${ZIndex.Float}` enum to `var(--z-index-floating)`, not `var(--z-index-float)`. ([#1924](#1924)) by @yangwooseong - Add codemod to transform interface of `Text` component ([#1849](#1849)) by @yangwooseong - Enhancement in `v2-foundation-to-css-variable-transition` codemod ([#1917](#1917)) by @yangwooseong - It will properly remove import statement if it converts code where `TransitionDuration` is used. - Changes in `v2-remove-alpha-from-alpha-stack` transform ([#1894](#1894)) by @yangwooseong - It is renamed as `v2-remove-alpha-from-alpha-components`. - It covers `AlphaCenter` as well. - Add `v2-foundation-to-css-variable-spacing` codemod to convert the foundation's spacing variable to pixels ([#1907](#1907)) by @yangwooseong This transforms ```tsx import { styled } from "@channel.io/bezier-react"; export const Wrapper = styled.div` padding: ${({ foundation }) => foundation?.spacing.s5}; `; ``` into ```tsx import { styled } from "@channel.io/bezier-react"; export const Wrapper = styled.div` padding: 12px; `; ``` - Changes in `v2-**-interpolation-to-css-variable` transform. ([#1928](#1928)) by @yangwooseong - it is renamed to `v2-interpolation-to-css-variable-**`. e.g. `v2-interpolation-to-css-varable-input`, `v2-interpolation-to-css-variable-typography`, and so on - it provides integrated transform named `v2-interpolation-to-css-variable` that handles all interpolation transform - Enhance `import-styled-from-styled-component` codemod to cover other APIs from `styled-components` ([#1852](#1852)) by @yangwooseong - Add `Typography` transform logic to interpolation codemod ([#1841](#1841)) by @yangwooseong - Add v2 prefix to codemods related to major version 2 ([#1844](#1844)) by @yangwooseong - Add codemod for z-index interpolation and enum ([#1845](#1845)) by @yangwooseong - Add more various cases to `v2-enum-member-to-string-literal`. Now it covers following enums. ([#2059](#2059)) by @yangwooseong - `AvatarGroupEllipsisType` - `IconSize` - `LegacyTooltipPosition` - `ModalTitleSize` - `OverlayPosition` - `ProgressBarSize`, `ProgressBarVariant` - `SpinnerSize` - `SwitchSize` - `TagBadgeSize`, `TagBadgeVariant` - `TextAreaHeight` - `TextFieldSize`, `TextFieldVariant` - `ToastPlacement`, `ToastAppearance`, `ToastPreset` - `TooltipPosition` - Add `inputPlaceholderStyle` migration logic to `v2-input-interpolation-to-css-variable` codemod ([#1926](#1926)) by @yangwooseong - Add transform functions to help to migrate foundation to css variable generated by `@channel.io/bezier-tokens` package. They cover theme, transition, elevation, rounding, and border of foundation ([#1781](#1781)) by @yangwooseong - Added a codemod to switch the library for importing 'styled' object from @channel.io/bezier-react to styled-components ([#1789](#1789)) by @yangwooseong - Add codemod for mixin interpolation ([#1787](#1787)) by @yangwooseong ### Patch Changes - Fix bug in `v2-import-from-bezier-to-styled-components` codemod when there are only named imports as following: ([#1987](#1987)) by @yangwooseong ```tsx // As-is import { css } from "@channel.io/bezier-react"; // To-be import { css } from "styled-components"; ``` - Fix `hasNamedImportInImportDeclaration` util to check all named imports ([#2060](#2060)) by @yangwooseong ## @channel.io/bezier-tokens@0.1.0 ### Minor Changes - Apply deep freeze to the `tokens` object. ([#1992](#1992)) by @sungik-choi - Add the missing `bg-header-float` semantic color token ([#1842](#1842)) by @sungik-choi - Add composition tokens, such as box-shadow ([#1769](#1769)) by @sungik-choi - Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to `@channel.io/bezier-tokens/css/styles.css`. ([#1769](#1769)) by @sungik-choi - Add z-index and opacity tokens ([#1766](#1766)) by @sungik-choi - Remove invalid radius tokens ([#1934](#1934)) by @sungik-choi - `radius-10` - `radius-14` - `radius-100-p` - Fix invalid letter spacing token values ([#1821](#1821)) by @sungik-choi - First release ([#1685](#1685)) by @sungik-choi - Add categories by token to the JavaScript build file ([#1766](#1766)) by @sungik-choi - Remove unused tokens and add missing unit to radius tokens ([#1752](#1752)) by @sungik-choi ### Patch Changes - Remove duplicate styles in styles.css ([#1779](#1779)) by @sungik-choi ## bezier-figma-plugin@0.5.0 ### Minor Changes - Upgrade to use @channel.io/bezier-react@2.0.0 ([#2001](#2001)) by @sungik-choi ### Patch Changes - Enhance icon extract logic by catching error ([#2073](#2073)) by @yangwooseong - Updated dependencies - @channel.io/bezier-react@2.0.0 ## @channel.io/bezier-vscode@0.1.0 ### Minor Changes - Create a package to support autocomplete for Bezier Design Tokens ([#2091](#2091)) by @yangwooseong Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Self Checklist
Summary
Details
기타
고민되는 점
input, elevation처럼 semantic(theme) token을 참조하는 경우, CSS 테마별로 토큰을 중복해서 가지고 있을 필요가 없습니다. 현재는 JS 빌드 시 각 테마 값을 참조하기 위해서 테마별로 빌드하고 있는데... 이를 어떻게 처리하면 좋을지 고민입니다. FYI. @yangwooseong
Breaking change? (Yes/No)
Yes
References