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

justeattakeaway · Feb 7, 2025 · 82efcb0 · 82efcb0
1 parent 4353805
commit 82efcb0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/happy-chairs-watch.md b/.changeset/happy-chairs-watch.md
@@ -3,6 +3,7 @@
 "@justeattakeaway/pie-divider": minor
 "@justeattakeaway/pie-icon-button": minor
 "@justeattakeaway/pie-modal": minor
+"@justeattakeaway/pie-switch": minor
 "@justeattakeaway/pie-tag": minor
 ---
 

diff --git a/packages/components/pie-switch/src/index.ts b/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>`;
     }

diff --git a/packages/components/pie-switch/src/switch.scss b/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;