From f4c59bdd29951394c6e0746e4667591ace587930 Mon Sep 17 00:00:00 2001
From: Garth Braithwaite <garthdb@gmail.com>
Date: Tue, 26 Jan 2021 11:35:49 -0700
Subject: [PATCH] feat: added t-shirt sizes to checkbox

BREAKING CHANGE: a t-shirt size class is now required for checkbox.
closes #951
---
 components/actionbar/metadata/actionbar.yml   | 114 ++++----
 components/assetlist/metadata/assetlist.yml   |  18 +-
 components/card/metadata/card-asset.yml       |  10 +-
 components/card/metadata/card-gallery.yml     |  10 +-
 components/card/metadata/card.yml             |  80 +++---
 components/checkbox/index.css                 |  54 ++--
 components/checkbox/metadata/checkbox.yml     | 261 ++++++++++++------
 components/fieldgroup/metadata/fieldgroup.yml |  26 +-
 components/fieldlabel/metadata/form.yml       |  36 +--
 components/miller/metadata/miller.yml         |  54 ++--
 components/table/metadata/table.yml           |  72 ++---
 site/templates/halo-focus.pug                 |   6 +-
 site/wrapping.pug                             |  20 +-
 13 files changed, 429 insertions(+), 332 deletions(-)

diff --git a/components/actionbar/metadata/actionbar.yml b/components/actionbar/metadata/actionbar.yml
index 3f11283300..01f527ff79 100644
--- a/components/actionbar/metadata/actionbar.yml
+++ b/components/actionbar/metadata/actionbar.yml
@@ -15,14 +15,14 @@ examples:
     markup: |
       <div class="spectrum-ActionBar is-open">
         <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
-          <label class="spectrum-Checkbox is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">2 selected</span>
@@ -43,14 +43,14 @@ examples:
 
       <div class="spectrum-ActionBar is-open">
         <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
-          <label class="spectrum-Checkbox is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">4 selected</span>
@@ -80,14 +80,14 @@ examples:
 
       <div class="spectrum-ActionBar is-open">
         <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
-          <label class="spectrum-Checkbox is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">6 selected</span>
@@ -117,14 +117,14 @@ examples:
     markup: |
       <div class="spectrum-ActionBar spectrum-ActionBar--flexible is-open">
         <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
-          <label class="spectrum-Checkbox is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">228 selected</span>
@@ -150,14 +150,14 @@ examples:
       <div class="spectrum-Table spectrum-Table--quiet" role="grid">
         <div class="spectrum-Table-head" style="display: flex" role="row">
           <div class="spectrum-Table-headCell spectrum-Table-checkboxCell" role="columnheader">
-            <label class="spectrum-Checkbox is-indeterminate">
+            <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
               <input type="checkbox" class="spectrum-Checkbox-input">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </label>
@@ -179,11 +179,11 @@ examples:
         <div class="spectrum-Table-body" style="height: 240px" role="rowgroup">
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -194,11 +194,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -209,11 +209,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -224,11 +224,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -239,11 +239,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -254,11 +254,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -269,11 +269,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -284,11 +284,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -299,11 +299,11 @@ examples:
           </div>
           <div class="spectrum-Table-row" style="display: flex" role="row">
             <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -314,14 +314,14 @@ examples:
           </div>
           <div class="spectrum-ActionBar spectrum-ActionBar--sticky is-open">
             <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
-              <label class="spectrum-Checkbox is-indeterminate">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
                 <input type="checkbox" class="spectrum-Checkbox-input">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
-                  <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Dash75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Dash100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">4 selected</span>
diff --git a/components/assetlist/metadata/assetlist.yml b/components/assetlist/metadata/assetlist.yml
index 7874e0102a..c0dd9de575 100644
--- a/components/assetlist/metadata/assetlist.yml
+++ b/components/assetlist/metadata/assetlist.yml
@@ -7,11 +7,11 @@ examples:
     markup: |
       <ul class="spectrum-AssetList">
         <li class="spectrum-AssetList-item is-selectable" tabindex="0">
-          <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
             </span>
           </label>
@@ -22,11 +22,11 @@ examples:
           </svg>
         </li>
         <li class="spectrum-AssetList-item is-selectable" tabindex="0">
-          <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
             </span>
           </label>
