Skip to content

Commit

Permalink
fix: update colors for accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Aug 8, 2024
1 parent e4011c0 commit 44b3049
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 11 deletions.
9 changes: 7 additions & 2 deletions builder/versions/ilw-card.1.0.0-alpha.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,18 @@
"samples": [
{
"name": "default",
"description": "Plain card with text",
"description": "Plain card with heading and text",
"text": "<h3>Plain Card</h3><p>A card with just a heading and text.</p>"
},
{
"name": "minimal",
"description": "Minimal card without a heading",
"text": "<p>A minimal card with a <a href=\"#\">link to something</a>.</p>"
},
{
"name": "image",
"description": "Card with an image and a button",
"text": "<img src=\"https://fastly.picsum.photos/id/159/320/200.jpg?hmac=5rPdtfpYQaZopnmOHhelxv5a6GuLOqcRsxSbZsZIQZY\" alt=\"\" slot=\"image\"><h3>Image Card</h3><p>Card with an image and a footer button.</p><div slot=\"footer\"><a href=\"#\" class=\"ilw-button\">Contact Us</a></div>"
"text": "<img src=\"https://picsum.photos/570/300\" alt=\"\" slot=\"image\"><h3>Image Card</h3><p>Card with an image and a footer button.</p><div slot=\"footer\"><a href=\"#\" class=\"ilw-button\">Contact Us</a></div>"
},
{
"name": "clickable",
Expand Down
62 changes: 53 additions & 9 deletions src/ilw-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
--ilw-card--icon-width: 120px;
--ilw-card--icon-height: 80px;
--ilw-card--orange-1: #fd890e;

--ilw-card--orange-gradient: linear-gradient(
135.14deg,
var(--il-harvest) 0%,
Expand Down Expand Up @@ -40,14 +41,28 @@
--ilw-card--hover--link: var(--ilw-card--hover--text-color);
}

ilw-card {
--ilw-button--background-color: #fff;
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--border-color: var(--il-blue);
--ilw-button--focused-background-color: var(--il-blue);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: var(--il-blue);
}

ilw-card[clickable]:hover {
--ilw-button--border-color: #fff;
--ilw-button--background-color: #fff;
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--border-color: var(--il-blue);
--ilw-button--focused-background-color: var(--il-blue);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: #fff;
}

ilw-card[theme="gray"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--il-storm-lighter-4);
--ilw-card--heading-color: var(--il-altgeld);
--ilw-card--heading-color: var(--il-blue);
--ilw-card--icon-color: var(--il-storm-darker-1);
--ilw-card--text-color: var(--il-storm-darker-1);

Expand All @@ -63,7 +78,7 @@
--ilw-card--icon-color: #fff;
--ilw-card--text-color: #fff;

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

Expand All @@ -73,10 +88,20 @@
--ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);

--ilw-button--background-color: transparent;
--ilw-button--foreground-color: #fff;
--ilw-button--border-color: #fff;
--ilw-button--focused-background-color: #fff;
--ilw-button--focused-foreground-color: var(--il-blue);
--ilw-button--focused-border-color: var(--il-blue);

&[clickable]:hover {
--ilw-button--background-color: #fff;
--ilw-button--border-color: var(--il-blue);
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--focused-background-color: var(--il-blue);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: var(--il-blue);
}
}

Expand Down Expand Up @@ -106,6 +131,11 @@

&[clickable]:hover {
--ilw-button--border-color: var(--il-orange);
--ilw-button--background-color: #fff;
--ilw-button--foreground-color: var(--il-orange);
--ilw-button--focused-background-color: var(--il-orange);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: var(--il-orange);
}
}

Expand All @@ -127,23 +157,32 @@
--ilw-card--hover--clickable-border: var(--il-industrial-lighter-1);
--ilw-card--hover--link: var(--ilw-card--hover--text-color);


--ilw-button--background-color: transparent;
--ilw-button--foreground-color: #fff;
--ilw-button--border-color: #fff;
--ilw-button--focused-background-color: #fff;
--ilw-button--focused-foreground-color: var(--il-blue);
--ilw-button--focused-border-color: var(--il-blue);

&[clickable]:hover {
--ilw-button--background-color: var(--il-blue);
--ilw-button--background-color: #fff;
--ilw-button--border-color: var(--il-blue);
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--focused-background-color: var(--il-blue);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: var(--il-blue);
}
}

ilw-card[theme="orange-gradient"] {
--ilw-card--border-color: var(--il-storm);
--ilw-card--background: var(--ilw-card--orange-gradient);
--ilw-card--heading-color: #fff;
--ilw-card--heading-color: var(--il-blue);
--ilw-card--icon-color: var(--il-blue);
--ilw-card--text-color: var(--il-blue);

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

Expand All @@ -154,14 +193,19 @@
--ilw-card--hover--link: var(--ilw-card--hover--text-color);

--ilw-button--background-color: transparent;
--ilw-button--foreground-color: #fff;
--ilw-button--border-color: #fff;
--ilw-button--foreground-color: var(--il-blue);
--ilw-button--border-color: var(--il-blue);
--ilw-button--focused-background-color: #fff;
--ilw-button--focused-foreground-color: var(--il-orange);
--ilw-button--focused-border-color: var(--il-orange);

&[clickable]:hover {
--ilw-button--background-color: var(--il-orange);
--ilw-button--background-color: transparent;
--ilw-button--border-color: var(--il-orange);
--ilw-button--foreground-color: var(--il-orange);
--ilw-button--focused-background-color: var(--il-orange);
--ilw-button--focused-foreground-color: #fff;
--ilw-button--focused-border-color: var(--il-orange);
}
}
}
Expand Down

0 comments on commit 44b3049

Please sign in to comment.