Skip to content

Commit d1c69d4

Browse files
chrismoroneychrismoroney
committed
readability and highlighting
1 parent 74405a3 commit d1c69d4

8 files changed

Lines changed: 47 additions & 35 deletions

File tree

‎assets/css/content-pages.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ a:hover {
8787
border-color: var(--arm-green);
8888
}
8989
.tab-row.inactive:hover h6 {
90-
color: var(--arm-green); }
90+
color: var(--lp-hover-text); }
9191

9292

9393

@@ -110,7 +110,7 @@ html[theme='dark'] p.github-link {
110110
color: var(--arm-light-blue);
111111
}
112112
html[theme='dark'] p.github-link:hover {
113-
color: var(--arm-green);
113+
color: var(--lp-hover-text);
114114
}
115115

116116
div.github-div {
@@ -170,11 +170,11 @@ html[theme='dark'] .multi-tool-selection-title {
170170
}
171171
ads-card.multi-install-card:hover .multi-tool-selection-title{
172172
transition: color 0.3s ease-in-out;
173-
color: var(--arm-green);
173+
color: var(--lp-hover-text);
174174
}
175175
html[theme='dark'] ads-card.multi-install-card:hover .multi-tool-selection-title {
176176
transition: color 0.3s ease-in-out;
177-
color: var(--arm-green);
177+
color: var(--lp-hover-text);
178178
}
179179

180180

@@ -258,7 +258,7 @@ html[theme='dark'] .incorrect-explain {color: #e86868} /* 27% lighter than arm's
258258
text-decoration: none;
259259
}
260260
.social-icons a:hover {
261-
color: var(--arm-green);
261+
color: var(--lp-hover-text);
262262
}
263263

264264
.share-icon {
@@ -268,11 +268,11 @@ html[theme='dark'] .incorrect-explain {color: #e86868} /* 27% lighter than arm's
268268
text-decoration: none;
269269
}
270270
.share-icon:hover {
271-
fill: var(--arm-green);
271+
fill: var(--lp-hover-text);
272272
cursor: pointer;
273273
}
274274
#link-copied-success {
275-
color: var(--arm-green);
275+
color: var(--lp-hover-text);
276276
background-color: var(--arm-black);
277277
border-radius: 10px;
278278
padding-left:8px;

‎assets/css/content.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ div.answer label {
196196
--ads-horizontal-tabs-tab-color-active: var(--arm-orange);
197197
--ads-horizontal-tabs-underline-color: var(--arm-orange);
198198

199-
--ads-horizontal-tabs-tab-color-hover: var(--arm-green);
199+
--ads-horizontal-tabs-tab-color-hover: var(--lp-hover-text);
200200
--ads-horizontal-tabs-tab-content-background-color: var(--arm-color-footing);
201201
}
202202

‎assets/css/cross-page.css‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
:root {
7676
--lp-accent-primary: #6023DE; /* ADS UI Violet 65 */
7777
--lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
78+
--lp-hover-text: #D9D9D9; /* ADS UI Gray 35 */
7879

7980
/* Keep existing site styles working while testing the v5 palette. */
8081
--arm-green: var(--lp-accent-primary);
@@ -124,47 +125,50 @@ ads-button {
124125
/* primary */
125126
--ads-button-background-color-primary-hover: var(--arm-green);
126127
--ads-button-border-color-primary-hover: var(--arm-green);
128+
--ads-button-color-primary-hover: var(--lp-hover-text);
127129

128130
/* secondary */
129131
--ads-button-border-color-secondary-hover: var(--arm-green);
130-
--ads-button-color-secondary-hover: var(--arm-green);
132+
--ads-button-color-secondary-hover: var(--lp-hover-text);
131133

132134
/* tertiary */
133135
--ads-button-border-color-tertiary-hover: var(--arm-green);
134-
--ads-button-color-tertiary-hover: var(--arm-green);
136+
--ads-button-color-tertiary-hover: var(--lp-hover-text);
135137
}
136138
ads-cta-button {
137139
/* primary */
138140
--ads-cta-button-background-color-primary-hover: var(--arm-green);
139141
--ads-cta-button-border-color-primary-hover: var(--arm-green);
142+
--ads-cta-button-color-primary-hover: var(--lp-hover-text);
140143

141144
/* secondary */
142145
--ads-cta-button-border-color-secondary-hover: var(--arm-green);
143-
--ads-cta-button-color-secondary-hover: var(--arm-green);
146+
--ads-cta-button-color-secondary-hover: var(--lp-hover-text);
144147

145148
/* tertiary */
146149
--ads-cta-button-border-color-tertiary-hover: var(--arm-green);
147-
--ads-cta-button-color-tertiary-hover: var(--arm-green);
150+
--ads-cta-button-color-tertiary-hover: var(--lp-hover-text);
148151
}
149152

150153
/* button, form submit syntax */
151154
input[type="submit"]:hover {
152155
background-color: var(--arm-green);
153156
border-color: var(--arm-green);
157+
color: var(--lp-hover-text);
154158
box-shadow: none;
155159
}
156160
ads-tag {
157161
--ads-tag-border-color-hover: var(--arm-green);
158-
--ads-tag-color-hover: var(--arm-green);
162+
--ads-tag-color-hover: var(--lp-hover-text);
159163
}
160164

161165
/* Remove text decorations on all a links when highlighted */
162166
a:hover {
163167
text-decoration: none;
164-
color: var(--arm-green);
168+
color: var(--lp-hover-text);
165169
}
166170
ads-cta-link {
167-
--ads-cta-link-color-hover: var(--arm-green);
171+
--ads-cta-link-color-hover: var(--lp-hover-text);
168172
}
169173
ads-search {
170174
--ads-search-border-color-hover: var(--arm-green);
@@ -241,9 +245,9 @@ ads-masthead {
241245

242246

243247
ads-breadcrumbs {
244-
--ads-breadcrumb-color: var(--arm-green);
245-
--ads-breadcrumbs-link-color: var(--arm-green);
246-
--ads-breadcrumbs-link-color-visited: var(--arm-green);
248+
--ads-breadcrumb-color: var(--lp-accent-secondary);
249+
--ads-breadcrumbs-link-color: var(--lp-accent-secondary);
250+
--ads-breadcrumbs-link-color-visited: var(--lp-accent-secondary);
247251
}
248252

249253

‎assets/css/demo.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
font-size: 14px!important;
174174
}
175175
#reset-demo-txt:hover {
176-
color: var(--arm-green);
176+
color: var(--lp-hover-text);
177177
}
178178
#ping-info, #traffic-info, #terms-of-use {
179179
float: left;

‎assets/css/home.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888

8989
.main-topic-card:hover .main-topic-title {
9090
transition: color 0.3s ease-in-out;
91-
color: var(--arm-green);
91+
color: var(--lp-hover-text);
9292
}
9393

9494

‎assets/css/list-pages.css‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ html[theme="dark"] #tag-clear-btn {
6363
}
6464

6565
#tag-clear-btn:hover {
66-
color: var(--arm-web-safe-orange);
66+
color: var(--lp-hover-text);
6767
}
6868
html[theme="dark"] #tag-clear-btn:hover {
69-
color: var(--arm-web-safe-orange);
69+
color: var(--lp-hover-text);
7070
}
7171

