@salesforcedevs/dx-css-variables 0.3.50 → 0.4.0

package/assets/css/colors/semantic.css

@@ -0,0 +1,90 @@
+/* Semantic / surface-role color tokens. */
+:root {
+  /* ----------- */
+  /* TEXT COLORS */
+  /* ----------- */
+  --dx-g-text-button-color: var(--dx-g-blue-vibrant-50);
+  --dx-g-text-button-light-color: white;
+
+  /* Defaults for no Dark/Light theme pages */
+  --dx-g-body-background-color: white;
+  --dx-g-hr-font-color: var(--dx-g-blue-vibrant-20);
+
+  --dx-g-text-label-color: var(--dx-g-gray-30);
+  --dx-g-text-heading-color: var(--dx-g-blue-vibrant-20);
+  --dx-g-text-body-color: var(--dx-g-gray-10);
+  --dx-g-link-hover-color: var(--dx-g-blue-vibrant-40);
+  --dx-g-code-text-color: var(--dx-g-gray-10);
+  --dx-g-code-background-color: var(--dx-g-gray-95);
+  --dx-g-social-svg-icon-color: white;
+  --dx-g-social-svg-background-color: var(--dx-g-blue-vibrant-50);
+  --dx-g-social-svg-hover-color: var(--dx-g-blue-vibrant-40);
+  --dx-card-title-hover-color: var(--dx-g-blue-vibrant-50);
+
+  --dx-g-audio-background-color: var(--dx-g-indigo-vibrant-90);
+  --dx-g-audio-inner-div-background-color: var(--sds-g-gray-1);
+  --dx-g-audio-text-color: initial;
+  --dx-g-audio-threedot-menu-text-color: initial;
+  --dx-g-audio-button-hover-color: var(--sds-g-gray-4);
+
+  --dx-podcast-audio-background-color: var(--dx-g-indigo-vibrant-90);
+  --dx-podcast-audio-inner-div-background-color: var(--sds-g-gray-1);
+  --dx-podcast-subscription-link-color: var(--dx-g-blue-vibrant-50);
+  --dx-podcast-host-background-color: white;
+
+  --dx-g-blog-post-heading-color: currentcolor;
+  --dx-g-blog-post-th-color: var(--dx-g-indigo-vibrant-95);
+  --dx-g-prose-link-color: var(--dx-g-blue-vibrant-50);
+
+  --dx-g-button-primary-color: var(--dx-g-blue-vibrant-50);
+  --dx-g-button-secondary-color: var(--dx-g-blue-vibrant-50);
+  --dx-g-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
+  --dx-g-button-icon-color: currentcolor;
+  --dx-g-button-inline-color: var(--dx-g-blue-vibrant-50);
+  --dx-g-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+
+  --dx-g-svg-filter: none;
+
+  --dx-g-dark-mode-toggle-button-border: none;
+  --dx-g-dark-mode-toggle-button-color: white;
+  --dx-g-dark-mode-toggle-icon: url("https://a.sfdcstatic.com/developer-website/images/moon-icon.png");
+
+  --dx-g-light-mode-code-block-border: 1px solid black;
+  --dx-g-dark-mode-toggle-code-block-border: none;
+
+  --dx-g-language-picker-background-color: white;
+  --dx-g-language-picker-font-color: #747474;
+  --dx-g-language-picker-option-hover-color: var(--sds-g-gray-4);
+  --dx-g-language-picker-option-color: #181818;
+  --dx-g-language-picker-checkmark-color: var(--dx-g-indigo-vibrant-50);
+
+  --dx-blog-grid-themed-left-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left.svg");
+  --dx-blog-grid-themed-right-subscribe-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right.svg");
+
+  --dx-footer-themed-background-color: var(--dx-g-indigo-vibrant-95);
+  --dx-footer-themed-top-background-color: var(--dx-g-indigo-vibrant-95);
+  --dx-footer-themed-top-large-background-color: white;
+  --dx-footer-themed-top-border-color: var(--dx-g-indigo-vibrant-30);
+  --dx-footer-themed-header-color: var(--dx-g-blue-vibrant-20);
+  --dx-footer-themed-header-link-color: var(--dx-g-blue-vibrant-40);
+  --dx-footer-themed-header-link-hover-color: var(--dx-g-blue-vibrant-20);
+  --dx-footer-themed-svg-icon-color: var(--dx-g-blue-vibrant-20);
+  --dx-footer-themed-svg-background-color: white;
+  --dx-footer-themed-terms-and-conditions-background-color: var(--dx-g-blue-vibrant-20);
+  --dx-footer-themed-large-graphic: url('https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg');
+
+  --dx-g-background-color: white;
+  --dx-g-title-hover-color: var(--dx-g-blue-vibrant-40);
+
+  --dx-themed-featured-content-header-background-swoop: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_light.png");
+  --dx-themed-featured-content-header-background-swoop-intense: url("https://a.sfdcstatic.com/developer-website/images/swoop_light_intense.png");
+  --dx-themed-featured-content-header-text-color: var(--dx-g-indigo-vibrant-40);
+  --dx-themed-featured-content-header-title-link-light-color: var(--dx-g-blue-vibrant-20);
+  --dx-themed-featured-content-header-title-link-intense-color: white;
+  --dx-themed-featured-content-header-title-link-light-hover-color: var(--dx-g-blue-vibrant-10);
+  --dx-themed-featured-content-header-title-link-intense-hover-color: var(--dx-g-indigo-vibrant-90);
+  --dx-themed-featured-content-header-intense-label-color: rgb(190 199 246);
+  --dx-themed-featured-content-header-button-color: white;
+  --dx-themed-featured-content-header-button-background-color: var(--dx-g-blue-vibrant-50);
+  --dx-themed-featured-content-header-button-background-hover-color: var(--dx-g-blue-vibrant-40);
+}