From 0942b8f9cf89d9a52f3186fd0a4bec3c8112ed07 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 9 Nov 2023 13:20:30 -0500 Subject: [PATCH 1/7] fix(cta): move componenent level css props to private vars --- elements/rh-cta/rh-cta.css | 222 ++++++++++++++++++------------------- 1 file changed, 111 insertions(+), 111 deletions(-) diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index df8e5bca94..9ab712bb4b 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -16,7 +16,7 @@ font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; - text-decoration: var(--rh-cta-text-decoration) !important; + text-decoration: var(--_text-decoration) !important; z-index: 2 !important; } @@ -40,17 +40,17 @@ #container { position: relative; white-space: nowrap; - color: var(--rh-cta-color); + color: var(--_color); font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-text-xl, 1.125rem); font-weight: var(--rh-font-weight-bold, 600); line-height: var(--rh-line-height-lg, 1.5); - background-color: var(--rh-cta-background-color); - border-color: var(--rh-cta-border-color, transparent); + background-color: var(--_background-color); + border-color: var(--_border-color, transparent); border-radius: var(--rh-border-radius-default, 3px); border-width: var(--rh-border-width-sm, 1px); - --_context-background-color: var(--rh-cta-background-color) !important; + --_context-background-color: var(--_background-color) !important; --_arrow-size: 13px; --_arrow-plus-padding: calc(var(--rh-space-md, 8px) + var(--_arrow-size)); --_pf-icon-plus-padding: calc(5px + var(--pf-icon--size)); @@ -115,21 +115,21 @@ svg { } :host(:is(:focus, :focus-within)) { - --rh-cta-background-color: var(--rh-cta-focus-background-color); + --_background-color: var(--rh-cta-focus-background-color); } :host(:is(:focus, :focus-within)) #container { - border-color: var(--rh-cta-focus-border-color); - background-color: var(--rh-cta-focus-container-background-color, - var(--rh-cta-focus-background-color)); + border-color: var(--_focus-border-color); + background-color: var(--_focus-container-background-color, + var(--_focus-background-color)); - --rh-cta-color: var(--rh-cta-focus-color); - --rh-cta-text-decoration: var(--rh-cta-focus-text-decoration); + --_color: var(--_focus-color); + --_text-decoration: var(--_focus-text-decoration); } :host(:is(:focus, :focus-within)) #container:after { border-style: solid; - border-color: var(--rh-cta-focus-inner-border-color); + border-color: var(--_focus-inner-border-color); } /***************************************************************************** @@ -137,11 +137,11 @@ svg { *****************************************************************************/ :host(:hover) #container { - color: var(--rh-cta-hover-color); - border-color: var(--rh-cta-hover-border-color); - background-color: var(--rh-cta-hover-background-color); + color: var(--_hover-color); + border-color: var(--_hover-border-color); + background-color: var(--_hover-background-color); - --rh-cta-text-decoration: var(--rh-cta-hover-text-decoration); + --_text-decoration: var(--rh-cta-hover-text-decoration var(--_hover-text-decoration)); } :host(:hover) #container svg { @@ -157,17 +157,17 @@ svg { *****************************************************************************/ :host(:active) { - background-color: var(--rh-cta-active-background-color); + background-color: var(--_background-color); } :host(:active) #container { - --rh-cta-background-color: var(--rh-cta-active-container-background-color, - var(--rh-cta-active-background-color)); + --_background-color: var(--rh-cta-background-color, var(--rh-cta-active-container-background-color, + var(--rh-cta-active-background-color))); } :host(:active) #container:after { border-style: solid; - border-color: var(--rh-cta-active-inner-border-color) !important; + border-color: var(--_active-inner-border-color) !important; } @@ -209,43 +209,43 @@ svg { *****************************************************************************/ :host(:not([variant])) { - --rh-cta-background-color: transparent; - --rh-cta-border-color: transparent; - --rh-cta-color: var(--rh-color-interactive-blue, #0066cc); - --rh-cta-hover-background-color: transparent; - --rh-cta-hover-border-color: transparent; - --rh-cta-hover-inner-border-color: transparent; - --rh-cta-hover-color: var(--rh-color-interactive-blue-darkest, #004080); - --rh-cta-hover-text-decoration: none; - --rh-cta-focus-background-color: transparent; + --_background-color: var(--rh-cta-background-color,transparent); + --_border-color: var(--rh-cta-border-color, transparent); + --_color: var(--rh-cta-color, var(--rh-color-interactive-blue, #0066cc)); + --_hover-background-color: var(--rh-cta-hover-background-colo, transparent); + --_hover-border-color: var(--rh-cta-hover-border-color, transparent); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-darkest, #004080)); + --_hover-text-decoration: var(--rh-cta-hover-text-decoration, none); + --_focus-background-color: var(--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-border-color: transparent; - --rh-cta-focus-inner-border-color: transparent; - --rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc); - --rh-cta-focus-text-decoration: none; + --_focus-container-background-color: var(--rh-cta-focus-container-background-color, #0066cc1a); + --_focus-border-color: var(--rh-cta-focus-border-color, transparent); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-darker, #0066cc)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, transparent); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); /* --rh-color-border-interactive-on-light with 10% opacity */ - --rh-cta-active-container-background-color: #0066cc1a; - --rh-cta-active-inner-border-color: transparent; - --rh-cta-active-text-decoration: none; + --_active-container-background-color: var(--rh-cta-active-container-background-color, #0066cc1a); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, transparent); + --_active-text-decoration: var(--rh-cta-active-text-decoration, none); } :host(:not([variant])) .dark { - --rh-cta-color: var(--rh-color-interactive-blue-lighter, #73bcf7); - --rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #bee1f4); + --_color: var(--rh-cta-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-lightest, #bee1f4)); /* --rh-color-interactive-blue-lighter with 25% opacity */ - --rh-cta-focus-container-background-color: #73bcf740; - --rh-cta-focus-border-color: transparent; - --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #73bcf7); - --rh-cta-focus-inner-border-color: transparent; - --rh-cta-focus-text-decoration: none; + --_focus-container-background-color: var(--rh-cta-focus-container-background-color, #73bcf740); + --_focus-border-color: var(--rh-cta-focus-border-color, transparent); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, transparent); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); /* --rh-color-interactive-blue-lighter with 25% opacity */ - --rh-cta-active-container-background-color: #73bcf740; - --rh-cta-active-text-decoration: none; + --_active-container-background-color: var(--rh-cta-active-container-background-color, #73bcf740); + --_active-text-decoration: var(--rh-cta-active-text-decoration, none); } /***************************************************************************** @@ -255,22 +255,22 @@ svg { :host([variant="primary"]) #container { border-style: solid; - --rh-cta-background-color: var(--rh-color-brand-red-on-light, #ee0000); - --rh-cta-border-color: var(--rh-color-brand-red-on-light, #ee0000); - --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff); - --rh-cta-hover-background-color: var(--rh-color-brand-red-dark, #be0000); - --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #be0000); - --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-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-active-background-color: var(--rh-color-brand-red-dark, #be0000); - --rh-cta-active-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff); + --_background-color: var(--rh-cta-background-color, var(--rh-color-brand-red-on-light, #ee0000)); + --_border-color: var(--rh-cta-border-color, var(--rh-color-brand-red-on-light, #ee0000)); + --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-brand-red-dark, #be0000)); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-brand-red-dark, #be0000)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-brand-red-on-light, #ee0000)); + --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-brand-red-on-light, #ee0000)); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-brand-red-dark, #be0000)); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-text-primary-on-dark, #ffffff)); } :host([variant="primary"]) #container.dark { - --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #be0000); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-brand-red-dark, #be0000)); } /***************************************************************************** @@ -280,34 +280,34 @@ svg { :host([variant="secondary"]) #container { border-style: solid; - --rh-cta-background-color: transparent; - --rh-cta-border-color: var(--rh-color-border-strong-on-light, #151515); - --rh-cta-color: var(--rh-color-text-primary-on-light, #151515); - --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-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); + --_background-color: var(--rh-cta-background-color, transparent); + --_border-color: var(--rh-cta-border-color, var(--rh-color-text-primary-on-light, #151515)); + --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-light, #151515)); + --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-darkest, #151515)); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-strong-on-light, #151515)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-surface-lighter, #f2f2f2)); + --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong-on-light, #151515)); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-surface-darkest, #151515)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-strong-on-light, #151515)); + --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-border-strong-on-light, #151515)); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-surface-light, #e0e0e0)); } :host([variant="secondary"]) #container.dark { - --rh-cta-border-color: var(--rh-color-border-strong-on-dark, #ffffff); - --rh-cta-color: var(--rh-color-text-primary-on-dark, #ffffff); - --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-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); + --_border-color: var(--rh-cta-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-lightest, #ffffff)); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-light, #151515)); + --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-surface-dark, #383838)); + --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515)); + --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-lightest, #ffffff)); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-strong-on-light, #151515)); } /***************************************************************************** @@ -330,36 +330,36 @@ svg { justify-content: center; align-items: center; - --rh-cta-background-color: transparent; - --rh-cta-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7); - --rh-cta-color: var(--rh-color-interactive-blue-darker, #0066cc); - --rh-cta-hover-background-color: var(--rh-color-surface-lighter, #f2f2f2); - --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-light, #c7c7c7); - --rh-cta-hover-color: var(--rh-color-interactive-blue-darkest, #004080); - --rh-cta-hover-text-decoration: underline; - --rh-cta-focus-color: var(--rh-color-interactive-blue-darker, #0066cc); - --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-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-text-decoration: underline; + --_background-color: var(--rh-cta-background-color, transparent); + --_border-color: var(--rh-cta-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_color: var(--rh-cta-color, var(--rh-color-interactive-blue-darker, #0066cc)); + --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-lighter, #f2f2f2)); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-darkest, #004080)); + --_hover-text-decoration: var(--rh-cta-hover-text-decoration, none); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-darker, #0066cc)); + --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); + --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-lighter, #f2f2f2)); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_active-text-decoration: var(--rh-cta-active-text-decoration, none); } :host([variant="brick"]) #container.dark { - --rh-cta-border-color: var(--rh-color-border-subtle-on-dark, #707070); - --rh-cta-color: var(--rh-color-interactive-blue-lighter, #73bcf7); - --rh-cta-hover-background-color: var(--rh-color-surface-darker, #1f1f1f); - --rh-cta-hover-border-color: var(--rh-color-border-subtle-on-dark, #707070); - --rh-cta-hover-color: var(--rh-color-interactive-blue-lightest, #bee1f4); - --rh-cta-hover-text-decoration: underline; - --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #73bcf7); - --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-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-text-decoration: underline; + --_border-color: var(--rh-cta-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_color: var(--rh-cta-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); + --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-darker, #1f1f1f)); + --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-lightest, #bee1f4)); + --_hover-text-decoration: var(--rh-cta-hover-text-decoration, underline); + --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); + --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); + --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-darker, #1f1f1f)); + --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_active-text-decoration: var(--rh-cta-active-text-decoration, underline); } :host([variant="brick"]) #container.icon pf-icon { From 48ca2941cde1069578ac09102d990fc23306da02 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 9 Nov 2023 14:04:33 -0500 Subject: [PATCH 2/7] chore(cta): lint long lines --- elements/rh-cta/rh-cta.css | 227 ++++++++++++++++++++++++++++++------- 1 file changed, 188 insertions(+), 39 deletions(-) diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 9ab712bb4b..7d5ac79295 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -161,8 +161,11 @@ svg { } :host(:active) #container { - --_background-color: var(--rh-cta-background-color, var(--rh-cta-active-container-background-color, - var(--rh-cta-active-background-color))); + --_background-color: + var(--rh-cta-background-color, + var(--rh-cta-active-container-background-color, + var(--rh-cta-active-background-color) + )); } :host(:active) #container:after { @@ -258,15 +261,51 @@ svg { --_background-color: var(--rh-cta-background-color, var(--rh-color-brand-red-on-light, #ee0000)); --_border-color: var(--rh-cta-border-color, var(--rh-color-brand-red-on-light, #ee0000)); --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-brand-red-dark, #be0000)); - --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-brand-red-dark, #be0000)); - --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-brand-red-on-light, #ee0000)); - --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-brand-red-on-light, #ee0000)); - --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-brand-red-dark, #be0000)); - --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_hover-background-color: + var(--rh-cta-hover-background-color, + var(--rh-color-brand-red-dark, + #be0000 + )); + --_hover-border-color: + var(--rh-cta-hover-border-color, + var(--rh-color-brand-red-dark, + #be0000 + )); + --_hover-color: + var(--rh-cta-hover-color, + var(--rh-color-text-primary-on-dark, + #ffffff + )); + --_focus-background-color: + var(--rh-cta-focus-background-color, + var(--rh-color-brand-red-on-light, + #ee0000 + )); + --_focus-border-color: + var(--rh-cta-focus-border-color, + var(--rh-color-brand-red-on-light, + #ee0000 + )); + --_focus-color: + var(--rh-cta-focus-color, + var(--rh-color-text-primary-on-dark, + #ffffff + )); + --_focus-inner-border-color: + var(--rh-cta-focus-inner-border-color, + var(--rh-color-text-primary-on-dark, + #ffffff + )); + --_active-background-color: + var(--rh-cta-active-background-color, + var(--rh-color-brand-red-dark, + #be0000 + )); + --_active-inner-border-color: + var(--rh-cta-active-inner-border-color, + var(--rh-color-text-primary-on-dark, + #ffffff + )); } :host([variant="primary"]) #container.dark { @@ -283,31 +322,95 @@ svg { --_background-color: var(--rh-cta-background-color, transparent); --_border-color: var(--rh-cta-border-color, var(--rh-color-text-primary-on-light, #151515)); --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-light, #151515)); - --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-darkest, #151515)); - --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-strong-on-light, #151515)); - --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-surface-lighter, #f2f2f2)); - --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong-on-light, #151515)); - --_focus-color: var(--rh-cta-focus-color, var(--rh-color-surface-darkest, #151515)); - --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-strong-on-light, #151515)); + --_hover-background-color: + var(--rh-cta-hover-background-color, + var(--rh-color-surface-darkest, + #151515 + )); + --_hover-border-color: + var(--rh-cta-hover-border-color, + var(--rh-color-border-strong-on-light, + #151515 + )); + --_hover-color: + var(--rh-cta-hover-color, + var(--rh-color-text-primary-on-dark, + #ffffff + )); + --_focus-background-color: + var(--rh-cta-focus-background-color, + var(--rh-color-surface-lighter, + #f2f2f2 + )); + --_focus-border-color: + var(--rh-cta-focus-border-color, + var(--rh-color-border-strong-on-light, + #151515 + )); + --_focus-color: + var(--rh-cta-focus-color, + var(--rh-color-surface-darkest, + #151515 + )); + --_focus-inner-border-color: + var(--rh-cta-focus-inner-border-color, + var(--rh-color-border-strong-on-light, + #151515 + )); --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-border-strong-on-light, #151515)); - --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-surface-light, #e0e0e0)); + --_active-background-color: + var(--rh-cta-active-background-color, + var(--rh-color-border-strong-on-light, + #151515 + )); + --_active-inner-border-color: + var(--rh-cta-active-inner-border-color, + var(--rh-color-surface-light, + #e0e0e0 + )); } :host([variant="secondary"]) #container.dark { --_border-color: var(--rh-cta-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff)); - --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-lightest, #ffffff)); - --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_hover-background-color: + var(--rh-cta-hover-background-color, + var(--rh-color-surface-lightest, + #ffffff + )); + --_hover-border-color: + var(--rh-cta-hover-border-color, + var(--rh-color-border-strong-on-dark, + #ffffff + )); --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-light, #151515)); - --_focus-background-color: var(--rh-cta-focus-background-color, var(--rh-color-surface-dark, #383838)); - --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); - --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-strong-on-dark, #ffffff)); + --_focus-background-color: + var(--rh-cta-focus-background-color, + var(--rh-color-surface-dark, + #383838 + )); + --_focus-border-color: + var(--rh-cta-focus-border-color, + var(--rh-color-border-strong-on-dark, + #ffffff + )); + --_focus-inner-border-color: + var(--rh-cta-focus-inner-border-color, + var(--rh-color-border-strong-on-dark, + #ffffff + )); --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-dark, #ffffff)); --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515)); - --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-lightest, #ffffff)); - --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-strong-on-light, #151515)); + --_active-background-color: + var(--rh-cta-active-background-color, + var(--rh-color-surface-lightest, + #ffffff + )); + --_active-inner-border-color: + var(--rh-cta-active-inner-border-color, + var(--rh-color-border-strong-on-light, + #151515 + )); } /***************************************************************************** @@ -333,32 +436,78 @@ svg { --_background-color: var(--rh-cta-background-color, transparent); --_border-color: var(--rh-cta-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); --_color: var(--rh-cta-color, var(--rh-color-interactive-blue-darker, #0066cc)); - --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-lighter, #f2f2f2)); - --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_hover-background-color: + var(--rh-cta-hover-background-color, + var(--rh-color-surface-lighter, + #f2f2f2 + )); + --_hover-border-color: + var(--rh-cta-hover-border-color, + var(--rh-color-border-subtle-on-light, + #c7c7c7 + )); --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-darkest, #004080)); --_hover-text-decoration: var(--rh-cta-hover-text-decoration, none); --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-darker, #0066cc)); - --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); - --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_focus-border-color: + var(--rh-cta-focus-border-color, + var(--rh-color-border-subtle-on-light, + #c7c7c7 + )); + --_focus-inner-border-color: + var(--rh-cta-focus-inner-border-color, + var(--rh-color-border-subtle-on-light, + #c7c7c7 + )); --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); - --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-lighter, #f2f2f2)); - --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-subtle-on-light, #c7c7c7)); + --_active-background-color: + var(--rh-cta-active-background-color, + var(--rh-color-surface-lighter, + #f2f2f2 + )); + --_active-inner-border-color: + var(--rh-cta-active-inner-border-color, + var(--rh-color-border-subtle-on-light, + #c7c7c7 + )); --_active-text-decoration: var(--rh-cta-active-text-decoration, none); } :host([variant="brick"]) #container.dark { --_border-color: var(--rh-cta-border-color, var(--rh-color-border-subtle-on-dark, #707070)); --_color: var(--rh-cta-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); - --_hover-background-color: var(--rh-cta-hover-background-color, var(--rh-color-surface-darker, #1f1f1f)); - --_hover-border-color: var(--rh-cta-hover-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_hover-background-color: + var(--rh-cta-hover-background-color, + var(--rh-color-surface-darker, + #1f1f1f + )); + --_hover-border-color: + var(--rh-cta-hover-border-color, + var(--rh-color-border-subtle-on-dark, + #707070 + )); --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-lightest, #bee1f4)); --_hover-text-decoration: var(--rh-cta-hover-text-decoration, underline); --_focus-color: var(--rh-cta-focus-color, var(--rh-color-interactive-blue-lighter, #73bcf7)); - --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-border-subtle-on-dark, #707070)); - --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_focus-border-color: + var(--rh-cta-focus-border-color, + var(--rh-color-border-subtle-on-dark, + #707070 + )); + --_focus-inner-border-color: + var(--rh-cta-focus-inner-border-color, + var(--rh-color-border-subtle-on-dark, + #707070 + )); --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); - --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-surface-darker, #1f1f1f)); - --_active-inner-border-color: var(--rh-cta-active-inner-border-color, var(--rh-color-border-subtle-on-dark, #707070)); + --_active-background-color: + var(--rh-cta-active-background-color, + var(--rh-color-surface-darker, #1f1f1f + )); + --_active-inner-border-color: + var(--rh-cta-active-inner-border-color, + var(--rh-color-border-subtle-on-dark, #707070 + )); --_active-text-decoration: var(--rh-cta-active-text-decoration, underline); } From c5089b038afedc6989d836cee9c89ab61a536d9c Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 14 Nov 2023 10:33:36 -0500 Subject: [PATCH 3/7] fix(cta): fix typos --- elements/rh-cta/rh-cta.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 7d5ac79295..9b4b9a4969 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -141,7 +141,7 @@ svg { border-color: var(--_hover-border-color); background-color: var(--_hover-background-color); - --_text-decoration: var(--rh-cta-hover-text-decoration var(--_hover-text-decoration)); + --_text-decoration: var(--rh-cta-hover-text-decoration, var(--_hover-text-decoration)); } :host(:hover) #container svg { @@ -215,7 +215,7 @@ svg { --_background-color: var(--rh-cta-background-color,transparent); --_border-color: var(--rh-cta-border-color, transparent); --_color: var(--rh-cta-color, var(--rh-color-interactive-blue, #0066cc)); - --_hover-background-color: var(--rh-cta-hover-background-colo, transparent); + --_hover-background-color: var(--rh-cta-hover-background-color, transparent); --_hover-border-color: var(--rh-cta-hover-border-color, transparent); --_hover-color: var(--rh-cta-hover-color, var(--rh-color-interactive-blue-darkest, #004080)); --_hover-text-decoration: var(--rh-cta-hover-text-decoration, none); From ef909eb4526e4ca8f542a3f60850b525d9e0ac68 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 11 Jun 2024 15:54:04 -0400 Subject: [PATCH 4/7] fix(cta): incorrectly fixed conflict from merge --- elements/rh-cta/rh-cta.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 0fad1ecce7..f04708c14f 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -45,8 +45,8 @@ font-size: var(--rh-font-size-body-text-lg, 1.125rem); font-weight: 600; /* WARNING: not a token value */ line-height: var(--rh-line-height-body-text, 1.5); - background-color: var(--rh-cta-background-color); - border-color: var(--rh-cta-border-color, transparent); + background-color: var(--_background-color); + border-color: var(--_border-color, transparent); border-radius: var(--rh-border-radius-default, 3px); border-width: var(--rh-border-width-sm, 1px); From aedddd80c24ed69515ca7ad9b9da1fcd4e5de518 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 28 Jun 2024 12:10:50 -0400 Subject: [PATCH 5/7] docs(cta): add desaturated demo --- elements/rh-cta/demo/desaturated.html | 66 +++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 elements/rh-cta/demo/desaturated.html diff --git a/elements/rh-cta/demo/desaturated.html b/elements/rh-cta/demo/desaturated.html new file mode 100644 index 0000000000..2c98f21952 --- /dev/null +++ b/elements/rh-cta/demo/desaturated.html @@ -0,0 +1,66 @@ + +
+ Default + + Default Video + + Primary + + Video + + Secondary + +
+ Brick + Brick Icon +
+
+ + + + + From c3c23f6b02c23628ebf4c353ed218aefb37cc54a Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 8 Aug 2024 11:11:45 -0400 Subject: [PATCH 6/7] docs(cta): remove desatruated demo --- elements/rh-cta/demo/desaturated.html | 66 --------------------------- 1 file changed, 66 deletions(-) delete mode 100644 elements/rh-cta/demo/desaturated.html diff --git a/elements/rh-cta/demo/desaturated.html b/elements/rh-cta/demo/desaturated.html deleted file mode 100644 index 2c98f21952..0000000000 --- a/elements/rh-cta/demo/desaturated.html +++ /dev/null @@ -1,66 +0,0 @@ - -
- Default - - Default Video - - Primary - - Video - - Secondary - -
- Brick - Brick Icon -
-
- - - - - From 135e138182db74f71100dfecedebeaa5e73c2542 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 8 Aug 2024 11:52:23 -0400 Subject: [PATCH 7/7] chore(cta): add changeset --- .changeset/giant-crabs-hug.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/giant-crabs-hug.md diff --git a/.changeset/giant-crabs-hug.md b/.changeset/giant-crabs-hug.md new file mode 100644 index 0000000000..8b60b508b6 --- /dev/null +++ b/.changeset/giant-crabs-hug.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: corrected cta tokens public api