@gluwa/connect-kit 0.2.0-next.1 → 0.2.0-next.3

package/src/style/color.scss

@@ -0,0 +1,417 @@
+.ck-root[data-theme="light"] {
+  --scale-gray-50: #F6F8FA;
+  --scale-gray-100: #EEF0F2;
+  --scale-gray-200: #E6E8EA;
+  --scale-gray-300: #DADCDD;
+  --scale-gray-400: #CED0D2;
+  --scale-gray-500: #AAACAE;
+  --scale-gray-600: #86888A;
+  --scale-gray-700: #4C4E50;
+  --scale-gray-800: #2C2E30;
+  --scale-gray-900: #0C0E10;
+  --scale-gray-00: #FFFFFF;
+  --scale-blue1-50: #AFCFFF;
+  --scale-blue1-100: #8EBCFF;
+  --scale-blue1-200: #6DA8FF;
+  --scale-blue1-300: #4C95FF;
+  --scale-blue1-400: #1473FF;
+  --scale-blue1-500: #1267E6;
+  --scale-blue1-600: #0F57C2;
+  --scale-blue1-700: #0C4599;
+  --scale-blue1-800: #093370;
+  --scale-blue1-900: #06234D;
+  --scale-blue1-00: #C7DDFF;
+  --scale-blue2-50: #A9C4FF;
+  --scale-blue2-100: #85ACFF;
+  --scale-blue2-200: #6194FF;
+  --scale-blue2-300: #3E7CFF;
+  --scale-blue2-400: #0152FF;
+  --scale-blue2-500: #014AE6;
+  --scale-blue2-600: #013EC2;
+  --scale-blue2-700: #013199;
+  --scale-blue2-800: #002470;
+  --scale-blue2-900: #00194D;
+  --scale-blue2-00: #C2D5FF;
+  --scale-green-50: #B0ECDA;
+  --scale-green-100: #90E4CB;
+  --scale-green-200: #70DCBB;
+  --scale-green-300: #4FD4AC;
+  --scale-green-400: #18C792;
+  --scale-green-500: #16B383;
+  --scale-green-600: #12976F;
+  --scale-green-700: #0E7758;
+  --scale-green-800: #0B5840;
+  --scale-green-900: #073C2C;
+  --scale-green-00: #C8F2E5;
+  --scale-purple-50: #C0CBFC;
+  --scale-purple-100: #A7B6FA;
+  --scale-purple-200: #8DA1F9;
+  --scale-purple-300: #738BF7;
+  --scale-purple-400: #4767F5;
+  --scale-purple-500: #405DDC;
+  --scale-purple-600: #364EBA;
+  --scale-purple-700: #2B3E93;
+  --scale-purple-800: #1F2D6C;
+  --scale-purple-900: #151F4A;
+  --scale-purple-00: #D3DAFD;
+  --scale-yellow-50: #FAE7A8;
+  --scale-yellow-100: #F8DD84;
+  --scale-yellow-200: #F6D361;
+  --scale-yellow-300: #F4C93D;
+  --scale-yellow-400: #F0B800;
+  --scale-yellow-500: #D8A600;
+  --scale-yellow-600: #B68C00;
+  --scale-yellow-700: #906E00;
+  --scale-yellow-800: #6A5100;
+  --scale-yellow-900: #483700;
+  --scale-yellow-00: #FBEEC2;
+  --scale-red-50: #F8BFBF;
+  --scale-red-100: #F5A4A4;
+  --scale-red-200: #F38A8A;
+  --scale-red-300: #F06F6F;
+  --scale-red-400: #EB4242;
+  --scale-red-500: #D43B3B;
+  --scale-red-600: #B33232;
+  --scale-red-700: #8D2828;
+  --scale-red-800: #681D1D;
+  --scale-red-900: #471414;
+  --scale-red-00: #FAD2D2;
+  --scale-gray-alpha-30: #FFFFFF08;
+  --scale-gray-alpha-50: #FFFFFF0D;
+  --scale-gray-alpha-100: #FFFFFF1A;
+  --scale-gray-alpha-200: #FFFFFF33;
+  --scale-gray-alpha-500: #FFFFFF80;
+  --scale-blue1-alpha-30: #1473FF0A;
+  --scale-blue1-alpha-50: #1473FF14;
+  --scale-blue1-alpha-100: #1473FF24;
+  --scale-blue1-alpha-200: #1473FF33;
+  --scale-blue1-alpha-500: #1473FF80;
+  --scale-blue2-alpha-30: #0152FF0A;
+  --scale-blue2-alpha-50: #0152FF14;
+  --scale-blue2-alpha-100: #0152FF24;
+  --scale-blue2-alpha-200: #0152FF33;
+  --scale-blue2-alpha-500: #0152FF80;
+  --scale-green-alpha-30: #18C7920A;
+  --scale-green-alpha-50: #18C79214;
+  --scale-green-alpha-100: #18C79224;
+  --scale-green-alpha-200: #18C7924D;
+  --scale-green-alpha-500: #18C79299;
+  --scale-purple-alpha-30: #4767F50A;
+  --scale-purple-alpha-50: #4767F514;
+  --scale-purple-alpha-100: #4767F524;
+  --scale-purple-alpha-200: #4767F533;
+  --scale-purple-alpha-500: #4767F580;
+  --scale-yellow-alpha-30: #F0B8000A;
+  --scale-yellow-alpha-50: #F0B80014;
+  --scale-yellow-alpha-100: #F0B80024;
+  --scale-yellow-alpha-200: #F0B80033;
+  --scale-yellow-alpha-500: #F0B80080;
+  --scale-red-alpha-30: #EB42420A;
+  --scale-red-alpha-50: #EB424214;
+  --scale-red-alpha-100: #EB424224;
+  --scale-red-alpha-200: #EB424233;
+  --scale-red-alpha-500: #EB424280;
+  --scale-white-alpha-30: #00000008;
+  --scale-white-alpha-50: #0000000D;
+  --scale-white-alpha-100: #0000001A;
+  --scale-white-alpha-200: #00000033;
+  --scale-white-alpha-500: #00000080;
+  --scale-gray-semantic-50: #FFFFFF;
+  --scale-gray-semantic-100: #F6F8FA;
+  --scale-gray-semantic-00: #F6F8FA;
+  --semantic-brand-trugi-primary-legacy: #2848FEFF;
+  --static-black-alpha-100: #0000001A;
+  --static-black-alpha-200: #00000033;
+  --static-black-alpha-30: #00000008;
+  --static-black-alpha-50: #0000000D;
+  --static-black-alpha-500: #00000080;
+  --static-black-alpha-800: #000000CC;
+  --static-black-main: #000000FF;
+  --static-white-alpha-100: #FFFFFF1A;
+  --static-white-alpha-200: #FFFFFF33;
+  --static-white-alpha-30: #FFFFFF08;
+  --static-white-alpha-50: #FFFFFF0D;
+  --static-white-alpha-500: #FFFFFF80;
+  --static-white-alpha-800: #FFFFFFCC;
+  --static-white-main: #FFFFFFFF;
+  --static-color-blue1-400: #1473FFFF;
+  --static-color-blue1-700: #ACD2FFFF;
+  --static-color-blue2-400: #0152FFFF;
+  --static-color-blue2-700: #85ACFFFF;
+  --static-color-gluwa-lightblue: #67CEFFFF;
+  --static-color-gluwa-navy: #292751FF;
+  --static-color-gray-00: #0C0E10FF;
+  --static-color-gray-200: #36383AFF;
+  --static-color-gray-alpha-100: #0C0E101A;
+  --static-color-gray-alpha-200: #0C0E1033;
+  --static-color-gray-alpha-500: #0C0E1080;
+  --static-color-gray-alpha-700: #0C0E10B2;
+  --static-color-green-400: #1EEEAFFF;
+  --static-color-green-700: #93F7D9FF;
+  --static-color-purple-400: #4A6BFFFF;
+  --static-color-purple-700: #A8B8FFFF;
+  --static-color-red-400: #FF4848FF;
+  --static-color-red-700: #FFA7A7FF;
+  --static-color-trugi-blue-200-legacy: #D9E8F9FF;
+  --static-color-trugi-blue-300-legacy: #C0DAF8FF;
+  --static-color-trugi-blue-700-legacy: #132DBBFF;
+  --static-color-trugi-blue-alpha: #2848FE24;
+  --static-color-trugi-green: #4EE28CFF;
+  --static-color-trugi-orange: #FF8A4BFF;
+  --static-color-trugi-pink: #FF6CBFFF;
+  --static-color-trugi-purple: #B5AAFFFF;
+  --static-color-yellow-400: #FFC400FF;
+  --static-color-yellow-700: #FFE384FF;
+  --semantic-paper-contents: var(--scale-gray-50);
+  --semantic-paper-default: var(--scale-gray-00);
+  --semantic-paper-dialog: var(--scale-gray-semantic-50);
+  --semantic-paper-neutral: var(--scale-gray-semantic-00);
+  --semantic-paper-sheet: var(--scale-gray-semantic-50);
+  --semantic-divider-divider-1: var(--scale-white-alpha-50);
+  --semantic-divider-divider-2: var(--scale-gray-100);
+  --semantic-divider-divider-3: var(--scale-white-alpha-100);
+  --semantic-divider-divider-4: var(--scale-white-alpha-200);
+  --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
+  --semantic-overlay-overlay-low: var(--static-black-alpha-200);
+  --semantic-brand-credit-primary: var(--scale-green-400);
+  --semantic-brand-credit-primary-hover: var(--scale-green-600);
+  --semantic-brand-credit-primary-low: var(--scale-green-alpha-50);
+  --semantic-brand-credit-primary-low-hover: var(--scale-green-alpha-100);
+  --semantic-brand-credit-primary-low-pressed: var(--scale-green-alpha-100);
+  --semantic-brand-credit-primary-pressed: var(--scale-green-600);
+  --semantic-brand-gluwa-primary: var(--scale-blue1-400);
+  --semantic-brand-gluwa-primary-hover: var(--scale-blue1-600);
+  --semantic-brand-gluwa-primary-low: var(--scale-blue1-alpha-50);
+  --semantic-brand-gluwa-primary-low-hover: var(--scale-blue1-alpha-100);
+  --semantic-brand-gluwa-primary-low-pressed: var(--scale-blue1-alpha-100);
+  --semantic-brand-gluwa-primary-pressed: var(--scale-blue1-600);
+  --semantic-brand-space-primary: var(--scale-purple-400);
+  --semantic-brand-space-primary-hover: var(--scale-purple-600);
+  --semantic-brand-space-primary-low: var(--scale-purple-alpha-50);
+  --semantic-brand-space-primary-low-hover: var(--scale-purple-alpha-100);
+  --semantic-brand-space-primary-low-pressed: var(--scale-purple-alpha-100);
+  --semantic-brand-space-primary-pressed: var(--scale-purple-600);
+  --semantic-brand-trugi-primary: var(--scale-blue2-400);
+  --semantic-brand-trugi-primary-hover: var(--scale-blue2-600);
+  --semantic-brand-trugi-primary-low: var(--scale-blue2-alpha-50);
+  --semantic-brand-trugi-primary-low-hover: var(--scale-blue2-alpha-100);
+  --semantic-brand-trugi-primary-low-pressed: var(--scale-blue2-alpha-100);
+  --semantic-brand-trugi-primary-pressed: var(--scale-blue2-600);
+  --semantic-information-caution: var(--scale-yellow-400);
+  --semantic-information-caution-low: var(--scale-yellow-alpha-50);
+  --semantic-information-error: var(--scale-red-400);
+  --semantic-information-error-low: var(--scale-red-alpha-50);
+  --semantic-information-info: var(--scale-blue1-400);
+  --semantic-information-info-low: var(--scale-blue1-alpha-50);
+  --semantic-information-success: var(--scale-green-400);
+  --semantic-information-success-low: var(--scale-green-alpha-50);
+};
+
+.ck-root[data-theme="dark"] {
+  --scale-gray-50: #1A1C1E;
+  --scale-gray-100: #282A2C;
+  --scale-gray-200: #36383A;
+  --scale-gray-300: #444648;
+  --scale-gray-400: #525456;
+  --scale-gray-500: #66686A;
+  --scale-gray-600: #888A8C;
+  --scale-gray-700: #AAACAE;
+  --scale-gray-800: #CCCED0;
+  --scale-gray-900: #FFFFFF;
+  --scale-gray-00: #0C0E10;
+  --scale-blue1-50: #0C4599;
+  --scale-blue1-100: #0E51B3;
+  --scale-blue1-200: #105CCC;
+  --scale-blue1-300: #1267E6;
+  --scale-blue1-400: #1473FF;
+  --scale-blue1-500: #4C95FF;
+  --scale-blue1-600: #6DA8FF;
+  --scale-blue1-700: #8ECBFF;
+  --scale-blue1-800: #AFCFFF;
+  --scale-blue1-900: #C7DDFF;
+  --scale-blue1-00: #0A3980;
+  --scale-blue2-50: #1F4699;
+  --scale-blue2-100: #2451B3;
+  --scale-blue2-200: #295DCC;
+  --scale-blue2-300: #2E68E6;
+  --scale-blue2-400: #3374FF;
+  --scale-blue2-500: #6495FF;
+  --scale-blue2-600: #80A9FF;
+  --scale-blue2-700: #9DBCFF;
+  --scale-blue2-800: #BAD0FF;
+  --scale-blue2-900: #CEDEFF;
+  --scale-blue2-00: #1A3A80;
+  --scale-green-50: #128F69;
+  --scale-green-100: #15A77B;
+  --scale-green-200: #18BE8C;
+  --scale-green-300: #1BD69E;
+  --scale-green-400: #1EEEAF;
+  --scale-green-500: #54F2C2;
+  --scale-green-600: #73F4CD;
+  --scale-green-700: #93F7D9;
+  --scale-green-800: #B2F9E4;
+  --scale-green-900: #C9FBEC;
+  --scale-green-00: #0F7758;
+  --scale-purple-50: #2C4099;
+  --scale-purple-100: #344BB3;
+  --scale-purple-200: #3B56CC;
+  --scale-purple-300: #4360E6;
+  --scale-purple-400: #4A6BFF;
+  --scale-purple-500: #758FFF;
+  --scale-purple-600: #8FA3FF;
+  --scale-purple-700: #A8B8FF;
+  --scale-purple-800: #C1CDFF;
+  --scale-purple-900: #D4DBFF;
+  --scale-purple-00: #253580;
+  --scale-yellow-50: #997600;
+  --scale-yellow-100: #B38900;
+  --scale-yellow-200: #CC9D00;
+  --scale-yellow-300: #E6B000;
+  --scale-yellow-400: #FFC400;
+  --scale-yellow-500: #FFD23D;
+  --scale-yellow-600: #FFDA61;
+  --scale-yellow-700: #FFE384;
+  --scale-yellow-800: #FFEBA8;
+  --scale-yellow-900: #FFF1C2;
+  --scale-yellow-00: #806200;
+  --scale-red-50: #992B2B;
+  --scale-red-100: #B33232;
+  --scale-red-200: #CC3A3A;
+  --scale-red-300: #E64141;
+  --scale-red-400: #FF4848;
+  --scale-red-500: #FF7474;
+  --scale-red-600: #FF8E8E;
+  --scale-red-700: #FFA7A7;
+  --scale-red-800: #FFC1C1;
+  --scale-red-900: #FFD3D3;
+  --scale-red-00: #802424;
+  --scale-gray-alpha-30: #00000008;
+  --scale-gray-alpha-50: #0000000D;
+  --scale-gray-alpha-100: #0000001A;
+  --scale-gray-alpha-200: #00000033;
+  --scale-gray-alpha-500: #00000080;
+  --scale-blue1-alpha-30: #1473FF0A;
+  --scale-blue1-alpha-50: #1473FF14;
+  --scale-blue1-alpha-100: #1473FF24;
+  --scale-blue1-alpha-200: #1473FF33;
+  --scale-blue1-alpha-500: #1473FF80;
+  --scale-blue2-alpha-30: #3374FF0A;
+  --scale-blue2-alpha-50: #3374FF14;
+  --scale-blue2-alpha-100: #3374FF24;
+  --scale-blue2-alpha-200: #3374FF33;
+  --scale-blue2-alpha-500: #3374FF80;
+  --scale-green-alpha-30: #1EEEAF0A;
+  --scale-green-alpha-50: #1EEEAF14;
+  --scale-green-alpha-100: #1EEEAF24;
+  --scale-green-alpha-200: #1EEEAF33;
+  --scale-green-alpha-500: #1EEEAF80;
+  --scale-purple-alpha-30: #4A6BFF0A;
+  --scale-purple-alpha-50: #4A6BFF14;
+  --scale-purple-alpha-100: #4A6BFF24;
+  --scale-purple-alpha-200: #4A6BFF33;
+  --scale-purple-alpha-500: #4A6BFF80;
+  --scale-yellow-alpha-30: #FFC4000A;
+  --scale-yellow-alpha-50: #FFC40014;
+  --scale-yellow-alpha-100: #FFC40024;
+  --scale-yellow-alpha-200: #FFC40033;
+  --scale-yellow-alpha-500: #FFC40080;
+  --scale-red-alpha-30: #FF48480A;
+  --scale-red-alpha-50: #FF484814;
+  --scale-red-alpha-100: #FF484824;
+  --scale-red-alpha-200: #FF484833;
+  --scale-red-alpha-500: #FF484880;
+  --scale-white-alpha-30: #FFFFFF08;
+  --scale-white-alpha-50: #FFFFFF0D;
+  --scale-white-alpha-100: #FFFFFF1A;
+  --scale-white-alpha-200: #FFFFFF33;
+  --scale-white-alpha-500: #FFFFFF80;
+  --scale-gray-semantic-50: #1A1C1E;
+  --scale-gray-semantic-100: #282A2C;
+  --scale-gray-semantic-00: #0C0E10;
+  --semantic-brand-trugi-primary-legacy: #2848FEFF;
+  --static-black-alpha-100: #0000001A;
+  --static-black-alpha-200: #00000033;
+  --static-black-alpha-30: #00000008;
+  --static-black-alpha-50: #0000000D;
+  --static-black-alpha-500: #00000080;
+  --static-black-alpha-800: #000000CC;
+  --static-black-main: #000000FF;
+  --static-white-alpha-100: #FFFFFF1A;
+  --static-white-alpha-200: #FFFFFF33;
+  --static-white-alpha-30: #FFFFFF08;
+  --static-white-alpha-50: #FFFFFF0D;
+  --static-white-alpha-500: #FFFFFF80;
+  --static-white-alpha-800: #FFFFFFCC;
+  --static-white-main: #FFFFFFFF;
+  --static-color-blue1-400: #1473FFFF;
+  --static-color-blue1-700: #ACD2FFFF;
+  --static-color-blue2-400: #0152FFFF;
+  --static-color-blue2-700: #85ACFFFF;
+  --static-color-gluwa-lightblue: #67CEFFFF;
+  --static-color-gluwa-navy: #292751FF;
+  --static-color-gray-00: #0C0E10FF;
+  --static-color-gray-200: #36383AFF;
+  --static-color-gray-alpha-100: #0C0E101A;
+  --static-color-gray-alpha-200: #0C0E1033;
+  --static-color-gray-alpha-500: #0C0E1080;
+  --static-color-gray-alpha-700: #0C0E10B2;
+  --static-color-green-400: #1EEEAFFF;
+  --static-color-green-700: #93F7D9FF;
+  --static-color-purple-400: #4A6BFFFF;
+  --static-color-purple-700: #A8B8FFFF;
+  --static-color-red-400: #FF4848FF;
+  --static-color-red-700: #FFA7A7FF;
+  --static-color-trugi-blue-200-legacy: #D9E8F9FF;
+  --static-color-trugi-blue-300-legacy: #C0DAF8FF;
+  --static-color-trugi-blue-700-legacy: #132DBBFF;
+  --static-color-trugi-blue-alpha: #2848FE24;
+  --static-color-trugi-green: #4EE28CFF;
+  --static-color-trugi-orange: #FF8A4BFF;
+  --static-color-trugi-pink: #FF6CBFFF;
+  --static-color-trugi-purple: #B5AAFFFF;
+  --static-color-yellow-400: #FFC400FF;
+  --static-color-yellow-700: #FFE384FF;
+  --semantic-paper-contents: var(--scale-gray-50);
+  --semantic-paper-default: var(--scale-gray-00);
+  --semantic-paper-dialog: var(--scale-gray-semantic-50);
+  --semantic-paper-neutral: var(--scale-gray-semantic-00);
+  --semantic-paper-sheet: var(--scale-gray-semantic-50);
+  --semantic-divider-divider-1: var(--scale-white-alpha-50);
+  --semantic-divider-divider-2: var(--scale-gray-100);
+  --semantic-divider-divider-3: var(--scale-white-alpha-100);
+  --semantic-divider-divider-4: var(--scale-white-alpha-200);
+  --semantic-overlay-overlay-dim: var(--static-black-alpha-500);
+  --semantic-overlay-overlay-low: var(--static-black-alpha-200);
+  --semantic-brand-credit-primary: var(--scale-green-400);
+  --semantic-brand-credit-primary-hover: var(--scale-green-600);
+  --semantic-brand-credit-primary-low: var(--scale-green-alpha-50);
+  --semantic-brand-credit-primary-low-hover: var(--scale-green-alpha-100);
+  --semantic-brand-credit-primary-low-pressed: var(--scale-green-alpha-100);
+  --semantic-brand-credit-primary-pressed: var(--scale-green-600);
+  --semantic-brand-gluwa-primary: var(--scale-blue1-400);
+  --semantic-brand-gluwa-primary-hover: var(--scale-blue1-600);
+  --semantic-brand-gluwa-primary-low: var(--scale-blue1-alpha-50);
+  --semantic-brand-gluwa-primary-low-hover: var(--scale-blue1-alpha-100);
+  --semantic-brand-gluwa-primary-low-pressed: var(--scale-blue1-alpha-100);
+  --semantic-brand-gluwa-primary-pressed: var(--scale-blue1-600);
+  --semantic-brand-space-primary: var(--scale-purple-400);
+  --semantic-brand-space-primary-hover: var(--scale-purple-600);
+  --semantic-brand-space-primary-low: var(--scale-purple-alpha-50);
+  --semantic-brand-space-primary-low-hover: var(--scale-purple-alpha-100);
+  --semantic-brand-space-primary-low-pressed: var(--scale-purple-alpha-100);
+  --semantic-brand-space-primary-pressed: var(--scale-purple-600);
+  --semantic-brand-trugi-primary: var(--scale-blue2-400);
+  --semantic-brand-trugi-primary-hover: var(--scale-blue2-600);
+  --semantic-brand-trugi-primary-low: var(--scale-blue2-alpha-50);
+  --semantic-brand-trugi-primary-low-hover: var(--scale-blue2-alpha-100);
+  --semantic-brand-trugi-primary-low-pressed: var(--scale-blue2-alpha-100);
+  --semantic-brand-trugi-primary-pressed: var(--scale-blue2-600);
+  --semantic-information-caution: var(--scale-yellow-400);
+  --semantic-information-caution-low: var(--scale-yellow-alpha-50);
+  --semantic-information-error: var(--scale-red-400);
+  --semantic-information-error-low: var(--scale-red-alpha-50);
+  --semantic-information-info: var(--scale-blue1-400);
+  --semantic-information-info-low: var(--scale-blue1-alpha-50);
+  --semantic-information-success: var(--scale-green-400);
+  --semantic-information-success-low: var(--scale-green-alpha-50);
+}

