@salesforcedevs/dx-css-variables 0.4.1 → 0.4.2-remediation.1

package/assets/css/borders.css

@@ -0,0 +1,20 @@
+:root {
+  /*
+  Canonical global radius and border width tokens for the DSC design
+  system. The radius steps are the WES steps. `full` draws a circle on a
+  square and a pill on a wider box. A component points its own hook at a
+  step.
+  */
+
+  --dx-g-radius-border-1: 4px;
+  --dx-g-radius-border-2: 8px;
+  --dx-g-radius-border-3: 12px;
+  --dx-g-radius-border-4: 16px;
+  --dx-g-radius-border-5: 20px;
+  --dx-g-radius-border-full: 9999px;
+
+  --dx-g-border-width-1: 1px;
+  --dx-g-border-width-2: 2px;
+  --dx-g-border-width-3: 3px;
+  --dx-g-border-width-4: 4px;
+}

package/assets/css/colors/aliases.css

@@ -0,0 +1,194 @@
+/*
+Deprecated color names (remediation 1.4 and Q-text-pair).
+Each old name points at its new name, so code that uses it sees the same
+color. Do not use these in new code. They stay until the token deprecation
+policy (remediation 3.3) says when they go.
+
+Set on body.dark as well as :root so each alias follows the new name there.
+*/
+:root,
+body.dark {
+  /* Deprecated: use --dx-g-neutral-{step}. */
+  --dx-g-gray-95: var(--dx-g-neutral-95);
+  --dx-g-gray-90: var(--dx-g-neutral-90);
+  --dx-g-gray-80: var(--dx-g-neutral-80);
+  --dx-g-gray-70: var(--dx-g-neutral-70);
+  --dx-g-gray-65: var(--dx-g-neutral-65);
+  --dx-g-gray-60: var(--dx-g-neutral-60);
+  --dx-g-gray-50: var(--dx-g-neutral-50);
+  --dx-g-gray-40: var(--dx-g-neutral-40);
+  --dx-g-gray-30: var(--dx-g-neutral-30);
+  --dx-g-gray-20: var(--dx-g-neutral-20);
+  --dx-g-gray-15: var(--dx-g-neutral-15);
+  --dx-g-gray-10: var(--dx-g-neutral-10);
+
+  /* Deprecated: use --dx-g-{family}-{step} (the same name without -vibrant). */
+  --dx-g-hot-orange-vibrant-95: var(--dx-g-hot-orange-95);
+  --dx-g-hot-orange-vibrant-90: var(--dx-g-hot-orange-90);
+  --dx-g-hot-orange-vibrant-80: var(--dx-g-hot-orange-80);
+  --dx-g-hot-orange-vibrant-70: var(--dx-g-hot-orange-70);
+  --dx-g-hot-orange-vibrant-65: var(--dx-g-hot-orange-65);
+  --dx-g-hot-orange-vibrant-60: var(--dx-g-hot-orange-60);
+  --dx-g-hot-orange-vibrant-50: var(--dx-g-hot-orange-50);
+  --dx-g-hot-orange-vibrant-40: var(--dx-g-hot-orange-40);
+  --dx-g-hot-orange-vibrant-30: var(--dx-g-hot-orange-30);
+  --dx-g-hot-orange-vibrant-20: var(--dx-g-hot-orange-20);
+  --dx-g-hot-orange-vibrant-15: var(--dx-g-hot-orange-15);
+  --dx-g-hot-orange-vibrant-10: var(--dx-g-hot-orange-10);
+  --dx-g-orange-vibrant-95: var(--dx-g-orange-95);
+  --dx-g-orange-vibrant-90: var(--dx-g-orange-90);
+  --dx-g-orange-vibrant-80: var(--dx-g-orange-80);
+  --dx-g-orange-vibrant-70: var(--dx-g-orange-70);
+  --dx-g-orange-vibrant-65: var(--dx-g-orange-65);
+  --dx-g-orange-vibrant-60: var(--dx-g-orange-60);
+  --dx-g-orange-vibrant-50: var(--dx-g-orange-50);
+  --dx-g-orange-vibrant-40: var(--dx-g-orange-40);
+  --dx-g-orange-vibrant-30: var(--dx-g-orange-30);
+  --dx-g-orange-vibrant-20: var(--dx-g-orange-20);
+  --dx-g-orange-vibrant-15: var(--dx-g-orange-15);
+  --dx-g-orange-vibrant-10: var(--dx-g-orange-10);
+  --dx-g-yellow-vibrant-95: var(--dx-g-yellow-95);
+  --dx-g-yellow-vibrant-90: var(--dx-g-yellow-90);
+  --dx-g-yellow-vibrant-80: var(--dx-g-yellow-80);
+  --dx-g-yellow-vibrant-70: var(--dx-g-yellow-70);
+  --dx-g-yellow-vibrant-65: var(--dx-g-yellow-65);
+  --dx-g-yellow-vibrant-60: var(--dx-g-yellow-60);
+  --dx-g-yellow-vibrant-50: var(--dx-g-yellow-50);
+  --dx-g-yellow-vibrant-40: var(--dx-g-yellow-40);
+  --dx-g-yellow-vibrant-30: var(--dx-g-yellow-30);
+  --dx-g-yellow-vibrant-20: var(--dx-g-yellow-20);
+  --dx-g-yellow-vibrant-15: var(--dx-g-yellow-15);
+  --dx-g-yellow-vibrant-10: var(--dx-g-yellow-10);
+  --dx-g-green-vibrant-95: var(--dx-g-green-95);
+  --dx-g-green-vibrant-90: var(--dx-g-green-90);
+  --dx-g-green-vibrant-80: var(--dx-g-green-80);
+  --dx-g-green-vibrant-70: var(--dx-g-green-70);
+  --dx-g-green-vibrant-65: var(--dx-g-green-65);
+  --dx-g-green-vibrant-60: var(--dx-g-green-60);
+  --dx-g-green-vibrant-50: var(--dx-g-green-50);
+  --dx-g-green-vibrant-40: var(--dx-g-green-40);
+  --dx-g-green-vibrant-30: var(--dx-g-green-30);
+  --dx-g-green-vibrant-20: var(--dx-g-green-20);
+  --dx-g-green-vibrant-15: var(--dx-g-green-15);
+  --dx-g-green-vibrant-10: var(--dx-g-green-10);
+  --dx-g-teal-vibrant-95: var(--dx-g-teal-95);
+  --dx-g-teal-vibrant-90: var(--dx-g-teal-90);
+  --dx-g-teal-vibrant-80: var(--dx-g-teal-80);
+  --dx-g-teal-vibrant-70: var(--dx-g-teal-70);
+  --dx-g-teal-vibrant-65: var(--dx-g-teal-65);
+  --dx-g-teal-vibrant-60: var(--dx-g-teal-60);
+  --dx-g-teal-vibrant-50: var(--dx-g-teal-50);
+  --dx-g-teal-vibrant-40: var(--dx-g-teal-40);
+  --dx-g-teal-vibrant-30: var(--dx-g-teal-30);
+  --dx-g-teal-vibrant-20: var(--dx-g-teal-20);
+  --dx-g-teal-vibrant-15: var(--dx-g-teal-15);
+  --dx-g-teal-vibrant-10: var(--dx-g-teal-10);
+  --dx-g-blue-vibrant-95: var(--dx-g-blue-95);
+  --dx-g-blue-vibrant-90: var(--dx-g-blue-90);
+  --dx-g-blue-vibrant-80: var(--dx-g-blue-80);
+  --dx-g-blue-vibrant-70: var(--dx-g-blue-70);
+  --dx-g-blue-vibrant-65: var(--dx-g-blue-65);
+  --dx-g-blue-vibrant-60: var(--dx-g-blue-60);
+  --dx-g-blue-vibrant-50: var(--dx-g-blue-50);
+  --dx-g-blue-vibrant-40: var(--dx-g-blue-40);
+  --dx-g-blue-vibrant-30: var(--dx-g-blue-30);
+  --dx-g-blue-vibrant-20: var(--dx-g-blue-20);
+  --dx-g-blue-vibrant-15: var(--dx-g-blue-15);
+  --dx-g-blue-vibrant-10: var(--dx-g-blue-10);
+  --dx-g-indigo-vibrant-95: var(--dx-g-indigo-95);
+  --dx-g-indigo-vibrant-90: var(--dx-g-indigo-90);
+  --dx-g-indigo-vibrant-80: var(--dx-g-indigo-80);
+  --dx-g-indigo-vibrant-70: var(--dx-g-indigo-70);
+  --dx-g-indigo-vibrant-65: var(--dx-g-indigo-65);
+  --dx-g-indigo-vibrant-60: var(--dx-g-indigo-60);
+  --dx-g-indigo-vibrant-50: var(--dx-g-indigo-50);
+  --dx-g-indigo-vibrant-40: var(--dx-g-indigo-40);
+  --dx-g-indigo-vibrant-30: var(--dx-g-indigo-30);
+  --dx-g-indigo-vibrant-20: var(--dx-g-indigo-20);
+  --dx-g-indigo-vibrant-15: var(--dx-g-indigo-15);
+  --dx-g-indigo-vibrant-10: var(--dx-g-indigo-10);
+  --dx-g-purple-vibrant-95: var(--dx-g-purple-95);
+  --dx-g-purple-vibrant-90: var(--dx-g-purple-90);
+  --dx-g-purple-vibrant-80: var(--dx-g-purple-80);
+  --dx-g-purple-vibrant-70: var(--dx-g-purple-70);
+  --dx-g-purple-vibrant-65: var(--dx-g-purple-65);
+  --dx-g-purple-vibrant-60: var(--dx-g-purple-60);
+  --dx-g-purple-vibrant-50: var(--dx-g-purple-50);
+  --dx-g-purple-vibrant-40: var(--dx-g-purple-40);
+  --dx-g-purple-vibrant-30: var(--dx-g-purple-30);
+  --dx-g-purple-vibrant-20: var(--dx-g-purple-20);
+  --dx-g-purple-vibrant-15: var(--dx-g-purple-15);
+  --dx-g-purple-vibrant-10: var(--dx-g-purple-10);
+  --dx-g-violet-vibrant-95: var(--dx-g-violet-95);
+  --dx-g-violet-vibrant-90: var(--dx-g-violet-90);
+  --dx-g-violet-vibrant-80: var(--dx-g-violet-80);
+  --dx-g-violet-vibrant-70: var(--dx-g-violet-70);
+  --dx-g-violet-vibrant-65: var(--dx-g-violet-65);
+  --dx-g-violet-vibrant-60: var(--dx-g-violet-60);
+  --dx-g-violet-vibrant-50: var(--dx-g-violet-50);
+  --dx-g-violet-vibrant-40: var(--dx-g-violet-40);
+  --dx-g-violet-vibrant-30: var(--dx-g-violet-30);
+  --dx-g-violet-vibrant-20: var(--dx-g-violet-20);
+  --dx-g-violet-vibrant-15: var(--dx-g-violet-15);
+  --dx-g-violet-vibrant-10: var(--dx-g-violet-10);
+  --dx-g-pink-vibrant-95: var(--dx-g-pink-95);
+  --dx-g-pink-vibrant-90: var(--dx-g-pink-90);
+  --dx-g-pink-vibrant-80: var(--dx-g-pink-80);
+  --dx-g-pink-vibrant-70: var(--dx-g-pink-70);
+  --dx-g-pink-vibrant-65: var(--dx-g-pink-65);
+  --dx-g-pink-vibrant-60: var(--dx-g-pink-60);
+  --dx-g-pink-vibrant-50: var(--dx-g-pink-50);
+  --dx-g-pink-vibrant-40: var(--dx-g-pink-40);
+  --dx-g-pink-vibrant-30: var(--dx-g-pink-30);
+  --dx-g-pink-vibrant-20: var(--dx-g-pink-20);
+  --dx-g-pink-vibrant-15: var(--dx-g-pink-15);
+  --dx-g-pink-vibrant-10: var(--dx-g-pink-10);
+  --dx-g-red-vibrant-95: var(--dx-g-red-95);
+  --dx-g-red-vibrant-90: var(--dx-g-red-90);
+  --dx-g-red-vibrant-80: var(--dx-g-red-80);
+  --dx-g-red-vibrant-70: var(--dx-g-red-70);
+  --dx-g-red-vibrant-65: var(--dx-g-red-65);
+  --dx-g-red-vibrant-60: var(--dx-g-red-60);
+  --dx-g-red-vibrant-50: var(--dx-g-red-50);
+  --dx-g-red-vibrant-40: var(--dx-g-red-40);
+  --dx-g-red-vibrant-30: var(--dx-g-red-30);
+  --dx-g-red-vibrant-20: var(--dx-g-red-20);
+  --dx-g-red-vibrant-15: var(--dx-g-red-15);
+  --dx-g-red-vibrant-10: var(--dx-g-red-10);
+
+  /* Deprecated: use --dx-g-blue-{step}. This scale was a copy of blue. It is not SLDS cloud-blue, a different color. */
+  --dx-g-cloud-blue-vibrant-95: var(--dx-g-blue-95);
+  --dx-g-cloud-blue-vibrant-90: var(--dx-g-blue-90);
+  --dx-g-cloud-blue-vibrant-80: var(--dx-g-blue-80);
+  --dx-g-cloud-blue-vibrant-70: var(--dx-g-blue-70);
+  --dx-g-cloud-blue-vibrant-65: var(--dx-g-blue-65);
+  --dx-g-cloud-blue-vibrant-60: var(--dx-g-blue-60);
+  --dx-g-cloud-blue-vibrant-50: var(--dx-g-blue-50);
+  --dx-g-cloud-blue-vibrant-40: var(--dx-g-blue-40);
+  --dx-g-cloud-blue-vibrant-30: var(--dx-g-blue-30);
+  --dx-g-cloud-blue-vibrant-20: var(--dx-g-blue-20);
+  --dx-g-cloud-blue-vibrant-15: var(--dx-g-blue-15);
+  --dx-g-cloud-blue-vibrant-10: var(--dx-g-blue-10);
+
+  /* Deprecated: use the --dx-g-neutral-{step} shown. Each step points at the nearest neutral, so these warm grays shift slightly. */
+  --sds-g-gray-1: var(--dx-g-neutral-100);
+  --sds-g-gray-2: var(--dx-g-neutral-100);
+  --sds-g-gray-3: var(--dx-g-neutral-95);
+  --sds-g-gray-4: var(--dx-g-neutral-90);
+  --sds-g-gray-5: var(--dx-g-neutral-90);
+  --sds-g-gray-6: var(--dx-g-neutral-80);
+  --sds-g-gray-7: var(--dx-g-neutral-70);
+  --sds-g-gray-8: var(--dx-g-neutral-60);
+  --sds-g-gray-9: var(--dx-g-neutral-50);
+  --sds-g-gray-10: var(--dx-g-neutral-30);
+  --sds-g-gray-11: var(--dx-g-neutral-30);
+  --sds-g-gray-12: var(--dx-g-neutral-15);
+  --sds-g-gray-13: var(--dx-g-neutral-0);
+  --sds-g-gray-14: var(--dx-g-neutral-40);
+
+  /* Deprecated (Q-text-pair): use the --dx-g-color-* name each one points at. */
+  --dx-g-body-background-color: var(--dx-g-color-surface-default);
+  --dx-g-text-body-color: var(--dx-g-color-text-default);
+  --dx-g-code-background-color: var(--dx-g-color-surface-code-inline);
+  --dx-g-code-text-color: var(--dx-g-color-text-code);
+}