7272
.sorting-criteria.active {
@@ -245,19 +245,19 @@ ads-card.path-card.featured-path-card:hover ads-card-content::before {
245245

246246
.basics-title:hover {
247247
transition: color 0.3s ease-in-out;
248-
color: var(--arm-green);
248+
color: var(--lp-hover-text);
249249
cursor: pointer;
250250
}
251251

252252
ads-card.path-card:hover .learning-path-title {
253253
transition: color 0.3s ease-in-out;
254-
color: var(--arm-green);
254+
color: var(--lp-hover-text);
255255
}
256256

257257
ads-card.path-card:hover .pinned-inline-icon,
258258
ads-card.path-card:hover .pinned-featured-label {
259259
transition: color 0.3s ease-in-out;
260-
color: var(--arm-green);
260+
color: var(--lp-hover-text);
261261
}
262262

263263
/* adjust height depending on screen size */
@@ -293,11 +293,19 @@ ads-card.path-card .learning-path-title-div { /* xs and sm */
293293
color: var(--arm-web-safe-blue);
294294
font-size: 0.95rem;
295295
line-height: 1;
296+
display: inline-flex;
297+
align-items: center;
298+
justify-content: center;
299+
width: 1.35em;
300+
height: 1.35em;
301+
overflow: visible;
296302
}
297303

298304
.pinned-inline-icon i {
299305
display: inline-block;
300306
transform: rotate(-45deg);
307+
transform-origin: center;
308+
line-height: 1;
301309
}
302310

303311
html[theme="dark"] .pinned-inline-icon,
@@ -399,11 +407,11 @@ ads-card-content.tool-card-content::before {
399407
}
400408

401409
ads-card.tool-card:hover p {
402-
color:var(--arm-green);
410+
color: var(--lp-hover-text);
403411
margin-left: 12px;
404412
}
405413
html[theme="dark"] ads-card.tool-card:hover p {
406-
color:var(--arm-green);
414+
color: var(--lp-hover-text);
407415
}
408416

409417

@@ -443,7 +451,7 @@ html[theme='dark'] ads-card.module-card {
443451
color: var(--arm-blue);
444452
}
445453
.module-card-a:hover {
446-
color: var(--arm-web-safe-orange);;
454+
color: var(--lp-hover-text);
447455
}
448456

449457
.module-card-subtitle {

‎themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/pagefind-on-homepage.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
.pagefind-ui__button:focus {
2929
font-weight: 400!important;
3030
font-size: 20px!important;
31-
color: var(--arm-green)!important;
31+
color: var(--lp-hover-text)!important;
3232
}
3333

3434

@@ -40,12 +40,12 @@
4040
.pagefind-ui__button:focus
4141
{
4242
border-color: var(--arm-green)!important;
43-
color: var(--arm-green)!important;
43+
color: var(--lp-hover-text)!important;
4444
}
4545

4646
.pagefind-ui__search-input:hover::placeholder,
4747
.pagefind-ui__search-input:focus::placeholder {
48-
color: rgba(149,214,0,0.7)!important;
48+
color: rgba(217,217,217,0.7)!important;
4949
}
5050

5151

@@ -65,7 +65,7 @@
6565
}
6666

6767
.pagefind-ui__result-link:hover {
68-
color: var(--arm-green)!important;
68+
color: var(--lp-hover-text)!important;
6969
}
7070

7171
.pagefind-ui__search-clear {

‎themes/arm-design-system-hugo-theme/layouts/partials/learning-paths/next-steps.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
text-decoration: none;
2424
}
2525
.social-icons a:hover {
26-
color: var(--arm-green);
26+
color: var(--lp-hover-text);
2727
}
2828

2929
.share-icon {
@@ -33,11 +33,11 @@
3333
text-decoration: none;
3434
}
3535
.share-icon:hover {
36-
fill: var(--arm-green);
36+
fill: var(--lp-hover-text);
3737
cursor: pointer;
3838
}
3939
#link-copied-success {
40-
color: var(--arm-green);
40+
color: var(--lp-hover-text);
4141
background-color: var(--arm-black);
4242
border-radius: 10px;
4343
padding-left:8px;

0 commit comments

Comments
 (0)