package/src/style/font.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: 'Inter-R';
+  src: url('../../assets/fonts/Inter-Regular.woff2') format('woff2'),
+       url('../../assets/fonts/Inter-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter-M';
+  src: url('../../assets/fonts/Inter-Medium.woff2') format('woff2'),
+       url('../../assets/fonts/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter-SB';
+  src: url('../../assets/fonts/Inter-SemiBold.woff2') format('woff2'),
+       url('../../assets/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}

package/src/style/index.scss

@@ -0,0 +1,5 @@
+@use './reset.scss';
+@use './variables.scss';
+@use './font.scss';
+@use './color.scss';
+@use './mixin.scss';

package/src/style/mixin.scss

@@ -0,0 +1,217 @@
+@charset "UTF-8";
+@use 'sass:map';
+@use './variables.scss' as *;
+
+@mixin tiny-mobile {
+  @media (max-width: #{$tiny-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin themedScrollbar {
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--scale-gray-300) transparent;
+
+  // WebKit (Chrome / Safari)
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scale-gray-300);
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scale-gray-400);
+  }
+}
+
+@mixin small-mobile {
+  @media (max-width: #{$small-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin wide-mobile {
+  @media (max-width: #{$wide-mobile-width}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin break {
+  @media (max-width: #{$break-width}) {
+    @content;
+  }
+}
+
+@mixin tiny-pc {
+  @media (max-width: #{$tiny-pc-width}) {
+    @content;
+  }
+}
+
+@mixin small-pc {
+  @media (max-width: #{$small-pc-width}) {
+    @content;
+  }
+}
+
+@mixin min-pc {
+  @media (max-width: #{$min-pc-width}) {
+    @content;
+  }
+}
+
+@mixin max-width($width) {
+  @media (max-width: #{$width}) {
+    @content;
+  }
+}
+
+@mixin background-image($image, $path: null, $type: png) {
+	background-repeat: no-repeat;
+	background-size: cover;
+	@if ($path == null) {
+		background-image: url(../../src/asset/image/#{$image}.#{$type});
+
+	} @else {
+    background-image: url(../../src/asset/image/#{$path}/#{$image}.#{$type});
+  }
+}
+@mixin mask-image($image, $type: svg, $path: null) {
+  mask-repeat: no-repeat;
+  mask-size: cover;
+
+  @if ($path == null) {
+    mask-image: url(../../src/asset/image/#{$image}.#{$type});
+  } @else {
+    mask-image: url(../../src/asset/image/#{$path}/#{$image}.#{$type});
+  }
+}
+
+@mixin font-scale(
+  $font-family,
+  $size-pc,
+  $size-tablet,
+  $line-height: 1.5,
+  $letter-spacing: null
+) {
+  font-family: $font-family;
+  font-size: $size-pc;
+  line-height: $line-height;
+  @if $letter-spacing != null {
+    letter-spacing: $letter-spacing;
+  }
+  @include tablet {
+    font-size: calc(($size-pc + $size-tablet) / 2);
+  }
+  @include mobile {
+    font-size: $size-tablet;
+  }
+}
+
+$tokens: (
+  'h1-bold': ('Inter-SB', 72px, 36px, 1.15, -0.03em),
+  'h1-regular': ('Inter-R', 72px, 36px, 1.15, -0.03em),
+  'h2-bold': ('Inter-SB', 60px, 36px, 1.15, -0.03em),
+  'h2-regular': ('Inter-R', 60px, 36px, 1.15, -0.03em),
+  'h3-bold': ('Inter-SB', 54px, 36px, 1.15, -0.03em),
+  'h3-regular': ('Inter-R', 54px, 36px, 1.15, -0.03em),
+  'h4-bold': ('Inter-SB', 48px, 30px, 1.15, -0.03em),
+  'h4-regular': ('Inter-R', 48px, 30px, 1.15, -0.03em),
+  'h5-bold': ('Inter-SB', 42px, 28px, 1.15, -0.03em),
+  'h5-regular': ('Inter-R', 42px, 28px, 1.15, -0.03em),
+
+  'amount-bold': ('Inter-SB', 60px, 60px, 1.15, -0.03em),
+  'amount-regular': ('Inter-R', 60px, 60px, 1.15, -0.03em),
+
+  'title1-bold': ('Inter-SB', 32px, 24px, 1.5, -0.03em),
+  'title1-regular': ('Inter-R', 32px, 24px, 1.5, -0.03em),
+  'title2-bold': ('Inter-SB', 26px, 22px, 1.5, -0.03em),
+  'title2-regular': ('Inter-R', 26px, 22px, 1.5, -0.03em),
+  'title3-bold': ('Inter-SB', 24px, 20px, 1.5, -0.03em),
+  'title3-regular': ('Inter-R', 24px, 20px, 1.5, -0.03em),
+  'title4-bold': ('Inter-SB', 20px, 18px, 1.5, -0.03em),
+  'title4-regular': ('Inter-R', 20px, 18px, 1.5, -0.03em),
+  'title5-bold': ('Inter-SB', 19px, 17px, 1.5, -0.01em),
+  'title5-regular': ('Inter-R', 19px, 17px, 1.5, -0.01em),
+
+  'subtitle1-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'subtitle1-regular': ('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'subtitle2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'subtitle2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+
+  'body1-l1-bold': ('Inter-SB', 18px, 16px, 1.8, -0.01em),
+  'body1-l1-regular': ('Inter-R', 18px, 16px, 1.8, -0.01em),
+  'body1-l1-medium': ('Inter-M', 18px, 16px, 1.8, -0.01em),
+  'body1-l2-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'body1-l2-regular':('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'body1-l2-medium': ('Inter-M', 18px, 16px, 1.5, -0.01em),
+
+  'body2-l1-bold': ('Inter-SB', 17px, 15px, 1.8, -0.01em),
+  'body2-l1-regular': ('Inter-R', 17px, 15px, 1.8, -0.01em),
+  'body2-l1-medium': ('Inter-M', 17px, 15px, 1.8, -0.01em),
+  'body2-l2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'body2-l2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+  'body2-l2-medium': ('Inter-M', 17px, 15px, 1.5, -0.01em),
+
+  'body3-l1-bold': ('Inter-SB', 16px, 14px, 1.8, -0.01em),
+  'body3-l1-regular': ('Inter-R', 16px, 14px, 1.8, -0.01em),
+  'body3-l1-medium': ('Inter-M', 16px, 14px, 1.8, -0.01em),
+  'body3-l2-bold': ('Inter-SB', 16px, 14px, 1.5, -0.01em),
+  'body3-l2-regular': ('Inter-R', 16px, 14px, 1.5, -0.01em),
+  'body3-l2-medium': ('Inter-M', 16px, 14px, 1.5, -0.01em),
+
+  'body4-l1-bold': ('Inter-SB', 15px, 13px, 1.8, -0.01em),
+  'body4-l1-regular': ('Inter-R', 15px, 13px, 1.8, -0.01em),
+  'body4-l1-medium': ('Inter-M', 15px, 13px, 1.8, -0.01em),
+  'body4-l2-bold': ('Inter-SB', 15px, 13px, 1.5, -0.01em),
+  'body4-l2-regular': ('Inter-R', 15px, 13px, 1.5, -0.01em),
+  'body4-l2-medium': ('Inter-M', 15px, 13px, 1.5, -0.01em),
+
+  'label1-bold': ('Inter-SB', 18px, 16px, 1.5, -0.01em),
+  'label1-regular': ('Inter-R', 18px, 16px, 1.5, -0.01em),
+  'label2-bold': ('Inter-SB', 17px, 15px, 1.5, -0.01em),
+  'label2-regular': ('Inter-R', 17px, 15px, 1.5, -0.01em),
+  'label3-bold': ('Inter-SB', 16px, 14px, 1.5, -0.01em),
+  'label3-regular': ('Inter-R', 16px, 14px, 1.5, -0.01em),
+  'label4-bold': ('Inter-SB', 15px, 13px, 1.5, -0.01em),
+  'label4-regular': ('Inter-R', 15px, 13px, 1.5, -0.01em),
+  'label5-bold': ('Inter-SB', 14px, 12px, 1.5, -0.01em),
+  'label5-regular': ('Inter-R', 14px, 12px, 1.5, -0.01em),
+  'label6-bold': ('Inter-SB', 13px, 11px, 1.5, -0.01em),
+  'label6-regular': ('Inter-R', 13px, 11px, 1.5, -0.01em),
+
+  'caption1-bold': ('Inter-SB', 12px, 10px, 1.5, -0.01em),
+  'caption1-regular': ('Inter-R', 12px, 10px, 1.5, -0.01em),
+  'caption2-bold': ('Inter-SB', 11px, 9px, 1.5, -0.01em),
+  'caption2-regular': ('Inter-R', 11px, 9px, 1.5, -0.01em),
+  'caption3-bold': ('Inter-SB', 10px, 8px, 1.5, -0.01em),
+  'caption3-regular': ('Inter-R', 10px, 8px, 1.5, -0.01em),
+);
+
+@mixin textToken($type) {
+  $mixin-item: map.get($tokens, $type);
+  @if $mixin-item {
+    --font-name: #{$type};
+    @include font-scale($mixin-item...);
+  } @else {
+    @warn 'Unknown text token: #{$type}';
+  }
+}