fix: resolve minor color theming issues #57

AlaskaAirlines · Sep 30, 2024 · 167aa4d · 167aa4d
1 parent 16a4b0f
commit 167aa4d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/apiExamples/iconic.html b/apiExamples/iconic.html
@@ -5,7 +5,7 @@
     <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
   </picture>
   <span slot="icon">
-    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
   </span>
   <span slot="title">
     <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>

diff --git a/demo/api.md b/demo/api.md
@@ -329,7 +329,7 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
       <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
     </picture>
     <span slot="icon">
-      <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+      <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
     </span>
     <span slot="title">
       <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
@@ -354,7 +354,7 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
     <img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
   </picture>
   <span slot="icon">
-    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--auro-color-base-white); width: 5rem"></auro-icon>
+    <auro-icon category="social" name="instagram" customSize customColor style="color: var(--ds-color-base-white); width: 5rem"></auro-icon>
   </span>
   <span slot="title">
     <auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header>
@@ -556,8 +556,8 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-banner-disclaimer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-banner-title-text-color: var(--ds-color-text-emphasis-default, #{$ds-color-text-emphasis-default});
   --ds-auro-banner-icon-container-color: var(--ds-color-utility-gray-default, #{$ds-color-utility-gray-default});
-  --ds-auro-banner-wrapper-container-color: var(--ds-color-brand-midnight-400, #{$ds-color-brand-midnight-400});
-  --ds-auro-banner-wrapper-border-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+  --ds-auro-banner-wrapper-container-color: var(--ds-color-container-secondary-inverse, #{$ds-color-container-secondary-inverse});
+  --ds-auro-banner-wrapper-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/color.scss b/src/color.scss
@@ -15,11 +15,6 @@
   color: var(--ds-auro-banner-text-color);
 }
 
-:host([onDark]) {
-  @extend %auro-banner--ondark;
-}
-
-// =-=-=-=-= common styles -=-=-=-=-=-=
 %auro-banner {
   .disclaimer {
     color: var(--ds-auro-banner-disclaimer-text-color);
@@ -30,14 +25,24 @@
   }
 }
 
-// =-=-=-=-= ondark styles -=-=-=-=-=-=
 %auro-banner--ondark {
   --ds-auro-banner-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
-  --ds-auro-banner-title-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+  .title {
+    --ds-auro-banner-title-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+
+    color: var(--ds-auro-banner-title-text-color);
+  }
 }
 
-// =-=-=-=-= billboard -=-=-=-=-=-=
-:host([billboard]) {
+:host([onDark]) {
+  @extend %auro-banner--ondark;
+}
+
+
+:host([billboard]),
+:host([hero]),
+:host([marquee]) {
   @extend %auro-banner;
 }
 
@@ -57,7 +62,6 @@
   }
 }
 
-// =-=-=-=-= roundedBorder -=-=-=-=-=-=
 :host([roundedBorder]),
 :host([roundedBorder][alignLeft]) {
   @extend %auro-banner;

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -5,6 +5,6 @@
   --ds-auro-banner-disclaimer-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-banner-title-text-color: var(--ds-color-text-emphasis-default, #{$ds-color-text-emphasis-default});
   --ds-auro-banner-icon-container-color: var(--ds-color-utility-gray-default, #{$ds-color-utility-gray-default});
-  --ds-auro-banner-wrapper-container-color: var(--ds-color-brand-midnight-400, #{$ds-color-brand-midnight-400});
-  --ds-auro-banner-wrapper-border-color: var(--ds-color-brand-lounge, #{$ds-color-brand-lounge});
+  --ds-auro-banner-wrapper-container-color: var(--ds-color-container-secondary-inverse, #{$ds-color-container-secondary-inverse});
+  --ds-auro-banner-wrapper-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
 }