@pfct/purple 1.3.4-npm-test.1

package/dist/core/Colors/index.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semanticColorsMethod = exports.semanticColors = exports.basicColors = exports.generateHexWithAlphaInLightMode = void 0;
+const hexPrefixOpacity = {
+    '0%': '00',
+    '5%': '0C',
+    '10%': '19',
+    '15%': '26',
+    '20%': '33',
+    '25%': '3F',
+    '30%': '4C',
+    '35%': '59',
+    '40%': '66',
+    '45%': '72',
+    '50%': '7F',
+    '55%': '8C',
+    '60%': '99',
+    '65%': 'A5',
+    '70%': 'B2',
+    '75%': 'BF',
+    '80%': 'CC',
+    '85%': 'D8',
+    '90%': 'E5',
+    '95%': 'F2',
+    '100%': 'FF',
+};
+// https://pfcoworkspace.slack.com/archives/C04ETT1DJHJ/p1671612778867049
+const generateHexWithAlphaInLightMode = (hexColor, alpha) => `${hexColor}${hexPrefixOpacity[alpha]}`;
+exports.generateHexWithAlphaInLightMode = generateHexWithAlphaInLightMode;
+const basicColors = {
+    white: '#ffffff',
+    black: '#000000',
+    darkGray: '#262626',
+    deepDarkGray: '#1B1B1B',
+    pink5: '#FFFAFD',
+    pink25: '#fff4fa',
+    pink50: '#ffeaf5',
+    pink100: '#ffc6e3',
+    pink200: '#fe99ce',
+    pink300: '#fe67b5',
+    pink400: '#fe2c99',
+    pink500: '#eb1584',
+    pink600: '#de0475',
+    pink700: '#ca036a',
+    pink800: '#b2005c',
+    pink900: '#970051',
+    blue5: '#F9FCFF',
+    blue25: '#f1f9ff',
+    blue50: '#e3f4ff',
+    blue100: '#bbe2ff',
+    blue200: '#8dd0ff',
+    blue300: '#48afff',
+    blue400: '#007dff',
+    blue500: '#1269ec',
+    blue600: '#0c5cd3',
+    blue700: '#114bbd',
+    blue800: '#073ca4',
+    blue900: '#00308d',
+    gray5: '#FAFBFC',
+    gray25: '#f5f6f7',
+    gray50: '#eceff1',
+    gray100: '#d0d8dc',
+    gray200: '#b0bec5',
+    gray300: '#90a4af',
+    gray400: '#78909d',
+    gray500: '#617d8b',
+    gray600: '#556e7b',
+    gray700: '#455a65',
+    gray800: '#37474f',
+    gray900: '#263238',
+    purple5: '#FCFBFF',
+    purple25: '#F9F4FF',
+    purple50: '#f4eefe',
+    purple100: '#d4befb',
+    purple200: '#b48ef8',
+    purple300: '#955dff',
+    purple400: '#732ff1',
+    purple500: '#602fe4',
+    purple600: '#521ddf',
+    purple700: '#491ac6',
+    purple800: '#3e16a8',
+    purple900: '#33128a',
+    red5: '#FFFBFC',
+    red25: '#FFF6F9',
+    red50: '#ffeff2',
+    red100: '#ffb7c4',
+    red200: '#ff738c',
+    red300: '#ff5170',
+    red400: '#ff2f54',
+    red500: '#ff0d38',
+    red600: '#ea002a',
+    red700: '#c80024',
+    red800: '#a6001e',
+    red900: '#840018',
+    green5: '#F8FFFA',
+    green25: '#F0FFF6',
+    green50: '#dcf9e8',
+    green100: '#a7ebbe',
+    green200: '#57db84',
+    green300: '#1fcc5a',
+    green400: '#19b14d',
+    green500: '#159340',
+    green600: '#117533',
+    green700: '#0d5826',
+    green800: '#0a4920',
+    green900: '#083a19',
+    yellow5: '#FFFDF4',
+    yellow25: '#FFFBE6',
+    yellow50: '#fff7e0',
+    yellow100: '#ffe59c',
+    yellow200: '#ffd55e',
+    yellow300: '#ffcd4b',
+    yellow400: '#ffc134',
+    yellow500: '#ffb712',
+    yellow600: '#efa600',
+    yellow700: '#cd8e00',
+    yellow800: '#ab7700',
+    yellow900: '#895f00',
+    lime5: '#F9FEF9',
+    lime25: '#F3FDF3',
+    lime50: '#E7FCE8',
+    lime100: '#BFF4C1',
+    lime200: '#7EEE87',
+    lime300: '#60DF6A',
+    lime400: '#37C94D',
+    lime500: '#16B234',
+    lime600: '#139D2D',
+    lime700: '#0D8323',
+    lime800: '#0E6C1F',
+    lime900: '#045613',
+};
+exports.basicColors = basicColors;
+// TODO: darkmode 적용할때 점검 필요
+const semanticColors = {
+    backgroundBasic: basicColors.white,
+    backgroundDeep: basicColors.gray25,
+    buttonGrayMainAbledText: basicColors.white,
+    buttonMainDisabledText: basicColors.white,
+    toastMessageContainer: `${generateHexWithAlphaInLightMode(basicColors.gray900, '80%')}`,
+    toastMessageMiniButtonEnabledContainer: basicColors.gray800,
+    toastMessageMiniButtonHoverContainer: basicColors.gray700,
+    toastMessageMiniButtonFocusContainer: basicColors.gray600,
+    controlGraySwitchEnabledOnContainer: basicColors.gray900,
+    controlSwitchEnabledOffInnerCircle: basicColors.white,
+    controlSwitchDisabledOnInnerCircle: basicColors.white,
+    controlSwitchDisabledOffInnerCircle: basicColors.white,
+    dividerM: basicColors.gray25,
+    card: basicColors.white,
+    segmentControlContainer: basicColors.gray50,
+    segmentControlSegment: basicColors.white,
+    chipDefaultText: basicColors.gray700,
+};
+exports.semanticColors = semanticColors;
+const semanticColorsMethod = {
+    buttonSubDisabledText: (colorType) => basicColors[`${colorType}100`],
+};
+exports.semanticColorsMethod = semanticColorsMethod;

