some cleanup before code review

didoo · didoo · commit 215bbb284876 · 2025-11-21T16:17:56.000Z
diff --git a/showcase/app/components/page-carbonization/foundations/color.gts b/showcase/app/components/page-carbonization/foundations/color.gts
@@ -5,7 +5,7 @@ import { eq, notEq, and } from 'ember-truth-helpers';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-import ShwCarbonizationTokenPreviewHdsColor from 'showcase/components/shw/carbonization/token-preview/hds-color';
+import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview/color';
 
 import type { DesignToken } from '../../../../types/design-token';
 
@@ -25,7 +25,7 @@ const ColorCarbonization: TemplateOnlyComponent = <template>
       {{#if (and (eq token.$type "color") (notEq token.name undefined))}}
         <ShwCarbonizationComparisonGrid @label={{tokenShortName token}}>
           <:theming as |T|>
-            <ShwCarbonizationTokenPreviewHdsColor
+            <ShwCarbonizationTokenPreviewColor
               @mode={{T.context}}
               @tokenName={{token.name}}
             />
diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts
@@ -37,7 +37,7 @@ export default class ShwCarbonizationComparisonGridItem extends Component<ShwCar
   get classNames(): string {
     const classes = ['shw-carbonization-comparison-grid__item'];
 
-    // add a class based on `this.area`
+    // add a class based on `this.areaName`
     classes.push(
       `shw-carbonization-comparison-grid__item--area-${this.areaName}`,
     );
diff --git a/showcase/app/components/shw/carbonization/token-preview/color.gts b/showcase/app/components/shw/carbonization/token-preview/color.gts
diff --git a/showcase/app/index.html b/showcase/app/index.html
@@ -57,17 +57,9 @@
     <script type="module"
       src="https://1.www.s81c.com/common/carbon/web-components/version/v2.40.1/text-input.min.js"></script>
     <!-- This contains global styles and CSS resets too! -->
-    <!-- <link
-            rel="stylesheet"
-            href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" /> -->
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
     <style type="text/css">
-      /* manually setting the default font */
-      /* body {
-          font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-        } */
-
       /* Suppress custom element until styles are loaded */
       cds-badge-indicator:not(:defined),
       cds-button:not(:defined),
diff --git a/showcase/app/services/shw-theming.ts b/showcase/app/services/shw-theming.ts
@@ -63,7 +63,7 @@ const updatePageStylesheets = (currentStylesheet: ShwStylesheets) => {
   });
 };
 
-export const LOCALSTORAGE_CURRENT_STYLESHEET = 'shw-theming-current-stylesheet';
+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/_globals.scss b/showcase/app/styles/_globals.scss
@@ -4,7 +4,6 @@
  */
 
 @use "./typography" as *;
-@use '@carbon/type' as carbon-type;
 
 *,
 *::before,
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
@@ -90,7 +90,6 @@
 
 // carbonization
 
-@use "./showcase-components/carbonization/cds-theming";
 @use "./showcase-components/carbonization/comparison-grid";
 @use "./showcase-components/carbonization/style-preview-typography";
 @use "./showcase-components/carbonization/token-preview-color";
diff --git a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss
diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss
@@ -45,19 +45,23 @@
   margin-bottom: 0;
 }
 
-// THEMING BACKGROUNDS
+// THEMING AREAS
 
 .shw-carbonization-comparison-grid__item-content {
   padding: 8px;
   color: var(--content-foreground-color);
   background-color: var(--content-background-color);
 }
 
+// area: HDS "default"
+
 .shw-carbonization-comparison-grid__item--area-default {
   --content-foreground-color: var(--token-color-foreground-primary);
   --content-background-color: var(--token-color-surface-primary);
 }
 
+// area: HDS carbonized
+
 // TODO replace the hex values (copied from the `--cds-background` themed variable) with CSS design tokens from our theming
 .shw-carbonization-comparison-grid__item--area-cds-g0 {
   --content-foreground-color: #161616;
@@ -79,6 +83,8 @@
   --content-background-color: #161616;
 }
 
+// area: CDS web components
+
 .shw-carbonization-comparison-grid__item--area-cwc-g0 {
   --content-foreground-color: #{map.get(cdsThemes.$white, text-primary)};
   --content-background-color: #{map.get(cdsThemes.$white, background)};
@@ -99,17 +105,25 @@
   --content-background-color: #{map.get(cdsThemes.$g100, background)};
 }
 
