From 5e08fd085475100b9425e5bf96000ef6b5848d55 Mon Sep 17 00:00:00 2001
From: "Nichols, Kieran" <kieran.nichols@tylertech.com>
Date: Wed, 4 Dec 2024 10:33:44 -0500
Subject: [PATCH] fix: update checkbox, radio, switch label typography to use
 `label2` (13px) typography by default

---
 src/dev/pages/checkbox/checkbox.ejs                 | 2 +-
 src/dev/pages/radio/radio.ejs                       | 6 +++---
 src/dev/pages/switch/switch.ejs                     | 2 +-
 src/lib/checkbox/_core.scss                         | 2 +-
 src/lib/radio/radio/_core.scss                      | 2 +-
 src/lib/switch/_core.scss                           | 2 +-
 src/stories/components/checkbox/Checkbox.stories.ts | 2 +-
 src/stories/components/radio/Radio.stories.ts       | 6 +++---
 src/stories/components/switch/Switch.stories.ts     | 2 +-
 9 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/dev/pages/checkbox/checkbox.ejs b/src/dev/pages/checkbox/checkbox.ejs
index ca27c4511..027227d22 100644
--- a/src/dev/pages/checkbox/checkbox.ejs
+++ b/src/dev/pages/checkbox/checkbox.ejs
@@ -6,7 +6,7 @@
 
   <div>
     <h3 class="forge-typography--heading2">CSS-based Checkbox</h3>
-    <label class="forge-typography--label1" style="display: flex; align-items: center;">
+    <label class="forge-typography--label2" style="display: flex; align-items: center;">
       <div class="forge-checkbox">
         <input type="checkbox" id="css-checkbox" />
         <div class="forge-checkbox__icon"></div>
diff --git a/src/dev/pages/radio/radio.ejs b/src/dev/pages/radio/radio.ejs
index cac313a23..aef8dbf09 100644
--- a/src/dev/pages/radio/radio.ejs
+++ b/src/dev/pages/radio/radio.ejs
@@ -14,15 +14,15 @@
       <div class="forge-radio">
         <input type="radio" name="css" id="css-radio-1" />
       </div>
-      <label class="forge-typography--label1" for="css-radio-1">Option 1</label>
+      <label class="forge-typography--label2" for="css-radio-1">Option 1</label>
       <div class="forge-radio">
         <input type="radio" name="css" id="css-radio-2" />
       </div>
-      <label class="forge-typography--label1" for="css-radio-2">Option 2</label>
+      <label class="forge-typography--label2" for="css-radio-2">Option 2</label>
       <div class="forge-radio">
         <input type="radio" name="css" id="css-radio-3" />
       </div>
-      <label class="forge-typography--label1" for="css-radio-3">Option 3</label>
+      <label class="forge-typography--label2" for="css-radio-3">Option 3</label>
     </div>
   </form>
 
diff --git a/src/dev/pages/switch/switch.ejs b/src/dev/pages/switch/switch.ejs
index 22091b006..9852d5d45 100644
--- a/src/dev/pages/switch/switch.ejs
+++ b/src/dev/pages/switch/switch.ejs
@@ -8,7 +8,7 @@
 
   <div>
     <h3 class="forge-typography--heading2">CSS-based Switch</h3>
-    <label class="forge-typography--label1" style="display: flex; align-items: center;">
+    <label class="forge-typography--label2" style="display: flex; align-items: center;">
       <div class="forge-switch">
         <input type="checkbox" switch />
         <div class="forge-switch__thumb">
diff --git a/src/lib/checkbox/_core.scss b/src/lib/checkbox/_core.scss
index cba82ff44..425cef34e 100644
--- a/src/lib/checkbox/_core.scss
+++ b/src/lib/checkbox/_core.scss
@@ -138,7 +138,7 @@
 }
 
 @mixin label {
-  @include typography.style(label1);
+  @include typography.style(label2);
 
   cursor: default;
 }
diff --git a/src/lib/radio/radio/_core.scss b/src/lib/radio/radio/_core.scss
index 4444f51d9..f82a855a6 100644
--- a/src/lib/radio/radio/_core.scss
+++ b/src/lib/radio/radio/_core.scss
@@ -111,7 +111,7 @@
 }
 
 @mixin label {
-  @include typography.style(label1);
+  @include typography.style(label2);
 
   cursor: default;
 
diff --git a/src/lib/switch/_core.scss b/src/lib/switch/_core.scss
index d3ddaf566..898dffe2c 100644
--- a/src/lib/switch/_core.scss
+++ b/src/lib/switch/_core.scss
@@ -243,7 +243,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
 }
 
 @mixin label {
-  @include typography.style(label1);
+  @include typography.style(label2);
 
   &:empty {
     display: none;
diff --git a/src/stories/components/checkbox/Checkbox.stories.ts b/src/stories/components/checkbox/Checkbox.stories.ts
index 2cfa4296f..2208c211c 100644
--- a/src/stories/components/checkbox/Checkbox.stories.ts
+++ b/src/stories/components/checkbox/Checkbox.stories.ts
@@ -77,7 +77,7 @@ export const CSSOnly: Story = {
       'forge-checkbox--dense': dense
     });
     return html`
-      <label class="forge-typography--label1" style="display: flex; align-items: center;">
+      <label class="forge-typography--label2" style="display: flex; align-items: center;">
         <div class=${classes}>
           <input type="checkbox" .checked=${checked} .indeterminate=${indeterminate} ?disabled=${disabled} />
           <div class="forge-checkbox__icon"></div>
diff --git a/src/stories/components/radio/Radio.stories.ts b/src/stories/components/radio/Radio.stories.ts
index 7d63670e0..27e191161 100644
--- a/src/stories/components/radio/Radio.stories.ts
+++ b/src/stories/components/radio/Radio.stories.ts
@@ -101,15 +101,15 @@ export const CSSOnly: Story = {
         <div class=${classMap(classes)}>
           <input type="radio" name="css-radio" ?disabled=${disabled} id="css-radio-1" />
         </div>
-        <label class="forge-typography--label1" for="css-radio-1">Option 1</label>
+        <label class="forge-typography--label2" for="css-radio-1">Option 1</label>
         <div class=${classMap(classes)}>
           <input type="radio" name="css-radio" ?disabled=${disabled} id="css-radio-2" />
         </div>
-        <label class="forge-typography--label1" for="css-radio-2">Option 2</label>
+        <label class="forge-typography--label2" for="css-radio-2">Option 2</label>
         <div class=${classMap(classes)}>
           <input type="radio" name="css-radio" ?disabled=${disabled} id="css-radio-3" />
         </div>
-        <label class="forge-typography--label1" for="css-radio-3">Option 3</label>
+        <label class="forge-typography--label2" for="css-radio-3">Option 3</label>
       </div>
     `;
   }
diff --git a/src/stories/components/switch/Switch.stories.ts b/src/stories/components/switch/Switch.stories.ts
index 1bd2ec9fb..7c8d4773b 100644
--- a/src/stories/components/switch/Switch.stories.ts
+++ b/src/stories/components/switch/Switch.stories.ts
@@ -58,7 +58,7 @@ export const CSSOnly: Story = {
       'forge-switch--dense': dense
     };
     return html`
-      <label class="forge-typography--label1" style="display: flex; align-items: center;">
+      <label class="forge-typography--label2" style="display: flex; align-items: center;">
         <div class=${classMap(classes)}>
           <input type="checkbox" switch .checked=${on} ?disabled=${disabled} />
           <div class="forge-switch__thumb">