@guardian/stand 0.0.5 → 0.0.7

package/dist/components/util.js

@@ -0,0 +1,17 @@
+const isObject = (obj) => obj && typeof obj === "object";
+function mergeDeep(obj1, obj2) {
+  return [obj1, obj2].reduce((prev, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const pVal = prev[key];
+      const oVal = obj[key];
+      if (isObject(pVal) && isObject(oVal)) {
+        prev[key] = mergeDeep(pVal, oVal);
+      } else {
+        prev[key] = oVal;
+      }
+    });
+    return prev;
+  }, {});
+}
+
+export { mergeDeep };

package/dist/index.cjs

@@ -1,7 +1,22 @@
 'use strict';
 
-var Byline = require('./byline/Byline.cjs');
+var Byline = require('./components/byline/Byline.cjs');
+var TagTable = require('./components/tag-picker/TagTable.cjs');
+var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
+var colors = require('./styleD/build/typescript/base/colors.cjs');
+var typography = require('./styleD/build/typescript/base/typography.cjs');
+var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
+var typography$1 = require('./styleD/build/typescript/semantic/typography.cjs');
+var typography$2 = require('./styleD/utils/semantic/typography.cjs');
 
 
 
 exports.Byline = Byline.Byline;
+exports.TagTable = TagTable.TagTable;
+exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
+exports.baseColors = colors.baseColors;
+exports.baseTypography = typography.baseTypography;
+exports.semanticColors = colors$1.semanticColors;
+exports.semanticTypography = typography$1.semanticTypography;
+exports.convertTypographyToEmotionObjectStyle = typography$2.convertTypographyToEmotionObjectStyle;
+exports.convertTypographyToEmotionStringStyle = typography$2.convertTypographyToEmotionStringStyle;

package/dist/index.js

@@ -1 +1,8 @@
-export { Byline } from './byline/Byline.js';
+export { Byline } from './components/byline/Byline.js';
+export { TagTable } from './components/tag-picker/TagTable.js';
+export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
+export { baseColors } from './styleD/build/typescript/base/colors.js';
+export { baseTypography } from './styleD/build/typescript/base/typography.js';
+export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
+export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
+export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';

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

