@wordpress/theme 0.2.1-next.dc3f6d3c1.0 → 0.3.1-next.6deb34194.0

package/src/prebuilt/css/design-tokens.css

@@ -3,19 +3,23 @@
  * ------------------------------------------- */
 
 :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-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. */
@@ -27,19 +31,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 +52,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,7 +62,7 @@
 	--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. */
@@ -82,24 +86,31 @@
 	--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: #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 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-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-padding-surface-large: 24px; /* Large spacing for surfaces */
-	--wpds-dimension-padding-surface-medium: 16px; /* Medium spacing for surfaces */
-	--wpds-dimension-padding-surface-small: 12px; /* Small spacing for surfaces */
-	--wpds-dimension-padding-surface-x-small: 8px; /* Extra small spacing for surfaces */
+	--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 */
+	--wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
+	--wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
 	--wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
 		0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
 	--wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
@@ -127,8 +138,51 @@
 	--wpds-font-size-x-small: 11px; /* Extra small font size */
 }
 
+[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 */
+	--wpds-dimension-padding-surface-sm: 16px; /* Small spacing for surfaces */
+	--wpds-dimension-padding-surface-xs: 8px; /* Extra small spacing for surfaces */
+}
+
+[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 */
+	--wpds-dimension-padding-surface-sm: 12px; /* Small spacing for surfaces */
+	--wpds-dimension-padding-surface-xs: 4px; /* Extra small spacing for surfaces */
+}
+
+[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 */
+	--wpds-dimension-padding-surface-sm: 20px; /* Small spacing for surfaces */
+	--wpds-dimension-padding-surface-xs: 12px; /* Extra small spacing for surfaces */
+}
+
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( 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 */
 	}
 }

package/src/prebuilt/js/design-tokens.js

@@ -4,11 +4,15 @@
  */
 
 export default [
-	'--wpds-border-radius-x-small',
-	'--wpds-border-radius-small',
-	'--wpds-border-radius-medium',
-	'--wpds-border-radius-large',
-	'--wpds-border-width-focus',
+	'--wpds-border-radius-surface-xs',
+	'--wpds-border-radius-surface-sm',
+	'--wpds-border-radius-surface-md',
+	'--wpds-border-radius-surface-lg',
+	'--wpds-border-width-surface-xs',
+	'--wpds-border-width-surface-sm',
+	'--wpds-border-width-surface-md',
+	'--wpds-border-width-surface-lg',
+	'--wpds-border-width-interactive-focus',
 	'--wpds-color-bg-surface-neutral',
 	'--wpds-color-bg-surface-neutral-strong',
 	'--wpds-color-bg-surface-neutral-weak',
@@ -97,10 +101,17 @@ export default [
 	'--wpds-color-stroke-interactive-error-strong',
 	'--wpds-color-stroke-focus-brand',
 	'--wpds-dimension-base',
-	'--wpds-dimension-padding-surface-x-small',
-	'--wpds-dimension-padding-surface-small',
-	'--wpds-dimension-padding-surface-medium',
-	'--wpds-dimension-padding-surface-large',
+	'--wpds-dimension-padding-surface-2xs',
+	'--wpds-dimension-padding-surface-xs',
+	'--wpds-dimension-padding-surface-sm',
+	'--wpds-dimension-padding-surface-md',
+	'--wpds-dimension-padding-surface-lg',
+	'--wpds-dimension-gap-2xs',
+	'--wpds-dimension-gap-xs',
+	'--wpds-dimension-gap-sm',
+	'--wpds-dimension-gap-md',
+	'--wpds-dimension-gap-lg',
+	'--wpds-dimension-gap-xl',
 	'--wpds-elevation-x-small',
 	'--wpds-elevation-small',
 	'--wpds-elevation-medium',

package/src/prebuilt/json/figma.json

@@ -1,29 +1,53 @@
 {
-	"Border/radius-x-small": {
+	"Border/radius-surface-xs": {
 		"value": {
 			".": "1px"
 		},
-		"description": "Extra small radius"
+		"description": "Extra small radius for surfaces"
 	},
-	"Border/radius-small": {
+	"Border/radius-surface-sm": {
 		"value": {
 			".": "2px"
 		},
-		"description": "Small radius"
+		"description": "Small radius for surfaces"
 	},
-	"Border/radius-medium": {
+	"Border/radius-surface-md": {
 		"value": {
 			".": "4px"
 		},
-		"description": "Medium radius"
+		"description": "Medium radius for surfaces"
 	},
-	"Border/radius-large": {
+	"Border/radius-surface-lg": {
 		"value": {
 			".": "8px"
 		},
-		"description": "Large radius"
+		"description": "Large radius for surfaces"
 	},
-	"Border/width-focus": {
+	"Border/width-surface-xs": {
+		"value": {
+			".": "1px"
+		},
+		"description": "Extra small width for surfaces"
+	},
+	"Border/width-surface-sm": {
+		"value": {
+			".": "2px"
+		},
+		"description": "Small width for surfaces"
+	},
+	"Border/width-surface-md": {
+		"value": {
+			".": "4px"
+		},
+		"description": "Medium width for surfaces"
+	},
+	"Border/width-surface-lg": {
+		"value": {
+			".": "8px"
+		},
+		"description": "Large width for surfaces"
+	},
+	"Border/width-interactive-focus": {
 		"value": {
 			".": "2px",
 			"high-dpi": "1.5px"
@@ -56,61 +80,61 @@
 	},
 	"Color/Semantic/Background/Success/bgSur-success": {
 		"value": {
-			".": "#cbf5d1"
+			".": "#c5f7cc"
 		},
 		"description": "Background color for surfaces with success tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Success/bgSur-success-weak": {
 		"value": {
-			".": "#f0fcf2"
+			".": "#eaffed"
 		},
 		"description": "Background color for surfaces with success tone and weak emphasis."
 	},
 	"Color/Semantic/Background/Info/bgSur-info": {
 		"value": {
-			".": "#dfebf8"
+			".": "#deebfa"
 		},
 		"description": "Background color for surfaces with info tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Info/bgSur-info-weak": {
 		"value": {
-			".": "#f5f9fd"
+			".": "#f3f9ff"
 		},
 		"description": "Background color for surfaces with info tone and weak emphasis."
 	},
 	"Color/Semantic/Background/Warning/bgSur-warning": {
 		"value": {
-			".": "#f8e8cc"
+			".": "#fde6bd"
 		},
 		"description": "Background color for surfaces with warning tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Warning/bgSur-warning-weak": {
 		"value": {
-			".": "#fdf7ee"
+			".": "#fff7e0"
 		},
 		"description": "Background color for surfaces with warning tone and weak emphasis."
 	},
 	"Color/Semantic/Background/Caution/bgSur-caution": {
 		"value": {
-			".": "#f7eab3"
+			".": "#fee994"
 		},
 		"description": "Background color for surfaces with caution tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Caution/bgSur-caution-weak": {
 		"value": {
-			".": "#fdf9e7"
+			".": "#fff9c9"
 		},
 		"description": "Background color for surfaces with caution tone and weak emphasis."
 	},
 	"Color/Semantic/Background/Error/bgSur-error": {
 		"value": {
-			".": "#fae4e1"
+			".": "#f6e6e3"
 		},
 		"description": "Background color for surfaces with error tone and normal emphasis."
 	},
 	"Color/Semantic/Background/Error/bgSur-error-weak": {
 		"value": {
-			".": "#fdf6f5"
+			".": "#fff6f4"
 		},
 		"description": "Background color for surfaces with error tone and weak emphasis."
 	},
@@ -176,7 +200,7 @@
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-active": {
 		"value": {
-			".": "#f6f8fc"
+			".": "#f6f8fd"
 		},
 		"description": "Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active."
 	},
@@ -212,7 +236,7 @@
 	},
 	"Color/Semantic/Background/Brand/bgInt-brand-weak-active": {
 		"value": {
-			".": "#e4eaf7"
+			".": "#e6eaf4"
 		},
 		"description": "Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active."
 	},
@@ -308,7 +332,7 @@
 	},
 	"Color/Semantic/Foreground/Warning/fgCon-warning-weak": {
 		"value": {
-			".": "#936400"
+			".": "#926300"
 		},
 		"description": "Foreground color for content like text with warning tone and weak emphasis."
 	},
@@ -320,7 +344,7 @@
 	},
 	"Color/Semantic/Foreground/Caution/fgCon-caution-weak": {
 		"value": {
-			".": "#836b00"
+			".": "#826a00"
 		},
 		"description": "Foreground color for content like text with caution tone and weak emphasis."
 	},
@@ -440,7 +464,7 @@
 	},
 	"Color/Semantic/Stroke/Brand/strokeSur-brand": {
 		"value": {
-			".": "#a2b1d6"
+			".": "#a3b1d4"
 		},
 		"description": "Decorative stroke color used to define brand-toned surface boundaries with normal emphasis."
 	},
@@ -452,7 +476,7 @@
 	},
 	"Color/Semantic/Stroke/Success/strokeSur-success": {
 		"value": {
-			".": "#82c98f"
+			".": "#8ac894"
 		},
 		"description": "Decorative stroke color used to define success-toned surface boundaries with normal emphasis."
 	},
@@ -464,7 +488,7 @@
 	},
 	"Color/Semantic/Stroke/Info/strokeSur-info": {
 		"value": {
-			".": "#9fbcdd"
+			".": "#9fbcdc"
 		},
 		"description": "Decorative stroke color used to define info-toned surface boundaries with normal emphasis."
 	},
@@ -476,19 +500,19 @@
 	},
 	"Color/Semantic/Stroke/Warning/strokeSur-warning": {
 		"value": {
-			".": "#d2b581"
+			".": "#d0b381"
 		},
 		"description": "Decorative stroke color used to define warning-toned surface boundaries with normal emphasis."
 	},
 	"Color/Semantic/Stroke/Warning/strokeSur-warning-strong": {
 		"value": {
-			".": "#936400"
+			".": "#926300"
 		},
 		"description": "Decorative stroke color used to define warning-toned surface boundaries with strong emphasis."
 	},
 	"Color/Semantic/Stroke/Error/strokeSur-error": {
 		"value": {
-			".": "#e1a198"
+			".": "#daa39b"
 		},
 		"description": "Decorative stroke color used to define error-toned surface boundaries with normal emphasis."
 	},
@@ -558,30 +582,94 @@
 		},
 		"description": "Base dimension unit"
 	},
-	"Dimension/Semantic/padding-surface-x-small": {
+	"Dimension/Semantic/padding-surface-2xs": {
 		"value": {
-			".": "8px"
+			".": "4px",
+			"compact": "4px",
+			"comfortable": "8px"
+		},
+		"description": "2x extra small spacing for surfaces"
+	},
+	"Dimension/Semantic/padding-surface-xs": {
+		"value": {
+			".": "8px",
+			"compact": "4px",
+			"comfortable": "12px"
 		},
 		"description": "Extra small spacing for surfaces"
 	},
-	"Dimension/Semantic/padding-surface-small": {
+	"Dimension/Semantic/padding-surface-sm": {
 		"value": {
-			".": "12px"
+			".": "16px",
+			"compact": "12px",
+			"comfortable": "20px"
 		},
 		"description": "Small spacing for surfaces"
 	},
-	"Dimension/Semantic/padding-surface-medium": {
+	"Dimension/Semantic/padding-surface-md": {
 		"value": {
-			".": "16px"
+			".": "24px",
+			"compact": "20px",
+			"comfortable": "32px"
 		},
 		"description": "Medium spacing for surfaces"
 	},
-	"Dimension/Semantic/padding-surface-large": {
+	"Dimension/Semantic/padding-surface-lg": {
 		"value": {
-			".": "24px"
+			".": "32px",
+			"compact": "24px",
+			"comfortable": "40px"
 		},
 		"description": "Large spacing for surfaces"
 	},
+	"Dimension/Semantic/gap-2xs": {
+		"value": {
+			".": "4px",
+			"compact": "4px",
+			"comfortable": "8px"
+		},
+		"description": "2x extra small gap"
+	},
+	"Dimension/Semantic/gap-xs": {
+		"value": {
+			".": "8px",
+			"compact": "4px",
+			"comfortable": "12px"
+		},
+		"description": "Extra small gap"
+	},
+	"Dimension/Semantic/gap-sm": {
+		"value": {
+			".": "12px",
+			"compact": "8px",
+			"comfortable": "16px"
+		},
+		"description": "Small gap"
+	},
+	"Dimension/Semantic/gap-md": {
+		"value": {
+			".": "16px",
+			"compact": "12px",
+			"comfortable": "20px"
+		},
+		"description": "Medium gap"
+	},
+	"Dimension/Semantic/gap-lg": {
+		"value": {
+			".": "24px",
+			"compact": "20px",
+			"comfortable": "32px"
+		},
+		"description": "Large gap"
+	},
+	"Dimension/Semantic/gap-xl": {
+		"value": {
+			".": "40px",
+			"compact": "32px",
+			"comfortable": "48px"
+		},
+		"description": "Extra large gap"
+	},
 	"Elevation/x-small": {
 		"value": {
 			".": "0 1px 1px 0 color(srgb 0 0 0 / 0.03), 0 1px 2px 0 color(srgb 0 0 0 / 0.02), 0 3px 3px 0 color(srgb 0 0 0 / 0.02), 0 4px 4px 0 color(srgb 0 0 0 / 0.01)"

package/src/stories/index.story.tsx

@@ -18,6 +18,7 @@ import {
  * Internal dependencies
  */
 import { ThemeProvider } from '../theme-provider';
+import '../prebuilt/css/design-tokens.css';
 
 const meta: Meta< typeof ThemeProvider > = {
 	title: 'Design System/Theme Provider',
@@ -198,10 +199,10 @@ export const WithPicker: StoryObj< typeof ThemeProvider > = {
 	},
 };
 
-const NestingDebug = ( { bg = '', primary = '' } ) => (
+const NestingDebug = ( { bg = '', primary = '', density = '' } ) => (
 	<div
 		style={ {
-			padding: '0.25rem',
+			padding: 'var(--wpds-dimension-padding-surface-sm)',
 			color: 'var(--wpds-color-fg-content-neutral)',
 			backgroundColor: 'var(--wpds-color-bg-surface-neutral)',
 			display: 'flex',
@@ -210,13 +211,13 @@ const NestingDebug = ( { bg = '', primary = '' } ) => (
 			gap: '1rem',
 		} }
 	>
-		<pre>
-			bg: { bg } | primary: { primary }
+		<pre style={ { margin: 0 } }>
+			bg: { bg } | primary: { primary } | density: { density }
 		</pre>
 		<span
 			style={ {
 				display: 'inline-block',
-				padding: '0.25rem',
+				padding: 'var(--wpds-dimension-padding-surface-xs)',
 				borderRadius: '0.25rem',
 				backgroundColor:
 					'var(--wpds-color-bg-interactive-brand-strong)',
@@ -229,7 +230,7 @@ const NestingDebug = ( { bg = '', primary = '' } ) => (
 			style={ {
 				display: 'inline-block',
 				marginInlineStart: '0.25rem',
-				padding: '0.25rem',
+				padding: 'var(--wpds-dimension-padding-surface-xs)',
 				borderRadius: '0.25rem',
 				backgroundColor:
 					'var(--wpds-color-bg-interactive-brand-weak-disabled)',
@@ -245,27 +246,39 @@ export const NestingAndInheriting: StoryObj< typeof ThemeProvider > = {
 	render: () => {
 		return (
 			<ThemeProvider>
-				<NestingDebug bg="inherit (root)" primary="inherit (root)" />
+				<NestingDebug
+					bg="inherit (root)"
+					primary="inherit (root)"
+					density="inherit (root)"
+				/>
 				<div style={ { paddingInlineStart: '1rem' } }>
 					<ThemeProvider
 						color={ {
 							bg: '#1e1e1e',
 						} }
+						density="compact"
 					>
-						<NestingDebug bg="#1e1e1e" primary="inherit (root)" />
+						<NestingDebug
+							bg="#1e1e1e"
+							primary="inherit (root)"
+							density="compact"
+						/>
 						<div style={ { paddingInlineStart: '1rem' } }>
 							<ThemeProvider>
 								<NestingDebug
 									bg="inherit (#1e1e1e)"
 									primary="inherit (root)"
+									density="inherit (compact)"
 								/>
 								<div style={ { paddingInlineStart: '1rem' } }>
 									<ThemeProvider
 										color={ { primary: 'hotpink' } }
+										density="default"
 									>
 										<NestingDebug
 											bg="inherit (#1e1e1e)"
 											primary="hotpink"
+											density="default"
 										/>
 										<div
 											style={ {
@@ -278,6 +291,7 @@ export const NestingAndInheriting: StoryObj< typeof ThemeProvider > = {
 												<NestingDebug
 													bg="#f8f8f8"
 													primary="inherit (hotpink)"
+													density="inherit (default)"
 												/>
 											</ThemeProvider>
 										</div>
@@ -397,7 +411,7 @@ export const AcrossIframes: StoryObj< typeof ThemeProvider > = {
 				<span
 					style={ {
 						display: 'inline-block',
-						padding: '0.25rem',
+						padding: 'var(--wpds-dimension-padding-surface-xs)',
 						borderRadius: '0.25rem',
 						backgroundColor:
 							'var(--wpds-color-bg-interactive-brand-strong)',

package/src/theme-provider.tsx

@@ -49,6 +49,7 @@ export const ThemeProvider = ( {
 	children,
 	color = {},
 	isRoot = false,
+	density,
 }: ThemeProviderProps ) => {
 	const instanceId = useId();
 
@@ -76,6 +77,7 @@ export const ThemeProvider = ( {
 			<div
 				data-wpds-theme-provider-id={ instanceId }
 				data-wpds-root-provider={ isRoot }
+				data-wpds-density={ density }
 				className={ styles.root }
 			>
 				<ThemeContext.Provider value={ contextValue }>