@@ -39,11 +39,11 @@ examples:
           </svg>
         </li>
         <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
-          <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
             </span>
           </label>
diff --git a/components/card/metadata/card-asset.yml b/components/card/metadata/card-asset.yml
index 9b261c7bfa..ebbfe3cb63 100644
--- a/components/card/metadata/card-asset.yml
+++ b/components/card/metadata/card-asset.yml
@@ -27,14 +27,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
diff --git a/components/card/metadata/card-gallery.yml b/components/card/metadata/card-gallery.yml
index 2045b1fd55..f2bd64d437 100644
--- a/components/card/metadata/card-gallery.yml
+++ b/components/card/metadata/card-gallery.yml
@@ -38,14 +38,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
diff --git a/components/card/metadata/card.yml b/components/card/metadata/card.yml
index 962ed9ca85..184aa2a42c 100644
--- a/components/card/metadata/card.yml
+++ b/components/card/metadata/card.yml
@@ -35,14 +35,14 @@ examples:
             Footer
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -76,14 +76,14 @@ examples:
               Footer
             </div>
             <div class="spectrum-QuickActions spectrum-Card-quickActions">
-              <div class="spectrum-Checkbox">
+              <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
-                  <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Dash75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Dash100" />
                   </svg>
                 </span>
               </div>
@@ -121,14 +121,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -158,14 +158,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
                 <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -195,14 +195,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -228,14 +228,14 @@ examples:
             Footer
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -292,14 +292,14 @@ examples:
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
-            <div class="spectrum-Checkbox">
+            <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
               <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="" tabindex="-1">
               <span class="spectrum-Checkbox-box">
-                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Dash75" />
+                <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                  <use xlink:href="#spectrum-css-icon-Dash100" />
                 </svg>
               </span>
             </div>
@@ -335,14 +335,14 @@ examples:
               </div>
             </div>
             <div class="spectrum-QuickActions spectrum-Card-quickActions">
-              <div class="spectrum-Checkbox">
+              <div class="spectrum-Checkbox spectrum-Checkbox--sizeM">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
-                  <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Dash75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Dash100" />
                   </svg>
                 </span>
               </div>
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index e4a61a675f..46201be650 100644
--- a/components/checkbox/index.css
+++ b/components/checkbox/index.css
@@ -14,18 +14,6 @@ governing permissions and limitations under the License.
 @import "../vars/css/scales/spectrum-medium.css";
 @import "../vars/css/components/spectrum-checkbox.css";
 