package/dist/core/Colors/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Color-3c22c42d7980452bbca325b13f027712?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 컬러는 제품 전반에 걸쳐 일관된 경험을 제공하는 역할을 하는 피플펀드를 대표하는 요소 중 하나로 베이직 컬러와 시멘틱 컬러로 구성되어 있습니다.<br/>대표적인 컬러는 두 가지로 Pink는 대출, Blue는 투자 서비스에 사용합니다.
+ */
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<object>;
+export declare const BasicPalette: Story;
+export declare const SemanticPalette: Story;

package/dist/core/Colors/index.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SemanticPalette = exports.BasicPalette = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const components_1 = require("../../components");
+const library_1 = require("../../library");
+const Palette = ({ fixedColor, name, color, variants = [''], palette }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'row' } }, variants.map((variant) => {
+            const background = fixedColor ? fixedColor : palette === null || palette === void 0 ? void 0 : palette[`${color + variant}`].toLocaleUpperCase();
+            return (react_1.default.createElement("div", { key: variant || '-0' },
+                react_1.default.createElement("div", null,
+                    `${name || (color === null || color === void 0 ? void 0 : color.toLocaleLowerCase())} ${variant}`,
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement("div", { style: { color: '#9D9D9D' } }, background)),
+                react_1.default.createElement("div", { style: { width: '120px', height: '75px', background } }),
+                react_1.default.createElement("br", null)));
+        }))));
+};
+const SystemColors = () => {
+    const colors = ['white', 'darkGray', 'deepDarkGray', 'black'];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, " System "),
+        colors.map((color) => (react_1.default.createElement(Palette, { key: color, color: color, palette: _1.basicColors })))));
+};
+const BasicColors = () => {
+    const colors = ['pink', 'blue', 'gray', 'purple', 'red', 'lime', 'green', 'yellow'];
+    const variants = ['5', '25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, " Basic "),
+        colors.map((color) => (react_1.default.createElement(Palette, { key: color, color: color, variants: variants, palette: _1.basicColors })))));
+};
+const SemanticColors = () => {
+    const colorNameSet = [
+        {
+            color: 'backgroundBasic',
+            name: 'Background Basic',
+        },
+        {
+            color: 'backgroundDeep',
+            name: 'BackgroundDeep',
+        },
+        {
+            color: 'buttonGrayMainAbledText',
+            name: 'Button Main Abled Text (Gray)',
+        },
+        {
+            color: 'buttonMainDisabledText',
+            name: 'Button Main Disabled Text',
+        },
+        {
+            color: 'toastMessageContainer',
+            name: 'Toast Message Container',
+        },
+        {
+            color: 'toastMessageMiniButtonEnabledContainer',
+            name: 'Toast Message Mini Button Container Enabled',
+        },
+        {
+            color: 'toastMessageMiniButtonHoverContainer',
+            name: 'Toast Message Mini Button Container Hover',
+        },
+        {
+            color: 'toastMessageMiniButtonFocusContainer',
+            name: 'Toast Message Mini Button Container Focus ',
+        },
+        {
+            color: 'controlGraySwitchEnabledOnContainer',
+            name: 'Control Switch Enabled On Container (Gray)',
+        },
+        { color: 'controlSwitchEnabledOffInnerCircle', name: 'Control Switch Enabled Off Innercircle' },
+        { color: 'controlSwitchDisabledOnInnerCircle', name: 'Control Switch Disabled On Innercircle' },
+        {
+            color: 'controlSwitchDisabledOffInnerCircle',
+            name: 'Control Switch Disabled Off Innercircle',
+        },
+        { color: 'dividerM', name: 'Divider M' },
+        { color: 'card', name: 'Card' },
+        { color: 'segmentControlContainer', name: 'Segment Control Container' },
+        {
+            color: 'segmentControlSegment',
+            name: 'Segment Control Segment',
+        },
+    ];
+    const colorMethodSet = utils_1.ColorTypeArray.map((colorType) => ({
+        method: 'buttonSubDisabledText',
+        colorType,
+    }));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, " Semantic (no colorType) "),
+        colorNameSet.map(({ color, name }) => (react_1.default.createElement(Palette, { key: color, name: name, color: color, palette: _1.semanticColors }))),
+        react_1.default.createElement(components_1.Divider, { size: "s" }),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 20 }),
+        react_1.default.createElement("h1", null, " Semantic (w. colorType) "),
+        colorMethodSet.map(({ method, colorType }) => (react_1.default.createElement(Palette, { key: method, name: `${method} (${colorType})`, fixedColor: _1.semanticColorsMethod[method](colorType) })))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Color-3c22c42d7980452bbca325b13f027712?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 컬러는 제품 전반에 걸쳐 일관된 경험을 제공하는 역할을 하는 피플펀드를 대표하는 요소 중 하나로 베이직 컬러와 시멘틱 컬러로 구성되어 있습니다.<br/>대표적인 컬러는 두 가지로 Pink는 대출, Blue는 투자 서비스에 사용합니다.
+ */
+const meta = {
+    title: 'Foundation/Color',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.BasicPalette = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(BasicColors, null),
+        react_1.default.createElement(SystemColors, null))),
+    parameters: {
+        docs: {
+            description: {
+                story: '베이직 컬러는 기본 컬러 팔레트의 기능을 합니다.<br/>각 컬러는 400값이 메인 컬러이며, 예외로 Gray는 900값을 메인 컬러로, System은 메인 컬러 없이 사용합니다.',
+            },
+        },
+    },
+};
+exports.SemanticPalette = {
+    render: () => react_1.default.createElement(SemanticColors, null),
+    parameters: {
+        docs: {
+            description: {
+                story: '시멘틱 컬러는 베이직 컬러 팔레트에서 라이트/다크 모드 1:1 대응이 되지 않는 예외 케이스에 사용합니다.<br/>베이직 컬러를 토대로 사용하는 목적에 맞게 네이밍하고 시스템화하여 다크 모드에 최적화된 컬러 대응이 가능하도록 해줍니다.',
+            },
+        },
+    },
+};

