@penskemediacorp/larva 0.4.4-develop.1 → 0.5.2

package/build/tokens/{build/bbpro.raw.json → rollingstone-2022.raw.json}

@@ -225,17 +225,17 @@
   },
   "props": {
     "BORDER_COLOR_GREY_LIGHTEST": {
-      "value": "rgb(237, 235, 235)",
-      "type": "color",
       "category": "hr-color",
-      "originalValue": "#EDEBEB",
+      "type": "color",
+      "value": "rgb(239, 239, 239)",
+      "originalValue": "rgb(239, 239, 239)",
       "name": "BORDER_COLOR_GREY_LIGHTEST"
     },
     "BORDER_COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "rgb(165, 133, 83)",
       "name": "BORDER_COLOR_BRAND_SECONDARY_LIGHT"
     },
     "BORDER_COLOR_GREY_LIGHT": {
@@ -246,38 +246,38 @@
       "name": "BORDER_COLOR_GREY_LIGHT"
     },
     "BORDER_COLOR_GREY_DARK": {
-      "value": "rgb(76, 81, 103)",
-      "type": "color",
       "category": "hr-color",
-      "originalValue": "#4C5167",
+      "type": "color",
+      "value": "rgb(102, 102, 102)",
+      "originalValue": "rgb(102, 102, 102)",
       "name": "BORDER_COLOR_GREY_DARK"
     },
     "BORDER_COLOR_BRAND_SECONDARY_DARK": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "BORDER_COLOR_BRAND_SECONDARY_DARK"
     },
     "BORDER_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(203, 0, 27)",
-      "type": "color",
       "category": "hr-color",
-      "originalValue": "#CB001B",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "{!BLACK}",
       "name": "BORDER_COLOR_BRAND_SECONDARY"
     },
     "BORDER_COLOR_GREY": {
-      "value": "rgb(130, 137, 161)",
-      "type": "color",
       "category": "hr-color",
-      "originalValue": "#8289A1",
+      "type": "color",
+      "value": "rgb(118, 118, 118)",
+      "originalValue": "rgb(118, 118, 118)",
       "name": "BORDER_COLOR_GREY"
     },
     "BORDER_COLOR_BRAND_PRIMARY_LIGHT": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BORDER_COLOR_BRAND_PRIMARY_LIGHT"
     },
     "BORDER_COLOR_WHITE": {
@@ -290,15 +290,15 @@
     "BORDER_COLOR_BRAND_PRIMARY_DARK": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BORDER_COLOR_BRAND_PRIMARY_DARK"
     },
     "BORDER_COLOR_BRAND_PRIMARY": {
-      "value": "rgb(203, 0, 27)",
-      "type": "color",
       "category": "hr-color",
-      "originalValue": "#CB001B",
+      "type": "color",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BORDER_COLOR_BRAND_PRIMARY"
     },
     "BACKGROUND_COLOR_GREY_LIGHT": {
@@ -309,38 +309,38 @@
       "name": "BACKGROUND_COLOR_GREY_LIGHT"
     },
     "BACKGROUND_COLOR_GREY_LIGHTEST": {
-      "value": "rgb(237, 235, 235)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#EDEBEB",
+      "type": "color",
+      "value": "rgb(239, 239, 239)",
+      "originalValue": "rgb(239, 239, 239)",
       "name": "BACKGROUND_COLOR_GREY_LIGHTEST"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY_DARK": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY_DARK"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "rgb(165, 133, 83)",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT"
     },
     "BACKGROUND_COLOR_GREY_DARK": {
-      "value": "rgb(76, 81, 103)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#4C5167",
+      "type": "color",
+      "value": "rgb(102, 102, 102)",
+      "originalValue": "rgb(102, 102, 102)",
       "name": "BACKGROUND_COLOR_GREY_DARK"
     },
     "BACKGROUND_COLOR_GREY": {
-      "value": "rgb(130, 137, 161)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#8289A1",
+      "type": "color",
+      "value": "rgb(118, 118, 118)",
+      "originalValue": "rgb(118, 118, 118)",
       "name": "BACKGROUND_COLOR_GREY"
     },
     "BACKGROUND_COLOR_BODY": {
@@ -352,31 +352,31 @@
       "name": "BACKGROUND_COLOR_BODY"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(203, 0, 27)",
+      "value": "rgb(122, 89, 45)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "#CB001B",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY"
     },
     "BACKGROUND_COLOR_BLACK": {
-      "value": "rgb(16, 17, 25)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#101119",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "{!BLACK}",
       "name": "BACKGROUND_COLOR_BLACK"
     },
     "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT"
     },
     "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BACKGROUND_COLOR_BRAND_PRIMARY_DARK"
     },
     "BACKGROUND_COLOR_WHITE": {
@@ -387,45 +387,46 @@
       "name": "BACKGROUND_COLOR_WHITE"
     },
     "BACKGROUND_COLOR_BRAND_PRIMARY": {
-      "value": "rgb(203, 0, 27)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#CB001B",
+      "type": "color",
+      "value": "rgb(215, 25, 32)",
+      "comment": "The primary brand color. This should be dark in hue, and have sufficient contrast with white text.",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "BACKGROUND_COLOR_BRAND_PRIMARY"
     },
     "BACKGROUND_COLOR_GREY_DARKEST": {
-      "value": "rgb(43, 46, 60)",
-      "type": "color",
       "category": "background-color",
-      "originalValue": "#2B2E3C",
+      "type": "color",
+      "value": "rgb(64, 64, 64)",
+      "originalValue": "rgb(64, 64, 64)",
       "name": "BACKGROUND_COLOR_GREY_DARKEST"
     },
     "COLOR_BRAND_SECONDARY": {
-      "value": "rgb(203, 0, 27)",
-      "type": "color",
       "category": "text-color",
-      "originalValue": "#CB001B",
+      "type": "color",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "COLOR_BRAND_SECONDARY"
     },
     "COLOR_BLACK": {
-      "value": "rgb(16, 17, 25)",
-      "type": "color",
       "category": "text-color",
-      "originalValue": "#101119",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "{!BLACK}",
       "name": "COLOR_BLACK"
     },
     "COLOR_BRAND_PRIMARY_LIGHT": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "COLOR_BRAND_PRIMARY_LIGHT"
     },
     "COLOR_BRAND_PRIMARY_DARK": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "COLOR_BRAND_PRIMARY_DARK"
     },
     "COLOR_WHITE": {
@@ -436,91 +437,91 @@
       "name": "COLOR_WHITE"
     },
     "COLOR_BRAND_PRIMARY": {
-      "value": "rgb(203, 0, 27)",
-      "type": "color",
       "category": "text-color",
-      "originalValue": "#CB001B",
+      "type": "color",
+      "value": "rgb(215, 25, 32)",
+      "originalValue": "rgb(215, 25, 32)",
       "name": "COLOR_BRAND_PRIMARY"
     },
     "COLOR_GREY_LIGHT": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(230, 230, 230)",
