Skip to content

Commit f394af7

Browse files
Ivan-MalinovskiIvan-Malinovski
committed
Merge fix/add-calendar-modal-theme: align default light theme with brown palette (v0.16.1)
2 parents 8752b3d + caf93dd commit f394af7

8 files changed

Lines changed: 85 additions & 64 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: 9 additions & 9 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 {
@@ -121,8 +121,8 @@
121121

122122
.input:focus {
123123
outline: none;
124-
border-color: var(--color-accent, #1a73e8);
125-
box-shadow: 0 0 0 2px var(--color-accent-light, rgba(26, 115, 232, 0.2));
124+
border-color: var(--color-accent, #b07d4f);
125+
box-shadow: 0 0 0 2px var(--color-accent-light, rgba(176, 125, 79, 0.2));
126126
}
127127

128128
.successMessage {
@@ -155,12 +155,12 @@
155155
}
156156

157157
.buttonPrimary {
158-
background: var(--color-accent, #1a73e8);
159-
color: #ffffff;
158+
background: var(--color-accent);
159+
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

@@ -199,7 +199,7 @@
199199

200200
.colorSelected {
201201
border-color: var(--color-text-primary, #202124);
202-
box-shadow: 0 0 0 2px var(--color-bg, #ffffff);
202+
box-shadow: 0 0 0 2px var(--modal-bg, #ffffff);
203203
}
204204

205205
@media (max-width: 768px) {

‎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)