Skip to content

Commit 21b4a63

Browse files
Copilothossainemruz
Copilot
and
hossainemruz
authored
Fix button colors to respect accent-color theme variable (#1109)
* Initial plan * Fix publication button outline color to respect accent-color variable Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com> * Also update btn-info to use CSS custom properties for consistency Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com> * Fix CSS style on dark mode --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com> Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
1 parent f7005b7 commit 21b4a63

File tree

7 files changed

+97
-41
lines changed

7 files changed

+97
-41
lines changed

‎assets/styles/components/buttons.scss‎

Lines changed: 55 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,33 @@
1313
}
1414

1515
.btn-info {
16-
background-color: get-light-color('accent-color') !important;
17-
color: get-light-color('text-over-accent-color') !important;
18-
19-
&:hover,
20-
&:focus {
21-
background-color: get-light-color('hover-over-accent-color') !important;
22-
}
16+
// Override Bootstrap 5 CSS custom properties to use theme accent color
17+
--bs-btn-color: #{get-light-color('text-over-accent-color')};
18+
--bs-btn-bg: #{get-light-color('accent-color')};
19+
--bs-btn-border-color: #{get-light-color('accent-color')};
20+
--bs-btn-hover-color: #{get-light-color('text-over-accent-color')};
21+
--bs-btn-hover-bg: #{get-light-color('hover-over-accent-color')};
22+
--bs-btn-hover-border-color: #{get-light-color('hover-over-accent-color')};
23+
--bs-btn-active-color: #{get-light-color('text-over-accent-color')};
24+
--bs-btn-active-bg: #{get-light-color('hover-over-accent-color')};
25+
--bs-btn-active-border-color: #{get-light-color('hover-over-accent-color')};
26+
--bs-btn-disabled-bg: #{get-light-color('accent-color')};
27+
--bs-btn-disabled-border-color: #{get-light-color('accent-color')};
28+
--bs-btn-disabled-color: #{get-light-color('text-over-accent-color')};
2329
}
2430

2531
.btn-outline-info {
26-
color: get-light-color('accent-color') !important;
27-
border-color: get-light-color('accent-color') !important;
28-
29-
&:hover,
30-
&:focus {
31-
background-color: get-light-color('accent-color') !important;
32-
color: get-light-color('text-over-accent-color') !important;
33-
}
32+
// Override Bootstrap 5 CSS custom properties to use theme accent color
33+
--bs-btn-color: #{get-light-color('accent-color')};
34+
--bs-btn-border-color: #{get-light-color('accent-color')};
35+
--bs-btn-hover-color: #{get-light-color('text-over-accent-color')};
36+
--bs-btn-hover-bg: #{get-light-color('accent-color')};
37+
--bs-btn-hover-border-color: #{get-light-color('accent-color')};
38+
--bs-btn-active-color: #{get-light-color('text-over-accent-color')};
39+
--bs-btn-active-bg: #{get-light-color('accent-color')};
40+
--bs-btn-active-border-color: #{get-light-color('accent-color')};
41+
--bs-btn-disabled-color: #{get-light-color('accent-color')};
42+
--bs-btn-disabled-border-color: #{get-light-color('accent-color')};
3443
}
3544

