애플리케이션 개발자용
스타일링 구성요소
의미론적 CSS 변수에서 기존 구성요소를 가리킵니다. 테마 변경에는 CSS 재구축이나 구성 요소 다시 렌더링이 필요하지 않습니다.의미변수를 직접 사용
런타임 테마 값에서 사전 설정 또는 빌드 클래스 이름별로 정적 스타일시트를 생성하지 마십시오. 규칙을 안정적으로 유지하고 런타임이 변수 값을 대체하도록 합니다.
css
.card {
color: var(--oria-color-surface-fg);
background: var(--oria-color-surface-raised);
border: var(--oria-border-width-default) solid var(--oria-color-border);
border-radius: var(--oria-radius-lg);
box-shadow: var(--oria-shadow-md);
}
.page {
background: var(--oria-pattern-bg, none),
var(--oria-gradient-bg, var(--oria-color-bg));
}Tailwind v4의 의미 체계 값 매핑
@oriatheme/tailwind(@oriatheme/tailwind/oria.css, oria 테마 tailwind-bridge를 사용하여 사용자 정의 접두사 생성)에서 사전 구축된 정적 브리지를 사용하여 직접 작성한 매핑을 건너뜁니다.
css
@import "tailwindcss";
@theme inline {
--color-background: var(--oria-color-bg);
--color-foreground: var(--oria-color-fg);
--color-surface: var(--oria-color-surface);
--color-primary: var(--oria-color-primary);
--color-primary-foreground: var(--oria-color-primary-fg);
--radius-lg: var(--oria-radius-lg);
--shadow-md: var(--oria-shadow-md);
}tsx
<section className="rounded-lg bg-surface p-4 text-foreground shadow-md">
<button className="bg-primary px-4 py-2 text-primary-foreground">
Save changes
</button>
</section>기본 색상이 안정적으로 유지됩니다.
@oriatheme/colors provides 26 fixed families and 11 steps for selection and general styling; they do not change with a theme. Only semantic --oria-* variables respond to the theme.