Cleaning up our font system

Contribute UX
26

폰트 크기의 상대적 변화가 괜찮다면, :root 요소에 다른 폰트 크기를 설정하기만 하면 됩니다. 그러면 em 단위가 그에 맞춰 자동으로 조정됩니다.

3개의 좋아요
27

무언가를 놓치고 있는 건가요, 아니면 테마/플러그인에 발포 위험(footgun)을 주지 않으려는 것인가요? 이 모든 변수를 !default로 선언하는 것은 이들을 오버라이드할 수 있게 하는 쉬운 방법처럼 보입니다.

2개의 좋아요
28

핵심 스타일이 테마가 오버라이드하기 전에 컴파일되었기 때문에 이전에는 작동하지 않았다는 말씀이신가요? 어쨌든 색상은 그런 방식이었죠… SCSS 컴파일 방식이 일부 변경되었다는 것은 알고 있으니, 이제 그런 문제가 아닐 수도 있겠네요.

!default가 충분하지 않다면, 색상에서처럼 CSS 커스텀 프로퍼티로 전환하는 것도 가능합니다.

3개의 좋아요
29

아 맞다. 결국 커스텀 속성이 정답인 것 같네요! :muscle:

4개의 좋아요
30

리팩토링을 올려두었습니다. 검토해 주세요. 이번 방식이 모든 스타일시트가 변수를 사용하거나 업데이트할 수 있도록 하는 데 더 적합할 수 있습니다:

좀 더 이해가 된 것 같습니다 – 현재 여기에서 정의된 모든 변수는 테마/플러그인에서 읽기는 가능하지만, 각 스타일시트가 개별적으로 컴파일되므로 새 값을 쓰기는 불가능합니다. CSS 커스텀 프로퍼티를 추가하면 테마/플러그인이 변수를 동적으로 오버라이드할 수 있고, 모든 종속 스타일시트가 새 값을 가져가게 됩니다. :slight_smile:

3개의 좋아요
31

hey @bekircem, 위의 변경 사항이 병합되었으니 이제 클라이언트 측 CSS 속성을 재정의하는 방식으로 기본 폰트 변수를 오버라이드하는 테마를 추가할 수 있습니다:

// 이 값들은 사용하지 않는 것이 좋습니다. 다만 개념을 이해하는 데 참고할 수 있습니다:
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}
3개의 좋아요