Skip to content

Commit caf93dd

Browse files
Ivan-MalinovskiIvan-Malinovski
committed
fix: untheme common modals/buttons so default light theme renders correctly
Several common components used hardcoded Google-blue or dark-slate colors instead of theme tokens, so they looked correct on custom themes that happened to define the variables but completely wrong on the default light theme (and on dark mode where slate-on-slate became invisible). - Button.module.css: .primary/.secondary/.ghost now read --color-accent, --color-bg-hover, --color-text-primary, --color-text-secondary; hover states use color-mix so they darken correctly in both light and dark. - Input.module.css: focus ring was hardcoded blue; now uses color-mix on --color-accent (and --color-error for error state). - CookieConsent.module.css: hardcoded dark slate (#1f2937 / #f9fafb / #374151 / #60a5fa) replaced with --color-bg-secondary / --color-text-primary / --color-bg-hover / --color-accent; picks up a subtle border so it doesn't float on the same bg color. - Modal.module.css: close button used rgb(var(--color-bg-secondary-rgb)) with a 255,255,255 fallback; now uses color-mix on --color-bg-secondary with transparent, which works for any theme (including dark). - DeleteDialog.module.css: every color was hardcoded; now uses --color-bg-secondary / --color-text-primary / --color-text-secondary / --color-error / --color-border-subtle / --color-bg-hover. - RecurrenceDialog.module.css: hardcoded 'white' button text replaced with var(--color-bg) for guaranteed contrast; cancel button uses --color-bg-secondary (not --color-bg which is white in light mode). - AddCalendarModal.module.css: removed stale #1a73e8 fallbacks from --color-accent references — the variable is defined, fallbacks are dead code.
1 parent f097586 commit caf93dd

7 files changed

Lines changed: 54 additions & 51 deletions

File tree

‎src/components/common/Button.module.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,32 @@
1515
}
1616

1717
.primary {
18-
background-color: #4285f4;
19-
color: white;
18+
background-color: var(--color-accent);
19+
color: var(--color-bg);
2020
}
2121

2222
.primary:hover:not(:disabled) {
23-
background-color: #3367d6;
23+
background-color: var(--color-accent-hover);
2424
}
2525

2626
.secondary {
27-
background-color: #e8eaed;
28-
color: #202124;
27+
background-color: var(--color-bg-hover);
28+
color: var(--color-text-primary);
2929
}
3030

3131
.secondary:hover:not(:disabled) {
32-
background-color: #d3d6db;
32+
background-color: color-mix(in srgb, var(--color-bg-hover) 70%, var(--color-text-primary));
3333
}
3434

3535
.ghost {
36-
background-color: rgba(255, 255, 255, 0.5);
36+
background-color: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
3737
backdrop-filter: blur(20px);
3838
-webkit-backdrop-filter: blur(20px);
39-
color: #5f6368;
39+
color: var(--color-text-secondary);
4040
}
4141

4242
.ghost:hover:not(:disabled) {
43-
background-color: #f1f3f4;
43+
background-color: var(--color-bg-hover);
4444
}
4545

4646
.sm {

‎src/components/common/CookieConsent.module.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
display: flex;
2222
align-items: center;
2323
gap: 12px;
24-
background: #1f2937;
25-
color: #f9fafb;
24+
background: var(--color-bg-secondary);
25+
color: var(--color-text-primary);
26+
border: 1px solid var(--color-border-subtle);
2627
padding: 10px 14px;
2728
border-radius: var(--radius-sm, 8px);
2829
box-shadow: var(--shadow-card);
@@ -36,7 +37,7 @@
3637
}
3738

3839
.link {
39-
color: #60a5fa;
40+
color: var(--color-accent);
4041
text-decoration: none;
4142
}
4243

@@ -45,9 +46,9 @@
4546
}
4647

4748
.dismiss {
48-
background: #374151;
49+
background: var(--color-bg-hover);
4950
border: none;
50-
color: #f9fafb;
51+
color: var(--color-text-primary);
5152
padding: 4px 10px;
5253
border-radius: 4px;
5354
cursor: pointer;
@@ -58,5 +59,5 @@
5859
}
5960

