enerdot-front-system 0.0.29-beta.8 → 0.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "enerdot-front-system",
   "private": false,
-  "version": "0.0.29-beta.8",
+  "version": "0.1.0",
   "type": "module",
   "keywords": [
     "enerdot-front-system",
@@ -19,22 +19,32 @@
     "!dist/vite.config.d.ts",
     "!dist/logo.svg",
     "!dist/App.d.ts",
-    "!main.d.ts"
+    "!main.d.ts",
+    "src/theme.scss",
+    "src/lib/styles/_variables.scss"
   ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "prepare": "rm -rf dist && tsc && vite build",
-    "add:package": "yarn add ./enerdot-front-system-v0.0.29-beta.8.tgz",
-    "reset:package": "yarn remove enerdot-front-system && yarn cache clean && rm -rf ./enerdot-front-system-v0.0.29-beta.8.tgz"
+    "generate:variables": "yarn node --loader ts-node/esm generate-scss.ts",
+    "prepare": "yarn generate:variables && rm -rf dist && tsc && vite build",
+    "add:package": "yarn add ./enerdot-front-system-v0.1.0.tgz",
+    "reset:package": "yarn remove enerdot-front-system && yarn cache clean && rm -rf ./enerdot-front-system-v0.1.0.tgz"
   },
   "exports": {
+    "./scss/variables": "./src/lib/styles/_variables.scss",
+    "./scss/theme-variables": "./src/theme.scss",
     ".": {
       "types": "./dist/lib/index.d.ts",
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.es.js"
+    },
+    "./server": {
+      "types": "./dist/lib/server.d.ts",
+      "require": "./dist/server.cjs.js",
+      "import": "./dist/server.es.js"
     }
   },
   "peerDependencies": {
@@ -62,12 +72,14 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1",
     "sass": "^1.86.1",
-    "typescript": "~5.6.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.18.2",
     "url": "^0.11.4",
     "vite": "^6.0.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.4.0"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/lib/styles/_variables.scss

@@ -0,0 +1,108 @@
+// THIS FILE IS AUTO-GENERATED BY generate-scss.ts
+// Generated at: 2026-01-07 09:57:19
+// 수정하지 말것( 수정은 lib>theme>color.style.ts>themeColors에서
+
+$white: #FFFFFF;
+$black: #222222;
+$dark_black: #030A18;
+$gray50: #FBFBFB;
+$gray100: #F7F8F9;
+$gray200: #EBEDF2;
+$gray300: #DADEE5;
+$gray400: #C6CBD3;
+$gray500: #BABFC9;
+$gray600: #A3A8B4;
+$gray700: #8A8F9D;
+$gray800: #6D717D;
+$gray900: #4A515D;
+$blue100: #F1F5FE;
+$blue150: #E4EBFF;
+$blue200: #CEDBFF;
+$blue300: #A7BFFF;
+$blue400: #7EA1FF;
+$blue500: #5884FF;
+$blue600: #3369FF;
+$blue700: #2B59D9;
+$blue800: #244BB5;
+$blue900: #1D3C91;
+$red50: #FFF1EF;
+$red100: #FFACAD;
+$red200: #FF8182;
+$red300: #FA4549;
+$red400: #CF222E;
+$red500: #82071E;
+$orange50: #FFF1E5;
+$orange100: #FFD0AA;
+$orange200: #FFB37D;
+$orange300: #FF8E40;
+$orange400: #E16F24;
+$orange500: #953800;
+$green50: #EFFDEE;
+$green100: #8AE3A1;
+$green200: #4DD470;
+$green300: #1CB854;
+$green400: #149E53;
+$green500: #086A49;
+$yellow50: #FEF9E6;
+$yellow100: #FADD78;
+$yellow200: #F7CC33;
+$yellow300: #F7B200;
+$yellow400: #CB9D26;
+$yellow500: #956B00;
+$dark_gray50: #F7F8FA;
+$dark_gray100: #E4E8EF;
+$dark_gray200: #C7D0DE;
+$dark_gray250: #C7D0DE;
+$dark_gray300: #7E8EA2;
+$dark_gray400: #5C6B80;
+$dark_gray500: #4F5E72;
+$dark_gray600: #334050;
+$dark_gray700: #2F3A4F;
+$dark_gray750: #212B3E;
+$dark_gray800: #1C2736;
+$dark_gray850: #141F2D;
+$dark_gray900: #0B111D;
+$dark_blue100: #EEF8FF;
+$dark_blue200: #C2E8FF;
+$dark_blue300: #8ED3FF;
+$dark_blue400: #61C2FF;
+$dark_blue500: #2DAEFF;
+$dark_blue600: #1B8CE3;
+$dark_blue700: #2356A3;
+$dark_blue800: #193C70;
+$dark_blue900: #132B51;
+$dark_cyan50: #E2FBFF;
+$dark_cyan100: #A3F1FF;
+$dark_cyan200: #7BEBFF;
+$dark_cyan300: #40E3FF;
+$dark_cyan400: #1FC0DC;
+$dark_cyan500: #217C8C;
+$dark_red50: #FFEBE8;
+$dark_red100: #FFAAA5;
+$dark_red200: #FF817A;
+$dark_red300: #FB453D;
+$dark_red400: #CA2020;
+$dark_red500: #791F2D;
+$dark_green50: #C4F5CF;
+$dark_green100: #8AEC99;
+$dark_green200: #65E679;
+$dark_green300: #34D64B;
+$dark_green400: #35873D;
+$dark_green500: #114410;
+$dark_yellow50: #FFF9B8;
+$dark_yellow100: #FFE975;
+$dark_yellow200: #FFE34A;
+$dark_yellow300: #FFD509;
+$dark_yellow400: #A58515;
+$dark_yellow500: #503602;
+$dark_orange50: #FFEABB;
+$dark_orange100: #FFCC78;
+$dark_orange200: #FFBC4D;
+$dark_orange300: #FDA00E;
+$dark_orange400: #A66817;
+$dark_orange500: #522603;
+
+// Non-color variables
+$background: #f1f4ff;
+$tooltipZIndex: 2;
+$toastZIndex: 3;

package/src/theme.scss

@@ -0,0 +1,104 @@
+@use "./lib/styles/variables" as vars;
+
+:root[data-theme="dark"] {
+  //primary
+  --color-primary-normal: #{vars.$dark_blue500};
+  --color-primary-muted: #{vars.$dark_blue700};
+
+  //label
+  --color-label-emphasis: #{vars.$dark_gray50};
+  --color-label-high: #{vars.$dark_gray100};
+  --color-label-primary: #{rgba(vars.$dark_gray200, 0.88)};
+  --color-label-secondary: #{rgba(vars.$dark_gray250, 0.7)};
+  --color-label-tertiary: #{rgba(vars.$dark_gray250, 0.5)};
+  --color-label-disabled: #{rgba(vars.$dark_gray300, 0.48)};
+
+  // background/surface
+  --color-background-surface-surface: #{vars.$dark_gray900};
+  --color-background-surface-container: #{vars.$dark_gray800};
+  --color-background-surface-elevated: #{vars.$dark_gray750};
+
+  // background/container
+  --color-background-container-normal: #{rgba(vars.$dark_gray500, 0.28)};
+  --color-background-container-strong: #{rgba(vars.$dark_gray500, 0.36)};
+  --color-background-container-muted: #{rgba(vars.$dark_gray500, 0.16)};
+  --color-background-container-disabled: #{rgba(vars.$dark_gray500, 0.18)};
+
+  //line/normal
+  --color-line-normal-muted: #{rgba(vars.$dark_gray500, 0.28)};
+  --color-line-normal-default: #{rgba(vars.$dark_gray500, 0.32)};
+  --color-line-normal-disabled: #{rgba(vars.$dark_gray500, 0.05)};
+
+  //line/solid
+  --color-line-solid-default: #{vars.$dark_gray500};
+
+  //border
+  --color-border-teritary: #{vars.$dark_gray500};
+
+  //interaction
+  --color-interaction-hover: #{rgba(vars.$dark_gray500, 0.3)};
+  --color-field-line-focus: #{rgba(vars.$dark_gray200, 0.88)};
+
+  //palette
+  --color-palette-blue: #{vars.$dark_blue500};
+  --color-palette-cyan: #{vars.$dark_cyan300};
+  --color-palette-red: #{vars.$dark_red300};
+  --color-palette-green: #{vars.$dark_green200};
+  --color-palette-orange: #{vars.$dark_orange200};
+  --color-palette-yellow: #{vars.$dark_yellow100};
+  --color-palette-gray: #{rgba(vars.$dark_gray200, 0.88)};
+  --color-palette-background-gray: #{rgba(vars.$dark_gray500, 0.28)};
+
+  //legacy - 피그마 업뎃 없이 임의로 추가한 항목
+  --color-border-success: #{vars.$dark_green300};
+  --color-label-required: #{vars.$dark_red300};
+}
+
+:root[data-theme="light"] {
+  //primary
+  --color-primary-normal: #{vars.$blue600};
+
+  //label
+  --color-label-emphasis: #{vars.$gray900};
+  --color-label-high: #{vars.$blue600};
+  --color-label-disabled: #{vars.$gray300};
+
+  --color-label-primary: black;
+  --color-label-secondary: #{vars.$gray700};
+  --color-label-tertiary: #{vars.$dark_gray500};
+
+  // background/surface
+  --color-background-surface-elevated: #{vars.$white};
+
+  //background
+  --color-line-normal-default: #{vars.$gray400};
+  --color-line-normal-muted: #{vars.$gray300};
+
+  --color-background-container-normal: #{vars.$white};
+  --color-background-container-strong: #{vars.$blue600};
+  --color-background-container-disabled: #{vars.$gray100};
+
+  //line/normal
+  --color-line-solid-muted: transparent;
+
+  //border
+  --color-border-teritary: #{vars.$gray300};
+
+  //interaction
+  --color-interaction-hover: #{rgba(vars.$gray500, 0.3)};
+  --color-field-line-focus: #{vars.$blue600};
+
+  //palette
+  --color-palette-blue: #{vars.$blue600};
+  --color-palette-cyan: #{vars.$dark_cyan300};
+  --color-palette-red: #{vars.$red300};
+  --color-palette-green: #{vars.$green300};
+  --color-palette-orange: #{vars.$orange300};
+  --color-palette-yellow: #{vars.$yellow300};
+  --color-palette-gray: #{vars.$gray800};
+  --color-palette-background-gray: #{vars.$gray200};
+
+  //legacy
+  --color-border-success: #{vars.$green300};
+  --color-label-required: #{vars.$red300};
+}

package/dist/lib/components/DateSelector/DateRangePicker/Button.d.ts

@@ -1,10 +0,0 @@
-interface ButtonProps {
-    level: "small" | "large";
-    dateType: "day" | "month" | "year";
-    format: "hyphenFormat" | "dotFormat";
-    onClick: () => void;
-    disabled?: boolean;
-    dates: [moment.Moment, moment.Moment];
-}
-declare const Button: ({ level, dateType, onClick, format, disabled, dates, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/lib/hooks/useTooltip.d.ts

@@ -1,2 +0,0 @@
-import { MutableRefObject } from 'react';
-export declare const useTooltip: (ref: MutableRefObject<HTMLElement>) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];

package/dist/lib/hooks/useTooltipPosition.d.ts

@@ -1,7 +0,0 @@
-type TooltipPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
-export declare const useTooltipPosition: ({ isOpen, containerRef, tooltipRef, }: {
-    isOpen: boolean;
-    containerRef: React.MutableRefObject<HTMLDivElement>;
-    tooltipRef: React.MutableRefObject<HTMLDivElement>;
-}) => TooltipPosition;
-export {};