/* ========================================================================== Component Tokens · design-tokens.css 다음에 로드 -------------------------------------------------------------------------- 3-Layer 구조 1. Primitive --color__brand--500 (design-tokens.css) 2. Semantic --color__action--default (design-tokens.css) 3. Component --button__bg--primary (이 파일) 규칙 · 컴포넌트 토큰은 Semantic 토큰만 참조합니다. (Primitive 직접 참조 금지) · 컴포넌트 CSS 는 이 파일의 토큰만 사용합니다. → 버튼만 다른 색으로 바꾸고 싶을 때 여기 한 줄만 고치면 됩니다. 네이밍 (BEM) --{component}__{property}--{variant}-{state} component = button, input, card ... property = bg, fg, border, radius, height, padding-x, shadow ... variant = primary, secondary, danger ... (없으면 기본형) state = hover, pressed, focus, disabled, checked, selected, error 예) --button__bg--primary 기본 상태 --button__bg--primary-hover hover 상태 --button__height--md 사이즈 modifier --button__radius modifier 없는 공통 값 포커스 링은 모든 컴포넌트가 전역 토큰(--focus__ring--*)을 공유합니다. ========================================================================== */ :root { /* ====================================================================== BUTTON variant: primary · brand · secondary · outline · ghost · danger ====================================================================== */ /* size */ --button__height--sm: var(--size__control--sm); --button__height--md: var(--size__control--md); --button__height--lg: var(--size__control--lg); --button__padding-x--sm: var(--space--3); --button__padding-x--md: var(--space--4); --button__padding-x--lg: var(--space--6); --button__font-size--sm: var(--font__size--sm); --button__font-size--md: var(--font__size--sm); --button__font-size--lg: var(--font__size--md); /* shared */ --button__radius: var(--radius--md); --button__gap: var(--space--2); --button__font-weight: var(--font__weight--semibold); --button__icon-size: var(--size__icon--md); --button__duration: var(--motion__duration--fast); --button__easing: var(--motion__easing--standard); /* primary — 흰 글씨 (#C8431F) */ --button__bg--primary: var(--color__action--default); --button__bg--primary-hover: var(--color__action--hover); --button__bg--primary-pressed: var(--color__action--pressed); --button__fg--primary: var(--color__text--on-action); /* brand — 브랜드 원색 (#EC6A4E) + 어두운 글씨 */ --button__bg--brand: var(--color__action--brand); --button__bg--brand-hover: var(--color__action--brand-hover); --button__bg--brand-pressed: var(--color__action--brand-pressed); --button__fg--brand: var(--color__text--on-brand); /* secondary — 옅은 브랜드 배경 */ --button__bg--secondary: var(--color__action--subtle); --button__bg--secondary-hover: var(--color__action--subtle-hover); --button__bg--secondary-pressed: var(--color__brand-alpha--24); --button__fg--secondary: var(--color__text--brand-strong); /* outline — 투명 배경 + 브랜드 테두리 */ --button__bg--outline: transparent; --button__bg--outline-hover: var(--color__bg--selected); --button__bg--outline-pressed: var(--color__brand-alpha--16); --button__fg--outline: var(--color__text--brand); --button__fg--outline-hover: var(--color__text--brand-strong); --button__border--outline: var(--color__border--brand); --button__border--outline-disabled: var(--color__border--default); /* ghost — 배경/테두리 없음 */ --button__bg--ghost: transparent; --button__bg--ghost-hover: var(--color__bg--selected); --button__bg--ghost-pressed: var(--color__brand-alpha--16); --button__fg--ghost: var(--color__text--brand); --button__fg--ghost-hover: var(--color__text--brand-strong); /* danger */ --button__bg--danger: var(--color__action--danger); --button__bg--danger-hover: var(--color__action--danger-hover); --button__bg--danger-pressed: var(--color__action--danger-hover); --button__fg--danger: var(--color__text--inverse); /* disabled (공통) */ --button__bg--disabled: var(--color__action--disabled); --button__fg--disabled: var(--color__text--disabled); /* ====================================================================== LINK ====================================================================== */ --link__fg--default: var(--color__text--brand); --link__fg--hover: var(--color__text--brand-strong); --link__fg--pressed: var(--color__text--brand-strong); --link__fg--disabled: var(--color__text--disabled); --link__underline-offset: 0.2em; --link__underline-thickness: 1px; /* ====================================================================== INPUT (text field · textarea · select 공용) ====================================================================== */ /* size — 폰트 16px 는 iOS 자동 확대 방지 */ --input__height--sm: var(--size__control--sm); --input__height--md: var(--size__control--md); --input__height--lg: var(--size__control--lg); --input__padding-x: var(--space--3); --input__padding-y: var(--space--2); /* textarea */ --input__font-size: var(--font__size--md); --input__radius: var(--radius--md); --input__duration: var(--motion__duration--fast); /* bg */ --input__bg--default: var(--color__bg--default); --input__bg--disabled: var(--color__bg--muted); --input__bg--readonly: var(--color__bg--subtle); /* fg */ --input__fg--default: var(--color__text--primary); --input__fg--placeholder: var(--color__text--placeholder); --input__fg--disabled: var(--color__text--disabled); --input__icon--default: var(--color__icon--muted); /* border */ --input__border--default: var(--color__border--strong); --input__border--hover: var(--color__border--brand); --input__border--focus: var(--color__border--focus); --input__border--error: var(--color__border--error); --input__border--disabled: var(--color__border--default); /* ring (box-shadow) */ --input__ring--focus: var(--focus__ring--glow); --input__ring--error: 0 0 0 4px var(--color__feedback--error-bg); /* label / helper / error message */ --input__label-fg: var(--color__text--primary); --input__label-size: var(--font__size--sm); --input__label-weight: var(--font__weight--medium); --input__label-gap: var(--space--2); --input__helper-fg: var(--color__text--tertiary); --input__helper-size: var(--font__size--xs); --input__helper-gap: var(--space--1); --input__message-fg--error: var(--color__text--error); /* ====================================================================== CHECKBOX · RADIO ====================================================================== */ --checkbox__size: 1.25rem; --checkbox__radius: var(--radius--xs); --checkbox__gap: var(--space--2); --checkbox__bg--default: var(--color__bg--default); --checkbox__bg--hover: var(--color__bg--brand-subtle); --checkbox__bg--checked: var(--color__action--default); --checkbox__bg--checked-hover: var(--color__action--hover); --checkbox__bg--disabled: var(--color__bg--muted); --checkbox__border--default: var(--color__border--strong); --checkbox__border--checked: var(--color__action--default); --checkbox__border--error: var(--color__border--error); --checkbox__border--disabled: var(--color__border--default); --checkbox__fg--checked: var(--color__text--on-action); /* 체크 아이콘 */ --checkbox__fg--disabled: var(--color__text--disabled); --checkbox__label-fg: var(--color__text--primary); --radio__size: 1.25rem; --radio__radius: var(--radius--full); --radio__dot-size: 0.5rem; --radio__gap: var(--space--2); --radio__bg--default: var(--color__bg--default); --radio__bg--hover: var(--color__bg--brand-subtle); --radio__bg--checked: var(--color__action--default); --radio__bg--checked-hover: var(--color__action--hover); --radio__bg--disabled: var(--color__bg--muted); --radio__border--default: var(--color__border--strong); --radio__border--checked: var(--color__action--default); --radio__border--disabled: var(--color__border--default); --radio__fg--checked: var(--color__text--on-action); /* 가운데 점 */ --radio__label-fg: var(--color__text--primary); /* ====================================================================== SWITCH ====================================================================== */ --switch__width: 2.5rem; --switch__height: 1.5rem; --switch__thumb-size: 1.125rem; --switch__thumb-offset: 0.1875rem; /* (height - thumb) ÷ 2 */ --switch__radius: var(--radius--full); --switch__duration: var(--motion__duration--base); --switch__easing: var(--motion__easing--standard); --switch__bg--off: var(--color__border--strong); --switch__bg--on: var(--color__action--default); --switch__bg--on-hover: var(--color__action--hover); --switch__bg--disabled: var(--color__action--disabled); --switch__thumb-bg: var(--color__bg--default); --switch__thumb-shadow: var(--shadow--xs); /* ====================================================================== BADGE variant: neutral · brand · brand-solid · success · warning · error · info ====================================================================== */ --badge__height: 1.25rem; --badge__padding-x: var(--space--2); --badge__radius: var(--radius--full); --badge__font-size: var(--font__size--xs); --badge__font-weight: var(--font__weight--medium); --badge__bg--neutral: var(--color__bg--muted); --badge__fg--neutral: var(--color__text--secondary); --badge__bg--brand: var(--color__bg--brand-subtle); --badge__fg--brand: var(--color__text--brand-strong); --badge__bg--brand-solid: var(--color__bg--brand); --badge__fg--brand-solid: var(--color__text--on-brand); --badge__bg--success: var(--color__feedback--success-bg); --badge__fg--success: var(--color__feedback--success-fg); --badge__bg--warning: var(--color__feedback--warning-bg); --badge__fg--warning: var(--color__feedback--warning-fg); --badge__bg--error: var(--color__feedback--error-bg); --badge__fg--error: var(--color__feedback--error-fg); --badge__bg--info: var(--color__feedback--info-bg); --badge__fg--info: var(--color__feedback--info-fg); /* ====================================================================== CHIP (필터 · 태그) ====================================================================== */ --chip__height: var(--size__control--sm); --chip__padding-x: var(--space--3); --chip__radius: var(--radius--full); --chip__font-size: var(--font__size--sm); --chip__gap: var(--space--1); --chip__bg--default: var(--color__bg--muted); --chip__bg--hover: var(--color__bg--pressed); --chip__bg--selected: var(--color__bg--brand-subtle); --chip__bg--disabled: var(--color__bg--subtle); --chip__fg--default: var(--color__text--secondary); --chip__fg--selected: var(--color__text--brand-strong); --chip__fg--disabled: var(--color__text--disabled); --chip__border--default: transparent; --chip__border--selected: var(--color__border--brand); /* ====================================================================== CARD ====================================================================== */ --card__radius: var(--radius--lg); --card__padding--md: var(--space--5); --card__padding--sm: var(--space--4); --card__gap: var(--space--4); --card__duration: var(--motion__duration--base); --card__bg--default: var(--color__bg--default); --card__bg--filled: var(--color__bg--subtle); --card__bg--selected: var(--color__bg--brand-subtle); --card__border--default: var(--color__border--subtle); --card__border--hover: var(--color__border--default); --card__border--selected: var(--color__border--brand); --card__shadow--default: none; --card__shadow--elevated: var(--shadow--sm); --card__shadow--hover: var(--shadow--md); /* ====================================================================== ALERT (인라인 배너) variant: info · success · warning · error ====================================================================== */ --alert__radius: var(--radius--md); --alert__padding: var(--space--4); --alert__gap: var(--space--3); --alert__border-width: var(--border__width--thin); --alert__icon-size: var(--size__icon--lg); --alert__font-size: var(--font__size--sm); --alert__title-weight: var(--font__weight--semibold); --alert__bg--info: var(--color__feedback--info-bg); --alert__fg--info: var(--color__feedback--info-fg); --alert__border--info: var(--color__border--info); --alert__icon--info: var(--color__icon--info); --alert__bg--success: var(--color__feedback--success-bg); --alert__fg--success: var(--color__feedback--success-fg); --alert__border--success: var(--color__border--success); --alert__icon--success: var(--color__icon--success); --alert__bg--warning: var(--color__feedback--warning-bg); --alert__fg--warning: var(--color__feedback--warning-fg); --alert__border--warning: var(--color__border--warning); --alert__icon--warning: var(--color__icon--warning); --alert__bg--error: var(--color__feedback--error-bg); --alert__fg--error: var(--color__feedback--error-fg); --alert__border--error: var(--color__border--error); --alert__icon--error: var(--color__icon--error); /* ====================================================================== TOAST ====================================================================== */ --toast__bg: var(--color__bg--inverse); --toast__fg: var(--color__text--inverse); --toast__action-fg: var(--color__text--inverse); /* 밑줄로 구분 */ --toast__radius: var(--radius--md); --toast__padding-x: var(--space--4); --toast__padding-y: var(--space--3); --toast__gap: var(--space--3); --toast__max-width: 22.5rem; --toast__font-size: var(--font__size--sm); --toast__shadow: var(--shadow--lg); --toast__z-index: var(--z-index__layer--toast); /* ====================================================================== MODAL ====================================================================== */ --modal__bg: var(--color__bg--default); --modal__scrim: var(--color__bg--scrim); --modal__radius: var(--radius--xl); --modal__shadow: var(--shadow--xl); --modal__padding: var(--space--6); --modal__gap: var(--space--4); --modal__footer-gap: var(--space--2); --modal__width--sm: 25rem; /* 400 */ --modal__width--md: 32.5rem; /* 520 */ --modal__width--lg: 45rem; /* 720 */ --modal__title-fg: var(--color__text--primary); --modal__title-size: var(--font__size--xl); --modal__title-weight: var(--font__weight--semibold); --modal__body-fg: var(--color__text--secondary); --modal__body-size: var(--font__size--md); --modal__divider: var(--color__border--subtle); --modal__z-index--scrim: var(--z-index__layer--overlay); --modal__z-index: var(--z-index__layer--modal); /* ====================================================================== TABS ====================================================================== */ --tabs__height: var(--size__control--lg); --tabs__padding-x: var(--space--4); --tabs__gap: var(--space--1); --tabs__radius: var(--radius--sm); --tabs__font-size: var(--font__size--sm); --tabs__font-weight: var(--font__weight--medium); --tabs__font-weight--active: var(--font__weight--semibold); --tabs__fg--default: var(--color__text--secondary); --tabs__fg--hover: var(--color__text--primary); --tabs__fg--active: var(--color__text--brand); --tabs__fg--disabled: var(--color__text--disabled); --tabs__bg--hover: var(--color__bg--hover); --tabs__indicator: var(--color__border--brand); /* 활성 밑줄 #EC6A4E */ --tabs__indicator-height: var(--border__width--thick); --tabs__divider: var(--color__border--default); /* ====================================================================== TOOLTIP ====================================================================== */ --tooltip__bg: var(--color__bg--inverse); --tooltip__fg: var(--color__text--inverse); --tooltip__radius: var(--radius--sm); --tooltip__padding-x: var(--space--2); --tooltip__padding-y: var(--space--1); --tooltip__font-size: var(--font__size--xs); --tooltip__max-width: 15rem; --tooltip__shadow: var(--shadow--md); --tooltip__z-index: var(--z-index__layer--toast); /* ====================================================================== TABLE ====================================================================== */ --table__bg--default: var(--color__bg--default); --table__bg--header: var(--color__bg--subtle); --table__bg--row-hover: var(--color__bg--hover); --table__bg--row-selected: var(--color__bg--selected); --table__fg--default: var(--color__text--primary); --table__fg--header: var(--color__text--secondary); --table__border--outer: var(--color__border--default); --table__border--row: var(--color__border--subtle); --table__border--header: var(--color__border--default); --table__radius: var(--radius--lg); --table__padding-x: var(--space--4); --table__padding-y--md: var(--space--3); --table__padding-y--sm: var(--space--2); /* compact */ --table__font-size: var(--font__size--sm); --table__header-weight: var(--font__weight--semibold); } /* ========================================================================== 사용 예시 — 컴포넌트 CSS 는 컴포넌트 토큰만 참조 ========================================================================== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--button__gap); height: var(--button__height--md); padding: 0 var(--button__padding-x--md); border: var(--border__width--thin) solid transparent; border-radius: var(--button__radius); font: var(--button__font-weight) var(--button__font-size--md) / 1 var(--font__family--sans); cursor: pointer; transition: background-color var(--button__duration) var(--button__easing), border-color var(--button__duration) var(--button__easing); } .button--sm { height: var(--button__height--sm); padding: 0 var(--button__padding-x--sm); font-size: var(--button__font-size--sm); } .button--lg { height: var(--button__height--lg); padding: 0 var(--button__padding-x--lg); font-size: var(--button__font-size--lg); } .button--primary { background: var(--button__bg--primary); color: var(--button__fg--primary); } .button--primary:hover { background: var(--button__bg--primary-hover); } .button--primary:active { background: var(--button__bg--primary-pressed); } .button--brand { background: var(--button__bg--brand); color: var(--button__fg--brand); } .button--brand:hover { background: var(--button__bg--brand-hover); } .button--brand:active { background: var(--button__bg--brand-pressed); } .button--outline { background: var(--button__bg--outline); color: var(--button__fg--outline); border-color: var(--button__border--outline); } .button--outline:hover { background: var(--button__bg--outline-hover); color: var(--button__fg--outline-hover); } .button:disabled { background: var(--button__bg--disabled); color: var(--button__fg--disabled); border-color: transparent; cursor: not-allowed; } .button:focus-visible { outline: var(--focus__ring--width) solid var(--focus__ring--color); outline-offset: var(--focus__ring--offset); } .input { height: var(--input__height--md); padding: 0 var(--input__padding-x); border: var(--border__width--thin) solid var(--input__border--default); border-radius: var(--input__radius); background: var(--input__bg--default); color: var(--input__fg--default); font: var(--font__weight--regular) var(--input__font-size) / 1 var(--font__family--sans); transition: border-color var(--input__duration) var(--motion__easing--standard), box-shadow var(--input__duration) var(--motion__easing--standard); } .input::placeholder { color: var(--input__fg--placeholder); } .input:hover { border-color: var(--input__border--hover); } .input:focus { outline: none; border-color: var(--input__border--focus); box-shadow: var(--input__ring--focus); } .input--error { border-color: var(--input__border--error); } .input--error:focus { box-shadow: var(--input__ring--error); } .input:disabled { background: var(--input__bg--disabled); color: var(--input__fg--disabled); border-color: var(--input__border--disabled); } .input:read-only { background: var(--input__bg--readonly); cursor: default; } .input:read-only:hover { border-color: var(--input__border--default); } .badge { display: inline-flex; align-items: center; height: var(--badge__height); padding: 0 var(--badge__padding-x); border-radius: var(--badge__radius); font: var(--badge__font-weight) var(--badge__font-size) / 1 var(--font__family--sans); } .badge--brand { background: var(--badge__bg--brand); color: var(--badge__fg--brand); } .badge--success { background: var(--badge__bg--success); color: var(--badge__fg--success); } .badge--error { background: var(--badge__bg--error); color: var(--badge__fg--error); }