@channel.io/bezier-tokens 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/css/styles.css

@@ -0,0 +1,448 @@
+[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);
+}
+
+: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.4rem;
+  --font-letter-spacing-1: -0.1rem;
+  --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);
+  --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 0 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 0 var(--shdw-xlarge);
+  --ev-5: var(--ev-inner), var(--ev-base), 0 6px 40px 0 var(--shdw-xlarge);
+  --ev-4: var(--ev-inner), var(--ev-base), 0 4px 20px 0 var(--shdw-large);
+  --ev-3: var(--ev-inner), var(--ev-base), 0 4px 12px 0 var(--shdw-medium);
+  --ev-2: var(--ev-inner), var(--ev-base), 0 2px 6px 0 var(--shdw-small);
+  --ev-1: var(--ev-inner), var(--ev-base), 0 1px 2px 0 var(--shdw-small);
+}
+
+: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);
+}