Spike multiple CSS output in rollup

packages/components/rollup.config.mjs

@@ -9,6 +9,7 @@ import copy from 'rollup-plugin-copy';
 import scss from 'rollup-plugin-scss';
 import process from 'process';
 import path from 'node:path';
+import * as sass from 'sass';
 
 const addon = new Addon({
   srcDir: 'src',
@@ -61,6 +62,31 @@ const plugins = [
     fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
   }),
 
+  // Custom plugin to compile the themed SCSS with different include paths
+  {
+    name: 'compile-themed-scss',
+    generateBundle() {
+      // Compile the themed SCSS file
+      try {
+        const result = sass.compile('src/styles/@hashicorp/design-system-components-with-css-selectors.scss', {
+          // equivalent to includePaths in rollup-plugin-scss
+          loadPaths: [
+            'node_modules/@hashicorp/design-system-tokens/dist/products/css/themed-tokens/with-css-selectors',
+          ],
+        });
+
+        // Emit the compiled CSS
+        this.emitFile({
+          type: 'asset',
+          fileName: 'styles/@hashicorp/design-system-components-with-css-selectors.css',
+          source: result.css,
+        });
+      } catch (error) {
+        this.error(`Failed to compile themed SCSS: ${error.message}`);
+      }
+    },
+  },
+
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),
 

packages/components/src/styles/@hashicorp/design-system-components-with-css-selectors.scss

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// this file comes from packages/tokens/dist/products/css/tokens.css
+@use "tokens";
+@use "../mixins/screen-reader-only" as *;
+
+.sr-only {
+  @include screen-reader-only();
+}

packages/tokens/dist/products/css/themed-tokens/with-css-selectors/tokens.css

@@ -0,0 +1,68 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.hds-theme-default,
+[data-hds-theme="default"] {
+  --token-color-palette-neutral-300: #000000;
+  --token-color-palette-neutral-0: #ffffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-0
+  );
+}
+
+.hds-theme-cds-0,
+[data-hds-theme="cds-0"] {
+  --token-color-palette-neutral-300: #c00000;
+  --token-color-palette-neutral-0: #cfffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-100
+  );
+}
+
+.hds-theme-cds-10,
+[data-hds-theme="cds-10"] {
+  --token-color-palette-neutral-300: #c33333;
+  --token-color-palette-neutral-0: #cccccc;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-200
+  );
+}
+
+.hds-theme-cds-90,
+[data-hds-theme="cds-90"] {
+  --token-color-palette-neutral-300: #cccccc;
+  --token-color-palette-neutral-0: #c33333;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-300
+  );
+}
+
+.hds-theme-cds-100,
+[data-hds-theme="cds-100"] {
+  --token-color-palette-neutral-300: #cfffff;
+  --token-color-palette-neutral-0: #c00000;
+  --token-color-foreground-semantic-outlier: #abcdef;
+}
+
+:root {
+  --token-color-palette-neutral-300: #000000;
+  --token-color-palette-neutral-0: #ffffff;
+  --token-color-foreground-semantic-outlier: var(
+    --token-color-palette-neutral-0
+  );
+}
+
+:root {
+  --token-color-palette-neutral-200: #dedfe3;
+  --token-color-palette-neutral-100: #f1f2f3;
+  --token-component-a-size: 123px;
+  --token-color-foreground-strong: var(--token-color-palette-neutral-300);
+  --token-color-foreground-primary: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0);
+  --token-component-a-color: var(--token-color-palette-neutral-300);
+  --token-component-b-color: var(--token-color-palette-neutral-200);
+  --token-component-b-size: var(--token-component-a-size);
+  --token-component-c-color: var(--token-color-foreground-high-contrast);
+  --token-component-d-color: var(--token-color-foreground-semantic-outlier);
+}

