@guardian/stand 0.0.24 → 0.0.25

package/dist/components/menu/styles.cjs

@@ -74,7 +74,6 @@ const menuItemLabelStyles = (theme) => react.css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => react.css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/menu/styles.js

@@ -72,7 +72,6 @@ const menuItemLabelStyles = (theme) => css`
 	grid-area: ${theme.shared.label["grid-area"]};
 	color: ${theme.shared.label.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
-	)}
 `;
 const menuItemDescriptionStyles = (theme) => css`
 	grid-area: ${theme.shared.description["grid-area"]};

package/dist/components/topbar/TopBar.cjs

@@ -11,7 +11,8 @@ var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
 
 function TopBarSide({
   children,
-  alignment
+  alignment,
+  theme
 }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
@@ -22,6 +23,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Item,
           alignment
         })
       );
@@ -30,6 +32,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
+          theme: theme?.Navigation,
           alignment
         })
       );
@@ -38,14 +41,16 @@ function TopBarSide({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
 }
 function TopBarContainerRight({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "right", theme, children });
 }
 function TopBarContainerLeft({
-  children
+  children,
+  theme
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({
   children,
@@ -64,16 +69,25 @@ function TopBar({
       return;
     }
     if (child.type === TopBarToolName.TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(
+        child,
+        { theme: mergedTheme.ToolName }
+      ));
     }
     if (child.type === Avatar.Avatar) {
-      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(
+        child,
+        { theme: mergedTheme }
+      ));
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/components/topbar/TopBar.js

@@ -7,7 +7,7 @@ import { TopBarItem } from './topBarItem/TopBarItem.js';
 import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
 import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
 
-function TopBarSide({ children, alignment }) {
+function TopBarSide({ children, alignment, theme }) {
   const items = [];
   React.Children.forEach(children, (child, i) => {
     if (!React.isValidElement(child)) {
@@ -16,23 +16,25 @@ function TopBarSide({ children, alignment }) {
     if (child.type === TopBarItem) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Item,
         alignment
       }));
     }
     if (child.type === TopBarNavigation) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
+        theme: theme?.Navigation,
         alignment
       }));
     }
   });
   return jsx(Fragment, { children: items });
 }
-function TopBarContainerRight({ children }) {
-  return jsx(TopBarSide, { alignment: "right", children });
+function TopBarContainerRight({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "right", theme, children });
 }
-function TopBarContainerLeft({ children }) {
-  return jsx(TopBarSide, { alignment: "left", children });
+function TopBarContainerLeft({ children, theme }) {
+  return jsx(TopBarSide, { alignment: "left", theme, children });
 }
 function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarTheme, theme);
@@ -45,16 +47,16 @@ function TopBar({ children, theme = {}, cssOverrides, className, ...props }) {
       return;
     }
     if (child.type === TopBarToolName) {
-      toolName ?? (toolName = child);
+      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName }));
     }
     if (child.type === Avatar) {
-      avatar ?? (avatar = jsx(TopBarItem, { alignment: "right", children: child }));
+      avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
-      leftSide ?? (leftSide = child);
+      leftSide ?? (leftSide = React.cloneElement(child, { theme: mergedTheme }));
     }
     if (child.type === TopBarContainerRight) {
-      rightSide ?? (rightSide = child);
+      rightSide ?? (rightSide = React.cloneElement(child, { theme: mergedTheme }));
     }
   });
   return jsxs("div", { css: [topBarStyles(mergedTheme), cssOverrides], className, ...props, children: [jsxs("div", { css: topBarContainerLeftStyles(mergedTheme), children: [toolName, leftSide] }), jsxs("div", { css: topBarContainerRightStyles(mergedTheme), children: [rightSide, avatar] })] });

package/dist/components/topbar/topBarToolName/styles.cjs

@@ -47,6 +47,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/components/topbar/topBarToolName/styles.js

@@ -45,6 +45,7 @@ const toolNameStyles = (theme) => {
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.gap};
+		color: ${theme.color};
 	`;
 };
 const toolNameTypography = (theme) => {

package/dist/styleD/build/css/component/TopBar.css

@@ -58,6 +58,7 @@
 	--component-top-bar-navigation-sm-typography-letter-spacing: -0.0125rem;
 	--component-top-bar-navigation-sm-typography-font-width: 95;
 	--component-top-bar-tool-name-display: flex;
+	--component-top-bar-tool-name-color: #000000;
 	--component-top-bar-tool-name-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15

package/dist/styleD/build/css/component/radioGroup.css

@@ -28,7 +28,7 @@
 	--component-radio-group-shared-indicator-disabled-border: 0.0625rem solid
 		#dcdcdc;
 	--component-radio-group-shared-indicator-selected-after-background-color: #005d8b;
-	--component-radio-group-shared-indicator-selected-after-scale: 0.6rem;
+	--component-radio-group-shared-indicator-selected-after-scale: 0.6;
 	--component-radio-group-shared-indicator-selected-border: 0.125rem solid
 		#0072a9;
 	--component-radio-group-shared-indicator-selected-invalid-border: 0.125rem

package/dist/styleD/build/typescript/component/TopBar.cjs

@@ -97,6 +97,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

package/dist/styleD/build/typescript/component/TopBar.js

@@ -95,6 +95,7 @@ const componentTopBar = {
   },
   ToolName: {
     display: "flex",
+    color: "#000000",
     "align-items": "center",
     gap: "8px",
     typography: {

package/dist/styleD/build/typescript/component/radioGroup.cjs

@@ -41,7 +41,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

package/dist/styleD/build/typescript/component/radioGroup.js

@@ -39,7 +39,7 @@ const componentRadioGroup = {
       selected: {
         after: {
           backgroundColor: "#005d8b",
-          scale: "0.6"
+          scale: 0.6
         },
         border: "0.125rem solid #0072a9",
         invalid: {

package/dist/types/components/avatar/styles.d.ts

@@ -3,7 +3,7 @@ import type { ComponentAvatar } from '../../styleD/build/typescript/component/av
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { AvatarProps } from './types';
 export type AvatarTheme = Prettify<ComponentAvatar>;
-export type PartialAvatarTheme = DeepPartial<AvatarTheme>;
+export type PartialAvatarTheme = Prettify<DeepPartial<AvatarTheme>>;
 export declare const defaultAvatarTheme: AvatarTheme;
 export declare const avatarImageStyles: SerializedStyles;
 export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

package/dist/types/components/button/styles.d.ts

@@ -3,6 +3,6 @@ import type { ComponentButton } from '../../styleD/build/typescript/component/bu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { ButtonProps } from './types';
 export type ButtonTheme = Prettify<ComponentButton>;
-export type PartialButtonTheme = DeepPartial<ButtonTheme>;
+export type PartialButtonTheme = Prettify<DeepPartial<ButtonTheme>>;
 export declare const defaultButtonTheme: ButtonTheme;
 export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

package/dist/types/components/byline/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../../util/types';
-export type PartialBylineTheme = DeepPartial<ComponentByline>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialBylineTheme = Prettify<DeepPartial<ComponentByline>>;

package/dist/types/components/checkbox/styles.d.ts

@@ -1,9 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentCheckbox } from '../../styleD/build/typescript/component/checkbox';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { CheckboxGroupProps, CheckboxProps } from './types';
 export type CheckboxTheme = Prettify<ComponentCheckbox>;
-export type PartialCheckboxTheme = Prettify<Partial<CheckboxTheme>>;
+export type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
 export declare const defaultCheckboxTheme: CheckboxTheme;
 export declare const checkboxStyles: (theme: CheckboxTheme, { size, isIndeterminate, }: Required<Pick<CheckboxProps, 'size' | 'isIndeterminate'>>) => SerializedStyles;
 export declare const checkboxLabelStyles: (theme: CheckboxTheme) => SerializedStyles;

package/dist/types/components/favicon/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type FaviconTheme = Prettify<ComponentFavicon>;
-export type PartialFaviconTheme = DeepPartial<FaviconTheme>;
+export type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;
 export declare const defaultFaviconTheme: FaviconTheme;
 export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
 export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;

package/dist/types/components/icon/styles.d.ts

@@ -2,7 +2,7 @@ import type { ComponentIcon } from '../../styleD/build/typescript/component/icon
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { IconProps } from './types';
 export type IconTheme = Prettify<ComponentIcon>;
-export type PartialIconTheme = DeepPartial<IconTheme>;
+export type PartialIconTheme = Prettify<DeepPartial<IconTheme>>;
 export declare const defaultIconTheme: IconTheme;
 export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
     mode: 'text' | 'svg';

package/dist/types/components/menu/styles.d.ts

@@ -3,15 +3,15 @@ import type { ComponentMenu } from '../../styleD/build/typescript/component/menu
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
 export type MenuTheme = Prettify<ComponentMenu['menu']>;
-export type PartialMenuTheme = DeepPartial<MenuTheme>;
+export type PartialMenuTheme = Prettify<DeepPartial<MenuTheme>>;
 export declare const defaultMenuTheme: MenuTheme;
 export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
 export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
-export type PartialMenuSectionTheme = DeepPartial<MenuSectionTheme>;
+export type PartialMenuSectionTheme = Prettify<DeepPartial<MenuSectionTheme>>;
 export declare const defaultMenuSectionTheme: MenuSectionTheme;
 export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
 export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
-export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
+export type PartialMenuItemTheme = Prettify<DeepPartial<MenuItemTheme>>;
 export declare const defaultMenuItemTheme: MenuItemTheme;
 export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>) => SerializedStyles;
 export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
@@ -19,10 +19,10 @@ export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedSt
 export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
 export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
 export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
-export type PartialMenuSeparatorTheme = DeepPartial<MenuSeparatorTheme>;
+export type PartialMenuSeparatorTheme = Prettify<DeepPartial<MenuSeparatorTheme>>;
 export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
 export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
 export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
-export type PartialMenuPopoverTheme = DeepPartial<MenuPopoverTheme>;
+export type PartialMenuPopoverTheme = Prettify<DeepPartial<MenuPopoverTheme>>;
 export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
 export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

package/dist/types/components/select/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type SelectTheme = Prettify<ComponentSelect>;
-export type PartialSelectTheme = DeepPartial<SelectTheme>;
+export type PartialSelectTheme = Prettify<DeepPartial<SelectTheme>>;
 export declare const defaultSelectTheme: SelectTheme;
 export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
 export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;

package/dist/types/components/topbar/TopBar.d.ts

@@ -1,8 +1,11 @@
+import type { TopBarTheme } from './styles';
 import type { TopBarProps } from './types';
-export declare function TopBarContainerRight({ children, }: {
+export declare function TopBarContainerRight({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TopBarContainerLeft({ children, }: {
+export declare function TopBarContainerLeft({ children, theme, }: {
     children: TopBarProps['children'];
+    theme?: TopBarTheme;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function TopBar({ children, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../util/types';
 export type TopBarTheme = Prettify<ComponentTopBar>;
-export type PartialTopBarTheme = DeepPartial<TopBarTheme>;
+export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
 export declare const defaultTopBarTheme: TopBarTheme;
 export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarContainerLeftStyles: (theme: TopBarTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/styles.d.ts

@@ -3,6 +3,6 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarItemProps } from './types';
 export type TopBarItemTheme = Prettify<ComponentTopBar['Item']>;
-export type PartialTopBarItemTheme = DeepPartial<TopBarItemTheme>;
+export type PartialTopBarItemTheme = Prettify<DeepPartial<TopBarItemTheme>>;
 export declare const defaultTopBarItemTheme: TopBarItemTheme;
 export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarNavigation/styles.d.ts

@@ -3,7 +3,7 @@ import type { ComponentTopBar } from '../../../styleD/build/typescript/component
 import type { DeepPartial, Prettify } from '../../../util/types';
 import type { TopBarNavigationProps } from './types';
 export type TopBarNavigationTheme = Prettify<ComponentTopBar['Navigation']>;
-export type PartialTopBarNavigationTheme = DeepPartial<TopBarNavigationTheme>;
+export type PartialTopBarNavigationTheme = Prettify<DeepPartial<TopBarNavigationTheme>>;
 export declare const defaultTopBarNavigationTheme: TopBarNavigationTheme;
 export declare const topBarNavigationStyles: (theme: TopBarNavigationTheme, selected: boolean) => SerializedStyles;
 export declare const topBarNavigationDividerStyles: (theme: TopBarNavigationTheme, { alignment }: Required<Pick<TopBarNavigationProps, 'alignment'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarToolName/styles.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
 import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
-export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
+export type PartialTopBarToolNameTheme = Prettify<DeepPartial<TopBarToolNameTheme>>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/typography/styles.d.ts

@@ -3,6 +3,6 @@ import { type ComponentTypography } from '../../styleD/build/typescript/componen
 import type { DeepPartial, Prettify } from '../../util/types';
 import type { TypographyProps } from './types';
 export type TypographyTheme = Prettify<ComponentTypography>;
-export type PartialTypographyTheme = DeepPartial<TypographyTheme>;
+export type PartialTypographyTheme = Prettify<DeepPartial<TypographyTheme>>;
 export declare const defaultTypographyTheme: TypographyTheme;
 export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/components/user-menu/theme.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
-import type { DeepPartial } from '../../util/types';
-export type PartialUserMenuTheme = DeepPartial<ComponentUserMenu>;
+import type { DeepPartial, Prettify } from '../../util/types';
+export type PartialUserMenuTheme = Prettify<DeepPartial<ComponentUserMenu>>;

package/dist/types/styleD/build/typescript/component/TopBar.d.ts

@@ -98,6 +98,7 @@ export declare const componentTopBar: {
     };
     ToolName: {
         display: string;
+        color: string;
         'align-items': string;
         gap: string;
         typography: {

package/dist/types/styleD/build/typescript/component/radioGroup.d.ts

@@ -42,7 +42,7 @@ export declare const componentRadioGroup: {
             selected: {
                 after: {
                     backgroundColor: string;
-                    scale: string;
+                    scale: number;
                 };
                 border: string;
                 invalid: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {