Skip to content

Commit 3be47fe

Browse files
nhironakanhironaka
committed
update *.module.css
1 parent f4671eb commit 3be47fe

19 files changed

Lines changed: 312 additions & 221 deletions

File tree

‎packages/button/src/styles/Button.module.css‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,66 +7,68 @@
77
--lp-component-button-color-bg-destructive-active: var(
88
--lp-color-bg-interactive-destructive-active
99
);
10-
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-500);
11-
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-600);
12-
--lp-color-border-interactive-primary-flair-focus: var(--lp-color-purple-800);
13-
--lp-color-border-interactive-primary-flair-active: var(--lp-color-purple-800);
14-
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-100);
15-
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-300);
16-
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-400);
17-
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-400);
18-
--lp-color-border-interactive-secondary-flair-base: var(--lp-color-purple-600);
19-
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-700);
20-
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-800);
21-
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-800);
22-
--lp-color-text-interactive-flair-base: var(--lp-color-purple-700);
23-
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-800);
24-
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-900);
25-
--lp-color-text-interactive-flair-active: var(--lp-color-purple-900);
10+
--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-500);
11+
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-600);
12+
--lp-color-border-interactive-primary-flair-focus: var(--lp-color-info-800);
13+
--lp-color-border-interactive-primary-flair-active: var(--lp-color-info-800);
14+
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-100);
15+
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-300);
16+
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-400);
17+
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-400);
18+
--lp-color-border-interactive-secondary-flair-base: var(--lp-color-info-600);
19+
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-700);
20+
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-800);
21+
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-800);
22+
--lp-color-text-interactive-flair-base: var(--lp-color-info-700);
23+
--lp-color-text-interactive-flair-hover: var(--lp-color-info-800);
24+
--lp-color-text-interactive-flair-focus: var(--lp-color-info-800);
25+
--lp-color-text-interactive-flair-active: var(--lp-color-info-800);
2626
--lp-color-bg-interactive-tertiary-flair-base: transparent;
27-
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-100);
28-
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-300);
29-
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-300);
27+
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-100);
28+
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-300);
29+
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-300);
3030
}
3131

3232
[data-theme='dark'] {
3333
--lp-component-button-color-bg-default: transparent;
34-
--lp-component-button-color-border-destructive: var(--lp-color-red-600);
35-
--lp-component-button-color-bg-destructive-hover: var(--lp-color-red-900);
36-
--lp-component-button-color-bg-destructive-focus: var(--lp-color-red-900);
37-
--lp-component-button-color-bg-destructive-active: var(--lp-color-red-900);
38-
--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-600);
39-
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-700);
40-
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-950);
41-
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-900);
42-
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-950);
43-
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-950);
44-
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-500);
45-
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-700);
46-
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-700);
47-
--lp-color-text-interactive-flair-base: var(--lp-color-purple-400);
48-
--lp-color-text-interactive-flair-hover: var(--lp-color-purple-400);
49-
--lp-color-text-interactive-flair-focus: var(--lp-color-purple-400);
50-
--lp-color-text-interactive-flair-active: var(--lp-color-purple-400);
51-
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-900);
52-
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-950);
53-
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-950);
34+
--lp-component-button-color-border-destructive: var(--lp-color-border-interactive-destructive);
35+
--lp-component-button-color-bg-destructive-hover: var(--lp-color-bg-interactive-destructive-hover);
36+
--lp-component-button-color-bg-destructive-focus: var(--lp-color-bg-interactive-destructive-focus);
37+
--lp-component-button-color-bg-destructive-active: var(
38+
--lp-color-bg-interactive-destructive-active
39+
);
40+
--lp-color-border-interactive-primary-flair-base: var(--lp-color-info-600);
41+
--lp-color-border-interactive-primary-flair-hover: var(--lp-color-info-700);
42+
--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-info-800);
43+
--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-info-800);
44+
--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-info-800);
45+
--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-info-800);
46+
--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-info-500);
47+
--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-info-700);
48+
--lp-color-border-interactive-secondary-flair-active: var(--lp-color-info-700);
49+
--lp-color-text-interactive-flair-base: var(--lp-color-info-400);
50+
--lp-color-text-interactive-flair-hover: var(--lp-color-info-400);
51+
--lp-color-text-interactive-flair-focus: var(--lp-color-info-400);
52+
--lp-color-text-interactive-flair-active: var(--lp-color-info-400);
53+
--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-info-800);
54+
--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-info-800);
55+
--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-info-800);
5456
}
5557