3645
.btn-link {
@@ -51,6 +60,7 @@
5160

5261
.navbar-toggler {
5362
border: none;
63+
5464
&:focus {
5565
border: none;
5666
outline: none !important;
@@ -61,6 +71,7 @@
6171
.tags {
6272
text-align: left;
6373
padding-top: 0.5em;
74+
6475
li {
6576
font-size: 0.5em;
6677
list-style-type: none;
@@ -70,6 +81,7 @@
7081
margin-top: 0.6em;
7182
margin-bottom: 0.6em;
7283
}
84+
7385
a {
7486
text-decoration: none !important;
7587
}
@@ -121,6 +133,7 @@
121133
color: get-light-color('text-over-accent-color') !important;
122134
@include transition();
123135
}
136+
124137
&:focus {
125138
&::before {
126139
content: 'Copied!';
@@ -150,33 +163,42 @@ html[data-theme='dark'] {
150163
}
151164

152165
.btn-info {
153-
background-color: get-dark-color('bg-card') !important;
154-
color: get-dark-color('text-color') !important;
155-
border: 1px solid get-dark-color('muted-text-color') !important;
156-
157-
&:hover,
158-
&:focus {
159-
background-color: get-dark-color('hover-over-accent-color') !important;
160-
}
166+
// Override Bootstrap 5 CSS custom properties for dark theme
167+
// Uses a different color scheme than light theme for better contrast
168+
--bs-btn-color: #{get-dark-color('text-color')};
169+
--bs-btn-bg: #{get-dark-color('bg-card')};
170+
--bs-btn-border-color: #{get-dark-color('muted-text-color')};
171+
--bs-btn-hover-color: #{get-dark-color('text-over-accent-color')};
172+
--bs-btn-hover-bg: #{get-dark-color('hover-over-accent-color')};
173+
--bs-btn-hover-border-color: #{get-dark-color('hover-over-accent-color')};
174+
--bs-btn-active-color: #{get-dark-color('text-over-accent-color')};
175+
--bs-btn-active-bg: #{get-dark-color('hover-over-accent-color')};
176+
--bs-btn-active-border-color: #{get-dark-color('hover-over-accent-color')};
177+
--bs-btn-disabled-bg: #{get-dark-color('bg-card')};
178+
--bs-btn-disabled-border-color: #{get-dark-color('muted-text-color')};
179+
--bs-btn-disabled-color: #{get-dark-color('text-color')};
161180
}
162181

163182
.btn-outline-info {
164-
color: get-dark-color('accent-color') !important;
165-
border-color: get-dark-color('accent-color') !important;
166-
167-
&:hover,
168-
&:focus {
169-
background-color: get-dark-color('accent-color') !important;
170-
color: get-dark-color('text-over-accent-color') !important;
171-
}
183+
// Override Bootstrap 5 CSS custom properties to use theme accent color
184+
--bs-btn-color: #{get-dark-color('accent-color')};
185+
--bs-btn-border-color: #{get-dark-color('accent-color')};
186+
--bs-btn-hover-color: #{get-dark-color('text-over-accent-color')};
187+
--bs-btn-hover-bg: #{get-dark-color('accent-color')};
188+
--bs-btn-hover-border-color: #{get-dark-color('accent-color')};
189+
--bs-btn-active-color: #{get-dark-color('text-over-accent-color')};
190+
--bs-btn-active-bg: #{get-dark-color('accent-color')};
191+
--bs-btn-active-border-color: #{get-dark-color('accent-color')};
192+
--bs-btn-disabled-color: #{get-dark-color('accent-color')};
193+
--bs-btn-disabled-border-color: #{get-dark-color('accent-color')};
172194
}
173195

174196
.btn-link {
175197
color: get-dark-color('accent-color');
176198

177199
&:hover,
178200
&:focus {
179-
color: get-dark-color('hover-over-accent-color');
201+
color: get-dark-color('text-over-accent-color');
180202
}
181203
}
182204

@@ -203,6 +225,7 @@ html[data-theme='dark'] {
203225
background-color: get-dark-color('hover-over-accent-color') !important;
204226
}
205227
}
228+
206229
.copy-code-button {
207230
background-color: get-dark-color('bg-primary') !important;
208231
color: get-dark-color('muted-text-color') !important;

‎assets/styles/components/links.scss‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ a {
99
&:hover,
1010
&:focus {
1111
-webkit-text-decoration: get-light-color('hover-over-accent-color') underline;
12-
text-decoration: get-light-color('hover-over-accent-color') underline;
12+
text-decoration: get-light-color('hover-over-accent-color') underline;
1313
color: get-light-color('hover-over-accent-color');
1414
@include transition();
1515
}
1616
}
1717

18-
.list-link, .taxonomy-term {
18+
.list-link,
19+
.taxonomy-term {
1920
text-decoration: none !important;
2021
color: get-light-color('text-color');
2122
@include transition();
@@ -68,12 +69,22 @@ html[data-theme='dark'] {
6869
&:hover,
6970
&:focus {
7071
-webkit-text-decoration: get-dark-color('hover-over-accent-color') underline;
71-
text-decoration: get-dark-color('hover-over-accent-color') underline;
72+
text-decoration: get-dark-color('hover-over-accent-color') underline;
7273
color: get-dark-color('hover-over-accent-color');
7374
}
7475
}
7576

76-
.list-link, .taxonomy-term {
77+
a.btn-outline-info {
78+
79+
&:hover,
80+
&:focus,
81+
&:active {
82+
color: get-dark-color('text-over-accent-color');
83+
}
84+
}
85+
86+
.list-link,
87+
.taxonomy-term {
7788
color: get-dark-color('text-color');
7889

7990
&:hover,
@@ -94,4 +105,4 @@ html[data-theme='dark'] {
94105
color: get-dark-color('inline-code-color');
95106
}
96107
}
97-
}
108+
}

‎exampleSite/package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎layouts/partials/cards/project.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ <h5 class="card-title mb-0">{{ .name }}</h5>
4949
</div>
5050
</div>
5151
</a>
52-
<div class="card-body text-justify pt-1 pb-1">
52+
<div class="card-body text-justify pt-1 pb-2">
5353
<p>{{ .summary | markdownify }}</p>
5454
<!-- Display project card technology tags -->
5555
<div class="project-card-footer">
5656
{{ if .tags }}
5757
<div class="project-tags-holder">
5858
{{ range $index,$tag:= .tags }}
59-
<span class="badge btn-info">
59+
<span class="btn badge btn-info">
6060
{{ $tag }}
6161
</span>
6262
{{ end }}

‎layouts/partials/cards/publication.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h5 class="card-title mb-0">{{ .title }}</h5>
3636
<div class="card-footer">
3737
<div class="tags">
3838
{{ range $index,$tag:= .tags }}
39-
<span class="btn badge btn-info ms-1 p-2">
39+
<span class="btn badge btn-info ms-1 p-1">
4040
{{ $tag }}
4141
</span>
4242
{{ end }}

‎layouts/partials/misc/tags.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ul style="padding-left: 0;">
33
{{ range . }}
44
{{ $url:= printf "tags/%s/" . }}
5-
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn btn-sm btn-info">{{ . }}</a></li>
5+
<li><a href="{{ $url | urlize | relLangURL }}" class="btn btn-sm btn-outline-info rounded">{{ . }}</a></li>
66
{{ end }}
77
</ul>
88
</div>

0 commit comments

Comments
 (0)