feat: update color variables and add primary/secondary text colors

Author: sanjaypinna

styles/tokens/_variables.css

@@ -85,9 +85,11 @@
   --base-amber-solid-12: #4e2009;
   --base-pure-white: #ffffff;
   --base-pure-black: #000000;
-  --blue-primary-color: #1F5F8D;
+  --blue-primary-color: #1f5f8d;
   --orange-secondary-color: #fdb557;
-  --accent-tertiary-color: #84DCCF;
+  --blue-primary-text: #194C71;
+  --orange-secondary-text: #b17f3d;
+  --accent-tertiary-color: #84dccf;
   --grey-extralight: #eeeeee;
   --white: #ffffff;
   --text-default: var(--base-gray-slate-solid-12);
@@ -309,39 +311,32 @@
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
   --shadow-card: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
-  --shadow-modal:
-    0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-  --shadow-layer:
-    0px 31px 41px 0px rgba(32, 42, 53, 0.2),
+  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2),
     0px 2px 16px 0px rgba(32, 42, 54, 0.08);
   --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1);
   --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
   --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
   --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-basic-deep:
-    0px 2px 16px 0px rgba(33, 43, 54, 0.08),
+  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08),
     0px 0px 0px 1px rgba(6, 44, 82, 0.1);
   --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05);
   --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0);
   --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24);
   --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-md:
-    0px 1px 6px 0px rgba(31, 33, 36, 0.05),
+  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05),
     0px 2px 4px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-lg:
-    0px 2px 6px 0px rgba(31, 33, 36, 0.05),
+  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05),
     0px 4px 12px 0px rgba(31, 33, 36, 0.2);
-  --shadow-basic-xl:
-    0px 12px 18px -2px rgba(31, 33, 36, 0.15),
+  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15),
     0px 4px 18px -2px rgba(31, 33, 36, 0.08);
-  --shadow-basic-2xl:
-    0px 32px 56px -2px rgba(31, 33, 36, 0.16),
+  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16),
     0px 32px 32px 0px rgba(31, 33, 36, 0.15);
-  --shadow-element-popover:
-    0px 8px 20px -4px rgba(23, 24, 24, 0.12),
+  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12),
     0px 3px 6px -3px rgba(23, 24, 24, 0.08);
-  --shadow-element-card:
-    0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05);
+  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
+    0px 0px 5px 0px rgba(23, 24, 24, 0.05);
   --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15);
   --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1);
 

styles/tokens/tailwind/color.js

@@ -277,5 +277,7 @@ module.exports = {
   secondaryOrange: 'var(--orange-secondary-color)',
   greyExtralight: 'var(--grey-extralight)',
   white: 'var(--white)',
-  tertiaryAccent: 'var(--accent-tertiary-color)'
+  tertiaryAccent: 'var(--accent-tertiary-color)',
+  primaryText: 'var(--blue-primary-text)',
+  secondaryText: 'var(--orange-secondary-text)',
 };