Skip to content

Commit 89237e9

Browse files
sungik-choisungik-choi
committed
chore: wip
1 parent 43893e2 commit 89237e9

File tree

23 files changed

+353
-225
lines changed

23 files changed

+353
-225
lines changed

‎packages/bezier-react/src/components/AlphaButton/Button.module.scss

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,28 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
66

77
.Button {
88
$primary-color-map: (
9-
blue: --alpha-color-primary-bg-normal,
10-
cobalt: --alpha-color-accent-bg-normal,
11-
red: --alpha-color-critical-bg-normal,
12-
orange: --alpha-color-warning-bg-normal,
13-
green: --alpha-color-success-bg-normal,
14-
pink: --alpha-color-bg-pink-normal,
15-
purple: --alpha-color-bg-purple-normal,
16-
dark-grey: --alpha-color-bg-grey-darkest,
17-
light-grey: --alpha-color-bg-black-dark,
18-
white-absolute: --alpha-color-bg-absolute-white-dark,
9+
blue: --alpha-primary-bg-normal,
10+
cobalt: --alpha-accent-bg-normal,
11+
red: --alpha-critical-bg-normal,
12+
orange: --alpha-warning-bg-normal,
13+
green: --alpha-success-bg-normal,
14+
pink: --alpha-bg-pink-normal,
15+
purple: --alpha-bg-purple-normal,
16+
dark-grey: --alpha-bg-grey-darkest,
17+
light-grey: --alpha-bg-black-dark,
18+
white-absolute: --alpha-bg-absolute-white-dark,
1919
);
2020
$secondary-color-map: (
21-
blue: --alpha-color-primary-bg-lightest,
22-
cobalt: --alpha-color-accent-bg-lightest,
23-
red: --alpha-color-critical-bg-lightest,
24-
orange: --alpha-color-warning-bg-lightest,
25-
green: --alpha-color-success-bg-lightest,
26-
pink: --alpha-color-bg-pink-lightest,
27-
purple: --alpha-color-bg-purple-lightest,
28-
dark-grey: --alpha-color-bg-black-lighter,
29-
light-grey: --alpha-color-bg-black-lighter,
30-
white-absolute: --alpha-color-bg-absolute-white-lightest,
21+
blue: --alpha-primary-bg-lightest,
22+
cobalt: --alpha-accent-bg-lightest,
23+
red: --alpha-critical-bg-lightest,
24+
orange: --alpha-warning-bg-lightest,
25+
green: --alpha-success-bg-lightest,
26+
pink: --alpha-bg-pink-lightest,
27+
purple: --alpha-bg-purple-lightest,
28+
dark-grey: --alpha-bg-black-lighter,
29+
light-grey: --alpha-bg-black-lighter,
30+
white-absolute: --alpha-bg-absolute-white-lightest,
3131
);
3232

3333
position: relative;
@@ -101,48 +101,48 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
101101
@each $color in $chromatic-colors {
102102
&:where(.color-#{'' + $color}) {
103103
/* stylelint-disable-next-line bezier/validate-token */
104-
background-color: var(--alpha-color-bg-#{$color}-transparent);
104+
background-color: var(--alpha-bg-#{$color}-transparent);
105105
}
106106
}
107107

108108
&:where(.color-dark-grey, .color-light-grey) {
109-
background-color: var(--alpha-color-bg-black-transparent);
109+
background-color: var(--alpha-bg-black-transparent);
110110
}
111111

112112
&:where(.color-white-absolute) {
113-
background-color: var(--alpha-color-bg-absolute-white-transparent);
113+
background-color: var(--alpha-bg-absolute-white-transparent);
114114
}
115115
}
116116

117117
/* color */
118118
/* stylelint-disable-next-line no-duplicate-selectors */
119119
&:where(.variant-primary) {
120-
color: var(--alpha-color-fg-absolute-white-dark);
120+
color: var(--alpha-fg-absolute-white-dark);
121121

122122
&:where(.color-dark-grey) {
123-
color: var(--alpha-color-fg-white-normal);
123+
color: var(--alpha-fg-white-normal);
124124
}
125125

126126
&:where(.color-light-grey) {
127-
color: var(--alpha-color-fg-absolute-white-normal);
127+
color: var(--alpha-fg-absolute-white-normal);
128128
}
129129

130130
&:where(.color-white-absolute) {
131-
color: var(--alpha-color-fg-absolute-black-normal);
131+
color: var(--alpha-fg-absolute-black-normal);
132132
}
133133
}
134134

135135
&:where(.variant-secondary, .variant-tertiary) {
136136
$color-map: (
137-
blue: var(--alpha-color-primary-fg-normal),
138-
cobalt: var(--alpha-color-accent-fg-normal),
139-
red: var(--alpha-color-critical-fg-normal),
140-
orange: var(--alpha-color-warning-fg-normal),
141-
green: var(--alpha-color-success-fg-normal),
142-
pink: var(--alpha-color-fg-pink-normal),
143-
purple: var(--alpha-color-fg-purple-normal),
144-
dark-grey: var(--alpha-color-fg-black-darkest),
145-
light-grey: var(--alpha-color-fg-black-darker),
137+
blue: var(--alpha-primary-fg-normal),
138+
cobalt: var(--alpha-accent-fg-normal),
139+
red: var(--alpha-critical-fg-normal),
140+
orange: var(--alpha-warning-fg-normal),
141+
green: var(--alpha-success-fg-normal),
142+
pink: var(--alpha-fg-pink-normal),
143+
purple: var(--alpha-fg-purple-normal),
144+
dark-grey: var(--alpha-fg-black-darkest),
145+
light-grey: var(--alpha-fg-black-darker),
146146
);
147147

148148
@each $button-color, $color in $color-map {
@@ -153,24 +153,24 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
153153

154154
&:where(.color-dark-grey) {
155155
& :where(.ButtonIcon) {
156-
color: var(--alpha-color-fg-black-darker);
156+
color: var(--alpha-fg-black-darker);
157157
}
158158
}
159159

160160
&:where(.color-light-grey) {
161161
& :where(.ButtonIcon) {
162-
color: var(--alpha-color-fg-black-dark);
162+
color: var(--alpha-fg-black-dark);
163163
}
164164
}
165165
}
166166

167167
&:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
168168
& :where(.ButtonIcon) {
169-
color: var(--alpha-color-fg-absolute-white-light);
169+
color: var(--alpha-fg-absolute-white-light);
170170
}
171171

172172
& :where(.ButtonText) {
173-
color: var(--alpha-color-fg-absolute-white-normal);
173+
color: var(--alpha-fg-absolute-white-normal);
174174
}
175175
}
176176

@@ -215,18 +215,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
215215
@each $color in $chromatic-colors {
216216
&:where(.color-#{'' + $color}) {
217217
/* stylelint-disable-next-line bezier/validate-token */
218-
background-color: var(--alpha-color-bg-#{$color}-transparent-hovered);
218+
background-color: var(--alpha-bg-#{$color}-transparent-hovered);
219219
}
220220
}
221221

222222
&:where(.color-dark-grey, .color-light-grey) {
223-
background-color: var(--alpha-color-bg-black-transparent-hovered);
223+
background-color: var(--alpha-bg-black-transparent-hovered);
224224
}
225225

226226
&:where(.color-white-absolute) {
227-
background-color: var(
228-
--alpha-color-bg-absolute-white-transparent-hovered
229-
);
227+
background-color: var(--alpha-bg-absolute-white-transparent-hovered);
230228
}
231229
}
232230

@@ -244,7 +242,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
244242

245243
&:where(.color-white-absolute.variant-tertiary) {
246244
& :where(.ButtonIcon) {
247-
color: var(--alpha-color-fg-absolute-white-normal);
245+
color: var(--alpha-fg-absolute-white-normal);
248246
}
249247
}
250248
}

‎packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,41 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
66

77
.FloatingButton {
88
$background-color-map: (
9-
blue: --alpha-color-primary-bg-normal,
10-
cobalt: --alpha-color-accent-bg-normal,
11-
red: --alpha-color-critical-bg-normal,
12-
orange: --alpha-color-warning-bg-normal,
13-
green: --alpha-color-success-bg-normal,
14-
pink: --alpha-color-bg-pink-normal,
15-
purple: --alpha-color-bg-purple-normal,
16-
dark-grey: --alpha-color-bg-grey-darkest,
17-
light-grey: --alpha-color-bg-grey-dark,
9+
blue: --alpha-primary-bg-normal,
10+
cobalt: --alpha-accent-bg-normal,
11+
red: --alpha-critical-bg-normal,
12+
orange: --alpha-warning-bg-normal,
13+
green: --alpha-success-bg-normal,
14+
pink: --alpha-bg-pink-normal,
15+
purple: --alpha-bg-purple-normal,
16+
dark-grey: --alpha-bg-grey-darkest,
17+
light-grey: --alpha-bg-grey-dark,
1818
);
1919
$color-map: (
20-
blue: --alpha-color-primary-fg-normal,
21-
cobalt: --alpha-color-accent-fg-normal,
22-
red: --alpha-color-critical-fg-normal,
23-
orange: --alpha-color-warning-fg-normal,
24-
green: --alpha-color-success-fg-normal,
25-
pink: --alpha-color-fg-pink-normal,
26-
purple: --alpha-color-fg-purple-normal,
27-
dark-grey: --alpha-color-fg-black-darkest,
28-
light-grey: --alpha-color-fg-black-darker,
20+
blue: --alpha-primary-fg-normal,
21+
cobalt: --alpha-accent-fg-normal,
22+
red: --alpha-critical-fg-normal,
23+
orange: --alpha-warning-fg-normal,
24+
green: --alpha-success-fg-normal,
25+
pink: --alpha-fg-pink-normal,
26+
purple: --alpha-fg-purple-normal,
27+
dark-grey: --alpha-fg-black-darkest,
28+
light-grey: --alpha-fg-black-darker,
2929
);
3030
$hovered-color-map: (
31-
blue: --alpha-color-primary-fg-dark,
32-
cobalt: --alpha-color-accent-fg-dark,
33-
red: --alpha-color-critical-fg-dark,
34-
orange: --alpha-color-warning-fg-dark,
35-
green: --alpha-color-success-fg-dark,
36-
pink: --alpha-color-fg-pink-dark,
37-
purple: --alpha-color-fg-purple-dark,
38-
dark-grey: --alpha-color-fg-black-darkest,
39-
light-grey: --alpha-color-fg-black-darkest,
31+
blue: --alpha-primary-fg-dark,
32+
cobalt: --alpha-accent-fg-dark,
33+
red: --alpha-critical-fg-dark,
34+
orange: --alpha-warning-fg-dark,
35+
green: --alpha-success-fg-dark,
36+
pink: --alpha-fg-pink-dark,
37+
purple: --alpha-fg-purple-dark,
38+
dark-grey: --alpha-fg-black-darkest,
39+
light-grey: --alpha-fg-black-darkest,
4040
);
4141
$icon-color-map: (
42-
dark-grey: --alpha-color-fg-black-darker,
43-
light-grey: --alpha-color-fg-black-dark,
42+
dark-grey: --alpha-fg-black-darker,
43+
light-grey: --alpha-fg-black-dark,
4444
);
4545

4646
position: relative;
@@ -108,16 +108,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
108108
}
109109

110110
&:where(.variant-secondary) {
111-
background-color: var(--alpha-color-bg-white-higher);
111+
background-color: var(--alpha-bg-white-higher);
112112
}
113113

114114
/* color */
115115
/* stylelint-disable-next-line no-duplicate-selectors */
116116
&:where(.variant-primary) {
117-
color: var(--alpha-color-fg-absolute-white-dark);
117+
color: var(--alpha-fg-absolute-white-dark);
118118

119119
&:where(.color-dark-grey) {
120-
color: var(--alpha-color-fg-white-normal);
120+
color: var(--alpha-fg-white-normal);
121121
}
122122
}
123123

‎packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,37 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
66

77
.FloatingIconButton {
88
$primary-color-map: (
9-
blue: --alpha-color-primary-bg-normal,
10-
cobalt: --alpha-color-accent-bg-normal,
11-
red: --alpha-color-critical-bg-normal,
12-
orange: --alpha-color-warning-bg-normal,
13-
green: --alpha-color-success-bg-normal,
14-
pink: --alpha-color-bg-pink-normal,
15-
purple: --alpha-color-bg-purple-normal,
16-
dark-grey: --alpha-color-bg-grey-darkest,
17-
light-grey: --alpha-color-bg-grey-dark,
9+
blue: --alpha-primary-bg-normal,
10+
cobalt: --alpha-accent-bg-normal,
11+
red: --alpha-critical-bg-normal,
12+
orange: --alpha-warning-bg-normal,
13+
green: --alpha-success-bg-normal,
14+
pink: --alpha-bg-pink-normal,
15+
purple: --alpha-bg-purple-normal,
16+
dark-grey: --alpha-bg-grey-darkest,
17+
light-grey: --alpha-bg-grey-dark,
1818
);
1919
$color-map: (
20-
blue: --alpha-color-primary-fg-normal,
21-
cobalt: --alpha-color-accent-fg-normal,
22-
red: --alpha-color-critical-fg-normal,
23-
orange: --alpha-color-warning-fg-normal,
24-
green: --alpha-color-success-fg-normal,
25-
pink: --alpha-color-fg-pink-normal,
26-
purple: --alpha-color-fg-purple-normal,
27-
dark-grey: --alpha-color-fg-black-darker,
28-
light-grey: --alpha-color-fg-black-dark,
20+
blue: --alpha-primary-fg-normal,
21+
cobalt: --alpha-accent-fg-normal,
22+
red: --alpha-critical-fg-normal,
23+
orange: --alpha-warning-fg-normal,
24+
green: --alpha-success-fg-normal,
25+
pink: --alpha-fg-pink-normal,
26+
purple: --alpha-fg-purple-normal,
27+
dark-grey: --alpha-fg-black-darker,
28+
light-grey: --alpha-fg-black-dark,
2929
);
3030
$hovered-color-map: (
31-
blue: --alpha-color-primary-fg-dark,
32-
cobalt: --alpha-color-accent-fg-dark,
33-
red: --alpha-color-critical-fg-dark,
34-
orange: --alpha-color-warning-fg-dark,
35-
green: --alpha-color-success-fg-dark,
36-
pink: --alpha-color-fg-pink-dark,
37-
purple: --alpha-color-fg-purple-dark,
38-
dark-grey: --alpha-color-fg-black-darkest,
39-
light-grey: --alpha-color-fg-black-darker,
31+
blue: --alpha-primary-fg-dark,
32+
cobalt: --alpha-accent-fg-dark,
33+
red: --alpha-critical-fg-dark,
34+
orange: --alpha-warning-fg-dark,
35+
green: --alpha-success-fg-dark,
36+
pink: --alpha-fg-pink-dark,
37+
purple: --alpha-fg-purple-dark,
38+
dark-grey: --alpha-fg-black-darkest,
39+
light-grey: --alpha-fg-black-darker,
4040
);
4141

4242
position: relative;
@@ -89,20 +89,20 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
8989
}
9090

9191
&:where(.variant-secondary) {
92-
background-color: var(--alpha-color-bg-white-higher);
92+
background-color: var(--alpha-bg-white-higher);
9393
}
9494

9595
/* color */
9696
/* stylelint-disable-next-line no-duplicate-selectors */
9797
&:where(.variant-primary) {
98-
color: var(--alpha-color-fg-absolute-white-dark);
98+
color: var(--alpha-fg-absolute-white-dark);
9999

100100
&:where(.color-dark-grey) {
101-
color: var(--alpha-color-fg-white-normal);
101+
color: var(--alpha-fg-white-normal);
102102
}
103103

104104
&:where(.color-light-grey) {
105-
color: var(--alpha-color-fg-absolute-white-dark);
105+
color: var(--alpha-fg-absolute-white-dark);
106106
}
107107
}
108108

0 commit comments

Comments
 (0)