-// if we had access to the CSS variables directly (without importing also the resets) we could do just this
-// https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products-web-components/examples/tearsheet/src/styles.scss#L16-L17
-// https://github.com/carbon-design-system/carbon-components-angular/blob/master/src/theme/theme.stories.ts#L43-L44
-// .shw-carbonization-comparison-grid__item--area-cwc-g0,
-// .shw-carbonization-comparison-grid__item--area-cwc-g10,
-// .shw-carbonization-comparison-grid__item--area-cwc-g90,
-// .shw-carbonization-comparison-grid__item--area-cwc-g100 {
-//   --content-foreground-color: var(--cds-text-primary);
-//   --content-background-color: var(--cds-background);
-// }
+// WEB COMPONENTS local styling
+// these come from https://1.www.s81c.com/common/carbon/web-components/tag/latest/themes.css
+// they are used in selectors like `:host(.cds-theme-zone-g10), .cds-theme-zone-g10` to apply specific CSS variables for a theme/mode
+
+// see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes
+.cds-theme-zone-white,
+.cds-theme-zone-g10,
+.cds-theme-zone-g90,
+.cds-theme-zone-g100 {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 
+  code {
+    font-family: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace
+  }
+
+  button, select, input, textarea {
+    font-family: inherit
+  }
+}
 
 // DEBUG
 
diff --git a/showcase/app/styles/showcase-pages/carbonization/segmented-group.scss b/showcase/app/styles/showcase-pages/carbonization/segmented-group.scss
@@ -13,6 +13,3 @@ body.page-carbonization-components-segmented-group {
     align-items: end;
   }
 }
-
-
-
diff --git a/showcase/app/styles/showcase-pages/carbonization/typography.scss b/showcase/app/styles/showcase-pages/carbonization/typography.scss
@@ -6,33 +6,31 @@
 // CARBONIZATION > TYPOGRAPHY
 
 @use "sass:map";
-@use '@carbon/type' as cdsType;
+@use "@carbon/type" as cdsType;
 
 // ----
 
 $styles-maps: (
-'heading-05': cdsType.$heading-05,
-'heading-04': cdsType.$heading-04,
-'heading-03': cdsType.$heading-03,
-'heading-02': cdsType.$heading-02,
-'heading-01': cdsType.$heading-01,
-'heading-compact-02': cdsType.$heading-compact-02,
-'heading-compact-01': cdsType.$heading-compact-01,
-'body-02': cdsType.$body-02,
-'body-01': cdsType.$body-01,
-'body-compact-02': cdsType.$body-compact-02,
-'body-compact-01': cdsType.$body-compact-01,
-'code-02': cdsType.$code-02,
-'code-01': cdsType.$code-01,
+  "heading-05": cdsType.$heading-05,
+  "heading-04": cdsType.$heading-04,
+  "heading-03": cdsType.$heading-03,
+  "heading-02": cdsType.$heading-02,
+  "heading-01": cdsType.$heading-01,
+  "heading-compact-02": cdsType.$heading-compact-02,
+  "heading-compact-01": cdsType.$heading-compact-01,
+  "body-02": cdsType.$body-02,
+  "body-01": cdsType.$body-01,
+  "body-compact-02": cdsType.$body-compact-02,
+  "body-compact-01": cdsType.$body-compact-01,
+  "code-02": cdsType.$code-02,
+  "code-01": cdsType.$code-01,
 );
 
 body.page-carbonization-foundations-typography {
   @each $name, $style in $styles-maps {
     .cds--type-#{$name} {
       @each $property, $value in $style {
-        // @if $property != 'font-weight' {
         #{$property}: #{$value};
-        // }
       }
     }
   }
@@ -48,6 +46,3 @@ body.page-carbonization-foundations-typography {
     padding: 0;
   }
 }
-
-
-
diff --git a/showcase/app/templates/application.gts b/showcase/app/templates/application.gts
@@ -79,7 +79,7 @@ export default class Application extends Component {
     ) {
       if (this.isCarbonizationPage) {
         this.shwTheming.setStylesheet('css-selectors--advanced');
-        // todo set theme and mode
+        // TODO should we set theme and mode here too, in some conditions?
       }
     }
     // transitioning from a carbonized page to a non-carbonized
@@ -97,7 +97,7 @@ export default class Application extends Component {
       this.isPreviousRouteCarbonized === false &&
       this.isCurrentRouteCarbonized === true
     ) {
-      // we save locally the previous stylesheet and update the page stylesheet/theme/mode
+      // we save locally (in memory) the previous stylesheet and update the page stylesheet/theme/mode
       this.previousStylesheet = this.shwTheming.currentStylesheet;
       this.previousTheme = this.hdsTheming.currentTheme;
       this.previousMode = this.hdsTheming.currentMode;

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,3 @@ body.page-carbonization-components-segmented-group {`
`13`	`13`	`align-items: end;`
`14`	`14`	`}`
`15`	`15`	`}`
`16`		`-`
`17`		`-`
`18`		`-`