@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

package/dist/components/ui/button.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = void 0;
+exports.Button = Button;
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("@/lib/utils");
+const buttonVariants = (0, class_variance_authority_1.cva)('border-none rounded-[10px] inline-flex items-center justify-center whitespace-nowrap p-3.75 typo-h6 h-[50px] w-full', {
+    variants: {
+        colorType: {
+            pink: '',
+            red: '',
+            orange: '',
+            yellow: '',
+            lime: '',
+            green: '',
+            mint: '',
+            skyblue: '',
+            blue: '',
+            indigo: '',
+            purple: '',
+            gray: '',
+        },
+        purpose: {
+            main: '',
+            sub: '',
+        },
+    },
+    compoundVariants: [
+        {
+            purpose: 'main',
+            colorType: 'pink',
+            class: 'text-white bg-pink-400 hover:bg-pink-500 active:bg-pink-600 disabled:bg-pink-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'pink',
+            class: 'text-pink-400 disabled:text-pink-100 bg-pink-50 hover:bg-pink-100 active:bg-pink-200 disabled:bg-pink-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'red',
+            class: 'text-white bg-red-400 hover:bg-red-500 active:bg-red-600 disabled:bg-red-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'red',
+            class: 'text-red-400 disabled:text-red-100 bg-red-50 hover:bg-red-100 active:bg-red-200 disabled:bg-red-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'orange',
+            class: 'text-white bg-orange-400 hover:bg-orange-500 active:bg-orange-600 disabled:bg-orange-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'orange',
+            class: 'text-orange-400 disabled:text-orange-100 bg-orange-50 hover:bg-orange-100 active:bg-orange-200 disabled:bg-orange-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'yellow',
+            class: 'text-white bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600 disabled:bg-yellow-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'yellow',
+            class: 'text-yellow-400 disabled:text-yellow-100 bg-yellow-50 hover:bg-yellow-100 active:bg-yellow-200 disabled:bg-yellow-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'lime',
+            class: 'text-white bg-lime-400 hover:bg-lime-500 active:bg-lime-600 disabled:bg-lime-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'lime',
+            class: 'text-lime-400 disabled:text-lime-100 bg-lime-50 hover:bg-lime-100 active:bg-lime-200 disabled:bg-lime-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'green',
+            class: 'text-white bg-green-400 hover:bg-green-500 active:bg-green-600 disabled:bg-green-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'green',
+            class: 'text-green-400 disabled:text-green-100 bg-green-50 hover:bg-green-100 active:bg-green-200 disabled:bg-green-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'mint',
+            class: 'text-white bg-mint-400 hover:bg-mint-500 active:bg-mint-600 disabled:bg-mint-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'mint',
+            class: 'text-mint-400 disabled:text-mint-100 bg-mint-50 hover:bg-mint-100 active:bg-mint-200 disabled:bg-mint-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'skyblue',
+            class: 'text-white bg-skyblue-400 hover:bg-skyblue-500 active:bg-skyblue-600 disabled:bg-skyblue-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'skyblue',
+            class: 'text-skyblue-400 disabled:text-skyblue-100 bg-skyblue-50 hover:bg-skyblue-100 active:bg-skyblue-200 disabled:bg-skyblue-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'blue',
+            class: 'text-white bg-blue-400 hover:bg-blue-500 active:bg-blue-600 disabled:bg-blue-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'blue',
+            class: 'text-blue-400 disabled:text-blue-100 bg-blue-50 hover:bg-blue-100 active:bg-blue-200 disabled:bg-blue-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'indigo',
+            class: 'text-white bg-indigo-400 hover:bg-indigo-500 active:bg-indigo-600 disabled:bg-indigo-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'indigo',
+            class: 'text-indigo-400 disabled:text-indigo-100 bg-indigo-50 hover:bg-indigo-100 active:bg-indigo-200 disabled:bg-indigo-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'purple',
+            class: 'text-white bg-purple-400 hover:bg-purple-500 active:bg-purple-600 disabled:bg-purple-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'purple',
+            class: 'text-purple-400 disabled:text-purple-100 bg-purple-50 hover:bg-purple-100 active:bg-purple-200 disabled:bg-purple-50',
+        },
+        {
+            purpose: 'main',
+            colorType: 'gray',
+            class: 'text-white bg-gray-900 hover:bg-gray-700 active:bg-gray-800 disabled:bg-gray-100',
+        },
+        {
+            purpose: 'sub',
+            colorType: 'gray',
+            class: 'text-gray-700 disabled:text-gray-100 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 disabled:bg-gray-50',
+        },
+    ],
+    defaultVariants: {
+        purpose: 'main',
+        colorType: 'lime',
+    },
+});
+exports.buttonVariants = buttonVariants;
+function Button(_a) {
+    var _b;
+    var { className, asChild = false, purpose, colorType } = _a, props = __rest(_a, ["className", "asChild", "purpose", "colorType"]);
+    const Comp = asChild ? react_slot_1.Slot : 'button';
+    return (React.createElement(Comp, Object.assign({}, props, { "data-slot": "button", className: (0, utils_1.cn)(buttonVariants({ colorType, purpose, className })), type: (_b = props.type) !== null && _b !== void 0 ? _b : (purpose === 'main' ? 'submit' : 'button') })));
+}

