@sage/design-tokens 1.70.0 → 1.73.0

package/css/base.css

@@ -3,13 +3,17 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
  */
 /**
  * Do not edit directly
- * Generated on Mon, 11 Oct 2021 16:12:24 GMT
+ * Generated on Mon, 25 Oct 2021 10:04:50 GMT
  */
 
 :root {
   --metaName: Base Theme;
   --metaPublic: true;
   --colorsLogo: #00D639;
+  --colorsYin030: rgba(0,0,0,0.3);
+  --colorsYin055: rgba(0,0,0,0.55);
+  --colorsYin065: rgba(0,0,0,0.65);
+  --colorsYin090: rgba(0,0,0,0.9);
   --colorsComponentsNavigation500: #008146;
   --colorsComponentsNavigation600: #006738;
   --colorsComponentsNavigation700: #004D2A;
@@ -162,6 +166,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --opacity700: 70%;
   --opacity800: 80%;
   --opacity900: 90%;
+  --opacity1000: 100%;
   --fontWeights400: Regular;
   --fontWeights500: Medium;
   --fontWeights700: Bold;

package/css/no-theme.css

@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
  */
 /**
  * Do not edit directly
- * Generated on Mon, 11 Oct 2021 16:12:25 GMT
+ * Generated on Mon, 25 Oct 2021 10:04:50 GMT
  */
 
 :root {
@@ -92,7 +92,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsSemanticInfo1000: #ff7946;
   --colorsSemanticInfo000: #fff2ed;
   --colorsSemanticInfoTransparent: rgba(0, 131, 204, 0.6);
-  --sizing10: 1px;
   --sizing100: 8px;
   --sizing125: 10px;
   --sizing150: 12px;
@@ -109,6 +108,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --sizing800: 64px;
   --sizing900: 72px;
   --sizing1000: 80px;
+  --sizing010: 1px;
   --sizing025: 2px;
   --sizing050: 4px;
   --sizing075: 6px;
@@ -138,7 +138,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --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;
@@ -163,9 +162,9 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --opacity700: 70%;
   --opacity800: 80%;
   --opacity900: 90%;
+  --opacity1000: 100%;
   --fontWeights400: Regular;
   --fontWeights500: Medium;
-  --fontWeights600: SemiBold;
   --fontWeights700: Bold;
   --lineHeights400: 125%;
   --lineHeights500: 150%;

package/css/temporary-rgba-test.css

@@ -0,0 +1,245 @@
+/*
+Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
+ */
+/**
+ * Do not edit directly
+ * Generated on Mon, 25 Oct 2021 10:04:50 GMT
+ */
+
+:root {
+  --metaName: Base Theme;
+  --metaPublic: true;
+  --colorsLogo: #00D639;
+  --colorsYin030: rgba(0,0,0,0.3);
+  --colorsYin065: rgba(0,0,0,0.65);
+  --colorsYin090: rgba(0,0,0,0.9);
+  --colorsYang030: rgba(255,255,255,0.3);
+  --colorsYang065: rgba(255,255,255,0.65);
+  --colorsYang090: rgba(255,255,255,0.9);
+  --colorsComponentsNavigation500: #008146;
+  --colorsComponentsNavigation600: #006738;
+  --colorsComponentsNavigation700: #004D2A;
+  --colorsComponentsNavigation1000: #000000;
+  --colorsComponentsNavigation000: #FFFFFF;
+  --colorsComponentsNavigationTransparent: rgba(0,0,0,0);
+  --colorsUtilityMajor100: #CCD6DB;
+  --colorsUtilityMajor150: #B3C2C9;
+  --colorsUtilityMajor200: #99ADB7;
+  --colorsUtilityMajor300: #668494;
+  --colorsUtilityMajor400: #335B70;
+  --colorsUtilityMajor500: #00324C;
+  --colorsUtilityMajor800: #00141E;
+  --colorsUtilityMajor1000: #000000;
+  --colorsUtilityMajor000: #FFFFFF;
+  --colorsUtilityMajor025: #F2F5F6;
+  --colorsUtilityMajor050: #E6EBED;
+  --colorsUtilityMajor075: #D9E0E4;
+  --colorsUtilityMajorTransparent: rgba(0,0,0,0);
+  --colorsUtilityMajorYin: rgba(0,0,0,0.9);
+  --colorsUtilityDisabled400: #F2F5F6;
+  --colorsUtilityDisabled500: #E6EBED;
+  --colorsUtilityDisabled600: #CCD6DB;
+  --colorsUtilityDisabledYin: rgba(0,0,0,0.3);
+  --colorsUtilityReadOnly400: #F2F5F6;
+  --colorsUtilityReadOnly500: #E6EBED;
+  --colorsUtilityReadOnly600: #CCD6DB;
+  --colorsUtilityReadOnlyYin: rgba(0,0,0,0.65);
+  --colorsActionMajor150: #B3D9C8;
+  --colorsActionMajor500: #008146;
+  --colorsActionMajor600: #006738;
+  --colorsActionMajor700: #004D2A;
+  --colorsActionMajor1000: #000000;
+  --colorsActionMajor000: #FFFFFF;
+  --colorsActionMajorTransparent: rgba(0,0,0,0);
+  --colorsActionMinor100: #E6EBED;
+  --colorsActionMinor200: #CCD6DB;
+  --colorsActionMinor300: #99ADB7;
+  --colorsActionMinor400: #668494;
+  --colorsActionMinor500: #335B70;
+  --colorsActionMinor600: #00324C;
+  --colorsActionMinor1000: #000000;
+  --colorsActionMinor000: #FFFFFF;
+  --colorsActionMinor025: #FAFBFB;
+  --colorsActionMinor050: #F2F5F6;
+  --colorsActionMinorTransparent: rgba(0,0,0,0);
+  --colorsActionDisabled400: #F2F5F6;
+  --colorsActionDisabled500: #E6EBED;
+  --colorsActionDisabled600: #CCD6DB;
+  --colorsActionReadOnly400: #F2F5F6;
+  --colorsActionReadOnly500: #E6EBED;
+  --colorsActionReadOnly600: #CCD6DB;
+  --colorsSemanticNeutral200: #CCD6DB;
+  --colorsSemanticNeutral500: #335B70;
+  --colorsSemanticNeutral600: #00324C;
+  --colorsSemanticNeutral1000: #000000;
+  --colorsSemanticNeutral000: #FFFFFF;
+  --colorsSemanticNeutralTransparent: rgba(0,0,0,0);
+  --colorsSemanticFocus250: #FFDA80;
+  --colorsSemanticFocus500: #FFB500;
+  --colorsSemanticFocus1000: #000000;
+  --colorsSemanticFocus000: #FFFFFF;
+  --colorsSemanticFocusTransparent: rgba(0,0,0,0);
+  --colorsSemanticPositive500: #008A21;
+  --colorsSemanticPositive600: #006e1a;
+  --colorsSemanticPositive1000: #000000;
+  --colorsSemanticPositive000: #FFFFFF;
+  --colorsSemanticPositiveTransparent: rgba(0,0,0,0);
+  --colorsSemanticNegative500: #CD384B;
+  --colorsSemanticNegative600: #a42d3c;
+  --colorsSemanticNegative1000: #000000;
+  --colorsSemanticNegative000: #FFFFFF;
+  --colorsSemanticNegativeTransparent: rgba(0,0,0,0);
+  --colorsSemanticCaution400: #f28533;
+  --colorsSemanticCaution500: #EF6700;
+  --colorsSemanticCaution600: #bf5200;
+  --colorsSemanticCaution1000: #000000;
+  --colorsSemanticCaution000: #FFFFFF;
+  --colorsSemanticCautionTransparent: rgba(0,0,0,0);
+  --colorsSemanticInfo150: #b3cfe5;
+  --colorsSemanticInfo500: #0060A7;
+  --colorsSemanticInfo600: #004d86;
+  --colorsSemanticInfo1000: #000000;
+  --colorsSemanticInfo000: #FFFFFF;
+  --colorsSemanticInfoTransparent: rgba(0,0,0,0);
+  --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: 40px;
+  --sizing010: 1px;
+  --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;
+  --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;
+  --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);
+  --boxShadow400: 0 50px 80px 0 rgba(0,20,29,0.1);
+  --opacity100: 10%;
+  --opacity200: 20%;
+  --opacity300: 30%;
+  --opacity400: 40%;
+  --opacity500: 50%;
+  --opacity550: 55%;
+  --opacity600: 60%;
+  --opacity650: 65%;
+  --opacity700: 70%;
+  --opacity800: 80%;
+  --opacity900: 90%;
+  --opacity1000: 100%;
+  --fontWeights400: Regular;
+  --fontWeights500: Medium;
+  --fontWeights700: Bold;
+  --lineHeights400: 125%;
+  --lineHeights500: 150%;
+  --fontFamiliesDefault: Sage UI;
+  --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];
+}