다양한 스타일을 블록 테마에 주고 싶어서 스타일 파일을 만들었다.
하지만 다른 참고용 테마에서 나타나는 카드형태가 아니라
색상 팔레트 형식으로만 나타나고 색상 대비도 그다지 명확하지 않았다.
왜그런지 여러가지로 알아보니 내가 설정한 스타일이 너무 단순해서였다.

스타일 변형이 보이는 최소 조건

테마 루트에 styles/ 폴더.
그 안에 light.json, dark.json 같은 파일.

각 파일은 JSON.
필수 키는 version, title.
주석·트레일링 콤마 금지.
UTF-8(BOM 없음).

{
  "version": 3,
  "title": "Light"
}

카드가 참조하는 대표 속성

카드는 아주 제한적으로 미리봄.

가장 확실하게 드러나는 것:

styles.color.background (배경색)
styles.color.text (본문 텍스트 색)
styles.typography.* (Aa 샘플: 폰트/크기/줄간격)

결국 카드에서 나타나는 것은 이 3가지 인데 타이포가 없으면 색상 팔레트만 나타

카드에서 “확” 다르게 보이게 하는 법

배경과 본문 텍스트 대비를 크게.
폰트 패밀리를 변형마다 바꾸기(serif vs sans).

{
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--bg)",
      "text": "var(--wp--preset--color--fg)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--serif)",
      "fontSize": "var(--wp--preset--font-size--base)"
    }
  }
}

팔레트만 살짝 바꾸면 카드가 비슷해 보임.
배경/텍스트/폰트를 함께 조정해 차이를 키워라.

변형은 “토큰”을 바꿔야 효과적

패턴/템플릿에서는 직접 색값 대신
토큰을 사용하도록 설계.

변형 파일은 토큰 값만 교체.
사이트 전반 룩이 한 번에 바뀜.

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "bg", "color": "#ffffff" },
        { "slug": "fg", "color": "#111111" },
        { "slug": "accent", "color": "#2563eb" }
      ]
    }
  }
}