package/assets/css/colors/brand.css

@@ -6,183 +6,184 @@
 
   /* DEFAULT THEME (BRANDLESS) */
   --dx-g-brand-default-color-background: white;
-  --dx-g-brand-default-button-color-background-inactive: var(--dx-g-gray-95);
-  --dx-g-brand-default-button-color-background-active: var(--dx-g-cloud-blue-vibrant-95);
-  --dx-g-brand-default-color: var(--dx-g-blue-vibrant-40);
-  --dx-g-brand-default-color-border: var(--dx-g-gray-95);
-  --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);
+  --dx-g-brand-default-button-color-background-inactive: var(--dx-g-neutral-95);
+  --dx-g-brand-default-button-color-background-active: var(--dx-g-blue-95);
+  --dx-g-brand-default-color: var(--dx-g-blue-40);
+  --dx-g-brand-default-color-border: var(--dx-g-neutral-95);
+  --dx-g-brand-default-color-background-2: var(--dx-g-blue-95);
+  --dx-g-brand-default-button-color-background-inactive-hover: var(--dx-g-neutral-90);
+  --dx-g-brand-default-color-border-2: var(--dx-g-neutral-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-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: var(--dx-g-hot-orange-95);
+  --dx-g-brand-employees-button-color-background-inactive: var(--dx-g-hot-orange-90);
+  --dx-g-brand-employees-button-color-background-active: var(--dx-g-hot-orange-65);
+  --dx-g-brand-employees-color: var(--dx-g-hot-orange-15);
+  --dx-g-brand-employees-color-border: var(--dx-g-hot-orange-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);
-  --dx-g-brand-employees-color-border-2: var(--dx-g-hot-orange-vibrant-80);
+  --dx-g-brand-employees-button-color-background-inactive-hover: var(--dx-g-hot-orange-80);
+  --dx-g-brand-employees-color-border-2: var(--dx-g-hot-orange-80);
 
   /* 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-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: var(--dx-g-orange-95);
+  --dx-g-brand-marketing-button-color-background-inactive: var(--dx-g-orange-90);
+  --dx-g-brand-marketing-button-color-background-active: var(--dx-g-orange-70);
+  --dx-g-brand-marketing-color: var(--dx-g-orange-20);
+  --dx-g-brand-marketing-color-border: var(--dx-g-orange-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);
+  --dx-g-brand-marketing-button-color-background-inactive-hover: var(--dx-g-orange-80);
+  --dx-g-brand-marketing-color-border-2: var(--dx-g-orange-80);
 
   /* PARTNERS */
-  --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: var(--dx-g-yellow-95);
+  --dx-g-brand-partners-button-color-background-inactive: var(--dx-g-yellow-90);
+  --dx-g-brand-partners-button-color-background-active: var(--dx-g-yellow-80);
+  --dx-g-brand-partners-color: var(--dx-g-yellow-20);
+  --dx-g-brand-partners-color-border: var(--dx-g-yellow-90);
   --dx-g-brand-partners-color-background-2: white;
   --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);
