@salesforcedevs/dx-css-variables 0.2.6 → 0.2.8-alpha01

package/assets/css/colors.css

@@ -19,7 +19,8 @@
   --dx-g-hot-orange-vibrant-50: rgba(216, 58, 0, 1);
   --dx-g-hot-orange-vibrant-40: rgba(170, 48, 1, 1);
   --dx-g-hot-orange-vibrant-30: rgba(126, 38, 0, 1);
-  --dx-g-hot-orange-vibrant-20: rgba(84, 29, 1, 1);
+  --dx-g-hot-orange-vibrant-20: rgba(74, 36, 19, 1);
+  --dx-g-hot-orange-vibrant-15: rgba(66, 22, 4, 1);
   --dx-g-hot-orange-vibrant-10: rgba(40, 18, 2, 1);
   --dx-g-hot-orange-natural-95: rgba(250, 242, 240, 1);
   --dx-g-hot-orange-natural-90: rgba(245, 225, 219, 1);
@@ -42,6 +43,7 @@
   --dx-g-orange-vibrant-40: rgba(130, 81, 1, 1);
   --dx-g-orange-vibrant-30: rgba(95, 62, 2, 1);
   --dx-g-orange-vibrant-20: rgba(62, 43, 2, 1);
+  --dx-g-orange-vibrant-15: rgba(55, 30, 3, 1);
   --dx-g-orange-vibrant-10: rgba(32, 22, 0, 1);
   --dx-g-orange-natural-95: rgba(249, 242, 239, 1);
   --dx-g-orange-natural-90: rgba(245, 225, 216, 1);
@@ -64,6 +66,7 @@
   --dx-g-yellow-vibrant-40: rgba(140, 75, 2, 1);
   --dx-g-yellow-vibrant-30: rgba(111, 52, 0, 1);
   --dx-g-yellow-vibrant-20: rgba(79, 33, 0, 1);
+  --dx-g-yellow-vibrant-15: rgba(46, 34, 4, 1);
   --dx-g-yellow-vibrant-10: rgba(40, 18, 2, 1);
   --dx-g-yellow-natural-95: rgba(251, 243, 226, 1);
   --dx-g-yellow-natural-90: rgba(248, 227, 183, 1);
@@ -83,9 +86,10 @@
   --dx-g-green-vibrant-65: rgba(65, 182, 88, 1);
   --dx-g-green-vibrant-60: rgba(59, 167, 85, 1);
   --dx-g-green-vibrant-50: rgba(46, 132, 74, 1);
-  --dx-g-green-vibrant-40: rgba(34, 104, 62, 1);
+  --dx-g-green-vibrant-40: rgba(57, 101, 71, 1);
   --dx-g-green-vibrant-30: rgba(25, 78, 49, 1);
-  --dx-g-green-vibrant-20: rgba(14, 53, 34, 1);
+  --dx-g-green-vibrant-20: rgba(28, 51, 38, 1);
+  --dx-g-green-vibrant-15: rgba(12, 41, 18, 1);
   --dx-g-green-vibrant-10: rgba(7, 27, 18, 1);
   --dx-g-green-natural-95: rgba(235, 247, 230, 1);
   --dx-g-green-natural-90: rgba(205, 239, 196, 1);
@@ -108,7 +112,8 @@
   --dx-g-teal-vibrant-40: rgba(5, 103, 100, 1);
   --dx-g-teal-vibrant-30: rgba(2, 77, 76, 1);
   --dx-g-teal-vibrant-20: rgba(2, 52, 52, 1);
-  --dx-g-teal-vibrant-10: rgba(0, 27, 28, 1);
+  --dx-g-teal-vibrant-15: rgba(7, 40, 37, 1);
+  --dx-g-teal-vibrant-10: rgba(7, 27, 18, 1);
   --dx-g-teal-natural-95: rgba(222, 249, 243, 1);
   --dx-g-teal-natural-90: rgba(172, 243, 228, 1);
   --dx-g-teal-natural-80: rgba(115, 219, 203, 1);
