@guardian/stand 0.0.9 → 0.0.11

package/dist/components/user-menu/styles.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+var react = require('@emotion/react');
+var userMenu = require('../../styleD/build/typescript/component/userMenu.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+
+const userMenuStyles = (partialTheme = {}) => {
+  const { container } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		background-color: ${container.backgroundColor};
+		display: flex;
+		flex-direction: column;
+		width: ${container.width};
+		padding-left: ${container.paddingX};
+		padding-right: ${container.paddingX};
+		padding-top: ${container.paddingY};
+		padding-bottom: ${container.paddingY};
+	`;
+};
+const userMenuHeadingStyles = (partialTheme = {}) => {
+  const { heading } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${heading.fontWeight};
+		font-size: ${heading.fontSize};
+		text-align: ${heading.textAlign};
+		padding-left: ${heading.paddingLeft};
+		padding-right: ${heading.paddingRight};
+		padding-top: ${heading.paddingTop};
+		padding-bottom: ${heading.paddingBottom};
+	`;
+};
+const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: column;
+		gap: ${toggleButton.gap};
+	`;
+};
+const radioGroupLabelStyles = (partialTheme = {}) => {
+  const { label } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		font-weight: ${label.fontWeight};
+		font-size: ${label.fontSize};
+		text-align: ${label.textAlign};
+		padding-left: ${label.paddingLeft};
+		padding-right: ${label.paddingRight};
+		padding-top: ${label.paddingTop};
+		padding-bottom: ${label.paddingBottom};
+	`;
+};
+const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: ${toggleButton.gap};
+	`;
+};
+const toggleButtonStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep.mergeDeep(userMenu.componentUserMenu, partialTheme);
+  return react.css`
+		border-radius: 0;
+		border-style: solid;
+		border-color: ${toggleButton.baseBorderColor};
+		background-color: ${toggleButton.baseBackgroundColor};
+
+		&[data-disabled] {
+			background-color: ${toggleButton.disabledBackgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline-offset: 1px;
+			outline: 2px solid blue;
+		}
+
+		&[data-selected] {
+			border-color: ${toggleButton.selectedBorderColor};
+		}
+	`;
+};
+
+exports.radioGroupLabelStyles = radioGroupLabelStyles;
+exports.toggleButtonRowsGroupStyles = toggleButtonRowsGroupStyles;
+exports.toggleButtonStackedGroupStyles = toggleButtonStackedGroupStyles;
+exports.toggleButtonStyles = toggleButtonStyles;
+exports.userMenuHeadingStyles = userMenuHeadingStyles;
+exports.userMenuStyles = userMenuStyles;

package/dist/components/user-menu/styles.js

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+import { componentUserMenu } from '../../styleD/build/typescript/component/userMenu.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
+
+const userMenuStyles = (partialTheme = {}) => {
+  const { container } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		background-color: ${container.backgroundColor};
+		display: flex;
+		flex-direction: column;
+		width: ${container.width};
+		padding-left: ${container.paddingX};
+		padding-right: ${container.paddingX};
+		padding-top: ${container.paddingY};
+		padding-bottom: ${container.paddingY};
+	`;
+};
+const userMenuHeadingStyles = (partialTheme = {}) => {
+  const { heading } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		font-weight: ${heading.fontWeight};
+		font-size: ${heading.fontSize};
+		text-align: ${heading.textAlign};
+		padding-left: ${heading.paddingLeft};
+		padding-right: ${heading.paddingRight};
+		padding-top: ${heading.paddingTop};
+		padding-bottom: ${heading.paddingBottom};
+	`;
+};
+const toggleButtonStackedGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		display: flex;
+		flex-direction: column;
+		gap: ${toggleButton.gap};
+	`;
+};
+const radioGroupLabelStyles = (partialTheme = {}) => {
+  const { label } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		font-weight: ${label.fontWeight};
+		font-size: ${label.fontSize};
+		text-align: ${label.textAlign};
+		padding-left: ${label.paddingLeft};
+		padding-right: ${label.paddingRight};
+		padding-top: ${label.paddingTop};
+		padding-bottom: ${label.paddingBottom};
+	`;
+};
+const toggleButtonRowsGroupStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: ${toggleButton.gap};
+	`;
+};
+const toggleButtonStyles = (partialTheme = {}) => {
+  const { toggleButton } = mergeDeep(componentUserMenu, partialTheme);
+  return css`
+		border-radius: 0;
+		border-style: solid;
+		border-color: ${toggleButton.baseBorderColor};
+		background-color: ${toggleButton.baseBackgroundColor};
+
+		&[data-disabled] {
+			background-color: ${toggleButton.disabledBackgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline-offset: 1px;
+			outline: 2px solid blue;
+		}
+
+		&[data-selected] {
+			border-color: ${toggleButton.selectedBorderColor};
+		}
+	`;
+};
+
+export { radioGroupLabelStyles, toggleButtonRowsGroupStyles, toggleButtonStackedGroupStyles, toggleButtonStyles, userMenuHeadingStyles, userMenuStyles };

package/dist/fonts/MaterialSymbolsOutlined.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Outlined';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-outlined-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Outlined';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}

package/dist/fonts/MaterialSymbolsRound.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Round';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-round-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Round';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}

package/dist/fonts/MaterialSymbolsSharp.css

@@ -0,0 +1,23 @@
+@font-face {
+	font-family: 'Material Symbols Sharp';
+	font-style: normal;
+	font-weight: 400;
+	src: url(https://assets.guim.co.uk/fonts/material-symbols/material-symbols-sharp-20260218.woff2)
+		format('woff2');
+}
+
+.material-symbols {
+	font-family: 'Material Symbols Sharp';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+}