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

xander-marjoram · xander-marjoram · commit 82efcb09c56f · 2025-02-07T10:17:01.000Z
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;

Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements`
`160`	`160`	`}`
`161`	`161`
`162`	`162`	return html`
`163`		`- <span data-test-id="switch-label-${labelPlacement}">`
	`163`	`+ <span`
	`164`	`+ data-test-id="switch-label-${labelPlacement}"`
	`165`	`+ class="c-switch-label">`
`164`	`166`	`${label}`
`165`	`167`	</span>`;
`166`	`168`	`}`
Original file line number	Diff line number	Diff line change
`@@ -137,6 +137,10 @@`
`137`	`137`	`}`
`138`	`138`	`}`
`139`	`139`
	`140`	`+.c-switch-label {`
	`141`	`+ color: var(--dt-color-content-default);`
	`142`	`+}`
	`143`	`+`
`140`	`144`	`// The description is only required for screen readers so we need to visually hide the description`
`141`	`145`	`.c-switch-description {`
`142`	`146`	`@include p.visually-hidden;`