@@ -130,6 +135,7 @@
   --dx-g-cloud-blue-vibrant-40: rgba(5, 98, 138, 1);
   --dx-g-cloud-blue-vibrant-30: rgba(8, 73, 104, 1);
   --dx-g-cloud-blue-vibrant-20: rgba(2, 50, 72, 1);
+  --dx-g-cloud-blue-vibrant-15: rgba(10, 38, 54, 1);
   --dx-g-cloud-blue-vibrant-10: rgba(0, 26, 40, 1);
   --dx-g-cloud-blue-natural-95: rgba(239, 244, 249, 1);
   --dx-g-cloud-blue-natural-90: rgba(215, 231, 245, 1);
@@ -147,7 +153,7 @@
   --dx-g-blue-vibrant-80: rgba(170, 203, 255, 1);
   --dx-g-blue-vibrant-70: rgba(120, 176, 253, 1);
   --dx-g-blue-vibrant-65: rgba(87, 163, 253, 1);
-  --dx-g-blue-vibrant-60: #1b96ff;
+  --dx-g-blue-vibrant-60: rgba(27, 150, 255, 1);
   --dx-g-blue-vibrant-50: rgba(1, 118, 211, 1);
   --dx-g-blue-vibrant-40: rgba(11, 92, 171, 1);
   --dx-g-blue-vibrant-30: rgba(1, 68, 134, 1);
@@ -174,7 +180,7 @@
   --dx-g-indigo-vibrant-50: rgba(88, 103, 232, 1);
   --dx-g-indigo-vibrant-40: rgba(58, 73, 218, 1);
   --dx-g-indigo-vibrant-30: rgba(47, 44, 183, 1);
-  --dx-g-indigo-vibrant-20: rgba(38, 15, 143, 1);
+  --dx-g-indigo-vibrant-20: rgba(50, 29, 113, 1);
   --dx-g-indigo-vibrant-15: rgba(31, 9, 116, 1);
   --dx-g-indigo-vibrant-10: rgba(32, 6, 71, 1);
   --dx-g-indigo-natural-95: rgba(242, 243, 249, 1);
@@ -190,7 +196,7 @@
   --dx-g-indigo-natural-10: rgba(32, 13, 56, 1);
   --dx-g-purple-vibrant-95: rgba(246, 242, 251, 1);
   --dx-g-purple-vibrant-90: rgba(236, 225, 249, 1);
-  --dx-g-purple-vibrant-80: rgba(215, 191, 245, 1);
+  --dx-g-purple-vibrant-80: rgba(215, 191, 242, 1);
   --dx-g-purple-vibrant-70: rgba(194, 158, 241, 1);
   --dx-g-purple-vibrant-65: rgba(183, 141, 239, 1);
   --dx-g-purple-vibrant-60: rgba(173, 123, 238, 1);
@@ -198,6 +204,7 @@
   --dx-g-purple-vibrant-40: rgba(117, 38, 227, 1);
   --dx-g-purple-vibrant-30: rgba(90, 27, 169, 1);
   --dx-g-purple-vibrant-20: rgba(64, 16, 117, 1);
+  --dx-g-purple-vibrant-15: rgba(48, 11, 96, 1);
   --dx-g-purple-vibrant-10: rgba(36, 6, 67, 1);
   --dx-g-purple-natural-95: rgba(245, 243, 248, 1);
   --dx-g-purple-natural-90: rgba(234, 226, 243, 1);
@@ -219,7 +226,8 @@
   --dx-g-violet-vibrant-50: rgba(186, 1, 255, 1);
   --dx-g-violet-vibrant-40: rgba(150, 2, 199, 1);
   --dx-g-violet-vibrant-30: rgba(115, 3, 148, 1);
-  --dx-g-violet-vibrant-20: rgba(82, 0, 102, 1);
+  --dx-g-violet-vibrant-20: rgba(72, 26, 84, 1);
+  --dx-g-violet-vibrant-15: rgba(61, 1, 87, 1);
   --dx-g-violet-vibrant-10: rgba(46, 0, 57, 1);
   --dx-g-violet-natural-95: rgba(247, 242, 251, 1);
   --dx-g-violet-natural-90: rgba(238, 225, 246, 1);
