@wordpress/boot 0.3.0 → 0.3.1-next.738bb1424.0

package/build-style/style-rtl.css

@@ -3,20 +3,33 @@
  *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
  * ------------------------------------------- */
 :root {
-  --wpds-border-radius-large: 8px; /* Large radius */
-  --wpds-border-radius-medium: 4px; /* Medium radius */
-  --wpds-border-radius-small: 2px; /* Small radius */
-  --wpds-border-radius-x-small: 1px; /* Extra small radius */
-  --wpds-border-width-focus: 2px; /* Border width for focus ring */
+  --wpds-border-radius-surface-lg: 8px; /* Large radius for surfaces */
+  --wpds-border-radius-surface-md: 4px; /* Medium radius for surfaces */
+  --wpds-border-radius-surface-sm: 2px; /* Small radius for surfaces */
+  --wpds-border-radius-surface-xs: 1px; /* Extra small radius for surfaces */
+  --wpds-border-width-interactive-focus: 2px; /* Border width for focus ring */
+  --wpds-border-width-surface-lg: 8px; /* Large width for surfaces */
+  --wpds-border-width-surface-md: 4px; /* Medium width for surfaces */
+  --wpds-border-width-surface-sm: 2px; /* Small width for surfaces */
+  --wpds-border-width-surface-xs: 1px; /* Extra small width for surfaces */
   --wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
-  --wpds-color-bg-interactive-brand-active: #f6f8fc; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-active: #f6f8fd; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
   --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
   --wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-strong-disabled: #d2d2d2; /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
   --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
-  --wpds-color-bg-interactive-brand-weak-active: #e4eaf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
+  --wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
+  --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
+  --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
   --wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
   --wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -27,19 +40,19 @@
   --wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-neutral-weak-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
   --wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
-  --wpds-color-bg-surface-caution: #f7eab3; /* Background color for surfaces with caution tone and normal emphasis. */
-  --wpds-color-bg-surface-caution-weak: #fdf9e7; /* Background color for surfaces with caution tone and weak emphasis. */
-  --wpds-color-bg-surface-error: #fae4e1; /* Background color for surfaces with error tone and normal emphasis. */
-  --wpds-color-bg-surface-error-weak: #fdf6f5; /* Background color for surfaces with error tone and weak emphasis. */
-  --wpds-color-bg-surface-info: #dfebf8; /* Background color for surfaces with info tone and normal emphasis. */
-  --wpds-color-bg-surface-info-weak: #f5f9fd; /* Background color for surfaces with info tone and weak emphasis. */
+  --wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */
+  --wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */
+  --wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
+  --wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */
+  --wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
+  --wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak emphasis. */
   --wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */
   --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
   --wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
-  --wpds-color-bg-surface-success: #cbf5d1; /* Background color for surfaces with success tone and normal emphasis. */
-  --wpds-color-bg-surface-success-weak: #f0fcf2; /* Background color for surfaces with success tone and weak emphasis. */
-  --wpds-color-bg-surface-warning: #f8e8cc; /* Background color for surfaces with warning tone and normal emphasis. */
-  --wpds-color-bg-surface-warning-weak: #fdf7ee; /* Background color for surfaces with warning tone and weak emphasis. */
+  --wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */
+  --wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */
+  --wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */
+  --wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */
   --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
   --wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
   --wpds-color-bg-thumb-brand-disabled: #d8d8d8; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
@@ -48,7 +61,7 @@
   --wpds-color-bg-track-neutral: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
   --wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
   --wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
-  --wpds-color-fg-content-caution-weak: #836b00; /* Foreground color for content like text with caution tone and weak emphasis. */
+  --wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
   --wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
   --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
   --wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
@@ -58,13 +71,19 @@
   --wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
   --wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */
   --wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
-  --wpds-color-fg-content-warning-weak: #936400; /* Foreground color for content like text with warning tone and weak emphasis. */
+  --wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
   --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
   --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-brand-disabled: #8a8a8a; /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
   --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
   --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
+  --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
+  --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
   --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
   --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -76,26 +95,33 @@
   --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
   --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
   --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
-  --wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+  --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
+  --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
   --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
   --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
   --wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
   --wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
   --wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
-  --wpds-color-stroke-surface-brand: #a2b1d6; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-error: #e1a198; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-info: #9fbcdd; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
-  --wpds-color-stroke-surface-success: #82c98f; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-warning: #d2b581; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-warning-strong: #936400; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
   --wpds-dimension-base: 4px; /* Base dimension unit */
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 24px; /* Large gap */
+  --wpds-dimension-gap-md: 16px; /* Medium gap */
+  --wpds-dimension-gap-sm: 12px; /* Small gap */
+  --wpds-dimension-gap-xl: 40px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 8px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -130,6 +156,12 @@
 
 [data-wpds-theme-provider-id][data-wpds-density=default] {
   --wpds-dimension-base: 4px; /* Base dimension unit */
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 24px; /* Large gap */
+  --wpds-dimension-gap-md: 16px; /* Medium gap */
+  --wpds-dimension-gap-sm: 12px; /* Small gap */
+  --wpds-dimension-gap-xl: 40px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 8px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -138,6 +170,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density=compact] {
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 20px; /* Large gap */
+  --wpds-dimension-gap-md: 12px; /* Medium gap */
+  --wpds-dimension-gap-sm: 8px; /* Small gap */
+  --wpds-dimension-gap-xl: 32px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */
@@ -146,6 +184,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density=comfortable] {
+  --wpds-dimension-gap-2xs: 8px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 32px; /* Large gap */
+  --wpds-dimension-gap-md: 20px; /* Medium gap */
+  --wpds-dimension-gap-sm: 16px; /* Small gap */
+  --wpds-dimension-gap-xl: 48px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 12px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */
@@ -155,7 +199,7 @@
 
 @media (min-resolution: 192dpi) {
   :root {
-    --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
+    --wpds-border-width-interactive-focus: 1.5px; /* Border width for focus ring */
   }
 }
 /**
@@ -251,27 +295,21 @@
   position: relative;
   z-index: 1;
   flex-flow: column;
-  container: admin-ui-page/inline-size;
 }
 
-@media not (prefers-reduced-motion) {
-  .admin-ui-page {
-    transition: width ease-out 0.2s;
-  }
-}
 .admin-ui-page__header {
-  padding: 16px 48px;
+  padding: 16px 24px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-@container (max-width: 430px) {
-  .admin-ui-page__header {
-    padding: 16px 24px;
-  }
+.admin-ui-page__sidebar-toggle-slot:empty {
+  display: none;
 }
+
 .admin-ui-page__header-subtitle {
   padding-block-end: 8px;
   color: #757575;
@@ -290,14 +328,9 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 20px;
+  padding: 16px 24px;
 }
 
-@container (max-width: 430px) {
-  .admin-ui-page__content.has-padding {
-    padding: 16px 24px;
-  }
-}
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
   padding: 0 8px;
@@ -417,41 +450,28 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.boot-layout-container .boot-layout {
-  height: calc(100vh - 32px);
-}
-
-body:has(.boot-layout-container) {
-  background: #1d2327;
-  overflow: hidden;
-}
-
-#wpcontent {
-  padding-right: 0;
-}
-
-#wpbody-content {
-  padding-bottom: 0;
-}
-
-#wpfooter {
-  display: none;
+@media (min-width: 600px) {
+  .boot-layout-container .boot-layout {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    min-height: calc(100vh - 46px);
+  }
 }
-
 @media (min-width: 782px) {
-  body:has(.boot-layout.has-full-canvas) {
-    margin-top: -32px;
-    height: calc(100% + 32px);
+  .boot-layout-container .boot-layout {
+    min-height: calc(100vh - 32px);
   }
-  body:has(.boot-layout.has-full-canvas) #adminmenumain,
-  body:has(.boot-layout.has-full-canvas) #wpadminbar {
-    display: none;
-  }
-  body:has(.boot-layout.has-full-canvas) #wpcontent,
-  body:has(.boot-layout.has-full-canvas) #wpfooter {
-    margin-right: 0;
+  body:has(.boot-layout.has-full-canvas) .boot-layout-container .boot-layout {
+    min-height: 100vh;
   }
 }
+.boot-layout-container .boot-layout img {
+  max-width: 100%;
+  height: auto;
+}
 
 .boot-layout .components-editor-notices__snackbar {
   position: fixed;

package/build-style/style.css

@@ -3,20 +3,33 @@
  *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
  * ------------------------------------------- */
 :root {
-  --wpds-border-radius-large: 8px; /* Large radius */
-  --wpds-border-radius-medium: 4px; /* Medium radius */
-  --wpds-border-radius-small: 2px; /* Small radius */
-  --wpds-border-radius-x-small: 1px; /* Extra small radius */
-  --wpds-border-width-focus: 2px; /* Border width for focus ring */
+  --wpds-border-radius-surface-lg: 8px; /* Large radius for surfaces */
+  --wpds-border-radius-surface-md: 4px; /* Medium radius for surfaces */
+  --wpds-border-radius-surface-sm: 2px; /* Small radius for surfaces */
+  --wpds-border-radius-surface-xs: 1px; /* Extra small radius for surfaces */
+  --wpds-border-width-interactive-focus: 2px; /* Border width for focus ring */
+  --wpds-border-width-surface-lg: 8px; /* Large width for surfaces */
+  --wpds-border-width-surface-md: 4px; /* Medium width for surfaces */
+  --wpds-border-width-surface-sm: 2px; /* Small width for surfaces */
+  --wpds-border-width-surface-xs: 1px; /* Extra small width for surfaces */
   --wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
-  --wpds-color-bg-interactive-brand-active: #f6f8fc; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-active: #f6f8fd; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
   --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
   --wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-strong-disabled: #d2d2d2; /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
   --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
-  --wpds-color-bg-interactive-brand-weak-active: #e4eaf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
+  --wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
+  --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
+  --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
+  --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
+  --wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
   --wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
   --wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -27,19 +40,19 @@
   --wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-neutral-weak-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
   --wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
-  --wpds-color-bg-surface-caution: #f7eab3; /* Background color for surfaces with caution tone and normal emphasis. */
-  --wpds-color-bg-surface-caution-weak: #fdf9e7; /* Background color for surfaces with caution tone and weak emphasis. */
-  --wpds-color-bg-surface-error: #fae4e1; /* Background color for surfaces with error tone and normal emphasis. */
-  --wpds-color-bg-surface-error-weak: #fdf6f5; /* Background color for surfaces with error tone and weak emphasis. */
-  --wpds-color-bg-surface-info: #dfebf8; /* Background color for surfaces with info tone and normal emphasis. */
-  --wpds-color-bg-surface-info-weak: #f5f9fd; /* Background color for surfaces with info tone and weak emphasis. */
+  --wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */
+  --wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */
+  --wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
+  --wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */
+  --wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
+  --wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak emphasis. */
   --wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */
   --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
   --wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
-  --wpds-color-bg-surface-success: #cbf5d1; /* Background color for surfaces with success tone and normal emphasis. */
-  --wpds-color-bg-surface-success-weak: #f0fcf2; /* Background color for surfaces with success tone and weak emphasis. */
-  --wpds-color-bg-surface-warning: #f8e8cc; /* Background color for surfaces with warning tone and normal emphasis. */
-  --wpds-color-bg-surface-warning-weak: #fdf7ee; /* Background color for surfaces with warning tone and weak emphasis. */
+  --wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */
+  --wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */
+  --wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */
+  --wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */
   --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
   --wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
   --wpds-color-bg-thumb-brand-disabled: #d8d8d8; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
@@ -48,7 +61,7 @@
   --wpds-color-bg-track-neutral: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
   --wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
   --wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
-  --wpds-color-fg-content-caution-weak: #836b00; /* Foreground color for content like text with caution tone and weak emphasis. */
+  --wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
   --wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
   --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
   --wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
@@ -58,13 +71,19 @@
   --wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
   --wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */
   --wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
-  --wpds-color-fg-content-warning-weak: #936400; /* Foreground color for content like text with warning tone and weak emphasis. */
+  --wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
   --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
   --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-brand-disabled: #8a8a8a; /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
   --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
   --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
+  --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
+  --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
+  --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+  --wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
   --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
   --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
   --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -76,26 +95,33 @@
   --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
   --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
   --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
-  --wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+  --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
+  --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
   --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
   --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
   --wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
   --wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
   --wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
-  --wpds-color-stroke-surface-brand: #a2b1d6; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-error: #e1a198; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-info: #9fbcdd; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
-  --wpds-color-stroke-surface-success: #82c98f; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
-  --wpds-color-stroke-surface-warning: #d2b581; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-warning-strong: #936400; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+  --wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+  --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
   --wpds-dimension-base: 4px; /* Base dimension unit */
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 24px; /* Large gap */
+  --wpds-dimension-gap-md: 16px; /* Medium gap */
+  --wpds-dimension-gap-sm: 12px; /* Small gap */
+  --wpds-dimension-gap-xl: 40px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 8px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -130,6 +156,12 @@
 
 [data-wpds-theme-provider-id][data-wpds-density=default] {
   --wpds-dimension-base: 4px; /* Base dimension unit */
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 24px; /* Large gap */
+  --wpds-dimension-gap-md: 16px; /* Medium gap */
+  --wpds-dimension-gap-sm: 12px; /* Small gap */
+  --wpds-dimension-gap-xl: 40px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 8px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -138,6 +170,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density=compact] {
+  --wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 20px; /* Large gap */
+  --wpds-dimension-gap-md: 12px; /* Medium gap */
+  --wpds-dimension-gap-sm: 8px; /* Small gap */
+  --wpds-dimension-gap-xl: 32px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 4px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */
@@ -146,6 +184,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density=comfortable] {
+  --wpds-dimension-gap-2xs: 8px; /* 2x extra small gap */
+  --wpds-dimension-gap-lg: 32px; /* Large gap */
+  --wpds-dimension-gap-md: 20px; /* Medium gap */
+  --wpds-dimension-gap-sm: 16px; /* Small gap */
+  --wpds-dimension-gap-xl: 48px; /* Extra large gap */
+  --wpds-dimension-gap-xs: 12px; /* Extra small gap */
   --wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */
   --wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */
   --wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */
@@ -155,7 +199,7 @@
 
 @media (min-resolution: 192dpi) {
   :root {
-    --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
+    --wpds-border-width-interactive-focus: 1.5px; /* Border width for focus ring */
   }
 }
 /**
@@ -251,27 +295,21 @@
   position: relative;
   z-index: 1;
   flex-flow: column;
-  container: admin-ui-page/inline-size;
 }
 
-@media not (prefers-reduced-motion) {
-  .admin-ui-page {
-    transition: width ease-out 0.2s;
-  }
-}
 .admin-ui-page__header {
-  padding: 16px 48px;
+  padding: 16px 24px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-@container (max-width: 430px) {
-  .admin-ui-page__header {
-    padding: 16px 24px;
-  }
+.admin-ui-page__sidebar-toggle-slot:empty {
+  display: none;
 }
+
 .admin-ui-page__header-subtitle {
   padding-block-end: 8px;
   color: #757575;
@@ -290,14 +328,9 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 20px;
+  padding: 16px 24px;
 }
 
-@container (max-width: 430px) {
-  .admin-ui-page__content.has-padding {
-    padding: 16px 24px;
-  }
-}
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
   padding: 0 8px;
@@ -417,41 +450,28 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.boot-layout-container .boot-layout {
-  height: calc(100vh - 32px);
-}
-
-body:has(.boot-layout-container) {
-  background: #1d2327;
-  overflow: hidden;
-}
-
-#wpcontent {
-  padding-left: 0;
-}
-
-#wpbody-content {
-  padding-bottom: 0;
-}
-
-#wpfooter {
-  display: none;
+@media (min-width: 600px) {
+  .boot-layout-container .boot-layout {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    min-height: calc(100vh - 46px);
+  }
 }
-
 @media (min-width: 782px) {
-  body:has(.boot-layout.has-full-canvas) {
-    margin-top: -32px;
-    height: calc(100% + 32px);
+  .boot-layout-container .boot-layout {
+    min-height: calc(100vh - 32px);
   }
-  body:has(.boot-layout.has-full-canvas) #adminmenumain,
-  body:has(.boot-layout.has-full-canvas) #wpadminbar {
-    display: none;
-  }
-  body:has(.boot-layout.has-full-canvas) #wpcontent,
-  body:has(.boot-layout.has-full-canvas) #wpfooter {
-    margin-left: 0;
+  body:has(.boot-layout.has-full-canvas) .boot-layout-container .boot-layout {
+    min-height: 100vh;
   }
 }
+.boot-layout-container .boot-layout img {
+  max-width: 100%;
+  height: auto;
+}
 
 .boot-layout .components-editor-notices__snackbar {
   position: fixed;