+  --dx-g-brand-partners-color-border-2: var(--dx-g-yellow-80);
 
   /* COMMERCE */
-  --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-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: var(--dx-g-green-90);
+  --dx-g-brand-commerce-button-color-background-inactive: var(--dx-g-green-90);
+  --dx-g-brand-commerce-button-color-background-active: var(--dx-g-green-65);
+  --dx-g-brand-commerce-color: var(--dx-g-green-15);
+  --dx-g-brand-commerce-color-border: var(--dx-g-green-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);
+  --dx-g-brand-commerce-button-color-background-inactive-hover: var(--dx-g-green-80);
+  --dx-g-brand-commerce-color-border-2: var(--dx-g-green-80);
 
   /* REVENUE */
-  --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: var(--dx-g-teal-95);
+  --dx-g-brand-revenue-button-color-background-inactive: var(--dx-g-teal-90);
+  --dx-g-brand-revenue-button-color-background-active: var(--dx-g-teal-80);
+  --dx-g-brand-revenue-color: var(--dx-g-teal-20);
+  --dx-g-brand-revenue-color-border: var(--dx-g-teal-90);
   --dx-g-brand-revenue-color-background-2: white;
   --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);
+  --dx-g-brand-revenue-color-border-2: var(--dx-g-teal-80);
 
   /* SALES */
