fix(cta): add lightdom css (#1495)

* docs: draft release notes * fix(tabs): improve long tab content with container queries (#1411) * fix(tabs): improve long tab content with container queries * chore(tabs): add changeset * docs(tabs): update long tab content * docs: update .changeset/silver-hornets-cry.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> * fix(cta): add lightdom css * chore(cta): add changeset * fix(cta): lint * chore: remove unexpected changeset * fix(cta): include `-shim` extension to denote optional file * chore(cta): lint * chore(call-to-action): update changeset --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
RedHat-UX · May 12, 2024 · d52aad6 · d52aad6
1 parent 8553546
commit d52aad6
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 2 deletions.
diff --git a/.changeset/rh-cta-lightdom-shim.md b/.changeset/rh-cta-lightdom-shim.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-cta>`: Added `rh-cta-lightdom-shim.css` as an optional file to help reduce layout shift before element is defined, where declarative shadow DOM is not an option.
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk
@@ -26,6 +26,7 @@
   <link rel="stylesheet" href="{{ '/assets/prism.css' | url }}" >
   <link rel="stylesheet" href="{{ '/assets/rhds.min.css' | url }}">
   <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-cta/rh-cta-lightdom-shim.css' | url }}">
   <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-subnav/rh-subnav-lightdom.css' | url }}">
 
   {% sassFile false %}

diff --git a/elements/rh-cta/demo/color-context-with-lightdom-css.html b/elements/rh-cta/demo/color-context-with-lightdom-css.html
@@ -0,0 +1,15 @@
+<rh-context-demo>
+  <rh-cta><a href="#default">Default</a></rh-cta>
+  <rh-cta icon="play-circle"><a href="#default-video">Default Video</a></rh-cta>
+  <rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
+  <rh-cta variant="primary" icon="play-circle"><a href="#primary-video">Video</a></rh-cta>
+  <rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
+  <rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
+  <rh-cta variant="brick" icon="play-circle"><a href="#brick-video">Brick Video</a></rh-cta>
+</rh-context-demo>
+
+<link rel="stylesheet" href="../rh-cta-lightdom-shim.css">
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>
diff --git a/elements/rh-cta/demo/rh-cta.html b/elements/rh-cta/demo/rh-cta.html
@@ -2,7 +2,6 @@
   <a href="#">Call to Action</a>
 </rh-cta>
 
-
 <script type="module">
   import '@rhds/elements/rh-cta/rh-cta.js';
 </script>
diff --git a/elements/rh-cta/demo/right-to-left.html b/elements/rh-cta/demo/right-to-left.html
@@ -89,7 +89,6 @@ <h2>Deep Shadow RTL</h2>
   </shadow-root>
 </section>
 
-
 <style>
 shadow-root:not(:defined) {
   display: block;

diff --git a/elements/rh-cta/rh-cta-lightdom-shim.css b/elements/rh-cta/rh-cta-lightdom-shim.css
@@ -0,0 +1,208 @@
+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;
+}