@sage/design-tokens 1.62.0 → 1.63.0

package/css/base.css

@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Sep 2021 13:20:17 GMT
+ * Generated on Thu, 16 Sep 2021 16:52:38 GMT
  */
 
 :root {
@@ -16,30 +16,13 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsComponentsNavigation1000: #000000;
   --colorsComponentsNavigation000: #FFFFFF;
   --colorsComponentsNavigationTransparent: rgba(225, 225, 225, 0);
-  --colorsBrand900: #ff00ff;
-  --colorsBrand1000: #ff00ff;
-  --colorsBrand000: #ff00ff;
-  --colorsBrandLogo: #ff00ff;
-  --colorsBrandTransparent: #00FFFF;
-  --colorsUtilityMinor100: #FF00FF;
-  --colorsUtilityMinor200: #FF00FF;
-  --colorsUtilityMinor300: #FF00FF;
-  --colorsUtilityMinor400: #FF00FF;
-  --colorsUtilityMinor500: #FF00FF;
-  --colorsUtilityMinor1000: #FF00FF;
-  --colorsUtilityMinor000: #FF00FF;
-  --colorsUtilityMinor025: #FF00FF;
-  --colorsUtilityMinor050: #FF00FF;
   --colorsUtilityMajor100: #CCD6DB;
   --colorsUtilityMajor150: #B3C2C9;
   --colorsUtilityMajor200: #99ADB7;
   --colorsUtilityMajor300: #668494;
   --colorsUtilityMajor400: #335B70;
   --colorsUtilityMajor500: #00324C;
-  --colorsUtilityMajor600: #00FFFF;
-  --colorsUtilityMajor700: #00FFFF;
   --colorsUtilityMajor800: #00141E;
-  --colorsUtilityMajor900: #00FFFF;
   --colorsUtilityMajor1000: #000000;
   --colorsUtilityMajor000: #FFFFFF;
   --colorsUtilityMajor025: #F2F5F6;
@@ -52,20 +35,12 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsUtilityReadOnly400: #F2F5F6;
   --colorsUtilityReadOnly500: #E6EBED;
   --colorsUtilityReadOnly600: #CCD6DB;
-  --colorsActionMajor100: #ff00ff;
   --colorsActionMajor150: #B3D9C8;
-  --colorsActionMajor200: #C500ED;
-  --colorsActionMajor300: #C500ED;
-  --colorsActionMajor400: #C500ED;
   --colorsActionMajor500: #008146;
   --colorsActionMajor600: #006738;
   --colorsActionMajor700: #004D2A;
-  --colorsActionMajor800: #C500ED;
-  --colorsActionMajor900: #C500ED;
   --colorsActionMajor1000: #000000;
   --colorsActionMajor000: #FFFFFF;
-  --colorsActionMajor025: #C500ED;
-  --colorsActionMajor050: #C500ED;
   --colorsActionMajorTransparent: rgba(225, 225, 225, 0);
   --colorsActionMinor100: #E6EBED;
   --colorsActionMinor200: #CCD6DB;
@@ -73,9 +48,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsActionMinor400: #668494;
   --colorsActionMinor500: #335B70;
   --colorsActionMinor600: #00324C;
-  --colorsActionMinor700: #B072FF;
-  --colorsActionMinor800: #B072FF ;
-  --colorsActionMinor900: #B072FF;
   --colorsActionMinor1000: #000000;
   --colorsActionMinor000: #FFFFFF;
   --colorsActionMinor025: #FAFBFB;
@@ -87,13 +59,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsActionReadOnly400: #F2F5F6;
   --colorsActionReadOnly500: #E6EBED;
   --colorsActionReadOnly600: #CCD6DB;
-  --colorsContent900: #00FFFF;
-  --colorsContent1000: #00CCCC;
-  --colorsContent000: #9DFFFF;
-  --colorsSemanticNeutral100: #00ffff;
-  --colorsSemanticNeutral150: #00ffff;
   --colorsSemanticNeutral200: #CCD6DB;
-  --colorsSemanticNeutral400: #00ffff;
   --colorsSemanticNeutral500: #335B70;
   --colorsSemanticNeutral600: #00324C;
   --colorsSemanticNeutral1000: #000000;
@@ -114,9 +80,9 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsSemanticNegative1000: #000000;
   --colorsSemanticNegative000: #FFFFFF;
   --colorsSemanticNegativeTransparent: rgba(225, 225, 225, 0);
-  --colorsSemanticCaution400: #ED8333;
-  --colorsSemanticCaution500: #E96400;
-  --colorsSemanticCaution600: #BA5000;
+  --colorsSemanticCaution400: #f28533;
+  --colorsSemanticCaution500: #EF6700;
+  --colorsSemanticCaution600: #bf5200;
   --colorsSemanticCaution1000: #000000;
   --colorsSemanticCaution000: #FFFFFF;
   --colorsSemanticCautionTransparent: rgba(225, 225, 225, 0);
@@ -168,10 +134,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --borderWidth300: 3px;
   --borderWidth400: 4px;
   --borderWidth000: 0px;
-  --fontWeights400: Regular Beta;
-  --fontWeights500: Medium Beta;
-  --fontWeights600: SemiBold Beta;
-  --fontWeights700: Bold Beta;
   --boxShadow100: 0 10px 10px 0 rgba(0,20,29,0.1);
   --boxShadow200: 0 20px 40px 0 rgba(0,20,29,0.1);
   --boxShadow300: 0 30px 60px 0 rgba(0,20,29,0.1);
@@ -201,6 +163,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --opacity700: 70%;
   --opacity800: 80%;
   --opacity900: 90%;
+  --fontWeights400: Regular Beta;
+  --fontWeights500: Medium Beta;
+  --fontWeights600: SemiBold Beta;
+  --fontWeights700: Bold Beta;
   --lineHeights400: 125%;
   --lineHeights500: 150%;
   --fontFamiliesDefault: Sage UI;

package/css/no-theme.css

@@ -3,37 +3,235 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
  */
 /**
  * Do not edit directly
- * Generated on Thu, 16 Sep 2021 13:20:17 GMT
+ * Generated on Thu, 16 Sep 2021 16:52:38 GMT
  */
 
 :root {
-  --metaName: no theme;
+  --metaName: Base Theme;
   --metaPublic: true;
-  --colorsLogo: #ff00ff;
-  --colorsContent300: rgba(50,0,255,.3);
-  --colorsContent500: rgba(50,0,255,.55);
-  --colorsContent600: rgba(50,0,255,.65);
-  --colorsContent900: rgba(50,0,255,.9);
-  --colorsContent000: #CCFF00;
-  --colorsUtility25: #F2F5F6;
-  --colorsUtility50: #E6EBED;
-  --colorsUtility100: #CCD6DB;
-  --colorsUtility200: #99ADB6;
-  --colorsUtility300: #668592;
-  --colorsUtility400: #335C6D;
-  --colorsUtility500: #003349;
-  --colorsSemanticCaution300: #BA5000;
-  --colorsSemanticCaution500: #E96400;
-  --colorsSemanticCaution800: #ED8333;
-  --colorsSemanticFocus300: #FFDA80;
-  --colorsSemanticFocus500: #FFB500;
-  --colorsSemanticNeutral500: #335C6D;
-  --colorsSemanticNeutral700: #003349;
-  --colorsSemanticNegative500: #C7384F;
-  --colorsSemanticNegative700: #9F2D3F;
-  --colorsSemanticPositive500: #00B000;
-  --colorsSemanticPositive800: #008400;
-  --colorsBase500: #FF00FF;
-  --colorsBase700: #EE00FF;
-  --colorsBase800: #DD00FF;
+  --colorsLogo: #ef001d;
+  --colorsComponentsNavigation500: #fcccd2;
+  --colorsComponentsNavigation600: #f999a5;
+  --colorsComponentsNavigation700: #f56677;
+  --colorsComponentsNavigation1000: #f2334a;
+  --colorsComponentsNavigation000: #fde6e8;
+  --colorsComponentsNavigationTransparent: rgba(239, 0, 29, 0.3);
+  --colorsUtilityMajor100: #f999e9;
+  --colorsUtilityMajor150: #f780e4;
+  --colorsUtilityMajor200: #f566df;
+  --colorsUtilityMajor300: #f44dd9;
+  --colorsUtilityMajor400: #f233d4;
+  --colorsUtilityMajor500: #ef00c9;
+  --colorsUtilityMajor800: #bf00a1;
+  --colorsUtilityMajor1000: #8f0079;
+  --colorsUtilityMajor000: #fef2fc;
+  --colorsUtilityMajor025: #fde6fa;
+  --colorsUtilityMajor050: #fcccf4;
+  --colorsUtilityMajor075: #fab3ef;
+  --colorsUtilityMajorTransparent: rgba(239, 0, 201, 0.3);
+  --colorsUtilityDisabled400: #ed99f9;
+  --colorsUtilityDisabled500: #e880f7;
+  --colorsUtilityDisabled600: #e366f5;
+  --colorsUtilityReadOnly400: #cb4df4;
+  --colorsUtilityReadOnly500: #c433f2;
+  --colorsUtilityReadOnly600: #bc19f1;
+  --colorsActionMajor150: #daccfc;
+  --colorsActionMajor500: #9166f5;
+  --colorsActionMajor600: #6c33f2;
+  --colorsActionMajor700: #4700ef;
+  --colorsActionMajor1000: #3200a7;
+  --colorsActionMajor000: #ede6fd;
+  --colorsActionMajorTransparent: rgba(145, 102, 245, 0.3);
+  --colorsActionMinor100: #99abf9;
+  --colorsActionMinor200: #8096f7;
+  --colorsActionMinor300: #6681f5;
+  --colorsActionMinor400: #4d6cf4;
+  --colorsActionMinor500: #3357f2;
+  --colorsActionMinor600: #1942f1;
+  --colorsActionMinor1000: #001fa7;
+  --colorsActionMinor000: #e6eafd;
+  --colorsActionMinor025: #ccd5fc;
+  --colorsActionMinor050: #b3c0fa;
+  --colorsActionMinorTransparent: rgba(51, 87, 242, 0.3);
+  --colorsActionDisabled400: #cce3fc;
+  --colorsActionDisabled500: #b3d5fa;
+  --colorsActionDisabled600: #99c7f9;
+  --colorsActionReadOnly400: #4da6f4;
+  --colorsActionReadOnly500: #198df1;
+  --colorsActionReadOnly600: #0073d7;
+  --colorsSemanticNeutral200: #99f0f9;
+  --colorsSemanticNeutral500: #00d9ef;
+  --colorsSemanticNeutral600: #00aebf;
+  --colorsSemanticNeutral1000: #00828f;
+  --colorsSemanticNeutral000: #e6fbfd;
+  --colorsSemanticNeutralTransparent: rgba(0, 217, 239, 0.3);
+  --colorsSemanticFocus250: #80f7d2;
+  --colorsSemanticFocus500: #00efa5;
+  --colorsSemanticFocus1000: #007853;
+  --colorsSemanticFocus000: #e6fdf6;
+  --colorsSemanticFocusTransparent: rgba(0, 239, 165, 0.3);
+  --colorsSemanticPositive500: #ffc173;
+  --colorsSemanticPositive600: #ffb04b;
+  --colorsSemanticPositive1000: #b37527;
+  --colorsSemanticPositive000: #ffedd7;
+  --colorsSemanticPositiveTransparent: rgba(255, 167, 55, 0.3);
+  --colorsSemanticNegative500: #d5ef00;
+  --colorsSemanticNegative600: #aabf00;
+  --colorsSemanticNegative1000: #6b7800;
+  --colorsSemanticNegative000: #f7fccc;
+  --colorsSemanticNegativeTransparent: rgba(213, 239, 0, 0.3);
+  --colorsSemanticCaution400: #4dcbb9;
+  --colorsSemanticCaution500: #01b49b;
+  --colorsSemanticCaution600: #01907c;
+  --colorsSemanticCaution1000: #016c5d;
+  --colorsSemanticCaution000: #e6f8f5;
+  --colorsSemanticCautionTransparent: rgba(1, 180, 155, 0.3);
+  --colorsSemanticInfo150: #ffd7c8;
+  --colorsSemanticInfo500: #ffaf90;
+  --colorsSemanticInfo600: #ff946b;
+  --colorsSemanticInfo1000: #ff7946;
+  --colorsSemanticInfo000: #fff2ed;
+  --colorsSemanticInfoTransparent: rgba(255, 121, 70, 0.3);
+  --sizing10: 1px;
+  --sizing100: 8px;
+  --sizing125: 10px;
+  --sizing150: 12px;
+  --sizing175: 14px;
+  --sizing200: 16px;
+  --sizing250: 20px;
+  --sizing300: 24px;
+  --sizing350: 28px;
+  --sizing375: 30px;
+  --sizing400: 32px;
+  --sizing500: 40px;
+  --sizing600: 48px;
+  --sizing700: 56px;
+  --sizing800: 64px;
+  --sizing900: 72px;
+  --sizing1000: 80px;
+  --sizing025: 2px;
+  --sizing050: 4px;
+  --sizing075: 6px;
+  --sizingLogowidth: 39px;
+  --spacing100: 8px;
+  --spacing125: 10px;
+  --spacing150: 12px;
+  --spacing200: 16px;
+  --spacing250: 20px;
+  --spacing300: 24px;
+  --spacing400: 32px;
+  --spacing500: 40px;
+  --spacing600: 48px;
+  --spacing700: 56px;
+  --spacing800: 64px;
+  --spacing900: 72px;
+  --spacing000: 0;
+  --spacing025: 2px;
+  --spacing050: 4px;
+  --spacing075: 6px;
+  --borderWidth100: 1px;
+  --borderWidth200: 2px;
+  --borderWidth300: 3px;
+  --borderWidth400: 4px;
+  --borderWidth000: 0px;
+  --boxShadow100: 0 10px 10px 0 rgba(251,69,0,0.5);
+  --boxShadow200: 0 20px 40px 0 rgba(149,219,0,0.5);
+  --boxShadow300: 0 30px 60px 0 rgba(0,179,219,0.5);
+  --boxShadow400: 0 50px 80px 0 rgba(96,0,219,0.5);
+  --boxShadow000: 10px 10px 5px 5px rgba(219,0,197,0.5);
+  --fontSizes100: 14px;
+  --fontSizes200: 16px;
+  --fontSizes300: 18px;
+  --fontSizes400: 20px;
+  --fontSizes500: 22px;
+  --fontSizes600: 24px;
+  --fontSizes700: 32px;
+  --fontSizes800: 48px;
+  --fontSizes900: 56px;
+  --fontSizes1000: 64px;
+  --fontSizes010: 10px;
+  --fontSizes025: 12px;
+  --fontSizes050: 13px;
+  --opacity100: 10%;
+  --opacity200: 20%;
+  --opacity300: 30%;
+  --opacity400: 40%;
+  --opacity500: 50%;
+  --opacity550: 55%;
+  --opacity600: 60%;
+  --opacity650: 65%;
+  --opacity700: 70%;
+  --opacity800: 80%;
+  --opacity900: 90%;
+  --fontWeights400: Regular;
+  --fontWeights500: Medium;
+  --fontWeights600: SemiBold;
+  --fontWeights700: Bold;
+  --lineHeights400: 125%;
+  --lineHeights500: 150%;
+  --fontFamiliesDefault: Pridi;
+  --fontFamiliesIos: San Francisco;
+  --fontFamiliesAndroid: Roboto;
+  --fontFamiliesOther: Open Sans;
+  --borderRadiusCircle: 50%;
+  --typographyButtonLabelS: [object Object];
+  --typographyButtonLabelM: [object Object];
+  --typographyButtonLabelL: [object Object];
+  --typographyDialogTitleXs: [object Object];
+  --typographyDialogTitleS: [object Object];
+  --typographyDialogTitleMs: [object Object];
+  --typographyDialogTitleM: [object Object];
+  --typographyDialogTitleMl: [object Object];
+  --typographyDialogTitleL: [object Object];
+  --typographyDialogTitleXl: [object Object];
+  --typographyFlashTextM: [object Object];
+  --typographyFlashTextL: [object Object];
+  --typographyFormFieldLabelXs: [object Object];
+  --typographyFormFieldLabelS: [object Object];
+  --typographyFormFieldLabelM: [object Object];
+  --typographyFormFieldLabelL: [object Object];
+  --typographyFormFieldHintTextXs: [object Object];
+  --typographyFormFieldHintTextS: [object Object];
+  --typographyFormFieldHintTextM: [object Object];
+  --typographyFormFieldHintTextL: [object Object];
+  --typographyFormFieldErrorMessageXs: [object Object];
+  --typographyFormFieldErrorMessageS: [object Object];
+  --typographyFormFieldErrorMessageM: [object Object];
+  --typographyFormFieldErrorMessageL: [object Object];
+  --typographyFormFieldCautionMessageXs: [object Object];
+  --typographyFormFieldCautionMessageS: [object Object];
+  --typographyFormFieldCautionMessageM: [object Object];
+  --typographyFormFieldCautionMessageL: [object Object];
+  --typographyFormFieldInputTextXs: [object Object];
+  --typographyFormFieldInputTextS: [object Object];
+  --typographyFormFieldInputTextM: [object Object];
+  --typographyFormFieldInputTextL: [object Object];
+  --typographyFormFieldDropdownOptionsXs: [object Object];
+  --typographyFormFieldDropdownOptionsS: [object Object];
+  --typographyFormFieldDropdownOptionsM: [object Object];
+  --typographyFormFieldDropdownOptionsL: [object Object];
+  --typographyFormFieldSecondLabelXs: [object Object];
+  --typographyFormFieldSecondLabelS: [object Object];
+  --typographyFormFieldSecondLabelM: [object Object];
+  --typographyFormFieldSecondLabelL: [object Object];
+  --typographyFormFieldCharacterCountXs: [object Object];
+  --typographyFormFieldCharacterCountS: [object Object];
+  --typographyFormFieldCharacterCountM: [object Object];
+  --typographyFormFieldCharacterCountL: [object Object];
+  --typographyLinkTextM: [object Object];
+  --typographyLinkTextL: [object Object];
+  --typographyMessageHeadingM: [object Object];
+  --typographyMessageHeadingL: [object Object];
+  --typographyMessageTextM: [object Object];
+  --typographyMessageTextL: [object Object];
+  --typographyPillLabelS: [object Object];
+  --typographyPillLabelM: [object Object];
+  --typographyPillLabelL: [object Object];
+  --typographyPillLabelXl: [object Object];
+  --typographySwitchOptionLabelM: [object Object];
+  --typographySwitchOptionLabelL: [object Object];
+  --typographyTableHeaderTextM: [object Object];
+  --typographyTableCellTextM: [object Object];
+  --typographyTooltipTextM: [object Object];
+  --typographyTooltipTextL: [object Object];
 }

package/data/all.json

@@ -43,67 +43,7 @@
           }
         }
       },
