@guardian/stand 0.0.8 → 0.0.9

package/README.md

@@ -171,12 +171,11 @@ _Status: WIP_
 
 ```ts
 import { css } from '@emotion/react';
+import { semanticColors, semanticTypography } from '@guardian/stand'; // JS/TS usage
 import {
-	semanticColors,
-	semanticTypography,
 	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
+} from '@guardian/stand/utils'; // Utils for working with design tokens
 import '@guardian/stand/semantic/typography.css'; // CSS usage
 
 /* JS/TS usage */
@@ -464,6 +463,7 @@ A flexible byline editor component built in ProseMirror and React with usability
 
 You'll need to install the following peer dependencies in your project to use the `Byline` component:
 
+- `@emotion/react`
 - `@guardian/prosemirror-invisibles`
 - `prosemirror-dropcursor`
 - `prosemirror-history`
@@ -471,14 +471,19 @@ You'll need to install the following peer dependencies in your project to use th
 - `prosemirror-model`
 - `prosemirror-state`
 - `prosemirror-view`
+- `react`
+- `react-dom`
+- `typescript`
 
-See the `peerDependencies` section of `package.json` for compatible versions to install.
+See the `peerDependencies` section of `package.json` for compatible versions.
+
+**Note:** If you only need the built CSS (`@guardian/stand/component/byline.css`), you don't need to install these dependencies.
 
 #### Usage
 
 ```tsx
