Skip to content

Commit

Permalink
fix: fix some more color edge cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Aug 8, 2024
1 parent 297c546 commit 0ba4800
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 12 deletions.
4 changes: 2 additions & 2 deletions samples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ <h2>Grid 1</h2>
<ilw-grid innerwidth="350px">
<ilw-card>
<h3>Plain Card</h3>
<p>A card with just a heading and text.</p>
<p>A minimal card with a <a href="#">link to something</a>.</p>
</ilw-card>
<ilw-card align="center">
<img src="https://fastly.picsum.photos/id/159/320/200.jpg?hmac=5rPdtfpYQaZopnmOHhelxv5a6GuLOqcRsxSbZsZIQZY"
Expand All @@ -99,7 +99,7 @@ <h3>Plain Card</h3>
<li><a href="#">Contact Us</a></li>
</ul>
</ilw-card>
<ilw-card clickable>
<ilw-card>
<img src="https://fastly.picsum.photos/id/821/320/200.jpg?hmac=RVG3Kon-1NU2_36rEvVVfR70VetoI3lqNuGyXKKbHCU"
alt="" slot="image">
<h3>
Expand Down
55 changes: 45 additions & 10 deletions src/ilw-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,26 @@
--ilw-card--icon-color: var(--ilw-text--color);
--ilw-card--text-color: var(--ilw-text--color);

/* Links need to be colored differently depending on the theme */
--ilw-card--link: var(--ilw-link--color);
--ilw-card--link-focus: var(--ilw-link--focused-color);
--ilw-card--link-visited: var(--ilw-link--visited-color);

--ilw-card--clickable--heading-color: var(--ilw-card--heading-color);
--ilw-card--clickable--border: var(--il-orange);
--ilw-card--clickable--link: var(--ilw-link--color);

/* Colors for a clickable card when hovered */
--ilw-card--hover--background: var(--il-blue);
--ilw-card--hover--heading-color: #fff;
--ilw-card--hover--text-color: #fff;
--ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
--ilw-card--hover--link-focus: var(--il-orange);
}

ilw-card {
/* Buttons also need color changes with themes, but overriding classes on
the buttons themselves should take precedence over these. */
--ilw-button--background-color: #fff;
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--border-color: var(--il-blue);
Expand All @@ -68,7 +76,7 @@

--ilw-card--clickable--heading-color: var(--il-altgeld);
--ilw-card--clickable--border: var(--il-altgeld);
--ilw-card--clickable--link: var(--ilw-link--color);
--ilw-card--link: var(--ilw-link--color);
}

ilw-card[theme="blue"] {
Expand All @@ -77,16 +85,19 @@
--ilw-card--heading-color: var(--il-orange);
--ilw-card--icon-color: #fff;
--ilw-card--text-color: #fff;
--ilw-card--link: #fff;
--ilw-card--link-focus: var(--il-orange);
--ilw-card--link-visited: #fff;

--ilw-card--clickable--heading-color: var(--il-orange);
--ilw-card--clickable--border: var(--il-orange);
--ilw-card--clickable--link: #fff;

--ilw-card--hover--background: #fff;
--ilw-card--hover--heading-color: var(--il-orange);
--ilw-card--hover--text-color: var(--ilw-text--color);
--ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
--ilw-card--hover--link-focus: var(--il-altgeld);

--ilw-button--background-color: transparent;
--ilw-button--foreground-color: #fff;
Expand Down Expand Up @@ -114,13 +125,16 @@

--ilw-card--clickable--heading-color: #fff;
--ilw-card--clickable--border: var(--il-blue);
--ilw-card--clickable--link: var(--il-blue);
--ilw-card--link: var(--il-blue);
--ilw-card--link-focus: var(--il-blue-lighter-1);
--ilw-card--link-visited: var(--il-blue);

--ilw-card--hover--background: #fff;
--ilw-card--hover--heading-color: var(--il-orange);
--ilw-card--hover--text-color: var(--ilw-text--color);
--ilw-card--hover--clickable-border: var(--il-orange);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
--ilw-card--hover--link-focus: var(--il-altgeld);

--ilw-button--background-color: var(--il-orange);
--ilw-button--foreground-color: #fff;
Expand All @@ -146,16 +160,19 @@
--ilw-card--heading-color: #fff;
--ilw-card--icon-color: #fff;
--ilw-card--text-color: #fff;
--ilw-card--link: #fff;
--ilw-card--link-focus: var(--il-storm-lighter-3);
--ilw-card--link-visited: #fff;

--ilw-card--clickable--heading-color: #fff;
--ilw-card--clickable--border: var(--il-industrial-lighter-2);
--ilw-card--clickable--link: #fff;

--ilw-card--hover--background: #fff;
--ilw-card--hover--heading-color: var(--il-orange);
--ilw-card--hover--text-color: var(--ilw-text--color);
--ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
--ilw-card--hover--link-focus: var(--il-altgeld);


--ilw-button--background-color: transparent;
Expand All @@ -181,16 +198,19 @@
--ilw-card--heading-color: var(--il-blue);
--ilw-card--icon-color: var(--il-blue);
--ilw-card--text-color: var(--il-blue);
--ilw-card--link: var(--il-blue);
--ilw-card--link-focus: var(--il-blue-lighter-1);
--ilw-card--link-visited: var(--il-blue);

--ilw-card--clickable--heading-color: var(--il-blue);
--ilw-card--clickable--border: var(--il-industrial);
--ilw-card--clickable--link: var(--il-blue);

--ilw-card--hover--background: #fff;
--ilw-card--hover--heading-color: var(--il-orange);
--ilw-card--hover--text-color: var(--ilw-text--color);
--ilw-card--hover--clickable-border: var(--il-orange);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
--ilw-card--hover--link-focus: var(--il-altgeld);

--ilw-button--background-color: transparent;
--ilw-button--foreground-color: var(--il-blue);
Expand Down Expand Up @@ -221,6 +241,16 @@ ilw-card {
text-align: center;
}

a {
color: var(--ilw-card--link);
&:visited {
color: var(--ilw-card--link-visited);
}
&:hover {
color: var(--ilw-card--link-focus);
}
}

& > h2,
& > h3,
& > h4,
Expand All @@ -237,10 +267,6 @@ ilw-card {
border-bottom: 4px solid var(--ilw-card--clickable--border);
cursor: pointer;

a {
color: var(--ilw-card--clickable--link);
}

& > h2,
& > h3,
& > h4,
Expand Down Expand Up @@ -276,6 +302,9 @@ ilw-card {

a {
color: var(--ilw-card--hover--link);
&:hover {
color: var(--ilw-card--hover--link-focus);
}
}

& > h2,
Expand All @@ -286,6 +315,12 @@ ilw-card {
color: var(--ilw-card--hover--heading-color);
a {
color: var(--ilw-card--hover--heading-color);
&:visited {
color: var(--ilw-card--hover--heading-color);
}
&:hover {
color: var(--ilw-card--hover--heading-color);
}
}
}
}
Expand Down

0 comments on commit 0ba4800

Please sign in to comment.