@skyux/theme 11.39.0 → 12.0.0-alpha.1

package/css/sky.css

@@ -368,7 +368,7 @@ textarea {
   --sky-text-color-deemphasized: #686c73;
   --sky-text-color-on-dark: #ffffff;
   --sky-text-color-action-primary: #0974a1;
-  --sky-text-color-action-primary-hover: #065171;
+  --sky-text-color-action-primary-hover: rgb(6.3, 81.2, 112.7);
   /* margin */
   --sky-margin-inline-xs: 5px;
   --sky-margin-inline-sm: 10px;
@@ -480,7 +480,7 @@ a.sky-btn:hover {
 .sky-btn-default:hover, .sky-btn-default:active, .sky-btn-default.sky-btn-active {
   color: #212327;
   background-color: #eeeeef;
-  border-color: #b2b5ba;
+  border-color: rgb(178.1578947368, 181.2315789474, 185.8421052632);
 }
 .sky-btn-default:active, .sky-btn-default.sky-btn-active {
   background-image: none;
@@ -497,8 +497,8 @@ a.sky-btn:hover {
 }
 .sky-btn-primary:hover, .sky-btn-primary:active, .sky-btn-primary.sky-btn-active {
   color: #ffffff;
-  background-color: #065171;
-  border-color: #065171;
+  background-color: rgb(6.3, 81.2, 112.7);
+  border-color: rgb(6.3, 81.2, 112.7);
 }
 .sky-btn-primary:active, .sky-btn-primary.sky-btn-active {
   background-image: none;
@@ -515,8 +515,8 @@ a.sky-btn:hover {
 }
 .sky-btn-danger:hover, .sky-btn-danger:active, .sky-btn-danger.sky-btn-active {
   color: #ffffff;
-  background-color: #bc2427;
-  border-color: #bc2427;
+  background-color: rgb(187.7787234043, 36.2212765957, 39.0808510638);
+  border-color: rgb(187.7787234043, 36.2212765957, 39.0808510638);
 }
 .sky-btn-danger:active, .sky-btn-danger.sky-btn-active {
   background-image: none;
@@ -669,7 +669,7 @@ a.sky-btn:hover {
   border: none;
 }
 .sky-btn-borderless:hover, .sky-btn-borderless-inline:hover {
-  color: #979ba2;
+  color: rgb(151.3157894737, 155.4631578947, 161.6842105263);
   transition: color 150ms;
 }
 
@@ -698,7 +698,7 @@ a.sky-btn:hover {
   padding: 0;
 }
 .sky-btn-icon-borderless:hover {
-  color: #979ba2;
+  color: rgb(151.3157894737, 155.4631578947, 161.6842105263);
   transition: color 150ms;
 }
 
@@ -1039,13 +1039,36 @@ select::-ms-expand {
 }
 
 body:not(.sky-theme-modern) {
+  --sky-override-page-content-blocks-spacing-xs: 10px;
+  --sky-override-page-header-blocks-spacing-sm: 20px 20px 0 20px;
+  --sky-override-page-content-blocks-spacing-sm: 20px;
+  --sky-override-page-content-fit-list-spacing-xs: 0 10px;
+  --sky-override-page-header-fit-list-spacing-sm: 20px;
+  --sky-override-page-content-fit-list-spacing-sm: 0 20px;
   --sky-override-tabset-padding-xs-breakpoint: 10px;
+  --sky-override-page-header-tabs-spacing-sm: 20px;
+  --sky-override-page-content-tabs-spacing-sm: 20px;
+  --sky-override-page-content-with-links-spacing-sm: var(
+    --sky-margin-inline-xl
+  );
+  --sky-override-page-content-with-links-spacing-xs: var(
+      --sky-margin-stacked-xl
+    )
+    var(--sky-margin-inline-sm);
+  --sky-override-page-header-avatar-size-space: var(--sky-margin-inline-xl);
+  --sky-override-page-header-link-rows-space: var(--sky-margin-stacked-xl);
+  --sky-override-page-header-spacing-xs: 20px 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)
-    var(--sky-margin-inline-sm);
+  --sky-layout-host-links-spacing: var(
+    --sky-override-page-content-with-links-spacing-xs,
+    var(--sky-space-inset-letterbox-1_3-top-m)
+      var(--sky-space-inset-letterbox-1_3-right-m)
+      var(--sky-space-inset-letterbox-1_3-bottom-m)
+      var(--sky-space-inset-letterbox-1_3-left-m)
+  );
 }
 .sky-layout-host-blocks .sky-margin-stacked-xl:empty, .sky-layout-host-list .sky-margin-stacked-xl:empty, .sky-layout-host-tabs .sky-margin-stacked-xl:empty {
   margin-bottom: 0;
@@ -1065,7 +1088,7 @@ body:not(.sky-theme-modern) {
   grid-area: links;
 }
 .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links) > sky-page-content, .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) > sky-page-content {
-  margin-right: var(--sky-margin-inline-xl);
+  margin-right: var(--sky-override-page-content-with-links-spacing-sm, var(--sky-space-inline-xl));
 }
 .sky-layout-host-fit, .sky-layout-host-for-child-fit {
   position: absolute;
@@ -1082,19 +1105,34 @@ body:not(.sky-theme-modern) {
   --sky-layout-host-links-display: none;
 }
 .sky-layout-host-blocks, .sky-layout-host-list, .sky-layout-host-fit, .sky-layout-host-tabs {
-  --sky-layout-host-header-spacing: 20px 10px;
+  --sky-layout-host-header-spacing: var(
+    --sky-override-page-header-spacing-xs,
+    var(--sky-space-inset-letterbox-1_2-top-m)
+      var(--sky-space-inset-letterbox-1_2-right-m)
+      var(--sky-space-inset-letterbox-1_2-bottom-m)
+      var(--sky-space-inset-letterbox-1_2-left-m)
+  );
 }
 .sky-layout-host-blocks {
-  --sky-layout-host-content-spacing: 10px;
+  --sky-layout-host-content-spacing: var(
+    --sky-override-page-content-blocks-spacing-xs,
+    var(--sky-space-inset-balanced-s)
+  );
 }
 .sky-layout-host-fit, .sky-layout-host-list {
-  --sky-layout-host-content-spacing: 0 10px;
+  --sky-layout-host-content-spacing: var(
+    --sky-override-page-content-fit-list-spacing-xs,
+    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-layout-host-tabs {
   --sky-layout-host-content-spacing: 0;
   --sky-layout-host-tab-content-spacing: var(
     --sky-override-tabset-padding-xs-breakpoint,
-    var(--sky-space-inset-tabs-s)
+    var(--sky-space-inset-letterbox-1_2-left-m)
   );
 }
 .sky-layout-host-none {
@@ -1103,9 +1141,12 @@ body:not(.sky-theme-modern) {
 
 @media (min-width: 768px) {
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
-    --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
+    --sky-layout-host-links-spacing: var(
+      --sky-override-page-content-with-links-spacing-sm,
+      var(--sky-space-inline-xl)
+    );
     grid-template: "header-alerts header-alerts  header-alerts" "header-avatar header-text    header-text" "header-avatar header-content links" "content       content        links";
-    grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
+    grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
     grid-template-columns: 0 75% 25%;
   }
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1144,7 +1185,11 @@ body:not(.sky-theme-modern) {
   }
   .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)), .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
     --sky-layout-host-header-avatar-size: calc(
-      120px + var(--sky-margin-inline-xl)
+      120px +
+        var(
+          --sky-override-page-header-avatar-size-space,
+          var(--sky-space-inline-xl)
+        )
     );
     grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
   }
@@ -1155,16 +1200,44 @@ body:not(.sky-theme-modern) {
     margin-left: 0;
   }
   .sky-layout-host-blocks {
-    --sky-layout-host-header-spacing: 20px 20px 0 20px;
-    --sky-layout-host-content-spacing: 20px;
+    --sky-layout-host-header-spacing: var(
+      --sky-override-page-header-blocks-spacing-sm,
+      var(--sky-space-inset-bottomless-top-xl)
+        var(--sky-space-inset-bottomless-right-xl)
+        var(--sky-space-inset-bottomless-bottom-xl)
+        var(--sky-space-inset-bottomless-left-xl)
+    );
+    --sky-layout-host-content-spacing: var(
+      --sky-override-page-content-blocks-spacing-sm,
+      var(--sky-space-inset-balanced-xl)
+    );
   }
   .sky-layout-host-fit, .sky-layout-host-list {
-    --sky-layout-host-header-spacing: 20px;
-    --sky-layout-host-content-spacing: 0 20px;
+    --sky-layout-host-header-spacing: var(
+      --sky-override-page-header-fit-list-spacing-sm,
+      var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
+        var(--sky-space-inset-sunk-bottom-l)
+        var(--sky-space-inset-sunk-left-l)
+    );
+    --sky-layout-host-content-spacing: var(
+      --sky-override-page-content-fit-list-spacing-sm,
+      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-layout-host-tabs {
-    --sky-layout-host-header-spacing: 20px;
-    --sky-layout-host-tab-content-spacing: 20px;
+    --sky-layout-host-header-spacing: var(
+      --sky-override-page-header-tabs-spacing-sm,
+      var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
+        var(--sky-space-inset-sunk-bottom-l)
+        var(--sky-space-inset-sunk-left-l)
+    );
+    --sky-layout-host-tab-content-spacing: var(
+      --sky-override-page-content-tabs-spacing-sm,
+      var(--sky-space-inset-sunk-left-l)
+    );
   }
 }
 .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links), .sky-responsive-container-sm .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links),
@@ -1174,9 +1247,12 @@ body:not(.sky-theme-modern) {
 .sky-responsive-container-lg .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links),
 .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links),
 .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links) {
-  --sky-layout-host-links-spacing: var(--sky-margin-inline-xl);
+  --sky-layout-host-links-spacing: var(
+    --sky-override-page-content-with-links-spacing-sm,
+    var(--sky-space-inline-xl)
+  );
   grid-template: "header-alerts header-alerts  header-alerts" "header-avatar header-text    header-text" "header-avatar header-content links" "content       content        links";
-  grid-template-rows: minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) minmax(var(--sky-margin-stacked-xl), min-content) auto;
+  grid-template-rows: minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) minmax(var(--sky-override-page-header-link-rows-space, var(--sky-space-stacked-xl)), min-content) auto;
   grid-template-columns: 0 75% 25%;
 }
 .sky-responsive-container-sm .sky-layout-host-blocks:has(> sky-page-content):has(> sky-page-links) > sky-page-header,
