fix(toggle): match small readonly to design spec (#20505)

Author: maradwan26

packages/react/src/components/Toggle/Toggle.tsx

@@ -203,7 +203,7 @@ export function Toggle({
         {labelText && <Text className={labelTextClasses}>{labelText}</Text>}
         <div className={appearanceClasses}>
           <div className={switchClasses}>
-            {isSm && (
+            {isSm && !readOnly && (
               <svg
                 aria-hidden="true"
                 focusable="false"

packages/styles/scss/components/toggle/_toggle.scss

@@ -176,7 +176,7 @@
     background-color: transparent;
 
     &::before {
-      background-color: $text-primary;
+      background-color: $icon-primary;
       inset-block-start: convert.to-rem(2px);
       inset-inline-start: convert.to-rem(2px);
     }

packages/web-components/src/components/toggle/toggle.ts

@@ -54,7 +54,7 @@ class CDSToggle extends HostListenerMixin(CDSCheckbox) {
   }
 
   protected _renderCheckmark() {
-    if (this.size !== TOGGLE_SIZE.SMALL) {
+    if (this.size !== TOGGLE_SIZE.SMALL || this.readOnly == true) {
       return undefined;
     }
     return html`