@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

package/src/assets/svg/slack-cta-podcast-background-right.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="156px" height="83px" viewBox="0 0 156 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>podcast-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Podcast" transform="translate(-888.000000, -3624.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 3441.500000)">
+                <g id="podcast-cta-graphic-right" transform="translate(837.000000, 183.500000)">
+                    <g id="tree-3" transform="translate(100.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                        <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                        <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                        <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                        <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                    </g>
+                    <g id="tree-2" transform="translate(50.000247, 42.000000)">
+                        <path d="M27.3664984,9.39600248 C27.2895938,9.39600248 27.2184571,9.41646246 27.1415525,9.41841103 C27.1578947,9.19432553 27.208844,8.97998288 27.208844,8.75102595 C27.208844,3.91759913 23.3424658,0 18.5743812,0 C13.8053353,0 9.93991829,3.91759913 9.93991829,8.75102595 C9.93991829,9.01992855 9.99471281,9.27421688 10.0177842,9.53727377 C9.5640471,9.46225385 9.10934871,9.39600248 8.63542418,9.39600248 C3.86637827,9.39600248 0,13.3136016 0,18.1460541 C0,22.979481 3.86637827,26.8970801 8.63542418,26.8970801 C9.21605383,26.8970801 9.78322519,26.8347259 10.333093,26.7236574 C11.3914924,30.3431254 14.6599375,33 18.5743812,33 C22.4474886,33 25.6861331,30.3976853 26.7810622,26.8376487 C26.9781303,26.8512887 27.1655852,26.8970801 27.3664984,26.8970801 C32.134583,26.8970801 36,22.979481 36,18.1460541 C36,13.3136016 32.134583,9.39600248 27.3664984,9.39600248 Z" id="Stroke-1"></path>
+                        <polyline id="Stroke-3" points="25 18 18.000488 25 11 18"></polyline>
+                        <line x1="18.5" y1="11" x2="18.5" y2="39" id="Stroke-5"></line>
+                    </g>
+                    <g id="tree-1" transform="translate(0.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <g id="Group-12">
+                            <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                            <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                            <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                            <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                            <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                        </g>
+                    </g>
+                    <path d="M148.368697,17.4393933 L147.41455,20.0170007 C147.347052,20.201175 147.202055,20.3470145 147.017892,20.4145173 L144.439612,21.3687237 C143.853791,21.5853994 143.853791,22.4146006 144.439612,22.6312763 L147.017892,23.5854827 C147.202055,23.6538189 147.347052,23.798825 147.41455,23.9829993 L148.368697,26.5606067 C148.586193,27.1464644 149.414509,27.1464644 149.632004,26.5606067 L150.585318,23.9829993 C150.65365,23.798825 150.798647,23.6538189 150.983643,23.5854827 L153.560256,22.6312763 C154.14691,22.4146006 154.14691,21.5853994 153.560256,21.3687237 L150.983643,20.4145173 C150.798647,20.3470145 150.65365,20.201175 150.585318,20.0170007 L149.632004,17.4393933 C149.414509,16.8535356 148.586193,16.8535356 148.368697,17.4393933 Z" id="Stroke-150"></path>
+                    <path d="M66.3695305,0.439393308 L65.4145504,3.01700071 C65.3470518,3.20117505 65.2020548,3.34701446 65.017892,3.41451727 L62.4396124,4.3687237 C61.8537913,4.58539939 61.8537913,5.41460061 62.4396124,5.6312763 L65.017892,6.58548273 C65.2020548,6.65381891 65.3470518,6.79882495 65.4145504,6.98299929 L66.3695305,9.56060669 C66.5861927,10.1464644 67.4153421,10.1464644 67.6320042,9.56060669 L68.5853177,6.98299929 C68.6536496,6.79882495 68.7986466,6.65381891 68.9836427,6.58548273 L71.5602557,5.6312763 C72.1469102,5.41460061 72.1469102,4.58539939 71.5602557,4.3687237 L68.9836427,3.41451727 C68.7986466,3.34701446 68.6536496,3.20117505 68.5853177,3.01700071 L67.6320042,0.439393308 C67.4153421,-0.146464436 66.5861927,-0.146464436 66.3695305,0.439393308 Z" id="Stroke-152"></path>
+                    <path d="M50.0002465,20 C50.0002465,18.3436725 48.6572963,17 46.9997812,17 C45.3431968,17 44.0002465,18.3436725 44.0002465,20 C44.0002465,21.6572581 45.3431968,23 46.9997812,23 C48.6572963,23 50.0002465,21.6572581 50.0002465,20 Z" id="Stroke-158"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/trees.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="156px" height="83px" viewBox="0 0 156 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>trees</title>
+    <g id="Salesforce-Developers" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Podcast" transform="translate(-901.000000, -593.000000)" stroke="#1A96FF" stroke-width="2">
+            <g id="header-bg" transform="translate(0.000000, 116.000000)">
+                <g id="Graphics" transform="translate(676.000000, 0.000000)">
+                    <g id="trees" transform="translate(225.999753, 478.000000)">
+                        <g id="tree-3" transform="translate(100.000247, 32.000000)">
+                            <line x1="8.6633" y1="15.01" x2="18.2223" y2="19.789" id="Stroke-1"></line>
+                            <g id="Group-12" transform="translate(0.000000, 0.975600)">
+                                <path d="M36.6261,26.008 C36.6261,22.983 35.0751,20.318 32.7301,18.753 C33.8541,17.584 34.5541,16.005 34.5541,14.26 C34.5541,10.679 31.6411,7.765 28.0571,7.765 C27.3921,7.765 26.7621,7.895 26.1561,8.081 C26.0431,3.622 22.3981,0.025 17.9111,0.025 C13.5011,0.025 9.8861,3.499 9.6581,7.855 C9.3021,7.795 8.9381,7.765 8.5701,7.765 C4.9891,7.765 2.0751,10.679 2.0751,14.26 C2.0751,16.005 2.7751,17.585 3.8991,18.753 C3.4241,19.071 2.9691,19.427 2.5541,19.842 C0.5701,21.828 -0.3239,24.574 0.1051,27.375 C0.6071,30.658 3.0141,33.365 6.1321,34.332 L18.0261,39.332 L31.0961,34.127 L31.0891,34.107 C34.3241,32.83 36.6261,29.691 36.6261,26.008 Z" id="Stroke-2"></path>
+                                <line x1="27.4875" y1="14.0344" x2="17.9285" y2="18.8134" id="Stroke-4"></line>
+                                <line x1="8.6633" y1="25.6652" x2="18.2223" y2="30.4442" id="Stroke-6"></line>
+                                <line x1="27.4875" y1="25.6652" x2="17.9285" y2="30.4442" id="Stroke-8"></line>
+                                <line x1="18.3195" y1="9.6457" x2="18.3195" y2="47.9997" id="Stroke-10"></line>
+                            </g>
+                        </g>
+                        <g id="tree-2" transform="translate(50.000247, 39.000000)">
+                            <path d="M27.3664984,9.39600248 C27.2895938,9.39600248 27.2184571,9.41646246 27.1415525,9.41841103 C27.1578947,9.19432553 27.208844,8.97998288 27.208844,8.75102595 C27.208844,3.91759913 23.3424658,0 18.5743812,0 C13.8053353,0 9.93991829,3.91759913 9.93991829,8.75102595 C9.93991829,9.01992855 9.99471281,9.27421688 10.0177842,9.53727377 C9.5640471,9.46225385 9.10934871,9.39600248 8.63542418,9.39600248 C3.86637827,9.39600248 0,13.3136016 0,18.1460541 C0,22.979481 3.86637827,26.8970801 8.63542418,26.8970801 C9.21605383,26.8970801 9.78322519,26.8347259 10.333093,26.7236574 C11.3914924,30.3431254 14.6599375,33 18.5743812,33 C22.4474886,33 25.6861331,30.3976853 26.7810622,26.8376487 C26.9781303,26.8512887 27.1655852,26.8970801 27.3664984,26.8970801 C32.134583,26.8970801 36,22.979481 36,18.1460541 C36,13.3136016 32.134583,9.39600248 27.3664984,9.39600248 Z" id="Stroke-1"></path>
+                            <polyline id="Stroke-3" points="25 18 18.000488 25 11 18"></polyline>
+                            <line x1="18.5" y1="11" x2="18.5" y2="39" id="Stroke-5"></line>
+                        </g>
+                        <g id="tree-1" transform="translate(0.000000, 33.000600)">
+                            <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                            <g id="Group-12">
+                                <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                                <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                                <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                                <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                                <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                            </g>
+                        </g>
+                        <path d="M148.368697,17.4393933 L147.41455,20.0170007 C147.347052,20.201175 147.202055,20.3470145 147.017892,20.4145173 L144.439612,21.3687237 C143.853791,21.5853994 143.853791,22.4146006 144.439612,22.6312763 L147.017892,23.5854827 C147.202055,23.6538189 147.347052,23.798825 147.41455,23.9829993 L148.368697,26.5606067 C148.586193,27.1464644 149.414509,27.1464644 149.632004,26.5606067 L150.585318,23.9829993 C150.65365,23.798825 150.798647,23.6538189 150.983643,23.5854827 L153.560256,22.6312763 C154.14691,22.4146006 154.14691,21.5853994 153.560256,21.3687237 L150.983643,20.4145173 C150.798647,20.3470145 150.65365,20.201175 150.585318,20.0170007 L149.632004,17.4393933 C149.414509,16.8535356 148.586193,16.8535356 148.368697,17.4393933 Z" id="Stroke-150"></path>
+                        <path d="M66.3695305,0.439393308 L65.4145504,3.01700071 C65.3470518,3.20117505 65.2020548,3.34701446 65.017892,3.41451727 L62.4396124,4.3687237 C61.8537913,4.58539939 61.8537913,5.41460061 62.4396124,5.6312763 L65.017892,6.58548273 C65.2020548,6.65381891 65.3470518,6.79882495 65.4145504,6.98299929 L66.3695305,9.56060669 C66.5861927,10.1464644 67.4153421,10.1464644 67.6320042,9.56060669 L68.5853177,6.98299929 C68.6536496,6.79882495 68.7986466,6.65381891 68.9836427,6.58548273 L71.5602557,5.6312763 C72.1469102,5.41460061 72.1469102,4.58539939 71.5602557,4.3687237 L68.9836427,3.41451727 C68.7986466,3.34701446 68.6536496,3.20117505 68.5853177,3.01700071 L67.6320042,0.439393308 C67.4153421,-0.146464436 66.5861927,-0.146464436 66.3695305,0.439393308 Z" id="Stroke-152"></path>
+                        <path d="M50.0002465,20 C50.0002465,18.3436725 48.6572963,17 46.9997812,17 C45.3431968,17 44.0002465,18.3436725 44.0002465,20 C44.0002465,21.6572581 45.3431968,23 46.9997812,23 C48.6572963,23 50.0002465,21.6572581 50.0002465,20 Z" id="Stroke-158"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/modules/dx/banner/__tests__/banner.test.ts