-  --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: var(--dx-g-teal-95);
+  --dx-g-brand-sales-button-color-background-inactive: var(--dx-g-teal-90);
+  --dx-g-brand-sales-button-color-background-active: var(--dx-g-teal-80);
+  --dx-g-brand-sales-color: var(--dx-g-teal-20);
+  --dx-g-brand-sales-color-border: var(--dx-g-teal-90);
   --dx-g-brand-sales-color-background-2: white;
-  --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);
+  --dx-g-brand-sales-button-color-background-inactive-hover: var(--dx-g-teal-90);
+  --dx-g-brand-sales-color-border-2: var(--dx-g-teal-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-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-vibrant-20);
-  --dx-g-brand-success-color-border: var(--dx-g-cloud-blue-vibrant-90);
+  --dx-g-brand-success-color-background: var(--dx-g-blue-95);
+  --dx-g-brand-success-button-color-background-inactive: var(--dx-g-blue-80);
+  --dx-g-brand-success-button-color-background-active: var(--dx-g-blue-80);
+  --dx-g-brand-success-color: var(--dx-g-blue-20);
+  --dx-g-brand-success-color-border: var(--dx-g-blue-90);
   --dx-g-brand-success-color-background-2: white;
-  --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);
+  --dx-g-brand-success-button-color-background-inactive-hover: var(--dx-g-blue-90);
+  --dx-g-brand-success-color-border-2: var(--dx-g-blue-80);
 
   /* EXPERIENCE */