-      "originalValue": "{!GREY_90}",
+      "value": "rgb(204, 204, 204)",
+      "originalValue": "rgb(204, 204, 204)",
       "name": "COLOR_GREY_LIGHT"
     },
     "COLOR_BRAND_SECONDARY_DARK": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "COLOR_BRAND_SECONDARY_DARK"
     },
     "COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "rgb(165, 133, 83)",
       "name": "COLOR_BRAND_SECONDARY_LIGHT"
     },
     "COLOR_GREY_DARK": {
-      "value": "rgb(76, 81, 103)",
-      "type": "color",
       "category": "text-color",
-      "originalValue": "#4C5167",
+      "type": "color",
+      "value": "rgb(102, 102, 102)",
+      "originalValue": "rgb(102, 102, 102)",
       "name": "COLOR_GREY_DARK"
     },
     "COLOR_GREY": {
-      "value": "rgb(130, 137, 161)",
-      "type": "color",
       "category": "text-color",
-      "originalValue": "#8289A1",
+      "type": "color",
+      "value": "rgb(118, 118, 118)",
+      "originalValue": "rgb(118, 118, 118)",
       "name": "COLOR_GREY"
     },
     "FONT_FAMILY_PRIMARY_FANCY": {
-      "value": "'Fletcha S', Georgia, sans-serif",
-      "type": "font-family",
       "category": "font-family",
-      "comment": "The webfont for font-family-primary.",
-      "originalValue": "'Fletcha S', Georgia, sans-serif",
+      "value": "'Publico Banner', serif",
+      "type": "font",
+      "comment": "The webfont, loaded async",
+      "originalValue": "'Publico Banner', serif",
       "name": "FONT_FAMILY_PRIMARY_FANCY"
     },
     "FONT_FAMILY_PRIMARY": {
-      "value": "'Georgia', serif",
-      "type": "font-family",
       "category": "font-family",
-      "comment": "The fallback font for font-family-primary.",
-      "originalValue": "'Georgia', serif",
+      "value": "'Publico Headline', serif",
+      "type": "font",
+      "comment": "Fallback for primary-fancy",
+      "originalValue": "'Publico Headline', serif",
       "name": "FONT_FAMILY_PRIMARY"
     },
     "FONT_FAMILY_SECONDARY_FANCY": {
-      "value": "'neue-haas-grotesk-display', Arial, serif",
-      "type": "font-family",
       "category": "font-family",
-      "comment": "The webfont for font-family-secondary.",
-      "originalValue": "'neue-haas-grotesk-display', Arial, serif",
+      "value": "Arial, sams-serif",
+      "type": "font",
+      "comment": "The webfont, loaded async",
+      "originalValue": "Arial, sams-serif",
       "name": "FONT_FAMILY_SECONDARY_FANCY"
     },
     "FONT_FAMILY_SECONDARY": {
-      "value": "Arial, serif",
-      "type": "font-family",
       "category": "font-family",
-      "comment": "Fallback from font-family-secondary",
-      "originalValue": "Arial, serif",
+      "value": "'Publico Headline', serif",
+      "type": "font",
+      "comment": "Fallback for secondary-fancy",
+      "originalValue": "'Publico Headline', serif",
       "name": "FONT_FAMILY_SECONDARY"
     },
     "FONT_FAMILY_BODY": {
-      "value": "'Georgia', Helvetica, sans-serif",
-      "type": "font-family",
       "category": "font-family",
+      "value": "'Georgia', Helvetica, sans-serif",
+      "type": "font",
       "originalValue": "'Georgia', Helvetica, sans-serif",
       "name": "FONT_FAMILY_BODY"
     },
     "FONT_FAMILY_BASIC": {
-      "value": "Helvetica, sans-serif",
-      "type": "font-family",
       "category": "font-family",
-      "originalValue": "Helvetica, sans-serif",
+      "value": "'Graphik', sans-serif",
+      "type": "font-family",
+      "originalValue": "'Graphik', sans-serif",
       "name": "FONT_FAMILY_BASIC"
     },
     "FONT_WEIGHT_LIGHT": {
@@ -635,155 +636,6 @@
       "value": "2rem",
       "originalValue": "2rem",
       "name": "SPACING_2"
-    },
-    "BACKGROUND_COLOR_BRAND_ACCENT_RED": {
-      "value": "rgb(251, 103, 107)",
-      "type": "color",
-      "category": "background-color",
-      "originalValue": "#FB676B",
-      "name": "BACKGROUND_COLOR_BRAND_ACCENT_RED"
-    },
-    "COLOR_GREY_LIGH": {
-      "value": "rgb(213, 213, 213)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#D5D5D5",
-      "name": "COLOR_GREY_LIGH"
-    },
-    "COLOR_BRAND_ACCENT_GREEN": {
-      "value": "rgb(0, 221, 161)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#00DDA1",
-      "name": "COLOR_BRAND_ACCENT_GREEN"
-    },
-    "BORDER_COLOR_BRAND_ACCENT_RED": {
-      "value": "rgb(251, 103, 107)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#FB676B",
-      "name": "BORDER_COLOR_BRAND_ACCENT_RED"
-    },
-    "BORDER_COLOR_BRAND_ACCENT_BLUE": {
-      "value": "rgb(118, 186, 223)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#76BADF",
-      "name": "BORDER_COLOR_BRAND_ACCENT_BLUE"
-    },
-    "BACKGROUND_COLOR_BRAND_ACCENT_BLUE": {
-      "value": "rgb(118, 186, 223)",
-      "type": "color",
-      "category": "background-color",
-      "originalValue": "#76BADF",
-      "name": "BACKGROUND_COLOR_BRAND_ACCENT_BLUE"
-    },
-    "COLOR_GREY_DARKEST": {
-      "value": "rgb(43, 46, 60)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#2B2E3C",
-      "name": "COLOR_GREY_DARKEST"
-    },
-    "BORDER_COLOR_GREY_LIGH": {
-      "value": "rgb(213, 213, 213)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#D5D5D5",
-      "name": "BORDER_COLOR_GREY_LIGH"
-    },
-    "BACKGROUND_COLOR_BRAND_ACCENT": {
-      "value": "rgb(207, 213, 230)",
-      "type": "color",
-      "category": "background-color",
-      "originalValue": "#CFD5E6",
-      "name": "BACKGROUND_COLOR_BRAND_ACCENT"
-    },
-    "BORDER_COLOR_BLACK": {
-      "value": "rgb(16, 17, 25)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#101119",
-      "name": "BORDER_COLOR_BLACK"
-    },
-    "COLOR_BRAND_ACCENT_RED": {
-      "value": "rgb(251, 103, 107)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#FB676B",
-      "name": "COLOR_BRAND_ACCENT_RED"
-    },
-    "BACKGROUND_COLOR_GREY_LIGH": {
-      "value": "rgb(213, 213, 213)",
-      "type": "color",
-      "category": "background-color",
-      "originalValue": "#D5D5D5",
-      "name": "BACKGROUND_COLOR_GREY_LIGH"
-    },
-    "BORDER_COLOR_BRAND_ACCENT": {
-      "value": "rgb(207, 213, 230)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#CFD5E6",
-      "name": "BORDER_COLOR_BRAND_ACCENT"
-    },
-    "BACKGROUND_COLOR_BRAND_ACCENT_GREEN": {
-      "value": "rgb(0, 221, 161)",
-      "type": "color",
-      "category": "background-color",
-      "originalValue": "#00DDA1",
-      "name": "BACKGROUND_COLOR_BRAND_ACCENT_GREEN"
-    },
-    "COLOR_GREY_LIGHTEST": {
-      "value": "rgb(237, 235, 235)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#EDEBEB",
-      "name": "COLOR_GREY_LIGHTEST"
-    },
-    "BORDER_COLOR_BRAND_ACCENT_GREEN": {
-      "value": "rgb(0, 221, 161)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#00DDA1",
-      "name": "BORDER_COLOR_BRAND_ACCENT_GREEN"
-    },
-    "FONT_FAMILY_ACCENT": {
-      "value": "Arial, serif",
-      "type": "font-family",
-      "category": "font-family",
-      "comment": "The fallback for the accent font",
-      "originalValue": "Arial, serif",
-      "name": "FONT_FAMILY_ACCENT"
-    },
-    "COLOR_BRAND_ACCENT_BLUE": {
-      "value": "rgb(118, 186, 223)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#76BADF",
-      "name": "COLOR_BRAND_ACCENT_BLUE"
-    },
-    "COLOR_BRAND_ACCENT": {
-      "value": "rgb(207, 213, 230)",
-      "type": "color",
-      "category": "text-color",
-      "originalValue": "#CFD5E6",
-      "name": "COLOR_BRAND_ACCENT"
-    },
-    "BORDER_COLOR_GREY_DARKEST": {
-      "value": "rgb(43, 46, 60)",
-      "type": "color",
-      "category": "hr-color",
-      "originalValue": "#2B2E3C",
-      "name": "BORDER_COLOR_GREY_DARKEST"
-    },
-    "FONT_FAMILY_ACCENT_FANCY": {
-      "value": "'acumin-pro-condensed', Arial, sans-serif",
-      "type": "font-family",
-      "category": "font-family",
-      "comment": "The accent webfont, loaded async",
-      "originalValue": "'acumin-pro-condensed', Arial, sans-serif",
-      "name": "FONT_FAMILY_ACCENT_FANCY"
     }
   }
 }

