Skip to content

Commit

Permalink
Apply hovered color token for AlphaButton, AlphaFloatingButton, `…
Browse files Browse the repository at this point in the history 
…AlphaFloatingIconButton` (#2471)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] 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

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- None

## Summary

<!-- Please brief explanation of the changes made -->

- global/color/green/300-0 토큰 값을 수정합니다.
- hovered color 계산하는 로직을 수정하고 버튼의 호버 효과에 hovered color 를 적용합니다. 

## Details

<!-- Please elaborate description of the changes -->

- 계산 로직은
[노션](https://www.notion.so/channelio/Redesign-Bezier-cd6e60b3257843c29ce56fab0dd2c76d?p=11b74b55ec7c8020b6fcfe272da7138b&pm=s)을
참고해주세요. 기존 로직으로 하면 무채색일 때 눈에 너무 띄게 변하거나 눈에 안띄게 변하는 구간이 있어서 분기를 추가했습니다.
확정된 버전이라서, 이전에 언급했던 것처럼 hovered color를 foundation 에 추가해서 스토리로 만들고, 유저가
입력하는 색깔을 hovered color 로 바꿔서 보여주는 스토리도 추가해서 디자이너나 모바일 개발자가 참고할 수 있게 하면
좋을 것 같습니다.
- 버튼에 hovered color를 적용할 때 FloatingButton/secondary 인 경우는 배경색을 그대로 하고
텍스트 색깔과 shadow 효과만 다르게 하기로 했습니다.
- 프리뷰 용도로 색깔별로 버튼을 모아놓은 Hovered 스토리를 만들었습니다. 이건 리뷰 후에 없애도 좋을 것 같습니다. 

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

-
[스레드](https://desk.channel.io/root/threads/groups/(CT)BezierRedesign-244958/6715e85727129270fa7e/6715f05cec7def7e29f6)
-
[스레드](https://desk.channel.io/root/groups/(CT)BezierRedesign-244958/6720901d3c37af529d79)
  • Loading branch information
@yangwooseong
yangwooseong authored Nov 6, 2024
1 parent 3a10b33 commit 8e6fb64
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 187 deletions.
6 changes: 6 additions & 0 deletions .changeset/long-starfishes-add.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@channel.io/bezier-tokens': patch
---

Change `alpha-color-green-300-0` alpha token.
Modify hovered color generating formula so that they are more visible in dark theme.
5 changes: 5 additions & 0 deletions .changeset/new-impalas-rescue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@channel.io/bezier-react': patch
---

Apply hovered color token for `AlphaButton`, `AlphaFloatingButton`, and `AlphaFloatingIconButton`.
93 changes: 42 additions & 51 deletions packages/bezier-react/src/components/AlphaButton/Button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,31 @@
$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

.Button {
$primary-color-map: (
blue: --alpha-color-primary-bg-normal,
cobalt: --alpha-color-accent-bg-normal,
red: --alpha-color-critical-bg-normal,
orange: --alpha-color-warning-bg-normal,
green: --alpha-color-success-bg-normal,
pink: --alpha-color-bg-pink-normal,
purple: --alpha-color-bg-purple-normal,
dark-grey: --alpha-color-bg-grey-darkest,
light-grey: --alpha-color-bg-black-dark,
white-absolute: --alpha-color-bg-absolute-white-dark,
);
$secondary-color-map: (
blue: --alpha-color-primary-bg-lightest,
cobalt: --alpha-color-accent-bg-lightest,
red: --alpha-color-critical-bg-lightest,
orange: --alpha-color-warning-bg-lightest,
green: --alpha-color-success-bg-lightest,
pink: --alpha-color-bg-pink-lightest,
purple: --alpha-color-bg-purple-lightest,
dark-grey: --alpha-color-bg-black-lighter,
light-grey: --alpha-color-bg-black-lighter,
white-absolute: --alpha-color-bg-absolute-white-lightest,
);

position: relative;
box-sizing: border-box;
transition: background-color var(--transition-s);
Expand Down Expand Up @@ -57,43 +82,17 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

/* background-color */
&:where(.variant-primary) {
$background-color-by-color: (
blue: var(--alpha-color-primary-bg-normal),
cobalt: var(--alpha-color-accent-bg-normal),
red: var(--alpha-color-critical-bg-normal),
orange: var(--alpha-color-warning-bg-normal),
green: var(--alpha-color-success-bg-normal),
pink: var(--alpha-color-bg-pink-normal),
purple: var(--alpha-color-bg-purple-normal),
dark-grey: var(--alpha-color-bg-grey-darkest),
light-grey: var(--alpha-color-bg-black-dark),
white-absolute: var(--alpha-color-bg-absolute-white-dark),
);

@each $color, $background-color in $background-color-by-color {
@each $color, $background-color in $primary-color-map {
&:where(.color-#{'' + $color}) {
background-color: $background-color;
background-color: var(#{$background-color});
}
}
}

&:where(.variant-secondary) {
$background-color-by-color: (
blue: var(--alpha-color-primary-bg-lightest),
cobalt: var(--alpha-color-accent-bg-lightest),
red: var(--alpha-color-critical-bg-lightest),
orange: var(--alpha-color-warning-bg-lightest),
green: var(--alpha-color-success-bg-lightest),
pink: var(--alpha-color-bg-pink-lightest),
purple: var(--alpha-color-bg-purple-lightest),
dark-grey: var(--alpha-color-bg-black-lighter),
light-grey: var(--alpha-color-bg-black-lighter),
white-absolute: var(--alpha-color-bg-absolute-white-lightest),
);

@each $color, $background-color in $background-color-by-color {
@each $color, $background-color in $secondary-color-map {
&:where(.color-#{'' + $color}) {
background-color: $background-color;
background-color: var(#{$background-color});
}
}
}
Expand Down Expand Up @@ -197,45 +196,37 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
/* visual effect on interaction */
&:where(.active, :hover):where(:not(:disabled)) {
&:where(.variant-primary) {
@each $color in $chromatic-colors {
@each $color, $background-color in $primary-color-map {
&:where(.color-#{'' + $color}) {
/* stylelint-disable-next-line bezier/validate-token */
background-color: var(--bgtxt-#{$color}-dark);
background-color: var(#{$background-color}-hovered);
}
}

&:where(.color-dark-grey) {
background-color: var(--bg-grey-darkest);
}

&:where(.color-light-grey) {
background-color: var(--bg-black-darker);
}
}

&:where(.variant-secondary) {
@each $color in $chromatic-colors {
@each $color, $background-color in $secondary-color-map {
&:where(.color-#{'' + $color}) {
/* stylelint-disable-next-line bezier/validate-token */
background-color: var(--bgtxt-#{$color}-lighter);
background-color: var(#{$background-color}-hovered);
}
}

&:where(.color-dark-grey, .color-light-grey) {
background-color: var(--bg-black-light);
}
}

&:where(.variant-tertiary) {
@each $color in $chromatic-colors {
&:where(.color-#{'' + $color}) {
/* stylelint-disable-next-line bezier/validate-token */
background-color: var(--bgtxt-#{$color}-lightest);
background-color: var(--alpha-color-bg-#{$color}-transparent-hovered);
}
}

&:where(.color-dark-grey, .color-light-grey, .color-white-absolute) {
background-color: var(--bg-black-lighter);
&:where(.color-dark-grey, .color-light-grey) {
background-color: var(--alpha-color-bg-black-transparent-hovered);
}

&:where(.color-white-absolute) {
background-color: var(
--alpha-color-bg-absolute-white-transparent-hovered
);
}
}

Expand Down
130 changes: 57 additions & 73 deletions packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,44 @@
$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

.FloatingButton {
$background-color-map: (
blue: --alpha-color-primary-bg-normal,
cobalt: --alpha-color-accent-bg-normal,
red: --alpha-color-critical-bg-normal,
orange: --alpha-color-warning-bg-normal,
green: --alpha-color-success-bg-normal,
pink: --alpha-color-bg-pink-normal,
purple: --alpha-color-bg-purple-normal,
dark-grey: --alpha-color-bg-grey-darkest,
light-grey: --alpha-color-bg-grey-dark,
);
$color-map: (
blue: --alpha-color-primary-fg-normal,
cobalt: --alpha-color-accent-fg-normal,
red: --alpha-color-critical-fg-normal,
orange: --alpha-color-warning-fg-normal,
green: --alpha-color-success-fg-normal,
pink: --alpha-color-fg-pink-normal,
purple: --alpha-color-fg-purple-normal,
dark-grey: --alpha-color-fg-black-darkest,
light-grey: --alpha-color-fg-black-darker,
);
$hovered-color-map: (
blue: --alpha-color-primary-fg-dark,
cobalt: --alpha-color-accent-fg-dark,
red: --alpha-color-critical-fg-dark,
orange: --alpha-color-warning-fg-dark,
green: --alpha-color-success-fg-dark,
pink: --alpha-color-fg-pink-dark,
purple: --alpha-color-fg-purple-dark,
dark-grey: --alpha-color-fg-black-darkest,
light-grey: --alpha-color-fg-black-darkest,
);
$icon-color-map: (
dark-grey: --alpha-color-fg-black-darker,
light-grey: --alpha-color-fg-black-dark,
);

position: relative;

box-sizing: border-box;
Expand Down Expand Up @@ -62,21 +100,9 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

/* background-color */
&:where(.variant-primary) {
$background-color-by-color: (
blue: var(--alpha-color-primary-bg-normal),
cobalt: var(--alpha-color-accent-bg-normal),
red: var(--alpha-color-critical-bg-normal),
orange: var(--alpha-color-warning-bg-normal),
green: var(--alpha-color-success-bg-normal),
pink: var(--alpha-color-bg-pink-normal),
purple: var(--alpha-color-bg-purple-normal),
dark-grey: var(--alpha-color-bg-grey-darkest),
light-grey: var(--alpha-color-bg-grey-dark),
);

@each $color, $background-color in $background-color-by-color {
&:where(.color-#{'' + $color}) {
background-color: $background-color;
@each $button-color, $background-color in $background-color-map {
&:where(.color-#{'' + $button-color}) {
background-color: var(#{$background-color});
}
}
}
Expand All @@ -97,80 +123,38 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

/* stylelint-disable-next-line no-duplicate-selectors */
&:where(.variant-secondary) {
$color-map: (
blue: var(--alpha-color-primary-fg-normal),
cobalt: var(--alpha-color-accent-fg-normal),
red: var(--alpha-color-critical-fg-normal),
orange: var(--alpha-color-warning-fg-normal),
green: var(--alpha-color-success-fg-normal),
pink: var(--alpha-color-fg-pink-normal),
purple: var(--alpha-color-fg-purple-normal),
dark-grey: var(--alpha-color-fg-black-darkest),
light-grey: var(--alpha-color-fg-black-darker),
);

@each $button-color, $color in $color-map {
&:where(.color-#{'' + $button-color}) {
color: $color;
}
}

&:where(.color-dark-grey) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-black-darker);
color: var(#{$color});
}
}

&:where(.color-light-grey) {
& :where(.ButtonIcon) {
color: var(--alpha-color-fg-black-dark);
@each $button-color, $icon-color in $icon-color-map {
&:where(.color-#{'' + $button-color}) {
& :is(.ButtonIcon) {
color: var(#{$icon-color});
}
}
}
}

/* TODO: use v2 token when design is specified */

/* visual effect on interaction */
&:where(.active, :hover):where(:not(:disabled)) {
&:where(.variant-primary) {
@each $color in $chromatic-colors {
&:where(.color-#{'' + $color}) {
/* stylelint-disable-next-line bezier/validate-token */
background-color: var(--bgtxt-#{$color}-dark);
}
}
box-shadow: var(--alpha-shadow-3);

&:where(.color-dark-grey) {
background-color: var(--bg-grey-darkest);
}

&:where(.color-light-grey) {
background-color: var(--bg-black-darker);
@each $button-color, $background-color in $background-color-map {
&:where(.variant-primary.color-#{'' + $button-color}) {
background-color: var(#{$background-color}-hovered);
}
}

&:where(.variant-secondary) {
@each $color in $chromatic-colors {
&:where(.color-#{'' + $color}) {
/* stylelint-disable-next-line bezier/validate-token */
background-color: var(--bgtxt-#{$color}-lighter);
}
}
@each $button-color, $color in $hovered-color-map {
&:where(.variant-secondary.color-#{'' + $button-color}) {
color: var(#{$color});

&:where(.color-dark-grey, .color-light-grey) {
background-color: var(--bg-black-light);
}
}

&:where(.color-dark-grey):where(.variant-secondary) {
& :is(.ButtonIcon, .ButtonLoader) {
color: var(--txt-black-darkest);
}
}

&:where(.color-light-grey):where(.variant-secondary) {
& :is(.ButtonIcon, .ButtonLoader) {
color: var(--txt-black-darker);
& :is(.ButtonIcon) {
color: var(#{$color});
}
}
}
}
Expand Down
Loading

0 comments on commit 8e6fb64

Please sign in to comment.