cosmetic(pie-monorepo): PEW-89 update component styles for dark mode (#2182)

* cosmetic(pie-monorepo): PEW-89 update component styles for dark mode

* Fix linting error

* PEW-89: Use correct colour tokens for text in tag brand variants

* PEW-89: Update icon button's icon fill colour

* Update yarn.lock

* PEW-89: Use token for switch internal label font colour

Author: xander-marjoram

.changeset/happy-chairs-watch.md

@@ -0,0 +1,10 @@
+---
+"@justeattakeaway/pie-button": minor
+"@justeattakeaway/pie-divider": minor
+"@justeattakeaway/pie-icon-button": minor
+"@justeattakeaway/pie-modal": minor
+"@justeattakeaway/pie-switch": minor
+"@justeattakeaway/pie-tag": minor
+---
+
+[Changed] - Update styling for dark mode

packages/components/pie-button/src/button.scss

@@ -24,7 +24,7 @@
     // The following values set to default background and color
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
-    --btn-text-color: var(--dt-color-content-interactive-primary);
+    --btn-text-color: var(--dt-color-content-interactive-light);
     --icon-display-override: block;
 
     // Vertical and horizontal padding values for the button
@@ -131,6 +131,7 @@
             * update the button backgrounds so that the text is accessible
             **/
             --btn-bg-color: var(--dt-color-interactive-primary);
+            --btn-text-color: var(--dt-color-content-interactive-primary);
 
             @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }

packages/components/pie-divider/src/divider.scss

@@ -28,6 +28,7 @@
         text-align: center;
         gap: var(--dt-spacing-b);
         background-color: transparent;
+        color: var(--dt-color-content-subdued);
 
         .c-divider-label {
             font-size: var(--divider-font-size);

packages/components/pie-icon-button/src/iconButton.scss

@@ -13,7 +13,7 @@
 .o-iconBtn {
     --btn-border-radius: var(--dt-radius-rounded-e);
     --btn-bg-color: var(--dt-color-interactive-brand);
-    --btn-icon-fill: var(--dt-color-content-interactive-primary);
+    --btn-icon-fill: var(--dt-color-content-interactive-light);
     --icon-display-override: block;
 
     block-size: var(--btn-dimension, var(--btn-dimension-default));
@@ -125,4 +125,3 @@
         --icon-size-override: 28px;
     }
 }
-

packages/components/pie-modal/src/modal.scss

@@ -42,6 +42,7 @@
     border: none;
     box-shadow: var(--modal-elevation);
     font-family: var(--modal-font);
+    color: var(--dt-color-content-default);
     background-color: var(--modal-bg-color);
 
     padding: 0;

packages/components/pie-switch/src/index.ts

@@ -160,7 +160,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         }
 
         return html`
-            <span data-test-id="switch-label-${labelPlacement}">
+            <span
+                data-test-id="switch-label-${labelPlacement}"
+                class="c-switch-label">
                 ${label}
             </span>`;
     }

packages/components/pie-switch/src/switch.scss

@@ -137,6 +137,10 @@
     }
 }
 
+.c-switch-label {
+    color: var(--dt-color-content-default);
+}
+
 // The description is only required for screen readers so we need to visually hide the description
 .c-switch-description {
     @include p.visually-hidden;

packages/components/pie-tag/src/tag.scss

@@ -157,13 +157,13 @@
 
     &.c-tag--brand-03 {
         --tag-bg-color: var(--dt-color-support-brand-03);
-        --tag-color: var(--dt-color-content-default);
+        --tag-color: var(--dt-color-content-dark);
         @include tag-interactive-states('--dt-color-support-brand-03');
     }
 
     &.c-tag--brand-04 {
         --tag-bg-color: var(--dt-color-support-brand-04);
-        --tag-color: var(--dt-color-content-default);
+        --tag-color: var(--dt-color-content-dark);
         @include tag-interactive-states('--dt-color-support-brand-04');
     }