@@ -242,6 +250,7 @@
   --dx-g-pink-vibrant-40: rgba(182, 5, 84, 1);
   --dx-g-pink-vibrant-30: rgba(138, 3, 62, 1);
   --dx-g-pink-vibrant-20: rgba(97, 2, 42, 1);
+  --dx-g-pink-vibrant-15: rgba(75, 6, 32, 1);
   --dx-g-pink-vibrant-10: rgba(55, 1, 20, 1);
   --dx-g-pink-natural-95: rgba(250, 242, 243, 1);
   --dx-g-pink-natural-90: rgba(246, 224, 228, 1);
@@ -264,6 +273,7 @@
   --dx-g-red-vibrant-40: rgba(186, 5, 23, 1);
   --dx-g-red-vibrant-30: rgba(142, 3, 15, 1);
   --dx-g-red-vibrant-20: rgba(100, 1, 3, 1);
+  --dx-g-red-vibrant-15: rgba(74, 12, 4, 1);
   --dx-g-red-vibrant-10: rgba(48, 12, 1, 1);
   --dx-g-red-natural-95: rgba(250, 242, 240, 1);
   --dx-g-red-natural-90: rgba(246, 225, 221, 1);
@@ -282,7 +292,7 @@
   --dx-g-gray-60: rgba(147, 147, 147, 1);
   --dx-g-gray-50: rgba(116, 116, 116, 1);
   --dx-g-gray-30: rgba(68, 68, 68, 1);
-  --dx-g-gray-10: rgba(11, 11, 11, 1);
+  --dx-g-gray-10: rgba(24, 24, 24, 1);
 
   --sds-g-gray-1: rgba(255, 255, 255, 1);
   --sds-g-gray-2: rgba(250, 250, 249, 1);
@@ -322,12 +332,11 @@
   --dx-g-brand-default-color-background-2: var(--dx-g-cloud-blue-vibrant-95);
   --dx-g-brand-default-button-color-background-inactive-hover: var(--dx-g-gray-90);
   --dx-g-brand-default-color-border-2: var(--dx-g-gray-90);
-
   /* EMPLOYEES */
   --dx-g-brand-employees-color-background: var(--dx-g-hot-orange-vibrant-95);
   --dx-g-brand-employees-button-color-background-inactive: var(--dx-g-hot-orange-vibrant-90);
-  --dx-g-brand-employees-button-color-background-active: var(--dx-g-hot-orange-vibrant-80);
-  --dx-g-brand-employees-color: var(--dx-g-hot-orange-vibrant-20);
+  --dx-g-brand-employees-button-color-background-active: var(--dx-g-hot-orange-vibrant-65);
+  --dx-g-brand-employees-color: var(--dx-g-hot-orange-vibrant-15);
   --dx-g-brand-employees-color-border: var(--dx-g-hot-orange-vibrant-90);
   --dx-g-brand-employees-color-background-2: white;
   --dx-g-brand-employees-button-color-background-inactive-hover: var(--dx-g-hot-orange-vibrant-80);
@@ -336,155 +345,155 @@
   /* MARKETING */
   --dx-g-brand-marketing-color-background: var(--dx-g-orange-vibrant-95);
   --dx-g-brand-marketing-button-color-background-inactive: var(--dx-g-orange-vibrant-90);
-  --dx-g-brand-marketing-button-color-background-active: var(--dx-g-orange-vibrant-80);
-  --dx-g-brand-marketing-color: var(--dx-g-orange-natural-20);
+  --dx-g-brand-marketing-button-color-background-active: var(--dx-g-orange-vibrant-70);
+  --dx-g-brand-marketing-color: var(--dx-g-orange-vibrant-20);
   --dx-g-brand-marketing-color-border: var(--dx-g-orange-vibrant-90);
   --dx-g-brand-marketing-color-background-2: white;
   --dx-g-brand-marketing-button-color-background-inactive-hover: var(--dx-g-orange-vibrant-80);
   --dx-g-brand-marketing-color-border-2: var(--dx-g-orange-vibrant-80);
 
   /* PARTNERS */