@@ -0,0 +1,122 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--base-colors-neutral-0: #000000;
+	--base-colors-neutral-50: #121212;
+	--base-colors-neutral-100: #333333;
+	--base-colors-neutral-200: #545454;
+	--base-colors-neutral-300: #666666;
+	--base-colors-neutral-400: #8d8d8d;
+	--base-colors-neutral-500: #999999;
+	--base-colors-neutral-550: #aeaeae;
+	--base-colors-neutral-600: #bababa;
+	--base-colors-neutral-625: #c1c1c1;
+	--base-colors-neutral-650: #cccccc;
+	--base-colors-neutral-700: #dcdcdc;
+	--base-colors-neutral-750: #e6e6e6;
+	--base-colors-neutral-800: #ededed;
+	--base-colors-neutral-850: #f6f6f6;
+	--base-colors-neutral-900: #ffffff;
+	--base-colors-red-50: #3d0e08;
+	--base-colors-red-100: #65170e;
+	--base-colors-red-200: #8c2113;
+	--base-colors-red-300: #b42a19;
+	--base-colors-red-400: #db331e;
+	--base-colors-red-500: #e15847;
+	--base-colors-red-600: #e87c6f;
+	--base-colors-red-700: #eea198;
+	--base-colors-red-800: #f5c6c0;
+	--base-colors-red-900: #fbebe9;
+	--base-colors-blue-50: #061d3c;
+	--base-colors-blue-100: #092f62;
+	--base-colors-blue-200: #0d4289;
+	--base-colors-blue-300: #1054af;
+	--base-colors-blue-400: #1467d6;
+	--base-colors-blue-500: #3e82dd;
+	--base-colors-blue-600: #699ee5;
+	--base-colors-blue-700: #93b9ec;
+	--base-colors-blue-800: #bdd4f4;
+	--base-colors-blue-900: #e8f0fb;
+	--base-colors-cyan-50: #00202f;
+	--base-colors-cyan-100: #00344e;
+	--base-colors-cyan-200: #00496c;
+	--base-colors-cyan-300: #005d8b;
+	--base-colors-cyan-400: #0072a9;
+	--base-colors-cyan-500: #2e8bb8;
+	--base-colors-cyan-600: #5ca5c8;
+	--base-colors-cyan-700: #8abed7;
+	--base-colors-cyan-800: #b8d8e7;
+	--base-colors-cyan-900: #e6f1f6;
+	--base-colors-teal-50: #050e0f;
+	--base-colors-teal-100: #0e2729;
+	--base-colors-teal-200: #174044;
+	--base-colors-teal-300: #287279;
+	--base-colors-teal-400: #318b94;
+	--base-colors-teal-500: #56a0a7;
+	--base-colors-teal-600: #7bb5bb;
+	--base-colors-teal-700: #a0cace;
+	--base-colors-teal-800: #c5dfe1;
+	--base-colors-teal-900: #eaf3f4;
+	--base-colors-green-50: #162c11;
+	--base-colors-green-100: #24491d;
+	--base-colors-green-200: #326528;
+	--base-colors-green-300: #408233;
+	--base-colors-green-400: #4e9e3e;
+	--base-colors-green-500: #6eaf61;
+	--base-colors-green-600: #8ec183;
+	--base-colors-green-700: #aed2a6;
+	--base-colors-green-800: #cde4c9;
+	--base-colors-green-900: #edf5ec;
+	--base-colors-yellow-50: #433608;
+	--base-colors-yellow-100: #6f590c;
+	--base-colors-yellow-200: #9a7c11;
+	--base-colors-yellow-300: #c69f16;
+	--base-colors-yellow-400: #f1c21b;
+	--base-colors-yellow-500: #f4cd44;
+	--base-colors-yellow-600: #f6d86d;
+	--base-colors-yellow-700: #f9e396;
+	--base-colors-yellow-800: #fbeebf;
+	--base-colors-yellow-900: #fef9e8;
+	--base-colors-orange-50: #45260e;
+	--base-colors-orange-100: #713e17;
+	--base-colors-orange-200: #9d5621;
+	--base-colors-orange-300: #c96e2a;
+	--base-colors-orange-400: #f58633;
+	--base-colors-orange-500: #f79c58;
+	--base-colors-orange-600: #f9b27c;
+	--base-colors-orange-700: #fac7a1;
+	--base-colors-orange-800: #fcddc6;
+	--base-colors-orange-900: #fef3eb;
+	--base-colors-magenta-50: #350e20;
+	--base-colors-magenta-100: #581734;
+	--base-colors-magenta-200: #7a2048;
+	--base-colors-magenta-300: #9d295d;
+	--base-colors-magenta-400: #bf3271;
+	--base-colors-magenta-500: #cb578b;
+	--base-colors-magenta-600: #d67ca4;
+	--base-colors-magenta-700: #e2a1be;
+	--base-colors-magenta-800: #edc6d7;
+	--base-colors-magenta-900: #f9ebf1;
+	--base-colors-warm-purple-50: #220b30;
+	--base-colors-warm-purple-100: #381350;
+	--base-colors-warm-purple-200: #4e1a6f;
+	--base-colors-warm-purple-300: #64228e;
+	--base-colors-warm-purple-400: #7a29ad;
+	--base-colors-warm-purple-500: #9250bc;
+	--base-colors-warm-purple-600: #aa76cb;
+	--base-colors-warm-purple-700: #c29dd9;
+	--base-colors-warm-purple-800: #dac3e8;
+	--base-colors-warm-purple-900: #f2eaf7;
+	--base-colors-cool-purple-50: #232740;
+	--base-colors-cool-purple-100: #394069;
+	--base-colors-cool-purple-200: #505a92;
+	--base-colors-cool-purple-300: #6773bb;
+	--base-colors-cool-purple-400: #7d8ce4;
+	--base-colors-cool-purple-500: #94a1e9;
+	--base-colors-cool-purple-600: #acb5ee;
+	--base-colors-cool-purple-700: #c3caf3;
+	--base-colors-cool-purple-800: #dbdff7;
+	--base-colors-cool-purple-900: #f2f4fc;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--base-typography-family-open-sans: 'Open Sans';
+	--base-typography-family-open-sans-compact: 'Open Sans';
+	--base-typography-family-guardian-text-egyptian: GuardianTextEgyptian;
+	--base-typography-family-guardian-headline: 'GH Guardian Headline';
+	--base-typography-size-12-px: 12px;
+	--base-typography-size-14-px: 14px;
+	--base-typography-size-16-px: 16px;
+	--base-typography-size-18-px: 18px;
+	--base-typography-size-20-px: 20px;
+	--base-typography-size-24-px: 24px;
+	--base-typography-size-28-px: 28px;
+	--base-typography-size-32-px: 32px;
+	--base-typography-size-36-px: 36px;
+	--base-typography-size-42-px: 42px;
+	--base-typography-size-48-px: 48px;
+	--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;
+	--base-typography-weight-open-sans-bold: 700;
+	--base-typography-weight-open-sans-compact-light: 360;
+	--base-typography-weight-open-sans-compact-normal: 460;
+	--base-typography-weight-open-sans-compact-semi-bold: 600;
+	--base-typography-weight-open-sans-compact-bold: 700;
+	--base-typography-width-open-sans: 95;
+	--base-typography-width-open-sans-compact: 88;
+	--base-typography-style-normal: normal;
+	--base-typography-style-italic: italic;
+	--base-typography-line-height-tight: 1.15;
+	--base-typography-line-height-normal: 1.3;
+	--base-typography-line-height-loose: 1.4;
+	--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;
+}

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

