fix(color-context tokens): only apply when .calcite-mode-auto is ap…

…plied (#8344)

**Related Issue:** #8343

## Summary

Resolves bug where the @media query, which applied light and dark
color-context tokens on prefers-color-scheme in CSS, was applied at
`:root` instead of `.calcite-mode-auto`

packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts

@@ -36,17 +36,18 @@ export function formatExtraOutput(
             ? index.mixin.map(([mixinName, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
                 return Array.isArray(m)
-                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replace("$", "--")).join("\n\t")}\n}`
+                  ? `@mixin ${mixinName} {\n\t${m.map((o) => `${o}`.replaceAll("$", "--")).join("\n\t")}\n}`
                   : "";
               })
             : [];
           const medias = index.media
             ? index.media.map(([mediaSchemed, output]) => {
                 const m = ensureIfArray(outputObject[`${output}.${args.platform}`]);
+                const cssProps = m.map((o) => `${o}`.replaceAll("$", "--"));
                 return Array.isArray(m)
-                  ? `@media (${mediaSchemed}) {\n\t:root {\n\t\t${m
-                      .map((o) => `${o}`.replace("$", "--"))
-                      .join("\n\t\t")}\n\t}\n}`
+                  ? `${
+                      output === "light" ? `:root {\n\t${cssProps.join("\n\t")}\n}\n` : ""
+                    }@media (${mediaSchemed}) {\n\t.calcite-mode-auto {\n\t\t${cssProps.join("\n\t\t")}\n\t}\n}`
                   : "";
               })
             : [];