Skip to content

Commit

Permalink
fix(cta): change focus styles (#1538)
Browse files Browse the repository at this point in the history 
* fix(cta): change focus styles

WIP

* fix(cta): increase specificity for focus state

* docs(cta): add/update variable docs in `.ts` file.

* chore(cta): add changeset

* fix(cta): fix icons in color context demo

* fix(cta): explicitly set focus color declaration

* docs(cta): play icon

* fix(cta): update focus font colors

* fix(cta): no inner border for CTA secondary on focus

* feat: update images with updated focus and active styles and slight color changes

* feat(docs): fix focus style image size

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: marionnegp <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
  • Loading branch information
@adamjohnson @bennypowers @marionnegp
4 people authored May 21, 2024
1 parent f1314e8 commit 90ea688
Show file tree
Hide file tree
Showing 16 changed files with 54 additions and 31 deletions.
5 changes: 5 additions & 0 deletions .changeset/good-planets-yell.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rhds/elements": minor
---

`<rh-cta>`: Changed focus states to mimic hover states + an additonal outline.
Binary file modified elements/rh-cta/docs/cta-a11y-focus-order.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-a11y-keyboard-interactions.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-bricks-theme-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-active-theme-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-active-theme-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-active-white-variants.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-focus-theme-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-focus-theme-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-focus-white-variants.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-hover-theme-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-hover-theme-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-interaction-state-hover-white-variants.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified elements/rh-cta/docs/cta-theme-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 43 additions & 28 deletions elements/rh-cta/rh-cta.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,13 @@ svg {
--rh-cta-focus-container-background-color,
var(--rh-cta-focus-background-color)
);
color: var(--rh-cta-focus-color);
outline:
var(--rh-border-width-md, 2px)
solid
var(--rh-cta-focus-container-outline-color, var(--rh-cta-focus-outline-color));
outline-offset: 2px;

--rh-cta-color: var(--rh-cta-focus-color);
--rh-cta-text-decoration: var(--rh-cta-focus-text-decoration);
}

