enerdot-front-system 0.1.0-beta.2 → 0.1.0-beta.21

package/src/lib/styles/_variables.scss

@@ -1,5 +1,5 @@
 // THIS FILE IS AUTO-GENERATED BY generate-scss.ts
-// Generated at: 2026-01-07 14:42:12
+// Generated at: 2026-07-01 08:46:51
 // 수정하지 말것( 수정은 lib>theme>color.style.ts>themeColors에서
 
 $white: #FFFFFF;
@@ -25,6 +25,12 @@ $blue600: #3369FF;
 $blue700: #2B59D9;
 $blue800: #244BB5;
 $blue900: #1D3C91;
+$cyan50: #E2FBFF;
+$cyan100: #A3F1FF;
+$cyan200: #7BEBFF;
+$cyan300: #40E3FF;
+$cyan400: #00ABC9;
+$cyan500: #217C8C;
 $red50: #FFF1EF;
 $red100: #FFACAD;
 $red200: #FF8182;
@@ -49,10 +55,16 @@ $yellow200: #F7CC33;
 $yellow300: #F7B200;
 $yellow400: #CB9D26;
 $yellow500: #956B00;
+$violet50: #F1E2FF;
+$violet100: #D1A0FF;
+$violet200: #AC5EFF;
+$violet300: #A748FF;
+$violet400: #831FDF;
+$violet500: #58208C;
 $dark_gray50: #F7F8FA;
 $dark_gray100: #E4E8EF;
 $dark_gray200: #C7D0DE;
-$dark_gray250: #C7D0DE;
+$dark_gray250: #A0B0C5;
 $dark_gray300: #7E8EA2;
 $dark_gray400: #5C6B80;
 $dark_gray500: #4F5E72;
@@ -63,6 +75,7 @@ $dark_gray800: #1C2736;
 $dark_gray850: #141F2D;
 $dark_gray900: #0B111D;
 $dark_blue100: #EEF8FF;
+$dark_blue150: #222222;
 $dark_blue200: #C2E8FF;
 $dark_blue300: #8ED3FF;
 $dark_blue400: #61C2FF;
@@ -77,12 +90,12 @@ $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_red50: #FFE5EB;
+$dark_red100: #FFA3B9;
+$dark_red200: #FF7B9A;
+$dark_red300: #FF4577;
+$dark_red400: #D51F4A;
+$dark_red500: #831F36;
 $dark_green50: #C4F5CF;
 $dark_green100: #8AEC99;
 $dark_green200: #65E679;
@@ -101,8 +114,14 @@ $dark_orange200: #FFBC4D;
 $dark_orange300: #FDA00E;
 $dark_orange400: #A66817;
 $dark_orange500: #522603;
+$dark_violet50: #F1E2FF;
+$dark_violet100: #D1A0FF;
+$dark_violet200: #BF7AFF;
+$dark_violet300: #B164FF;
+$dark_violet400: #831FDF;
+$dark_violet500: #58208C;
 
 // Non-color variables
 $background: #f1f4ff;
-$tooltipZIndex: 2;
-$toastZIndex: 3;
+$tooltipZIndex: 1400;
+$toastZIndex: 1401;

package/src/theme.scss

@@ -1,9 +1,24 @@
 @use "./lib/styles/variables" as vars;
+:root {
+  --opacity-subtle: 78%;
+
+  --color-accent-subtle: color-mix(
+    in srgb,
+    var(--color-primary-normal),
+    transparent var(--opacity-subtle)
+  );
+}
 
 :root[data-theme="dark"] {
+  //static
+  --color-static-white: #{vars.$white};
+  --color-static-black: #{vars.$dark_black};
+
   //primary
-  --color-primary-normal: #{vars.$dark_blue500};
-  --color-primary-muted: #{vars.$dark_blue700};
+  --color-primary-assistive: #{vars.$dark_blue700};
+  --color-primary-normal: #{vars.$dark_blue600};
+  --color-primary-muted: #{rgba(vars.$dark_blue600, 0.22)};
+  --color-primary-strong: #{vars.$dark_blue500};
 
   //label
   --color-label-emphasis: #{vars.$dark_gray50};
@@ -14,20 +29,45 @@
   --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};
