fix(sidenav): remove temporary custom tokens (#2256)

Author: jenndiaz

components/sidenav/index.css

@@ -36,6 +36,9 @@ governing permissions and limitations under the License.
   --spectrum-sidenav-start-to-content-with-icon-second-level: var(--spectrum-side-navigation-with-icon-second-level-edge-to-text);
   --spectrum-sidenav-start-to-content-with-icon-third-level: var(--spectrum-side-navigation-with-icon-third-level-edge-to-text);
 
+  --spectrum-sidenav-heading-top-margin: var(--spectrum-side-navigation-item-to-header);
+  --spectrum-sidenav-heading-bottom-margin: var(--spectrum-side-navigation-header-to-item);
+
   /* color - background */
   --spectrum-sidenav-background-disabled: transparent;
   --spectrum-sidenav-background-default: transparent;
@@ -182,10 +185,10 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Icon {
-    inline-size: var(--spectrum-sidenav-icon-size);
-    block-size: var(--spectrum-sidenav-icon-size);
-    margin-inline-end: var(--spectrum-sidenav-icon-spacing);
-    margin-block-start: var(--spectrum-sidenav-top-to-icon);
+    inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size));
+    block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size));
+    margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing));
+    margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon));
     flex-shrink: 0;
   }
 
@@ -212,8 +215,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-SideNav-heading {
-  margin-block-start: calc(var(--spectrum-sidenav-heading-top-margin) - var(--spectrum-sidenav-gap));
-  margin-block-end: var(--spectrum-sidenav-heading-bottom-margin);
+  margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)));
+  margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin));
   padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding));
   color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color));
   font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size));

components/sidenav/metadata/mods.md

@@ -26,6 +26,10 @@
 | `--mod-sidenav-header-font-style`                       |
 | `--mod-sidenav-header-font-weight`                      |
 | `--mod-sidenav-header-line-height`                      |
+| `--mod-sidenav-heading-bottom-margin`                   |
+| `--mod-sidenav-heading-top-margin`                      |
+| `--mod-sidenav-icon-size`                               |
+| `--mod-sidenav-icon-spacing`                            |
 | `--mod-sidenav-inline-padding`                          |
 | `--mod-sidenav-item-background-default-selected`        |
 | `--mod-sidenav-item-background-down`                    |
@@ -47,5 +51,6 @@
 | `--mod-sidenav-top-level-font-style`                    |
 | `--mod-sidenav-top-level-font-weight`                   |
 | `--mod-sidenav-top-level-line-height`                   |
+| `--mod-sidenav-top-to-icon`                             |
 | `--mod-sidenav-top-to-label`                            |
 | `--mod-sidenav-width`                                   |

components/tokens/custom-spectrum/custom-large-vars.css

@@ -59,10 +59,6 @@ governing permissions and limitations under the License.
   --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
   --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
 
-  --spectrum-sidenav-heading-top-margin: 30px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
-  --spectrum-sidenav-heading-bottom-margin: 10px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
-  --spectrum-sidenav-bottom-to-label: 10px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
-
   --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
   --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
 

components/tokens/custom-spectrum/custom-medium-vars.css

@@ -59,10 +59,6 @@ governing permissions and limitations under the License.
   --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
   --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
 
-  --spectrum-sidenav-heading-top-margin: 24px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is updated */
-  --spectrum-sidenav-heading-bottom-margin: 8px; /* TODO replace with var(--spectrum-side-navigation-item-to-header); once token is added */
-  --spectrum-sidenav-bottom-to-label: 8px; /* TODO replace with updated var(--spectrum-component-bottom-to-text-100); */
-
   --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
   --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);