package/dist/core/Display/Mobile.d.ts

@@ -0,0 +1,3 @@
+import { ReactFCWithChildren } from '../../types/react';
+declare const Mobile: ReactFCWithChildren;
+export default Mobile;

package/dist/core/Display/Mobile.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const Mobile = ({ children }) => {
+    return react_1.default.createElement(index_styled_1.MobileWrapper, null, children);
+};
+exports.default = Mobile;

package/dist/core/Display/Pc.d.ts

@@ -0,0 +1,3 @@
+import { ReactFCWithChildren } from '../../types/react';
+declare const Pc: ReactFCWithChildren;
+export default Pc;

package/dist/core/Display/Pc.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const Pc = ({ children }) => {
+    return react_1.default.createElement(index_styled_1.PcWrapper, null, children);
+};
+exports.default = Pc;

package/dist/core/Display/index.d.ts

@@ -0,0 +1,3 @@
+import Pc from './Pc';
+import Mobile from './Mobile';
+export { Pc, Mobile };

package/dist/core/Display/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mobile = exports.Pc = void 0;
+const Pc_1 = __importDefault(require("./Pc"));
+exports.Pc = Pc_1.default;
+const Mobile_1 = __importDefault(require("./Mobile"));
+exports.Mobile = Mobile_1.default;

