@guardian/stand 0.0.6 → 0.0.7

package/README.md

@@ -116,15 +116,21 @@ import { css } from '@emotion/react';
 import { semanticColors } from '@guardian/stand'; // JS/TS usage
 import '@guardian/stand/semantic/colors.css'; // CSS usage
 
-const style = css`
+const stringStyle = css`
 	color: ${semanticColors.text.primary}; /* JS/TS usage */
 	background-color: var(
 		--semantic-colors-bg-default-on-light
 	); /* CSS usage */
 `;
+
+const objectStyle = {
+	color: semanticColors.text.primary /* JS/TS usage */,
+	backgroundColor:
+		'var(--semantic-colors-bg-default-on-light)' /* CSS usage */,
+};
 ```
 
-For a list of available semantic color styles see the [Storybook Semantic Colors](https://68c12e3ed577cb56abfd31bf-ktzjjbdtby.chromatic.com/?path=/docs/stand-editorial-design-system-semantic-color-palette--docs) section.
+For a list of available semantic color styles see the [Storybook Semantic Colors](https://68c12e3ed577cb56abfd31bf-kggeezequd.chromatic.com/?path=/docs/stand-editorial-design-system-semantic-color-palette--docs) section.
 
 For a full list of CSS Semantic Color tokens see [`semantic/colors.css`](./src/styleD/build/css/semantic/colors.css).
 
@@ -133,26 +139,48 @@ For a full list of CSS Semantic Color tokens see [`semantic/colors.css`](./src/s
 ```ts
 import { css } from '@emotion/react';
 import {
+	semanticColors,
 	semanticTypography,
-	convertTypographyToEmotion, // helper function to convert from typography token object to emotion CSS
+	convertTypographyToEmotionObjectStyle, // helper function to convert from typography token object to emotion CSS object style
+	convertTypographyToEmotionStringStyle, // helper function to convert from typography token object to emotion CSS string style
 } from '@guardian/stand'; // JS/TS usage
 import '@guardian/stand/semantic/typography.css'; // CSS usage
 
-const styleJS = css`
-	/* JS/TS usage */
-	${convertTypographyToEmotion(semanticTypography['body-compact-md'])}
+/* JS/TS usage */
+const stringStyleJS = css`
+	${convertTypographyToEmotionStringStyle(
+		semanticTypography['body-compact-md'],
+	)}
 `;
+const objectStyleJS = {
+	// other styles e.g.
+	color: semanticColors.text.primary,
+
+	// typography styles
+	...convertTypographyToEmotionObjectStyle(
+		semanticTypography['body-compact-sm'],
+	),
+};
 
-const styleCSS = css`
+/* CSS usage */
+const stringStyleCSS = css`
 	/* CSS usage */
 	font: var(--semantic-typography-body-compact-sm-font);
 	letter-spacing: var(--semantic-typography-body-compact-sm-letter-spacing);
 	font-variation-settings: 'wdth'
 		var(--semantic-typography-body-compact-sm-font-width);
 `;
+const objectStyleCSS = {
+	fontFamily: 'var(--semantic-typography-body-compact-sm-font-family)',
+	fontWeight: 'var(--semantic-typography-body-compact-sm-font-weight)',
+	fontSize: 'var(--semantic-typography-body-compact-sm-font-size)',
+	lineHeight: 'var(--semantic-typography-body-compact-sm-line-height)',
+	letterSpacing: 'var(--semantic-typography-body-compact-sm-letter-spacing)',
+	fontVariationSettings: `'wdth' var(--semantic-typography-body-compact-sm-font-variation-settings)`,
+};
 ```
 
-For a list of available typography styles see the [Storybook Semantic Typography](https://68c12e3ed577cb56abfd31bf-ktzjjbdtby.chromatic.com/?path=/docs/stand-editorial-design-system-semantic-typography--docs) section.
+For a list of available typography styles see the [Storybook Semantic Typography](https://68c12e3ed577cb56abfd31bf-kggeezequd.chromatic.com/?path=/docs/stand-editorial-design-system-semantic-typography--docs) section.
 
 For a full list of CSS Semantic Typography tokens see [`semantic/typography.css`](./src/styleD/build/css/semantic/typography.css).
 
@@ -165,13 +193,18 @@ import { css } from '@emotion/react';
 import { baseColors } from '@guardian/stand'; // JS/TS usage
 import '@guardian/stand/base/colors.css'; // CSS usage
 
-const style = css`
+const stringStyle = css`
 	color: ${baseColors.neutral['900']}; /* JS/TS usage */
 	background-color: var(--base-colors-blue-500); /* CSS usage */
 `;
+
+const objectStyle = {
+	color: baseColors.neutral['900'] /* JS/TS usage */,
+	backgroundColor: 'var(--base-colors-blue-500)' /* CSS usage */,
+};
 ```
 
-For a list of the available base/primitives color styles see the [Storybook Base Colors](https://68c12e3ed577cb56abfd31bf-ktzjjbdtby.chromatic.com/?path=/docs/stand-editorial-design-system-base-color-palette--docs) section.
+For a list of the available base/primitives color styles see the [Storybook Base Colors](https://68c12e3ed577cb56abfd31bf-kggeezequd.chromatic.com/?path=/docs/stand-editorial-design-system-base-color-palette--docs) section.
 
 For a full list of CSS Base/Primitives Color tokens see [`base/colors.css`](./src/styleD/build/css/base/colors.css).
 
@@ -182,19 +215,28 @@ import { css } from '@emotion/react';
 import { baseTypography } from '@guardian/stand'; // JS/TS usage
 import '@guardian/stand/base/typography.css'; // CSS usage
 
-const styleJs = css`
-	/* JS/TS usage */
+/* JS/TS usage */
+const stringStyleJS = css`
 	font-family: ${baseTypography.family['Open Sans']};
 	font-size: ${baseTypography.size['14-px']};
 	font-weight: ${baseTypography.weight['Open Sans'].normal};
 	font-variation-settings: 'wdth' ${baseTypography.width['Open Sans']};
-	font-style: ${baseTypography.style.normal};
+	style: ${baseTypography.style.normal};
 	line-height: ${baseTypography.lineHeight.normal};
 	letter-spacing: ${baseTypography.letterSpacing['default-px']};
 `;
+const objectStyleJS = {
+	fontFamily: baseTypography.family['Open Sans'],
+	fontSize: baseTypography.size['14-px'],
+	fontWeight: baseTypography.weight['Open Sans'].normal,
+	fontVariationSettings: `'wdth' ${baseTypography.width['Open Sans']}`,
+	fontStyle: baseTypography.style.normal,
+	lineHeight: baseTypography.lineHeight.normal,
+	letterSpacing: baseTypography.letterSpacing['default-px'],
+};
 
-const styleCss = css`
-	/* CSS usage */
+/* CSS usage */
+const stringStyleCSS = css`
 	font-family: var(--base-typography-family-open-sans);
 	font-size: var(--base-typography-size-14-px);
 	font-weight: var(--base-typography-weight-open-sans-normal);
@@ -203,9 +245,18 @@ const styleCss = css`
 	line-height: var(--base-typography-line-height-normal);
 	letter-spacing: var(--base-typography-letter-spacing-default-px);
 `;
+const objectStyleCSS = {
+	fontFamily: 'var(--base-typography-family-open-sans)',
+	fontSize: 'var(--base-typography-size-14-px)',
+	fontWeight: 'var(--base-typography-weight-open-sans-normal)',
+	fontVariationSettings: `'wdth' var(--base-typography-width-open-sans)`,
+	fontStyle: 'var(--base-typography-style-normal)',
+	lineHeight: 'var(--base-typography-line-height-normal)',
+	letterSpacing: 'var(--base-typography-letter-spacing-default-px)',
+};
 ```
 
-For a list of the available base/primitives typography tokens see the [Storybook Base Typography](https://68c12e3ed577cb56abfd31bf-ktzjjbdtby.chromatic.com/?path=/docs/stand-editorial-design-system-base-typography--docs) section.
+For a list of the available base/primitives typography tokens see the [Storybook Base Typography](https://68c12e3ed577cb56abfd31bf-kggeezequd.chromatic.com/?path=/docs/stand-editorial-design-system-base-typography--docs) section.
 
 For a full list of CSS Base/Primitives Typography tokens see [`base/typography.css`](./src/styleD/build/css/base/typography.css).
 

package/dist/index.cjs

@@ -18,4 +18,5 @@ exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
 exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$1.semanticTypography;
-exports.convertTypographyToEmotion = typography$2.convertTypographyToEmotion;
+exports.convertTypographyToEmotionObjectStyle = typography$2.convertTypographyToEmotionObjectStyle;
+exports.convertTypographyToEmotionStringStyle = typography$2.convertTypographyToEmotionStringStyle;

package/dist/index.js

@@ -5,4 +5,4 @@ export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
-export { convertTypographyToEmotion } from './styleD/utils/semantic/typography.js';
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';

package/dist/styleD/utils/semantic/typography.cjs

@@ -2,7 +2,7 @@
 
 var react = require('@emotion/react');
 
-const convertTypographyToEmotion = (typography) => {
+const convertTypographyToEmotionStringStyle = (typography) => {
   return react.css`
 		font-family: ${typography.font.fontFamily};
 		font-weight: ${typography.font.fontWeight};
@@ -13,5 +13,17 @@ const convertTypographyToEmotion = (typography) => {
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
+const convertTypographyToEmotionObjectStyle = (typography) => {
+  return {
+    fontFamily: typography.font.fontFamily,
+    fontWeight: typography.font.fontWeight,
+    fontSize: typography.font.fontSize,
+    fontStyle: typography.font.fontStyle,
+    lineHeight: typography.font.lineHeight,
+    letterSpacing: typography.letterSpacing,
+    fontVariationSettings: `"wdth" ${typography.fontWidth}`
+  };
+};
 
-exports.convertTypographyToEmotion = convertTypographyToEmotion;
+exports.convertTypographyToEmotionObjectStyle = convertTypographyToEmotionObjectStyle;
+exports.convertTypographyToEmotionStringStyle = convertTypographyToEmotionStringStyle;

package/dist/styleD/utils/semantic/typography.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-const convertTypographyToEmotion = (typography) => {
+const convertTypographyToEmotionStringStyle = (typography) => {
   return css`
 		font-family: ${typography.font.fontFamily};
 		font-weight: ${typography.font.fontWeight};
@@ -11,5 +11,16 @@ const convertTypographyToEmotion = (typography) => {
 		font-variation-settings: \"wdth\" ${typography.fontWidth};
 	`;
 };
+const convertTypographyToEmotionObjectStyle = (typography) => {
+  return {
+    fontFamily: typography.font.fontFamily,
+    fontWeight: typography.font.fontWeight,
+    fontSize: typography.font.fontSize,
+    fontStyle: typography.font.fontStyle,
+    lineHeight: typography.font.lineHeight,
+    letterSpacing: typography.letterSpacing,
+    fontVariationSettings: `"wdth" ${typography.fontWidth}`
+  };
+};
 
-export { convertTypographyToEmotion };
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle };

package/dist/types/index.d.ts

@@ -23,4 +23,4 @@ export type { SemanticTypography } from './styleD/build/typescript/semantic/typo
 /**
  * utils exports
  */
-export { convertTypographyToEmotion } from './styleD/utils/semantic/typography';
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';

package/dist/types/styleD/utils/semantic/typography.d.ts

@@ -1,4 +1,4 @@
-import type { SerializedStyles } from '@emotion/react';
+import type { CSSObject, SerializedStyles } from '@emotion/react';
 type SemanticTypography = {
     font: {
         fontFamily: string;
@@ -11,5 +11,6 @@ type SemanticTypography = {
     letterSpacing: string;
     fontWidth: number;
 };
-export declare const convertTypographyToEmotion: (typography: SemanticTypography) => SerializedStyles;
+export declare const convertTypographyToEmotionStringStyle: (typography: SemanticTypography) => SerializedStyles;
+export declare const convertTypographyToEmotionObjectStyle: (typography: SemanticTypography) => CSSObject;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "exports": {
     ".": {
@@ -41,6 +41,7 @@
     "@storybook/addon-themes": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
     "@terrazzo/cli": "^0.10.5",
+    "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "30.0.0",
     "@types/node": "^24.10.1",
     "@types/react": "17.0.76",