5658
.Button,
5759
.ButtonGroup {
5860
/* Remaining Legacy Tokens */
5961
--Button-border-default: 1px solid transparent;
6062
--Button-box-shadow-default-active: none;
61-
--Button-color-boxShadow-1-default-active: var(--lp-color-white-950);
63+
--Button-color-boxShadow-1-default-active: var(--lp-color-neutral-0);
6264
--Button-color-boxShadow-2-default-active: hsl(231.5 100% 62.5% / 0.1);
6365
--Button-color-boxShadow-1-default-withIcon-focus: var(--lp-color-shadow-interactive-focus);
6466
--Button-color-boxShadow-2-default-withIcon-focus: hsl(231.5 100% 62.5% / 0.1);
6567
--Button-box-shadow-withIcon-focus: 0 0 0 1px
6668
var(--Button-color-boxShadow-1-default-withIcon-focus), 0 0 0 4px
6769
var(--Button-color-boxShadow-2-default-withIcon-focus);
68-
--Button-color-text-destructive-focus: var(--lp-color-white-950);
69-
--Button-color-background-disabled-withIcon: var(--lp-color-white-950);
70+
--Button-color-text-destructive-focus: var(--lp-color-neutral-0);
71+
--Button-color-background-disabled-withIcon: var(--lp-color-neutral-0);
7072
--Button-color-border-disabled-withIcon: transparent;
7173

7274
/* End Remaining Legacy Tokens */
@@ -204,8 +206,8 @@
204206
--Button-icon-color-fill-disabled-active: var(--lp-color-text-interactive-disabled);
205207

206208
/* SEARCH BAR CLEAR BUTTON ICON */
207-
--Button-icon-clear-color-fill: var(--lp-color-blue-700);
208-
--Button-icon-clear-color-text: var(--lp-color-blue-700);
209+
--Button-icon-clear-color-fill: var(--lp-color-action-700);
210+
--Button-icon-clear-color-text: var(--lp-color-action-700);
209211

210212
/* ------- PRIMARY FLAIR ------- */
211213
--Button-color-border-primary-flair: var(--lp-color-border-interactive-primary-flair-base);
@@ -447,7 +449,7 @@
447449

448450
.Button.Button--close {
449451
background-color: transparent;
450-
fill: var(--lp-color-gray-700);
452+
fill: var(--lp-color-neutral-700);
451453
color: var(--lp-color-text-ui-primary-base);
452454
}
453455

@@ -472,9 +474,9 @@
472474
.Button.Button--close:active {
473475
background-color: hsl(0 0% 12.9% / 0.7);
474476
box-shadow:
475-
0 0 0 1px var(--lp-color-gray-950),
477+
0 0 0 1px var(--lp-color-neutral-800),
476478
0 0 0 4px hsl(0 0% 12.9% / 0.1);
477-
color: var(--lp-color-white-950);
479+
color: var(--lp-color-fill-interactive-primary);
478480
}
479481

480482
/* ------- DESTRUCTIVE ------- */

‎packages/components/src/styles/Alert.module.css‎

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,3 @@
1-
/* Temporary color aliases for Alerts. This block should be removed when the new color system is implemented. */
2-
:root,
3-
[data-theme='default'] {
4-
--alert-color-border-neutral: var(--lp-color-gray-200);
5-
--alert-color-bg-neutral: var(--lp-color-gray-0);
6-
--alert-color-border-error: var(--lp-color-red-200);
7-
--alert-color-bg-error: var(--lp-color-red-0);
8-
--alert-color-border-info: var(--lp-color-blue-200);
9-
--alert-color-bg-info: var(--lp-color-blue-0);
10-
--alert-color-border-success: var(--lp-color-green-200);
11-
--alert-color-bg-success: var(--lp-color-green-0);
12-
--alert-color-border-warning: #fad88f;
13-
--alert-color-bg-warning: #fdfae4;
14-
}
15-
[data-theme='dark'] {
16-
--alert-color-border-neutral: var(--lp-color-gray-800);
17-
--alert-color-bg-neutral: var(--lp-color-gray-900);
18-
--alert-color-border-error: var(--lp-color-red-700);
19-
--alert-color-bg-error: #391620;
20-
--alert-color-border-info: var(--lp-color-blue-700);
21-
--alert-color-bg-info: #192142;
22-
--alert-color-border-success: var(--lp-color-green-700);
23-
--alert-color-bg-success: #14260d;
24-
--alert-color-border-warning: #932c00;
25-
--alert-color-bg-warning: #3c170c;
26-
}
27-
281
/* Shared styles for both the block and inline variants */
292
.base {
303
display: flex;
@@ -54,30 +27,30 @@
5427
.default {
5528
/* Add a base layer of padding on the Alert itself. This is just enough to create some breathing room in case any buttons are present. */
5629
padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-500);
57-
background-color: var(--alert-color-bg-neutral);
58-
border: 1px solid var(--alert-color-border-neutral);
30+
background-color: var(--lp-color-bg-ui-primary);
31+
border: 1px solid var(--lp-color-border-ui-primary);
5932
position: relative;
6033
min-height: var(--lp-size-48);
6134

6235
/* Status borders and background colors */
6336
&.error {
64-
border-color: var(--alert-color-border-error);
65-
background-color: var(--alert-color-bg-error);
37+
border-color: var(--lp-color-negative-300);
38+
background-color: var(--lp-color-bg-feedback-error);
6639
}
6740

6841
&.info {
69-
border-color: var(--alert-color-border-info);
70-
background-color: var(--alert-color-bg-info);
42+
border-color: var(--lp-color-action-300);
43+
background-color: var(--lp-color-bg-feedback-info);
7144
}
7245

7346
&.success {
74-
border-color: var(--alert-color-border-success);
75-
background-color: var(--alert-color-bg-success);
47+
border-color: var(--lp-color-positive-300);
48+
background-color: var(--lp-color-bg-feedback-success);
7649
}
7750

7851
&.warning {
79-
border-color: var(--alert-color-border-warning);
80-
background-color: var(--alert-color-bg-warning);
52+
border-color: var(--lp-color-warning-300);
53+
background-color: var(--lp-color-warning-50);
8154
}
8255

8356
& .icon {

‎packages/components/src/styles/Avatar.module.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
}
2929

3030
.blue {
31-
background-color: var(--lp-color-blue-600);
31+
background-color: var(--lp-color-brand-blue-base);
3232
}
3333

3434
.pink {
@@ -40,11 +40,12 @@
4040
}
4141

4242
.purple {
43-
background-color: var(--lp-color-purple-600);
43+
background-color: var(--lp-color-brand-purple-base);
4444
}
4545

4646
.text {
47-
fill: var(--lp-color-white-950);
47+
/* brand backgrounds are theme-constant; text must be too */
48+
fill: white;
4849
text-anchor: middle;
4950
dominant-baseline: central;
5051
}

‎packages/components/src/styles/Code.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
border-radius: var(--lp-border-radius-regular);
55
color: var(--lp-color-text-code-string);
66
width: fit-content;
7-
background-color: var(--lp-color-bg-ui-tertiary);
7+
background-color: var(--lp-color-bg-ui-secondary);
88
padding: var(--lp-spacing-100) var(--lp-spacing-200);
99
display: inline-flex;
1010
border: none;

‎packages/components/src/styles/Modal.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
inset: 0;
149149
width: 100vw;
150150
height: var(--visual-viewport-height);
151-
background: var(--lp-color-black-500);
151+
background: rgb(7 8 12 / 0.5);
152152
backdrop-filter: blur(1px);
153153
display: flex;
154154
align-items: center;

‎packages/components/src/styles/ProgressBar.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313

1414
.spinner {
15-
--fill-color: var(--lp-color-gray-500);
15+
--fill-color: var(--lp-color-neutral-500);
1616
display: inline-flex;
1717
}
1818

@@ -27,7 +27,7 @@
2727
}
2828

2929
.outerCircle {
30-
stroke: var(--lp-color-white-100);
30+
stroke: rgb(255 255 255 / 0.15);
3131
}
3232

3333
.innerCircle {

‎packages/components/src/styles/Switch.module.css‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
:root,
2+
[data-theme='default'] {
3+
--switch-handle-shadow: 0 0 1px 0 rgb(33 33 33 / 0.75), 0 0 2px 0 rgb(33 33 33 / 0.75), 0 0 1px 0
4+
rgb(33 33 33 / 0.35);
5+
--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 117 66 / 0.75), 0 0 2px 0 rgb(0 117 66 / 0.06), 0
6+
0 1px 0 rgb(0 117 66 / 0.35);
7+
}
8+
9+
[data-theme='dark'] {
10+
--switch-handle-shadow: 0 0 1px 0 rgb(0 0 0 / 0.5), 0 0 2px 0 rgb(0 0 0 / 0.4), 0 0 1px 0
11+
rgb(0 0 0 / 0.25);
12+
--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 0 0 / 0.4), 0 0 2px 0 rgb(0 0 0 / 0.2), 0 0 1px 0
13+
rgb(0 0 0 / 0.15);
14+
}
15+
116
.switch {
217
composes: interactive from './base.module.css';
318
display: flex;
@@ -26,14 +41,11 @@
2641

2742
.handle {
2843
display: block;
29-
background-color: var(--lp-color-white-950);
44+
background-color: var(--lp-color-fill-interactive-primary);
3045
width: var(--lp-size-16);
3146
height: var(--lp-size-16);
3247
border-radius: var(--lp-border-radius-large);
33-
box-shadow:
34-
0 0 1px 0 rgb(33 33 33 / 0.75),
35-
0 0 2px 0 rgb(33 33 33 / 0.75),
36-
0 0 1px 0 rgb(33 33 33 / 0.35);
48+
box-shadow: var(--switch-handle-shadow);
3749
transition: transform var(--lp-duration-200) ease-in-out;
3850
transform: translateX(0%);
3951
z-index: 1;
@@ -48,28 +60,25 @@
4860

4961
.switch[data-focus-visible] {
5062
& .track {
51-
outline: 2px solid var(--lp-color-shadow-interactive-focus);
63+
outline: 2px solid var(--lp-color-border-interactive-focus);
5264
outline-offset: -2px;
5365
z-index: 1;
5466
}
5567
}
5668

5769
.switch[data-selected] {
5870
& .track {
59-
background-color: var(--lp-color-green-500);
60-
border: 1px solid var(--lp-color-green-600);
71+
background-color: var(--lp-color-positive-500);
72+
border: 1px solid var(--lp-color-positive-600);
6173
}
6274

6375
& .handle {
6476
transform: translateX(calc(100% + var(--lp-spacing-400)));
65-
box-shadow:
66-
0 0 1px 0 rgb(0 117 66 / 0.75),
67-
0 0 2px 0 rgb(0 117 66 / 0.06),
68-
0 0 1px 0 rgb(0 117 66 / 0.35);
77+
box-shadow: var(--switch-handle-shadow-selected);
6978
}
7079

7180
& .label {
72-
color: var(--lp-color-white-950);
81+
color: var(--lp-color-text-interactive-primary-base);
7382
left: var(--lp-spacing-300);
7483
text-shadow: 0 0 1px rgb(40 40 40 / 0.7);
7584
}

‎packages/components/src/styles/Tooltip.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@
5454
}
5555

5656
& kbd {
57-
color: var(--lp-color-gray-100);
58-
background-color: var(--lp-color-gray-900);
59-
border: 1px solid var(--lp-color-gray-700);
60-
box-shadow: inset 0 -1px 0 var(--lp-color-gray-700);
57+
color: var(--lp-color-neutral-100);
58+
background-color: var(--lp-color-neutral-800);
59+
border: 1px solid var(--lp-color-neutral-700);
60+
box-shadow: inset 0 -1px 0 var(--lp-color-neutral-700);
6161
}
6262
}

‎packages/drawer/src/styles/Drawer.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
}
7676

7777
.content section + section {
78-
border-top: 1px dotted var(--lp-color-gray-100);
78+
border-top: 1px dotted var(--lp-color-neutral-100);
7979
}
8080

8181
.closeButton {

‎packages/filter/src/styles/Filter.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
[data-theme='default'] {
33
--lp-component-filter-color-bg-clearable: rgb(0 0 0 / 0.15);
44
--lp-component-filter-color-bg-clearable-focus: rgb(0 0 0 / 0.2);
5-
--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-800);
5+
--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-800);
66
}
77

88
[data-theme='dark'] {
99
--lp-component-filter-color-bg-clearable: rgb(248 248 248 / 0.15);
1010
--lp-component-filter-color-bg-clearable-focus: rgb(248 248 248 / 0.2);
11-
--lp-component-filter-color-border-clearable-focus: var(--lp-color-gray-500);
11+
--lp-component-filter-color-border-clearable-focus: var(--lp-color-neutral-500);
1212
}
1313

1414
.filter {

0 commit comments

Comments
 (0)