-  --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: var(--dx-g-blue-95);
+  --dx-g-brand-experience-button-color-background-inactive: var(--dx-g-blue-80);
+  --dx-g-brand-experience-button-color-background-active: var(--dx-g-blue-80);
+  --dx-g-brand-experience-color: var(--dx-g-blue-20);
+  --dx-g-brand-experience-color-border: var(--dx-g-blue-90);
   --dx-g-brand-experience-color-background-2: white;
-  --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);
+  --dx-g-brand-experience-button-color-background-inactive-hover: var(--dx-g-blue-90);
+  --dx-g-brand-experience-color-border-2: var(--dx-g-blue-80);
 
   /* INTEGRATION */
-  --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: var(--dx-g-blue-95);
+  --dx-g-brand-integration-button-color-background-inactive: var(--dx-g-blue-80);
+  --dx-g-brand-integration-button-color-background-active: var(--dx-g-blue-80);
+  --dx-g-brand-integration-color: var(--dx-g-blue-20);
+  --dx-g-brand-integration-color-border: var(--dx-g-blue-90);
   --dx-g-brand-integration-color-background-2: white;
-  --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);
+  --dx-g-brand-integration-button-color-background-inactive-hover: var(--dx-g-blue-90);
+  --dx-g-brand-integration-color-border-2: var(--dx-g-blue-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-80);
-  --dx-g-brand-platform-button-color-background-active: var(--dx-g-indigo-vibrant-80);
-  --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: var(--dx-g-indigo-95);
+  --dx-g-brand-platform-button-color-background-inactive: var(--dx-g-indigo-80);
+  --dx-g-brand-platform-button-color-background-active: var(--dx-g-indigo-80);
+  --dx-g-brand-platform-color: var(--dx-g-indigo-20);
+  --dx-g-brand-platform-color-border: var(--dx-g-indigo-90);
   --dx-g-brand-platform-color-background-2: white;
