simplified architecture of CSS compilation for HDS components (as agreed)

Author: didoo

packages/components/rollup.config.mjs

@@ -91,20 +91,8 @@ const plugins = [
       outputFile: 'design-system-components.css',
     },
     {
-      inputFile: 'design-system-components-theming-with-css-selectors.scss',
-      outputFile: 'design-system-components-theming-with-css-selectors.css',
-    },
-    {
-      inputFile:
-        'design-system-components-theming-with-prefers-color-scheme.scss',
-      outputFile:
-        'design-system-components-theming-with-prefers-color-scheme.css',
-    },
-    {
-      inputFile:
-        'design-system-components-theming-with-combined-strategies.scss',
-      outputFile:
-        'design-system-components-theming-with-combined-strategies.css',
+      inputFile: 'design-system-components-common.scss',
+      outputFile: 'design-system-components-common.css',
     },
     {
       inputFile: 'design-system-power-select-overrides.scss',

packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss renamed to packages/components/src/styles/@hashicorp/design-system-components-common.scss

@@ -4,8 +4,6 @@
  */
 
 // these files come from `packages/tokens/dist/`
-@use "products/css/themed-tokens/with-css-selectors/tokens.css";
-// TODO understand if these are common/shared or we should have different ones for the themed tokens
 @use "products/css/helpers/color";
 @use "products/css/helpers/elevation";
 @use "products/css/helpers/focus-ring";

packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss

@@ -3,20 +3,8 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// these files come from `packages/tokens/dist/`
+// these are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`)
 @use "products/css/tokens";
-// TODO understand if these are common/shared or we should have different ones for the themed tokens
-@use "products/css/helpers/color";
-@use "products/css/helpers/elevation";
-@use "products/css/helpers/focus-ring";
-@use "products/css/helpers/typography";
 
-// main components file
-@use "../components/index";
-
-// screen-reader utility class
-@use "../mixins/screen-reader-only" as *;
-
-.sr-only {
-  @include screen-reader-only();
-}
+// these are the styles specific (and only) for the the HDS components
+@use "./design-system-components-common";