-      "brand": {
-        "900": {
-          "value": "#ff00ff",
-          "type": "color"
-        },
-        "1000": {
-          "value": "#ff00ff",
-          "type": "color"
-        },
-        "000": {
-          "value": "#ff00ff",
-          "type": "color"
-        },
-        "logo": {
-          "value": "#ff00ff",
-          "type": "color"
-        },
-        "transparent": {
-          "value": "#00FFFF",
-          "type": "color"
-        }
-      },
       "utility": {
-        "minor": {
-          "100": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "200": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "300": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "400": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "500": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "1000": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "000": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "025": {
-            "value": "#FF00FF",
-            "type": "color"
-          },
-          "050": {
-            "value": "#FF00FF",
-            "type": "color"
-          }
-        },
         "major": {
           "100": {
             "value": "#CCD6DB",
@@ -129,22 +69,10 @@
             "value": "#00324C",
             "type": "color"
           },
-          "600": {
-            "value": "#00FFFF",
-            "type": "color"
-          },
-          "700": {
-            "value": "#00FFFF",
-            "type": "color"
-          },
           "800": {
             "value": "#00141E",
             "type": "color"
           },
-          "900": {
-            "value": "#00FFFF",
-            "type": "color"
-          },
           "1000": {
             "value": "#000000",
             "type": "color"
@@ -201,26 +129,10 @@
       },
       "action": {
         "major": {
-          "100": {
-            "value": "#ff00ff",
-            "type": "color"
-          },
           "150": {
             "value": "#B3D9C8",
             "type": "color"
           },
-          "200": {
-            "value": "#C500ED",
-            "type": "color"
-          },
-          "300": {
-            "value": "#C500ED",
-            "type": "color"
-          },
-          "400": {
-            "value": "#C500ED",
-            "type": "color"
-          },
           "500": {
             "value": "#008146",
             "type": "color"
@@ -233,14 +145,6 @@
             "value": "#004D2A",
             "type": "color"
           },
-          "800": {
-            "value": "#C500ED",
-            "type": "color"
-          },
-          "900": {
-            "value": "#C500ED",
-            "type": "color"
-          },
           "1000": {
             "value": "#000000",
             "type": "color"
@@ -249,14 +153,6 @@
             "value": "#FFFFFF",
             "type": "color"
           },
-          "025": {
-            "value": "#C500ED",
-            "type": "color"
-          },
-          "050": {
-            "value": "#C500ED",
-            "type": "color"
-          },
           "transparent": {
             "value": "rgba(225, 225, 225, 0)",
             "type": "color"
@@ -287,21 +183,6 @@
             "value": "#00324C",
             "type": "color"
           },
-          "700": {
-            "value": "#B072FF",
-            "type": "color",
-            "description": "if needed, replace with #00283D"
-          },
-          "800": {
-            "value": "#B072FF ",
-            "type": "color",
-            "description": "if needed replace with #001E2E"
-          },
-          "900": {
-            "value": "#B072FF",
-            "type": "color",
-            "description": "if needed replace with #00141E"
-          },
           "1000": {
             "value": "#000000",
             "type": "color"
@@ -352,40 +233,12 @@
           }
         }
       },
-      "content": {
-        "900": {
-          "value": "#00FFFF",
-          "type": "color"
-        },
-        "1000": {
-          "value": "#00CCCC",
-          "type": "color"
-        },
-        "000": {
-          "value": "#9DFFFF",
-          "type": "color"
-        }
-      },
       "semantic": {
         "neutral": {
-          "100": {
-            "value": "#00ffff",
-            "type": "color"
-          },
-          "150": {
-            "value": "#00ffff",
-            "type": "color",
-            "description": "was b3cfe5"
-          },
           "200": {
             "value": "#CCD6DB",
             "type": "color"
           },
-          "400": {
-            "value": "#00ffff",
-            "type": "color",
-            "description": "was 668592"
-          },
           "500": {
             "value": "#335B70",
             "type": "color",
@@ -476,15 +329,16 @@
         },
         "caution": {
           "400": {
-            "value": "#ED8333",
+            "value": "#f28533",
             "type": "color"
           },
           "500": {
-            "value": "#E96400",
-            "type": "color"
+            "value": "#EF6700",
+            "type": "color",
+            "description": "was #E96400"
           },
           "600": {
-            "value": "#BA5000",
+            "value": "#bf5200",
             "type": "color"
           },
           "1000": {
@@ -702,24 +556,6 @@
         "type": "borderWidth"
       }
     },
-    "fontWeights": {
-      "400": {
-        "value": "Regular Beta",
-        "type": "fontWeights"
-      },
-      "500": {
-        "value": "Medium Beta",
-        "type": "fontWeights"
-      },
-      "600": {
-        "value": "SemiBold Beta",
-        "type": "fontWeights"
-      },
-      "700": {
-        "value": "Bold Beta",
-        "type": "fontWeights"
-      }
-    },
     "boxShadow": {
       "100": {
         "value": {
@@ -872,6 +708,24 @@
         "type": "opacity"
       }
     },
+    "fontWeights": {
+      "400": {
+        "value": "Regular Beta",
+        "type": "fontWeights"
+      },
+      "500": {
+        "value": "Medium Beta",
+        "type": "fontWeights"
+      },
+      "600": {
+        "value": "SemiBold Beta",
+        "type": "fontWeights"
+      },
+      "700": {
+        "value": "Bold Beta",
+        "type": "fontWeights"
+      }
+    },
     "lineHeights": {
       "400": {
         "value": "125%",
@@ -1630,7 +1484,7 @@
   "no-theme": {
     "meta": {
       "name": {
-        "value": "no theme",
+        "value": "Base Theme",
         "type": "other"
       },
       "public": {
@@ -1640,445 +1494,1472 @@
     },
     "colors": {
       "logo": {
-        "value": "#ff00ff",
+        "value": "#ef001d",
         "type": "color"
       },
-      "content": {
-        "300": {
-          "value": "rgba(50,0,255,.3)",
-          "type": "color"
-        },
-        "500": {
-          "value": "rgba(50,0,255,.55)",
-          "type": "color"
-        },
-        "600": {
-          "value": "rgba(50,0,255,.65)",
-          "type": "color"
-        },
-        "900": {
-          "value": "rgba(50,0,255,.9)",
-          "type": "color"
-        },
-        "000": {
-          "value": "#CCFF00",
-          "type": "color"
+      "components": {
+        "navigation": {
+          "500": {
+            "value": "#fcccd2",
+            "type": "color"
+          },
+          "600": {
+            "value": "#f999a5",
+            "type": "color"
+          },
+          "700": {
+            "value": "#f56677",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#f2334a",
+            "type": "color"
+          },
+          "000": {
+            "value": "#fde6e8",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(239, 0, 29, 0.3)",
+            "type": "color"
+          }
         }
       },
       "utility": {
-        "25": {
-          "value": "#F2F5F6",
-          "type": "color"
-        },
-        "50": {
-          "value": "#E6EBED",
-          "type": "color"
-        },
-        "100": {
-          "value": "#CCD6DB",
-          "type": "color"
-        },
-        "200": {
-          "value": "#99ADB6",
-          "type": "color"
-        },
-        "300": {
-          "value": "#668592",
-          "type": "color"
-        },
-        "400": {
-          "value": "#335C6D",
-          "type": "color"
-        },
-        "500": {
-          "value": "#003349",
-          "type": "color"
-        }
-      },
-      "semantic": {
-        "caution": {
+        "major": {
+          "100": {
+            "value": "#f999e9",
+            "type": "color"
+          },
+          "150": {
+            "value": "#f780e4",
+            "type": "color"
+          },
+          "200": {
+            "value": "#f566df",
+            "type": "color"
+          },
           "300": {
-            "value": "#BA5000",
+            "value": "#f44dd9",
+            "type": "color"
+          },
+          "400": {
+            "value": "#f233d4",
             "type": "color"
           },
           "500": {
-            "value": "#E96400",
+            "value": "#ef00c9",
             "type": "color"
           },
           "800": {
-            "value": "#ED8333",
+            "value": "#bf00a1",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#8f0079",
+            "type": "color"
+          },
+          "000": {
+            "value": "#fef2fc",
+            "type": "color"
+          },
+          "025": {
+            "value": "#fde6fa",
+            "type": "color"
+          },
+          "050": {
+            "value": "#fcccf4",
+            "type": "color"
+          },
+          "075": {
+            "value": "#fab3ef",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(239, 0, 201, 0.3)",
             "type": "color"
           }
         },
-        "focus": {
-          "300": {
-            "value": "#FFDA80",
+        "disabled": {
+          "400": {
+            "value": "#ed99f9",
             "type": "color"
           },
           "500": {
-            "value": "#FFB500",
+            "value": "#e880f7",
+            "type": "color"
+          },
+          "600": {
+            "value": "#e366f5",
             "type": "color"
           }
         },
-        "neutral": {
+        "readOnly": {
+          "400": {
+            "value": "#cb4df4",
+            "type": "color"
+          },
           "500": {
-            "value": "#335C6D",
+            "value": "#c433f2",
             "type": "color"
           },
-          "700": {
-            "value": "#003349",
+          "600": {
+            "value": "#bc19f1",
             "type": "color"
           }
-        },
-        "negative": {
+        }
+      },
+      "action": {
+        "major": {
+          "150": {
+            "value": "#daccfc",
+            "type": "color"
+          },
           "500": {
-            "value": "#C7384F",
+            "value": "#9166f5",
+            "type": "color"
+          },
+          "600": {
+            "value": "#6c33f2",
             "type": "color"
           },
           "700": {
-            "value": "#9F2D3F",
+            "value": "#4700ef",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#3200a7",
+            "type": "color"
+          },
+          "000": {
+            "value": "#ede6fd",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(145, 102, 245, 0.3)",
             "type": "color"
           }
         },
-        "positive": {
+        "minor": {
+          "100": {
+            "value": "#99abf9",
+            "type": "color"
+          },
+          "200": {
+            "value": "#8096f7",
+            "type": "color"
+          },
+          "300": {
+            "value": "#6681f5",
+            "type": "color"
+          },
+          "400": {
+            "value": "#4d6cf4",
+            "type": "color"
+          },
           "500": {
-            "value": "#00B000",
+            "value": "#3357f2",
             "type": "color"
           },
-          "800": {
-            "value": "#008400",
+          "600": {
+            "value": "#1942f1",
             "type": "color"
-          }
-        }
-      },
-      "base": {
-        "500": {
-          "value": "#FF00FF",
-          "type": "color"
-        },
-        "700": {
-          "value": "#EE00FF",
-          "type": "color"
-        },
-        "800": {
-          "value": "#DD00FF",
-          "type": "color"
-        }
-      }
-    }
-  },
-  "references": {
-    "meta": {
-      "name": {
-        "value": "References",
-        "type": "other"
+          },
+          "1000": {
+            "value": "#001fa7",
+            "type": "color"
+          },
+          "000": {
+            "value": "#e6eafd",
+            "type": "color"
+          },
+          "025": {
+            "value": "#ccd5fc",
+            "type": "color"
+          },
+          "050": {
+            "value": "#b3c0fa",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(51, 87, 242, 0.3)",
+            "type": "color"
+          }
+        },
+        "disabled": {
+          "400": {
+            "value": "#cce3fc",
+            "type": "color"
+          },
+          "500": {
+            "value": "#b3d5fa",
+            "type": "color"
+          },
+          "600": {
+            "value": "#99c7f9",
+            "type": "color"
+          }
+        },
+        "readOnly": {
+          "400": {
+            "value": "#4da6f4",
+            "type": "color"
+          },
+          "500": {
+            "value": "#198df1",
+            "type": "color"
+          },
+          "600": {
+            "value": "#0073d7",
+            "type": "color"
+          }
+        }
       },
-      "public": {
-        "value": "true",
-        "type": "other"
+      "semantic": {
+        "neutral": {
+          "200": {
+            "value": "#99f0f9",
+            "type": "color"
+          },
+          "500": {
+            "value": "#00d9ef",
+            "type": "color",
+            "description": ""
+          },
+          "600": {
+            "value": "#00aebf",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#00828f",
+            "type": "color"
+          },
+          "000": {
+            "value": "#e6fbfd",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(0, 217, 239, 0.3)",
+            "type": "color"
+          }
+        },
+        "focus": {
+          "250": {
+            "value": "#80f7d2",
+            "type": "color"
+          },
+          "500": {
+            "value": "#00efa5",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#007853",
+            "type": "color"
+          },
+          "000": {
+            "value": "#e6fdf6",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(0, 239, 165, 0.3)",
+            "type": "color"
+          }
+        },
+        "positive": {
+          "500": {
+            "value": "#ffc173",
+            "type": "color"
+          },
+          "600": {
+            "value": "#ffb04b",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#b37527",
+            "type": "color"
+          },
+          "000": {
+            "value": "#ffedd7",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(255, 167, 55, 0.3)",
+            "type": "color"
+          }
+        },
+        "negative": {
+          "500": {
+            "value": "#d5ef00",
+            "type": "color"
+          },
+          "600": {
+            "value": "#aabf00",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#6b7800",
+            "type": "color"
+          },
+          "000": {
+            "value": "#f7fccc",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(213, 239, 0, 0.3)",
+            "type": "color"
+          }
+        },
+        "caution": {
+          "400": {
+            "value": "#4dcbb9",
+            "type": "color"
+          },
+          "500": {
+            "value": "#01b49b",
+            "type": "color",
+            "description": "was #E96400"
+          },
+          "600": {
+            "value": "#01907c",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#016c5d",
+            "type": "color"
+          },
+          "000": {
+            "value": "#e6f8f5",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(1, 180, 155, 0.3)",
+            "type": "color"
+          }
+        },
+        "info": {
+          "150": {
+            "value": "#ffd7c8",
+            "type": "color"
+          },
+          "500": {
+            "value": "#ffaf90",
+            "type": "color"
+          },
+          "600": {
+            "value": "#ff946b",
+            "type": "color"
+          },
+          "1000": {
+            "value": "#ff7946",
+            "type": "color"
+          },
+          "000": {
+            "value": "#fff2ed",
+            "type": "color"
+          },
+          "transparent": {
+            "value": "rgba(255, 121, 70, 0.3)",
+            "type": "color"
+          }
+        }
       }
     },
-    "spacing": {
-      "25": {
-        "value": "2px",
-        "type": "spacing"
-      },
-      "50": {
-        "value": "4px",
-        "type": "spacing"
-      },
-      "75": {
-        "value": "6px",
-        "type": "spacing"
+    "sizing": {
+      "10": {
+        "value": "1px",
+        "type": "sizing"
       },
       "100": {
         "value": "8px",
-        "type": "spacing"
+        "type": "sizing"
+      },
+      "125": {
+        "value": "10px",
+        "type": "sizing"
       },
       "150": {
         "value": "12px",
-        "type": "spacing"
+        "type": "sizing"
+      },
+      "175": {
+        "value": "14px",
+        "type": "sizing"
       },
       "200": {
         "value": "16px",
-        "type": "spacing"
+        "type": "sizing"
+      },
+      "250": {
+        "value": "20px",
+        "type": "sizing"
       },
       "300": {
         "value": "24px",
-        "type": "spacing"
+        "type": "sizing"
+      },
+      "350": {
+        "value": "28px",
+        "type": "sizing"
+      },
+      "375": {
+        "value": "30px",
+        "type": "sizing"
       },
       "400": {
         "value": "32px",
-        "type": "spacing"
+        "type": "sizing"
       },
       "500": {
         "value": "40px",
-        "type": "spacing"
+        "type": "sizing"
       },
       "600": {
         "value": "48px",
-        "type": "spacing"
+        "type": "sizing"
       },
       "700": {
         "value": "56px",
-        "type": "spacing"
+        "type": "sizing"
       },
       "800": {
         "value": "64px",
-        "type": "spacing"
+        "type": "sizing"
       },
       "900": {
         "value": "72px",
-        "type": "spacing"
-      }
-    },
-    "sizing": {
-      "25": {
+        "type": "sizing"
+      },
+      "1000": {
+        "value": "80px",
+        "type": "sizing"
+      },
+      "025": {
         "value": "2px",
         "type": "sizing"
       },
-      "50": {
+      "050": {
         "value": "4px",
         "type": "sizing"
       },
-      "75": {
+      "075": {
         "value": "6px",
         "type": "sizing"
       },
+      "logowidth": {
+        "value": "39px",
+        "type": "sizing"
+      }
+    },
+    "spacing": {
       "100": {
         "value": "8px",
-        "type": "sizing"
+        "type": "spacing"
+      },
+      "125": {
+        "value": "10px",
+        "type": "spacing"
       },
       "150": {
         "value": "12px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "200": {
         "value": "16px",
-        "type": "sizing"
+        "type": "spacing"
+      },
+      "250": {
+        "value": "20px",
+        "type": "spacing"
       },
       "300": {
         "value": "24px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "400": {
         "value": "32px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "500": {
         "value": "40px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "600": {
         "value": "48px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "700": {
         "value": "56px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "800": {
         "value": "64px",
-        "type": "sizing"
+        "type": "spacing"
       },
       "900": {
         "value": "72px",
-        "type": "sizing"
-      }
-    },
-    "colors": {
-      "slate": {
-        "50": {
-          "value": "#f2f5f6",
-          "type": "color"
-        },
-        "100": {
-          "value": "#e6ebed",
-          "type": "color"
+        "type": "spacing"
+      },
+      "000": {
+        "value": "0",
+        "type": "spacing"
+      },
+      "025": {
+        "value": "2px",
+        "type": "spacing"
+      },
+      "050": {
+        "value": "4px",
+        "type": "spacing"
+      },
+      "075": {
+        "value": "6px",
+        "type": "spacing"
+      }
+    },
+    "borderWidth": {
+      "100": {
+        "value": "1px",
+        "type": "borderWidth"
+      },
+      "200": {
+        "value": "2px",
+        "type": "borderWidth"
+      },
+      "300": {
+        "value": "3px",
+        "type": "borderWidth"
+      },
+      "400": {
+        "value": "4px",
+        "type": "borderWidth"
+      },
+      "000": {
+        "value": "0px",
+        "type": "borderWidth"
+      }
+    },
+    "boxShadow": {
+      "100": {
+        "value": {
+          "x": "0",
+          "y": "10px",
+          "blur": "10px",
+          "spread": "0",
+          "color": "rgba(251,69,0,0.5)"
+        },
+        "type": "boxShadow"
+      },
+      "200": {
+        "value": {
+          "x": "0",
+          "y": "20px",
+          "blur": "40px",
+          "spread": "0",
+          "color": "rgba(149,219,0,0.5)"
         },
-        "200": {
-          "value": "#ccd6db",
-          "type": "color"
+        "type": "boxShadow"
+      },
+      "300": {
+        "value": {
+          "x": "0",
+          "y": "30px",
+          "blur": "60px",
+          "spread": "0",
+          "color": "rgba(0,179,219,0.5)"
         },
-        "300": {
-          "value": "#b3c2c8",
-          "type": "color"
+        "type": "boxShadow"
+      },
+      "400": {
+        "value": {
+          "x": "0",
+          "y": "50px",
+          "blur": "80px",
+          "spread": "0",
+          "color": "rgba(96,0,219,0.5)"
         },
-        "500": {
-          "value": "#8099a4",
-          "type": "color"
+        "type": "boxShadow"
+      },
+      "000": {
+        "value": {
+          "x": "10px",
+          "y": "10px",
+          "blur": "5px",
+          "spread": "5px",
+          "color": "rgba(219,0,197,0.5)"
         },
-        "600": {
-          "value": "#668592",
-          "type": "color"
+        "type": "boxShadow",
+        "description": "should have colour \"none\""
+      }
+    },
+    "fontSizes": {
+      "100": {
+        "value": "14px",
+        "type": "fontSizes"
+      },
+      "200": {
+        "value": "16px",
+        "type": "fontSizes"
+      },
+      "300": {
+        "value": "18px",
+        "type": "fontSizes"
+      },
+      "400": {
+        "value": "20px",
+        "type": "fontSizes"
+      },
+      "500": {
+        "value": "22px",
+        "type": "fontSizes"
+      },
+      "600": {
+        "value": "24px",
+        "type": "fontSizes"
+      },
+      "700": {
+        "value": "32px",
+        "type": "fontSizes"
+      },
+      "800": {
+        "value": "48px",
+        "type": "fontSizes"
+      },
+      "900": {
+        "value": "56px",
+        "type": "fontSizes"
+      },
+      "1000": {
+        "value": "64px",
+        "type": "fontSizes"
+      },
+      "010": {
+        "value": "10px",
+        "type": "fontSizes"
+      },
+      "025": {
+        "value": "12px",
+        "type": "fontSizes"
+      },
+      "050": {
+        "value": "13px",
+        "type": "fontSizes"
+      }
+    },
+    "opacity": {
+      "100": {
+        "value": "10%",
+        "type": "opacity"
+      },
+      "200": {
+        "value": "20%",
+        "type": "opacity"
+      },
+      "300": {
+        "value": "30%",
+        "type": "opacity"
+      },
+      "400": {
+        "value": "40%",
+        "type": "opacity"
+      },
+      "500": {
+        "value": "50%",
+        "type": "opacity"
+      },
+      "550": {
+        "value": "55%",
+        "type": "opacity"
+      },
+      "600": {
+        "value": "60%",
+        "type": "opacity"
+      },
+      "650": {
+        "value": "65%",
+        "type": "opacity"
+      },
+      "700": {
+        "value": "70%",
+        "type": "opacity"
+      },
+      "800": {
+        "value": "80%",
+        "type": "opacity"
+      },
+      "900": {
+        "value": "90%",
+        "type": "opacity"
+      }
+    },
+    "fontWeights": {
+      "400": {
+        "value": "Regular",
+        "type": "fontWeights"
+      },
+      "500": {
+        "value": "Medium",
+        "type": "fontWeights"
+      },
+      "600": {
+        "value": "SemiBold",
+        "type": "fontWeights"
+      },
+      "700": {
+        "value": "Bold",
+        "type": "fontWeights"
+      }
+    },
+    "lineHeights": {
+      "400": {
+        "value": "125%",
+        "type": "lineHeights"
+      },
+      "500": {
+        "value": "150%",
+        "type": "lineHeights"
+      }
+    },
+    "fontFamilies": {
+      "default": {
+        "value": "Pridi",
+        "type": "fontFamilies"
+      },
+      "ios": {
+        "value": "San Francisco",
+        "type": "fontFamilies"
+      },
+      "android": {
+        "value": "Roboto",
+        "type": "fontFamilies"
+      },
+      "other": {
+        "value": "Open Sans",
+        "type": "fontFamilies"
+      }
+    },
+    "borderRadius": {
+      "circle": {
+        "value": "50%",
+        "type": "borderRadius"
+      }
+    },
+    "typography": {
+      "button": {
+        "label": {
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "dialog": {
+        "title": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "ms": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "ml": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "xl": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.400",
+              "fontSize": "$fontSizes.400",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "flash": {
+        "text": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "formField": {
+        "label": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "hintText": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         },
-        "700": {
-          "value": "#4d7080",
-          "type": "color"
+        "errorMessage": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         },
-        "800": {
-          "value": "#335c6d",
-          "type": "color"
+        "cautionMessage": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         },
-        "900": {
-          "value": "#19475b",
-          "type": "color"
-        }
-      },
-      "black": {
-        "500": {
-          "value": "#000000",
-          "type": "color"
+        "inputText": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         },
-        "alpha": {
-          "100": {
-            "value": "rgba(0,0,0,.1)",
-            "type": "color"
+        "dropdownOptions": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "200": {
-            "value": "rgba(0,0,0,.2)",
-            "type": "color"
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "300": {
-            "value": "rgba(0,0,0,.3)",
-            "type": "color"
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "400": {
-            "value": "rgba(0,0,0,.4)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "secondLabel": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "500": {
-            "value": "rgba(0,0,0,.5)",
-            "type": "color"
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "600": {
-            "value": "rgba(0,0,0,.6)",
-            "type": "color"
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "characterCount": {
+          "xs": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "700": {
-            "value": "rgba(0,0,0,.7)",
-            "type": "color"
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "800": {
-            "value": "rgba(0,0,0,.8)",
-            "type": "color"
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "lineHeight": "$lineHeights.500",
+              "fontWeight": "$fontWeights.400",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           }
         }
       },
-      "white": {
-        "500": {
-          "value": "#ffffff",
-          "type": "color"
-        },
-        "alpha": {
-          "100": {
-            "value": "rgba(255,255,255,.1)",
-            "type": "color"
+      "link": {
+        "text": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "200": {
-            "value": "rgba(255,255,255,.2)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "message": {
+        "heading": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "300": {
-            "value": "rgba(255,255,255,.3)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.700",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "text": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "400": {
-            "value": "rgba(255,255,255,.4)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "pill": {
+        "label": {
+          "s": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.010",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "500": {
-            "value": "rgba(255,255,255,.5)",
-            "type": "color"
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.025",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "600": {
-            "value": "rgba(255,255,255,.6)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "700": {
-            "value": "rgba(255,255,255,.7)",
-            "type": "color"
+          "xl": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "switch": {
+        "optionLabel": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.025",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           },
-          "800": {
-            "value": "rgba(255,255,255,.8)",
-            "type": "color"
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
           }
         }
       },
-      "mint": {
-        "100": {
-          "value": "#33B591",
-          "type": "color"
-        },
-        "200": {
-          "value": "#19AC84",
-          "type": "color"
-        },
-        "300": {
-          "value": "#00A376",
-          "type": "color"
-        },
-        "400": {
-          "value": "#00936A",
-          "type": "color"
-        },
-        "500": {
-          "value": "#00815d",
-          "type": "color"
-        },
-        "600": {
-          "value": "#007253",
-          "type": "color"
-        },
-        "700": {
-          "value": "#006046",
-          "type": "color"
-        },
-        "800": {
-          "value": "#00523B",
-          "type": "color"
+      "table": {
+        "headerText": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         },
-        "900": {
-          "value": "#00402e",
-          "type": "color"
+        "cellText": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         }
       },
-      "aegean": {
-        "100": {
-          "value": "#4DA0D9",
-          "type": "color"
-        },
-        "200": {
-          "value": "#1985CE",
-          "type": "color"
-        },
-        "300": {
-          "value": "#1985CE",
-          "type": "color"
-        },
-        "400": {
-          "value": "#0073C2",
-          "type": "color"
-        },
-        "500": {
-          "value": "#006BB4",
-          "type": "color"
-        },
-        "600": {
-          "value": "#005C9A",
-          "type": "color"
-        },
-        "700": {
-          "value": "#00538C",
-          "type": "color"
-        },
-        "800": {
-          "value": "#004472",
-          "type": "color"
-        },
-        "900": {
-          "value": "#003C64",
-          "type": "color"
+      "tooltip": {
+        "text": {
+          "m": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.100",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.400",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
         }
       }
     }