-  --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);
+  --dx-g-brand-platform-button-color-background-inactive-hover: var(--dx-g-indigo-90);
+  --dx-g-brand-platform-color-border-2: var(--dx-g-indigo-80);
 
   /* DATA CLOUD */
-  --dx-g-brand-data-color-background: var(--dx-g-indigo-vibrant-95);
-  --dx-g-brand-data-button-color-background-inactive: var(--dx-g-indigo-vibrant-80);
-  --dx-g-brand-data-button-color-background-active: var(--dx-g-indigo-vibrant-80);
-  --dx-g-brand-data-color: var(--dx-g-indigo-vibrant-20);
-  --dx-g-brand-data-color-border: var(--dx-g-indigo-vibrant-90);
+  --dx-g-brand-data-color-background: var(--dx-g-indigo-95);
+  --dx-g-brand-data-button-color-background-inactive: var(--dx-g-indigo-80);
+  --dx-g-brand-data-button-color-background-active: var(--dx-g-indigo-80);
+  --dx-g-brand-data-color: var(--dx-g-indigo-20);
+  --dx-g-brand-data-color-border: var(--dx-g-indigo-90);
   --dx-g-brand-data-color-background-2: white;
-  --dx-g-brand-data-button-color-background-inactive-hover: var(--dx-g-indigo-vibrant-90);
-  --dx-g-brand-data-color-border-2: var(--dx-g-indigo-vibrant-80);
+  --dx-g-brand-data-button-color-background-inactive-hover: var(--dx-g-indigo-90);
+  --dx-g-brand-data-color-border-2: var(--dx-g-indigo-80);
 
   /* INDUSTRIES */