-.spectrum-Checkbox {
-  @remapvars {
-    find: /--spectrum-checkbox-m(.*)/;
-    filter: color;
-    replace: --spectrum-checkbox$1;
-  }
-
-  /* Hardcoded for wrapping study.
-  Will be a DNA token in https://jira.corp.adobe.com/browse/SDS-2984 */
-  --spectrum-checkbox-label-margin-top: var(--spectrum-global-dimension-size-75);
-}
-
 .spectrum-Checkbox {
   display: inline-flex;
   align-items: flex-start;
@@ -89,6 +77,38 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Checkbox--sizeS {
+  @remapvars {
+    find: /--spectrum-checkbox-s(.*)/;
+    filter: color;
+    replace: --spectrum-checkbox$1;
+  }
+}
+
+.spectrum-Checkbox--sizeM {
+  @remapvars {
+    find: /--spectrum-checkbox-m(.*)/;
+    filter: color;
+    replace: --spectrum-checkbox$1;
+  }
+}
+
+.spectrum-Checkbox--sizeL {
+  @remapvars {
+    find: /--spectrum-checkbox-l(.*)/;
+    filter: color;
+    replace: --spectrum-checkbox$1;
+  }
+}
+
+.spectrum-Checkbox--sizeXL {
+  @remapvars {
+    find: /--spectrum-checkbox-xl(.*)/;
+    filter: color;
+    replace: --spectrum-checkbox$1;
+  }
+}
+
 .spectrum-Checkbox.is-indeterminate {
   .spectrum-Checkbox-box,
   .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box {
@@ -112,7 +132,7 @@ governing permissions and limitations under the License.
 .spectrum-Checkbox-label {
   text-align: start;
   margin-inline-start: var(--spectrum-checkbox-text-gap);
-  margin-block-start: var(--spectrum-checkbox-label-margin-top);
+  margin-block-start: var(--spectrum-checkbox-text-padding-top);
 
   font-size: var(--spectrum-checkbox-text-size);
   font-weight: var(--spectrum-checkbox-text-font-weight);
@@ -184,13 +204,13 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Checkbox-checkmark {
-  margin-block-start: calc(var(--spectrum-alias-ui-icon-checkmark-size-75) / -2);
-  margin-inline-start: calc(var(--spectrum-alias-ui-icon-checkmark-size-75) / -2);
+  margin-block-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
+  margin-inline-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
 }
 
 .spectrum-Checkbox-partialCheckmark {
-  margin-block-start: calc(var(--spectrum-alias-ui-icon-dash-size-75) / -2);
-  margin-inline-start: calc(var(--spectrum-alias-ui-icon-dash-size-75) / -2);
+  margin-block-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
+  margin-inline-start: calc(var(--spectrum-checkbox-checkmark-size) / -2);
 }
 
 .spectrum-Checkbox-partialCheckmark {
diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml
index c74e1c6f91..e67ad5e4c2 100644
--- a/components/checkbox/metadata/checkbox.yml
+++ b/components/checkbox/metadata/checkbox.yml
@@ -12,6 +12,9 @@ sections:
         Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
         If you were using the `quiet` variant, the `.spectrum-Checkbox--quiet` class is no longer required and can be removed.
         If you need a switch to look like it did before this change, add `.spectrum-Checkbox--emphasized`.
+        ### T-shirt sizing
+        Checkbox now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Checkbox--size*` class.
+        Using the classes `.spectrum-Checkbox .spectrum-Checkbox--sizeM` will get result in the previous default checkbox size.
 examples:
   - id: checkbox-default
     name: Standard
@@ -20,14 +23,14 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
-          <label class="spectrum-Checkbox">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -35,14 +38,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -50,14 +53,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -66,14 +69,14 @@ examples:
 
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
-          <label class="spectrum-Checkbox is-invalid">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -81,14 +84,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox is-invalid">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -96,14 +99,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox is-invalid is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-invalid is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -113,14 +116,14 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
-          <label class="spectrum-Checkbox is-disabled">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -128,14 +131,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox is-disabled">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -143,14 +146,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox is-disabled is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-disabled is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -165,14 +168,14 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -180,14 +183,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -195,14 +198,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -211,14 +214,14 @@ examples:
 
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
-          <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--quiet is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -226,14 +229,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-invalid">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -241,14 +244,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-invalid is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-invalid is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -258,14 +261,14 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-disabled">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -273,14 +276,14 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-disabled">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
             <span class="spectrum-Checkbox-box">
-              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Checkmark75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Dash75" />
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
               </svg>
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -288,8 +291,29 @@ examples:
 
           <br>
 
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-disabled is-indeterminate">
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized is-disabled is-indeterminate">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
+            <span class="spectrum-Checkbox-box">
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
+              </svg>
+            </span>
+            <span class="spectrum-Checkbox-label">Checkbox</span>
+          </label>
+        </div>
+      </div>
+  - id: t-shirt-sizes
+    name: T-Shirt Sizes
+    markup: |
+      <div class="spectrum-Examples">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
+
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeS">
+            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
               <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Checkmark75" />
@@ -300,20 +324,73 @@ examples:
             </span>
             <span class="spectrum-Checkbox-label">Checkbox</span>
           </label>
+
         </div>
-      </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
+            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
+            <span class="spectrum-Checkbox-box">
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash100" />
+              </svg>
+            </span>
+            <span class="spectrum-Checkbox-label">Checkbox</span>
+          </label>
+
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
+
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeL">
+            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
+            <span class="spectrum-Checkbox-box">
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark200 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark200" />
+              </svg>
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash200 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash200" />
+              </svg>
+            </span>
+            <span class="spectrum-Checkbox-label">Checkbox</span>
+          </label>
+
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
+
+          <label class="spectrum-Checkbox spectrum-Checkbox--sizeXL">
+            <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
+            <span class="spectrum-Checkbox-box">
+              <svg class="spectrum-Icon spectrum-UIIcon-Checkmark300 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Checkmark300" />
+              </svg>
+              <svg class="spectrum-Icon spectrum-UIIcon-Dash300 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Dash300" />
+              </svg>
+            </span>
+            <span class="spectrum-Checkbox-label">Checkbox</span>
+          </label>
+
+        </div>
+      </div>
   - id: checkbox-wrapping
     name: Wrapping behavior
     markup: |
-      <label class="spectrum-Checkbox">
+      <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
         <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
         <span class="spectrum-Checkbox-box">
-          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Checkmark75" />
+          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
           </svg>
-          <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-            <use xlink:href="#spectrum-css-icon-Dash75" />
+          <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+            <use xlink:href="#spectrum-css-icon-Dash100" />
           </svg>
         </span>
         <span class="spectrum-Checkbox-label">Checkbox with an extraordinarily long label please don't do this but if you did it should wrap text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
diff --git a/components/fieldgroup/metadata/fieldgroup.yml b/components/fieldgroup/metadata/fieldgroup.yml
index 49541027bd..c95e3de565 100644
--- a/components/fieldgroup/metadata/fieldgroup.yml
+++ b/components/fieldgroup/metadata/fieldgroup.yml
@@ -17,20 +17,20 @@ examples:
         </div>
       </div>
       <div class="spectrum-FieldGroup spectrum-FieldGroup--horizontal">
-        <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
           <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
           <span class="spectrum-Checkbox-box">
-            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark75" />
+            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </span>
           <span class="spectrum-Checkbox-label">Checkbox</span>
         </label>
-        <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
           <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
           <span class="spectrum-Checkbox-box">
-            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark75" />
+            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </span>
           <span class="spectrum-Checkbox-label">Checkbox</span>
@@ -54,20 +54,20 @@ examples:
       </div>
 
       <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
-        <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
           <input type="checkbox" class="spectrum-Checkbox-input">
           <span class="spectrum-Checkbox-box">
-            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark75" />
+            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </span>
           <span class="spectrum-Checkbox-label">Kibble</span>
         </label>
-        <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
           <input type="checkbox" class="spectrum-Checkbox-input" checked>
           <span class="spectrum-Checkbox-box">
-            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-              <use xlink:href="#spectrum-css-icon-Checkmark75" />
+            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </span>
           <span class="spectrum-Checkbox-label">Bits</span>
@@ -94,4 +94,4 @@ examples:
           <span class="spectrum-Radio-button"></span>
           <label class="spectrum-Radio-label" for="radio-4">3</label>
         </div>
-      </div>
\ No newline at end of file
+      </div>
diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml
index 46cc0dfca2..43c8ec4a4d 100644
--- a/components/fieldlabel/metadata/form.yml
+++ b/components/fieldlabel/metadata/form.yml
@@ -38,20 +38,20 @@ examples:
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Kittens</span>
               </label>
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Dogs</span>
@@ -120,20 +120,20 @@ examples:
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Interests</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Kittens</span>
               </label>
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Dogs</span>
@@ -202,20 +202,20 @@ examples:
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Interests</label>
           <div class="spectrum-Form-itemField">
             <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Kittens</span>
               </label>
-              <label class="spectrum-Checkbox spectrum-FieldGroup-item">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
                 <span class="spectrum-Checkbox-label">Dogs</span>
diff --git a/components/miller/metadata/miller.yml b/components/miller/metadata/miller.yml
index 7b31960140..210b6f5e74 100644
--- a/components/miller/metadata/miller.yml
+++ b/components/miller/metadata/miller.yml
@@ -8,11 +8,11 @@ examples:
         <div class="spectrum-MillerColumns-item">
           <ul class="spectrum-AssetList">
             <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -22,11 +22,11 @@ examples:
               </svg>
             </li>
             <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -36,11 +36,11 @@ examples:
               </svg>
             </li>
             <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -55,11 +55,11 @@ examples:
         <div class="spectrum-MillerColumns-item">
           <ul class="spectrum-AssetList">
             <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -69,11 +69,11 @@ examples:
               </svg>
             </li>
             <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -83,11 +83,11 @@ examples:
               </svg>
             </li>
             <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -115,11 +115,11 @@ examples:
             </li>
             <li class="spectrum-AssetList-item" tabindex="0">
               <span class="spectrum-AssetList-itemLabel">File 2</span>
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -148,11 +148,11 @@ examples:
             </li>
             <li class="spectrum-AssetList-item" tabindex="0">
               <span class="spectrum-AssetList-itemLabel">File 2</span>
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -163,11 +163,11 @@ examples:
             <li class="spectrum-AssetList-item is-selected" tabindex="0">
               <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
               <span class="spectrum-AssetList-itemLabel">File 3</span>
-              <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
                 <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
diff --git a/components/table/metadata/table.yml b/components/table/metadata/table.yml
index 8592dadc4f..d6fb2d5c6d 100644
--- a/components/table/metadata/table.yml
+++ b/components/table/metadata/table.yml
@@ -58,11 +58,11 @@ examples:
         <thead class="spectrum-Table-head">
           <tr>
             <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -85,11 +85,11 @@ examples:
         <tbody class="spectrum-Table-body">
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -102,11 +102,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row is-selected" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -119,11 +119,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row is-selected" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -136,11 +136,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -153,11 +153,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -228,11 +228,11 @@ examples:
         <thead class="spectrum-Table-head">
           <tr>
             <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -255,11 +255,11 @@ examples:
         <tbody class="spectrum-Table-body">
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -272,11 +272,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row is-selected" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -289,11 +289,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row is-selected" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -306,11 +306,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
@@ -323,11 +323,11 @@ examples:
           </tr>
           <tr class="spectrum-Table-row" tabindex="0">
             <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
-              <label class="spectrum-Checkbox spectrum-Table-checkbox">
+              <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
                 <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
                 <span class="spectrum-Checkbox-box">
-                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                    <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                  <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                    <use xlink:href="#spectrum-css-icon-Checkmark100" />
                   </svg>
                 </span>
               </label>
diff --git a/site/templates/halo-focus.pug b/site/templates/halo-focus.pug
index bf4c481e43..d3afbc31e7 100644
--- a/site/templates/halo-focus.pug
+++ b/site/templates/halo-focus.pug
@@ -20,13 +20,13 @@ div(class="spectrum-Slider")
       input(type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20")
     div(class="spectrum-Slider-track")
 
-label(class="spectrum-Checkbox")
+label(class="spectrum-Checkbox spectrum-Checkbox--sizeM")
   input(type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0")
   span(class="spectrum-Checkbox-box")
     svg(class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true")
       use(xlink:href="#spectrum-css-icon-Checkmark100")
-    svg(class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true")
-      use(xlink:href="#spectrum-css-icon-Dash75")
+    svg(class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true")
+      use(xlink:href="#spectrum-css-icon-Dash100")
   span(class="spectrum-Checkbox-label") Checkbox
 
 div(class="spectrum-Radio")
diff --git a/site/wrapping.pug b/site/wrapping.pug
index 905db0d605..5fc2980288 100644
--- a/site/wrapping.pug
+++ b/site/wrapping.pug
@@ -252,27 +252,27 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                 h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Checkbox (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
-                    <label class="spectrum-Checkbox">
+                    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
                       <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
                       <span class="spectrum-Checkbox-box">
-                        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                          <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                          <use xlink:href="#spectrum-css-icon-Checkmark100" />
                         </svg>
-                        <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                          <use xlink:href="#spectrum-css-icon-Dash75" />
+                        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                          <use xlink:href="#spectrum-css-icon-Dash100" />
                         </svg>
                       </span>
                       <span class="spectrum-Checkbox-label">Add Adobe Stock. Get one month free.*</span>
                     </label>
                     <br>
-                    <label class="spectrum-Checkbox" style="width: 149px">
+                    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM" style="width: 149px">
                       <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" checked>
                       <span class="spectrum-Checkbox-box">
-                        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
-                          <use xlink:href="#spectrum-css-icon-Checkmark75" />
+                        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                          <use xlink:href="#spectrum-css-icon-Checkmark100" />
                         </svg>
-                        <svg class="spectrum-Icon spectrum-UIIcon-Dash75 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
-                          <use xlink:href="#spectrum-css-icon-Dash75" />
+                        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
+                          <use xlink:href="#spectrum-css-icon-Dash100" />
                         </svg>
                       </span>
                       <span class="spectrum-Checkbox-label">Add Adobe Stock. Get one month free.*</span>