-  --dx-g-brand-partners-color-background: var(--dx-g-yellow-natural-95);
-  --dx-g-brand-partners-button-color-background-inactive: var(--dx-g-yellow-natural-90);
-  --dx-g-brand-partners-button-color-background-active: var(--dx-g-yellow-natural-80);
-  --dx-g-brand-partners-color: var(--dx-g-yellow-natural-20);
-  --dx-g-brand-partners-color-border: var(--dx-g-yellow-natural-90);
+  --dx-g-brand-partners-color-background: var(--dx-g-yellow-vibrant-95);
+  --dx-g-brand-partners-button-color-background-inactive: var(--dx-g-yellow-vibrant-90);
+  --dx-g-brand-partners-button-color-background-active: var(--dx-g-yellow-vibrant-80);
+  --dx-g-brand-partners-color: var(--dx-g-yellow-vibrant-20);
+  --dx-g-brand-partners-color-border: var(--dx-g-yellow-vibrant-90);
   --dx-g-brand-partners-color-background-2: white;
-  --dx-g-brand-partners-button-color-background-inactive-hover: var(--dx-g-yellow-natural-80);
-  --dx-g-brand-partners-color-border-2: var(--dx-g-yellow-natural-80);
+  --dx-g-brand-partners-button-color-background-inactive-hover: var(--dx-g-yellow-natural-90);
+  --dx-g-brand-partners-color-border-2: var(--dx-g-yellow-vibrant-80);
 
   /* COMMERCE */
-  --dx-g-brand-commerce-color-background: var(--dx-g-green-vibrant-95);
+  --dx-g-brand-commerce-color-background: var(--dx-g-green-vibrant-90);
   --dx-g-brand-commerce-button-color-background-inactive: var(--dx-g-green-vibrant-90);
-  --dx-g-brand-commerce-button-color-background-active: var(--dx-g-green-vibrant-80);
-  --dx-g-brand-commerce-color: var(--dx-g-green-natural-20);
+  --dx-g-brand-commerce-button-color-background-active: var(--dx-g-green-vibrant-65);
+  --dx-g-brand-commerce-color: var(--dx-g-green-vibrant-15);
   --dx-g-brand-commerce-color-border: var(--dx-g-green-vibrant-90);
   --dx-g-brand-commerce-color-background-2: white;
   --dx-g-brand-commerce-button-color-background-inactive-hover: var(--dx-g-green-vibrant-80);
   --dx-g-brand-commerce-color-border-2: var(--dx-g-green-vibrant-80);
 
   /* REVENUE */
-  --dx-g-brand-revenue-color-background: var(--dx-g-teal-natural-95);
-  --dx-g-brand-revenue-button-color-background-inactive: var(--dx-g-teal-natural-90);
-  --dx-g-brand-revenue-button-color-background-active: var(--dx-g-teal-natural-80);
-  --dx-g-brand-revenue-color: var(--dx-g-teal-natural-20);
-  --dx-g-brand-revenue-color-border: var(--dx-g-teal-natural-90);
+  --dx-g-brand-revenue-color-background: var(--dx-g-teal-vibrant-95);
+  --dx-g-brand-revenue-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
+  --dx-g-brand-revenue-button-color-background-active: var(--dx-g-teal-vibrant-80);
+  --dx-g-brand-revenue-color: var(--dx-g-teal-vibrant-20);
+  --dx-g-brand-revenue-color-border: var(--dx-g-teal-vibrant-90);
   --dx-g-brand-revenue-color-background-2: white;
-  --dx-g-brand-revenue-button-color-background-inactive-hover: var(--dx-g-teal-natural-80);
-  --dx-g-brand-revenue-color-border-2: var(--dx-g-teal-natural-80);
+  --dx-g-brand-revenue-button-color-background-inactive-hover: var(--dx-g-teal-natural-90);
+  --dx-g-brand-revenue-color-border-2: var(--dx-g-teal-vibrant-80);
 
   /* SALES */
