@guardian/stand 0.0.37 → 0.0.39

package/dist/components/{topbar → TopBar}/styles.js

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
-import { componentTopBar } from '../../styleD/build/typescript/component/TopBar.js';
+import { componentTopBar } from '../../styleD/build/typescript/component/topBar.js';
 import { until, from } from '../../styleD/utils/semantic/mq.js';
 
 const defaultTopBarTheme = componentTopBar;
 const topBarStyles = (theme) => {
   return css`
-		background-color: ${theme["background-color"]};
+		background-color: ${theme.backgroundColor};
 		height: ${theme.height};
-		border-top: ${theme["border-top"]};
-		border-right: ${theme["border-right"]};
-		border-bottom: ${theme["border-bottom"]};
-		border-left: ${theme["border-left"]};
+		border-top: ${theme.borderTop};
+		border-right: ${theme.borderRight};
+		border-bottom: ${theme.borderBottom};
+		border-left: ${theme.borderLeft};
 		display: ${theme.display};
-		justify-content: ${theme["justify-content"]};
+		justify-content: ${theme.justifyContent};
 	`;
 };
 const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
@@ -34,7 +34,7 @@ const topBarContainerStyles = (theme, { collapseBelow, showUntil } = {}) => {
 };
 const topBarSpacerStyles = (theme) => {
   return css`
-		margin-left: ${theme.spacer["margin-left"]};
+		margin-left: ${theme.spacer.marginLeft};
 	`;
 };
 const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
@@ -46,17 +46,17 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
 		cursor: ${theme.collapsedNavMenu.button.cursor};
 
 		&[data-hovered] {
-			background-color: ${theme.collapsedNavMenu.button.hovered["background-color"]};
+			background-color: ${theme.collapsedNavMenu.button.hovered.backgroundColor};
 		}
 
 		${menuOpen && css`
-			background-color: ${theme.collapsedNavMenu.button.active["background-color"]};
+			background-color: ${theme.collapsedNavMenu.button.active.backgroundColor};
 		`}
 	`;
 };
 const topBarCollapsedNavMenuPopoverStyles = (theme) => {
   return css`
-		background-color: ${theme.collapsedNavMenu.popover["background-color"]};
+		background-color: ${theme.collapsedNavMenu.popover.backgroundColor};
 		border-left: ${theme.collapsedNavMenu.popover.border};
 		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;

package/dist/components/{typography → Typography}/Typography.cjs

