@wordpress/admin-ui 1.9.0 → 1.9.1-next.v.202603161435.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/page/header.cjs +37 -27
  2. package/build/page/header.cjs.map +3 -3
  3. package/build-module/page/header.mjs +37 -31
  4. package/build-module/page/header.mjs.map +2 -2
  5. package/build-style/style-rtl.css +68 -103
  6. package/build-style/style.css +68 -103
  7. package/build-types/page/header.d.ts.map +1 -1
  8. package/package.json +8 -7
  9. package/src/page/header.tsx +18 -16
  10. package/src/page/style.scss +23 -17
package/build/page/header.cjs CHANGED
@@ -23,7 +23,7 @@ __export(header_exports, {
23
23
  default: () => Header
24
24
  });
25
25
  module.exports = __toCommonJS(header_exports);
26
- var import_components = require("@wordpress/components");
26
+ var import_ui = require("@wordpress/ui");
27
27
  var import_sidebar_toggle_slot = require("./sidebar-toggle-slot.cjs");
28
28
  var import_jsx_runtime = require("react/jsx-runtime");
29
29
  function Header({
@@ -34,31 +34,41 @@ function Header({
34
34
  actions,
35
35
  showSidebarToggle = true
36
36
  }) {
37
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "admin-ui-page__header", as: "header", children: [
38
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", spacing: 2, children: [
39
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, justify: "left", children: [
40
- showSidebarToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
41
- import_sidebar_toggle_slot.SidebarToggleSlot,
42
- {
43
- bubblesVirtually: true,
44
- className: "admin-ui-page__sidebar-toggle-slot"
45
- }
46
- ),
47
- title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
48
- breadcrumbs,
49
- badges
50
- ] }),
51
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
- import_components.__experimentalHStack,
53
- {
54
- style: { width: "auto", flexShrink: 0 },
55
- spacing: 2,
56
- className: "admin-ui-page__header-actions",
57
- children: actions
58
- }
59
- )
60
- ] }),
61
- subTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
62
- ] });
37
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
38
+ import_ui.Stack,
39
+ {
40
+ direction: "column",
41
+ className: "admin-ui-page__header",
42
+ render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", {}),
43
+ children: [
44
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", justify: "space-between", gap: "sm", children: [
45
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", gap: "sm", align: "center", justify: "start", children: [
46
+ showSidebarToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
47
+ import_sidebar_toggle_slot.SidebarToggleSlot,
48
+ {
49
+ bubblesVirtually: true,
50
+ className: "admin-ui-page__sidebar-toggle-slot"
51
+ }
52
+ ),
53
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "admin-ui-page__header-title", children: title }),
54
+ breadcrumbs,
55
+ badges
56
+ ] }),
57
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
58
+ import_ui.Stack,
59
+ {
60
+ direction: "row",
61
+ gap: "sm",
62
+ style: { width: "auto", flexShrink: 0 },
63
+ className: "admin-ui-page__header-actions",
64
+ align: "center",
65
+ children: actions
66
+ }
67
+ )
68
+ ] }),
69
+ subTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
70
+ ]
71
+ }
72
+ );
63
73
  }
64
74
  //# sourceMappingURL=header.cjs.map
package/build/page/header.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/page/header.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack justify=\"space-between\" spacing={ 2 }>\n\t\t\t\t<HStack spacing={ 2 } justify=\"left\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AAKP,iCAAkC;AAoB9B;AAlBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA,iDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBAAgB,SAAU,GACzC;AAAA,mDAAC,kBAAAA,sBAAA,EAAO,SAAU,GAAI,SAAQ,QAC3B;AAAA,6BACD;AAAA,UAAC;AAAA;AAAA,YACA,kBAAgB;AAAA,YAChB,WAAU;AAAA;AAAA,QACX;AAAA,QAEC,SACD,4CAAC,kBAAAC,uBAAA,EAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,QAEC;AAAA,QACA;AAAA,SACH;AAAA,MACA;AAAA,QAAC,kBAAAD;AAAA,QAAA;AAAA,UACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,UACvC,SAAU;AAAA,UACV,WAAU;AAAA,UAER;AAAA;AAAA,MACH;AAAA,OACD;AAAA,IACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
6
- "names": ["VStack", "HStack", "Heading"]
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<h2 className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAsB;AAKtB,iCAAkC;AAqBtB;AAnBG,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,4CAAC,YAAO;AAAA,MAEjB;AAAA,qDAAC,mBAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,uDAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,4CAAC,QAAG,WAAU,+BACX,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
6
+ "names": []
7
7
  }