@@ -0,0 +1,36 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-byline-color: #000000;
+	--component-byline-background-color: #ffffff;
+	--component-byline-readonly-background-color: #dcdcdc;
+	--component-byline-border-color: #000000;
+	--component-byline-border-width: 1px;
+	--component-byline-border-style: solid;
+	--component-byline-line-height: 1.8;
+	--component-byline-chip-color: #000000;
+	--component-byline-chip-border-color: #dcdcdc;
+	--component-byline-chip-border-width: 1px;
+	--component-byline-chip-border-style: solid;
+	--component-byline-chip-border-radius: 8px;
+	--component-byline-chip-padding-x: 4px;
+	--component-byline-chip-padding-y: 2px;
+	--component-byline-chip-selected-border-color: #bdd4f4;
+	--component-byline-chip-tagged-background-color: #dcdcdc;
+	--component-byline-chip-untagged-color: #000000;
+	--component-byline-dropdown-border-color: #cccccc;
+	--component-byline-dropdown-border-width: 1px;
+	--component-byline-dropdown-border-style: solid;
+	--component-byline-dropdown-background-color: #ffffff;
+	--component-byline-dropdown-li-color: #000000;
+	--component-byline-dropdown-li-border-bottom-color: #cccccc;
+	--component-byline-dropdown-li-border-bottom-width: 1px;
+	--component-byline-dropdown-li-border-bottom-style: solid;
+	--component-byline-dropdown-li-selected-background-color: #56a0a7;
+	--component-byline-dropdown-li-selected-color: #ffffff;
+	--component-byline-dropdown-max-height: 320px;
+	--component-byline-invisibles-color: #bababa;
+	--component-byline-placeholder-color: #8d8d8d;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-tag-autocomplete-input-color: #000000;
+	--component-tag-autocomplete-input-background-color: #ffffff;
+	--component-tag-autocomplete-input-disabled-background-color: #dcdcdc;
+	--component-tag-autocomplete-input-border-width: 1px;
+	--component-tag-autocomplete-input-border-style: solid;
+	--component-tag-autocomplete-input-border-color: #8d8d8d;
+	--component-tag-autocomplete-input-padding: 11px;
+	--component-tag-autocomplete-listbox-border-width: 1px;
+	--component-tag-autocomplete-listbox-border-style: solid;
+	--component-tag-autocomplete-listbox-border-color: #8d8d8d;
+	--component-tag-autocomplete-listbox-padding-y: 8px;
+	--component-tag-autocomplete-listbox-padding-x: 0px;
+	--component-tag-autocomplete-listbox-background-color: #ffffff;
+	--component-tag-autocomplete-listbox-item-padding-y: 8px;
+	--component-tag-autocomplete-listbox-item-padding-x: 12px;
+	--component-tag-autocomplete-listbox-item-background-hover-color: #ededed;
+	--component-tag-autocomplete-listbox-item-background-focused-color: #ededed;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-tag-table-heading-background-color: #dcdcdc;
+	--component-tag-table-heading-font-weight: 700;
+	--component-tag-table-heading-padding-top: 3px;
+	--component-tag-table-heading-padding-right: 5px;
+	--component-tag-table-heading-padding-bottom: 3px;
+	--component-tag-table-heading-padding-left: 12px;
+	--component-tag-table-cell-padding-x: 5px;
+	--component-tag-table-cell-padding-y: 3px;
+	--component-tag-table-cell-first-cell-padding-left: 12px;
+	--component-tag-table-cell-border-between-cells-border-width: 1px;
+	--component-tag-table-cell-border-between-cells-border-style: solid;
+	--component-tag-table-cell-border-between-cells-border-color: #ffffff;
+	--component-tag-table-row-height: 28px;
+	--component-tag-table-row-background-color: #ededed;
+	--component-tag-table-row-background-hover-color: #f6f6f6;
+	--component-tag-table-row-border-bottom-border-width: 1px;
+	--component-tag-table-row-border-bottom-border-style: solid;
+	--component-tag-table-row-border-bottom-border-color: #ffffff;
+	--component-tag-table-row-first-row-background-color: #aed2a6;
+	--component-tag-table-row-first-row-background-hover-color: #8ec183;
+	--component-tag-table-add-button-color: #ffffff;
+	--component-tag-table-add-button-padding-x: 10px;
+	--component-tag-table-add-button-padding-y: 0px;
+	--component-tag-table-add-button-background-color: #8d8d8d;
+	--component-tag-table-add-button-background-hover-color: #545454;
+	--component-tag-table-add-button-font-weight: 400;
+	--component-tag-table-add-button-font-size: 13px;
+	--component-tag-table-type-badge-color: #000000;
+	--component-tag-table-type-badge-background-color: #ffffff;
+	--component-tag-table-type-badge-padding-x: 6px;
+	--component-tag-table-type-badge-padding-y: 2px;
+	--component-tag-table-type-badge-font-weight: 700;
+	--component-tag-table-type-badge-font-size: 10px;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-colors-text-primary: #000000;
+	--semantic-colors-text-secondary: #333333;
+	--semantic-colors-text-tertiary: #666666;
+	--semantic-colors-text-inverse-default: #dcdcdc;
+	--semantic-colors-text-inverse-secondary: #cccccc;
+	--semantic-colors-text-inverse-tertiary: #aeaeae;
+	--semantic-colors-text-inverse-strong: #ffffff;
+	--semantic-colors-text-warning: #8c2113;
+	--semantic-colors-text-success: #326528;
+	--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-bg-default-on-dark: #121212;
+	--semantic-colors-bg-default-on-light: #ffffff;
+	--semantic-colors-status-status-draft: #f1c21b;
+	--semantic-colors-status-status-live: #4e9e3e;
+	--semantic-colors-status-status-selected: #0072a9;
+}

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