@@ -0,0 +1,33 @@
+import Banner from "dx/banner";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-banner";
+const render = createRenderComponent(TAG, Banner);
+
+describe(TAG, () => {
+    it("renders banner component", () => {
+        const element = render();
+
+        const innerContainer =
+            element.shadowRoot.querySelectorAll(".container_inner");
+
+        expect(innerContainer).not.toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders custom banner markup in the banner", () => {
+        const element = render({
+            bannerMarkup: "Give feedback about our new site"
+        });
+
+        const bannerContainer =
+            element.shadowRoot.querySelector(".info-container");
+
+        return Promise.resolve().then(() => {
+            expect(bannerContainer.innerHTML).toContain(
+                "Give feedback about our new site"
+            );
+        });
+    });
+});

package/src/modules/dx/banner/banner.css

@@ -0,0 +1,46 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.container {
+    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    background: repeating-linear-gradient(
+        45deg,
+        var(--primary-color),
+        var(--primary-color) 20px,
+        var(--secondary-color) 20px,
+        var(--secondary-color) 40px
+    );
+}
+
+.container_inner {
+    height: 100%;
+    display: flex;
+    background: var(--primary-color);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
+    color: white;
+    font-weight: bold;
+}
+
+.container a {
+    text-decoration: underline;
+    transition: var(--dx-g-transition-hue-1x);
+    margin-right: 4px;
+}
+
+.container a:hover {
+    opacity: 0.8;
+}
+
+.container dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+    margin-top:var(  --dx-g-spacing-2xs)
+}