@@ -1269,7 +1345,11 @@ body:not(.sky-theme-modern) {
 .sky-responsive-container-lg .sky-layout-host-list:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)),
 .sky-responsive-container-lg .sky-layout-host-tabs:has(> sky-page-content):has(> sky-page-links):has(sky-page-header-avatar:not(:empty)) {
   --sky-layout-host-header-avatar-size: calc(
-    120px + var(--sky-margin-inline-xl)
+    120px +
+      var(
+        --sky-override-page-header-avatar-size-space,
+        var(--sky-space-inline-xl)
+      )
   );
   grid-template-columns: var(--sky-layout-host-header-avatar-size) calc(75% - var(--sky-layout-host-header-avatar-size)) 25%;
 }
@@ -1294,65 +1374,50 @@ body:not(.sky-theme-modern) {
 .sky-responsive-container-sm .sky-layout-host-blocks,
 .sky-responsive-container-md .sky-layout-host-blocks,
 .sky-responsive-container-lg .sky-layout-host-blocks {
-  --sky-layout-host-header-spacing: 20px 20px 0 20px;
-  --sky-layout-host-content-spacing: 20px;
+  --sky-layout-host-header-spacing: var(
+    --sky-override-page-header-blocks-spacing-sm,
+    var(--sky-space-inset-bottomless-top-xl)
+      var(--sky-space-inset-bottomless-right-xl)
+      var(--sky-space-inset-bottomless-bottom-xl)
+      var(--sky-space-inset-bottomless-left-xl)
+  );
+  --sky-layout-host-content-spacing: var(
+    --sky-override-page-content-blocks-spacing-sm,
+    var(--sky-space-inset-balanced-xl)
+  );
 }
 .sky-responsive-container-sm .sky-layout-host-fit, .sky-responsive-container-sm .sky-layout-host-list,
 .sky-responsive-container-md .sky-layout-host-fit,
 .sky-responsive-container-md .sky-layout-host-list,
 .sky-responsive-container-lg .sky-layout-host-fit,
 .sky-responsive-container-lg .sky-layout-host-list {
-  --sky-layout-host-header-spacing: 20px;
-  --sky-layout-host-content-spacing: 0 20px;
+  --sky-layout-host-header-spacing: var(
+    --sky-override-page-header-fit-list-spacing-sm,
+    var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
+      var(--sky-space-inset-sunk-bottom-l)
+      var(--sky-space-inset-sunk-left-l)
+  );
+  --sky-layout-host-content-spacing: var(
+    --sky-override-page-content-fit-list-spacing-sm,
+    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-responsive-container-sm .sky-layout-host-tabs,
 .sky-responsive-container-md .sky-layout-host-tabs,
 .sky-responsive-container-lg .sky-layout-host-tabs {
-  --sky-layout-host-header-spacing: 20px;
-  --sky-layout-host-tab-content-spacing: 20px;
-}
-
-@media (min-width: 768px) {
-  .sky-theme-modern .sky-layout-host-blocks {
-    --sky-layout-host-header-spacing: 30px 30px 0 30px;
-    --sky-layout-host-content-spacing: 30px;
-  }
-  .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list, .sky-theme-modern .sky-layout-host-tabs {
-    --sky-layout-host-header-spacing: 30px 30px 20px 30px;
-  }
-  .sky-theme-modern .sky-layout-host-fit, .sky-theme-modern .sky-layout-host-list {
-    --sky-layout-host-content-spacing: 0 30px;
-  }
-  .sky-theme-modern .sky-layout-host-tabs {
-    --sky-layout-host-tab-content-spacing: var(--sky-space-inset-tabs-xl);
-  }
-}
-.sky-theme-modern .sky-responsive-container-sm .sky-layout-host-blocks,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-blocks,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-blocks {
-  --sky-layout-host-header-spacing: 30px 30px 0 30px;
-  --sky-layout-host-content-spacing: 30px;
-}
-.sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-tabs,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-tabs,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-tabs {
-  --sky-layout-host-header-spacing: 30px 30px 20px 30px;
-}
-.sky-theme-modern .sky-responsive-container-sm .sky-layout-host-fit, .sky-theme-modern .sky-responsive-container-sm .sky-layout-host-list,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-fit,
-.sky-theme-modern .sky-responsive-container-md .sky-layout-host-list,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-fit,
-.sky-theme-modern .sky-responsive-container-lg .sky-layout-host-list {
-  --sky-layout-host-content-spacing: 0 30px;
-}
-.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: var(--sky-space-inset-tabs-xl);
+  --sky-layout-host-header-spacing: var(
+    --sky-override-page-header-tabs-spacing-sm,
+    var(--sky-space-inset-sunk-top-l) var(--sky-space-inset-sunk-right-l)
+      var(--sky-space-inset-sunk-bottom-l)
+      var(--sky-space-inset-sunk-left-l)
+  );
+  --sky-layout-host-tab-content-spacing: var(
+    --sky-override-page-content-tabs-spacing-sm,
+    var(--sky-space-inset-sunk-left-l)
+  );
 }
 
 .sky-modal-body-open {
@@ -1361,63 +1426,63 @@ body:not(.sky-theme-modern) {
 }
 
 .sky-palette-multi-1 {
-  background-color: #08c0ff;
+  background-color: rgb(7.52, 192.3598340249, 255);
 }
 
 .sky-palette-multi-2 {
-  background-color: #fbb94c;
+  background-color: rgb(251.48, 185.48, 76.36);
 }
 
 .sky-palette-multi-3 {
-  background-color: #7dc453;
+  background-color: rgb(125.28, 196.12, 82.96);
 }
 
 .sky-palette-multi-4 {
-  background-color: #ae9abc;
+  background-color: rgb(173.97, 154.286, 188.474);
 }
 
 .sky-palette-multi-5 {
-  background-color: #00d1aa;
+  background-color: rgb(0, 209.16, 170.2996721311);
 }
 
 .sky-palette-multi-6 {
-  background-color: #f1575a;
+  background-color: rgb(240.92, 86.92, 90.44);
 }
 
 .sky-palette-multi-7 {
-  background-color: #91959c;
+  background-color: rgb(144.9780821918, 148.8049315068, 155.5019178082);
 }
 
 .sky-palette-multi-8 {
-  background-color: #73dcff;
+  background-color: rgb(115.12, 219.5946887967, 255);
 }
 
 .sky-palette-multi-9 {
-  background-color: #fdd189;
+  background-color: rgb(252.68, 209.18, 137.26);
 }
 
 .sky-palette-multi-10 {
-  background-color: #b6de9e;
+  background-color: rgb(181.68, 221.72, 157.76);
 }
 
 .sky-palette-multi-11 {
-  background-color: #cfc3d7;
+  background-color: rgb(206.82, 195.116, 215.444);
 }
 
 .sky-palette-multi-12 {
-  background-color: #55ffdf;
+  background-color: rgb(84.96, 255, 223.4078688525);
 }
 
 .sky-palette-multi-13 {
-  background-color: #f69093;
+  background-color: rgb(245.72, 144.22, 146.54);
 }
 
 .sky-palette-multi-14 {
-  background-color: #b0b2b7;
+  background-color: rgb(175.5397260274, 178.3035616438, 183.1402739726);
 }
 
 .sky-palette-mono-1 {
-  background-color: #0087b5;
+  background-color: rgb(0, 135, 180.75);
 }
 
 .sky-palette-mono-2 {
@@ -1425,15 +1490,15 @@ body:not(.sky-theme-modern) {
 }
 
 .sky-palette-mono-3 {
-  background-color: #35ccff;
+  background-color: rgb(53.25, 203.9346473029, 255);
 }
 
 .sky-palette-mono-4 {
-  background-color: #79ddff;
+  background-color: rgb(120.5, 220.9564315353, 255);
 }
 
 .sky-palette-mono-5 {
-  background-color: #bceeff;
+  background-color: rgb(187.75, 237.9782157676, 255);
 }
 
 .sky-padding-even-default {
@@ -1616,15 +1681,15 @@ body:not(.sky-theme-modern) {
   border-width: 2px;
 }
 .sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-success, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-success {
-  background-color: #d2e8c0;
+  background-color: rgb(209.802919708, 231.7737226277, 192.2262773723);
   border-color: var(--sky-highlight-color-success);
 }
 .sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-warning, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-warning {
-  background-color: #ffeaca;
+  background-color: rgb(255, 233.5961538462, 202);
   border-color: var(--sky-highlight-color-warning);
 }
 .sky-switch:not(.sky-theme-modern *) .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-switch:not(.sky-theme-modern *) .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
-  background-color: #fac8bf;
+  background-color: rgb(250.4, 200.375, 190.6);
   border-color: var(--sky-highlight-color-danger);
 }
 .sky-switch:not(.sky-theme-modern *) .sky-switch-input:disabled + .sky-switch-control {

package/css/themes/modern/styles.css

@@ -376,6 +376,10 @@
   --sky-space-inset-tabs-l: var(--modern-space-lg);
   --sky-space-inset-tabs-m: var(--modern-space-md);
   --sky-space-inset-tabs-s: var(--modern-space-s);
+  --sky-space-inset-sunk-left-l: var(--modern-space-xl);
+  --sky-space-inset-sunk-bottom-l: var(--modern-space-lg);
+  --sky-space-inset-sunk-right-l: var(--modern-space-xl);
+  --sky-space-inset-sunk-top-l: var(--modern-space-xl);
   --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
   --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
   --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -408,10 +412,18 @@
   --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
   --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
   --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
-  --sky-space-inset-letterbox-left-m: var(--modern-space-s);
-  --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
-  --sky-space-inset-letterbox-right-m: var(--modern-space-s);
-  --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
+  --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
+  --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
+  --sky-space-inset-letterbox-1_2-left-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-1_2-bottom-m: var(--modern-space-lg);
+  --sky-space-inset-letterbox-1_2-right-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-1_2-top-m: var(--modern-space-lg);
+  --sky-space-inset-letterbox-1_3-left-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-1_3-bottom-m: var(--modern-space-xl);
+  --sky-space-inset-letterbox-1_3-right-m: var(--modern-space-s);
+  --sky-space-inset-letterbox-1_3-top-m: var(--modern-space-xl);
   --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
   --sky-space-inset-input_label-top-m: var(--modern-size-6);
   --sky-space-inset-input-left-m: var(--modern-size-15);
@@ -556,7 +568,7 @@
   --sky-highlight-color-danger: #ef4044;
   --sky-text-color-deemphasized: #686c73;
   --sky-text-color-action-primary: #1870B8;
-  --sky-text-color-action-primary-hover: #12558b;
+  --sky-text-color-action-primary-hover: rgb(18.1153846154, 84.5384615385, 138.8846153846);
   /* margin */
   --sky-margin-inline-xs: 5px;
   --sky-margin-inline-sm: 10px;
@@ -588,7 +600,7 @@
   --sky-text-color-default: #fbfcfe;
   --sky-text-color-deemphasized: #c0c2c5;
   --sky-text-color-action-primary: #009cd1;
-  --sky-text-color-action-primary-hover: #00769e;
+  --sky-text-color-action-primary-hover: rgb(0, 117.9330143541, 158);
 }
 
 .sky-theme-modern .sky-box {
@@ -1302,9 +1314,9 @@
   --sky-override-icon-switch-size: 35px;
   --sky-override-icon-switch-size-group: 40px;
   --sky-override-switch-background-color: var(--modern-color-white);
-  --sky-override-switch-background-color-danger: #fac8bf;
-  --sky-override-switch-background-color-success: #d2e8c0;
-  --sky-override-switch-background-color-warning: #ffeaca;
+  --sky-override-switch-background-color-danger: rgb(250.4, 200.375, 190.6);
+  --sky-override-switch-background-color-success: rgb(209.802919708, 231.7737226277, 192.2262773723);
+  --sky-override-switch-background-color-warning: rgb(255, 233.5961538462, 202);
   --sky-override-switch-border-color: var(--modern-color-blue-74);
   --sky-override-switch-checked-color: var(--sky-color-icon-action);
   --sky-override-switch-icon-checked-color-no-group: var(