@@ -0,0 +1,138 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-typography-title-sm-font: normal 700 18px/1.15
+		'GH Guardian Headline';
+	--semantic-typography-title-sm-letter-spacing: 0px;
+	--semantic-typography-title-sm-font-width: 100;
+	--semantic-typography-title-md-font: normal 700 20px/1.15
+		'GH Guardian Headline';
+	--semantic-typography-title-md-letter-spacing: 0px;
+	--semantic-typography-title-md-font-width: 100;
+	--semantic-typography-title-lg-font: normal 700 24px/1.15
+		'GH Guardian Headline';
+	--semantic-typography-title-lg-letter-spacing: 0px;
+	--semantic-typography-title-lg-font-width: 100;
+	--semantic-typography-title-xl-font: normal 700 32px/1.15
+		'GH Guardian Headline';
+	--semantic-typography-title-xl-letter-spacing: 0px;
+	--semantic-typography-title-xl-font-width: 100;
+	--semantic-typography-heading-xs-font: normal 700 12px/1.15 'Open Sans';
+	--semantic-typography-heading-xs-letter-spacing: 0px;
+	--semantic-typography-heading-xs-font-width: 95;
+	--semantic-typography-heading-sm-font: normal 700 14px/1.15 'Open Sans';
+	--semantic-typography-heading-sm-letter-spacing: -0.2px;
+	--semantic-typography-heading-sm-font-width: 95;
+	--semantic-typography-heading-md-font: normal 700 16px/1.15 'Open Sans';
+	--semantic-typography-heading-md-letter-spacing: -0.5px;
+	--semantic-typography-heading-md-font-width: 95;
+	--semantic-typography-heading-lg-font: normal 700 18px/1.15 'Open Sans';
+	--semantic-typography-heading-lg-letter-spacing: -0.5px;
+	--semantic-typography-heading-lg-font-width: 95;
+	--semantic-typography-heading-xl-font: normal 700 20px/1.15 'Open Sans';
+	--semantic-typography-heading-xl-letter-spacing: -0.5px;
+	--semantic-typography-heading-xl-font-width: 95;
+	--semantic-typography-heading-2xl-font: normal 700 24px/1.15 'Open Sans';
+	--semantic-typography-heading-2xl-letter-spacing: -1px;
+	--semantic-typography-heading-2xl-font-width: 95;
+	--semantic-typography-heading-compact-xs-font: normal 700 12px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-xs-letter-spacing: 0px;
+	--semantic-typography-heading-compact-xs-font-width: 88;
+	--semantic-typography-heading-compact-sm-font: normal 700 14px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-sm-letter-spacing: 0px;
+	--semantic-typography-heading-compact-sm-font-width: 88;
+	--semantic-typography-heading-compact-md-font: normal 700 16px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-md-letter-spacing: -0.2px;
+	--semantic-typography-heading-compact-md-font-width: 88;
+	--semantic-typography-heading-compact-lg-font: normal 700 18px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-lg-letter-spacing: -0.2px;
+	--semantic-typography-heading-compact-lg-font-width: 88;
+	--semantic-typography-heading-compact-xl-font: normal 700 20px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-xl-letter-spacing: -0.5px;
+	--semantic-typography-heading-compact-xl-font-width: 88;
+	--semantic-typography-heading-compact-2xl-font: normal 700 24px/1.15
+		'Open Sans';
+	--semantic-typography-heading-compact-2xl-letter-spacing: -0.5px;
+	--semantic-typography-heading-compact-2xl-font-width: 88;
+	--semantic-typography-body-sm-font: normal 460 14px/1.3 'Open Sans';
+	--semantic-typography-body-sm-letter-spacing: 0px;
+	--semantic-typography-body-sm-font-width: 95;
+	--semantic-typography-body-md-font: normal 460 16px/1.3 'Open Sans';
+	--semantic-typography-body-md-letter-spacing: 0px;
+	--semantic-typography-body-md-font-width: 95;
+	--semantic-typography-body-lg-font: normal 460 18px/1.3 'Open Sans';
+	--semantic-typography-body-lg-letter-spacing: 0px;
+	--semantic-typography-body-lg-font-width: 95;
+	--semantic-typography-body-xl-font: normal 460 20px/1.3 'Open Sans';
+	--semantic-typography-body-xl-letter-spacing: 0px;
+	--semantic-typography-body-xl-font-width: 95;
+	--semantic-typography-body-italic-sm-font: italic 460 14px/1.3 'Open Sans';
+	--semantic-typography-body-italic-sm-letter-spacing: 0px;
+	--semantic-typography-body-italic-sm-font-width: 95;
+	--semantic-typography-body-italic-md-font: italic 460 16px/1.3 'Open Sans';
+	--semantic-typography-body-italic-md-letter-spacing: 0px;
+	--semantic-typography-body-italic-md-font-width: 95;
+	--semantic-typography-body-italic-lg-font: italic 460 18px/1.3 'Open Sans';
+	--semantic-typography-body-italic-lg-letter-spacing: 0px;
+	--semantic-typography-body-italic-lg-font-width: 95;
+	--semantic-typography-body-italic-xl-font: italic 460 20px/1.3 'Open Sans';
+	--semantic-typography-body-italic-xl-letter-spacing: 0px;
+	--semantic-typography-body-italic-xl-font-width: 95;
+	--semantic-typography-body-compact-sm-font: normal 460 14px/1.3 'Open Sans';
+	--semantic-typography-body-compact-sm-letter-spacing: 0px;
+	--semantic-typography-body-compact-sm-font-width: 88;
+	--semantic-typography-body-compact-md-font: normal 460 16px/1.3 'Open Sans';
+	--semantic-typography-body-compact-md-letter-spacing: 0px;
+	--semantic-typography-body-compact-md-font-width: 88;
+	--semantic-typography-body-compact-lg-font: normal 460 18px/1.3 'Open Sans';
+	--semantic-typography-body-compact-lg-letter-spacing: 0px;
+	--semantic-typography-body-compact-lg-font-width: 88;
+	--semantic-typography-body-compact-xl-font: normal 460 20px/1.3 'Open Sans';
+	--semantic-typography-body-compact-xl-letter-spacing: 0px;
+	--semantic-typography-body-compact-xl-font-width: 88;
+	--semantic-typography-body-compact-italic-sm-font: italic 460 14px/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-sm-letter-spacing: 0px;
+	--semantic-typography-body-compact-italic-sm-font-width: 88;
+	--semantic-typography-body-compact-italic-md-font: italic 460 16px/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-md-letter-spacing: 0px;
+	--semantic-typography-body-compact-italic-md-font-width: 88;
+	--semantic-typography-body-compact-italic-lg-font: italic 460 18px/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-lg-letter-spacing: 0px;
+	--semantic-typography-body-compact-italic-lg-font-width: 88;
+	--semantic-typography-body-compact-italic-xl-font: italic 460 20px/1.3
+		'Open Sans';
+	--semantic-typography-body-compact-italic-xl-letter-spacing: 0px;
+	--semantic-typography-body-compact-italic-xl-font-width: 88;
+	--semantic-typography-meta-md-font: normal 460 12px/1.3 'Open Sans';
+	--semantic-typography-meta-md-letter-spacing: 0px;
+	--semantic-typography-meta-md-font-width: 95;
+	--semantic-typography-meta-compact-md-font: normal 460 12px/1.3 'Open Sans';
+	--semantic-typography-meta-compact-md-letter-spacing: 0px;
+	--semantic-typography-meta-compact-md-font-width: 88;
+	--semantic-typography-article-body-md-font: normal 400 16px/1.4
+		GuardianTextEgyptian;
+	--semantic-typography-article-body-md-letter-spacing: 0px;
+	--semantic-typography-article-body-md-font-width: 100;
+	--semantic-typography-article-body-bold-md-font: normal 700 16px/1.4
+		GuardianTextEgyptian;
+	--semantic-typography-article-body-bold-md-letter-spacing: 0px;
+	--semantic-typography-article-body-bold-md-font-width: 100;
+	--semantic-typography-article-body-italic-md-font: italic 400 16px/1.4
+		GuardianTextEgyptian;
+	--semantic-typography-article-body-italic-md-letter-spacing: 0px;
+	--semantic-typography-article-body-italic-md-font-width: 100;
+	--semantic-typography-article-body-bold-italic-md-font: italic 700 16px/1.4
+		GuardianTextEgyptian;
+	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0px;
+	--semantic-typography-article-body-bold-italic-md-font-width: 100;
+}

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