6061
.dismiss:hover {
61-
background: #4b5563;
62+
background: color-mix(in srgb, var(--color-bg-hover) 70%, var(--color-text-primary));
6263
}

‎src/components/common/Input.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
.input:focus {
2626
outline: none;
2727
border-color: var(--color-accent);
28-
box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
28+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
2929
}
3030

3131
.input::placeholder {
@@ -38,7 +38,7 @@
3838

3939
.hasError:focus {
4040
border-color: var(--color-error);
41-
box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.15);
41+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent);
4242
}
4343

4444
.error {

‎src/components/common/Modal.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
align-items: center;
6262
justify-content: center;
6363
border: none;
64-
background: rgba(var(--color-bg-secondary-rgb, 255, 255, 255), 0.5);
64+
background: color-mix(in srgb, var(--color-bg-secondary) 50%, transparent);
6565
backdrop-filter: blur(20px);
6666
-webkit-backdrop-filter: blur(20px);
6767
font-size: 24px;

‎src/features/calendar/components/AddCalendarModal.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
}
8383

8484
.chevronLabel:hover {
85-
color: var(--color-accent, #1a73e8);
85+
color: var(--color-accent);
8686
}
8787

8888
.chevronIcon {
@@ -93,7 +93,7 @@
9393
}
9494

9595
.chevronLabel:hover .chevronIcon {
96-
color: var(--color-accent, #1a73e8);
96+
color: var(--color-accent);
9797
}
9898

9999
.proxyInfoText {
@@ -155,12 +155,12 @@
155155
}
156156

157157
.buttonPrimary {
158-
background: var(--color-accent, #1a73e8);
158+
background: var(--color-accent);
159159
color: var(--color-bg, #ffffff);
160160
}
161161

162162
.buttonPrimary:hover {
163-
background: var(--color-accent-hover, #1557b0);
163+
background: var(--color-accent-hover);
164164
}
165165

166166
.buttonPrimary:disabled {
@@ -170,7 +170,7 @@
170170

171171
.buttonSecondary {
172172
background: var(--color-surface, #ffffff);
173-
color: var(--color-accent, #1a73e8);
173+
color: var(--color-accent);
174174
border: 1px solid var(--color-border-visible, #dadce0);
175175
}
176176

‎src/features/calendar/components/DeleteDialog.module.css‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323

2424
.modal {
25-
background: white;
25+
background: var(--modal-bg, var(--color-bg-secondary));
2626
border-radius: var(--radius-sm, 8px);
2727
width: 100%;
2828
max-width: 320px;
@@ -46,14 +46,14 @@
4646
align-items: center;
4747
justify-content: space-between;
4848
padding: 12px 16px;
49-
border-bottom: 1px solid #e0e0e0;
49+
border-bottom: 1px solid var(--color-border-subtle, #e0e0e0);
5050
}
5151

5252
.title {
5353
margin: 0;
5454
font-size: 16px;
5555
font-weight: 600;
56-
color: #202124;
56+
color: var(--color-text-primary, #202124);
5757
}
5858

5959
.closeButton {
@@ -65,14 +65,14 @@
6565
border: none;
6666
background: transparent;
6767
border-radius: 50%;
68-
color: #5f6368;
68+
color: var(--color-text-secondary, #5f6368);
6969
cursor: pointer;
7070
transition: all 0.15s ease;
7171
}
7272

7373
.closeButton:hover {
74-
background: #f1f3f4;
75-
color: #202124;
74+
background: var(--color-bg-hover, #f1f3f4);
75+
color: var(--color-text-primary, #202124);
7676
}
7777

7878
.content {
@@ -84,39 +84,41 @@
8484
justify-content: flex-end;
8585
gap: 12px;
8686
padding: 12px 16px;
87-
border-top: 1px solid #e0e0e0;
87+
border-top: 1px solid var(--color-border-subtle, #e0e0e0);
8888
}
8989

9090
.message {
9191
margin: 0 0 16px 0;
9292
font-size: 14px;
93-
color: #5f6368;
93+
color: var(--color-text-secondary, #5f6368);
9494
line-height: 1.4;
9595
}
9696

9797
.calendarName {
9898
margin-bottom: 12px;
99-
color: #202124;
99+
color: var(--color-text-primary, #202124);
100100
}
101101

102102
.warning {
103103
margin-bottom: 12px;
104-
color: #ea4335;
104+
color: var(--color-error, #ea4335);
105105
}
106106

107107
.confirmLabel {
108108
margin-bottom: 8px;
109109
font-size: 14px;
110-
color: #5f6368;
110+
color: var(--color-text-secondary, #5f6368);
111111
}
112112

113113
.confirmInput {
114114
width: 100%;
115115
padding: 8px 12px;
116-
border: 1px solid #dadce0;
116+
border: 1px solid var(--color-border-visible, #dadce0);
117117
border-radius: 6px;
118118
font-size: 14px;
119119
box-sizing: border-box;
120+
background: var(--color-bg-secondary);
121+
color: var(--color-text-primary);
120122
}
121123

122124
.buttons {
@@ -133,27 +135,27 @@
133135
font-weight: 500;
134136
cursor: pointer;
135137
transition: all 0.15s ease;
136-
background: #ea4335;
137-
color: white;
138+
background: var(--color-error, #ea4335);
139+
color: var(--color-bg, #ffffff);
138140
}
139141

140142
.deleteButton:hover {
141-
background: #d33828;
143+
background: color-mix(in srgb, var(--color-error, #ea4335) 85%, black);
142144
}
143145

144146
.cancelButton {
145147
padding: 10px 16px;
146-
border: 1px solid #e0e0e0;
148+
border: 1px solid var(--color-border-subtle, #e0e0e0);
147149
border-radius: 6px;
148-
background: white;
150+
background: var(--color-bg-secondary);
149151
font-size: 14px;
150152
font-weight: 500;
151-
color: #5f6368;
153+
color: var(--color-text-secondary, #5f6368);
152154
cursor: pointer;
153155
transition: all 0.15s ease;
154156
}
155157

156158
.cancelButton:hover {
157-
background: #f8f9fa;
158-
border-color: #d0d0d0;
159+
background: var(--color-bg-hover, #f1f3f4);
160+
border-color: var(--color-border-visible, #d0d0d0);
159161
}

‎src/features/calendar/components/RecurrenceDialog.module.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323

2424
.modal {
25-
background: var(--color-bg, white);
25+
background: var(--modal-bg, var(--color-bg-secondary));
2626
border-radius: var(--radius-sm, 8px);
2727
width: 100%;
2828
max-width: 320px;
@@ -100,27 +100,27 @@
100100
font-weight: 500;
101101
cursor: pointer;
102102
transition: all 0.15s ease;
103-
background: var(--color-primary, #4285f4);
104-
color: white;
103+
background: var(--color-primary);
104+
color: var(--color-bg);
105105
}
106106

107107
.actionButton:hover {
108-
background: var(--color-primary-hover, #3367d6);
108+
background: var(--color-primary-hover);
109109
}
110110

111111
.cancelButton {
112112
padding: 10px 16px;
113113
border: 1px solid var(--color-border-subtle, #e0e0e0);
114114
border-radius: 6px;
115-
background: var(--color-bg, white);
115+
background: var(--color-bg-secondary);
116116
font-size: 14px;
117117
font-weight: 500;
118-
color: var(--color-text-secondary, #5f6368);
118+
color: var(--color-text-secondary);
119119
cursor: pointer;
120120
transition: all 0.15s ease;
121121
}
122122

123123
.cancelButton:hover {
124-
background: var(--color-bg-secondary, #f8f9fa);
125-
border-color: #d0d0d0;
124+
background: var(--color-bg-hover);
125+
border-color: var(--color-border-visible, #d0d0d0);
126126
}

0 commit comments

Comments
 (0)