디자인 토큰

디자인 토큰(Design Tokens)은 디자인 시스템을 관리하기 위한 전략입니다.

디자인 시스템의 모든 재사용 가능한 요소(예: 색상, 글꼴, 간격 등)를 독립적인 변수로 추상화하여 전체 디자인 시스템에서 통합적으로 관리하고 적용할 수 있도록 합니다.

mdui는 전역 CSS 사용자 정의 속성을 사용해 디자인 토큰을 구현합니다. 즉, CSS 사용자 정의 속성만 수정하면 모든 mdui 컴포넌트의 스타일을 전역적으로 수정할 수 있습니다. 동시에 직접 개발하는 스타일의 경우에도 CSS 사용자 정의 속성을 우선적으로 참조하여 스타일이 mdui 컴포넌트의 스타일과 통일성을 유지하고, 다이내믹 컬러를 수정할 때 자신의 스타일도 색상 구성표를 동기적으로 업데이트할 수 있도록 하는 것이 좋습니다.

색상

mdui는 라이트 모드와 다크 모드에 대해 각각 한 세트의 CSS 사용자 정의 속성을 제공합니다. 라이트 모드에서 CSS 사용자 정의 속성 이름은 --mdui-color-{name}-light이며, 여기서 {name}은 색상 이름입니다. 다크 모드에서는 --mdui-color-{name}-dark입니다.

또한, mdui는 --mdui-color-{name}이라는 CSS 사용자 정의 속성 세트를 제공합니다. 이 속성은 라이트 모드에서 --mdui-color-{name}-light를 참조하고 다크 모드에서 --mdui-color-{name}-dark를 참조하므로 현재 라이트 모드/다크 모드에 따라 자동으로 색상이 전환됩니다.

일부 색상의 CSS 사용자 정의 속성을 수정해야 하는 경우 --mdui-color-{name}-light와 --mdui-color-{name}-dark 속성을 동시에 수정해야 합니다. CSS 사용자 정의 속성을 읽을 때는 --mdui-color-{name} 속성을 직접 사용하면 됩니다.

CSS 사용자 정의 속성의 속성값은 RGB 세 가지 색상을 ,로 구분한 값입니다. 다음 예제는 색상 CSS 사용자 정의 속성의 사용법을 보여줍니다:

/* primary 색상값 수정 */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* foo 요소의 배경색을 primary로 설정 */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* bar 요소의 배경색을 불투명도 0.8인 primary로 설정 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

완전히 새로운 색상 구성표를 만들어야 하는 경우 setColorScheme 함수를 사용하는 것이 좋습니다. 이 함수는 지정된 하나의 색상값을 기반으로 전체 색상 구성표를 생성합니다.

둥근 모서리

mdui는 7가지 크기의 둥근 모서리를 제공합니다. 다음은 이러한 둥근 모서리의 CSS 사용자 정의 속성을 사용하는 예시입니다:

/* extra-small의 둥근 모서리 크기 수정 */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* foo 요소의 둥근 모서리를 extra-small로 설정 */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

타이포그래피

mdui는 Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small의 15가지 텍스트 스타일을 제공합니다.

사용 예시는 다음과 같습니다:

/* Body large 텍스트 스타일 수정 */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* foo 요소의 텍스트 스타일을 Body large로 설정 */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

상태 레이어 불투명도

일부 mdui 컴포넌트는 상호작용 시 그 위에 반투명 오버레이를 추가합니다. 예를 들어 <mdui-button> 컴포넌트는 마우스 호버, 포커스, 클릭 또는 드래그 시 반투명 오버레이가 나타납니다. CSS 사용자 정의 속성을 수정하여 이러한 오버레이의 불투명도를 조정할 수 있습니다.

사용 예시는 다음과 같습니다:

/* 상태 레이어 불투명도 수정 */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

그림자 (음영)

일부 mdui 컴포넌트는 페이지에서의 입체감을 시뮬레이션하기 위해 그림자 효과를 가집니다. CSS 사용자 정의 속성을 수정하여 컴포넌트의 그림자 효과를 조정할 수 있습니다.

사용 예시는 다음과 같습니다:

/* level1 레벨의 그림자 수정 */
:root {
  --mdui-elevation-level1:
    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* foo 요소의 그림자를 level1로 설정 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

애니메이션

mdui 컴포넌트의 애니메이션 타이밍 함수와 지속 시간은 CSS 사용자 정의 속성으로 구성할 수 있습니다.

사용 예시는 다음과 같습니다:

/* standard 타이밍 함수 및 short1 지속 시간 수정 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* foo 요소의 전환 효과를 standard 타이밍 함수와 short1 지속 시간으로 설정 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

반응형 브레이크포인트

mdui는 일련의 반응형 브레이크포인트를 제공하며, 이러한 브레이크포인트는 CSS 사용자 정의 속성으로 구성할 수 있습니다. 사용 예시는 다음과 같습니다:

/* sm 브레이크포인트 값 수정 */
:root {
  --mdui-breakpoint-sm: 560px;
}

이러한 CSS 사용자 정의 속성은 CSS 미디어 쿼리 내에서 사용할 수 없다는 점에 유의하세요. 다음은 잘못된 예시입니다:

/* 잘못된 사용법. 미디어 쿼리에서는 CSS 사용자 정의 속성을 사용할 수 없습니다 */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

JavaScript에서 브레이크포인트 판단이 필요한 경우 breakpoint 함수를 사용합니다.