@salesforcedevs/dx-components 1.3.378 → 1.3.381

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.378",
+    "version": "1.3.381",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "894e5b74944a23112f9206dc4546e5bec170382d"
+    "gitHead": "a9ab9f58ab67c634e856ba42216cfce08c48bbfe"
 }

package/src/modules/dx/codeBlock/codeBlock.css

@@ -31,6 +31,11 @@ pre {
     background-color: var(--dx-g-gray-90);
 }
 
+div.dx-theme-dark {
+    border: var(--dx-g-dark-mode-toggle-button-border);
+    border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
+}
+
 .dx-theme-dark .toolbar {
     background-color: var(--dx-g-blue-natural-20);
 }
@@ -127,3 +132,7 @@ pre[class*="language-"].line-numbers {
         display: none;
     }
 }
+
+dx-button {
+    --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
+}

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -4,13 +4,6 @@ import cx from "classnames";
 import { track as gtmTrack } from "dxUtils/analytics";
 import prism from "dxUtils/prismjs";
 import { ampscript, sqlDocsTemplate } from "./customLanguages";
-import {
-    DARK_MODE_THEMES,
-    DARKMODE_TOGGLE_EVENT_NAME,
-    dispatchDarkModeToggleEvent,
-    getLocalStorageDarkModeSetting,
-    setLocalStorageDarkModeSetting
-} from "dx/darkModeManager";
 
 /*
     Here we create custom syntax highlighting rules for proprietary languages
@@ -44,6 +37,8 @@ const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
 export const LIGHT = "light";
 export const DARK = "dark";
+export const EVENT_NAME = "dx-codeblock-theme";
+const THEMES = [LIGHT, DARK];
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
@@ -99,18 +94,18 @@ export default class CodeBlock extends LightningElement {
     ];
 
     private initializeDarkMode() {
-        window.addEventListener(DARKMODE_TOGGLE_EVENT_NAME, this.toggleTheme);
-        const darkModeSetting =
-            getLocalStorageDarkModeSetting() as CodeBlockTheme;
-        if (DARK_MODE_THEMES.includes(darkModeSetting)) {
+        window.addEventListener(EVENT_NAME, this.toggleTheme);
+        const darkModeSetting = localStorage.getItem(
+            EVENT_NAME
+        ) as CodeBlockTheme;
+        if (THEMES.includes(darkModeSetting)) {
             this.theme = darkModeSetting;
+        } else {
+            this.theme = this.defaultTheme;
         }
     }
 
     connectedCallback() {
-        if (!this.theme) {
-            this.theme = this.defaultTheme;
-        }
         this.initializeDarkMode();
     }
 
@@ -278,12 +273,12 @@ export default class CodeBlock extends LightningElement {
             element_title: this.updateThemeBtnText,
             content_category: "code block"
         });
-        dispatchDarkModeToggleEvent();
+        window.dispatchEvent(new Event(EVENT_NAME));
     }
 
     private toggleTheme = () => {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        setLocalStorageDarkModeSetting(this.theme);
+        localStorage.setItem(EVENT_NAME, this.theme);
     };
 
     renderedCallback() {
@@ -301,9 +296,6 @@ export default class CodeBlock extends LightningElement {
     }
 
     disconnectedCallback(): void {
-        window.removeEventListener(
-            DARKMODE_TOGGLE_EVENT_NAME,
-            this.toggleTheme
-        );
+        window.removeEventListener(EVENT_NAME, this.toggleTheme);
     }
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -46,7 +46,7 @@
 
 @media screen and (max-width: 500px) {
     .title-bar {
-        padding: 0 40px;
+        padding: 0 30px;
         height: 125px;
         display: block;
         align-items: center;