Nextora 디자인 시스템
이 모음에서 모양에 대한 단일 권위자입니다. 하위 테마 코드, 블록 코드,
템플릿 및 패턴은 모두 여기에서 팔레트, 타이포그래피, 토큰, 스타일
변형 및 전환기를 참조합니다. 새 하위 테마를 만들 때는 nextora-child-themes와
함께, 스타일이 변경되거나 새 블록을 만들 때는 nextora-gutenberg-blocks와 함께
이 스킬을 로드하세요.
먼저 다음 참조를 로드하세요
| 파일 | 용도 |
|---|---|
references/presets-and-switching.md | 표준 프리셋 ID, 역할 변수, 범위 지정 색상 저장소 및 PHP 해석, 두 가지 스타일 메커니즘, 기능 게이트, 하위 테마가 기여하는 내용, 검색/병합 규칙, scheme-switcher.json 의미 체계, 런타임 우선 순위, 새 하위 테마 :root 역할 기본값 및 반대 주장 목록 |
../nextora-ecosystem/references/source-map.md | 출처 및 루트 해석 용어 |
../nextora-ecosystem/references/quality-gates.md | 게이트 및 공유 다운스트림 승인 레시피(§8) |
참조에 인용된 값은 앵커이며 현재 데이터가 아닙니다. 대상의
자체 theme.json, CSS 항목, styles/ 및 전환기 파일을 편집하기 전에 다시 읽으세요.
순서 있는 워크플로
1. 대상을 식별하고 실제 모양 소스 찾기
상위 테마 루트와 활성 테마 루트를 식별하세요. 그런 다음 순서대로 읽습니다:
theme.json (팔레트, 그라디언트, 글꼴 패밀리, 크기, 간격, styles,
customTemplates), 함께 제공되는 CSS 항목 (상위 테마의 경우 resources/css/app.css,
하위 테마의 자체 항목), styles/ 트리, 그리고 scheme-switcher.json.
스킬, 스크린샷 또는 샘플 하위 테마에서 팔레트 값을 가져오지 마세요.
2. 올바른 메커니즘 결정
| 필요 사항 | 사용 |
|---|---|
| 작성자가 블록 래퍼의 색상/타이포그래피/간격 선택 | 코어 블록 supports + get_block_wrapper_attributes() |
| 블록 자체 표면 내부의 색상 | 범위 지정 속성, 프리셋 슬러그로 저장, 출력 시 프리셋 변수로 해석 (§5) |
| 소유자가 선택하고 유지하는 사이트 전체 대체 모양 | theme.json 스타일 변형 (styles/*.json, styles/typography/*.json) |
| 방문자 대상 미리보기 선택 | 게이트 뒤에 있는 전환기 (§6) |
| 전체 하위 테마의 브랜드 기본값 | 하위 팔레트/글꼴 기여 + :root 역할 기본값 (§7) |
먼저 기본 지원을 선호합니다. 전역 스타일로 표현할 수 없을 때만 범위 지정 재정의를 추가하고, 이러한 메커니즘 외에 두 번째 모양 시스템을 만들지 마세요.
3. 프리셋을 추가적으로 그리고 식별자로 변경
슬러그를 추가하고, 상위 슬러그가 상속한 내용이 이미 사용하는 이름을 바꾸거나 가리키는 대상을 변경하지 마세요.
모든 표면은 var(--wp--preset--color--<slug>),
var(--wp--preset--gradient--<slug>) 또는 var(--wp--preset--font-family--<slug>)를 읽으므로,
theme CSS의 리터럴 16진수는 해당 표면을 팔레트 변경 및
전환기에서 제외시킵니다. Tailwind @theme 별칭은 CSS 빌드가 사용하는 경우에만 미러링하고,
이전 가이드에서 별칭 블록을 복사하는 대신 각 별칭이 실제로 가리키는 대상을 확인하세요 —
현재 상위 테마의 --color-secondary는 paragraph 프리셋으로 해석됩니다.
4. Nextora 역할을 통해 타이포그래피 라우팅
본문, 제목 및 버튼 타이포그래피는 --nextora-font-body,
--nextora-font-heading 및 --nextora-font-button을 통해 해석됩니다. theme.json은
var(--nextora-font-body)를 사용합니다. 전환기는 이 세 가지 속성을 구체적인 글꼴 스택으로
<html>에 인라인으로 씁니다. 프리셋 변수를 직접 읽는 표면은
방문자 글꼴 변경을 따르지 않습니다. theme.json에 글꼴 패밀리를 추가하거나 변경하고
(시스템 스택이 아닌 경우 fontFace 에셋 포함) 프리셋 선택으로 제공하기 전에 로드하세요.
5. 범위 지정 색상을 프리셋으로 저장하고 출력 시 해석
blocks/advanced-icon/color-utils.ts (normalizeColorForStorage, colorValueForPicker) 및
해당 PHP 대응 함수 (nextora_icon_resolve_color, nextora_icon_hex_to_preset_slug,
nextora_ac_resolve_color)의 기존 헬퍼 패턴을 따르세요: 선택한 프리셋은 슬러그를 저장합니다.
팔레트 항목과 일치하는 완전 불투명 16진수는 해당 항목의 슬러그로 정규화됩니다.
사용자 정의 색상 및 부분 알파 8자리 16진수는 리터럴로 유지됩니다. 그라디언트도 같은 방식으로 프리셋 ID를 유지합니다.
출력 시 저장된 슬러그는 var(--wp--preset--color--<slug>)가 되어 팔레트 변경이
해당 표면에 도달하고, 8자리 16진수는 sanitize_hex_color() 전에 처리됩니다.
빈 값은 "테마 기본값"을 의미하며 아무것도 내보내지 않습니다.
실제 시그니처를 재사용하고 병렬 해석기를 작성하지 마세요. 색상 컨트롤은
새니타이저가 아닙니다: 저장된 HTML은 여전히 wp_kses_post()를 통과합니다.
6. 전환기 게이트 존중 및 데이터만 기여, 코드는 제외
방문자 전환기는 NEXTORA_COLOR_SCHEME_SWITCHER가 엄격히 true일 때만 존재합니다.
그렇지 않은 경우, 페이로드, 스크립트, 페이지 테마 CSS 및 팝오버가 없습니다 —
그리고 하위 테마 쪽에서 그 공백을 메우기 위해 대체품을 작성해서는 안 됩니다.
하위 테마는 데이터를 기여합니다: styles/color-scheme/*.json, styles/font-preset/*.json,
선택적으로 번들 변형을 위한 styles/*.json, 그리고 선택적으로
scheme-switcher.json 허용 목록. 새 하위 테마를 작성할 때는 프리셋 글꼴을 고정하는 대신
(참조 §7) :root에 하위 테마 자체 기본 역할을 늦게 로드되는 CSS에서 설정하세요.
하위 테마에 전환기 구현을 절대 추가하지 마세요.
7. 실제 표면에서 확인
대상의 자체 스크립트 (npm run build:css 또는 npm run build)로 빌드하세요 —
assets/css/* 출력을 편집하지 말고, 빌드가 assets/js/scheme-switcher.js를
재생성한다고 말하지 마세요. 이 파일은 수동으로 유지되며 파이프라인 외부에 있습니다.
그런 다음 ../nextora-ecosystem/references/quality-gates.md 및 §8
디자인 시스템 레시피와 references/presets-and-switching.md §10의 프리셋별 단계를
적용하세요.
엄격한 제한
- 브랜드 팔레트를 하드코딩하지 마세요. 값은 대상의 활성 프리셋에서 가져옵니다.
- 이전 문서에서 오래된 대체 16진수를 새 테마 CSS로 전파하지 마세요.
- 전환기를 다시 구현하지 말고, 샘플 하위 테마가 올바르게 보인다고 해서 제대로 작동한다고 주장하지 마세요: 샘플은 자체 글꼴을 고정하고 하위 테마 전용 팔레트 항목을 추가합니다.
- 색상 URL 매개변수가 이미 해석된 번들 테마를 재정의하거나, 재설정이 사이트 편집기 스타일을 지운다고 약속하지 마세요.
- 테마 스타일시트에서
wp-admin크롬을 다시 스타일링하지 마세요. 편집기 재설정은 편집기 캔버스 내부에 유지됩니다. - 선언된 WordPress/PHP 최소 버전을 조용히 올리지 말고 대신 요구 사항을 표시하세요.
- 이 작업을 수행하는 동안 상위 테마 또는 샘플 하위 테마를 수정하지 마세요.
완료 확인
- 대상 테마가 확인되었습니다. 참조된 모든 프리셋, 글꼴, 그라디언트 및 토큰이
해당 테마의
theme.json/변형에 존재합니다. - 2단계의 메커니즘 테이블을 따랐습니다. 기본 지원이 충분한 곳에서 사용되었습니다.
- 타이포그래피가
--nextora-font-*역할을 통해 해석되고 프리셋 변경을 따릅니다. - 범위 지정 색상은 색상이 프리셋과 일치하는 경우 프리셋 슬러그를 저장하고, 사용자 정의 및 부분 알파 값은 리터럴로 유지하며, 프리셋 변수를 통해 렌더링됩니다.
- 전환기 게이트가 존중됩니다. 하위 테마 기여는 데이터만입니다. 새 하위 테마 기본 쌍은
:root에서 역할을 통해 선언됩니다. - 스타일 변형(영구적)과 전환기(런타임 미리보기)는 서로 다른 것으로 설명되고 테스트됩니다.
- §8 승인 단계가 계산된 스타일에 대해 실행되었거나, 확인되지 않은 표면이 명확하게 보고되었습니다.
경계
마크다운 지침 및 소스 기반 참조만 해당됩니다: 런타임 스크립트, 생성기,
복사된 테마 트리, 패키지 관리 또는 설치 자동화, 상위 또는 하위 테마 소스 편집은
없습니다. 다운스트림 빌드 및 브라우저 확인 명령은 대상 테마에 속하며
../nextora-ecosystem/references/quality-gates.md에 나열되어 있습니다.