Skip to content

Commit bc8c55c

Browse files
Copilotneilime
Copilot
and
neilime
committed
Update all component CSS files with accessible color scheme
Co-authored-by: neilime <314088+neilime@users.noreply.github.com>
1 parent a36e5e4 commit bc8c55c

5 files changed

Lines changed: 51 additions & 46 deletions

File tree

‎packages/theme/src/theme/hoverscape/HoverkraftBrandHighlight.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.highlight {
2-
background: linear-gradient(45deg, #1998ff, #ff5a02);
2+
background: linear-gradient(45deg, var(--hk-color-primary, #0073cc), var(--hk-color-secondary, #cc4400));
33
background-clip: text;
44
-webkit-background-clip: text;
55
-webkit-text-fill-color: transparent;

‎packages/theme/src/theme/hoverscape/HoverkraftButton.module.css‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@
1818
}
1919

2020
.button:focus-visible {
21-
outline: 3px solid rgba(25, 152, 255, 0.4);
21+
outline: 3px solid var(--hk-color-primary, #0073cc);
22+
outline-offset: 2px;
23+
}
24+
25+
[data-theme="dark"] .button:focus-visible {
26+
outline: 3px solid var(--ifm-color-primary-light, #66b3ff);
2227
outline-offset: 2px;
2328
}
2429

@@ -43,70 +48,70 @@
4348
}
4449

4550
.primary {
46-
background: linear-gradient(135deg, #1998ff 0%, #ff5a02 100%);
47-
box-shadow: 0 8px 24px rgba(25, 152, 255, 0.35);
51+
background: linear-gradient(135deg, #0073cc 0%, #cc4400 100%);
52+
box-shadow: 0 8px 24px rgba(0, 115, 204, 0.35);
4853
}
4954

5055
.primary:hover {
5156
transform: translateY(-2px);
52-
box-shadow: 0 14px 32px rgba(25, 152, 255, 0.45);
53-
filter: brightness(1.03);
57+
box-shadow: 0 14px 32px rgba(0, 115, 204, 0.45);
58+
filter: brightness(1.1);
5459
color: #ffffff;
55-
text-shadow: 0 3px 12px rgba(8, 43, 80, 0.35);
60+
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
5661
}
5762

5863
.primary:active {
5964
transform: translateY(0);
60-
box-shadow: 0 6px 18px rgba(25, 152, 255, 0.35);
65+
box-shadow: 0 6px 18px rgba(0, 115, 204, 0.35);
6166
}
6267

6368
.secondary {
64-
background: rgba(25, 152, 255, 0.15);
65-
border: 2px solid rgba(25, 152, 255, 0.5);
69+
background: rgba(0, 115, 204, 0.15);
70+
border: 2px solid var(--hk-color-primary, #0073cc);
6671
color: var(--hk-color-dark, #1d2026);
67-
box-shadow: 0 2px 8px rgba(25, 152, 255, 0.15);
72+
box-shadow: 0 2px 8px rgba(0, 115, 204, 0.15);
6873
}
6974

7075
.secondary:hover {
7176
transform: translateY(-2px);
72-
background: rgba(25, 152, 255, 0.22);
73-
border-color: rgba(25, 152, 255, 0.65);
74-
box-shadow: 0 4px 12px rgba(25, 152, 255, 0.25);
75-
text-shadow: 0 3px 12px rgba(8, 43, 80, 0.35);
77+
background: rgba(0, 115, 204, 0.22);
78+
border-color: var(--hk-color-primary-dark, #0066b8);
79+
box-shadow: 0 4px 12px rgba(0, 115, 204, 0.25);
80+
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
7681
}
7782

7883
.outline {
7984
background: transparent;
80-
border: 2px solid rgba(25, 152, 255, 0.35);
85+
border: 2px solid var(--hk-color-primary, #0073cc);
8186
color: var(--hk-color-dark, #1d2026);
8287
}
8388

8489
.outline:hover {
8590
transform: translateY(-2px);
86-
background: rgba(25, 152, 255, 0.08);
87-
border-color: rgba(25, 152, 255, 0.5);
88-
text-shadow: 0 3px 12px rgba(8, 43, 80, 0.35);
91+
background: rgba(0, 115, 204, 0.08);
92+
border-color: var(--hk-color-primary, #0073cc);
93+
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
8994
}
9095

9196
[data-theme="dark"] .secondary {
92-
background: rgba(25, 152, 255, 0.25);
93-
border-color: rgba(25, 152, 255, 0.6);
97+
background: rgba(77, 166, 255, 0.25);
98+
border-color: var(--ifm-color-primary, #4da6ff);
9499
color: #ffffff;
95-
box-shadow: 0 2px 8px rgba(25, 152, 255, 0.2);
100+
box-shadow: 0 2px 8px rgba(77, 166, 255, 0.2);
96101
}
97102

98103
[data-theme="dark"] .secondary:hover {
99-
background: rgba(25, 152, 255, 0.35);
100-
border-color: rgba(25, 152, 255, 0.75);
101-
box-shadow: 0 4px 12px rgba(25, 152, 255, 0.3);
104+
background: rgba(77, 166, 255, 0.35);
105+
border-color: var(--ifm-color-primary-light, #66b3ff);
106+
box-shadow: 0 4px 12px rgba(77, 166, 255, 0.3);
102107
}
103108

104109
[data-theme="dark"] .outline {
105110
color: #ffffff;
106-
border-color: rgba(255, 255, 255, 0.4);
111+
border-color: var(--ifm-color-primary-light, #66b3ff);
107112
}
108113

109114
[data-theme="dark"] .outline:hover {
110-
background: rgba(255, 255, 255, 0.12);
111-
border-color: rgba(255, 255, 255, 0.6);
115+
background: rgba(77, 166, 255, 0.12);
116+
border-color: var(--ifm-color-primary-light, #66b3ff);
112117
}

‎packages/theme/src/theme/hoverscape/HoverkraftFeatureList.module.css‎

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

2323
.featureCard:hover {
2424
transform: translateY(-4px);
25-
box-shadow: 0 16px 30px rgba(25, 152, 255, 0.2);
26-
border-color: #1998ff;
25+
box-shadow: 0 16px 30px rgba(0, 115, 204, 0.2);
26+
border-color: var(--hk-color-primary, #0073cc);
2727
}
2828

2929
[data-theme="dark"] .featureCard {

‎packages/theme/src/theme/hoverscape/HoverkraftHero.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
135deg,
1212
var(--hk-color-dark, #1d2026) 0%,
1313
var(--hk-color-gray, #506690) 50%,
14-
var(--ifm-color-primary, #1998ff) 100%
14+
var(--ifm-color-primary, #0073cc) 100%
1515
);
1616
}
1717

@@ -20,7 +20,7 @@
2020
}
2121

2222
.daylight .heroBackground {
23-
background: linear-gradient(135deg, rgba(25, 152, 255, 0.12) 0%, rgba(255, 90, 2, 0.18) 100%);
23+
background: linear-gradient(135deg, rgba(0, 115, 204, 0.12) 0%, rgba(204, 68, 0, 0.18) 100%);
2424
}
2525

2626
.daylight .heroContent {
@@ -38,7 +38,7 @@
3838
135deg,
3939
var(--hk-color-dark, #1d2026) 0%,
4040
var(--hk-color-gray, #506690) 50%,
41-
var(--ifm-color-primary, #1998ff) 100%
41+
var(--ifm-color-primary, #0073cc) 100%
4242
);
4343
opacity: 0.95;
4444
filter: saturate(1.02);

‎packages/theme/src/theme/hoverscape/HoverkraftProjectCard.module.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
}
1515

1616
.primary {
17-
background: linear-gradient(135deg, rgba(25, 152, 255, 0.08) 0%, rgba(255, 90, 2, 0.06) 100%);
18-
border-color: rgba(25, 152, 255, 0.3);
19-
box-shadow: 0 4px 12px rgba(25, 152, 255, 0.15);
17+
background: linear-gradient(135deg, rgba(0, 115, 204, 0.08) 0%, rgba(204, 68, 0, 0.06) 100%);
18+
border-color: rgba(0, 115, 204, 0.3);
19+
box-shadow: 0 4px 12px rgba(0, 115, 204, 0.15);
2020
}
2121

2222
.primary:hover {
23-
border-color: rgba(25, 152, 255, 0.5);
24-
box-shadow: 0 12px 24px rgba(25, 152, 255, 0.2);
23+
border-color: rgba(0, 115, 204, 0.5);
24+
box-shadow: 0 12px 24px rgba(0, 115, 204, 0.2);
2525
}
2626

2727
.neutral {
@@ -39,14 +39,14 @@
3939
}
4040

4141
[data-theme="dark"] .primary {
42-
background: linear-gradient(135deg, rgba(25, 152, 255, 0.15) 0%, rgba(255, 90, 2, 0.1) 100%);
43-
border-color: rgba(25, 152, 255, 0.4);
44-
box-shadow: 0 4px 12px rgba(25, 152, 255, 0.2);
42+
background: linear-gradient(135deg, rgba(77, 166, 255, 0.15) 0%, rgba(204, 68, 0, 0.1) 100%);
43+
border-color: rgba(77, 166, 255, 0.4);
44+
box-shadow: 0 4px 12px rgba(77, 166, 255, 0.2);
4545
}
4646

4747
[data-theme="dark"] .primary:hover {
48-
border-color: rgba(25, 152, 255, 0.6);
49-
box-shadow: 0 12px 24px rgba(25, 152, 255, 0.3);
48+
border-color: rgba(77, 166, 255, 0.6);
49+
box-shadow: 0 12px 24px rgba(77, 166, 255, 0.3);
5050
}
5151

5252
[data-theme="dark"] .neutral {
@@ -96,7 +96,7 @@
9696

9797
.projectMeta {
9898
font-size: 0.9rem;
99-
color: #1998ff;
99+
color: var(--hk-color-primary, #0073cc);
100100
margin: 0;
101101
font-weight: 500;
102102
}
@@ -128,8 +128,8 @@
128128
font-size: 0.85rem;
129129
padding: 0.35rem 0.75rem;
130130
border-radius: 999px;
131-
background: rgba(25, 152, 255, 0.12);
132-
color: #1998ff;
131+
background: rgba(0, 115, 204, 0.12);
132+
color: var(--hk-color-primary, #0073cc);
133133
}
134134

135135
[data-theme="dark"] .projectTag {

0 commit comments

Comments
 (0)