package/build-module/page/header.mjs CHANGED
@@ -1,9 +1,5 @@
1
1
  // packages/admin-ui/src/page/header.tsx
2
- import {
3
- __experimentalHeading as Heading,
4
- __experimentalHStack as HStack,
5
- __experimentalVStack as VStack
6
- } from "@wordpress/components";
2
+ import { Stack } from "@wordpress/ui";
7
3
  import { SidebarToggleSlot } from "./sidebar-toggle-slot.mjs";
8
4
  import { jsx, jsxs } from "react/jsx-runtime";
9
5
  function Header({
@@ -14,32 +10,42 @@ function Header({
14
10
  actions,
15
11
  showSidebarToggle = true
16
12
  }) {
17
- return /* @__PURE__ */ jsxs(VStack, { className: "admin-ui-page__header", as: "header", children: [
18
- /* @__PURE__ */ jsxs(HStack, { justify: "space-between", spacing: 2, children: [
19
- /* @__PURE__ */ jsxs(HStack, { spacing: 2, justify: "left", children: [
20
- showSidebarToggle && /* @__PURE__ */ jsx(
21
- SidebarToggleSlot,
22
- {
23
- bubblesVirtually: true,
24
- className: "admin-ui-page__sidebar-toggle-slot"
25
- }
26
- ),
27
- title && /* @__PURE__ */ jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
28
- breadcrumbs,
29
- badges
30
- ] }),
31
- /* @__PURE__ */ jsx(
32
- HStack,
33
- {
34
- style: { width: "auto", flexShrink: 0 },
35
- spacing: 2,
36
- className: "admin-ui-page__header-actions",
37
- children: actions
38
- }
39
- )
40
- ] }),
41
- subTitle && /* @__PURE__ */ jsx("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
42
- ] });
13
+ return /* @__PURE__ */ jsxs(
14
+ Stack,
15
+ {
16
+ direction: "column",
17
+ className: "admin-ui-page__header",
18
+ render: /* @__PURE__ */ jsx("header", {}),
19
+ children: [
20
+ /* @__PURE__ */ jsxs(Stack, { direction: "row", justify: "space-between", gap: "sm", children: [
21
+ /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "sm", align: "center", justify: "start", children: [
22
+ showSidebarToggle && /* @__PURE__ */ jsx(
23
+ SidebarToggleSlot,
24
+ {
25
+ bubblesVirtually: true,
26
+ className: "admin-ui-page__sidebar-toggle-slot"
27
+ }
28
+ ),
29
+ title && /* @__PURE__ */ jsx("h2", { className: "admin-ui-page__header-title", children: title }),
30
+ breadcrumbs,
31
+ badges
32
+ ] }),
33
+ /* @__PURE__ */ jsx(
34
+ Stack,
35
+ {
36
+ direction: "row",
37
+ gap: "sm",
38
+ style: { width: "auto", flexShrink: 0 },
39
+ className: "admin-ui-page__header-actions",
40
+ align: "center",
41
+ children: actions
42
+ }
43
+ )
44
+ ] }),
45
+ subTitle && /* @__PURE__ */ jsx("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
46
+ ]
47
+ }
48
+ );
43
49
  }
44
50
  export {
45
51
  Header as default
package/build-module/page/header.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/page/header.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack justify=\"space-between\" spacing={ 2 }>\n\t\t\t\t<HStack spacing={ 2 } justify=\"left\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
5
- "mappings": ";AAGA;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAKP,SAAS,yBAAyB;AAoB9B,SAEE,KAFF;AAlBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC,qBAAC,UAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA,yBAAC,UAAO,SAAQ,iBAAgB,SAAU,GACzC;AAAA,2BAAC,UAAO,SAAU,GAAI,SAAQ,QAC3B;AAAA,6BACD;AAAA,UAAC;AAAA;AAAA,YACA,kBAAgB;AAAA,YAChB,WAAU;AAAA;AAAA,QACX;AAAA,QAEC,SACD,oBAAC,WAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,QAEC;AAAA,QACA;AAAA,SACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,UACvC,SAAU;AAAA,UACV,WAAU;AAAA,UAER;AAAA;AAAA,MACH;AAAA,OACD;AAAA,IACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<h2 className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
5
+ "mappings": ";AAGA,SAAS,aAAa;AAKtB,SAAS,yBAAyB;AAqBtB,cAGR,YAHQ;AAnBG,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,oBAAC,YAAO;AAAA,MAEjB;AAAA,6BAAC,SAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,+BAAC,SAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,oBAAC,QAAG,WAAU,+BACX,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
6
6
  "names": []
7
7
  }
package/build-style/style-rtl.css CHANGED
@@ -1,97 +1,8 @@
1
- /**
2
- * Colors
3
- */
4
- /**
5
- * SCSS Variables.
6
- *
7
- * Please use variables from this sheet to ensure consistency across the UI.
8
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10
- */
11
- /**
12
- * Fonts & basic variables.
13
- */
14
- /**
15
- * Typography
16
- */
17
- /**
18
- * Grid System.
19
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
20
- */
21
- /**
22
- * Radius scale.
23
- */
24
- /**
25
- * Elevation scale.
26
- */
27
- /**
28
- * Dimensions.
29
- */
30
- /**
31
- * Mobile specific styles
32
- */
33
- /**
34
- * Editor styles.
35
- */
36
- /**
37
- * Block & Editor UI.
38
- */
39
- /**
40
- * Block paddings.
41
- */
42
- /**
43
- * React Native specific.
44
- * These variables do not appear to be used anywhere else.
45
- */
46
- /**
47
- * Typography
48
- */
49
- /**
50
- * Breakpoints & Media Queries
51
- */
52
- /**
53
- * Converts a hex value into the rgb equivalent.
54
- *
55
- * @param {string} hex - the hexadecimal value to convert
56
- * @return {string} comma separated rgb values
57
- */
58
- /**
59
- * Long content fade mixin
60
- *
61
- * Creates a fading overlay to signify that the content is longer
62
- * than the space allows.
63
- */
64
- /**
65
- * Breakpoint mixins
66
- */
67
- /**
68
- * Focus styles.
69
- */
70
- /**
71
- * Applies editor left position to the selector passed as argument
72
- */
73
- /**
74
- * Styles that are reused verbatim in a few places
75
- */
76
- /**
77
- * Allows users to opt-out of animations via OS-level preferences.
78
- */
79
- /**
80
- * Reset default styles for JavaScript UI based pages.
81
- * This is a WP-admin agnostic reset
82
- */
83
- /**
84
- * Reset the WP Admin page styles for Gutenberg-like pages.
85
- */
86
- /**
87
- * Creates a checkerboard pattern background to indicate transparency.
88
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89
- */
90
1
  .admin-ui-page {
91
2
  display: flex;
92
3
  height: 100%;
93
- background-color: #fff;
94
- color: #2f2f2f;
4
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
5
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
95
6
  position: relative;
96
7
  z-index: 1;
97
8
  flex-flow: column;
@@ -99,25 +10,34 @@
99
10
  }
100
11
 
101
12
  .admin-ui-page__header {
102
- padding: 16px 24px;
103
- border-bottom: 1px solid #f0f0f0;
104
- background: #fff;
13
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
14
+ border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
15
+ background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
105
16
  position: sticky;
106
17
  top: 0;
107
18
  z-index: 1;
108
19
  }
109
20
 
21
+ .admin-ui-page__header-title {
22
+ font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
23
+ font-size: var(--wpds-font-size-xl, 20px);
24
+ font-weight: var(--wpds-font-weight-medium, 499);
25
+ line-height: var(--wpds-font-line-height-xl, 32px);
26
+ margin: 0;
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ white-space: nowrap;
30
+ }
31
+
110
32
  .admin-ui-page__sidebar-toggle-slot:empty {
111
33
  display: none;
112
34
  }
113
35
 
114
36
  .admin-ui-page__header-subtitle {
115
- padding-block-end: 8px;
116
- color: #757575;
117
- font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
118
- font-weight: 400;
119
- font-size: 13px;
120
- line-height: 20px;
37
+ padding-block-end: var(--wpds-dimension-padding-xs, 4px);
38
+ color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
39
+ font-size: var(--wpds-font-size-md, 13px);
40
+ line-height: var(--wpds-font-line-height-md, 24px);
121
41
  margin: 0;
122
42
  }
123
43
 
@@ -128,21 +48,66 @@
128
48
  flex-direction: column;
129
49
  }
130
50
  .admin-ui-page__content.has-padding {
131
- padding: 16px 24px;
51
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
132
52
  }
133
53
 
134
54
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
135
55
  width: auto;
136
- padding: 0 8px;
56
+ padding: 0 var(--wpds-dimension-padding-xs, 4px);
137
57
  }