package/build/tokens/rollingstone.custom-properties.css

@@ -19,7 +19,7 @@
   --background-color-grey: rgb(169, 169, 173);
   /* The background color of the main body of the site. */
   --background-color-body: rgb(255, 255, 255);
-  --background-color-brand-secondary: rgb(244, 243, 241);
+  --background-color-brand-secondary: rgb(122, 89, 45);
   --background-color-black: rgb(0, 0, 0);
   --background-color-brand-primary-light: rgb(236, 28, 36);
   --background-color-brand-primary-dark: rgb(146, 7, 0);

package/build/tokens/rollingstone.json

@@ -17,7 +17,7 @@
   "BACKGROUND_COLOR_GREY_DARK": "rgb(123, 124, 132)",
   "BACKGROUND_COLOR_GREY": "rgb(169, 169, 173)",
   "BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
-  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(244, 243, 241)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(122, 89, 45)",
   "BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
   "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
   "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(146, 7, 0)",

package/build/tokens/rollingstone.map.scss

@@ -19,7 +19,7 @@ $rollingstone-map: (
   'background-color-grey': (rgb(169, 169, 173)),
   /* The background color of the main body of the site. */
   'background-color-body': (rgb(255, 255, 255)),
-  'background-color-brand-secondary': (rgb(244, 243, 241)),
+  'background-color-brand-secondary': (rgb(122, 89, 45)),
   'background-color-black': (rgb(0, 0, 0)),
   'background-color-brand-primary-light': (rgb(236, 28, 36)),
   'background-color-brand-primary-dark': (rgb(146, 7, 0)),

package/build/tokens/rollingstone.raw.json

@@ -352,10 +352,10 @@
       "name": "BACKGROUND_COLOR_BODY"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(244, 243, 241)",
+      "value": "rgb(122, 89, 45)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "rgb(244, 243, 241)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY"
     },
     "BACKGROUND_COLOR_BLACK": {

package/build/tokens/variety-compat.custom-properties.css

@@ -0,0 +1,36 @@
+
+:root {
+  --color-brand-secondary: rgb(238, 232, 9);
+  --border-color-grey-lightest: rgb(247, 247, 247);
+  --background-color-grey-light: rgb(230, 230, 230);
+  --background-color-grey-lightest: rgb(247, 247, 247);
+  --color-black: rgb(0, 0, 0);
+  --border-color-brand-secondary-light: rgb(243, 245, 203);
+  --border-color-grey-light: rgb(230, 230, 230);
+  --background-color-brand-secondary-light: rgb(243, 245, 203);
+  --color-brand-primary-dark: rgb(36, 56, 66);
+  --border-color-grey-dark: rgb(106, 106, 106);
+  --background-color-grey-dark: rgb(106, 106, 106);
+  --background-color-grey: rgb(140, 140, 140);
+  --color-white: rgb(255, 255, 255);
+  --border-color-brand-secondary: rgb(238, 232, 9);
+  --border-color-grey: rgb(140, 140, 140);
+  --color-brand-primary: rgb(107, 123, 132);
+  /* The secondary brand color. This should be lighter in hue, and sufficient contrast with black text. */
+  --background-color-brand-secondary: rgb(238, 232, 9);
+  --background-color-brand-accent: rgb(26, 40, 47);
+  --color-grey-light: rgb(230, 230, 230);
+  --background-color-black: rgb(0, 0, 0);
+  --color-brand-secondary-light: rgb(243, 245, 203);
+  --background-color-brand-primary-dark: rgb(36, 56, 66);
+  --border-color-white: rgb(255, 255, 255);
+  --border-color-brand-primary-dark: rgb(36, 56, 66);
+  --color-grey-dark: rgb(106, 106, 106);
+  --border-color-brand-primary: rgb(107, 123, 132);
+  --color-grey: rgb(140, 140, 140);
+  --background-color-white: rgb(255, 255, 255);
+  /* The primary brand color. This should be dark in hue, and have sufficient contrast with white text. */
+  --background-color-brand-primary: rgb(107, 123, 132);
+  --background-color-grey-darkest: rgb(50, 50, 50);
+  --color-brand-accent: rgb(243, 112, 33);
+}

package/build/tokens/variety-compat.json

@@ -0,0 +1,33 @@
+{
+  "COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BORDER_COLOR_GREY_LIGHTEST": "rgb(247, 247, 247)",
+  "BACKGROUND_COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(247, 247, 247)",
+  "COLOR_BLACK": "rgb(0, 0, 0)",
+  "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "BORDER_COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "BORDER_COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BACKGROUND_COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BACKGROUND_COLOR_GREY": "rgb(140, 140, 140)",
+  "COLOR_WHITE": "rgb(255, 255, 255)",
+  "BORDER_COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BORDER_COLOR_GREY": "rgb(140, 140, 140)",
+  "COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(26, 40, 47)",
+  "COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
+  "COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BORDER_COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "COLOR_GREY": "rgb(140, 140, 140)",
+  "BACKGROUND_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "BACKGROUND_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
+  "COLOR_BRAND_ACCENT": "rgb(243, 112, 33)"
+}