-  --dx-g-brand-sales-color-background: var(--dx-g-teal-natural-95);
-  --dx-g-brand-sales-button-color-background-inactive: var(--dx-g-teal-natural-90);
-  --dx-g-brand-sales-button-color-background-active: var(--dx-g-teal-natural-80);
-  --dx-g-brand-sales-color: var(--dx-g-teal-natural-20);
-  --dx-g-brand-sales-color-border: var(--dx-g-teal-natural-90);
+  --dx-g-brand-sales-color-background: var(--dx-g-teal-vibrant-95);
+  --dx-g-brand-sales-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
+  --dx-g-brand-sales-button-color-background-active: var(--dx-g-teal-vibrant-80);
+  --dx-g-brand-sales-color: var(--dx-g-teal-vibrant-20);
+  --dx-g-brand-sales-color-border: var(--dx-g-teal-vibrant-90);
   --dx-g-brand-sales-color-background-2: white;
-  --dx-g-brand-sales-button-color-background-inactive-hover: var(--dx-g-teal-natural-80);
-  --dx-g-brand-sales-color-border-2: var(--dx-g-teal-natural-80);
+  --dx-g-brand-sales-button-color-background-inactive-hover: var(--dx-g-teal-vibrant-90);
+  --dx-g-brand-sales-color-border-2: var(--dx-g-teal-vibrant-80);
 
   /* SUCCESS */
   --dx-g-brand-success-color-background: var(--dx-g-cloud-blue-vibrant-95);
-  --dx-g-brand-success-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-90);
+  --dx-g-brand-success-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
   --dx-g-brand-success-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
-  --dx-g-brand-success-color: var(--dx-g-cloud-blue-natural-20);
+  --dx-g-brand-success-color: var(--dx-g-cloud-blue-vibrant-20);
   --dx-g-brand-success-color-border: var(--dx-g-cloud-blue-vibrant-90);
   --dx-g-brand-success-color-background-2: white;
-  --dx-g-brand-success-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-80);
+  --dx-g-brand-success-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
   --dx-g-brand-success-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
 
   /* EXPERIENCE */
-  --dx-g-brand-experience-color-background: var(--dx-g-blue-vibrant-95);
-  --dx-g-brand-experience-button-color-background-inactive: var(--dx-g-blue-vibrant-90);
-  --dx-g-brand-experience-button-color-background-active: var(--dx-g-blue-vibrant-80);
-  --dx-g-brand-experience-color: var(--dx-g-blue-natural-20);
-  --dx-g-brand-experience-color-border: var(--dx-g-blue-vibrant-90);
+  --dx-g-brand-experience-color-background: var(--dx-g-cloud-blue-vibrant-95);
+  --dx-g-brand-experience-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
+  --dx-g-brand-experience-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
+  --dx-g-brand-experience-color: var(--dx-g-cloud-blue-vibrant-20);
+  --dx-g-brand-experience-color-border: var(--dx-g-cloud-blue-vibrant-90);
   --dx-g-brand-experience-color-background-2: white;
-  --dx-g-brand-experience-button-color-background-inactive-hover: var(--dx-g-blue-vibrant-80);
-  --dx-g-brand-experience-color-border-2: var(--dx-g-blue-vibrant-80);
+  --dx-g-brand-experience-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
+  --dx-g-brand-experience-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
 
   /* INTEGRATION */
-  --dx-g-brand-integration-color-background: var(--dx-g-blue-vibrant-95);
-  --dx-g-brand-integration-button-color-background-inactive: var(--dx-g-blue-vibrant-90);
-  --dx-g-brand-integration-button-color-background-active: var(--dx-g-blue-vibrant-80);
-  --dx-g-brand-integration-color: var(--dx-g-blue-natural-20);
-  --dx-g-brand-integration-color-border: var(--dx-g-blue-vibrant-90);
+  --dx-g-brand-integration-color-background: var(--dx-g-cloud-blue-vibrant-95);
+  --dx-g-brand-integration-button-color-background-inactive: var(--dx-g-cloud-blue-vibrant-80);
+  --dx-g-brand-integration-button-color-background-active: var(--dx-g-cloud-blue-vibrant-80);
+  --dx-g-brand-integration-color: var(--dx-g-cloud-blue-vibrant-20);
+  --dx-g-brand-integration-color-border: var(--dx-g-cloud-blue-vibrant-90);
   --dx-g-brand-integration-color-background-2: white;