138
58
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
139
59
  display: none;
140
60
  }
141
61
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
142
62
  content: attr(aria-label);
143
- font-size: 12px;
63
+ font-size: var(--wpds-font-size-sm, 12px);
144
64
  }
145
65
 
66
+ /**
67
+ * SCSS Variables.
68
+ *
69
+ * Please use variables from this sheet to ensure consistency across the UI.
70
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
71
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
72
+ */
73
+ /**
74
+ * Colors
75
+ */
76
+ /**
77
+ * Fonts & basic variables.
78
+ */
79
+ /**
80
+ * Typography
81
+ */
82
+ /**
83
+ * Grid System.
84
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
85
+ */
86
+ /**
87
+ * Radius scale.
88
+ */
89
+ /**
90
+ * Elevation scale.
91
+ */
92
+ /**
93
+ * Dimensions.
94
+ */
95
+ /**
96
+ * Mobile specific styles
97
+ */
98
+ /**
99
+ * Editor styles.
100
+ */
101
+ /**
102
+ * Block & Editor UI.
103
+ */
104
+ /**
105
+ * Block paddings.
106
+ */
107
+ /**
108
+ * React Native specific.
109
+ * These variables do not appear to be used anywhere else.
110
+ */
146
111
  .admin-ui-breadcrumbs__list {
147
112
  list-style: none;
148
113
  padding: 0;
package/build-style/style.css CHANGED
@@ -1,97 +1,8 @@
1
- /**
2
- * Colors
3
- */
4
- /**
5
- * SCSS Variables.
6
- *
7
- * Please use variables from this sheet to ensure consistency across the UI.
8
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10
- */
11
- /**
12
- * Fonts & basic variables.
13
- */
14
- /**
15
- * Typography
16
- */
17
- /**
18
- * Grid System.
19
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
20
- */
21
- /**
22
- * Radius scale.
23
- */
24
- /**
25
- * Elevation scale.
26
- */
27
- /**
28
- * Dimensions.
29
- */
30
- /**
31
- * Mobile specific styles
32
- */
33
- /**
34
- * Editor styles.
35
- */
36
- /**
37
- * Block & Editor UI.
38
- */
39
- /**
40
- * Block paddings.
41
- */
42
- /**
43
- * React Native specific.
44
- * These variables do not appear to be used anywhere else.
45
- */
46
- /**
47
- * Typography
48
- */
49
- /**
50
- * Breakpoints & Media Queries
51
- */
52
- /**
53
- * Converts a hex value into the rgb equivalent.
54
- *
55
- * @param {string} hex - the hexadecimal value to convert
56
- * @return {string} comma separated rgb values
57
- */
58
- /**
59
- * Long content fade mixin
60
- *
61
- * Creates a fading overlay to signify that the content is longer
62
- * than the space allows.
63
- */
64
- /**
65
- * Breakpoint mixins
66
- */
67
- /**
68
- * Focus styles.
69
- */
70
- /**
71
- * Applies editor left position to the selector passed as argument
72
- */
73
- /**
74
- * Styles that are reused verbatim in a few places
75
- */
76
- /**
77
- * Allows users to opt-out of animations via OS-level preferences.
78
- */
79
- /**
80
- * Reset default styles for JavaScript UI based pages.
81
- * This is a WP-admin agnostic reset
82
- */
83
- /**
84
- * Reset the WP Admin page styles for Gutenberg-like pages.
85
- */
86
- /**
87
- * Creates a checkerboard pattern background to indicate transparency.
88
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89
- */
90
1
  .admin-ui-page {
91
2
  display: flex;
92
3
  height: 100%;
93
- background-color: #fff;
94
- color: #2f2f2f;
4
+ background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
5
+ color: var(--wpds-color-fg-content-neutral, #1e1e1e);
95
6
  position: relative;
96
7
  z-index: 1;
97
8
  flex-flow: column;
@@ -99,25 +10,34 @@
99
10
  }
100
11
 
101
12
  .admin-ui-page__header {
102
- padding: 16px 24px;
103
- border-bottom: 1px solid #f0f0f0;
104
- background: #fff;
13
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
14
+ border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
15
+ background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
105
16
  position: sticky;
106
17
  top: 0;
107
18
  z-index: 1;
108
19
  }
109
20
 
21
+ .admin-ui-page__header-title {
22
+ font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
23
+ font-size: var(--wpds-font-size-xl, 20px);
24
+ font-weight: var(--wpds-font-weight-medium, 499);
25
+ line-height: var(--wpds-font-line-height-xl, 32px);
26
+ margin: 0;
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ white-space: nowrap;
30
+ }
31
+
110
32
  .admin-ui-page__sidebar-toggle-slot:empty {
111
33
  display: none;
112
34
  }
113
35
 
114
36
  .admin-ui-page__header-subtitle {
115
- padding-block-end: 8px;
116
- color: #757575;
117
- font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
118
- font-weight: 400;
119
- font-size: 13px;
120
- line-height: 20px;
37
+ padding-block-end: var(--wpds-dimension-padding-xs, 4px);
38
+ color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
39
+ font-size: var(--wpds-font-size-md, 13px);
40
+ line-height: var(--wpds-font-line-height-md, 24px);
121
41
  margin: 0;
122
42
  }
123
43
 
@@ -128,21 +48,66 @@
128
48
  flex-direction: column;
129
49
  }
130
50
  .admin-ui-page__content.has-padding {
131
- padding: 16px 24px;
51
+ padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
132
52
  }
133
53
 
134
54
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
135
55
  width: auto;
136
- padding: 0 8px;
56
+ padding: 0 var(--wpds-dimension-padding-xs, 4px);
137
57
  }