package/dist/components/ui/dialog.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+const React = __importStar(require("react"));
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const utils_1 = require("@/lib/utils");
+function Dialog(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Root, Object.assign({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Trigger, Object.assign({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Portal, Object.assign({ "data-slot": "dialog-portal" }, props));
+}
+function DialogClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DialogPrimitive.Close, Object.assign({ "data-slot": "dialog-close" }, props));
+}
+function DialogOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: (0, utils_1.cn)('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className) }, props)));
+}
+function DialogContent(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DialogPortal, { "data-slot": "dialog-portal" },
+        React.createElement(DialogOverlay, null),
+        React.createElement(DialogPrimitive.Content, Object.assign({ "data-slot": "dialog-content", className: (0, utils_1.cn)('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-150 w-full max-w-90 translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-lg border px-5 shadow-lg duration-200', className) }, props), children)));
+}
+function DialogHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "dialog-header", className: (0, utils_1.cn)('flex flex-col gap-2 text-center sm:text-left', className) }, props)));
+}
+function DialogFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "dialog-footer", className: (0, utils_1.cn)('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className) }, props)));
+}
+function DialogTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return React.createElement(DialogPrimitive.Title, Object.assign({ "data-slot": "dialog-title", className: (0, utils_1.cn)(className) }, props));
+}
+function DialogDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DialogPrimitive.Description, Object.assign({ "data-slot": "dialog-description", className: (0, utils_1.cn)('text-muted-foreground text-sm', className) }, props)));
+}

package/dist/components/ui/drawer.d.ts

@@ -1,5 +1,5 @@
-import { Drawer as DrawerPrimitive } from 'vaul';
 import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
 declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
 declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;

package/dist/components/ui/drawer.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = Drawer;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerDescription = DrawerDescription;
+const React = __importStar(require("react"));
+const vaul_1 = require("vaul");
+const utils_1 = require("@/lib/utils");
+function Drawer(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Root, Object.assign({ "data-slot": "drawer" }, props));
+}
+function DrawerTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Trigger, Object.assign({ "data-slot": "drawer-trigger" }, props));
+}
+function DrawerPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Portal, Object.assign({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(vaul_1.Drawer.Close, Object.assign({ "data-slot": "drawer-close" }, props));
+}
+function DrawerOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: (0, utils_1.cn)('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className) }, props)));
+}
+function DrawerContent(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DrawerPortal, { "data-slot": "drawer-portal" },
+        React.createElement(DrawerOverlay, null),
+        React.createElement(vaul_1.Drawer.Content, Object.assign({ "data-slot": "drawer-content", className: (0, utils_1.cn)('group/drawer-content bg-background fixed z-50 flex h-auto flex-col', 'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b', 'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t', 'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm', 'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm', className) }, props), children)));
+}
+function DrawerHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return React.createElement("div", Object.assign({ "data-slot": "drawer-header", className: (0, utils_1.cn)('flex flex-col gap-2 p-5', className) }, props));
+}
+function DrawerFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return React.createElement("div", Object.assign({ "data-slot": "drawer-footer", className: (0, utils_1.cn)('mt-auto flex flex-col gap-2 p-5', className) }, props));
+}
+function DrawerTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Title, Object.assign({ "data-slot": "drawer-title", className: (0, utils_1.cn)('text-foreground font-semibold', className) }, props)));
+}
+function DrawerDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(vaul_1.Drawer.Description, Object.assign({ "data-slot": "drawer-description", className: (0, utils_1.cn)('text-muted-foreground text-sm', className) }, props)));
+}

package/dist/constants/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./style.constants"), exports);