+  --color-background-surface-canvas: #{vars.$dark_gray900};
+  --color-background-surface-section: #{vars.$dark_gray800};
+  --color-background-surface-section-variant: #{vars.$dark_gray850};
+  --color-background-surface-elevated: #{vars.$dark_gray700};
 
-  // background/container
+  //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-strong: #{rgba(vars.$dark_gray500, 0.48)};
   --color-background-container-muted: #{rgba(vars.$dark_gray500, 0.16)};
-  --color-background-container-disabled: #{rgba(vars.$dark_gray500, 0.18)};
+  --color-background-container-normal-flat: #{rgba(vars.$dark_gray500, 0.28)};
+  --color-background-container-strong-flat: #{rgba(vars.$dark_gray500, 0.48)};
+  --color-background-container-muted-flat: #{rgba(vars.$dark_gray500, 0.16)};
+  --color-background-container-disabled: #{rgba(vars.$dark_gray500, 0.08)};
+  --color-background-container-disabled-solid: #{vars.$dark_gray600};
 
   //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)};
+  --color-line-normal-muted: #{rgba(vars.$dark_gray500, 0.28)};
+  --color-line-normal-border: #{rgba(vars.$dark_gray500, 0.32)};
+  --color-line-normal-divider: #{rgba(vars.$dark_gray500, 0.44)};
+  --color-line-normal-disabled: #{rgba(vars.$dark_gray500, 0.12)};
+
+  //line/solid
+  --color-line-solid-grid: #{vars.$dark_gray500};
+
+  //state
+  --color-state-normal: #{vars.$dark_gray50};
+
+  //alert/positive
+  --color-alert-positive-normal: #{vars.$dark_green200};
+  --color-alert-positive-muted: #{rgba(#65e679, 0.22)};
+
+  //alert/warning
+  --color-alert-warning-normal: #{vars.$dark_yellow200};
+  --color-alert-warning-muted: #{rgba(#ffe34a, 0.22)};
+
+  //alert/danger
+  --color-alert-danger-normal: #{vars.$dark_red300};
+  --color-alert-danger-muted: #{rgba(#ff4577, 0.22)};
 
   //line/solid
   --color-line-solid-default: #{vars.$dark_gray500};
@@ -36,7 +76,7 @@
   --color-border-teritary: #{vars.$dark_gray500};
 
   //interaction
-  --color-interaction-hover: #{rgba(vars.$dark_gray500, 0.3)};
+  --color-interaction-hover: #{rgba(vars.$dark_gray50, 0.08)};
   --color-field-line-focus: #{rgba(vars.$dark_gray200, 0.88)};
 
   //palette
@@ -47,16 +87,48 @@
   --color-palette-orange: #{vars.$dark_orange200};
   --color-palette-yellow: #{vars.$dark_yellow100};
   --color-palette-gray: #{rgba(vars.$dark_gray200, 0.88)};
+  --color-palette-violet: #{vars.$dark_violet300};
   --color-palette-background-gray: #{rgba(vars.$dark_gray500, 0.28)};
 
+  //shadow
+  --color-shadow-elevated: #{vars.$dark_gray900};
+
+  //==============component color styles=================
+
+  //field/bg
+  --comp-field-background-default: var(--color-background-container-normal);
+  --comp-field-background-title-table: var(--color-background-container-muted);
+
+  //field/line
+  --comp-field-line-default: #{rgba(vars.$dark_gray500, 0.32)};
+  --comp-field-line-focus: #{rgba(vars.$dark_gray200, 0.88)};
+  --comp-field-line-inactive: #{rgba(vars.$dark_gray500, 0.44)};
+
+  //field/text
+  --comp-field-text-placeholder: var(--color-label-secondary);
+  --comp-field-text-readonly: var(--color-label-high);
+
+  //chip/text
+  --comp-chip-text-neutral: var(--color-label-primary);
+  //tooltip
+  --comp-tooltip-background: var(--color-static-black);
+
   //legacy - 피그마 업뎃 없이 임의로 추가한 항목
   --color-border-success: #{vars.$dark_green300};
   --color-label-required: #{vars.$dark_red300};
