@skyux/theme 11.13.1 → 11.15.0

package/css/sky.css

@@ -400,30 +400,30 @@ textarea {
   --sky-switch-margin: 5px;
 }
 
+body:not(.sky-theme-modern) {
+  --sky-override-border-dark: 1px solid #cdcfd2;
+  --sky-override-border-light: 1px solid #e2e3e4;
+  --sky-override-border-row: 1px dotted #cdcfd2;
+}
+
 .sky-border-bottom-dark {
-  border-bottom: 1px solid #cdcfd2;
+  border-bottom: var(--sky-override-border-dark, var(--sky-border-style-separator-dark) var(--sky-border-width-separator-dark) var(--sky-color-border-separator-dark));
 }
 
 .sky-border-bottom-light {
-  border-bottom: 1px solid #e2e3e4;
+  border-bottom: var(--sky-override-border-light, var(--sky-border-style-separator-light) var(--sky-border-width-separator-light) var(--sky-color-border-separator-light));
 }
 
 .sky-border-bottom-row {
-  border-bottom: 1px dotted #cdcfd2;
+  border-bottom: var(--sky-override-border-row, var(--sky-border-style-separator-row) var(--sky-border-width-separator-row) var(--sky-color-border-separator-row));
 }
 
 .sky-border-dark {
-  border-top: 1px solid #cdcfd2;
-  border-bottom: 1px solid #cdcfd2;
-  border-left: 1px solid #cdcfd2;
-  border-right: 1px solid #cdcfd2;
+  border: var(--sky-override-border-dark, var(--sky-border-style-separator-dark) var(--sky-border-width-separator-dark) var(--sky-color-border-separator-dark));
 }
 
 .sky-border-light {
-  border-top: 1px solid #e2e3e4;
-  border-bottom: 1px solid #e2e3e4;
-  border-left: 1px solid #e2e3e4;
-  border-right: 1px solid #e2e3e4;
+  border: var(--sky-override-border-light, var(--sky-border-style-separator-light) var(--sky-border-width-separator-light) var(--sky-color-border-separator-light));
 }
 
 .sky-box {
@@ -580,6 +580,9 @@ a.sky-btn:hover {
   color: var(--sky-text-color-default);
   text-decoration: none;
 }
+.sky-btn-tab:hover:not(.sky-btn-tab-disabled) {
+  background-color: var(--sky-background-color-neutral-light);
+}
 .sky-btn-tab.sky-btn-tab-disabled {
   background-color: var(--sky-background-color-disabled);
   cursor: not-allowed;
@@ -634,7 +637,6 @@ a.sky-btn:hover {
   border-radius: 3px;
   font-weight: 400;
   color: var(--sky-text-color-default);
-  line-height: 1.6em;
   margin-right: 5px;
   padding-bottom: 5px;
   padding-top: 5px;
@@ -657,6 +659,10 @@ a.sky-btn:hover {
   box-shadow: none;
 }
 
+.sky-tabset-tabs .sky-btn-tab-wrapper .sky-btn-tab-wizard {
+  line-height: 1.6em;
+}
+
 .sky-btn-borderless, .sky-btn-borderless-inline {
   color: #cdcfd2;
   cursor: pointer;
@@ -1028,6 +1034,10 @@ select::-ms-expand {
   margin-left: -1px;
 }
 
+body:not(.sky-theme-modern) {
+  --sky-override-tabset-padding-xs-breakpoint: 10px;
+}
+
 .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-tabs {
   display: block;
   --sky-layout-host-links-spacing: var(--sky-margin-stacked-xl)
@@ -1078,7 +1088,10 @@ select::-ms-expand {
 }
 .sky-layout-host-tabs {
   --sky-layout-host-content-spacing: 0;
-  --sky-layout-host-tab-content-spacing: 10px;
+  --sky-layout-host-tab-content-spacing: var(
+    --sky-override-tabset-padding-xs-breakpoint,
+    var(--sky-space-inset-tabs-s)
+  );
 }
 .sky-layout-host-none {
   --sky-layout-host-links-display: none;
@@ -1307,7 +1320,7 @@ select::-ms-expand {
     --sky-layout-host-content-spacing: 0 30px;
   }
   .sky-theme-modern .sky-layout-host-tabs {
-    --sky-layout-host-tab-content-spacing: 30px;
+    --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
   }
 }
 .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-blocks,
@@ -1335,7 +1348,7 @@ select::-ms-expand {
 .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
 .sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
 .sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
-  --sky-layout-host-tab-content-spacing: 30px;
+  --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
 }
 
 .sky-modal-body-open {

package/css/themes/modern/styles.css

@@ -1,9 +1,11 @@
 .sky-theme-modern {
   --modern-border-style-dotted: dotted;
   --modern-border-style-solid: solid;
+  --modern-border-radius-round: 50%;
   --modern-border-radius-pill: 10rem;
   --modern-border-radius-md: 6px;
   --modern-border-radius-0: 0rem;
+  --modern-shadow-thumb: 0 1px 2px 0 rgba(0,0,0,0.5);
   --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
   --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
   --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
@@ -106,6 +108,7 @@
   --modern-color-gray-50: #8c929c;
   --modern-color-gray-20: #cdcfd2;
   --modern-color-gray-15: #d2d2d2;
+  --modern-color-gray-10: #e2e3e4;
 }
 
 .sky-theme-modern {
@@ -118,6 +121,7 @@
   --sky-elevation-focus: var(--modern-shadow-size-3);
   --sky-elevation-none: var(--modern-shadow-size-0);
   --sky-color-border-separator-row: var(--modern-color-gray-20);
+  --sky-color-border-separator-light: var(--modern-color-gray-10);
   --sky-color-border-separator-dark: var(--modern-color-gray-20);
   --sky-color-border-input-error: var(--modern-color-red-50);
   --sky-color-border-input-disabled: var(--modern-color-gray-50);
@@ -163,8 +167,13 @@
   --sky-color-background-nav-active: var(--modern-color-transparent);
   --sky-color-background-nav-hover: var(--modern-color-transparent);
   --sky-color-background-nav-base: var(--modern-color-transparent);
+  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
+  --sky-color-background-thumb-base: var(--modern-color-white);
   --sky-color-background-input-disabled: var(--modern-color-gray-07);
   --sky-color-background-input-base: var(--modern-color-transparent);
+  --sky-color-background-selected-success: var(--modern-color-green-30);
+  --sky-color-background-selected-warning: var(--modern-color-yellow-30);
+  --sky-color-background-selected-danger: var(--modern-color-red-30);
   --sky-color-background-selected-soft: var(--modern-color-blue-05);
   --sky-color-background-selected-heavy: var(--modern-color-blue-05);
   --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
@@ -213,16 +222,20 @@
 
 .sky-theme-modern {
   --sky-border-style-separator-row: var(--modern-border-style-dotted);
+  --sky-border-style-separator-light: var(--modern-border-style-solid);
   --sky-border-style-separator-dark: var(--modern-border-style-solid);
   --sky-border-style-elevation: var(--modern-border-style-solid);
   --sky-border-style-divider: var(--modern-border-style-solid);
   --sky-border-style-accent: var(--modern-border-style-solid);
+  --sky-border-radius-thumb: var(--modern-border-radius-round);
   --sky-border-radius-pill: var(--modern-border-radius-pill);
   --sky-border-radius-m: var(--modern-border-radius-md);
   --sky-border-radius-s: var(--modern-border-radius-md);
   --sky-border-radius-0: var(--modern-border-radius-0);
   --sky-border-width-separator-row: var(--modern-size-1);
+  --sky-border-width-separator-light: var(--modern-size-1);
   --sky-border-width-separator-dark: var(--modern-size-1);
+  --sky-border-width-input-selected: var(--modern-size-1);
   --sky-border-width-input-disabled: var(--modern-size-1);
   --sky-border-width-input-error: var(--modern-size-2);
   --sky-border-width-input-focus: var(--modern-size-2);
@@ -296,6 +309,15 @@
   --sky-space-gap-action_group-m: var(--modern-size-10);
   --sky-space-gap-action_group-s: var(--modern-size-5);
   --sky-space-gap-action_group-0: 0rem;
+  --sky-space-inset-floated-left-m: var(--modern-space-xl);
+  --sky-space-inset-floated-left-s: var(--modern-space-lg);
+  --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
+  --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
+  --sky-space-inset-floated-right-m: var(--modern-space-xl);
+  --sky-space-inset-floated-right-s: var(--modern-space-lg);
+  --sky-space-inset-floated-top-m: var(--modern-space-s);
+  --sky-space-inset-floated-top-s: var(--modern-space-xs);
+  --sky-space-inset-floated-top-0: var(--modern-space-none);
   --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
   --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
   --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -328,6 +350,7 @@
   --sky-space-inset-vertical-top-l: var(--modern-space-lg);
   --sky-space-inset-vertical-top-m: var(--modern-space-md);
   --sky-space-inset-vertical-top-s: var(--modern-space-s);
+  --sky-space-inset-thumb: var(--modern-size-1);
   --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
   --sky-space-inset-tabs-xl: var(--modern-space-xl);
   --sky-space-inset-tabs-l: var(--modern-space-lg);
@@ -584,6 +607,20 @@
   --sky-override-button-line-height: normal;
 }
 
+.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn-tab {
+  --sky-override-tab-selected-background-color: var(--modern-color-transparent);
+  --sky-override-tab-selected-border-bottom-size: var(--modern-size-3);
+  --sky-override-tab-hover-border-bottom-color: var(--modern-color-blue-50);
+  --sky-override-tab-disabled-background-color: var(--modern-color-transparent);
+  --sky-override-tab-disabled-font-size: 15px;
+  --sky-override-tab-button-radius: 0;
+  --sky-override-tab-line-height: 1.8;
+  --sky-override-selected-dropdown-item-border-width: var(--modern-size-3);
+  --sky-override-selected-dropdown-background-color: var(
+    --modern-color-transparent
+  );
+}
+
 .sky-theme-modern .sky-btn {
   border: none;
   border-radius: var(--sky-border-radius-s);
@@ -1067,140 +1104,130 @@
   line-height: 1.5;
 }
 .sky-theme-modern .sky-btn-tab {
+  background-color: var(--sky-color-background-nav-base);
   border: none;
   border-radius: 0;
-  color: var(--sky-text-color-deemphasized);
-  font-weight: 400;
-  padding: 10px 15px;
+  border-top-left-radius: var(--sky-override-tab-button-radius, var(--sky-border-radius-s));
+  border-top-right-radius: var(--sky-override-tab-button-radius, var(--sky-border-radius-s));
+  color: var(--sky-color-text-deemphasized);
+  font-size: var(--sky-font-size-body-m);
+  font-weight: var(--sky-font-weight-body-m);
+  line-height: var(--sky-override-tab-line-height, var(--sky-font-line_height-body-m));
+  padding: var(--sky-space-inset-pillarbox-2_3-top-m) var(--sky-space-inset-pillarbox-2_3-right-m) var(--sky-space-inset-pillarbox-2_3-bottom-m) var(--sky-space-inset-pillarbox-2_3-left-m);
   transition: box-shadow 150ms;
 }
 .sky-theme-modern .sky-btn-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected):not(.sky-dropdown-button-type-tab):not(:focus-visible) {
-  background-color: transparent;
-  border-bottom: solid 1px var(--sky-highlight-color-info);
-  color: var(--sky-text-color-default);
-  padding-bottom: 9px;
+  background-color: var(--sky-color-background-nav-hover);
+  border-bottom: var(--sky-border-width-action-selected-s) var(--sky-border-style-accent) var(--sky-override-tab-hover-border-bottom-color, var(--sky-color-border-selected));
+  color: var(--sky-color-text-default);
+  padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-border-width-action-selected-s));
 }
 .sky-theme-modern .sky-btn-tab:focus-visible {
-  background-color: transparent;
-  color: var(--sky-text-color-default);
+  background-color: var(--sky-color-background-nav-focus);
+  color: var(--sky-color-text-default);
   outline: none;
 }
 .sky-theme-modern .sky-btn-tab:focus-visible:not(:active) {
-  color: var(--sky-text-color-default);
-  outline: solid 2px var(--sky-background-color-primary-dark);
-  outline-offset: -2px;
-  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
+  color: var(--sky-color-text-default);
+  outline: solid var(--sky-border-width-action-selected-m) var(--sky-color-border-selected);
+  outline-offset: calc(var(--sky-border-width-action-selected-m) * -1);
+  box-shadow: var(--sky-elevation-focus);
 }
 .sky-theme-modern .sky-btn-tab:active {
-  color: var(--sky-text-color-default);
-  padding-bottom: 7px;
+  color: var(--sky-color-text-default);
+  background-color: var(--sky-color-background-nav-active);
+  border-bottom: var(--sky-border-width-action-selected-s) var(--sky-border-style-accent) var(--sky-override-tab-hover-border-bottom-color, var(--sky-color-border-selected));
+  padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-action-selected-s)));
 }
 .sky-theme-modern .sky-btn-tab.sky-btn-tab-disabled {
-  background-color: transparent;
-  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
-  color: var(--sky-text-color-deemphasized);
-  font-weight: 400;
-  font-size: 15px;
-  font-style: italic;
+  background-color: var(--sky-override-tab-disabled-background-color, var(--sky-color-background-nav-disabled));
+  color: var(--sky-color-text-deemphasized);
+  font-style: var(--sky-font-style-deemphasized-style);
+  font-weight: var(--sky-font-style-deemphasized-weight);
+  font-size: var(--sky-override-tab-disabled-font-size, var(--sky-font-size-body-m));
 }
 .sky-theme-modern .sky-btn-tab.sky-btn-tab-disabled .sky-btn-tab-close {
-  font-size: 16px;
+  font-size: var(--sky-font-size-body-m);
 }
 .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) {
-  background-color: transparent;
-  color: var(--sky-text-color-default);
+  background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
+  color: var(--sky-color-text-default);
   box-shadow: none;
 }
 .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):not(:active) {
-  border-bottom: solid 3px #1870B8;
-  padding-bottom: 7px;
+  border-bottom: var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-action-selected-l)) var(--sky-border-style-accent) var(--sky-color-border-selected);
+  padding-bottom: calc(var(--sky-space-inset-pillarbox-2_3-bottom-m) - var(--sky-override-tab-selected-border-bottom-size, var(--sky-border-width-action-selected-l)));
 }
 .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled):hover:not(.sky-btn-tab-disabled) {
-  background-color: transparent;
-  color: var(--sky-text-color-default);
+  background-color: var(--sky-override-tab-selected-background-color, var(--sky-color-background-selected-soft));
+  color: var(--sky-color-text-default);
 }
 .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close,
 .sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-tab-header-count {
-  color: var(--sky-text-color-deemphasized);
+  color: var(--sky-color-text-deemphasized);
+}
+.sky-theme-modern .sky-btn-tab-selected:not(.sky-btn-tab-disabled) .sky-btn-tab-close {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  margin-left: var(--sky-space-gap-text_action-xs);
 }
 .sky-theme-modern .sky-tab-header-count {
-  color: var(--sky-text-color-deemphasized);
-  margin-left: 10px;
+  color: var(--sky-color-text-deemphasized);
+  margin-left: var(--sky-space-gap-label-m);
 }
 .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab {
-  border-radius: 6px;
+  border-radius: var(--sky-border-radius-s);
 }
 .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:hover:not(.sky-btn-tab-disabled) {
-  background-color: transparent;
   border-bottom: none;
-  outline: solid 1px var(--sky-background-color-primary-dark);
-  outline-offset: -1px;
+  outline: solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover);
+  outline-offset: calc(var(--sky-border-width-action-hover) * -1);
+}
+.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:hover:not(.sky-btn-tab-disabled):not(.sky-btn-tab-selected) {
+  background-color: transparent;
 }
 .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab:focus-visible:not(:active) {
   background-color: transparent;
-  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
-  outline: solid 2px var(--sky-background-color-primary-dark);
-  outline-offset: -2px;
+  box-shadow: var(--sky-elevation-focus);
+  outline: solid var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-focus);
+  outline-offset: calc(var(--sky-border-width-action-active) * -1);
 }
 .sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab.sky-btn-tab-selected {
-  color: var(--sky-text-color-default);
+  background-color: var(--sky-override-selected-dropdown-background-color, var(--sky-color-background-selected-soft));
+  color: var(--sky-color-text-default);
   border-bottom: none;
-  border-radius: 0 6px 6px 0;
-  border-left: solid 3px var(--sky-background-color-primary-dark);
-  padding-bottom: 10px;
-  padding-left: 13px;
+  border-radius: 0 var(--sky-border-radius-s) var(--sky-border-radius-s) 0;
+  border-left: var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-action-selected-l)) var(--sky-border-style-accent) var(--sky-color-border-selected);
+  padding-bottom: var(--sky-space-inset-pillarbox-2_3-bottom-m);
+  padding-left: calc(var(--sky-space-inset-pillarbox-2_3-left-m) - var(--sky-override-selected-dropdown-item-border-width, var(--sky-border-width-action-selected-l)));
 }
 
 .sky-theme-modern .sky-elevation-0-bordered {
-  border: 1px solid #d2d2d2;
+  border: var(--sky-border-style-elevation) var(--sky-border-width-elevation) var(--sky-color-border-elevation);
 }
 .sky-theme-modern .sky-elevation-1,
 .sky-theme-modern .sky-elevation-1-bordered {
   box-shadow: var(--sky-elevation-raised-100);
 }
 .sky-theme-modern .sky-elevation-1-bordered {
-  border-color: var(--sky-color-border-container-base);
-  border-width: var(--sky-border-width-container-base);
-  border-style: solid;
+  border: var(--sky-border-style-elevation) var(--sky-border-width-container-base) var(--sky-color-border-container-base);
 }
 .sky-theme-modern .sky-elevation-3 {
-  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--sky-elevation-overflow);
 }
 .sky-theme-modern .sky-elevation-4 {
   box-shadow: var(--sky-elevation-overlay-100);
 }
 .sky-theme-modern .sky-elevation-8 {
-  box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--sky-elevation-overlay-200);
 }
 .sky-theme-modern .sky-elevation-16 {
-  box-shadow: 0px 3px 25px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--sky-elevation-overlay-300);
 }
 .sky-theme-modern .sky-elevation-24 {
   box-shadow: var(--sky-elevation-overlay-400);
 }
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-0-bordered,
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-1-bordered {
-  border-color: #686c73;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-1,
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-1-bordered {
-  background-color: #1c1d1f;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-3 {
-  background-color: #232427;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-4 {
-  background-color: #27292c;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-8 {
-  background-color: #232427;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-16 {
-  background-color: #232427;
-}
-.sky-theme-modern.sky-theme-mode-dark .sky-elevation-24 {
-  background-color: #27292c;
-}
 
 .sky-theme-modern.sky-theme-mode-dark .sky-error-label {
   color: #fbfcfe;
@@ -1584,73 +1611,73 @@ html:has(.sky-theme-brand-blackbaud) {
   Order is important here since rules in these files should supersede rules in previous files.
 */
 .sky-theme-modern .sky-padding-even-sm {
-  padding: 10px 10px 10px 10px;
+  padding: var(--sky-space-inset-balanced-s);
 }
 .sky-theme-modern .sky-padding-even-md {
-  padding: 15px 15px 15px 15px;
+  padding: var(--sky-space-inset-balanced-m);
 }
 .sky-theme-modern .sky-padding-even-lg {
   padding: var(--sky-space-inset-balanced-l);
 }
 .sky-theme-modern .sky-padding-even-xl {
-  padding: 30px 30px 30px 30px;
+  padding: var(--sky-space-inset-balanced-xl);
 }
 .sky-theme-modern .sky-padding-horizontal-sm {
-  padding: 0 10px 0 10px;
+  padding: var(--sky-space-inset-horizontal-top-s) var(--sky-space-inset-horizontal-right-s) var(--sky-space-inset-horizontal-bottom-s) var(--sky-space-inset-horizontal-left-s);
 }
 .sky-theme-modern .sky-padding-horizontal-md {
-  padding: 0 15px 0 15px;
+  padding: var(--sky-space-inset-horizontal-top-m) var(--sky-space-inset-horizontal-right-m) var(--sky-space-inset-horizontal-bottom-m) var(--sky-space-inset-horizontal-left-m);
 }
 .sky-theme-modern .sky-padding-horizontal-xl {
-  padding: 0 30px 0 30px;
+  padding: var(--sky-space-inset-horizontal-top-xl) var(--sky-space-inset-horizontal-right-xl) var(--sky-space-inset-horizontal-bottom-xl) var(--sky-space-inset-horizontal-left-xl);
 }
 .sky-theme-modern .sky-padding-vertical-md {
-  padding: 15px 0 15px 0;
+  padding: var(--sky-space-inset-vertical-top-m) var(--sky-space-inset-vertical-right-m) var(--sky-space-inset-vertical-bottom-m) var(--sky-space-inset-vertical-left-m);
 }
 .sky-theme-modern .sky-padding-vertical-lg {
-  padding: 20px 0 20px 0;
+  padding: var(--sky-space-inset-vertical-top-l) var(--sky-space-inset-vertical-right-l) var(--sky-space-inset-vertical-bottom-l) var(--sky-space-inset-vertical-left-l);
 }
 .sky-theme-modern .sky-margin-inline-xs {
-  margin-right: 5px;
+  margin-right: var(--sky-space-inline-xs);
 }
 .sky-theme-modern .sky-margin-inline-sm {
-  margin-right: 10px;
+  margin-right: var(--sky-space-inline-s);
 }
 .sky-theme-modern .sky-margin-inline-md {
-  margin-right: 15px;
+  margin-right: var(--sky-space-inline-m);
 }
 .sky-theme-modern .sky-margin-inline-lg {
-  margin-right: 20px;
+  margin-right: var(--sky-space-inline-l);
 }
 .sky-theme-modern .sky-margin-inline-xl {
-  margin-right: 30px;
+  margin-right: var(--sky-space-inline-xl);
 }
 .sky-theme-modern .sky-margin-inline-xxl {
-  margin-right: 60px;
+  margin-right: var(--sky-space-inline-xxl);
 }
 .sky-theme-modern .sky-margin-stacked-xs {
   margin-top: 0;
-  margin-bottom: 5px;
+  margin-bottom: var(--sky-space-stacked-xs);
 }
 .sky-theme-modern .sky-margin-stacked-sm {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: var(--sky-space-stacked-s);
 }
 .sky-theme-modern .sky-margin-stacked-md {
   margin-top: 0;
-  margin-bottom: 15px;
+  margin-bottom: var(--sky-space-stacked-m);
 }
 .sky-theme-modern .sky-margin-stacked-lg {
   margin-top: 0;
-  margin-bottom: 20px;
+  margin-bottom: var(--sky-space-stacked-l);
 }
 .sky-theme-modern .sky-margin-stacked-xl {
   margin-top: 0;
-  margin-bottom: 30px;
+  margin-bottom: var(--sky-space-stacked-xl);
 }
 .sky-theme-modern .sky-margin-stacked-xxl {
   margin-top: 0;
-  margin-bottom: 60px;
+  margin-bottom: var(--sky-space-stacked-xxl);
 }
 .sky-theme-modern .sky-form-field-stacked {
   margin-top: 0;
@@ -1659,8 +1686,4 @@ html:has(.sky-theme-brand-blackbaud) {
 .sky-theme-modern .sky-field-group-stacked {
   margin-top: 0;
   margin-bottom: var(--sky-space-gap-form-xl);
-}
-
-.sky-theme-modern.sky-theme-mode-dark .sky-border-bottom-dark {
-  border-bottom-color: #686c73;
 }