@@ -6,7 +6,7 @@ var styles = require('./styles.cjs');
 
 const Typography = ({
   element = "span",
-  variant = "body-md",
+  variant = "bodyMd",
   children,
   cssOverrides,
   theme = {},

package/dist/components/{typography → Typography}/Typography.js

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { typographyStyles, defaultTypographyTheme } from './styles.js';
+import { defaultTypographyTheme, typographyStyles } from './styles.js';
 
-const Typography = ({ element = "span", variant = "body-md", children, cssOverrides, theme = {}, ...props }) => {
+const Typography = ({ element = "span", variant = "bodyMd", children, cssOverrides, theme = {}, ...props }) => {
   const mergedTheme = mergeDeep(defaultTypographyTheme, theme);
   return jsx(element, {
     css: [typographyStyles(mergedTheme, { variant }), cssOverrides],

package/dist/components/Typography/styles.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('@emotion/react');
+var typography = require('../../styleD/build/typescript/component/typography.cjs');
+var typography$1 = require('../../styleD/utils/semantic/typography.cjs');
+var typography$2 = require('../../styleD/build/typescript/semantic/typography.cjs');
+
+const defaultTypographyTheme = typography.componentTypography;
+const typographyStyles = (theme, { variant }) => react.css`
+	${typography$1.convertTypographyToEmotionStringStyle(typography$2.semanticTypography[variant])}
+	color: ${theme.color};
+`;
+
+exports.defaultTypographyTheme = defaultTypographyTheme;
+exports.typographyStyles = typographyStyles;

package/dist/components/{user-menu → UserMenu}/UserMenu.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var TitleText = require('../TitleText.cjs');
 var defaultOptions = require('./default-options.cjs');
 var PreferenceRadioGroup = require('./PreferenceRadioGroup.cjs');
 var styles = require('./styles.cjs');
+var TitleText = require('./TitleText.cjs');
 
 function UserMenu({
   theme,

package/dist/components/{user-menu → UserMenu}/UserMenu.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { TitleText } from '../TitleText.js';
 import { textSizes, fontFamilies, colorSchemes } from './default-options.js';
 import { PreferenceRadioGroup } from './PreferenceRadioGroup.js';
 import { userMenuHeadingStyles, userMenuStyles } from './styles.js';
+import { TitleText } from './TitleText.js';
 
 function UserMenu({ theme, feedBacklink, preferences, updatePreferences, textSizeOptions, fontFamilyOptions, colorSchemeOptions, headingLevel }) {
   return jsxs("aside", { css: userMenuStyles(theme), children: [jsx(TitleText, { headingLevel, css: userMenuHeadingStyles(theme), children: "Accessibility Settings" }), jsx("div", { children: jsxs("p", { children: ["Customise your reading & writing experience.", " ", feedBacklink && jsx("a", { href: feedBacklink, target: "_blank", rel: "noreferrer", children: "Send feedback" })] }) }), (!textSizeOptions || textSizeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: textSizeOptions ?? textSizes, name: "Text Size", currentValue: preferences.fontpreferences, changeValue: (fontpreferences) => updatePreferences({ fontpreferences }) }), (!fontFamilyOptions || fontFamilyOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, options: fontFamilyOptions ?? fontFamilies, name: "Font Family", currentValue: preferences.fontType, changeValue: (fontType) => updatePreferences({ fontType }) }), (!colorSchemeOptions || colorSchemeOptions.length > 0) && jsx(PreferenceRadioGroup, { theme, format: "rows", options: colorSchemeOptions ?? colorSchemes, name: "Color scheme", currentValue: preferences.colorScheme, changeValue: (colorScheme) => updatePreferences({ colorScheme }) })] });

package/dist/components/{user-menu → UserMenu}/default-options.cjs

@@ -9,7 +9,7 @@ const textSizes = [
     label: "Small",
     description: "Compact reading",
     labelStyle: {
-      fontSize: typography.baseTypography.size["12-px"]
+      fontSize: typography.baseTypography.size["12Rem"]
     }
   },
   {
@@ -17,7 +17,7 @@ const textSizes = [
     label: "Medium",
     description: "Standard reading",
     labelStyle: {
-      fontSize: typography.baseTypography.size["16-px"]
+      fontSize: typography.baseTypography.size["16Rem"]
     }
   },
   {
@@ -25,7 +25,7 @@ const textSizes = [
     label: "Large",
     description: "Comfortable reading",
     labelStyle: {
-      fontSize: typography.baseTypography.size["20-px"]
+      fontSize: typography.baseTypography.size["20Rem"]
     }
   }
 ];
@@ -35,17 +35,17 @@ const fontFamilies = [
     label: "Guardian Text Egyptian",
     description: "Classic Guardian Serif",
     labelStyle: {
-      fontFamily: typography.baseTypography.family["Guardian Text Egyptian"],
-      fontSize: typography.baseTypography.size["20-px"]
+      fontFamily: typography.baseTypography.family.guardianTextEgyptian,
+      fontSize: typography.baseTypography.size["20Rem"]
     }
   },
   {
     id: "open-sans-compact",
     label: "Open Sans Compact",
-    description: "compact sans-Serif",
+    description: "Compact Sans-Serif",
     labelStyle: {
-      fontFamily: typography.baseTypography.family["Open Sans Compact"],
-      fontSize: typography.baseTypography.size["20-px"]
+      fontFamily: typography.baseTypography.family.openSansCompact,
+      fontSize: typography.baseTypography.size["20Rem"]
     }
   },
   {
@@ -53,8 +53,8 @@ const fontFamilies = [
     label: "Open Sans",
     description: "Sans-Serif",
     labelStyle: {
-      fontFamily: typography.baseTypography.family["Open Sans"],
-      fontSize: typography.baseTypography.size["20-px"]
+      fontFamily: typography.baseTypography.family.openSans,
+      fontSize: typography.baseTypography.size["20Rem"]
     }
   }
 ];
@@ -63,7 +63,7 @@ const colorSchemes = [
     id: "white",
     buttonStyle: {
       backgroundColor: "white",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     },
     isDefault: true
   },
@@ -71,35 +71,35 @@ const colorSchemes = [
     id: "cream",
     buttonStyle: {
       backgroundColor: "antiquewhite",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     }
   },
   {
     id: "green",
     buttonStyle: {
       backgroundColor: "lightgreen",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     }
   },
   {
     id: "pink",
     buttonStyle: {
       backgroundColor: "pink",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     }
   },
   {
     id: "blue",
     buttonStyle: {
       backgroundColor: "skyblue",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     }
   },
   {
     id: "orange",
     buttonStyle: {
       backgroundColor: "orange",
-      padding: spacing.baseSpacing["10-rem"]
+      padding: spacing.baseSpacing["10Rem"]
     }
   }
 ];

package/dist/components/{user-menu → UserMenu}/default-options.js

@@ -7,7 +7,7 @@ const textSizes = [
     label: "Small",
     description: "Compact reading",
     labelStyle: {
-      fontSize: baseTypography.size["12-px"]
+      fontSize: baseTypography.size["12Rem"]
     }
   },
   {
@@ -15,7 +15,7 @@ const textSizes = [
     label: "Medium",
     description: "Standard reading",
     labelStyle: {
-      fontSize: baseTypography.size["16-px"]
+      fontSize: baseTypography.size["16Rem"]
     }
   },
   {
@@ -23,7 +23,7 @@ const textSizes = [
     label: "Large",
     description: "Comfortable reading",
     labelStyle: {
-      fontSize: baseTypography.size["20-px"]
+      fontSize: baseTypography.size["20Rem"]
     }
   }
 ];
@@ -33,17 +33,17 @@ const fontFamilies = [
     label: "Guardian Text Egyptian",
     description: "Classic Guardian Serif",
     labelStyle: {
-      fontFamily: baseTypography.family["Guardian Text Egyptian"],
-      fontSize: baseTypography.size["20-px"]
+      fontFamily: baseTypography.family.guardianTextEgyptian,
+      fontSize: baseTypography.size["20Rem"]
     }
   },
   {
     id: "open-sans-compact",
     label: "Open Sans Compact",
-    description: "compact sans-Serif",
+    description: "Compact Sans-Serif",
     labelStyle: {
-      fontFamily: baseTypography.family["Open Sans Compact"],
-      fontSize: baseTypography.size["20-px"]
+      fontFamily: baseTypography.family.openSansCompact,
+      fontSize: baseTypography.size["20Rem"]
     }
   },
   {
@@ -51,8 +51,8 @@ const fontFamilies = [
     label: "Open Sans",
     description: "Sans-Serif",
     labelStyle: {
-      fontFamily: baseTypography.family["Open Sans"],
-      fontSize: baseTypography.size["20-px"]
+      fontFamily: baseTypography.family.openSans,
+      fontSize: baseTypography.size["20Rem"]
     }
   }
 ];
@@ -61,7 +61,7 @@ const colorSchemes = [
     id: "white",
     buttonStyle: {
       backgroundColor: "white",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     },
     isDefault: true
   },
@@ -69,35 +69,35 @@ const colorSchemes = [
     id: "cream",
     buttonStyle: {
       backgroundColor: "antiquewhite",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     }
   },
   {
     id: "green",
     buttonStyle: {
       backgroundColor: "lightgreen",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     }
   },
   {
     id: "pink",
     buttonStyle: {
       backgroundColor: "pink",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     }
   },
   {
     id: "blue",
     buttonStyle: {
       backgroundColor: "skyblue",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     }
   },
   {
     id: "orange",
     buttonStyle: {
       backgroundColor: "orange",
-      padding: baseSpacing["10-rem"]
+      padding: baseSpacing["10Rem"]
     }
   }
 ];

package/dist/index.cjs

@@ -22,7 +22,7 @@ var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
 var textInput = require('./styleD/build/typescript/component/textInput.cjs');
-var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
+var topBar = require('./styleD/build/typescript/component/topBar.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
 var radius = require('./styleD/build/typescript/base/radius.cjs');
@@ -30,6 +30,7 @@ var sizing = require('./styleD/build/typescript/base/sizing.cjs');
 var spacing = require('./styleD/build/typescript/base/spacing.cjs');
 var typography = require('./styleD/build/typescript/base/typography.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
+var grid$1 = require('./styleD/build/typescript/semantic/grid.cjs');
 var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
 var shadow = require('./styleD/build/typescript/semantic/shadow.cjs');
@@ -59,7 +60,7 @@ exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentSelect = select.componentSelect;
 exports.componentTextArea = textArea.componentTextArea;
 exports.componentTextInput = textInput.componentTextInput;
-exports.componentTopBar = TopBar.componentTopBar;
+exports.componentTopBar = topBar.componentTopBar;
 exports.componentTypography = typography$1.componentTypography;
 exports.baseColors = colors.baseColors;
 exports.baseRadius = radius.baseRadius;
@@ -67,6 +68,7 @@ exports.baseSizing = sizing.baseSizing;
 exports.baseSpacing = spacing.baseSpacing;
 exports.baseTypography = typography.baseTypography;
 exports.semanticColors = colors$1.semanticColors;
+exports.semanticGrid = grid$1.semanticGrid;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
 exports.semanticShadow = shadow.semanticShadow;

package/dist/index.js

@@ -20,7 +20,7 @@ export { componentRadioGroup } from './styleD/build/typescript/component/radioGr
 export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';
 export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
-export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
+export { componentTopBar } from './styleD/build/typescript/component/topBar.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseRadius } from './styleD/build/typescript/base/radius.js';
@@ -28,6 +28,7 @@ export { baseSizing } from './styleD/build/typescript/base/sizing.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
+export { semanticGrid } from './styleD/build/typescript/semantic/grid.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
 export { semanticShadow } from './styleD/build/typescript/semantic/shadow.js';

package/dist/styleD/build/css/base/radius.css

@@ -3,10 +3,10 @@
  */
 
 :root {
-	--base-radius-corner-2-px: 2px;
-	--base-radius-corner-4-px: 4px;
-	--base-radius-corner-8-px: 8px;
-	--base-radius-corner-2-rem: 0.125rem;
-	--base-radius-corner-4-rem: 0.25rem;
-	--base-radius-corner-8-rem: 0.5rem;
+	--base-radius-corner2-px: 2px;
+	--base-radius-corner4-px: 4px;
+	--base-radius-corner8-px: 8px;
+	--base-radius-corner2-rem: 0.125rem;
+	--base-radius-corner4-rem: 0.25rem;
+	--base-radius-corner8-rem: 0.5rem;
 }

package/dist/styleD/build/css/base/sizing.css

@@ -3,24 +3,24 @@
  */
 
 :root {
-	--base-sizing-size-1-px: 1px;
-	--base-sizing-size-2-px: 2px;
-	--base-sizing-size-8-px: 8px;
-	--base-sizing-size-16-px: 16px;
-	--base-sizing-size-18-px: 18px;
-	--base-sizing-size-20-px: 20px;
-	--base-sizing-size-24-px: 24px;
-	--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-8-rem: 0.5rem;
-	--base-sizing-size-16-rem: 1rem;
-	--base-sizing-size-18-rem: 1.125rem;
-	--base-sizing-size-20-rem: 1.25rem;
-	--base-sizing-size-24-rem: 1.5rem;
-	--base-sizing-size-32-rem: 2rem;
-	--base-sizing-size-40-rem: 2.5rem;
-	--base-sizing-size-48-rem: 3rem;
+	--base-sizing-size1-px: 1px;
+	--base-sizing-size2-px: 2px;
+	--base-sizing-size8-px: 8px;
+	--base-sizing-size16-px: 16px;
+	--base-sizing-size18-px: 18px;
+	--base-sizing-size20-px: 20px;
+	--base-sizing-size24-px: 24px;
+	--base-sizing-size32-px: 32px;
+	--base-sizing-size40-px: 40px;
+	--base-sizing-size48-px: 48px;
+	--base-sizing-size1-rem: 0.0625rem;
+	--base-sizing-size2-rem: 0.125rem;
+	--base-sizing-size8-rem: 0.5rem;
+	--base-sizing-size16-rem: 1rem;
+	--base-sizing-size18-rem: 1.125rem;
+	--base-sizing-size20-rem: 1.25rem;
+	--base-sizing-size24-rem: 1.5rem;
+	--base-sizing-size32-rem: 2rem;
+	--base-sizing-size40-rem: 2.5rem;
+	--base-sizing-size48-rem: 3rem;
 }

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

@@ -5,10 +5,17 @@
 :root {
 	--component-grid-shared-display: flex;
 	--component-grid-shared-width: 100%;
-	--component-grid-shared-columns: 12;
-	--component-grid-shared-gap: 8px;
 	--component-grid-shared-direction: row;
 	--component-grid-shared-wrap: wrap;
 	--component-grid-shared-justify-content: flex-start;
 	--component-grid-shared-align-items: stretch;
+	--component-grid-sm-columns: 12;
+	--component-grid-sm-gap: 16px;
+	--component-grid-sm-padding: 16px;
+	--component-grid-md-columns: 12;
+	--component-grid-md-gap: 16px;
+	--component-grid-md-padding: 24px;
+	--component-grid-lg-columns: 12;
+	--component-grid-lg-gap: 16px;
+	--component-grid-lg-padding: 24px;
 }

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

@@ -16,8 +16,8 @@
 	--component-intended-audience-signifier-box-sizing: border-box;
 	--component-intended-audience-signifier-width: fit-content;
 	--component-intended-audience-signifier-gap: 4px;
-	--component-intended-audience-signifier-svg-height: unset;
-	--component-intended-audience-signifier-svg-width: unset;
+	--component-intended-audience-signifier-svg-height: 12px;
+	--component-intended-audience-signifier-svg-width: 16px;
 	--component-intended-audience-signifier-chevron-fill: #545454;
 	--component-intended-audience-signifier-chevron-size: 10px;
 	--component-intended-audience-signifier-color: #545454;

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

@@ -6,9 +6,6 @@
 	--component-layout-layout-shared-display: grid;
 	--component-layout-layout-shared-min-height: 100svh;
 	--component-layout-layout-shared-width: 100%;
-	--component-layout-layout-shared-max-width: 1584px;
-	--component-layout-layout-shared-margin-left: auto;
-	--component-layout-layout-shared-margin-right: auto;
 	--component-layout-layout-sm-grid-template-areas: 'alertbanner' 'topbar'
 		'sidebar' 'main';
 	--component-layout-layout-sm-grid-template-columns: 1fr;
@@ -26,5 +23,8 @@
 	--component-layout-sidebar-sm-above-grid-display: block;
 	--component-layout-sidebar-md-display: block;
 	--component-layout-sidebar-md-width: 200px;
-	--component-layout-sidebar-lg-width: 320px;
+	--component-layout-sidebar-lg-width: 280px;
+	--component-layout-main-max-width: 1584px;
+	--component-layout-main-margin-left: auto;
+	--component-layout-main-margin-right: auto;
 }

package/dist/styleD/build/css/component/{TopBar.css → topBar.css}

@@ -79,14 +79,14 @@
 	--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-gap: 0.5rem;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
 	--component-top-bar-tool-name-typography-letter-spacing: 0;
 	--component-top-bar-tool-name-typography-font-width: 100;
 	--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
 	--component-top-bar-tool-name-divider-height: 2rem;
-	--component-top-bar-tool-name-subsection-gap: 2px;
+	--component-top-bar-tool-name-subsection-gap: 0.125rem;
 	--component-top-bar-tool-name-subsection-typography-font: normal 700 1rem/1.15
 		'Open Sans';
 	--component-top-bar-tool-name-subsection-typography-letter-spacing: -0.0125rem;

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

@@ -25,8 +25,9 @@
 	--semantic-colors-text-orange: #693c16;
 	--semantic-colors-text-yellow: #5b4a0b;
 	--semantic-colors-bg-base: #ffffff;
-	--semantic-colors-bg-raised-level-1: #f6f6f6;
-	--semantic-colors-bg-raised-level-2: #ededed;
+	--semantic-colors-bg-raised-level1: #f6f6f6;
+	--semantic-colors-bg-raised-level2: #ededed;
+	--semantic-colors-bg-raised-level3: #e6e6e6;
 	--semantic-colors-border-stronger: #545454;
 	--semantic-colors-border-strong: #8d8d8d;
 	--semantic-colors-border-weak: #cccccc;

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-grid-gutter-lg-px: 16px;
+	--semantic-grid-gutter-md-px: 16px;
+	--semantic-grid-gutter-sm-px: 16px;
+	--semantic-grid-margin-lg-px: 24px;
+	--semantic-grid-margin-md-px: 24px;
+	--semantic-grid-margin-sm-px: 16px;
+	--semantic-grid-columns-lg: 12;
+	--semantic-grid-columns-md: 12;
+	--semantic-grid-columns-sm: 12;
+}

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

@@ -15,4 +15,7 @@
 	--semantic-sizing-border-default: 0.0625rem;
 	--semantic-sizing-border-md: 0.125rem;
 	--semantic-sizing-border-extra-wide: 0.5rem;
+	--semantic-sizing-sidebar-md-px: 200px;
+	--semantic-sizing-sidebar-lg-px: 280px;
+	--semantic-sizing-layout-max-width-px: 1584px;
 }

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

@@ -34,9 +34,9 @@
 	--semantic-typography-heading-xl-font: normal 700 1.25rem/1.15 'Open Sans';
 	--semantic-typography-heading-xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-xl-font-width: 95;
-	--semantic-typography-heading-2xl-font: normal 700 1.5rem/1.15 'Open Sans';
-	--semantic-typography-heading-2xl-letter-spacing: -0.0625rem;
-	--semantic-typography-heading-2xl-font-width: 95;
+	--semantic-typography-heading2-xl-font: normal 700 1.5rem/1.15 'Open Sans';
+	--semantic-typography-heading2-xl-letter-spacing: -0.0625rem;
+	--semantic-typography-heading2-xl-font-width: 95;
 	--semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
 		'Open Sans';
 	--semantic-typography-heading-compact-xs-letter-spacing: 0;
@@ -57,10 +57,10 @@
 		'Open Sans';
 	--semantic-typography-heading-compact-xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-compact-xl-font-width: 88;
-	--semantic-typography-heading-compact-2xl-font: normal 700 1.5rem/1.15
+	--semantic-typography-heading-compact2-xl-font: normal 700 1.5rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
-	--semantic-typography-heading-compact-2xl-font-width: 88;
+	--semantic-typography-heading-compact2-xl-letter-spacing: -0.03125rem;
+	--semantic-typography-heading-compact2-xl-font-width: 88;
 	--semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
 	--semantic-typography-body-xs-letter-spacing: 0;
 	--semantic-typography-body-xs-font-width: 95;

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

@@ -115,7 +115,7 @@ const baseColors = {
     "800": "#edc6d7",
     "900": "#f9ebf1"
   },
-  "warm-purple": {
+  warmPurple: {
     "50": "#220b30",
     "100": "#381350",
     "200": "#4e1a6f",
@@ -127,7 +127,7 @@ const baseColors = {
     "800": "#dac3e8",
     "900": "#f2eaf7"
   },
-  "cool-purple": {
+  coolPurple: {
     "50": "#232740",
     "100": "#394069",
     "200": "#485084",

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

@@ -113,7 +113,7 @@ const baseColors = {
     "800": "#edc6d7",
     "900": "#f9ebf1"
   },
-  "warm-purple": {
+  warmPurple: {
     "50": "#220b30",
     "100": "#381350",
     "200": "#4e1a6f",
@@ -125,7 +125,7 @@ const baseColors = {
     "800": "#dac3e8",
     "900": "#f2eaf7"
   },
-  "cool-purple": {
+  coolPurple: {
     "50": "#232740",
     "100": "#394069",
     "200": "#485084",

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

@@ -1,12 +1,12 @@
 'use strict';
 
 const baseRadius = {
-  "corner-2-px": "2px",
-  "corner-4-px": "4px",
-  "corner-8-px": "8px",
-  "corner-2-rem": "0.125rem",
-  "corner-4-rem": "0.25rem",
-  "corner-8-rem": "0.5rem"
+  corner2Px: "2px",
+  corner4Px: "4px",
+  corner8Px: "8px",
+  corner2Rem: "0.125rem",
+  corner4Rem: "0.25rem",
+  corner8Rem: "0.5rem"
 };
 
 exports.baseRadius = baseRadius;