Expand Down Expand Up @@ -225,10 +230,11 @@ svg {
--rh-cta-focus-background-color: transparent;

/* --rh-color-border-interactive-on-light with 10% opacity */
--rh-cta-focus-container-background-color: #0066cc1a;
--rh-cta-focus-container-background-color: transparent;
--rh-cta-focus-container-outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
--rh-cta-focus-border-color: transparent;
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc);
--rh-cta-focus-color: var(--rh-color-interactive-blue-darkest, #003366);
--rh-cta-focus-text-decoration: none;

/* --rh-color-border-interactive-on-light with 10% opacity */
Expand All @@ -242,9 +248,10 @@ svg {
--rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #b9dafc);

/* --rh-color-interactive-blue-lighter with 25% opacity */
--rh-cta-focus-container-background-color: #73bcf740;
--rh-cta-focus-container-background-color: transparent;
--rh-cta-focus-container-outline-color: var(--rh-color-border-interactive-on-dark, #92c5f9);
--rh-cta-focus-border-color: transparent;
--rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
--rh-cta-focus-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-focus-text-decoration: none;

Expand All @@ -266,16 +273,18 @@ svg {
--rh-cta-hover-background-color: var(--rh-color-brand-red-dark, #a60000);
--rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
--rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-background-color: var(--rh-color-brand-red-on-light, #ee0000);
--rh-cta-focus-border-color: var(--rh-color-brand-red-on-light, #ee0000);
--rh-cta-focus-background-color: var(--rh-color-brand-red-dark, #a60000);
--rh-cta-focus-border-color: transparent;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
--rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-active-background-color: var(--rh-color-brand-red-dark, #a60000);
--rh-cta-active-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-active-inner-border-color: transparent;
}

:host([variant="primary"]) #container.dark {
--rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000);
--rh-cta-hover-border-color: transparent;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-dark, #92c5f9);
}

/*****************************************************************************
Expand All @@ -291,13 +300,14 @@ svg {
--rh-cta-hover-background-color: var(--rh-color-surface-darkest, #151515);
--rh-cta-hover-border-color: var(--rh-color-border-strong-on-light, #151515);
--rh-cta-hover-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-background-color: var(--rh-color-surface-lighter, #f2f2f2);
--rh-cta-focus-border-color: var(--rh-color-border-strong-on-light, #151515);
--rh-cta-focus-color: var(--rh-color-surface-darkest, #151515);
--rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
--rh-cta-focus-background-color: var(--rh-color-surface-darkest, #151515);
--rh-cta-focus-border-color: transparent;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
--rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-active-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-active-background-color: var(--rh-color-border-strong-on-light, #151515);
--rh-cta-active-inner-border-color: var(--rh-color-surface-light, #e0e0e0);
--rh-cta-active-inner-border-color: transparent;
}

:host([variant="secondary"]) #container.dark {
Expand All @@ -306,13 +316,14 @@ svg {
--rh-cta-hover-background-color: var(--rh-color-surface-lightest, #ffffff);
--rh-cta-hover-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
--rh-cta-hover-color: var(--rh-color-text-primary-on-light, #151515);
--rh-cta-focus-background-color: var(--rh-color-surface-dark, #383838);
--rh-cta-focus-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
--rh-cta-focus-inner-border-color: var(--rh-color-border-strong-on-dark, #ffffff);
--rh-cta-focus-color: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-cta-focus-background-color: var(--rh-color-surface-lightest, #ffffff);
--rh-cta-focus-border-color: transparent;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-dark, #92c5f9);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-focus-color: var(--rh-color-text-primary-on-light, #151515);
--rh-cta-active-color: var(--rh-color-text-primary-on-light, #151515);
--rh-cta-active-background-color: var(--rh-color-surface-lightest, #ffffff);
--rh-cta-active-inner-border-color: var(--rh-color-border-strong-on-light, #151515);
--rh-cta-active-inner-border-color: transparent;
}

/*****************************************************************************
Expand Down Expand Up @@ -342,12 +353,14 @@ svg {
--rh-cta-hover-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
--rh-cta-hover-color: var(--rh-color-interactive-blue-darkest, #003366);
--rh-cta-hover-text-decoration: underline;
--rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc);
--rh-cta-focus-background-color: var(--rh-color-surface-lighter, #f2f2f2);
--rh-cta-focus-color: var(--rh-color-interactive-blue-darkest, #003366);
--rh-cta-focus-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
--rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
--rh-cta-focus-text-decoration: none;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-light, #0066cc);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-focus-text-decoration: underline;
--rh-cta-active-background-color: var(--rh-color-surface-lighter, #f2f2f2);
--rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7);
--rh-cta-active-inner-border-color: transparent;
--rh-cta-active-text-decoration: underline;
}

Expand All @@ -358,12 +371,14 @@ svg {
--rh-cta-hover-border-color: var(--rh-color-border-subtle-on-dark, #707070);
--rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
--rh-cta-hover-text-decoration: underline;
--rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9);
--rh-cta-focus-background-color: var(--rh-color-surface-dark-alt, #292929);
--rh-cta-focus-color: var(--rh-color-interactive-blue-lightest, #b9dafc);
--rh-cta-focus-border-color: var(--rh-color-border-subtle-on-dark, #707070);
--rh-cta-focus-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
--rh-cta-focus-text-decoration: none;
--rh-cta-focus-outline-color: var(--rh-color-border-interactive-on-dark, #92c5f9);
--rh-cta-focus-inner-border-color: transparent;
--rh-cta-focus-text-decoration: underline;
--rh-cta-active-background-color: var(--rh-color-surface-darker, #1f1f1f);
--rh-cta-active-inner-border-color: var(--rh-color-border-subtle-on-dark, #707070);
--rh-cta-active-inner-border-color: transparent;
--rh-cta-active-text-decoration: underline;
}

Expand Down
9 changes: 6 additions & 3 deletions elements/rh-cta/rh-cta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,16 @@ function isButton(element: Element): element is HTMLButtonElement {
* {@default `var(--rh-color-brand-red-on-light, #ee0000)`}
* @cssprop --rh-cta-focus-container-background-color
* Sets the cta container background color on focus
* {@default #0066cc1a}
* {@default transparent}
* @cssprop --rh-cta-focus-container-outline-color
* Sets the cta container outline color on focus
* {@default #0066cc}
* @cssprop --rh-cta-focus-border-color
* Sets the cta border color on focus
* {@default `var(--rh-color-brand-red-on-light, #ee0000)`}
* {@default transparent}
* @cssprop --rh-cta-focus-inner-border-color
* Sets the cta inner border color on focus
* {@default `var(--rh-color-text-primary-on-dark, #ffffff)`}
* {@default transparent}
* @cssprop --rh-cta-active-color
* Sets the cta color on active. Applicable only for secondary variant
* {@default `var(--rh-color-text-primary-on-dark, #ffffff)`}
Expand Down

0 comments on commit 90ea688

Please sign in to comment.