sellmate-design-system-react 9.0.0-beta.24 → 9.0.0-beta.26

package/dist/theme.css

@@ -208,6 +208,7 @@
   --color-field-icon-default: #888888;
   --color-control-bg-inverseHover: #0075FF;
   --color-navigation-gnb-bg-dark: #001B39;
+  --color-navigation-gnb-bg-system: #004177;
   --color-primary-10: #EFF6FF;
   --color-primary-20: #E6F1FF;
   --color-primary-25: #D9EAFF;
@@ -497,6 +498,7 @@
   --sys-color-field-icon-default: #888888;
   --sys-color-control-bg-inverseHover: #0075FF;
   --sys-color-navigation-gnb-bg-dark: #001B39;
+  --sys-color-navigation-gnb-bg-system: #004177;
 
   /* 컴포넌트 토큰 */
   --cmp-button-xs-height: 24px;
@@ -1154,7 +1156,7 @@
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
-  --cmp-guide-contents-depth-paddingLeft: 32px;
+  --cmp-guide-contents-depth-paddingLeft: 24px;
   --cmp-progress-linear-height: 20px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
@@ -1313,6 +1315,86 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-gnb-system-panel-light-bg: #FFFFFF;
+  --cmp-gnb-system-panel-light-border: #E1E1E1;
+  --cmp-gnb-system-panel-dark-bg: #004177;
+  --cmp-gnb-system-panel-dark-border: #006AC1;
+  --cmp-gnb-system-panel-gap: 8px;
+  --cmp-gnb-system-panel-divider-color-light: #E1E1E1;
+  --cmp-gnb-system-panel-divider-color-dark: #006AC1;
+  --cmp-gnb-system-panel-divider-color-darker: #004290;
+  --cmp-gnb-system-domainTag-paddingX: 12px;
+  --cmp-gnb-system-domainTag-paddingY: 2px;
+  --cmp-gnb-system-domainTag-radius: 6px;
+  --cmp-gnb-system-domainTag-light-bg: #F6F6F6;
+  --cmp-gnb-system-domainTag-light-text: #555555;
+  --cmp-gnb-system-domainTag-dark-bg: #07284A;
+  --cmp-gnb-system-domainTag-dark-text: #FFFFFF;
+  --cmp-gnb-system-domainTag-darker-bg: #004177;
+  --cmp-gnb-system-domainTag-darker-text: #FFFFFF;
+  --cmp-gnb-system-item-height: 32px;
+  --cmp-gnb-system-item-radius: 8px;
+  --cmp-gnb-system-item-icon-frame: 24px;
+  --cmp-gnb-system-item-icon-glyph: 20px;
+  --cmp-gnb-system-item-icon-radius: 4px;
+  --cmp-gnb-system-item-iconLabelGap: 8px;
+  --cmp-gnb-system-item-light-bg-default: #FFFFFF;
+  --cmp-gnb-system-item-light-bg-hover: #F6F6F6;
+  --cmp-gnb-system-item-light-icon-bg: #FFFFFF;
+  --cmp-gnb-system-item-light-icon-default: #888888;
+  --cmp-gnb-system-item-light-text: #222222;
+  --cmp-gnb-system-item-dark-bg-default: #004177;
+  --cmp-gnb-system-item-dark-bg-hover: #025497;
+  --cmp-gnb-system-item-dark-icon-bg-default: #004177;
+  --cmp-gnb-system-item-dark-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-dark-text: #FFFFFF;
+  --cmp-gnb-system-item-darker-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-bg-hover: #002B5E;
+  --cmp-gnb-system-item-darker-icon-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-darker-text: #FFFFFF;
+  --cmp-gnb-system-actionButton-paddingLeft: 4px;
+  --cmp-gnb-system-actionButton-paddingRight: 6px;
+  --cmp-gnb-system-actionButton-selectData-gap: 4px;
+  --cmp-gnb-system-actionButton-selectData-icon: 16px;
+  --cmp-gnb-system-actionButton-selectData-text-light: #005CC9;
+  --cmp-gnb-system-actionButton-selectData-text-dark: #BBDAFF;
+  --cmp-gnb-system-actionButton-switch-icon: 16px;
+  --cmp-gnb-system-actionButton-switch-text-light: #555555;
+  --cmp-gnb-system-actionButton-switch-text-dark: #FFFFFF;
+  --cmp-gnb-system-actionButton-select-icon: 16px;
+  --cmp-gnb-system-accountButton-paddingY: 4px;
+  --cmp-gnb-system-accountButton-paddingX: 12px;
+  --cmp-gnb-system-accountButton-gap: 8px;
+  --cmp-gnb-system-accountButton-icon: 16px;
+  --cmp-gnb-system-accountButton-bg-default: #FFFFFF;
+  --cmp-gnb-system-accountButton-bg-hover: #F6F6F6;
+  --cmp-gnb-system-accountButton-bg-negativeHover: #FCEFEF;
+  --cmp-gnb-system-accountButton-content-default: #222222;
+  --cmp-gnb-system-accountButton-content-negative: #E30000;
+  --cmp-gnb-system-accountButton-selectData-gap: 4px;
+  --cmp-gnb-system-accountButton-selectData-icon: 16px;
+  --cmp-gnb-system-accountButton-selectData-text: #005CC9;
+  --cmp-gnb-system-accountListBox-width: 240px;
+  --cmp-gnb-system-accountListBox-bg: #FFFFFF;
+  --cmp-gnb-system-accountListBox-radius: 4px;
+  --cmp-gnb-system-accountListBox-userdata-bg: #F9F9F9;
+  --cmp-gnb-system-accountListBox-userdata-paddingX: 12px;
+  --cmp-gnb-system-accountListBox-userdata-paddingY: 8px;
+  --cmp-gnb-system-accountListBox-userdata-email-color: #888888;
+  --cmp-gnb-system-accountListBox-userdata-name-color: #555555;
+  --cmp-gnb-system-accountListBox-userdata-role-color: #888888;
+  --cmp-gnb-system-accountListBox-list-paddingY: 4px;
+  --cmp-gnb-system-alertButton-paddingX: 4px;
+  --cmp-gnb-system-alertButton-count-color-light: #0075FF;
+  --cmp-gnb-system-alertButton-count-color-dark: #FFD643;
+  --cmp-gnb-system-alertButton-bg-notificationHover-light: #EFF6FF;
+  --cmp-gnb-system-alertButton-icon-color-notification-light: #64ABFF;
+  --cmp-gnb-system-alertButton-icon-color-notification-dark: #FEE17C;
+  --cmp-gnb-system-setting-paddingX: 4px;
+  --cmp-gnb-system-min-padding: 8px;
+  --cmp-gnb-system-project-gap: 8px;
+  --cmp-gnb-system-project-padding: 8px;
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
@@ -1561,6 +1643,12 @@
     font-weight: 500;
     line-height: 20px;
   }
+  .typo-body-sm-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+  }
   .typo-body-sm-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 12px;

package/eslint/scale.gen.mjs

@@ -10,10 +10,10 @@ export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
+export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
 
 /** 필드 폭 등급 (px). SFieldWidth 의 'xs'|'sm'|'md'|'lg'|'xl' 이 풀리는 값이다 */
 export const FIELD_WIDTHS = {"xs":80,"sm":120,"md":160,"lg":240,"xl":480};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.24",
+  "version": "9.0.0-beta.26",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [