@wordpress/boot 0.15.1 → 0.16.0

package/src/components/navigation/navigation-screen/style.scss

@@ -6,7 +6,7 @@
 }
 
 .boot-navigation-screen .components-text {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 }
 
 .boot-navigation-screen__title-icon {
@@ -24,7 +24,7 @@
 	&#{&},
 	&#{&} .boot-navigation-screen__title {
 		line-height: variables.$font-line-height-x-large;
-		color: var(--wpds-color-fg-content-neutral);
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 }
 

package/src/components/root/index.tsx

@@ -19,9 +19,8 @@ import { menu } from '@wordpress/icons';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Page, getAdminThemeColors } from '@wordpress/admin-ui';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -35,7 +34,6 @@ import type { CanvasData } from '../../store/types';
 import './style.scss';
 
 const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();

package/src/components/root/single-page.tsx

@@ -11,7 +11,7 @@ import { SnackbarNotices } from '@wordpress/notices';
 import { SlotFillProvider } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { getAdminThemeColors } from '@wordpress/admin-ui';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -24,7 +24,6 @@ import './style.scss';
 import useRouteTitle from '../app/use-route-title';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
  * Root component for single page mode (no sidebar).

package/src/components/root/style.scss

@@ -6,9 +6,9 @@
 	width: 100%;
 	display: flex;
 	flex-direction: row;
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	isolation: isolate;
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 }
 
 .boot-layout__sidebar-backdrop {
@@ -36,7 +36,7 @@
 		inset-inline-start: 0;
 		width: 300px;
 		max-width: 85vw;
-		background: var(--wpds-color-bg-surface-neutral-weak);
+		background: var(--wpds-color-background-surface-neutral-weak);
 		z-index: 100003;
 		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
 	}
@@ -53,7 +53,7 @@
 	}
 
 	z-index: 3;
-	background: var(--wpds-color-bg-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
 	padding: variables.$grid-unit-20;
 	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	display: flex;
@@ -86,8 +86,8 @@
 .boot-layout__inspector {
 	flex: 1;
 	overflow-y: auto;
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	position: relative;
 
 	// Mobile-first: surfaces take full screen with fixed positioning
@@ -111,7 +111,7 @@
 		position: static;
 		width: auto;
 		height: auto;
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		margin: 0;
 
 		.boot-layout--single-page & {
@@ -139,8 +139,8 @@
 .boot-layout__canvas {
 	flex: 1;
 	overflow-y: auto;
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	position: relative;
@@ -167,7 +167,7 @@
 		position: static;
 		width: auto;
 		height: auto;
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		z-index: auto;
 
 		.boot-layout--single-page & {

package/src/components/save-button/index.tsx

@@ -9,7 +9,6 @@ import { displayShortcut, rawShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 import { EntitiesSavedStates } from '@wordpress/editor';
 import { Button, Modal } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/site-hub/style.scss

@@ -3,7 +3,7 @@
 .boot-site-hub {
 	position: sticky;
 	top: 0;
-	background-color: var(--wpds-color-bg-surface-neutral-weak);
+	background-color: var(--wpds-color-background-surface-neutral-weak);
 	z-index: 1;
 	display: grid;
 	grid-template-columns: 60px 1fr auto;
@@ -46,13 +46,13 @@
 	&:focus:not(:active) {
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 		outline-offset: calc(-1 * var(--wpds-border-width-focus));
 	}
 }
 
 .boot-site-hub__title-text {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	font-size: variables.$font-size-medium;
 	font-weight: variables.$font-weight-medium;
 	overflow: hidden;
@@ -61,7 +61,7 @@
 }
 
 .boot-site-hub__url {
-	color: var(--wpds-color-fg-content-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	font-size: variables.$font-size-small;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/components/site-icon/style.scss

@@ -7,7 +7,7 @@
 .boot-site-icon__icon {
 	width: variables.$grid-unit-40;
 	height: variables.$grid-unit-40;
-	fill: var(--wpds-color-fg-content-neutral);
+	fill: var(--wpds-color-foreground-content-neutral);
 }
 
 .boot-site-icon__image {

package/src/components/site-icon-link/index.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { Link, privateApis as routePrivateApis } from '@wordpress/route';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/site-icon-link/style.scss

@@ -8,7 +8,7 @@ $header-height: variables.$header-height;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 	text-decoration: none;
 
 	@media not (prefers-reduced-motion) {
@@ -18,7 +18,7 @@ $header-height: variables.$header-height;
 	&:focus:not(:active) {
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 		outline-offset: calc(-1 * var(--wpds-border-width-focus));
 	}
 }

package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss}

@@ -1,4 +1,4 @@
-// Styles for the experimental admin bar in editor.
+// Styles for the experimental omnibar.
 
 body.has-admin-bar-in-editor {
 	#wpadminbar {

package/src/style.scss

@@ -1,7 +1,7 @@
 @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "./experimental-admin-bar-in-editor.scss" as *;
+@use "./experimental-omnibar.scss" as *;
 
 .boot-layout-container .boot-layout {
 	// On mobile the main content area has to scroll, otherwise you can invoke

package/src/view-transitions.scss

@@ -106,7 +106,7 @@
 ::view-transition-new(boot--inspector),
 ::view-transition-old(boot--inspector) {
 	background: colors.$white;
-	border-radius: 8px;
+	border-radius: var(--wpds-border-radius-xl);
 	width: 100%;
 	height: 100%;
 	object-fit: none;

package/build-types/components/user-theme-provider/index.d.ts

@@ -1,6 +0,0 @@
-import { type ThemeProvider as ThemeProviderType } from '@wordpress/theme';
-declare const ThemeProvider: typeof ThemeProviderType;
-export declare function getAdminThemePrimaryColor(): string | undefined;
-export declare function UserThemeProvider({ color, ...restProps }: React.ComponentProps<typeof ThemeProvider>): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/build-types/components/user-theme-provider/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/user-theme-provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,aAAa,IAAI,iBAAiB,EAEvC,MAAM,kBAAkB,CAAC;AAG1B,QAAA,MAAM,aAAa,EAAE,OAAO,iBACa,CAAC;AAa1C,wBAAgB,yBAAyB,IAAI,MAAM,GAAG,SAAS,CAK9D;AAED,wBAAgB,iBAAiB,CAAE,EAClC,KAAK,EACL,GAAG,SAAS,EACZ,EAAE,KAAK,CAAC,cAAc,CAAE,OAAO,aAAa,CAAE,+BAI9C"}