-  --dx-g-brand-integration-button-color-background-inactive-hover: var(--dx-g-blue-vibrant-80);
-  --dx-g-brand-integration-color-border-2: var(--dx-g-blue-vibrant-80);
+  --dx-g-brand-integration-button-color-background-inactive-hover: var(--dx-g-cloud-blue-vibrant-90);
+  --dx-g-brand-integration-color-border-2: var(--dx-g-cloud-blue-vibrant-80);
 
   /* PLATFORM */
   --dx-g-brand-platform-color-background: var(--dx-g-indigo-vibrant-95);
-  --dx-g-brand-platform-button-color-background-inactive: var(--dx-g-indigo-vibrant-90);
+  --dx-g-brand-platform-button-color-background-inactive: var(--dx-g-indigo-vibrant-80);
   --dx-g-brand-platform-button-color-background-active: var(--dx-g-indigo-vibrant-80);
-  --dx-g-brand-platform-color: var(--dx-g-indigo-natural-20);
+  --dx-g-brand-platform-color: var(--dx-g-indigo-vibrant-20);
   --dx-g-brand-platform-color-border: var(--dx-g-indigo-vibrant-90);
   --dx-g-brand-platform-color-background-2: white;
-  --dx-g-brand-platform-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-80);
+  --dx-g-brand-platform-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-90);
   --dx-g-brand-platform-color-border-2: var(--dx-g-indigo-vibrant-80);
 
   /* INDUSTRIES */
-  --dx-g-brand-industries-color-background: var(--dx-g-purple-vibrant-95);
-  --dx-g-brand-industries-button-color-background-inactive: var(--dx-g-purple-vibrant-90);
-  --dx-g-brand-industries-button-color-background-active: var(--dx-g-purple-vibrant-80);
-  --dx-g-brand-industries-color: var(--dx-g-purple-natural-20);
-  --dx-g-brand-industries-color-border: var(--dx-g-purple-vibrant-90);
+  --dx-g-brand-industries-color-background: var(--dx-g-violet-vibrant-95);
+  --dx-g-brand-industries-button-color-background-inactive: var(--dx-g-violet-vibrant-90);
+  --dx-g-brand-industries-button-color-background-active: var(--dx-g-violet-vibrant-70);
+  --dx-g-brand-industries-color: var(--dx-g-violet-vibrant-20);
+  --dx-g-brand-industries-color-border: var(--dx-g-violet-vibrant-90);
   --dx-g-brand-industries-color-background-2: white;
-  --dx-g-brand-industries-button-color-background-inactive-hover: var(--dx-g-purple-vibrant-80);
-  --dx-g-brand-industries-color-border-2: var(--dx-g-purple-vibrant-80);
+  --dx-g-brand-industries-button-color-background-inactive-hover: var(--dx-g-violet-vibrant-90);
+  --dx-g-brand-industries-color-border-2: var(--dx-g-violet-vibrant-80);
 
   /* LEARNING */
   --dx-g-brand-learning-color-background: var(--dx-g-violet-vibrant-95);
   --dx-g-brand-learning-button-color-background-inactive: var(--dx-g-violet-vibrant-90);
-  --dx-g-brand-learning-button-color-background-active: var(--dx-g-violet-vibrant-80);
-  --dx-g-brand-learning-color: var(--dx-g-violet-natural-20);
+  --dx-g-brand-learning-button-color-background-active: var(--dx-g-violet-vibrant-70);
+  --dx-g-brand-learning-color: var(--dx-g-violet-vibrant-20);
   --dx-g-brand-learning-color-border: var(--dx-g-violet-vibrant-90);
   --dx-g-brand-learning-color-background-2: white;
-  --dx-g-brand-learning-button-color-background-inactive-hover: var(--dx-g-violet-vibrant-80);
+  --dx-g-brand-learning-button-color-background-inactive-hover: var(--dx-g-violet-vibrant-90);
   --dx-g-brand-learning-color-border-2: var(--dx-g-violet-vibrant-80);
 
   /* SERVICE */
   --dx-g-brand-service-color-background: var(--dx-g-pink-vibrant-95);
   --dx-g-brand-service-button-color-background-inactive: var(--dx-g-pink-vibrant-90);
