refactored carbonization/foundations/color page and ShwCarbonizationTokenPreviewColor to show actual color values in preview item

Author: didoo

showcase/app/components/page-carbonization/foundations/color.gts

@@ -1,26 +1,38 @@
-import Component from '@glimmer/component';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
+import { helper } from '@ember/component/helper';
+import { eq, notEq, and } from 'ember-truth-helpers';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
-import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview-color';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+import ShwCarbonizationTokenPreviewHdsColor from 'showcase/components/shw/carbonization/token-preview/hds-color';
+
+import type { DesignToken } from '../../../../types/design-token';
 
 import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json';
 
-export default class ColorCarbonization extends Component {
-  get allColorTokens() {
-    return TOKENS_RAW.filter((token) => token.$type === 'color');
-  }
+const tokenShortName = helper(function ([token]: [DesignToken]) {
+  return token.name?.replace(/^token-/, '');
+});
 
-  <template>
-    {{pageTitle "Color - Carbonization"}}
+const ColorCarbonization: TemplateOnlyComponent = <template>
+  {{pageTitle "Color - Carbonization"}}
 
-    <ShwTextH1>Color - Carbonization</ShwTextH1>
+  <ShwTextH1>Color - Carbonization</ShwTextH1>
 
-    <section>
-      {{#each this.allColorTokens as |token|}}
-        {{! @glint-ignore - we know all the tokens of type 'color' have values as 'strings' }}
-        <ShwCarbonizationTokenPreviewColor @token={{token}} />
-      {{/each}}
-    </section>
-  </template>
-}
+  <section>
+    {{#each TOKENS_RAW as |token|}}
+      {{#if (and (eq token.$type "color") (notEq token.name undefined))}}
+        <ShwCarbonizationComparisonGrid @label={{tokenShortName token}}>
+          <:theming as |T|>
+            <ShwCarbonizationTokenPreviewHdsColor
+              @mode={{T.theme}}
+              @tokenName={{token.name}}
+            />
+          </:theming>
+        </ShwCarbonizationComparisonGrid>
+      {{/if}}
+    {{/each}}
+  </section>
+</template>;
+export default ColorCarbonization;

showcase/app/components/page-carbonization/foundations/typography.gts

@@ -10,7 +10,7 @@ import ShwTextH1 from 'showcase/components/shw/text/h1';
 
 import ShwFlex from 'showcase/components/shw/flex';
 import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
-import ShwCarbonizationStylePreviewTypography from 'showcase/components/shw/carbonization/style-preview-typography';
+import ShwCarbonizationStylePreviewTypography from 'showcase/components/shw/carbonization/style-preview/typography';
 
 import { STYLES_COMBINATIONS } from 'showcase/components/page-foundations/typography/sub-sections/styles';
 

showcase/app/components/shw/carbonization/style-preview-typography/index.gts renamed to showcase/app/components/shw/carbonization/style-preview/typography.gts

@@ -0,0 +1,50 @@
+import Component from '@glimmer/component';
+import style from 'ember-style-modifier';
+
+import ShwLabel from 'showcase/components/shw/label';
+import THEMED_TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/themed-tokens.json';
+
+import type { HdsModes } from '@hashicorp/design-system-components/services/hds-theming';
+
+import type { DesignToken } from '../../../../../types/design-token';
+
+export interface ShwCarbonizationTokenPreviewColorSignature {
+  Args: {
+    mode: HdsModes;
+    tokenName: string;
+  };
+}
+
+export default class ShwCarbonizationTokenPreviewColor extends Component<ShwCarbonizationTokenPreviewColorSignature> {
+  get background(): string {
+    return `var(--${this.args.tokenName})`;
+  }
+
+  get value(): string {
+    const allThemedTokensForCurrentMode:
+      | Record<string, DesignToken>
+      | undefined = THEMED_TOKENS_RAW[this.args.mode];
+    const themedToken = allThemedTokensForCurrentMode?.[this.args.tokenName];
+
+    if (themedToken?.$value) {
+      return themedToken.$value as string;
+    } else {
+      console.error(
+        `Missing themed token for theme=${this.args.mode} and name=${this.args.tokenName}`,
+      );
+      return 'Undefined token value';
+    }
+  }
+
+  <template>
+    <div class="shw-carbonization-token-preview-color-wrapper">
+      <ShwLabel
+        class="shw-carbonization-token-preview-color-value"
+      >{{this.value}}</ShwLabel>
+      <div
+        class="shw-carbonization-token-preview-color"
+        {{style background=this.background}}
+      />
+    </div>
+  </template>
+}

showcase/app/components/shw/carbonization/token-preview-color/index.gts

@@ -1,6 +1,22 @@
+.shw-carbonization-token-preview-color-wrapper {
+  position: relative;
+}
+
+.shw-carbonization-token-preview-color-value {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  margin: 0px;
+  padding: 2px 3px;
+  color: var(--content-foreground-color);
+  font-size: 0.7rem;
+  background-color: var(--content-background-color);
+  border-radius: 3px;
+}
+
 .shw-carbonization-token-preview-color {
   width: 100%;
-  height: 32px;
+  height: 50px;
   border-radius: 6px;
   box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 25%);
 }

showcase/app/components/shw/carbonization/token-preview/hds-color.gts

@@ -0,0 +1,19 @@
+export interface DesignToken {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  $value?: any;
+  type?: string;
+  $type?: string;
+  $description?: string;
+  name?: string;
+  comment?: string;
+  themeable?: boolean;
+  attributes?: Record<string, unknown>;
+  /**
+   * When flattening tokens, DesignToken is given a key that matches the original ancestor tree e.g. `{colors.red.500}`
+   */
+  key?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}