@@ -0,0 +1,144 @@
+'use strict';
+
+const baseColors = {
+  neutral: {
+    "0": "#000000",
+    "50": "#121212",
+    "100": "#333333",
+    "200": "#545454",
+    "300": "#666666",
+    "400": "#8d8d8d",
+    "500": "#999999",
+    "550": "#aeaeae",
+    "600": "#bababa",
+    "625": "#c1c1c1",
+    "650": "#cccccc",
+    "700": "#dcdcdc",
+    "750": "#e6e6e6",
+    "800": "#ededed",
+    "850": "#f6f6f6",
+    "900": "#ffffff"
+  },
+  red: {
+    "50": "#3d0e08",
+    "100": "#65170e",
+    "200": "#8c2113",
+    "300": "#b42a19",
+    "400": "#db331e",
+    "500": "#e15847",
+    "600": "#e87c6f",
+    "700": "#eea198",
+    "800": "#f5c6c0",
+    "900": "#fbebe9"
+  },
+  blue: {
+    "50": "#061d3c",
+    "100": "#092f62",
+    "200": "#0d4289",
+    "300": "#1054af",
+    "400": "#1467d6",
+    "500": "#3e82dd",
+    "600": "#699ee5",
+    "700": "#93b9ec",
+    "800": "#bdd4f4",
+    "900": "#e8f0fb"
+  },
+  cyan: {
+    "50": "#00202f",
+    "100": "#00344e",
+    "200": "#00496c",
+    "300": "#005d8b",
+    "400": "#0072a9",
+    "500": "#2e8bb8",
+    "600": "#5ca5c8",
+    "700": "#8abed7",
+    "800": "#b8d8e7",
+    "900": "#e6f1f6"
+  },
+  teal: {
+    "50": "#050e0f",
+    "100": "#0e2729",
+    "200": "#174044",
+    "300": "#287279",
+    "400": "#318b94",
+    "500": "#56a0a7",
+    "600": "#7bb5bb",
+    "700": "#a0cace",
+    "800": "#c5dfe1",
+    "900": "#eaf3f4"
+  },
+  green: {
+    "50": "#162c11",
+    "100": "#24491d",
+    "200": "#326528",
+    "300": "#408233",
+    "400": "#4e9e3e",
+    "500": "#6eaf61",
+    "600": "#8ec183",
+    "700": "#aed2a6",
+    "800": "#cde4c9",
+    "900": "#edf5ec"
+  },
+  yellow: {
+    "50": "#433608",
+    "100": "#6f590c",
+    "200": "#9a7c11",
+    "300": "#c69f16",
+    "400": "#f1c21b",
+    "500": "#f4cd44",
+    "600": "#f6d86d",
+    "700": "#f9e396",
+    "800": "#fbeebf",
+    "900": "#fef9e8"
+  },
+  orange: {
+    "50": "#45260e",
+    "100": "#713e17",
+    "200": "#9d5621",
+    "300": "#c96e2a",
+    "400": "#f58633",
+    "500": "#f79c58",
+    "600": "#f9b27c",
+    "700": "#fac7a1",
+    "800": "#fcddc6",
+    "900": "#fef3eb"
+  },
+  magenta: {
+    "50": "#350e20",
+    "100": "#581734",
+    "200": "#7a2048",
+    "300": "#9d295d",
+    "400": "#bf3271",
+    "500": "#cb578b",
+    "600": "#d67ca4",
+    "700": "#e2a1be",
+    "800": "#edc6d7",
+    "900": "#f9ebf1"
+  },
+  "warm-purple": {
+    "50": "#220b30",
+    "100": "#381350",
+    "200": "#4e1a6f",
+    "300": "#64228e",
+    "400": "#7a29ad",
+    "500": "#9250bc",
+    "600": "#aa76cb",
+    "700": "#c29dd9",
+    "800": "#dac3e8",
+    "900": "#f2eaf7"
+  },
+  "cool-purple": {
+    "50": "#232740",
+    "100": "#394069",
+    "200": "#505a92",
+    "300": "#6773bb",
+    "400": "#7d8ce4",
+    "500": "#94a1e9",
+    "600": "#acb5ee",
+    "700": "#c3caf3",
+    "800": "#dbdff7",
+    "900": "#f2f4fc"
+  }
+};
+
+exports.baseColors = baseColors;