From cb56535cd5a01c77744c9ed785c9262c3a25e28f Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 9 May 2024 11:44:05 -0400
Subject: [PATCH] update toggle/thumb size calcs

---
 src/components/checkbox/checkbox.styles.ts | 2 +-
 src/components/radio/radio.styles.ts       | 4 ++--
 src/components/switch/switch.styles.ts     | 6 ++----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index d1a47b307..17510e735 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -13,7 +13,7 @@ export default css`
     --border-style: var(--wa-border-style);
     --border-width: var(--wa-form-controls-border-width);
     --box-shadow: none;
-    --toggle-size: calc(1em * var(--wa-font-line-height-compact));
+    --toggle-size: calc(1em * var(--wa-form-controls-value-line-height));
 
     display: inline-block;
   }
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 3d4b15aad..f424980a6 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -10,8 +10,8 @@ export default css`
     --border-width: var(--wa-form-controls-border-width);
     --box-shadow: none;
     --checked-icon-color: var(--wa-form-controls-activated-color);
-    --checked-icon-scale: 0.8;
-    --toggle-size: calc(1em * var(--wa-font-line-height-compact));
+    --checked-icon-scale: 0.75;
+    --toggle-size: calc(1em * var(--wa-form-controls-value-line-height));
 
     display: block;
   }
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 08ef017e4..8a89b7c32 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -9,11 +9,11 @@ export default css`
     --border-style: var(--wa-form-controls-border-style);
     --border-width: var(--wa-form-controls-border-width);
     --box-shadow: none;
-    --height: calc(1em * var(--wa-font-line-height-compact));
+    --height: calc(1em * var(--wa-form-controls-value-line-height));
     --thumb-color: var(--wa-form-controls-resting-color);
     --thumb-color-checked: var(--wa-form-controls-background);
     --thumb-shadow: none;
-    --thumb-size: calc(var(--height) - var(--border-width) * 4);
+    --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
     --width: calc(var(--height) * 1.75);
 
     display: inline-block;
@@ -65,7 +65,6 @@ export default css`
     height: var(--thumb-size);
     background-color: var(--thumb-color);
     border-radius: 50%;
-    border: solid var(--border-width) var(--thumb-color);
     box-shadow: var(--thumb-shadow);
     translate: calc((var(--width) - var(--height)) / -2);
     transition:
@@ -97,7 +96,6 @@ export default css`
 
   .switch--checked .switch__control .switch__thumb {
     background: var(--thumb-color-checked);
-    border-color: var(--thumb-color-checked);
     translate: calc((var(--width) - var(--height)) / 2);
   }