added CSS compilation for combined-strategies tokens

Author: didoo

packages/components/rollup.config.mjs

@@ -100,6 +100,12 @@ const plugins = [
       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-power-select-overrides.scss',
       outputFile: 'design-system-power-select-overrides.css',

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from `packages/tokens/dist/`
+@use "products/css/themed-tokens/with-combined-strategies/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";
+@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();
+}