fix(components): change incorrect default value of css variable 'inherit' to 'initial'

[sungik-choi]

Self Checklist

• I wrote a PR title in English and added an appropriate label to the PR.
• I wrote the commit message in English and to follow the Conventional Commits specification.
• I added the changeset about the changes that needed to be released. (or didn't have to)
• I wrote or updated documentation related to the changes. (or didn't have to)
• I wrote or updated tests related to the changes. (or didn't have to)
• I tested the changes in various browsers. (or didn't have to)
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

• Fixes Inheritance bug in Badge internal text color #2006

Summary

Change incorrect default value of css variable 'inherit' to 'initial'

Details

잘못된 마이그레이션을 수정합니다. 기존에는 아래와 같은 사고 흐름으로 마이그레이션을 진행했었습니다.

// AS-IS
color: colorProp ? colorProp : inherit

// TO-BE
// 스타일 외부에서 --color를 조건부 주입하면 되겠다.
--color: inherit;
color: var(--color)

하지만 CSS variable의 초기 키워드로 inherit 을 설정하는 것과 해당 속성에 직접적으로 inherit 을 설정하는 건 동작이 아예 다릅니다.
위의 예를 들어, --color: inherit 은 color 속성에 상위 속성을 적용하는 게 아니라, 접근 가능한 가장 가까운 곳에 위치하는 --color 의 값을 상속하게됩니다. 한번 더 자세히 풀어보자면 아래와 같습니다.

<div style={{ '--color': 'red' }}>
  <div style={{ 'color': 'blue: }}>
    <Foo />
  </div>
</div>

맨 위 예제의 스타일이 적용된 컴포넌트를 Foo 라고 했을 때 Foo 의 color는 red 가 됩니다. --color 는 color가 아니라 상위 --color 의 값을 상속받고, color는 --color 의 값을 가르키기 때문입니다. 이를 오버라이드하기 위해선 상위에서 정확하게 Foo 요소를 선택하여 color 속성을 지정해줘야 합니다.

이러한 상속 방식은 마이그레이션 이전 컴포넌트의 동작과 다릅니다. color 속성은 기본적으로 상속을 지원하는 속성이기 때문에 inherit 키워드를 지정할 필요가 없습니다. 값을 지정하지 않는다면, 부모의 값을 상속하게 됩니다. CSS variable을 유효하지 않은 값(Invalid Value)으로 만들면 color의 값은 값을 지정하지 않은 것으로 평가됩니다. 그러므로, 기존과 같이 부모의 값을 상속하게 됩니다. CSS variable에는 initial 키워드를 사용하여 명시적으로 유효하지 않은 값으로 설정했습니다.

Breaking change? (Yes/No)

No

References

If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.

• https://drafts.csswg.org/css-variables/#guaranteed-invalid

[changeset-bot]

🦋 Changeset detected

Latest commit: b54a84b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@channel.io/bezier-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d897d28) 84.24% compared to head (b54a84b) 84.24%.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #2009   +/-   ##
=======================================
  Coverage   84.24%   84.24%           
=======================================
  Files         142      142           
  Lines        2279     2279           
  Branches      607      607           
=======================================
  Hits         1920     1920           
  Misses        282      282           
  Partials       77       77           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[yangwooseong]

맨 위 예제의 스타일이 적용된 컴포넌트를 Foo 라고 했을 때 Foo 의 color는 blue 가 됩니다. --color 는 color가 아니라 상위 --color 의 값을 상속받고, color는 --color 의 값을 가르키기 때문입니다. 이를 오버라이드하기 위해선 상위에서 정확하게 Foo 요소를 선택하여 color 속성을 지정해줘야 합니다.

Foo의 color는 red 가 되는 것이라고 생각했는데 잘못 이해한걸까요? 가장 바깥에 있는 div의 --color: red를 받아서 Foo에서는 color: var(--color) -> color: red 가 될 것으로 생각했습니다.

[sungik-choi]

맨 위 예제의 스타일이 적용된 컴포넌트를 Foo 라고 했을 때 Foo 의 color는 blue 가 됩니다. --color 는 color가 아니라 상위 --color 의 값을 상속받고, color는 --color 의 값을 가르키기 때문입니다. 이를 오버라이드하기 위해선 상위에서 정확하게 Foo 요소를 선택하여 color 속성을 지정해줘야 합니다.

Foo의 color는 red 가 되는 것이라고 생각했는데 잘못 이해한걸까요? 가장 바깥에 있는 div의 --color: red를 받아서 Foo에서는 color: var(--color) -> color: red 가 될 것으로 생각했습니다.

오 오타입니다.. 😅 말씀해주신게 맞아요