-  --dx-g-brand-service-button-color-background-active: var(--dx-g-pink-vibrant-80);
-  --dx-g-brand-service-color: var(--dx-g-pink-natural-20);
+  --dx-g-brand-service-button-color-background-active: var(--dx-g-pink-vibrant-65);
+  --dx-g-brand-service-color: var(--dx-g-pink-vibrant-15);
   --dx-g-brand-service-color-border: var(--dx-g-pink-vibrant-90);
   --dx-g-brand-service-color-background-2: white;
   --dx-g-brand-service-button-color-background-inactive-hover: var(--dx-g-pink-vibrant-80);
   --dx-g-brand-service-color-border-2: var(--dx-g-pink-vibrant-80);
 
   /* ANALYTICS */
-  --dx-g-brand-analytics-color-background: var(--dx-g-red-vibrant-95);
-  --dx-g-brand-analytics-button-color-background-inactive: var(--dx-g-red-vibrant-90);
-  --dx-g-brand-analytics-button-color-background-active: var(--dx-g-red-vibrant-80);
-  --dx-g-brand-analytics-color: var(--dx-g-red-natural-20);
-  --dx-g-brand-analytics-color-border: var(--dx-g-red-vibrant-90);
+  --dx-g-brand-analytics-color-background: var(--dx-g-blue-vibrant-95);
+  --dx-g-brand-analytics-button-color-background-inactive: var(--dx-g-blue-vibrant-95);
+  --dx-g-brand-analytics-button-color-background-active: var(--dx-g-blue-vibrant-80);
+  --dx-g-brand-analytics-color: var(--dx-g-blue-vibrant-20);
+  --dx-g-brand-analytics-color-border: var(--dx-g-blue-vibrant-90);
   --dx-g-brand-analytics-color-background-2: white;
-  --dx-g-brand-analytics-button-color-background-inactive-hover: var(--dx-g-red-vibrant-80);
-  --dx-g-brand-analytics-color-border-2: var(--dx-g-red-vibrant-80);
-
-    /* COLLABORATION */
-    --dx-g-brand-collaboration-color-background: var(--dx-g-hot-orange-vibrant-95);
-    --dx-g-brand-collaboration-button-color-background-inactive: var(--dx-g-hot-orange-vibrant-90);
-    --dx-g-brand-collaboration-button-color-background-active: var(--dx-g-hot-orange-vibrant-80);
-    --dx-g-brand-collaboration-color: var(--dx-g-hot-orange-natural-20);
-    --dx-g-brand-collaboration-color-border: var(--dx-g-hot-orange-vibrant-90);
-    --dx-g-brand-collaboration-color-background-2: white;
-    --dx-g-brand-collaboration-button-color-background-inactive-hover: var(--dx-g-hot-orange-vibrant-80);
-    --dx-g-brand-collaboration-color-border-2: var(--dx-g-hot-orange-vibrant-80);
-
-    /* HEROKU */
-    --dx-g-brand-heroku-color-background: var(--dx-g-indigo-vibrant-95);
-    --dx-g-brand-heroku-button-color-background-inactive: var(--dx-g-indigo-vibrant-90);
-    --dx-g-brand-heroku-button-color-background-active: var(--dx-g-indigo-vibrant-80);
-    --dx-g-brand-heroku-color: var(--dx-g-indigo-natural-20);
-    --dx-g-brand-heroku-color-border: var(--dx-g-indigo-vibrant-90);
-    --dx-g-brand-heroku-color-background-2: white;
-    --dx-g-brand-heroku-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-80);
-    --dx-g-brand-heroku-color-border-2: var(--dx-g-indigo-vibrant-80);
-
-    /* SLACK */
-    --dx-g-brand-slack-color-background: rgba(74, 21,75, 1);
+  --dx-g-brand-analytics-button-color-background-inactive-hover: var(--dx-g-blue-vibrant-90);
+  --dx-g-brand-analytics-color-border-2: var(--dx-g-blue-vibrant-80);
+
+  /* COLLABORATION */
+  --dx-g-brand-collaboration-color-background: var(--dx-g-teal-vibrant-95);
+  --dx-g-brand-collaboration-button-color-background-inactive: var(--dx-g-teal-vibrant-90);
+  --dx-g-brand-collaboration-button-color-background-active: var(--dx-g-teal-vibrant-80);
+  --dx-g-brand-collaboration-color: var(--dx-g-teal-vibrant-20);
+  --dx-g-brand-collaboration-color-border: var(--dx-g-teal-vibrant-90);
+  --dx-g-brand-collaboration-color-background-2: white;
+  --dx-g-brand-collaboration-button-color-background-inactive-hover: var(--dx-g-teal-natural-90);
+  --dx-g-brand-collaboration-color-border-2: var(--dx-g-teal-vibrant-80);
+
+  /* HEROKU */
+  --dx-g-brand-heroku-color-background: var(--dx-g-purple-vibrant-95);
+  --dx-g-brand-heroku-button-color-background-inactive: var(--dx-g-purple-vibrant-90);
+  --dx-g-brand-heroku-button-color-background-active: var(--dx-g-purple-vibrant-70);
+  --dx-g-brand-heroku-color: var(--dx-g-purple-vibrant-20);
+  --dx-g-brand-heroku-color-border: var(--dx-g-purple-vibrant-90);
+  --dx-g-brand-heroku-color-background-2: white;
+  --dx-g-brand-heroku-button-color-background-inactive-hover: var(--dx-g-purple-vibrant-90);
+  --dx-g-brand-heroku-color-border-2: var(--dx-g-purple-vibrant-80);
+
+  /* SLACK */
+  --dx-g-brand-slack-color-background: rgba(74, 21, 75, 1);
 
   /* ------ */
   /* CONTENT TYPE THEMES */

