diff --git a/frontend/src/design-system/base.css b/frontend/src/design-system/base.css index e24f22db..9ea5d743 100644 --- a/frontend/src/design-system/base.css +++ b/frontend/src/design-system/base.css @@ -40,29 +40,55 @@ a { color: var(--ks-color-action); } .ks-danger-text { color: var(--ks-color-danger); } /* Global Ultra-Dense Form Control & Button Density Standardization (전역 통일 규격) */ -input[type="text"], input[type="number"], input[type="date"], select, .p-inputtext, .p-select, .p-dropdown { +input[type="text"], input[type="number"], input[type="date"], select, textarea, .p-inputtext, .p-select, .p-dropdown, .ks-text-field__input, .ks-select__trigger, .ks-multi-select__trigger { height: var(--ks-control-height) !important; font-size: var(--ks-font-body) !important; padding: 0 var(--ks-space-2) !important; border-radius: var(--ks-radius-sm) !important; border-color: var(--ks-color-border) !important; + box-sizing: border-box; } -button, .p-button { +button, .p-button, .ks-button { height: var(--ks-control-height) !important; font-size: var(--ks-font-body) !important; padding: 0 var(--ks-space-3) !important; border-radius: var(--ks-radius-sm) !important; + box-sizing: border-box; } -.p-button-sm { +.p-button-sm, .ks-button--sm { height: 24px !important; font-size: var(--ks-font-caption) !important; padding: 0 var(--ks-space-2) !important; } -.p-button-lg { +.p-button-lg, .ks-button--lg { height: 32px !important; font-size: var(--ks-font-section) !important; padding: 0 var(--ks-space-4) !important; } + +/* Global Status Tags, Badges & Labels Standardization */ +.ks-status-tag, .p-tag, .p-badge { + font-size: var(--ks-font-caption) !important; + height: 20px !important; + padding: 0 var(--ks-space-2) !important; + border-radius: var(--ks-radius-sm) !important; + line-height: 18px !important; +} + +/* Global Dialog & Modal Standardization */ +.p-dialog-header, .ks-dialog__header { + padding: var(--ks-space-3) var(--ks-space-4) !important; + font-size: var(--ks-font-section) !important; +} + +.p-dialog-content, .ks-dialog__content { + padding: var(--ks-space-4) !important; + font-size: var(--ks-font-body) !important; +} + +.p-dialog-footer, .ks-dialog__footer { + padding: var(--ks-space-3) var(--ks-space-4) !important; +} diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css index 22b7b468..d7d31820 100644 --- a/frontend/src/design-system/tokens.css +++ b/frontend/src/design-system/tokens.css @@ -105,6 +105,8 @@ --font-size-xs: var(--ks-font-caption); --font-size-sm: var(--ks-font-grid); --font-size-base: var(--ks-font-body); + --font-size: var(--ks-font-body); + --input-height: var(--ks-control-height); --transition-fast: var(--ks-transition-fast); --transition-base: var(--ks-transition-smooth); --transition-normal: var(--ks-transition-smooth);