138
58
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
139
59
  display: none;
140
60
  }
141
61
  .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
142
62
  content: attr(aria-label);
143
- font-size: 12px;
63
+ font-size: var(--wpds-font-size-sm, 12px);
144
64
  }
145
65
 
66
+ /**
67
+ * SCSS Variables.
68
+ *
69
+ * Please use variables from this sheet to ensure consistency across the UI.
70
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
71
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
72
+ */
73
+ /**
74
+ * Colors
75
+ */
76
+ /**
77
+ * Fonts & basic variables.
78
+ */
79
+ /**
80
+ * Typography
81
+ */
82
+ /**
83
+ * Grid System.
84
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
85
+ */
86
+ /**
87
+ * Radius scale.
88
+ */
89
+ /**
90
+ * Elevation scale.
91
+ */
92
+ /**
93
+ * Dimensions.
94
+ */
95
+ /**
96
+ * Mobile specific styles
97
+ */
98
+ /**
99
+ * Editor styles.
100
+ */
101
+ /**
102
+ * Block & Editor UI.
103
+ */
104
+ /**
105
+ * Block paddings.
106
+ */
107
+ /**
108
+ * React Native specific.
109
+ * These variables do not appear to be used anywhere else.
110
+ */
146
111
  .admin-ui-breadcrumbs__list {
147
112
  list-style: none;
148
113
  padding: 0;
package/build-types/page/header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAgCA"}
1
+ {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAsCA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/admin-ui",
3
- "version": "1.9.0",
3
+ "version": "1.9.1-next.v.202603161435.0+ab4981c4f",
4
4
  "description": "Generic components to be used in the Admin UI.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -45,11 +45,12 @@
45
45
  "types": "build-types",
46
46
  "sideEffects": false,
47
47
  "dependencies": {
48
- "@wordpress/base-styles": "^6.17.0",
49
- "@wordpress/components": "^32.3.0",
50
- "@wordpress/element": "^6.41.0",
51
- "@wordpress/i18n": "^6.14.0",
52
- "@wordpress/route": "^0.7.0",
48
+ "@wordpress/base-styles": "^6.17.1-next.v.202603161435.0+ab4981c4f",
49
+ "@wordpress/components": "^32.4.1-next.v.202603161435.0+ab4981c4f",
50
+ "@wordpress/element": "^6.41.1-next.v.202603161435.0+ab4981c4f",
51
+ "@wordpress/i18n": "^6.14.1-next.v.202603161435.0+ab4981c4f",
52
+ "@wordpress/route": "^0.7.1-next.v.202603161435.0+ab4981c4f",
53
+ "@wordpress/ui": "^0.9.1-next.v.202603161435.0+ab4981c4f",
53
54
  "clsx": "^2.1.1"
54
55
  },
55
56
  "peerDependencies": {
@@ -58,5 +59,5 @@
58
59
  "publishConfig": {
59
60
  "access": "public"
60
61
  },
61
- "gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
62
+ "gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
62
63
  }
package/src/page/header.tsx CHANGED
@@ -1,11 +1,7 @@
1
1
  /**
2
2
  * WordPress dependencies
3
3
  */
4
- import {
5
- __experimentalHeading as Heading,
6
- __experimentalHStack as HStack,
7
- __experimentalVStack as VStack,
8
- } from '@wordpress/components';
4
+ import { Stack } from '@wordpress/ui';
9
5
 
10
6
  /**
11
7
  * Internal dependencies
@@ -28,9 +24,13 @@ export default function Header( {
28
24
  showSidebarToggle?: boolean;
29
25
  } ) {
30
26
  return (
31
- <VStack className="admin-ui-page__header" as="header">
32
- <HStack justify="space-between" spacing={ 2 }>
33
- <HStack spacing={ 2 } justify="left">
27
+ <Stack
28
+ direction="column"
29
+ className="admin-ui-page__header"
30
+ render={ <header /> }
31
+ >
32
+ <Stack direction="row" justify="space-between" gap="sm">
33
+ <Stack direction="row" gap="sm" align="center" justify="start">
34
34
  { showSidebarToggle && (
35
35
  <SidebarToggleSlot
36
36
  bubblesVirtually
@@ -38,24 +38,26 @@ export default function Header( {
38
38
  />
39
39
  ) }
40
40
  { title && (
41
- <Heading as="h2" level={ 3 } weight={ 500 } truncate>
41
+ <h2 className="admin-ui-page__header-title">
42
42
  { title }
43
- </Heading>
43
+ </h2>
44
44
  ) }
45
45
  { breadcrumbs }
46
46
  { badges }
47
- </HStack>
48
- <HStack
47
+ </Stack>
48
+ <Stack
49
+ direction="row"
50
+ gap="sm"
49
51
  style={ { width: 'auto', flexShrink: 0 } }
50
- spacing={ 2 }
51
52
  className="admin-ui-page__header-actions"
53
+ align="center"
52
54
  >
53
55
  { actions }
54
- </HStack>
55
- </HStack>
56
+ </Stack>
57
+ </Stack>
56
58
  { subTitle && (
57
59
  <p className="admin-ui-page__header-subtitle">{ subTitle }</p>
58
60
  ) }
59
- </VStack>
61
+ </Stack>
60
62
  );
61
63
  }
package/src/page/style.scss CHANGED
@@ -1,13 +1,8 @@
1
- @use "@wordpress/base-styles/colors" as *;
2
- @use "@wordpress/base-styles/variables" as *;
3
- @use "@wordpress/base-styles/mixins" as *;
4
- @use "@wordpress/base-styles/breakpoints" as *;
5
-
6
1
  .admin-ui-page {
7
2
  display: flex;
8
3
  height: 100%;
9
- background-color: $white;
10
- color: $gray-800;
4
+ background-color: var(--wpds-color-bg-surface-neutral-strong);
5
+ color: var(--wpds-color-fg-content-neutral);
11
6
  position: relative;
12
7
  z-index: 1;
13
8
  flex-flow: column;
@@ -15,22 +10,34 @@
15
10
  }
16
11
 
17
12
  .admin-ui-page__header {
18
- padding: $grid-unit-20 $grid-unit-30;
19
- border-bottom: 1px solid $gray-100;
20
- background: $white;
13
+ padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
14
+ border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
15
+ background: var(--wpds-color-bg-surface-neutral-strong);
21
16
  position: sticky;
22
17
  top: 0;
23
18
  z-index: 1;
24
19
  }
25
20
 
21
+ .admin-ui-page__header-title {
22
+ font-family: var(--wpds-font-family-heading);
23
+ font-size: var(--wpds-font-size-xl);
24
+ font-weight: var(--wpds-font-weight-medium);
25
+ line-height: var(--wpds-font-line-height-xl);
26
+ margin: 0;
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ white-space: nowrap;
30
+ }
31
+
26
32
  .admin-ui-page__sidebar-toggle-slot:empty {
27
33
  display: none;
28
34
  }
29
35
 
30
36
  .admin-ui-page__header-subtitle {
31
- padding-block-end: $grid-unit-10;
32
- color: $gray-700;
33
- @include body-medium();
37
+ padding-block-end: var(--wpds-dimension-padding-xs);
38
+ color: var(--wpds-color-fg-content-neutral-weak);
39
+ font-size: var(--wpds-font-size-md);
40
+ line-height: var(--wpds-font-line-height-md);
34
41
  margin: 0;
35
42
  }
36
43
 
@@ -41,7 +48,7 @@
41
48
  flex-direction: column;
42
49
 
43
50
  &.has-padding {
44
- padding: $grid-unit-20 $grid-unit-30;
51
+ padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
45
52
  }
46
53
  }
47
54
 
@@ -50,7 +57,7 @@
50
57
  .admin-ui-page__header-actions {
51
58
  .components-button.has-icon {
52
59
  width: auto;
53
- padding: 0 $grid-unit-10;
60
+ padding: 0 var(--wpds-dimension-padding-xs);
54
61
 
55
62
  // Hide the button icons when labels are set to display...
56
63
  svg {
@@ -59,9 +66,8 @@
59
66
  // ... and display labels.
60
67
  &::after {
61
68
  content: attr(aria-label);
62
- font-size: $helptext-font-size;
69
+ font-size: var(--wpds-font-size-sm);
63
70
  }
64
71
  }
65
-
66
72
  }
67
73
  }