@guardian/stand 0.0.16 → 0.0.17

package/dist/components/topbar/{toolName → topBarToolName}/TopBarToolName.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var mergeDeep = require('../../../util/mergeDeep.cjs');
 var Favicon = require('../../favicon/Favicon.cjs');
 var Icon = require('../../icon/Icon.cjs');
+var TopBarItem = require('../topBarItem/TopBarItem.cjs');
 var styles = require('./styles.cjs');
 
 const TopBarToolName = ({
@@ -15,7 +16,7 @@ const TopBarToolName = ({
   cssOverrides
 }) => {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
     /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
     subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -25,7 +26,7 @@ const TopBarToolName = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
       ] })
     ] })
-  ] });
+  ] }) });
 };
 
 exports.TopBarToolName = TopBarToolName;

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

@@ -0,0 +1,13 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { Favicon } from '../../favicon/Favicon.js';
+import { Icon } from '../../icon/Icon.js';
+import { TopBarItem } from '../topBarItem/TopBarItem.js';
+import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
+
+const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
+  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+  return jsx(TopBarItem, { alignment: "left", size: "sm", children: jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] }) });
+};
+
+export { TopBarToolName };

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

@@ -29,9 +29,9 @@
 	--base-typography-size-36-rem: 2.25rem;
 	--base-typography-size-42-rem: 2.625rem;
 	--base-typography-size-48-rem: 3rem;
-	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-guardian-text-egyptian-normal: 400;
 	--base-typography-weight-guardian-text-egyptian-bold: 700;
+	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-open-sans-light: 340;
 	--base-typography-weight-open-sans-normal: 460;
 	--base-typography-weight-open-sans-semi-bold: 600;
@@ -51,9 +51,9 @@
 	--base-typography-letter-spacing-densest-px: -1px;
 	--base-typography-letter-spacing-denser-px: -0.5px;
 	--base-typography-letter-spacing-dense-px: -0.2px;
-	--base-typography-letter-spacing-default-px: 0px;
+	--base-typography-letter-spacing-default-px: 0;
 	--base-typography-letter-spacing-densest-rem: -0.0625rem;
 	--base-typography-letter-spacing-denser-rem: -0.03125rem;
 	--base-typography-letter-spacing-dense-rem: -0.0125rem;
-	--base-typography-letter-spacing-default-rem: 0rem;
+	--base-typography-letter-spacing-default-rem: 0;
 }

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