package/assets/css/page.css

@@ -1,22 +1,22 @@
 /* DESKTOP */
 :root {
-  --dx-g-page-padding-horizontal: var(--dx-g-spacing-3xl);
+  --dx-g-header-padding-horizontal: var(--dx-g-spacing-lg);
   --dx-g-page-padding-horizontal-lg: var(--dx-g-spacing-md);
   --dx-g-page-grid-gap: var(--dx-g-spacing-3xl);
 }
 
 /* HORIZ PADDING: breakpoint that provides the max content width via responive padding at wide screen widths
 min-width = max-width of all content + 2 x desktop padding */
-@media screen and (min-width: 1496px) {
+@media screen and (min-width: 1480px) {
   :root {
       --dx-g-page-padding-horizontal: calc((100vw - 1400px) / 2);
   }
 }
 
 /* TABLET */
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1278px) {
   :root {
-      --dx-g-page-padding-horizontal: 20px;
+      --dx-g-page-padding-horizontal: var(--dx-g-spacing-xl);
       --dx-g-page-grid-gap: var(--dx-g-spacing-xl);
   }
 }
@@ -32,6 +32,7 @@ min-width = max-width of all largely padded content + 2 x desktop padding */
 /* MOBILE */
 @media screen and (max-width: 768px) {
   :root {
+    --dx-g-page-padding-horizontal: var(--dx-g-spacing-lg);
     --dx-g-page-grid-gap: var(--dx-g-spacing-lg);
   }
 }

package/assets/css/typography.css

@@ -30,7 +30,7 @@
   --dx-g-text-base: 16px; /* 1rem */
   --dx-g-text-lg: 20px; /* 1.25rem */
   --dx-g-text-xl: 24px; /* 1.5rem */
-  --dx-g-text-2xl: 30px; /* 1.875rem */
+  --dx-g-text-2xl: 32px; /* 2rem */
   --dx-g-text-3xl: 40px; /* 2.5rem */
   --dx-g-text-4xl: 48px; /* 3rem */
   --dx-g-text-5xl: 56px; /* 3.5rem */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-css-variables",
-  "version": "0.2.6",
+  "version": "0.2.8-alpha01",
   "license": "BSD-3-Clause",
   "files": [
     "assets"