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

package/assets/css/colors/aliases.css

@@ -0,0 +1,188 @@
+/*
+Deprecated color names (remediation 1.4).
+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);
+}

package/assets/css/colors/brand.css

@@ -0,0 +1,189 @@
+/* Brand theme color tokens. */
+:root {
+  /* ------ */
+  /* BRAND THEMES */
+  /* ------ */
+
+  /* DEFAULT THEME (BRANDLESS) */
+  --dx-g-brand-default-color-background: white;
+  --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-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-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-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-80);
+  --dx-g-brand-marketing-color-border-2: var(--dx-g-orange-80);
+
+  /* PARTNERS */
+  --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-80);
+
+  /* COMMERCE */
+  --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-80);
+  --dx-g-brand-commerce-color-border-2: var(--dx-g-green-80);
+
+  /* REVENUE */
+  --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-80);
+
+  /* SALES */
+  --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-90);
+  --dx-g-brand-sales-color-border-2: var(--dx-g-teal-80);
+
+  /* SUCCESS */
+  --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-blue-90);
+  --dx-g-brand-success-color-border-2: var(--dx-g-blue-80);
+
+  /* EXPERIENCE */
+  --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-blue-90);
+  --dx-g-brand-experience-color-border-2: var(--dx-g-blue-80);
+
+  /* INTEGRATION */
+  --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-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-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-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-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-90);
+  --dx-g-brand-data-color-border-2: var(--dx-g-indigo-80);
+
+  /* INDUSTRIES */
+  --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-90);
+  --dx-g-brand-industries-color-border-2: var(--dx-g-violet-80);
+
+  /* LEARNING */
+  --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-90);
+  --dx-g-brand-learning-color-border-2: var(--dx-g-violet-80);
+
+  /* SERVICE */
+  --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-80);
+  --dx-g-brand-service-color-border-2: var(--dx-g-pink-80);
+
+  /* ANALYTICS */
+  --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-90);
+  --dx-g-brand-analytics-color-border-2: var(--dx-g-blue-80);
+
+  /* COLLABORATION */
+  --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-80);
+
+  /* HEROKU */
+  --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-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

@@ -0,0 +1,46 @@
+/* Content-type theme color tokens. */
+:root {
+  /* ------ */
+  /* CONTENT TYPE THEMES */
+  /* ------ */
+
+  /* DOCUMENTATION */
+  --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-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-40);
+  --dx-g-content-type-blog-color-background: var(--dx-g-teal-95);
+
+  /* FORUM */
+  --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-40);
+  --dx-g-content-type-api-color-background: var(--dx-g-pink-95);
+
+  /* EVENT */
+  --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-40);
+  --dx-g-content-type-website-color-background: var(--dx-g-indigo-95);
+
+  /* PODCAST */
+  --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-blue-40);
+  --dx-g-content-type-community_posts-color-background: var(--dx-g-blue-95);
+}

package/assets/css/colors/dark.css

@@ -0,0 +1,85 @@
+/* Dark-mode overrides for semantic color tokens. */
+body.dark {
+  --dx-g-body-background-color: var(--dx-g-blue-10);
+  --dx-g-hr-font-color: white;
+
+  --dx-g-text-label-color: white;
+  --dx-g-text-heading-color: white;
+  --dx-g-text-body-color: white;
+  --dx-g-code-text-color: var(--dx-g-neutral-10);
+  --dx-g-code-background-color: var(--dx-g-neutral-95);
+  --dx-g-link-hover-color: var(--dx-g-blue-80);
+  --dx-g-social-svg-icon-color: var(--dx-g-blue-10);
+  --dx-g-social-svg-background-color: white;
+  --dx-g-social-svg-hover-color: var(--dx-g-blue-80);
+  --dx-card-title-hover-color: var(--dx-g-blue-80);
+
+  --dx-g-audio-background-color: var(--dx-g-indigo-30);
+  --dx-g-audio-inner-div-background-color: var(--dx-g-indigo-50);
+  --dx-g-audio-text-color: white;
+  --dx-g-audio-threedot-menu-text-color: white;
+  --dx-g-audio-button-hover-color: var(--dx-g-blue-80);
+  --dx-g-audio-track-before-color: var(--dx-g-indigo-70);
+  --dx-g-audio-track-thumb-color: var(--dx-g-indigo-90);
+
+  --dx-podcast-audio-background-color: var(--dx-g-indigo-50);
+  --dx-podcast-audio-inner-div-background-color: var(--dx-g-indigo-30);
+  --dx-podcast-subscription-link-color: white;
+  --dx-podcast-host-background-color: var(--dx-g-indigo-30);
+
+  --dx-g-blog-post-heading-color: white;
+  --dx-g-blog-post-th-color: var(--dx-g-indigo-50);
+  --dx-g-prose-link-color: var(--dx-g-blue-70);
+
+  --dx-g-button-primary-color: var(--dx-g-blue-50);
+  --dx-g-button-icon-color: white;
+  --dx-g-button-secondary-color: white;
+  --dx-g-button-secondary-color-hover: var(--dx-g-blue-80);
+  --dx-g-button-inline-color: white;
+  --dx-g-button-inline-color-hover: var(--dx-g-blue-80);
+
+  --dx-g-svg-filter: brightness(100);
+
+  --dx-g-dark-mode-toggle-button-border: 1px solid white;
+  --dx-g-dark-mode-toggle-button-color: transparent;
+  --dx-g-dark-mode-toggle-icon: url("https://a.sfdcstatic.com/developer-website/images/sun-icon.png");
+
+  --dx-g-light-mode-code-block-border: none;
+  --dx-g-dark-mode-toggle-code-block-border: 1px solid var(--dx-g-blue-40);
+
+  --dx-g-language-picker-background-color: var(--dx-g-indigo-50);
+  --dx-g-language-picker-font-color: white;
+  --dx-g-language-picker-option-hover-color: var(--dx-g-blue-10);
+  --dx-g-language-picker-option-color: white;
+  --dx-g-language-picker-checkmark-color: white;
+
+  --dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left-dark-mode-2.svg");
+  --dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right-dark-mode.svg");
+
+  --dx-footer-themed-background-color: var(--dx-g-blue-20);
+  --dx-footer-themed-top-background-color: var(--dx-g-blue-20);
+  --dx-footer-themed-top-large-background-color: var(--dx-g-blue-10);
+  --dx-footer-themed-top-border-color: white;
+  --dx-footer-themed-header-color: white;
+  --dx-footer-themed-header-link-color: white;
+  --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-80);
+  --dx-footer-themed-svg-icon-color: white;
+  --dx-footer-themed-svg-background-color: var(--dx-g-blue-20);
+  --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-10);
+  --dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer_graphic_large_dark.svg');
+
+  --dx-g-background-color: var(--dx-g-blue-10);
+  --dx-g-title-hover-color: var(--dx-g-blue-70);
+
+  --dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_light.png");
+  --dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_dark_intense.png");
+  --dx-themed-featured-content-header-text-color: white;
+  --dx-themed-featured-content-header-title-link-light-color: white;
+  --dx-themed-featured-content-header-title-link-intense-color: white;
+  --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-indigo-90);
+  --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-90);
+  --dx-themed-featured-content-header-intense-label-color: rgb(190 199 246);
+  --dx-themed-featured-content-header-button-color: var(--dx-g-blue-50);
+  --dx-themed-featured-content-header-button-background-color: white;
+  --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-80);
+}