package/dist/core/Display/index.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const PcWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/core/Display/index.styled.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileWrapper = exports.PcWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const utils_1 = require("../../utils");
+exports.PcWrapper = styled_1.default.div `
+	${(0, utils_1.Smaller)((0, react_1.css) `
+		display: none;
+	`)}
+`;
+exports.MobileWrapper = styled_1.default.div `
+	${(0, utils_1.Larger)((0, react_1.css) `
+		display: none;
+	`)}
+`;

package/dist/core/TextStyles/index.d.ts

@@ -0,0 +1,29 @@
+export declare const typography: {
+    h1: import("@emotion/react").SerializedStyles;
+    h2: import("@emotion/react").SerializedStyles;
+    h3: import("@emotion/react").SerializedStyles;
+    h4: import("@emotion/react").SerializedStyles;
+    h5: import("@emotion/react").SerializedStyles;
+    h6: import("@emotion/react").SerializedStyles;
+    title1: import("@emotion/react").SerializedStyles;
+    title2: import("@emotion/react").SerializedStyles;
+    title3: import("@emotion/react").SerializedStyles;
+    title4: import("@emotion/react").SerializedStyles;
+    body1: import("@emotion/react").SerializedStyles;
+    body2: import("@emotion/react").SerializedStyles;
+};
+export interface TextStyleProperties {
+    color?: string;
+}
+export declare const headline1: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const headline2: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const headline3: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const headline4: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const headline5: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const headline6: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const title1: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const title2: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const title3: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const title4: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const body1: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;
+export declare const body2: (args?: TextStyleProperties) => import("@emotion/react").SerializedStyles;

