some cleanup before code review

didoo · didoo · commit e020ded3aa46 · 2025-11-25T16:55:49.000Z
diff --git a/packages/components/src/services/hds-theming.ts b/packages/components/src/services/hds-theming.ts
@@ -11,7 +11,7 @@ export enum HdsThemeValues {
   Dark = 'dark',
 }
 
-// TODO! understand if we really need this
+// TODO! understand if we really need this - see: https://hashicorp.atlassian.net/browse/HDS-5681
 export enum HdsModesBaseValues {
   Default = 'default',
 }
@@ -140,7 +140,7 @@ export default class HdsThemingService extends Service {
       }
     }
 
-    // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS)
+    // IMPORTANT: for this to work, it needs to be the `<html>` tag (it's the `:root` in CSS)
     const rootElement = document.querySelector('html');
 
     if (!rootElement) {
@@ -158,7 +158,7 @@ export default class HdsThemingService extends Service {
       rootElement.classList.add(`hds-mode-${this._currentMode}`);
     }
 
-    // store the current theme and theming options in local storage (unless undefined)
+    // store the current theme and theming options in local storage
     localStorage.setItem(
       HDS_THEMING_LOCALSTORAGE_DATA,
       JSON.stringify({
@@ -198,10 +198,10 @@ export default class HdsThemingService extends Service {
   }
 
   get currentLightTheme(): HdsModesLight {
-    return this._currentLightTheme ?? DEFAULT_THEMING_OPTION_LIGHT_THEME;
+    return this._currentLightTheme;
   }
 
   get currentDarkTheme(): HdsModesDark {
-    return this._currentDarkTheme ?? DEFAULT_THEMING_OPTION_DARK_THEME;
+    return this._currentDarkTheme;
   }
 }
diff --git a/showcase/app/components/page-foundations/theming/sub-sections/components.gts b/showcase/app/components/page-foundations/theming/sub-sections/components.gts
@@ -1,5 +1,4 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { on } from '@ember/modifier';
 
 import ShwDivider from 'showcase/components/shw/divider';
 import ShwFlex from 'showcase/components/shw/flex';
diff --git a/showcase/app/components/page-foundations/theming/sub-sections/contexts.gts b/showcase/app/components/page-foundations/theming/sub-sections/contexts.gts
@@ -121,10 +121,8 @@ export default class SubSectionContexts extends Component {
 
     {{#if (eq this.shwTheming.currentStylesheet "standard")}}
       <div class="shw-page-foundations-theming-banner-incorrect-stylesheet">
-        <ShwTextBody>These examples are visible only if theming is applied via
-          "prefers color scheme" or "CSS selectors" or "combined strategies",
-          please select a theme below one of these two groups of options in the
-          selector at the top of the page</ShwTextBody>
+        <ShwTextBody>These examples are visible only if theming is applied,
+          please select a theme in the selector at the top of the page</ShwTextBody>
       </div>
     {{else}}
       <ShwGrid
@@ -174,10 +172,8 @@ export default class SubSectionContexts extends Component {
 
     {{#if (eq this.shwTheming.currentStylesheet "standard")}}
       <div class="shw-page-foundations-theming-banner-incorrect-stylesheet">
-        <ShwTextBody>These examples are visible only if theming is applied via
-          "CSS selectors" or "combined strategies", please select a theme below
-          one of these two groups of options in the selector at the top of the
-          page</ShwTextBody>
+        <ShwTextBody>These examples are visible only if theming is applied,
+          please select a theme in the selector at the top of the page</ShwTextBody>
       </div>
     {{else}}
       <ShwGrid
@@ -242,10 +238,8 @@ export default class SubSectionContexts extends Component {
 
     {{#if (eq this.shwTheming.currentStylesheet "standard")}}
       <div class="shw-page-foundations-theming-banner-incorrect-stylesheet">
-        <ShwTextBody>These examples are visible only if theming is applied via
-          "prefers color scheme" or "CSS selectors" or "combined strategies",
-          please select a theme below one of these two groups of options in the
-          selector at the top of the page</ShwTextBody>
+        <ShwTextBody>These examples are visible only if theming is applied,
+          please select a theme in the selector at the top of the page</ShwTextBody>
       </div>
     {{else}}
       <ShwGrid
@@ -283,10 +277,8 @@ export default class SubSectionContexts extends Component {
 
     {{#if (eq this.shwTheming.currentStylesheet "standard")}}
       <div class="shw-page-foundations-theming-banner-incorrect-stylesheet">
-        <ShwTextBody>These examples are visible only if theming is applied via
-          "CSS selectors" or "combined strategies", please select a theme below
-          one of these two groups of options in the selector at the top of the
-          page</ShwTextBody>
+        <ShwTextBody>These examples are visible only if theming is applied,
+          please select a theme in the selector at the top of the page</ShwTextBody>
       </div>
     {{else}}
       <ShwGrid
diff --git a/showcase/app/components/shw/theme-switcher/control/select.gts b/showcase/app/components/shw/theme-switcher/control/select.gts
@@ -21,12 +21,8 @@ export default class ShwThemeSwitcherControlSelect extends Component<ShwThemeSwi
   get options() {
     if (Array.isArray(this.args.values)) {
       // Convert array to an object where keys and values are the same
-      return this.args.values.reduce(
-        (acc, value) => {
-          acc[value] = value;
-          return acc;
-        },
-        {} as Record<string, string>,
+      return Object.fromEntries(
+        this.args.values.map((value) => [value, value]),
       );
     } else {
       // If values is already an object, return it directly
diff --git a/showcase/app/components/shw/theme-switcher/debugging-panel.gts b/showcase/app/components/shw/theme-switcher/debugging-panel.gts
@@ -41,20 +41,18 @@ export default class ShwThemeSwitcherDebuggingPanel extends Component<ShwThemeSw
       <ShwLabel
         class="shw-theme-switcher__debugging-panel-value"
       >{{this.hdsTheming.currentMode}}</ShwLabel>
-      {{#if @showAdvancedOptions}}
-        <ShwLabel
-          class="shw-theme-switcher__debugging-panel-key"
-        >currentLightTheme:</ShwLabel>
-        <ShwLabel
-          class="shw-theme-switcher__debugging-panel-value"
-        >{{this.hdsTheming.currentLightTheme}}</ShwLabel>
-        <ShwLabel
-          class="shw-theme-switcher__debugging-panel-key"
-        >currentDarkTheme:</ShwLabel>
-        <ShwLabel
-          class="shw-theme-switcher__debugging-panel-value"
-        >{{this.hdsTheming.currentDarkTheme}}</ShwLabel>
-      {{/if}}
+      <ShwLabel
+        class="shw-theme-switcher__debugging-panel-key"
+      >currentLightTheme:</ShwLabel>
+      <ShwLabel
+        class="shw-theme-switcher__debugging-panel-value"
+      >{{this.hdsTheming.currentLightTheme}}</ShwLabel>
+      <ShwLabel
+        class="shw-theme-switcher__debugging-panel-key"
+      >currentDarkTheme:</ShwLabel>
+      <ShwLabel
+        class="shw-theme-switcher__debugging-panel-value"
+      >{{this.hdsTheming.currentDarkTheme}}</ShwLabel>
     </div>
   </template>
 }
diff --git a/showcase/app/routes/page-foundations/theming/frameless/demo-application-with-theme-switcher.ts b/showcase/app/routes/page-foundations/theming/frameless/demo-application-with-theme-switcher.ts
@@ -15,6 +15,9 @@ export type PageComponentsFormFramelessDemoFormComplexModel =
 export default class PageComponentsFormFramelessDemoFormComplexRoute extends Route {
   @service declare readonly shwTheming: ShwThemingService;
 
+  // this is not a perfect solution, but for the moment it will do
+  // later we can evaluate if use a different approach
+  // see: https://hashicorp.atlassian.net/browse/HDS-5680
   activate() {
     this.shwTheming.setStylesheet('css-selectors--migration');
   }
diff --git a/showcase/app/services/shw-theming.ts b/showcase/app/services/shw-theming.ts
@@ -40,7 +40,7 @@ const STYLESHEETS_MAPPING: Record<ShwStylesheets, string[]> = {
 };
 
 const updatePageStylesheets = (currentStylesheet: ShwStylesheets) => {
-  // fallback in case the `currentStylesheet` is not found in the `STYLESHEETS_MAPPING` list
+  // we need a fallback in case the `currentStylesheet` is not found in the `STYLESHEETS_MAPPING` list
   // note: this may happen if the underlying code/names has changed but the `currentStylesheet` is read from local storage
   const styleSheetToActivate: ShwStylesheets = STYLESHEETS_MAPPING[
     currentStylesheet
@@ -64,6 +64,7 @@ const updatePageStylesheets = (currentStylesheet: ShwStylesheets) => {
 };
 
 const LOCALSTORAGE_CURRENT_STYLESHEET = 'shw-theming-current-stylesheet';
+
 export default class ShwThemingService extends HdsThemingService {
   @service declare readonly hdsTheming: HdsThemingService;
 
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// @use "@hashicorp/design-system-components";
-// @use "@hashicorp/design-system-power-select-overrides";
-
 // global declarations
 
 @use "./showcase-theming" as theming;
diff --git a/showcase/app/styles/showcase-pages/theming.scss b/showcase/app/styles/showcase-pages/theming.scss
@@ -5,6 +5,8 @@
 
 // THEMING
 
+@use "../typography" as *;
+
 body.page-foundations-theming {
   .shw-foundation-theming-light-background {
     padding: 8px;
@@ -36,9 +38,9 @@ body.page-foundations-theming {
     }
 
     &.shw-foundation-theming-basic-container--not-available {
+      @include shw-font-family("system mono");
       color: #7f7f7f;
       font-size: 24px;
-      font-family: monaco, Consolas, "Lucida Console", monospace;
       background-color: transparent;
       opacity: 0.5;
     }
diff --git a/showcase/app/styles/showcase-theming/index.scss b/showcase/app/styles/showcase-theming/index.scss
@@ -32,18 +32,12 @@
 
 .hds-theme-light,
 .hds-theme-cds-g0,
-.hds-theme-cds-g10,
-[data-hds-theme='light'],
-[data-hds-theme='cds-g0'],
-[data-hds-theme='cds-g10'] {
+.hds-theme-cds-g10 {
   @include shw-theme-color-variables-light();
 }
 
 .hds-theme-dark,
 .hds-theme-cds-g90,
-.hds-theme-cds-g100,
-[data-hds-theme='dark'],
-[data-hds-theme='cds-g90'],
-[data-hds-theme='cds-g100'] {
+.hds-theme-cds-g100 {
   @include shw-theme-color-variables-dark();
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export enum HdsThemeValues {`
`11`	`11`	`Dark = 'dark',`
`12`	`12`	`}`
`13`	`13`
`14`		`-// TODO! understand if we really need this`
	`14`	`+// TODO! understand if we really need this - see: https://hashicorp.atlassian.net/browse/HDS-5681`
`15`	`15`	`export enum HdsModesBaseValues {`
`16`	`16`	`Default = 'default',`
`17`	`17`	`}`
`@@ -140,7 +140,7 @@ export default class HdsThemingService extends Service {`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`
`143`		- // IMPORTANT: for this to work, it needs to be the HTML tag (it's the `:root` in CSS)
	`143`	+ // IMPORTANT: for this to work, it needs to be the `<html>` tag (it's the `:root` in CSS)
`144`	`144`	`const rootElement = document.querySelector('html');`
`145`	`145`
`146`	`146`	`if (!rootElement) {`
`@@ -158,7 +158,7 @@ export default class HdsThemingService extends Service {`
`158`	`158`	rootElement.classList.add(`hds-mode-${this._currentMode}`);
`159`	`159`	`}`
`160`	`160`
`161`		`- // store the current theme and theming options in local storage (unless undefined)`
	`161`	`+ // store the current theme and theming options in local storage`
`162`	`162`	`localStorage.setItem(`
`163`	`163`	`HDS_THEMING_LOCALSTORAGE_DATA,`
`164`	`164`	`JSON.stringify({`
`@@ -198,10 +198,10 @@ export default class HdsThemingService extends Service {`
`198`	`198`	`}`
`199`	`199`
`200`	`200`	`get currentLightTheme(): HdsModesLight {`
`201`		`- return this._currentLightTheme ?? DEFAULT_THEMING_OPTION_LIGHT_THEME;`
	`201`	`+ return this._currentLightTheme;`
`202`	`202`	`}`
`203`	`203`
`204`	`204`	`get currentDarkTheme(): HdsModesDark {`
`205`		`- return this._currentDarkTheme ?? DEFAULT_THEMING_OPTION_DARK_THEME;`
	`205`	`+ return this._currentDarkTheme;`
`206`	`206`	`}`
`207`	`207`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import type { TemplateOnlyComponent } from '@ember/component/template-only';`
`2`		`-import { on } from '@ember/modifier';`
`3`	`2`
`4`	`3`	`import ShwDivider from 'showcase/components/shw/divider';`
`5`	`4`	`import ShwFlex from 'showcase/components/shw/flex';`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,9 @@ export type PageComponentsFormFramelessDemoFormComplexModel =`
`15`	`15`	`export default class PageComponentsFormFramelessDemoFormComplexRoute extends Route {`
`16`	`16`	`@service declare readonly shwTheming: ShwThemingService;`
`17`	`17`
	`18`	`+ // this is not a perfect solution, but for the moment it will do`
	`19`	`+ // later we can evaluate if use a different approach`
	`20`	`+ // see: https://hashicorp.atlassian.net/browse/HDS-5680`
`18`	`21`	`activate() {`
`19`	`22`	`this.shwTheming.setStylesheet('css-selectors--migration');`
`20`	`23`	`}`