themeOverrideStyle

themeOverrideStyle(overrides, overrideTypes)는 ThemeProvider가 overrides로 설정하는 공개 --todae-* 커스텀 속성을 스타일 객체로 반환합니다. ThemeProvider의 overrides, overrideTypes prop과 같은 인자를 받고 같은 방식으로 검사합니다. 알 수 없는 키나 타입이 맞지 않는 값은 개발 환경에서 오류를 던지고, 프로덕션에서는 빠집니다.

themeOverrideStyle({ 'color.fg.default': { colorSpace: 'oklch', components: [0.2, 0, 0] } });
// { '--todae-color-fg-default': 'oklch(0.2 0 0)' }

여기 있는 나머지 헬퍼는 키나 값 하나를 다루며, 테마 편집기처럼 오버라이드를 텍스트로 편집하는 도구를 위한 것입니다.

• themeOverrideType(key)는 Todae 오버라이드 키의 $type(예: color, dimension)을 반환합니다.
• parseThemeValue(key, text)는 텍스트를 1.5rem, 200ms처럼 키의 타입에 맞는 값으로 읽고, 읽지 못하는 텍스트에는 차원 키의 16px처럼 null을 반환합니다. parseThemeColor(text)는 #3366cc나 oklch(0.5 0.1 30) 같은 색상을 읽습니다.
• themeValueCss(key, value)와 themeColorCss(value)는 값을 CSS로 씁니다.
• cssVarName(path)는 토큰 경로의 커스텀 속성을 반환합니다. 예를 들어 color.fg.default는 --todae-color-fg-default입니다.

언제 쓰나요

언제: 테마 편집기처럼 테마 오버라이드를 만들거나 편집하고, 그 값을 읽거나 검사하거나 CSS로 보여 주는 도구.

쓰지 않을 때: 페이지 일부의 오버라이드 → ThemeProvider의 overrides. 빌드할 때 아는 값 → 회사 토큰 패키지.

Props