package/dist/core/TextStyles/index.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.body2 = exports.body1 = exports.title4 = exports.title3 = exports.title2 = exports.title1 = exports.headline6 = exports.headline5 = exports.headline4 = exports.headline3 = exports.headline2 = exports.headline1 = exports.typography = void 0;
+const react_1 = require("@emotion/react");
+const Colors_1 = require("../Colors");
+const DEFAULT_TEXT_COLOR = Colors_1.basicColors.gray900;
+const DEFAULT_HEADLINE_TEXT_FONT_WEIGHT = 600;
+const DEFAULT_TITLE_TEXT_FONT_WEIGHT = 500;
+const DEFAULT_BODY_TEXT_FONT_WEIGHT = 400;
+exports.typography = {
+    h1: (0, react_1.css) `
+		font-size: 41px;
+		line-height: 56px;
+		letter-spacing: -0.8px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h2: (0, react_1.css) `
+		font-size: 29px;
+		line-height: 38px;
+		letter-spacing: -0.4px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h3: (0, react_1.css) `
+		font-size: 23px;
+		line-height: 32px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h4: (0, react_1.css) `
+		font-size: 19px;
+		line-height: 26px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h5: (0, react_1.css) `
+		font-size: 17px;
+		line-height: 24px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    h6: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+    title1: (0, react_1.css) `
+		font-size: 19px;
+		line-height: 26px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title2: (0, react_1.css) `
+		font-size: 17px;
+		line-height: 24px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title3: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    title4: (0, react_1.css) `
+		font-size: 13px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+    body1: (0, react_1.css) `
+		font-size: 15px;
+		line-height: 22px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+    body2: (0, react_1.css) `
+		font-size: 13px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+};
+const headline1 = (args) => (0, react_1.css) `
+	${exports.typography.h1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline1 = headline1;
+const headline2 = (args) => (0, react_1.css) `
+	${exports.typography.h2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline2 = headline2;
+const headline3 = (args) => (0, react_1.css) `
+	${exports.typography.h3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline3 = headline3;
+const headline4 = (args) => (0, react_1.css) `
+	${exports.typography.h4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline4 = headline4;
+const headline5 = (args) => (0, react_1.css) `
+	${exports.typography.h5};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline5 = headline5;
+const headline6 = (args) => (0, react_1.css) `
+	${exports.typography.h6};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.headline6 = headline6;
+const title1 = (args) => (0, react_1.css) `
+	${exports.typography.title1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title1 = title1;
+const title2 = (args) => (0, react_1.css) `
+	${exports.typography.title2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title2 = title2;
+const title3 = (args) => (0, react_1.css) `
+	${exports.typography.title3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title3 = title3;
+const title4 = (args) => (0, react_1.css) `
+	${exports.typography.title4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.title4 = title4;
+const body1 = (args) => (0, react_1.css) `
+	${exports.typography.body1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.body1 = body1;
+const body2 = (args) => (0, react_1.css) `
+	${exports.typography.body2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+exports.body2 = body2;

package/dist/core/Theme/index.d.ts

@@ -0,0 +1,13 @@
+declare enum ThemeMode {
+    DARK = "DARK",
+    LIGHT = "LIGHT"
+}
+interface ThemeConfig {
+    mode: ThemeMode;
+}
+declare const Theme: {
+    dark: ThemeConfig;
+    light: ThemeConfig;
+};
+export type { ThemeMode, ThemeConfig };
+export { Theme };

package/dist/core/Theme/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["DARK"] = "DARK";
+    ThemeMode["LIGHT"] = "LIGHT";
+})(ThemeMode || (ThemeMode = {}));
+const dark = {
+    mode: ThemeMode.DARK,
+};
+const light = {
+    mode: ThemeMode.LIGHT,
+};
+const Theme = {
+    dark,
+    light,
+};
+exports.Theme = Theme;

package/dist/core/Typography/BaseTypography/index.d.ts

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+export type Typo = keyof typeof typographyList;
+export type TypoProps = PropsWithChildren<{
+    lg?: Typo;
+    sm?: Typo;
+    color?: string;
+    textAlign?: string;
+    fontWeight?: string;
+    className?: string;
+    element?: string;
+    'data-element-name'?: string;
+}>;
+export type OwnProps = {
+    md: Typo;
+};
+export type BaseTypographyProps = TypoProps & OwnProps;
+export declare const typographyList: {
+    Headline1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline3: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline4: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline5: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Headline6: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title3: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Title4: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Body1: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+    Body2: (args?: import("../../TextStyles").TextStyleProperties | undefined) => import("@emotion/react").SerializedStyles;
+};
+/**
+ * @param lg - pc size typography
+ * @param md - OwnProps 로 분류되어 lg, sm이 공통일 경우 md하나로 사용 가능하다.
+ * @param sm - mobile size typography
+ */
+export declare const BaseTypography: (props: BaseTypographyProps) => React.JSX.Element;