@wordpress/boot 0.15.0 → 0.15.2-next.v.202606191442.0

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,12 +2,13 @@
  * WordPress dependencies
  */
 import { Link, privateApis as routePrivateApis } from '@wordpress/route';
-import { Tooltip as WCTooltip } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+
 import SiteIcon from '../site-icon';
 import './style.scss';
 
@@ -26,23 +27,30 @@ function SiteIconLink( {
 	const canGoBack = useCanGoBack();
 
 	return (
-		<WCTooltip text={ props[ 'aria-label' ] } placement="right">
-			<Link
-				to={ to }
-				aria-label={ props[ 'aria-label' ] }
-				className="boot-site-icon-link"
-				onClick={ ( event ) => {
-					// If possible, restore the previous page with
-					// filters etc.
-					if ( canGoBack && isBackButton ) {
-						event.preventDefault();
-						router.history.back();
-					}
-				} }
-			>
-				<SiteIcon />
-			</Link>
-		</WCTooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<Link
+						to={ to }
+						aria-label={ props[ 'aria-label' ] }
+						className="boot-site-icon-link"
+						onClick={ ( event ) => {
+							// If possible, restore the previous page with
+							// filters etc.
+							if ( canGoBack && isBackButton ) {
+								event.preventDefault();
+								router.history.back();
+							}
+						} }
+					>
+						<SiteIcon />
+					</Link>
+				}
+			/>
+			<Tooltip.Popup positioner={ <Tooltip.Positioner side="right" /> }>
+				{ props[ 'aria-label' ] }
+			</Tooltip.Popup>
+		</Tooltip.Root>
 	);
 }
 

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-module/components/user-theme-provider/index.mjs

@@ -1,33 +0,0 @@
-// packages/boot/src/components/user-theme-provider/index.tsx
-import {
-  privateApis as themePrivateApis
-} from "@wordpress/theme";
-import { unlock } from "../../lock-unlock.mjs";
-import { jsx } from "react/jsx-runtime";
-var ThemeProvider = unlock(themePrivateApis).ThemeProvider;
-var THEME_PRIMARY_COLORS = /* @__PURE__ */ new Map([
-  ["light", "#0085ba"],
-  ["modern", "#3858e9"],
-  ["blue", "#096484"],
-  ["coffee", "#46403c"],
-  ["ectoplasm", "#523f6d"],
-  ["midnight", "#e14d43"],
-  ["ocean", "#627c83"],
-  ["sunrise", "#dd823b"]
-]);
-function getAdminThemePrimaryColor() {
-  const theme = document.body.className.match(/admin-color-([a-z]+)/)?.[1];
-  return theme && THEME_PRIMARY_COLORS.get(theme);
-}
-function UserThemeProvider({
-  color,
-  ...restProps
-}) {
-  const primary = getAdminThemePrimaryColor();
-  return /* @__PURE__ */ jsx(ThemeProvider, { ...restProps, color: { primary, ...color } });
-}
-export {
-  UserThemeProvider,
-  getAdminThemePrimaryColor
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/components/user-theme-provider/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/user-theme-provider/index.tsx"],
-  "sourcesContent": ["import {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../../lock-unlock';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst THEME_PRIMARY_COLORS = new Map< string, string >( [\n\t[ 'light', '#0085ba' ],\n\t[ 'modern', '#3858e9' ],\n\t[ 'blue', '#096484' ],\n\t[ 'coffee', '#46403c' ],\n\t[ 'ectoplasm', '#523f6d' ],\n\t[ 'midnight', '#e14d43' ],\n\t[ 'ocean', '#627c83' ],\n\t[ 'sunrise', '#dd823b' ],\n] );\n\nexport function getAdminThemePrimaryColor(): string | undefined {\n\tconst theme =\n\t\tdocument.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ];\n\n\treturn theme && THEME_PRIMARY_COLORS.get( theme );\n}\n\nexport function UserThemeProvider( {\n\tcolor,\n\t...restProps\n}: React.ComponentProps< typeof ThemeProvider > ) {\n\tconst primary = getAdminThemePrimaryColor();\n\n\treturn <ThemeProvider { ...restProps } color={ { primary, ...color } } />;\n}\n"],
-  "mappings": ";AAAA;AAAA,EAEC,eAAe;AAAA,OACT;AACP,SAAS,cAAc;AA6Bf;AA3BR,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAE5B,IAAM,uBAAuB,oBAAI,IAAuB;AAAA,EACvD,CAAE,SAAS,SAAU;AAAA,EACrB,CAAE,UAAU,SAAU;AAAA,EACtB,CAAE,QAAQ,SAAU;AAAA,EACpB,CAAE,UAAU,SAAU;AAAA,EACtB,CAAE,aAAa,SAAU;AAAA,EACzB,CAAE,YAAY,SAAU;AAAA,EACxB,CAAE,SAAS,SAAU;AAAA,EACrB,CAAE,WAAW,SAAU;AACxB,CAAE;AAEK,SAAS,4BAAgD;AAC/D,QAAM,QACL,SAAS,KAAK,UAAU,MAAO,sBAAuB,IAAK,CAAE;AAE9D,SAAO,SAAS,qBAAqB,IAAK,KAAM;AACjD;AAEO,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA,GAAG;AACJ,GAAkD;AACjD,QAAM,UAAU,0BAA0B;AAE1C,SAAO,oBAAC,iBAAgB,GAAG,WAAY,OAAQ,EAAE,SAAS,GAAG,MAAM,GAAI;AACxE;",
-  "names": []
-}

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"}

package/src/components/user-theme-provider/index.tsx

@@ -1,35 +0,0 @@
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../../lock-unlock';
-
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
-const THEME_PRIMARY_COLORS = new Map< string, string >( [
-	[ 'light', '#0085ba' ],
-	[ 'modern', '#3858e9' ],
-	[ 'blue', '#096484' ],
-	[ 'coffee', '#46403c' ],
-	[ 'ectoplasm', '#523f6d' ],
-	[ 'midnight', '#e14d43' ],
-	[ 'ocean', '#627c83' ],
-	[ 'sunrise', '#dd823b' ],
-] );
-
-export function getAdminThemePrimaryColor(): string | undefined {
-	const theme =
-		document.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ];
-
-	return theme && THEME_PRIMARY_COLORS.get( theme );
-}
-
-export function UserThemeProvider( {
-	color,
-	...restProps
-}: React.ComponentProps< typeof ThemeProvider > ) {
-	const primary = getAdminThemePrimaryColor();
-
-	return <ThemeProvider { ...restProps } color={ { primary, ...color } } />;
-}

package/src/components/user-theme-provider/test/index.test.ts

@@ -1,11 +0,0 @@
-import { getAdminThemePrimaryColor } from '../index';
-
-describe( 'getAdminThemePrimaryColor', () => {
-	it( 'should return the primary color for the admin theme from the body class', () => {
-		document.body.className = 'foo admin-color-coffee bar';
-
-		const primaryColor = getAdminThemePrimaryColor();
-
-		expect( primaryColor ).toBe( '#46403c' );
-	} );
-} );