From 2775926058b03fe873e6babefa0bc7e0495b47c2 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 6 Mar 2024 10:29:52 -0500 Subject: [PATCH] fix(cta): revert addition of lightdom for future minor release (#1494) * fix(cta): revert addition of lightdom for future minor release * fix(cta): remove lightdom css file --- docs/_includes/layout-base.njk | 1 - elements/rh-cta/demo/analytics.html | 1 - elements/rh-cta/demo/brick.html | 1 - elements/rh-cta/demo/button.html | 1 - elements/rh-cta/demo/color-context.html | 1 - .../demo/no-javascript-customization.html | 1 - elements/rh-cta/demo/resizing.html | 1 - elements/rh-cta/demo/rh-cta.html | 1 - elements/rh-cta/demo/right-to-left.html | 1 - elements/rh-cta/demo/variants.html | 1 - elements/rh-cta/rh-cta-lightdom.css | 208 ------------------ 11 files changed, 218 deletions(-) delete mode 100644 elements/rh-cta/rh-cta-lightdom.css diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk index b5651b05f6..32f1f44865 100644 --- a/docs/_includes/layout-base.njk +++ b/docs/_includes/layout-base.njk @@ -26,7 +26,6 @@ - {% sassFile false %} diff --git a/elements/rh-cta/demo/analytics.html b/elements/rh-cta/demo/analytics.html index 7fbed9bb25..8979d33140 100644 --- a/elements/rh-cta/demo/analytics.html +++ b/elements/rh-cta/demo/analytics.html @@ -72,7 +72,6 @@

Last CTA Analytics Event

} - diff --git a/elements/rh-cta/demo/button.html b/elements/rh-cta/demo/button.html index f453ac7736..5662f47dd2 100644 --- a/elements/rh-cta/demo/button.html +++ b/elements/rh-cta/demo/button.html @@ -10,7 +10,6 @@ - diff --git a/elements/rh-cta/demo/color-context.html b/elements/rh-cta/demo/color-context.html index d358a55304..2c59541217 100644 --- a/elements/rh-cta/demo/color-context.html +++ b/elements/rh-cta/demo/color-context.html @@ -8,7 +8,6 @@ Brick Video - diff --git a/elements/rh-cta/demo/rh-cta.html b/elements/rh-cta/demo/rh-cta.html index 365cbf8a89..848d5a6659 100644 --- a/elements/rh-cta/demo/rh-cta.html +++ b/elements/rh-cta/demo/rh-cta.html @@ -3,7 +3,6 @@ - diff --git a/elements/rh-cta/demo/right-to-left.html b/elements/rh-cta/demo/right-to-left.html index f2b8dda5bf..5433160dc2 100644 --- a/elements/rh-cta/demo/right-to-left.html +++ b/elements/rh-cta/demo/right-to-left.html @@ -90,7 +90,6 @@

Deep Shadow RTL

- - diff --git a/elements/rh-cta/rh-cta-lightdom.css b/elements/rh-cta/rh-cta-lightdom.css deleted file mode 100644 index dc83fda97a..0000000000 --- a/elements/rh-cta/rh-cta-lightdom.css +++ /dev/null @@ -1,208 +0,0 @@ -rh-cta:not(:defined) { - width: fit-content !important; - display: inline-flex !important; - color: var(--rh-cta-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-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); - border-radius: var(--rh-border-radius-default, 3px); - border-width: var(--rh-border-width-sm, 1px); -} - -rh-cta:not(:defined, [variant]) { - --rh-cta-background-color: transparent; - --rh-cta-border-color: transparent; - --rh-cta-color: var(--rh-color-interactive-blue-darker, #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, #003366); - --rh-cta-hover-text-decoration: none; - --rh-cta-focus-background-color: transparent; - --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; - --rh-cta-active-container-background-color: #0066cc1a; - --rh-cta-active-inner-border-color: transparent; - --rh-cta-active-text-decoration: none; -} - -[data-rh-theme^="dark"] rh-cta:not(:defined, [variant]), -[color-palette^="dark"] rh-cta:not(:defined, [variant]), -rh-cta[color-palette^="dark"]:not(:defined, [variant]) { - --rh-cta-color: var(--rh-color-interactive-blue-lighter, #92c5f9); - --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-border-color: transparent; - --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9); - --rh-cta-focus-inner-border-color: transparent; - --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; -} - -rh-cta:not(:defined):focus-within { - border-color: var(--rh-cta-focus-border-color); - background-color: - var( - --rh-cta-focus-container-background-color, - var(--rh-cta-focus-background-color) - ); - - --rh-cta-color: var(--rh-cta-focus-color); - --rh-cta-text-decoration: var(--rh-cta-focus-text-decoration); -} - -rh-cta:not(:defined):hover { - color: var(--rh-cta-hover-color); - border-color: var(--rh-cta-hover-border-color); - background-color: var(--rh-cta-hover-background-color); - - --rh-cta-text-decoration: var(--rh-cta-hover-text-decoration); -} - -rh-cta:not(:defined):active { - background-color: var(--rh-cta-active-background-color); -} - -rh-cta[variant="primary"]:not(:defined) { - 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, #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-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, #a60000); - --rh-cta-active-inner-border-color: var(--rh-color-text-primary-on-dark, #ffffff); -} - -[data-rh-theme^="dark"] rh-cta[variant="primary"]:not(:defined), -[color-palette^="dark"] rh-cta[variant="primary"]:not(:defined), -rh-cta[variant="primary"][color-palette^="dark"]:not(:defined) { - --rh-cta-hover-border-color: var(--rh-color-brand-red-dark, #a60000); -} - -rh-cta[variant="secondary"]:not(:defined) { - 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); -} - -[data-rh-them^="dark"] rh-cta[variant="secondary"]:not(:defined), -[color-palette^="dark"] rh-cta[variant="secondary"]:not(:defined), -rh-cta[variant="secondary"][color-palette^="dark"]:not(:defined) { - --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); -} - -rh-cta[variant="brick"]:not(:defined) { - border-style: solid; - font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "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-weight: var(--rh-font-weight-body-text-regular, 400); - - --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, #003366); - --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; -} - -[data-rh-theme^="dark"] rh-cta[variant="brick"]:not(:defined), -[color-palette^="dark"] rh-cta[variant="brick"]:not(:defined), -rh-cta[variant="brick"][color-palette^="dark"]:not(:defined) { - --rh-cta-border-color: var(--rh-color-border-subtle-on-dark, #707070); - --rh-cta-color: var(--rh-color-interactive-blue-lighter, #92c5f9); - --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, #b9dafc); - --rh-cta-hover-text-decoration: underline; - --rh-cta-focus-color: var(--rh-color-interactive-blue-lighter, #92c5f9); - --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; -} - -rh-cta:not(:defined) * { - display: inline !important; - border: none !important; - background-color: transparent !important; - text-decoration: var(--rh-cta-text-decoration); - color: inherit !important; - font-family: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - line-height: inherit !important; -} - -rh-cta:not(:defined) *:focus { - outline: none !important; -} - -rh-cta[variant]:not(:defined) * { - padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important; -} - -rh-cta[variant$="ary"]:not(:defined) * { - padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px) !important; -} - -rh-cta[variant="primary"]:not(:defined) *:focus { - outline: - var( - --rh-border-width-sm, - 1px - ) solid var( - --rh-color-text-primary-on-dark, - #ffffff - ) !important; - outline-offset: -2px; -}