-  --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: var(--dx-g-violet-95);
+  --dx-g-brand-industries-button-color-background-inactive: var(--dx-g-violet-90);
+  --dx-g-brand-industries-button-color-background-active: var(--dx-g-violet-70);
+  --dx-g-brand-industries-color: var(--dx-g-violet-20);
+  --dx-g-brand-industries-color-border: var(--dx-g-violet-90);
   --dx-g-brand-industries-color-background-2: white;
-  --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);
+  --dx-g-brand-industries-button-color-background-inactive-hover: var(--dx-g-violet-90);
+  --dx-g-brand-industries-color-border-2: var(--dx-g-violet-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-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: var(--dx-g-violet-95);
+  --dx-g-brand-learning-button-color-background-inactive: var(--dx-g-violet-90);
+  --dx-g-brand-learning-button-color-background-active: var(--dx-g-violet-70);
+  --dx-g-brand-learning-color: var(--dx-g-violet-20);
+  --dx-g-brand-learning-color-border: var(--dx-g-violet-90);
   --dx-g-brand-learning-color-background-2: white;
-  --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);
+  --dx-g-brand-learning-button-color-background-inactive-hover: var(--dx-g-violet-90);
+  --dx-g-brand-learning-color-border-2: var(--dx-g-violet-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-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: var(--dx-g-pink-95);
+  --dx-g-brand-service-button-color-background-inactive: var(--dx-g-pink-90);
+  --dx-g-brand-service-button-color-background-active: var(--dx-g-pink-65);
+  --dx-g-brand-service-color: var(--dx-g-pink-15);
+  --dx-g-brand-service-color-border: var(--dx-g-pink-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);
+  --dx-g-brand-service-button-color-background-inactive-hover: var(--dx-g-pink-80);
+  --dx-g-brand-service-color-border-2: var(--dx-g-pink-80);
 
   /* ANALYTICS */
-  --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: var(--dx-g-blue-95);
+  --dx-g-brand-analytics-button-color-background-inactive: var(--dx-g-blue-95);
+  --dx-g-brand-analytics-button-color-background-active: var(--dx-g-blue-80);
+  --dx-g-brand-analytics-color: var(--dx-g-blue-20);
+  --dx-g-brand-analytics-color-border: var(--dx-g-blue-90);
   --dx-g-brand-analytics-color-background-2: white;
-  --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);
+  --dx-g-brand-analytics-button-color-background-inactive-hover: var(--dx-g-blue-90);
+  --dx-g-brand-analytics-color-border-2: var(--dx-g-blue-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: var(--dx-g-teal-95);
+  --dx-g-brand-collaboration-button-color-background-inactive: var(--dx-g-teal-90);
+  --dx-g-brand-collaboration-button-color-background-active: var(--dx-g-teal-80);
+  --dx-g-brand-collaboration-color: var(--dx-g-teal-20);
+  --dx-g-brand-collaboration-color-border: var(--dx-g-teal-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);
+  --dx-g-brand-collaboration-color-border-2: var(--dx-g-teal-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: var(--dx-g-purple-95);
+  --dx-g-brand-heroku-button-color-background-inactive: var(--dx-g-purple-90);
+  --dx-g-brand-heroku-button-color-background-active: var(--dx-g-purple-70);
+  --dx-g-brand-heroku-color: var(--dx-g-purple-20);
+  --dx-g-brand-heroku-color-border: var(--dx-g-purple-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);
+  --dx-g-brand-heroku-button-color-background-inactive-hover: var(--dx-g-purple-90);
+  --dx-g-brand-heroku-color-border-2: var(--dx-g-purple-80);
 
   /* SLACK */
+  /* stylelint-disable-next-line function-disallowed-list -- leftover raw color; fix in a later item, not Q-tier-lint */
   --dx-g-brand-slack-color-background: rgba(74, 21, 75, 1);
 }

package/assets/css/colors/content-type.css

@@ -5,42 +5,42 @@
   /* ------ */
 
   /* DOCUMENTATION */
-  --dx-g-content-type-documentation-color: var(--dx-g-blue-vibrant-40);
-  --dx-g-content-type-documentation-color-background: var(--dx-g-blue-vibrant-95);
+  --dx-g-content-type-documentation-color: var(--dx-g-blue-40);
+  --dx-g-content-type-documentation-color-background: var(--dx-g-blue-95);
 
   /* HELP_DOCUMENTATION */
-  --dx-g-content-type-help_documentation-color: var(--dx-g-blue-vibrant-40);
-  --dx-g-content-type-help_documentation-color-background: var(--dx-g-blue-vibrant-95);
+  --dx-g-content-type-help_documentation-color: var(--dx-g-blue-40);
+  --dx-g-content-type-help_documentation-color-background: var(--dx-g-blue-95);
 
   /* TRAILHEAD */
   --dx-g-content-type-trailhead-color: var(--dx-g-brand-learning-color);
   --dx-g-content-type-trailhead-color-background: var(--dx-g-brand-learning-color-background);
 
   /* BLOG */
-  --dx-g-content-type-blog-color: var(--dx-g-teal-vibrant-40);
-  --dx-g-content-type-blog-color-background: var(--dx-g-teal-vibrant-95);
+  --dx-g-content-type-blog-color: var(--dx-g-teal-40);
+  --dx-g-content-type-blog-color-background: var(--dx-g-teal-95);
 
   /* FORUM */
-  --dx-g-content-type-forum-color: var(--dx-g-yellow-vibrant-40);
-  --dx-g-content-type-forum-color-background: var(--dx-g-yellow-vibrant-95);
+  --dx-g-content-type-forum-color: var(--dx-g-yellow-40);
+  --dx-g-content-type-forum-color-background: var(--dx-g-yellow-95);
 
   /* API */
-  --dx-g-content-type-api-color: var(--dx-g-pink-vibrant-40);
-  --dx-g-content-type-api-color-background: var(--dx-g-pink-vibrant-95);
+  --dx-g-content-type-api-color: var(--dx-g-pink-40);
+  --dx-g-content-type-api-color-background: var(--dx-g-pink-95);
 
   /* EVENT */
-  --dx-g-content-type-event-color: var(--dx-g-red-vibrant-40);
-  --dx-g-content-type-event-color-background: var(--dx-g-red-vibrant-95);
+  --dx-g-content-type-event-color: var(--dx-g-red-40);
+  --dx-g-content-type-event-color-background: var(--dx-g-red-95);
 
   /* WEBSITE */
-  --dx-g-content-type-website-color: var(--dx-g-indigo-vibrant-40);
-  --dx-g-content-type-website-color-background: var(--dx-g-indigo-vibrant-95);
+  --dx-g-content-type-website-color: var(--dx-g-indigo-40);
+  --dx-g-content-type-website-color-background: var(--dx-g-indigo-95);
 
   /* PODCAST */
-  --dx-g-content-type-podcast-color: var(--dx-g-purple-vibrant-40);
-  --dx-g-content-type-podcast-color-background: var(--dx-g-purple-vibrant-95);
+  --dx-g-content-type-podcast-color: var(--dx-g-purple-40);
+  --dx-g-content-type-podcast-color-background: var(--dx-g-purple-95);
 
   /* COMMUNITY */
-  --dx-g-content-type-community_posts-color: var(--dx-g-cloud-blue-vibrant-40);
-  --dx-g-content-type-community_posts-color-background: var(--dx-g-cloud-blue-vibrant-95);
+  --dx-g-content-type-community_posts-color: var(--dx-g-blue-40);
+  --dx-g-content-type-community_posts-color-background: var(--dx-g-blue-95);
 }