feat: remove deprecated styles, forward new public API (#4329)

Author: Blackbaud-ErikaMcVey

apps/e2e/angular-tree-component-storybook/src/app/angular-tree-component/angular-tree-component.component.html

@@ -1,5 +1,8 @@
 @if (!showModes) {
-  <div class="sky-padding-even-default" id="screenshot-tree-view-basic">
+  <div
+    class="sky-theme-padding-inset-balanced-s"
+    id="screenshot-tree-view-basic"
+  >
     <sky-angular-tree-wrapper [selectSingle]="singleSelectFlag">
       <tree-root #treeBasic [nodes]="nodes" [options]="basicOptions">
         <ng-template

apps/e2e/colorpicker-storybook-e2e/src/e2e/colorpicker.component.cy.ts

@@ -65,7 +65,7 @@ describe('colorpicker-storybook', () => {
               cy.wrap($el.position().top)
                 .should('be.gte', 0)
                 .should('be.lessThan', 1000);
-              cy.wrap($el.position().left).should('be.gte', 15);
+              cy.wrap($el.position().left).should('be.gte', 12);
             });
 
           cy.window().screenshot(

apps/e2e/colorpicker-storybook/src/app/colorpicker/colorpicker.component.html

@@ -1,4 +1,4 @@
-<div class="sky-padding-even-large">
+<div class="sky-theme-padding-inset-balanced-m">
   <form novalidate [formGroup]="colorForm">
     <div class="sky-margin-stacked-xl" id="colorpicker-12-presets-fa-icon">
       <sky-colorpicker

apps/e2e/core-storybook/src/app/dock/dock-item-visual.component.html

@@ -10,15 +10,15 @@
   </div>
 
   <button
-    class="sky-btn sky-btn-primary sky-margin-inline-compact"
+    class="sky-btn sky-btn-primary sky-theme-margin-right-xs"
     type="button"
     (click)="setHeight()"
   >
     Set height
   </button>
 
   <button
-    class="sky-btn sky-btn-default sky-margin-inline-compact"
+    class="sky-btn sky-btn-default sky-theme-margin-right-xs"
     type="button"
     (click)="onCloseClick()"
   >

apps/e2e/core-storybook/src/app/dock/dock.component.html

@@ -2,7 +2,7 @@ <h3>Body Bottom</h3>
 
 <div class="dock-form-group sky-form-group">
   <input
-    class="sky-form-control sky-margin-inline-default"
+    class="sky-form-control sky-theme-margin-right-s"
     placeholder="Stack order"
     type="number"
     [(ngModel)]="stackOrder"

apps/e2e/forms-storybook/src/app/radio-button/radio-button.component.html

@@ -6,7 +6,7 @@
       headingText="Radio button options"
       stacked="true"
     >
-      <ul class="sky-list-unstyled">
+      <ul class="sky-theme-list-unstyled">
         @for (option of radioButtonOptions; track option) {
           <li>
             <sky-radio [disabled]="option.disabled" [value]="option.value">
@@ -44,7 +44,7 @@
       headingText="All disabled radio button options"
       stacked="true"
     >
-      <ul class="sky-list-unstyled">
+      <ul class="sky-theme-list-unstyled">
         @for (option of radioButtonOptions; track option) {
           <li>
             <sky-radio
@@ -81,7 +81,7 @@
       <label class="sky-control-label sky-control-label-required">
         All unselected button options
       </label>
-      <ul class="sky-list-unstyled">
+      <ul class="sky-theme-list-unstyled">
         @for (option of radioButtonOptions; track option) {
           <li>
             <sky-radio
@@ -101,7 +101,7 @@
       [required]="true"
       [stacked]="true"
     >
-      <ul class="sky-list-unstyled">
+      <ul class="sky-theme-list-unstyled">
         @for (option of radioButtonOptions; track option) {
           <li>
             <sky-radio
@@ -139,7 +139,7 @@
         formControlName="invalidRadioButtonOption"
         headingText="Radio button options with validation"
       >
-        <ul class="sky-list-unstyled">
+        <ul class="sky-theme-list-unstyled">
           @for (option of radioButtonOptions; track option) {
             <li>
               <sky-radio [disabled]="option.disabled" [value]="option.value">

apps/e2e/forms-storybook/src/app/toggle-switch/toggle-switch.component.html

@@ -1,4 +1,4 @@
-<div class="sky-padding-even-large">
+<div class="sky-theme-padding-inset-balanced-m">
   <p>
     <sky-toggle-switch [checked]="true">
       <sky-toggle-switch-label> Switch is "on" </sky-toggle-switch-label>

apps/e2e/indicators-storybook/src/app/chevron/chevron.component.html

@@ -1,4 +1,4 @@
-<div class="sky-padding-even-large">
+<div class="sky-theme-padding-inset-balanced-m">
   <sky-chevron />
   <sky-chevron direction="up" />
   <sky-chevron direction="down" />

apps/e2e/indicators-storybook/src/app/expansion-indicator/expansion-indicator.component.html

@@ -1,4 +1,4 @@
-<div class="sky-padding-even-large">
+<div class="sky-theme-padding-inset-balanced-m">
   <sky-expansion-indicator direction="up" />
   <sky-expansion-indicator direction="down" />
 </div>

apps/e2e/indicators-storybook/src/app/status-indicator/status-indicator.component.html

@@ -1,4 +1,4 @@
-<div class="sky-padding-even-large">
+<div class="sky-theme-padding-inset-balanced-m">
   <sky-status-indicator
     descriptionType="error"
     indicatorType="danger"