packages/tokens/dist/products/css/themed-tokens/with-prefers-color-scheme/tokens.css

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --token-color-palette-neutral-300: #c00000;
+    --token-color-palette-neutral-0: #cfffff;
+    --token-color-foreground-semantic-outlier: var(
+      --token-color-palette-neutral-100
+    );
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --token-color-palette-neutral-300: #cfffff;
+    --token-color-palette-neutral-0: #c00000;
+    --token-color-foreground-semantic-outlier: #abcdef;
+  }
+}
+
+:root {
+  --token-color-palette-neutral-200: #dedfe3;
+  --token-color-palette-neutral-100: #f1f2f3;
+  --token-component-a-size: 123px;
+  --token-color-foreground-strong: var(--token-color-palette-neutral-300);
+  --token-color-foreground-primary: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(--token-color-palette-neutral-0);
+  --token-component-a-color: var(--token-color-palette-neutral-300);
+  --token-component-b-color: var(--token-color-palette-neutral-200);
+  --token-component-b-size: var(--token-component-a-size);
+  --token-component-c-color: var(--token-color-foreground-high-contrast);
+  --token-component-d-color: var(--token-color-foreground-semantic-outlier);
+}

showcase/app/components/page-components/badge-count/index.gts

@@ -4,13 +4,14 @@
  */
 
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContent from 'showcase/components/page-components/badge-count/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge-count/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge-count/sub-sections/carbonization';
 
 const BadgeCountIndex: TemplateOnlyComponent = <template>
   {{pageTitle "BadgeCount Component"}}
@@ -21,6 +22,15 @@ const BadgeCountIndex: TemplateOnlyComponent = <template>
     <SubSectionContent />
     <SubSectionVariants />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default BadgeCountIndex;

showcase/app/components/page-components/badge-count/sub-sections/carbonization.gts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { notEq } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+// import ShwDivider from 'showcase/components/shw/divider';
+import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid';
+
+import { HdsBadgeCount } from '@hashicorp/design-system-components/components';
+import {
+  COLORS,
+  SIZES,
+  TYPES,
+} from '@hashicorp/design-system-components/components/hds/badge-count/index';
+
+const SubSectionCarbonization: TemplateOnlyComponent = <template>
+  <ShwTextH2>Size</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each SIZES as |size|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @size={{size}} />
+            <HdsBadgeCount @text="99+" @size={{size}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Type</ShwTextH2>
+
+  <ShwCarbonizationComparisonGrid>
+    <:themed>
+      <ShwFlex @direction="column" as |SF|>
+        {{#each TYPES as |type|}}
+          <SF.Item>
+            <HdsBadgeCount @text="3" @type={{type}} />
+            <HdsBadgeCount @text="99+" @type={{type}} />
+          </SF.Item>
+        {{/each}}
+      </ShwFlex>
+    </:themed>
+  </ShwCarbonizationComparisonGrid>
+
+  <ShwTextH2>Color</ShwTextH2>
+
+  {{#each COLORS as |color index|}}
+    <ShwCarbonizationComparisonGrid
+      @hideThemeLabels={{(if (notEq index 0) true)}}
+    >
+      <:themed>
+        <ShwFlex @direction="column" @gap="0.5rem" as |SF|>
+          {{#each TYPES as |type|}}
+            <SF.Item class="shw-component-badge-sample-color--{{color}}">
+              <HdsBadgeCount @text="3" @type={{type}} @color={{color}} />
+              <HdsBadgeCount @text="99+" @type={{type}} @color={{color}} />
+            </SF.Item>
+          {{/each}}
+        </ShwFlex>
+      </:themed>
+    </ShwCarbonizationComparisonGrid>
+  {{/each}}
+</template>;
+
+export default SubSectionCarbonization;

showcase/app/components/page-components/badge/index.gts

@@ -7,10 +7,12 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { pageTitle } from 'ember-page-title';
 
 import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
 
 import SubSectionContainers from 'showcase/components/page-components/badge/sub-sections/containers';
 import SubSectionContent from 'showcase/components/page-components/badge/sub-sections/content';
 import SubSectionVariants from 'showcase/components/page-components/badge/sub-sections/variants';
+import SubSectionCarbonization from 'showcase/components/page-components/badge/sub-sections/carbonization';
 
 const BadgeIndex: TemplateOnlyComponent = <template>
   {{pageTitle "Badge Component"}}
@@ -22,6 +24,15 @@ const BadgeIndex: TemplateOnlyComponent = <template>
     <SubSectionVariants />
     <SubSectionContainers />
   </section>
+
+  <ShwDivider />
+  <ShwDivider />
+
+  <ShwTextH1>Carbonization</ShwTextH1>
+
+  <section>
+    <SubSectionCarbonization />
+  </section>
 </template>;
 
 export default BadgeIndex;