-import type { BylineModel } from '@guardian/stand';
-import { Byline } from '@guardian/stand';
+import type { BylineModel } from '@guardian/stand/byline';
+import { Byline } from '@guardian/stand/byline';
 
 const Component = () => {
     const bylineModel: BylineModel = {
@@ -518,9 +523,15 @@ autocomplete input for selecting tags from a list of options, based on the [Reac
 
 **Peer dependencies:**
 
+- `@emotion/react`
+- `react`
 - `react-aria-components`
+- `react-dom`
+- `typescript`
+
+See the `peerDependencies` section of `package.json` for compatible versions.
 
-See the `peerDependencies` section of the `package.json` for compatible versions to install.
+**Note:** If you only need the built CSS (`@guardian/stand/component/tagAutocomplete.css`), you don't need to install these dependencies.
 
 ##### Props
 
@@ -536,9 +547,15 @@ based on the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Tabl
 
 **Peer dependencies:**
 
+- `@emotion/react`
+- `react`
 - `react-aria-components`
+- `react-dom`
+- `typescript`
+
+See the `peerDependencies` section of `package.json` for compatible versions.
 
-See the `peerDependencies` section of the `package.json` for compatible versions to install.
+**Note:** If you only need the built CSS (`@guardian/stand/component/tagTable.css`), you don't need to install these dependencies.
 
 ##### Props
 
@@ -549,7 +566,7 @@ See [`TagTableProps`](src/components/tag-picker/TagTable.tsx#L31) for the full l
 _Example with TagAutocomplete and TagTable combined:_
 
 ```tsx
-import { TagAutocomplete, TagTable } from '@guardian/stand';
+import { TagAutocomplete, TagTable } from '@guardian/stand/tag-picker';
 
 const Component = () => {
   const [selectedTags, setSelectedTags] = useState<

package/dist/byline.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Byline = require('./components/byline/Byline.cjs');
+var byline = require('./styleD/build/typescript/component/byline.cjs');
+
+
+
+exports.Byline = Byline.Byline;
+exports.componentByline = byline.componentByline;

package/dist/byline.js

@@ -0,0 +1,2 @@
+export { Byline } from './components/byline/Byline.js';
+export { componentByline } from './styleD/build/typescript/component/byline.js';

package/dist/components/byline/styles.cjs

@@ -2,14 +2,14 @@
 
 var react = require('@emotion/react');
 var byline = require('../../styleD/build/typescript/component/byline.cjs');
-var util = require('../util.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
 
 const bylineContainerStyles = react.css`
 	position: relative;
 	width: 100%;
 `;
 const bylineEditorStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline, partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline, partialTheme);
   return react.css`
 		border-color: ${theme.borderColor};
 		border-style: ${theme.borderStyle};
@@ -205,7 +205,7 @@ const bylineEditorStyles = (partialTheme = {}) => {
 	`;
 };
 const dropdownContainerStyles = (showDropdown, partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		position: absolute;
 		box-sizing: border-box;
@@ -226,7 +226,7 @@ const dropdownUlStyles = react.css`
 	list-style-type: none;
 `;
 const dropdownLiStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		cursor: pointer;
 		padding: 5px;
@@ -237,7 +237,7 @@ const dropdownLiStyles = (partialTheme = {}) => {
 	`;
 };
 const selectedDropdownLiStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		background-color: ${theme.li.selectedBackgroundColor};
 		color: ${theme.li.selectedColor};

package/dist/components/byline/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { componentByline } from '../../styleD/build/typescript/component/byline.js';
-import { mergeDeep } from '../util.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
 
 const bylineContainerStyles = css`
 	position: relative;

package/dist/components/tag-picker/styles.cjs

@@ -3,10 +3,10 @@
 var react = require('@emotion/react');
 var tagAutocomplete = require('../../styleD/build/typescript/component/tagAutocomplete.cjs');
 var tagTable = require('../../styleD/build/typescript/component/tagTable.cjs');
-var util = require('../util.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
 
 const tagAutocompleteInputStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		width: 100%;
 		box-sizing: border-box;
@@ -23,7 +23,7 @@ const tagAutocompleteInputStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.paddingY} ${theme.listbox.paddingX};
 		max-height: 320px;
@@ -35,7 +35,7 @@ const listboxStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxItemStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 		cursor: pointer;
@@ -48,13 +48,13 @@ const listboxItemStyles = (partialTheme = {}) => {
 	`;
 };
 const listboxInfoStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagAutocomplete.componentTagAutocomplete, partialTheme);
   return react.css`
 		padding: ${theme.listbox.item.paddingY} ${theme.listbox.item.paddingX};
 	`;
 };
 const tagTableHeadingStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		background-color: ${theme.heading.backgroundColor};
 		font-weight: ${theme.heading.fontWeight};
@@ -63,7 +63,7 @@ const tagTableHeadingStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableCellStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		padding: ${theme.cell.paddingY} ${theme.cell.paddingX};
 
@@ -79,7 +79,7 @@ const tagTableCellStyles = (partialTheme = {}) => {
 	`;
 };
 const tagTableRowStyles = (canDrag, partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		background-color: ${theme.row.backgroundColor};
 		height: ${theme.row.height};
@@ -106,7 +106,7 @@ const tagTableRowStyles = (canDrag, partialTheme = {}) => {
 	`;
 };
 const tagTableStyles = (canRemoveTag, partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		width: 100%;
 		border-collapse: collapse;
@@ -129,7 +129,7 @@ const tagTableRemoveButtonStyles = react.css`
 	}
 `;
 const tagTableAddButtonStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		:hover {
 			cursor: pointer;
@@ -172,7 +172,7 @@ const tagTableDragButtonStyles = react.css`
 	}
 `;
 const tagTableTypeBadgeStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(tagTable.componentTagTable, partialTheme);
+  const theme = mergeDeep.mergeDeep(tagTable.componentTagTable, partialTheme);
   return react.css`
 		white-space: nowrap;
 		text-transform: uppercase;

package/dist/components/tag-picker/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { componentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete.js';
 import { componentTagTable } from '../../styleD/build/typescript/component/tagTable.js';
-import { mergeDeep } from '../util.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
 
 const tagAutocompleteInputStyles = (partialTheme = {}) => {
   const theme = mergeDeep(componentTagAutocomplete, partialTheme);

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var Byline = require('./components/byline/Byline.cjs');
-var TagTable = require('./components/tag-picker/TagTable.cjs');
-var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
+var byline = require('./styleD/build/typescript/component/byline.cjs');
+var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
+var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
 var typography = require('./styleD/build/typescript/base/typography.cjs');
 var spacing = require('./styleD/build/typescript/base/spacing.cjs');
@@ -11,13 +11,12 @@ var radius = require('./styleD/build/typescript/base/radius.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
 var typography$1 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
-var typography$2 = require('./styleD/utils/semantic/typography.cjs');
 
 
 
-exports.Byline = Byline.Byline;
-exports.TagTable = TagTable.TagTable;
-exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
+exports.componentByline = byline.componentByline;
+exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;
+exports.componentTagTable = tagTable.componentTagTable;
 exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
 exports.baseSpacing = spacing.baseSpacing;
@@ -26,5 +25,3 @@ exports.baseRadius = radius.baseRadius;
 exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$1.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
-exports.convertTypographyToEmotionObjectStyle = typography$2.convertTypographyToEmotionObjectStyle;
-exports.convertTypographyToEmotionStringStyle = typography$2.convertTypographyToEmotionStringStyle;

package/dist/index.js

@@ -1,6 +1,6 @@
-export { Byline } from './components/byline/Byline.js';
-export { TagTable } from './components/tag-picker/TagTable.js';
-export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
+export { componentByline } from './styleD/build/typescript/component/byline.js';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
@@ -9,4 +9,3 @@ export { baseRadius } from './styleD/build/typescript/base/radius.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
-export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';

package/dist/styleD/build/css/{css/base → base}/sizing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+	--base-sizing-size-1-px: 1px;
 	--base-sizing-size-2-px: 2px;
 	--base-sizing-size-16-px: 16px;
 	--base-sizing-size-18-px: 18px;
@@ -11,6 +12,7 @@
 	--base-sizing-size-32-px: 32px;
 	--base-sizing-size-40-px: 40px;
 	--base-sizing-size-48-px: 48px;
+	--base-sizing-size-1-rem: 0.0625rem;
 	--base-sizing-size-2-rem: 0.125rem;
 	--base-sizing-size-16-rem: 1rem;
 	--base-sizing-size-18-rem: 1.125rem;

package/dist/styleD/build/css/{css/base → base}/spacing.css

@@ -5,7 +5,9 @@
 :root {
 	--base-spacing-2-px: 2px;
 	--base-spacing-4-px: 4px;
+	--base-spacing-6-px: 6px;
 	--base-spacing-8-px: 8px;
+	--base-spacing-10-px: 10px;
 	--base-spacing-12-px: 12px;
 	--base-spacing-16-px: 16px;
 	--base-spacing-20-px: 20px;
@@ -20,7 +22,9 @@
 	--base-spacing-96-px: 96px;
 	--base-spacing-2-rem: 0.125rem;
 	--base-spacing-4-rem: 0.25rem;
+	--base-spacing-6-rem: 0.375rem;
 	--base-spacing-8-rem: 0.5rem;
+	--base-spacing-10-rem: 0.625rem;
 	--base-spacing-12-rem: 0.75rem;
 	--base-spacing-16-rem: 1rem;
 	--base-spacing-20-rem: 1.25rem;

package/dist/styleD/build/css/{css/base → base}/typography.css

@@ -47,6 +47,7 @@
 	--base-typography-line-height-tight: 1.15;
 	--base-typography-line-height-normal: 1.3;
 	--base-typography-line-height-loose: 1.4;
+	--base-typography-line-height-interactive: 1;
 	--base-typography-letter-spacing-densest-px: -1px;
 	--base-typography-letter-spacing-denser-px: -0.5px;
 	--base-typography-letter-spacing-dense-px: -0.2px;

package/dist/styleD/build/css/semantic/colors.css

@@ -0,0 +1,65 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-colors-text-default: #000000;
+	--semantic-colors-text-subdued: #545454;
+	--semantic-colors-text-inverse-default: #dcdcdc;
+	--semantic-colors-text-inverse-subdued: #cccccc;
+	--semantic-colors-text-inverse-strong: #ffffff;
+	--semantic-colors-text-error: #8c2113;
+	--semantic-colors-text-warning: #433608;
+	--semantic-colors-text-success: #326528;
+	--semantic-colors-text-information: #00344e;
+	--semantic-colors-text-disabled: #999999;
+	--semantic-colors-text-green: #24491d;
+	--semantic-colors-text-blue: #092f62;
+	--semantic-colors-text-red: #65170e;
+	--semantic-colors-text-cyan: #00344e;
+	--semantic-colors-text-teal: #0e2729;
+	--semantic-colors-text-cool-purple: #394069;
+	--semantic-colors-text-warm-purple: #381350;
+	--semantic-colors-text-magenta: #581734;
+	--semantic-colors-text-orange: #693c16;
+	--semantic-colors-text-yellow: #5b4a0b;
+	--semantic-colors-text-interactive-disabled: #999999;
+	--semantic-colors-bg-default-on-dark: #121212;
+	--semantic-colors-bg-default-on-light: #ffffff;
+	--semantic-colors-surface-light-1: #f6f6f6;
+	--semantic-colors-surface-light-2: #ededed;
+	--semantic-colors-surface-dark-1: #333333;
+	--semantic-colors-border-subtle: #cccccc;
+	--semantic-colors-border-default: #8d8d8d;
+	--semantic-colors-border-strong: #545454;
+	--semantic-colors-border-inverse-strong: #ffffff;
+	--semantic-colors-border-interactive-emphasised: #0d4289;
+	--semantic-colors-border-interactive-neutral: #545454;
+	--semantic-colors-border-interactive-disabled: #dcdcdc;
+	--semantic-colors-border-interactive-focused: #0072a9;
+	--semantic-colors-status-status-draft: #f1c21b;
+	--semantic-colors-status-status-live: #4e9e3e;
+	--semantic-colors-status-status-selected: #0072a9;
+	--semantic-colors-status-status-focused: #0072a9;
+	--semantic-colors-fill-interactive-primary-emphasised: #0d4289;
+	--semantic-colors-fill-interactive-primary-emphasised-hover: #092f62;
+	--semantic-colors-fill-interactive-primary-emphasised-pressed: #092f62;
+	--semantic-colors-fill-interactive-secondary-emphasised-hover: #e8f0fb;
+	--semantic-colors-fill-interactive-secondary-emphasised-pressed: #e8f0fb;
+	--semantic-colors-fill-interactive-primary-neutral: #545454;
+	--semantic-colors-fill-interactive-primary-neutral-hover: #333333;
+	--semantic-colors-fill-interactive-primary-neutral-pressed: #333333;
+	--semantic-colors-fill-interactive-secondary-neutral-hover: #ededed;
+	--semantic-colors-fill-interactive-secondary-neutral-pressed: #ededed;
+	--semantic-colors-fill-interactive-disabled: #dcdcdc;
+	--semantic-colors-fill-green-subtle: #cde4c9;
+	--semantic-colors-fill-blue-subtle: #bdd4f4;
+	--semantic-colors-fill-red-subtle: #f5c6c0;
+	--semantic-colors-fill-cyan-subtle: #b8d8e7;
+	--semantic-colors-fill-teal-subtle: #c5dfe1;
+	--semantic-colors-fill-cool-purple-subtle: #dbdff7;
+	--semantic-colors-fill-warm-purple-subtle: #dac3e8;
+	--semantic-colors-fill-magenta-subtle: #edc6d7;
+	--semantic-colors-fill-orange-subtle: #fcddc6;
+	--semantic-colors-fill-yellow-subtle: #fbeebf;
+}

package/dist/styleD/build/css/{css/semantic → semantic}/sizing.css

@@ -10,5 +10,6 @@
 	--semantic-sizing-icon-sm: 1.125rem;
 	--semantic-sizing-icon-md: 1.25rem;
 	--semantic-sizing-icon-lg: 1.5rem;
+	--semantic-sizing-border-default: 0.0625rem;
 	--semantic-sizing-border-md: 0.125rem;
 }

package/dist/styleD/build/css/{css/semantic → semantic}/typography.css

@@ -142,4 +142,10 @@
 		GuardianTextEgyptian;
 	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0rem;
 	--semantic-typography-article-body-bold-italic-md-font-width: 100;
+	--semantic-typography-interactive-xs-font: normal 700 0.75rem/1 'Open Sans';
+	--semantic-typography-interactive-xs-letter-spacing: 0rem;
+	--semantic-typography-interactive-xs-font-width: 95;
+	--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
+	--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;
+	--semantic-typography-interactive-sm-font-width: 95;
 }

package/dist/styleD/build/typescript/base/sizing.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const baseSizing = {
+  "size-1-px": "1px",
   "size-2-px": "2px",
   "size-16-px": "16px",
   "size-18-px": "18px",
@@ -9,6 +10,7 @@ const baseSizing = {
   "size-32-px": "32px",
   "size-40-px": "40px",
   "size-48-px": "48px",
+  "size-1-rem": "0.0625rem",
   "size-2-rem": "0.125rem",
   "size-16-rem": "1rem",
   "size-18-rem": "1.125rem",

package/dist/styleD/build/typescript/base/sizing.js

@@ -1,4 +1,5 @@
 const baseSizing = {
+  "size-1-px": "1px",
   "size-2-px": "2px",
   "size-16-px": "16px",
   "size-18-px": "18px",
@@ -7,6 +8,7 @@ const baseSizing = {
   "size-32-px": "32px",
   "size-40-px": "40px",
   "size-48-px": "48px",
+  "size-1-rem": "0.0625rem",
   "size-2-rem": "0.125rem",
   "size-16-rem": "1rem",
   "size-18-rem": "1.125rem",

package/dist/styleD/build/typescript/base/spacing.cjs

@@ -3,7 +3,9 @@
 const baseSpacing = {
   "2-px": "2px",
   "4-px": "4px",
+  "6-px": "6px",
   "8-px": "8px",
+  "10-px": "10px",
   "12-px": "12px",
   "16-px": "16px",
   "20-px": "20px",
@@ -18,7 +20,9 @@ const baseSpacing = {
   "96-px": "96px",
   "2-rem": "0.125rem",
   "4-rem": "0.25rem",
+  "6-rem": "0.375rem",
   "8-rem": "0.5rem",
+  "10-rem": "0.625rem",
   "12-rem": "0.75rem",
   "16-rem": "1rem",
   "20-rem": "1.25rem",

package/dist/styleD/build/typescript/base/spacing.js

@@ -1,7 +1,9 @@
 const baseSpacing = {
   "2-px": "2px",
   "4-px": "4px",
+  "6-px": "6px",
   "8-px": "8px",
+  "10-px": "10px",
   "12-px": "12px",
   "16-px": "16px",
   "20-px": "20px",
@@ -16,7 +18,9 @@ const baseSpacing = {
   "96-px": "96px",
   "2-rem": "0.125rem",
   "4-rem": "0.25rem",
+  "6-rem": "0.375rem",
   "8-rem": "0.5rem",
+  "10-rem": "0.625rem",
   "12-rem": "0.75rem",
   "16-rem": "1rem",
   "20-rem": "1.25rem",

package/dist/styleD/build/typescript/base/typography.cjs

@@ -63,7 +63,8 @@ const baseTypography = {
   "line-height": {
     tight: 1.15,
     normal: 1.3,
-    loose: 1.4
+    loose: 1.4,
+    interactive: 1
   },
   "letter-spacing": {
     "densest-px": "-1px",

package/dist/styleD/build/typescript/base/typography.js

@@ -61,7 +61,8 @@ const baseTypography = {
   "line-height": {
     tight: 1.15,
     normal: 1.3,
-    loose: 1.4
+    loose: 1.4,
+    interactive: 1
   },
   "letter-spacing": {
     "densest-px": "-1px",

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -11,7 +11,18 @@ const semanticColors = {
     warning: "#433608",
     success: "#326528",
     information: "#00344e",
-    disabled: "#999999"
+    disabled: "#999999",
+    green: "#24491d",
+    blue: "#092f62",
+    red: "#65170e",
+    cyan: "#00344e",
+    teal: "#0e2729",
+    "cool-purple": "#394069",
+    "warm-purple": "#381350",
+    magenta: "#581734",
+    orange: "#693c16",
+    yellow: "#5b4a0b",
+    "interactive-disabled": "#999999"
   },
   bg: {
     "default-onDark": "#121212",
@@ -26,13 +37,40 @@ const semanticColors = {
     subtle: "#cccccc",
     default: "#8d8d8d",
     strong: "#545454",
-    "inverse-strong": "#ffffff"
+    "inverse-strong": "#ffffff",
+    "interactive-emphasised": "#0d4289",
+    "interactive-neutral": "#545454",
+    "interactive-disabled": "#dcdcdc",
+    "interactive-focused": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
     "status-live": "#4e9e3e",
     "status-selected": "#0072a9",
     "status-focused": "#0072a9"
+  },
+  fill: {
+    "interactive-primary-emphasised": "#0d4289",
+    "interactive-primary-emphasised-hover": "#092f62",
+    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-secondary-emphasised-hover": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-primary-neutral": "#545454",
+    "interactive-primary-neutral-hover": "#333333",
+    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-secondary-neutral-hover": "#ededed",
+    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-disabled": "#dcdcdc",
+    "green-subtle": "#cde4c9",
+    "blue-subtle": "#bdd4f4",
+    "red-subtle": "#f5c6c0",
+    "cyan-subtle": "#b8d8e7",
+    "teal-subtle": "#c5dfe1",
+    "cool-purple-subtle": "#dbdff7",
+    "warm-purple-subtle": "#dac3e8",
+    "magenta-subtle": "#edc6d7",
+    "orange-subtle": "#fcddc6",
+    "yellow-subtle": "#fbeebf"
   }
 };
 

package/dist/styleD/build/typescript/semantic/colors.js

@@ -9,7 +9,18 @@ const semanticColors = {
     warning: "#433608",
     success: "#326528",
     information: "#00344e",
-    disabled: "#999999"
+    disabled: "#999999",
+    green: "#24491d",
+    blue: "#092f62",
+    red: "#65170e",
+    cyan: "#00344e",
+    teal: "#0e2729",
+    "cool-purple": "#394069",
+    "warm-purple": "#381350",
+    magenta: "#581734",
+    orange: "#693c16",
+    yellow: "#5b4a0b",
+    "interactive-disabled": "#999999"
   },
   bg: {
     "default-onDark": "#121212",
@@ -24,13 +35,40 @@ const semanticColors = {
     subtle: "#cccccc",
     default: "#8d8d8d",
     strong: "#545454",
-    "inverse-strong": "#ffffff"
+    "inverse-strong": "#ffffff",
+    "interactive-emphasised": "#0d4289",
+    "interactive-neutral": "#545454",
+    "interactive-disabled": "#dcdcdc",
+    "interactive-focused": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
     "status-live": "#4e9e3e",
     "status-selected": "#0072a9",
     "status-focused": "#0072a9"
+  },
+  fill: {
+    "interactive-primary-emphasised": "#0d4289",
+    "interactive-primary-emphasised-hover": "#092f62",
+    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-secondary-emphasised-hover": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-primary-neutral": "#545454",
+    "interactive-primary-neutral-hover": "#333333",
+    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-secondary-neutral-hover": "#ededed",
+    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-disabled": "#dcdcdc",
+    "green-subtle": "#cde4c9",
+    "blue-subtle": "#bdd4f4",
+    "red-subtle": "#f5c6c0",
+    "cyan-subtle": "#b8d8e7",
+    "teal-subtle": "#c5dfe1",
+    "cool-purple-subtle": "#dbdff7",
+    "warm-purple-subtle": "#dac3e8",
+    "magenta-subtle": "#edc6d7",
+    "orange-subtle": "#fcddc6",
+    "yellow-subtle": "#fbeebf"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -13,6 +13,7 @@ const semanticSizing = {
     lg: "1.5rem"
   },
   border: {
+    default: "0.0625rem",
     md: "0.125rem"
   }
 };

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -11,6 +11,7 @@ const semanticSizing = {
     lg: "1.5rem"
   },
   border: {
+    default: "0.0625rem",
     md: "0.125rem"
   }
 };

package/dist/styleD/build/typescript/semantic/typography.cjs

@@ -190,6 +190,16 @@ const semanticTypography = {
     font: "italic 700 1rem/1.4 GuardianTextEgyptian",
     letterSpacing: "0rem",
     fontWidth: 100
+  },
+  "interactive-xs": {
+    font: "normal 700 0.75rem/1 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "interactive-sm": {
+    font: "normal 700 0.875rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

package/dist/styleD/build/typescript/semantic/typography.js

@@ -188,6 +188,16 @@ const semanticTypography = {
     font: "italic 700 1rem/1.4 GuardianTextEgyptian",
     letterSpacing: "0rem",
     fontWidth: 100
+  },
+  "interactive-xs": {
+    font: "normal 700 0.75rem/1 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "interactive-sm": {
+    font: "normal 700 0.875rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

package/dist/tag-picker.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var TagTable = require('./components/tag-picker/TagTable.cjs');
+var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
+var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
+var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
+
+
+
+exports.TagTable = TagTable.TagTable;
+exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
+exports.componentTagTable = tagTable.componentTagTable;
+exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;

package/dist/tag-picker.js

@@ -0,0 +1,4 @@
+export { TagTable } from './components/tag-picker/TagTable.js';
+export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';

package/dist/types/byline.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Byline component entry point
+ *
+ * Peer dependencies required to use this component:
+ * - `@emotion/react`
+ * - `@guardian/prosemirror-invisibles`
+ * - `prosemirror-dropcursor`
+ * - `prosemirror-history`
+ * - `prosemirror-keymap`
+ * - `prosemirror-model`
+ * - `prosemirror-state`
+ * - `prosemirror-view`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/byline.css), you don't need to install these.
+ */
+export { Byline } from './components/byline/Byline';
+export type { BylineModel } from './components/byline/lib';
+export type { PartialBylineTheme } from './components/byline/theme';
+export { componentByline } from './styleD/build/typescript/component/byline';
+export type { ComponentByline } from './styleD/build/typescript/component/byline';

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

@@ -1,6 +1,6 @@
 import type { FocusEventHandler } from 'react';
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { BylineModel, TaggedContributor } from './lib';
 type BylineProps = {
     /** `theme` - Used to customise the look and feel of the Byline component */

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

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { Node } from 'prosemirror-model';
 import { type ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 export declare const bylineContainerStyles: SerializedStyles;
 export declare const bylineEditorStyles: (partialTheme?: DeepPartial<ComponentByline>) => SerializedStyles;
 export declare const dropdownContainerStyles: (showDropdown: boolean, partialTheme?: DeepPartial<ComponentByline['dropdown']>) => 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';
+import type { DeepPartial } from '../../util/types';
 export type PartialBylineTheme = DeepPartial<ComponentByline>;

package/dist/types/components/tag-picker/TagAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { Tag } from './types';
 interface TagAutocompleteProps<T extends Tag = Tag> {
     /** `addTag` - Function called when an option is picked from the dropdown */

package/dist/types/components/tag-picker/TagTable.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ReactElement } from 'react';
 import { Row } from 'react-aria-components';
 import type { ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { TagRow } from './types';
 type Row = TagRow | {
     tag: TagRow;

package/dist/types/components/tag-picker/styles.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
 import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import { type DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 export declare const tagAutocompleteInputStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
 export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
 export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;

package/dist/types/index.d.ts

@@ -1,11 +1,16 @@
 /**
- * component exports
+ * Main entry point - Design tokens only
+ * Import components from their own entry points, this isolates components within their own peer dependencies.
  */
-export { Byline } from './components/byline/Byline';
-export type { BylineModel } from './components/byline/lib';
-export type { PartialBylineTheme } from './components/byline/theme';
-export { TagTable } from './components/tag-picker/TagTable';
-export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
+/**
+ * editorial components tokens exports
+ */
+export { componentByline } from './styleD/build/typescript/component/byline';
+export type { ComponentByline } from './styleD/build/typescript/component/byline';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
+export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable';
+export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
 /**
  * style dictionary exports - base
  */
@@ -28,7 +33,3 @@ export { semanticTypography } from './styleD/build/typescript/semantic/typograph
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
 export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
-/**
- * utils exports
- */
-export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';

package/dist/types/styleD/build/typescript/base/sizing.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const baseSizing: {
+    readonly 'size-1-px': "1px";
     readonly 'size-2-px': "2px";
     readonly 'size-16-px': "16px";
     readonly 'size-18-px': "18px";
@@ -10,6 +11,7 @@ export declare const baseSizing: {
     readonly 'size-32-px': "32px";
     readonly 'size-40-px': "40px";
     readonly 'size-48-px': "48px";
+    readonly 'size-1-rem': "0.0625rem";
     readonly 'size-2-rem': "0.125rem";
     readonly 'size-16-rem': "1rem";
     readonly 'size-18-rem': "1.125rem";

package/dist/types/styleD/build/typescript/base/spacing.d.ts

@@ -4,7 +4,9 @@
 export declare const baseSpacing: {
     readonly '2-px': "2px";
     readonly '4-px': "4px";
+    readonly '6-px': "6px";
     readonly '8-px': "8px";
+    readonly '10-px': "10px";
     readonly '12-px': "12px";
     readonly '16-px': "16px";
     readonly '20-px': "20px";
@@ -19,7 +21,9 @@ export declare const baseSpacing: {
     readonly '96-px': "96px";
     readonly '2-rem': "0.125rem";
     readonly '4-rem': "0.25rem";
+    readonly '6-rem': "0.375rem";
     readonly '8-rem': "0.5rem";
+    readonly '10-rem': "0.625rem";
     readonly '12-rem': "0.75rem";
     readonly '16-rem': "1rem";
     readonly '20-rem': "1.25rem";

package/dist/types/styleD/build/typescript/base/typography.d.ts

@@ -65,6 +65,7 @@ export declare const baseTypography: {
         readonly tight: 1.15;
         readonly normal: 1.3;
         readonly loose: 1.4;
+        readonly interactive: 1;
     };
     readonly 'letter-spacing': {
         readonly 'densest-px': "-1px";

package/dist/types/styleD/build/typescript/semantic/colors.d.ts

@@ -13,6 +13,17 @@ export declare const semanticColors: {
         success: string;
         information: string;
         disabled: string;
+        green: string;
+        blue: string;
+        red: string;
+        cyan: string;
+        teal: string;
+        'cool-purple': string;
+        'warm-purple': string;
+        magenta: string;
+        orange: string;
+        yellow: string;
+        'interactive-disabled': string;
     };
     bg: {
         'default-onDark': string;
@@ -28,6 +39,10 @@ export declare const semanticColors: {
         default: string;
         strong: string;
         'inverse-strong': string;
+        'interactive-emphasised': string;
+        'interactive-neutral': string;
+        'interactive-disabled': string;
+        'interactive-focused': string;
     };
     status: {
         'status-draft': string;
@@ -35,5 +50,28 @@ export declare const semanticColors: {
         'status-selected': string;
         'status-focused': string;
     };
+    fill: {
+        'interactive-primary-emphasised': string;
+        'interactive-primary-emphasised-hover': string;
+        'interactive-primary-emphasised-pressed': string;
+        'interactive-secondary-emphasised-hover': string;
+        'interactive-secondary-emphasised-pressed': string;
+        'interactive-primary-neutral': string;
+        'interactive-primary-neutral-hover': string;
+        'interactive-primary-neutral-pressed': string;
+        'interactive-secondary-neutral-hover': string;
+        'interactive-secondary-neutral-pressed': string;
+        'interactive-disabled': string;
+        'green-subtle': string;
+        'blue-subtle': string;
+        'red-subtle': string;
+        'cyan-subtle': string;
+        'teal-subtle': string;
+        'cool-purple-subtle': string;
+        'warm-purple-subtle': string;
+        'magenta-subtle': string;
+        'orange-subtle': string;
+        'yellow-subtle': string;
+    };
 };
 export type SemanticColors = typeof semanticColors;

package/dist/types/styleD/build/typescript/semantic/sizing.d.ts

@@ -14,6 +14,7 @@ export declare const semanticSizing: {
         lg: string;
     };
     border: {
+        default: string;
         md: string;
     };
 };

package/dist/types/styleD/build/typescript/semantic/typography.d.ts

@@ -192,5 +192,15 @@ export declare const semanticTypography: {
         letterSpacing: string;
         fontWidth: number;
     };
+    'interactive-xs': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
+    'interactive-sm': {
+        font: string;
+        letterSpacing: string;
+        fontWidth: number;
+    };
 };
 export type SemanticTypography = typeof semanticTypography;

package/dist/types/tag-picker.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Tag picker components entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-aria-components`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/tagTable.css, ./component/tagAutocomplete.css),
+ * you don't need to install these.
+ */
+export { TagTable } from './components/tag-picker/TagTable';
+export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable';
+export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';
+export type { ComponentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete';

package/dist/types/util/mergeDeep.d.ts

@@ -0,0 +1 @@
+export declare function mergeDeep<A extends object, B extends object>(obj1: A, obj2: B): A & B;

package/dist/types/{components/util.d.ts → util/types.d.ts}

@@ -1,4 +1,6 @@
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 export type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
-export declare function mergeDeep<A extends object, B extends object>(obj1: A, obj2: B): A & B;

package/dist/types/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utils entry point
+ *
+ * Utilities for working with design tokens and styles.
+ */
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';

package/dist/utils.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var typography = require('./styleD/utils/semantic/typography.cjs');
+
+
+
+exports.convertTypographyToEmotionObjectStyle = typography.convertTypographyToEmotionObjectStyle;
+exports.convertTypographyToEmotionStringStyle = typography.convertTypographyToEmotionStringStyle;

package/dist/utils.js

@@ -0,0 +1 @@
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';

package/package.json

@@ -1,13 +1,29 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "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": {
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./byline": {
+      "types": "./dist/types/byline.d.ts",
+      "import": "./dist/byline.js",
+      "require": "./dist/byline.cjs"
+    },
+    "./tag-picker": {
+      "types": "./dist/types/tag-picker.d.ts",
+      "import": "./dist/tag-picker.js",
+      "require": "./dist/tag-picker.cjs"
+    },
+    "./utils": {
+      "types": "./dist/types/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
     "./base/colors.css": "./dist/styleD/build/css/base/colors.css",
     "./base/typography.css": "./dist/styleD/build/css/base/typography.css",
@@ -21,6 +37,20 @@
     "./component/tagAutocomplete.css": "./dist/styleD/build/css/component/tagAutocomplete.css",
     "./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css"
   },
+  "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
+  "typesVersions": {
+    "*": {
+      "byline": [
+        "./dist/types/byline.d.ts"
+      ],
+      "tag-picker": [
+        "./dist/types/tag-picker.d.ts"
+      ],
+      "utils": [
+        "./dist/types/utils.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist"
   ],
@@ -29,7 +59,9 @@
     "directory": "stand-component-library"
   },
   "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@emotion/react": "11.11.4",
@@ -92,6 +124,9 @@
     "typescript": ">=5.0.0 <=5.9.3"
   },
   "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
@@ -112,6 +147,18 @@
     },
     "prosemirror-view": {
       "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-aria-components": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
     }
   },
   "scripts": {

package/dist/styleD/build/css/css/semantic/colors.css

@@ -1,29 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-	--semantic-colors-text-default: #000000;
-	--semantic-colors-text-subdued: #545454;
-	--semantic-colors-text-inverse-default: #dcdcdc;
-	--semantic-colors-text-inverse-subdued: #cccccc;
-	--semantic-colors-text-inverse-strong: #ffffff;
-	--semantic-colors-text-error: #8c2113;
-	--semantic-colors-text-warning: #433608;
-	--semantic-colors-text-success: #326528;
-	--semantic-colors-text-information: #00344e;
-	--semantic-colors-text-disabled: #999999;
-	--semantic-colors-bg-default-on-dark: #121212;
-	--semantic-colors-bg-default-on-light: #ffffff;
-	--semantic-colors-surface-light-1: #f6f6f6;
-	--semantic-colors-surface-light-2: #ededed;
-	--semantic-colors-surface-dark-1: #333333;
-	--semantic-colors-border-subtle: #cccccc;
-	--semantic-colors-border-default: #8d8d8d;
-	--semantic-colors-border-strong: #545454;
-	--semantic-colors-border-inverse-strong: #ffffff;
-	--semantic-colors-status-status-draft: #f1c21b;
-	--semantic-colors-status-status-live: #4e9e3e;
-	--semantic-colors-status-status-selected: #0072a9;
-	--semantic-colors-status-status-focused: #0072a9;
-}