@@ -3,12 +3,66 @@
  */
 
 :root {
+	--component-top-bar-background-color: #f6f6f6;
+	--component-top-bar-display: flex;
+	--component-top-bar-height: 4rem;
+	--component-top-bar-justify-content: space-between;
+	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-item-display: flex;
+	--component-top-bar-item-align-items: center;
+	--component-top-bar-item-height: 100%;
+	--component-top-bar-item-sm-padding-top: 0;
+	--component-top-bar-item-sm-padding-right: 0.75rem;
+	--component-top-bar-item-sm-padding-bottom: 0;
+	--component-top-bar-item-sm-padding-left: 0.75rem;
+	--component-top-bar-item-md-padding-top: 0;
+	--component-top-bar-item-md-padding-right: 1rem;
+	--component-top-bar-item-md-padding-bottom: 0;
+	--component-top-bar-item-md-padding-left: 1rem;
+	--component-top-bar-item-lg-padding-top: 0;
+	--component-top-bar-item-lg-padding-right: 1.5rem;
+	--component-top-bar-item-lg-padding-bottom: 0;
+	--component-top-bar-item-lg-padding-left: 1.5rem;
+	--component-top-bar-item-border: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-shared-display: inline-flex;
+	--component-top-bar-navigation-shared-position: relative;
+	--component-top-bar-navigation-shared-align-items: center;
+	--component-top-bar-navigation-shared-cursor: pointer;
+	--component-top-bar-navigation-shared-text-decoration: none;
+	--component-top-bar-navigation-shared-height: 100%;
+	--component-top-bar-navigation-shared-disabled-cursor: not-allowed;
+	--component-top-bar-navigation-shared-disabled-color: #999999;
+	--component-top-bar-navigation-shared-padding-top: 0;
+	--component-top-bar-navigation-shared-padding-right: 1rem;
+	--component-top-bar-navigation-shared-padding-bottom: 0;
+	--component-top-bar-navigation-shared-padding-left: 1rem;
+	--component-top-bar-navigation-shared-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-top-bar-navigation-shared-focus-visible-outline-offset: -0.0625rem;
+	--component-top-bar-navigation-shared-border-top: 0.5rem solid transparent;
+	--component-top-bar-navigation-shared-divider: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-text-margin-left: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-top: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-left: 0.125rem;
+	--component-top-bar-navigation-selected-color: #000000;
+	--component-top-bar-navigation-selected-border-bottom: 0.5rem solid #0072a9;
+	--component-top-bar-navigation-unselected-color: #545454;
+	--component-top-bar-navigation-unselected-border-bottom: 0.5rem solid
+		transparent;
+	--component-top-bar-navigation-md-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-top-bar-navigation-md-typography-letter-spacing: -0.03125rem;
+	--component-top-bar-navigation-md-typography-font-width: 95;
+	--component-top-bar-navigation-sm-typography-font: normal 700 0.875rem/1.15
+		'Open Sans';
+	--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-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
+	--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;

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

@@ -45,7 +45,7 @@
 	--component-avatar-shared-user-select: none;
 	--component-avatar-sm-size: 2rem;
 	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
-	--component-avatar-sm-typography-letter-spacing: 0rem;
+	--component-avatar-sm-typography-letter-spacing: 0;
 	--component-avatar-sm-typography-font-width: 95;
 	--component-avatar-md-size: 2.5rem;
 	--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';

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

@@ -14,268 +14,190 @@
 	--component-button-shared-disabled-cursor: not-allowed;
 	--component-button-shared-focus-visible-outline: 0.125rem solid #0072a9;
 	--component-button-shared-focus-visible-outline-offset: 0.125rem;
-	--component-button-emphasised-primary-shared-color: #ffffff;
-	--component-button-emphasised-primary-shared-background-color: #0d4289;
-	--component-button-emphasised-primary-shared-border-radius: 0.25rem;
-	--component-button-emphasised-primary-shared-border: 0.0625rem solid #0d4289;
-	--component-button-emphasised-primary-shared-hover-background-color: #092f62;
-	--component-button-emphasised-primary-shared-hover-border: 0.0625rem solid
-		#092f62;
-	--component-button-emphasised-primary-shared-active-background-color: #061d3c;
-	--component-button-emphasised-primary-shared-active-border: 0.0625rem solid
-		#061d3c;
-	--component-button-emphasised-primary-shared-disabled-color: #999999;
-	--component-button-emphasised-primary-shared-disabled-background-color: #dcdcdc;
-	--component-button-emphasised-primary-shared-disabled-border: 0.0625rem solid
-		#dcdcdc;
-	--component-button-emphasised-primary-xs-height: 1.5rem;
-	--component-button-emphasised-primary-xs-padding-top: 0.25rem;
-	--component-button-emphasised-primary-xs-padding-right: 0.5rem;
-	--component-button-emphasised-primary-xs-padding-bottom: 0.25rem;
-	--component-button-emphasised-primary-xs-padding-left: 0.5rem;
-	--component-button-emphasised-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-emphasised-primary-xs-typography-font: normal 700 0.75rem/1
+	--component-button-primary-shared-color: #ffffff;
+	--component-button-primary-shared-background-color: #0d4289;
+	--component-button-primary-shared-border-radius: 0.25rem;
+	--component-button-primary-shared-border: 0.0625rem solid #0d4289;
+	--component-button-primary-shared-hover-background-color: #092f62;
+	--component-button-primary-shared-hover-border: 0.0625rem solid #092f62;
+	--component-button-primary-shared-active-background-color: #061d3c;
+	--component-button-primary-shared-active-border: 0.0625rem solid #061d3c;
+	--component-button-primary-shared-disabled-color: #999999;
+	--component-button-primary-shared-disabled-background-color: #dcdcdc;
+	--component-button-primary-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-button-primary-xs-height: 1.5rem;
+	--component-button-primary-xs-padding-top: 0.25rem;
+	--component-button-primary-xs-padding-right: 0.5rem;
+	--component-button-primary-xs-padding-bottom: 0.25rem;
+	--component-button-primary-xs-padding-left: 0.5rem;
+	--component-button-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-primary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-emphasised-primary-xs-typography-letter-spacing: 0rem;
-	--component-button-emphasised-primary-xs-typography-font-width: 95;
-	--component-button-emphasised-primary-xs-icon-size: 1.125rem;
-	--component-button-emphasised-primary-xs-icon-gap: 0.25rem;
-	--component-button-emphasised-primary-xs-icon-button-width: 1.5rem;
-	--component-button-emphasised-primary-sm-height: 2rem;
-	--component-button-emphasised-primary-sm-padding-top: 0.25rem;
-	--component-button-emphasised-primary-sm-padding-right: 0.625rem;
-	--component-button-emphasised-primary-sm-padding-bottom: 0.25rem;
-	--component-button-emphasised-primary-sm-padding-left: 0.625rem;
-	--component-button-emphasised-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-emphasised-primary-sm-typography-font: normal 700
-		0.875rem/1 'Open Sans';
-	--component-button-emphasised-primary-sm-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-primary-sm-typography-font-width: 95;
-	--component-button-emphasised-primary-sm-icon-size: 1.125rem;
-	--component-button-emphasised-primary-sm-icon-gap: 0.25rem;
-	--component-button-emphasised-primary-sm-icon-button-width: 2rem;
-	--component-button-emphasised-primary-md-height: 2.5rem;
-	--component-button-emphasised-primary-md-padding-top: 0.25rem;
-	--component-button-emphasised-primary-md-padding-right: 0.75rem;
-	--component-button-emphasised-primary-md-padding-bottom: 0.25rem;
-	--component-button-emphasised-primary-md-padding-left: 0.75rem;
-	--component-button-emphasised-primary-md-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-emphasised-primary-md-typography-font: normal 700
-		0.875rem/1 'Open Sans';
-	--component-button-emphasised-primary-md-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-primary-md-typography-font-width: 95;
-	--component-button-emphasised-primary-md-icon-size: 1.25rem;
-	--component-button-emphasised-primary-md-icon-gap: 0.25rem;
-	--component-button-emphasised-primary-md-icon-button-width: 2.5rem;
-	--component-button-emphasised-primary-lg-height: 3rem;
-	--component-button-emphasised-primary-lg-padding-top: 0.25rem;
-	--component-button-emphasised-primary-lg-padding-right: 1rem;
-	--component-button-emphasised-primary-lg-padding-bottom: 0.25rem;
-	--component-button-emphasised-primary-lg-padding-left: 1rem;
-	--component-button-emphasised-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
-	--component-button-emphasised-primary-lg-typography-font: normal 700 1rem/1
+	--component-button-primary-xs-typography-letter-spacing: 0;
+	--component-button-primary-xs-typography-font-width: 95;
+	--component-button-primary-xs-icon-size: 1.125rem;
+	--component-button-primary-xs-icon-gap: 0.25rem;
+	--component-button-primary-xs-icon-button-width: 1.5rem;
+	--component-button-primary-sm-height: 2rem;
+	--component-button-primary-sm-padding-top: 0.25rem;
+	--component-button-primary-sm-padding-right: 0.625rem;
+	--component-button-primary-sm-padding-bottom: 0.25rem;
+	--component-button-primary-sm-padding-left: 0.625rem;
+	--component-button-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-primary-sm-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-emphasised-primary-lg-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-primary-lg-typography-font-width: 95;
-	--component-button-emphasised-primary-lg-icon-size: 1.5rem;
-	--component-button-emphasised-primary-lg-icon-gap: 0.25rem;
-	--component-button-emphasised-primary-lg-icon-button-width: 3rem;
-	--component-button-emphasised-secondary-shared-color: #000000;
-	--component-button-emphasised-secondary-shared-background-color: none;
-	--component-button-emphasised-secondary-shared-border-radius: 0.25rem;
-	--component-button-emphasised-secondary-shared-border: 0.0625rem solid #0d4289;
-	--component-button-emphasised-secondary-shared-hover-background-color: #e8f0fb;
-	--component-button-emphasised-secondary-shared-hover-border: 0.0625rem solid
-		#0d4289;
-	--component-button-emphasised-secondary-shared-active-background-color: #c5d9f4;
-	--component-button-emphasised-secondary-shared-active-border: 0.0625rem solid
-		#0d4289;
-	--component-button-emphasised-secondary-shared-disabled-color: #999999;
-	--component-button-emphasised-secondary-shared-disabled-background-color: none;
-	--component-button-emphasised-secondary-shared-disabled-border: 0.0625rem
-		solid #dcdcdc;
-	--component-button-emphasised-secondary-xs-height: 1.5rem;
-	--component-button-emphasised-secondary-xs-padding-top: 0.25rem;
-	--component-button-emphasised-secondary-xs-padding-right: 0.5rem;
-	--component-button-emphasised-secondary-xs-padding-bottom: 0.25rem;
-	--component-button-emphasised-secondary-xs-padding-left: 0.5rem;
-	--component-button-emphasised-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-emphasised-secondary-xs-typography-font: normal 700
-		0.75rem/1 'Open Sans';
-	--component-button-emphasised-secondary-xs-typography-letter-spacing: 0rem;
-	--component-button-emphasised-secondary-xs-typography-font-width: 95;
-	--component-button-emphasised-secondary-xs-icon-size: 1.125rem;
-	--component-button-emphasised-secondary-xs-icon-gap: 0.25rem;
-	--component-button-emphasised-secondary-xs-icon-button-width: 1.5rem;
-	--component-button-emphasised-secondary-sm-height: 2rem;
-	--component-button-emphasised-secondary-sm-padding-top: 0.25rem;
-	--component-button-emphasised-secondary-sm-padding-right: 0.625rem;
-	--component-button-emphasised-secondary-sm-padding-bottom: 0.25rem;
-	--component-button-emphasised-secondary-sm-padding-left: 0.625rem;
-	--component-button-emphasised-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-emphasised-secondary-sm-typography-font: normal 700
-		0.875rem/1 'Open Sans';
-	--component-button-emphasised-secondary-sm-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-secondary-sm-typography-font-width: 95;
-	--component-button-emphasised-secondary-sm-icon-size: 1.125rem;
-	--component-button-emphasised-secondary-sm-icon-gap: 0.25rem;
-	--component-button-emphasised-secondary-sm-icon-button-width: 2rem;
-	--component-button-emphasised-secondary-md-height: 2.5rem;
-	--component-button-emphasised-secondary-md-padding-top: 0.25rem;
-	--component-button-emphasised-secondary-md-padding-right: 0.75rem;
-	--component-button-emphasised-secondary-md-padding-bottom: 0.25rem;
-	--component-button-emphasised-secondary-md-padding-left: 0.75rem;
-	--component-button-emphasised-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-emphasised-secondary-md-typography-font: normal 700
-		0.875rem/1 'Open Sans';
-	--component-button-emphasised-secondary-md-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-secondary-md-typography-font-width: 95;
-	--component-button-emphasised-secondary-md-icon-size: 1.25rem;
-	--component-button-emphasised-secondary-md-icon-gap: 0.25rem;
-	--component-button-emphasised-secondary-md-icon-button-width: 2.5rem;
-	--component-button-emphasised-secondary-lg-height: 3rem;
-	--component-button-emphasised-secondary-lg-padding-top: 0.25rem;
-	--component-button-emphasised-secondary-lg-padding-right: 1rem;
-	--component-button-emphasised-secondary-lg-padding-bottom: 0.25rem;
-	--component-button-emphasised-secondary-lg-padding-left: 1rem;
-	--component-button-emphasised-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
-	--component-button-emphasised-secondary-lg-typography-font: normal 700 1rem/1
+	--component-button-primary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-primary-sm-typography-font-width: 95;
+	--component-button-primary-sm-icon-size: 1.125rem;
+	--component-button-primary-sm-icon-gap: 0.25rem;
+	--component-button-primary-sm-icon-button-width: 2rem;
+	--component-button-primary-md-height: 2.5rem;
+	--component-button-primary-md-padding-top: 0.25rem;
+	--component-button-primary-md-padding-right: 0.75rem;
+	--component-button-primary-md-padding-bottom: 0.25rem;
+	--component-button-primary-md-padding-left: 0.75rem;
+	--component-button-primary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-primary-md-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-emphasised-secondary-lg-typography-letter-spacing: -0.0125rem;
-	--component-button-emphasised-secondary-lg-typography-font-width: 95;
-	--component-button-emphasised-secondary-lg-icon-size: 1.5rem;
-	--component-button-emphasised-secondary-lg-icon-gap: 0.25rem;
-	--component-button-emphasised-secondary-lg-icon-button-width: 3rem;
-	--component-button-neutral-primary-shared-color: #ffffff;
-	--component-button-neutral-primary-shared-background-color: #545454;
-	--component-button-neutral-primary-shared-border-radius: 0.25rem;
-	--component-button-neutral-primary-shared-border: 0.0625rem solid #545454;
-	--component-button-neutral-primary-shared-hover-background-color: #333333;
-	--component-button-neutral-primary-shared-hover-border: 0.0625rem solid
-		#333333;
-	--component-button-neutral-primary-shared-active-background-color: #121212;
-	--component-button-neutral-primary-shared-active-border: 0.0625rem solid
-		#121212;
-	--component-button-neutral-primary-shared-disabled-color: #999999;
-	--component-button-neutral-primary-shared-disabled-background-color: #dcdcdc;
-	--component-button-neutral-primary-shared-disabled-border: 0.0625rem solid
-		#dcdcdc;
-	--component-button-neutral-primary-xs-height: 1.5rem;
-	--component-button-neutral-primary-xs-padding-top: 0.25rem;
-	--component-button-neutral-primary-xs-padding-right: 0.5rem;
-	--component-button-neutral-primary-xs-padding-bottom: 0.25rem;
-	--component-button-neutral-primary-xs-padding-left: 0.5rem;
-	--component-button-neutral-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-neutral-primary-xs-typography-font: normal 700 0.75rem/1
+	--component-button-primary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-primary-md-typography-font-width: 95;
+	--component-button-primary-md-icon-size: 1.25rem;
+	--component-button-primary-md-icon-gap: 0.25rem;
+	--component-button-primary-md-icon-button-width: 2.5rem;
+	--component-button-primary-lg-height: 3rem;
+	--component-button-primary-lg-padding-top: 0.25rem;
+	--component-button-primary-lg-padding-right: 1rem;
+	--component-button-primary-lg-padding-bottom: 0.25rem;
+	--component-button-primary-lg-padding-left: 1rem;
+	--component-button-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-primary-lg-typography-font: normal 700 1rem/1 'Open Sans';
+	--component-button-primary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-primary-lg-typography-font-width: 95;
+	--component-button-primary-lg-icon-size: 1.5rem;
+	--component-button-primary-lg-icon-gap: 0.25rem;
+	--component-button-primary-lg-icon-button-width: 3rem;
+	--component-button-secondary-shared-color: #ffffff;
+	--component-button-secondary-shared-background-color: #545454;
+	--component-button-secondary-shared-border-radius: 0.25rem;
+	--component-button-secondary-shared-border: 0.0625rem solid #545454;
+	--component-button-secondary-shared-hover-background-color: #333333;
+	--component-button-secondary-shared-hover-border: 0.0625rem solid #333333;
+	--component-button-secondary-shared-active-background-color: #121212;
+	--component-button-secondary-shared-active-border: 0.0625rem solid #121212;
+	--component-button-secondary-shared-disabled-color: #999999;
+	--component-button-secondary-shared-disabled-background-color: #dcdcdc;
+	--component-button-secondary-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-button-secondary-xs-height: 1.5rem;
+	--component-button-secondary-xs-padding-top: 0.25rem;
+	--component-button-secondary-xs-padding-right: 0.5rem;
+	--component-button-secondary-xs-padding-bottom: 0.25rem;
+	--component-button-secondary-xs-padding-left: 0.5rem;
+	--component-button-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-secondary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-neutral-primary-xs-typography-letter-spacing: 0rem;
-	--component-button-neutral-primary-xs-typography-font-width: 95;
-	--component-button-neutral-primary-xs-icon-size: 1.125rem;
-	--component-button-neutral-primary-xs-icon-gap: 0.25rem;
-	--component-button-neutral-primary-xs-icon-button-width: 1.5rem;
-	--component-button-neutral-primary-sm-height: 2rem;
-	--component-button-neutral-primary-sm-padding-top: 0.25rem;
-	--component-button-neutral-primary-sm-padding-right: 0.625rem;
-	--component-button-neutral-primary-sm-padding-bottom: 0.25rem;
-	--component-button-neutral-primary-sm-padding-left: 0.625rem;
-	--component-button-neutral-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-primary-sm-typography-font: normal 700 0.875rem/1
+	--component-button-secondary-xs-typography-letter-spacing: 0;
+	--component-button-secondary-xs-typography-font-width: 95;
+	--component-button-secondary-xs-icon-size: 1.125rem;
+	--component-button-secondary-xs-icon-gap: 0.25rem;
+	--component-button-secondary-xs-icon-button-width: 1.5rem;
+	--component-button-secondary-sm-height: 2rem;
+	--component-button-secondary-sm-padding-top: 0.25rem;
+	--component-button-secondary-sm-padding-right: 0.625rem;
+	--component-button-secondary-sm-padding-bottom: 0.25rem;
+	--component-button-secondary-sm-padding-left: 0.625rem;
+	--component-button-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-secondary-sm-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-neutral-primary-sm-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-primary-sm-typography-font-width: 95;
-	--component-button-neutral-primary-sm-icon-size: 1.125rem;
-	--component-button-neutral-primary-sm-icon-gap: 0.25rem;
-	--component-button-neutral-primary-sm-icon-button-width: 2rem;
-	--component-button-neutral-primary-md-height: 2.5rem;
-	--component-button-neutral-primary-md-padding-top: 0.25rem;
-	--component-button-neutral-primary-md-padding-right: 0.75rem;
-	--component-button-neutral-primary-md-padding-bottom: 0.25rem;
-	--component-button-neutral-primary-md-padding-left: 0.75rem;
-	--component-button-neutral-primary-md-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-primary-md-typography-font: normal 700 0.875rem/1
+	--component-button-secondary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-secondary-sm-typography-font-width: 95;
+	--component-button-secondary-sm-icon-size: 1.125rem;
+	--component-button-secondary-sm-icon-gap: 0.25rem;
+	--component-button-secondary-sm-icon-button-width: 2rem;
+	--component-button-secondary-md-height: 2.5rem;
+	--component-button-secondary-md-padding-top: 0.25rem;
+	--component-button-secondary-md-padding-right: 0.75rem;
+	--component-button-secondary-md-padding-bottom: 0.25rem;
+	--component-button-secondary-md-padding-left: 0.75rem;
+	--component-button-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-secondary-md-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-neutral-primary-md-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-primary-md-typography-font-width: 95;
-	--component-button-neutral-primary-md-icon-size: 1.25rem;
-	--component-button-neutral-primary-md-icon-gap: 0.25rem;
-	--component-button-neutral-primary-md-icon-button-width: 2.5rem;
-	--component-button-neutral-primary-lg-height: 3rem;
-	--component-button-neutral-primary-lg-padding-top: 0.25rem;
-	--component-button-neutral-primary-lg-padding-right: 1rem;
-	--component-button-neutral-primary-lg-padding-bottom: 0.25rem;
-	--component-button-neutral-primary-lg-padding-left: 1rem;
-	--component-button-neutral-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
-	--component-button-neutral-primary-lg-typography-font: normal 700 1rem/1
+	--component-button-secondary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-secondary-md-typography-font-width: 95;
+	--component-button-secondary-md-icon-size: 1.25rem;
+	--component-button-secondary-md-icon-gap: 0.25rem;
+	--component-button-secondary-md-icon-button-width: 2.5rem;
+	--component-button-secondary-lg-height: 3rem;
+	--component-button-secondary-lg-padding-top: 0.25rem;
+	--component-button-secondary-lg-padding-right: 1rem;
+	--component-button-secondary-lg-padding-bottom: 0.25rem;
+	--component-button-secondary-lg-padding-left: 1rem;
+	--component-button-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-secondary-lg-typography-font: normal 700 1rem/1 'Open Sans';
+	--component-button-secondary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-secondary-lg-typography-font-width: 95;
+	--component-button-secondary-lg-icon-size: 1.5rem;
+	--component-button-secondary-lg-icon-gap: 0.25rem;
+	--component-button-secondary-lg-icon-button-width: 3rem;
+	--component-button-tertiary-shared-color: #000000;
+	--component-button-tertiary-shared-background-color: none;
+	--component-button-tertiary-shared-border-radius: 0.25rem;
+	--component-button-tertiary-shared-border: 0.0625rem solid #545454;
+	--component-button-tertiary-shared-hover-background-color: #f6f6f6;
+	--component-button-tertiary-shared-hover-border: 0.0625rem solid #545454;
+	--component-button-tertiary-shared-active-background-color: #ededed;
+	--component-button-tertiary-shared-active-border: 0.0625rem solid #545454;
+	--component-button-tertiary-shared-disabled-color: #999999;
+	--component-button-tertiary-shared-disabled-background-color: none;
+	--component-button-tertiary-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-button-tertiary-xs-height: 1.5rem;
+	--component-button-tertiary-xs-padding-top: 0.25rem;
+	--component-button-tertiary-xs-padding-right: 0.5rem;
+	--component-button-tertiary-xs-padding-bottom: 0.25rem;
+	--component-button-tertiary-xs-padding-left: 0.5rem;
+	--component-button-tertiary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-tertiary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-neutral-primary-lg-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-primary-lg-typography-font-width: 95;
-	--component-button-neutral-primary-lg-icon-size: 1.5rem;
-	--component-button-neutral-primary-lg-icon-gap: 0.25rem;
-	--component-button-neutral-primary-lg-icon-button-width: 3rem;
-	--component-button-neutral-secondary-shared-color: #000000;
-	--component-button-neutral-secondary-shared-background-color: none;
-	--component-button-neutral-secondary-shared-border-radius: 0.25rem;
-	--component-button-neutral-secondary-shared-border: 0.0625rem solid #545454;
-	--component-button-neutral-secondary-shared-hover-background-color: #ededed;
-	--component-button-neutral-secondary-shared-hover-border: 0.0625rem solid
-		#545454;
-	--component-button-neutral-secondary-shared-active-background-color: #dcdcdc;
-	--component-button-neutral-secondary-shared-active-border: 0.0625rem solid
-		#545454;
-	--component-button-neutral-secondary-shared-disabled-color: #999999;
-	--component-button-neutral-secondary-shared-disabled-background-color: none;
-	--component-button-neutral-secondary-shared-disabled-border: 0.0625rem solid
-		#dcdcdc;
-	--component-button-neutral-secondary-xs-height: 1.5rem;
-	--component-button-neutral-secondary-xs-padding-top: 0.25rem;
-	--component-button-neutral-secondary-xs-padding-right: 0.5rem;
-	--component-button-neutral-secondary-xs-padding-bottom: 0.25rem;
-	--component-button-neutral-secondary-xs-padding-left: 0.5rem;
-	--component-button-neutral-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
-	--component-button-neutral-secondary-xs-typography-font: normal 700 0.75rem/1
+	--component-button-tertiary-xs-typography-letter-spacing: 0;
+	--component-button-tertiary-xs-typography-font-width: 95;
+	--component-button-tertiary-xs-icon-size: 1.125rem;
+	--component-button-tertiary-xs-icon-gap: 0.25rem;
+	--component-button-tertiary-xs-icon-button-width: 1.5rem;
+	--component-button-tertiary-sm-height: 2rem;
+	--component-button-tertiary-sm-padding-top: 0.25rem;
+	--component-button-tertiary-sm-padding-right: 0.625rem;
+	--component-button-tertiary-sm-padding-bottom: 0.25rem;
+	--component-button-tertiary-sm-padding-left: 0.625rem;
+	--component-button-tertiary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-tertiary-sm-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-neutral-secondary-xs-typography-letter-spacing: 0rem;
-	--component-button-neutral-secondary-xs-typography-font-width: 95;
-	--component-button-neutral-secondary-xs-icon-size: 1.125rem;
-	--component-button-neutral-secondary-xs-icon-gap: 0.25rem;
-	--component-button-neutral-secondary-xs-icon-button-width: 1.5rem;
-	--component-button-neutral-secondary-sm-height: 2rem;
-	--component-button-neutral-secondary-sm-padding-top: 0.25rem;
-	--component-button-neutral-secondary-sm-padding-right: 0.625rem;
-	--component-button-neutral-secondary-sm-padding-bottom: 0.25rem;
-	--component-button-neutral-secondary-sm-padding-left: 0.625rem;
-	--component-button-neutral-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-secondary-sm-typography-font: normal 700 0.875rem/1
+	--component-button-tertiary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-tertiary-sm-typography-font-width: 95;
+	--component-button-tertiary-sm-icon-size: 1.125rem;
+	--component-button-tertiary-sm-icon-gap: 0.25rem;
+	--component-button-tertiary-sm-icon-button-width: 2rem;
+	--component-button-tertiary-md-height: 2.5rem;
+	--component-button-tertiary-md-padding-top: 0.25rem;
+	--component-button-tertiary-md-padding-right: 0.75rem;
+	--component-button-tertiary-md-padding-bottom: 0.25rem;
+	--component-button-tertiary-md-padding-left: 0.75rem;
+	--component-button-tertiary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-tertiary-md-typography-font: normal 700 0.875rem/1
 		'Open Sans';
-	--component-button-neutral-secondary-sm-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-secondary-sm-typography-font-width: 95;
-	--component-button-neutral-secondary-sm-icon-size: 1.125rem;
-	--component-button-neutral-secondary-sm-icon-gap: 0.25rem;
-	--component-button-neutral-secondary-sm-icon-button-width: 2rem;
-	--component-button-neutral-secondary-md-height: 2.5rem;
-	--component-button-neutral-secondary-md-padding-top: 0.25rem;
-	--component-button-neutral-secondary-md-padding-right: 0.75rem;
-	--component-button-neutral-secondary-md-padding-bottom: 0.25rem;
-	--component-button-neutral-secondary-md-padding-left: 0.75rem;
-	--component-button-neutral-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
-	--component-button-neutral-secondary-md-typography-font: normal 700 0.875rem/1
-		'Open Sans';
-	--component-button-neutral-secondary-md-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-secondary-md-typography-font-width: 95;
-	--component-button-neutral-secondary-md-icon-size: 1.25rem;
-	--component-button-neutral-secondary-md-icon-gap: 0.25rem;
-	--component-button-neutral-secondary-md-icon-button-width: 2.5rem;
-	--component-button-neutral-secondary-lg-height: 3rem;
-	--component-button-neutral-secondary-lg-padding-top: 0.25rem;
-	--component-button-neutral-secondary-lg-padding-right: 1rem;
-	--component-button-neutral-secondary-lg-padding-bottom: 0.25rem;
-	--component-button-neutral-secondary-lg-padding-left: 1rem;
-	--component-button-neutral-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
-	--component-button-neutral-secondary-lg-typography-font: normal 700 1rem/1
-		'Open Sans';
-	--component-button-neutral-secondary-lg-typography-letter-spacing: -0.0125rem;
-	--component-button-neutral-secondary-lg-typography-font-width: 95;
-	--component-button-neutral-secondary-lg-icon-size: 1.5rem;
-	--component-button-neutral-secondary-lg-icon-gap: 0.25rem;
-	--component-button-neutral-secondary-lg-icon-button-width: 3rem;
+	--component-button-tertiary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-tertiary-md-typography-font-width: 95;
+	--component-button-tertiary-md-icon-size: 1.25rem;
+	--component-button-tertiary-md-icon-gap: 0.25rem;
+	--component-button-tertiary-md-icon-button-width: 2.5rem;
+	--component-button-tertiary-lg-height: 3rem;
+	--component-button-tertiary-lg-padding-top: 0.25rem;
+	--component-button-tertiary-lg-padding-right: 1rem;
+	--component-button-tertiary-lg-padding-bottom: 0.25rem;
+	--component-button-tertiary-lg-padding-left: 1rem;
+	--component-button-tertiary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-tertiary-lg-typography-font: normal 700 1rem/1 'Open Sans';
+	--component-button-tertiary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-tertiary-lg-typography-font-width: 95;
+	--component-button-tertiary-lg-icon-size: 1.5rem;
+	--component-button-tertiary-lg-icon-gap: 0.25rem;
+	--component-button-tertiary-lg-icon-button-width: 3rem;
 }

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

@@ -12,6 +12,6 @@
 	--component-favicon-user-select: none;
 	--component-favicon-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-favicon-typography-letter-spacing: 0rem;
+	--component-favicon-typography-letter-spacing: 0;
 	--component-favicon-typography-font-width: 100;
 }