package/dist/constants/style.constants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutSpacing = exports.zIndex = void 0;
+exports.zIndex = {
+    floatButton: 5,
+    gnb: 10,
+    basicLayer: 100,
+    modal: 1000,
+    loading: 19950824,
+};
+exports.LayoutSpacing = {
+    bottomMargin: {
+        mobile: 80,
+        pc: 60,
+    },
+};

package/dist/core/Colors/index.js

@@ -0,0 +1,220 @@
+"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',
+    // Native가 작업 완료되면 같은시점에 버전 업
+    // gray5: '#FBFBFB',
+    // gray25: '#F6F6F6',
+    // gray50: '#EEEEEE',
+    // gray100: '#D2D2D2',
+    // gray200: '#C0C0C0',
+    // gray300: '#979797',
+    // gray400: '#828282',
+    // gray500: '#6F6F6F',
+    // gray600: '#656565',
+    // gray700: '#5A5A5A',
+    // gray800: '#444444',
+    // gray900: '#2E2E2E',
+    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: '#FFB712',
+    yellow500: '#EFA600',
+    yellow600: '#CD8E00',
+    yellow700: '#AB7700',
+    yellow800: '#895F00',
+    yellow900: '#745000',
+    lime5: '#F9FEF9',
+    lime25: '#F3FDF3',
+    lime50: '#E7FCE8',
+    lime100: '#BFF4C1',
+    lime200: '#7EEE87',
+    lime300: '#60DF6A',
+    lime400: '#37C94D',
+    lime500: '#16B234',
+    lime600: '#139D2D',
+    lime700: '#0D8323',
+    lime800: '#0E6C1F',
+    lime900: '#045613',
+    mint5: '#F4FEFD',
+    mint25: '#ECFCFB',
+    mint50: '#E0F8F7',
+    mint100: '#B4F6EE',
+    mint200: '#76EBE6',
+    mint300: '#3DE2DA',
+    mint400: '#02D1C8',
+    mint500: '#02B8AE',
+    mint600: '#029F94',
+    mint700: '#02867A',
+    mint800: '#026D60',
+    mint900: '#015447',
+    skyblue5: '#F5FEFF',
+    skyblue25: '#EBFCFF',
+    skyblue50: '#E6FBFF',
+    skyblue100: '#CBEFFF',
+    skyblue200: '#9DE1FF',
+    skyblue300: '#70D3FF',
+    skyblue400: '#2EBFFF',
+    skyblue500: '#02B2FF',
+    skyblue600: '#00A5ED',
+    skyblue700: '#0092D3',
+    skyblue800: '#007CB2',
+    skyblue900: '#005F89',
+    indigo5: '#FAFAFF',
+    indigo25: '#F2F2FF',
+    indigo50: '#ECECFF',
+    indigo100: '#C0C4FF',
+    indigo200: '#8D99FF',
+    indigo300: '#606FFF',
+    indigo400: '#3F52FF',
+    indigo500: '#3948EC',
+    indigo600: '#2D3CDC',
+    indigo700: '#2835BE',
+    indigo800: '#202BA4',
+    indigo900: '#162191',
+    orange5: '#FFFAF7',
+    orange25: '#FFF5EF',
+    orange50: '#FFF0E5',
+    orange100: '#FFCCAD',
+    orange200: '#FFA168',
+    orange300: '#FF8B44',
+    orange400: '#FF7B2B',
+    orange500: '#FF6B10',
+    orange600: '#F55D00',
+    orange700: '#D85200',
+    orange800: '#BA4700',
+    orange900: '#983A00',
+};
+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, // TODO: singlebutton colorSystem에 연결되어 있어서 적용 못함
+    controlSwitchEnabledOffInnerCircle: basicColors.white,
+    controlSwitchDisabledOnInnerCircle: basicColors.white,
+    controlSwitchDisabledOffInnerCircle: basicColors.white,
+    dividerM: basicColors.gray25,
+    card: basicColors.white,
+    segmentControlContainer: basicColors.gray50,
+    segmentControlSegment: basicColors.white,
+    datepickerDayFocusTextInGray: basicColors.white,
+    datepickerTodayFocusDotInGray: basicColors.white,
+    chipDefaultText: basicColors.gray700, // TODO: rename only gray
+};
+exports.semanticColors = semanticColors;
+const semanticColorsMethod = {
+    buttonSubDisabledText: (colorType) => basicColors[`${colorType}100`],
+};
+exports.semanticColorsMethod = semanticColorsMethod;