package/src/modules/dx/banner/banner.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/banner/banner.ts

@@ -0,0 +1,14 @@
+import { LightningElement, api } from "lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    renderedCallback(){
+        const container = this.template.querySelector(".info-container");
+        if(container){
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            container.innerHTML = this.bannerMarkup
+        }
+    }
+}

package/src/modules/dx/brandThemeProvider/__tests__/brandThemeProvider.test.ts

@@ -0,0 +1,49 @@
+import BrandThemeProvider, { toCss } from "dx/brandThemeProvider";
+import { createRenderComponent } from "utils-internal/tests";
+import brandCssVars from "../brandCssVars";
+
+const TAG = "dx-brand-theme-provider";
+const render = createRenderComponent(TAG, BrandThemeProvider);
+
+describe(TAG, () => {
+    it("renders", () => {
+        const element = render();
+        return expect(element).toBeAccessible();
+    });
+
+    it("all css variables are accounted for", () => {
+        const brand = "commerce";
+        const element = render({ brand });
+
+        const style = element.shadowRoot.querySelector("style");
+        const { textContent } = style.childNodes[0];
+        brandCssVars.forEach((v: string) => {
+            expect(textContent).toContain(
+                `${v}: var(${v.replace("current", brand)});`
+            );
+        });
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a style element with textcontent that matches the output from the tocss fn()", () => {
+        const brand = "commerce";
+        const element = render({ brand });
+
+        const expectedTextContent = toCss(brand);
+        const style = element.shadowRoot.querySelector("style");
+        const { textContent } = style.childNodes[0];
+        expect(textContent).toEqual(expectedTextContent);
+        return expect(element).toBeAccessible();
+    });
+
+    it("keeps one style element with one childnode at a time", () => {
+        const brand = "commerce";
+        const element = render({ brand });
+
+        const styles = element.shadowRoot.querySelectorAll("style");
+        expect(styles.length).toEqual(1);
+        expect(Array.from(styles[0].childNodes).length).toEqual(1);
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/brandThemeProvider/brandCssVars.ts

@@ -0,0 +1,10 @@
+export default [
+    "--dx-g-brand-current-color",
+    "--dx-g-brand-current-color-background",
+    "--dx-g-brand-current-color-background-2",
+    "--dx-g-brand-current-button-color-background-inactive",
+    "--dx-g-brand-current-button-color-background-inactive-hover",
+    "--dx-g-brand-current-button-color-background-active",
+    "--dx-g-brand-current-color-border",
+    "--dx-g-brand-current-color-border-2"
+];

package/src/modules/dx/brandThemeProvider/brandThemeProvider.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

package/src/modules/dx/brandThemeProvider/brandThemeProvider.stories.ts

@@ -0,0 +1,321 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-brand-theme-provider",
+    component: "dx-brand-theme-provider"
+};
+
+const style = () => html` <style>
+    body {
+        padding: 0 !important;
+    }
+    #block {
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        font-size: 12px;
+        margin-bottom: 4px;
+        box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.07);
+    }
+    #block > span > span {
+        color: grey;
+    }
+</style>`;
+
+// prettier-ignore
+export const Service = () => html` ${style()}
+    <dx-brand-theme-provider brand="service">
+        <div id="block" style="background: var(--dx-g-brand-current-color)">
+            <span>
+                --dx-g-brand-current-color:
+                <span>--dx-g-brand-service-color</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background)"
+        >
+            <span>
+                --dx-g-brand-current-color-background:
+                <span>--dx-g-brand-service-color-background</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-background-2:
+                <span>--dx-g-brand-service-color-background-2</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive:
+                <span>--dx-g-brand-service-button-color-background-inactive</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive-hover:
+                <span>--dx-g-brand-service-button-color-background-inactive-hover</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-active)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-active:
+                <span>--dx-g-brand-service-button-color-background-active</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border)"
+        >
+            <span>
+                --dx-g-brand-current-color-border:
+                <span>--dx-g-brand-service-color-border</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-border-2:
+                <span>--dx-g-brand-service-color-border-2</span>
+            </span>
+        </div>
+    </dx-brand-theme-provider>`;
+
+// prettier-ignore
+export const Partners = () => html` ${style()}
+    <dx-brand-theme-provider brand="partners">
+        <div id="block" style="background: var(--dx-g-brand-current-color)">
+            <span>
+                --dx-g-brand-current-color:
+                <span>--dx-g-brand-partners-color</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background)"
+        >
+            <span>
+                --dx-g-brand-current-color-background:
+                <span>--dx-g-brand-partners-color-background</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-background-2:
+                <span>--dx-g-brand-partners-color-background-2</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive:
+                <span>--dx-g-brand-partners-button-color-background-inactive</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive-hover:
+                <span>--dx-g-brand-partners-button-color-background-inactive-hover</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-active)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-active:
+                <span>--dx-g-brand-partners-button-color-background-active</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border)"
+        >
+            <span>
+                --dx-g-brand-current-color-border:
+                <span>--dx-g-brand-partners-color-border</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-border-2:
+                <span>--dx-g-brand-partners-color-border-2</span>
+            </span>
+        </div>
+    </dx-brand-theme-provider>`;
+
+// prettier-ignore
+export const Industries = () => html` ${style()}
+    <dx-brand-theme-provider brand="industries">
+        <div id="block" style="background: var(--dx-g-brand-current-color)">
+            <span>
+                --dx-g-brand-current-color:
+                <span>--dx-g-brand-industries-color</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background)"
+        >
+            <span>
+                --dx-g-brand-current-color-background:
+                <span>--dx-g-brand-industries-color-background</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-background-2:
+                <span>--dx-g-brand-industries-color-background-2</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive:
+                <span>--dx-g-brand-industries-button-color-background-inactive</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive-hover:
+                <span>--dx-g-brand-industries-button-color-background-inactive-hover</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-active)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-active:
+                <span>--dx-g-brand-industries-button-color-background-active</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border)"
+        >
+            <span>
+                --dx-g-brand-current-color-border:
+                <span>--dx-g-brand-industries-color-border</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-border-2:
+                <span>--dx-g-brand-industries-color-border-2</span>
+            </span>
+        </div>
+    </dx-brand-theme-provider>`;
+
+// prettier-ignore
+export const Sales = () => html ` ${style()}
+    <dx-brand-theme-provider>
+        <div id="block" style="background: var(--dx-g-brand-current-color)">
+            <span>
+                --dx-g-brand-current-color:
+                <span>--dx-g-brand-sales-color</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background)"
+        >
+            <span>
+                --dx-g-brand-current-color-background:
+                <span>--dx-g-brand-sales-color-background</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-background-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-background-2:
+                <span>--dx-g-brand-sales-color-background-2</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive:
+                <span>--dx-g-brand-sales-button-color-background-inactive</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-inactive-hover:
+                <span>--dx-g-brand-sales-button-color-background-inactive-hover</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-button-color-background-active)"
+        >
+            <span>
+                --dx-g-brand-current-button-color-background-active:
+                <span>--dx-g-brand-sales-button-color-background-active</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border)"
+        >
+            <span>
+                --dx-g-brand-current-color-border:
+                <span>--dx-g-brand-sales-color-border</span>
+            </span>
+        </div>
+        <div
+            id="block"
+            style="background: var(--dx-g-brand-current-color-border-2)"
+        >
+            <span>
+                --dx-g-brand-current-color-border-2:
+                <span>--dx-g-brand-sales-color-border-2</span>
+            </span>
+        </div>
+    </dx-brand-theme-provider>`;

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -0,0 +1,46 @@
+import { LightningElement, api } from "lwc";
+import brandCssVars from "./brandCssVars";
+import { Brand } from "typings/custom";
+
+export const toCss = (brand: Brand | null) => `
+  :host {
+    ${brandCssVars.reduce(
+        (acc, v) => `
+          ${acc}
+          ${v}: var(${v.replace("current", brand || "default")});
+        `,
+        ""
+    )}
+  }
+`;
+
+export default class BrandThemeProvider extends LightningElement {
+    @api brand: Brand | null = null;
+
+    private get css() {
+        return toCss(this.brand);
+    }
+
+    connectedCallback() {
+        this.setBrandVars();
+    }
+
+    renderedCallback() {
+        this.setBrandVars();
+    }
+
+    setBrandVars() {
+        let style = this.template.querySelector("style");
+        if (!style) {
+            style = document.createElement("style");
+            this.template.appendChild(style);
+        }
+
+        if (style.firstChild) {
+            style.removeChild(style.firstChild);
+        }
+
+        const css = document.createTextNode(this.css);
+        style.appendChild(css);
+    }
+}