+  --color-background-button-quaternary-primary: ;
 }
 
 :root[data-theme="light"] {
+  //static
+  --color-static-white: #{vars.$white};
+  --color-static-black: #{vars.$black};
+
   //primary
+  --color-primary-assistive: #{vars.$blue300};
   --color-primary-normal: #{vars.$blue600};
+  --color-primary-muted: #{vars.$blue700};
+  --color-primary-strong: #{vars.$blue500};
 
   //label
   --color-label-emphasis: #{vars.$gray900};
@@ -65,21 +137,47 @@
 
   --color-label-primary: black;
   --color-label-secondary: #{vars.$gray700};
-  --color-label-tertiary: #{vars.$dark_gray500};
+  --color-label-tertiary: #{vars.$gray500};
 
   // background/surface
+  --color-background-surface-canvas: #{vars.$blue100};
+  --color-background-surface-section: #{vars.$white};
+  --color-background-surface-section-variant: #{vars.$gray100};
   --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};
+  //background/container
+  --color-background-container-normal: #{vars.$gray100};
+  --color-background-container-strong: #{vars.$gray200};
+  --color-background-container-muted: #{vars.$gray50};
+  --color-background-container-normal-flat: #{vars.$white};
+  --color-background-container-strong-flat: #{vars.$white};
+  --color-background-container-muted-flat: #{vars.$white};
   --color-background-container-disabled: #{vars.$gray100};
+  --color-background-container-disabled-solid: #{vars.$gray100};
 
   //line/normal
   --color-line-solid-muted: transparent;
+  --color-line-normal-border: #{vars.$gray200};
+  --color-line-normal-divider: #{vars.$gray300};
+  --color-line-normal-disabled: transparent;
+
+  //line/solid
+  --color-line-solid-grid: #{vars.$gray300};
+
+  //state
+  --color-state-normal: #{vars.$gray900};
+
+  //alert/positive
+  --color-alert-positive-normal: #{vars.$green300};
+  --color-alert-positive-muted: #{rgba(#65e679, 0.22)};
+
+  //alert/warning
+  --color-alert-warning-normal: #{vars.$yellow300};
+  --color-alert-warning-muted: #{rgba(#ffe34a, 0.22)};
+
+  //alert/danger
+  --color-alert-danger-normal: #{vars.$red300};
+  --color-alert-danger-muted: #{rgba(#ff4577, 0.22)};
 
   //border
   --color-border-teritary: #{vars.$gray300};
@@ -90,13 +188,38 @@
 
   //palette
   --color-palette-blue: #{vars.$blue600};
-  --color-palette-cyan: #{vars.$dark_cyan300};
+  --color-palette-cyan: #{vars.$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};
+  --color-palette-gray: #{vars.$gray300};
+  --color-palette-violet: #{vars.$violet300};
+  --color-palette-background-gray: #{vars.$gray700};
+
+  //shadow
+  --color-shadow-elevated: #{rgba(vars.$gray800, 0.4)};
+
+  //==============component color styles=================
+
+  //field/bg
+  --comp-field-background-default: var(--color-static-white);
+  --comp-field-background-title-table: var(--color-background-container-normal);
+
+  //field/line
+  --comp-field-line-default: #{vars.$gray400};
+  --comp-field-line-focus: var(--color-primary-normal);
+  --comp-field-line-inactive: #{vars.$gray300};
+
+  //field/text
+  --comp-field-text-placeholder: var(--color-label-tertiary);
+  --comp-field-text-readonly: var(--color-label-emphasis);
+
+  //chip/text
+  --comp-chip-text-neutral: #{vars.$gray800};
+
+  //tooltip
+  --comp-tooltip-background: #{vars.$gray900};
 
   //legacy
   --color-border-success: #{vars.$green300};