updated selectors for common tokens in public themed CSS files to avoid CSS variables staleness

Author: didoo

showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css

@@ -141,7 +141,40 @@
   --token-typography-font-stack-text: Impact, "Arial Black", "sans serif";
 }
 
-:root {
+/*
+  WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE?
+
+  CSS custom properties (variables) inherit from parent to child, but when a variable is defined
+  as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed
+  at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`).
+
+  This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these
+  "computed" variables at `:root` level, their values do not update in themed blocks that override
+  the "source" variables (e.g., `--source-value`) at a lower scope.
+  This results in _stale_ variables, where the computed value is always stuck on the `:root` value,
+  even inside a themed block where the source variable is assigned.
+
+  To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values,
+  we redeclare each "computed" variable in every theme scope where its "source" variable is overridden.
+*/
+
+:root,
+.hds-theme-default,
+.hds-theme-system,
+.hds-theme-light,
+.hds-theme-cds-g0,
+.hds-theme-cds-g10,
+.hds-theme-cds-g90,
+.hds-theme-dark,
+.hds-theme-cds-g100,
+[data-hds-theme="default"],
+[data-hds-theme="system"],
+[data-hds-theme="light"],
+[data-hds-theme="cds-g0"],
+[data-hds-theme="cds-g10"],
+[data-hds-theme="cds-g90"],
+[data-hds-theme="dark"],
+[data-hds-theme="cds-g100"] {
   --token-border-radius-x-small: 3px;
   --token-border-radius-small: 5px;
   --token-border-radius-medium: 6px;

showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css

@@ -96,7 +96,38 @@
   --token-typography-font-stack-text: Impact, "Arial Black", "sans serif";
 }
 
-:root {
+/*
+  WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE?
+
+  CSS custom properties (variables) inherit from parent to child, but when a variable is defined
+  as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed
+  at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`).
+
+  This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these
+  "computed" variables at `:root` level, their values do not update in themed blocks that override
+  the "source" variables (e.g., `--source-value`) at a lower scope.
+  This results in _stale_ variables, where the computed value is always stuck on the `:root` value,
+  even inside a themed block where the source variable is assigned.
+
+  To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values,
+  we redeclare each "computed" variable in every theme scope where its "source" variable is overridden.
+*/
+
+:root,
+.hds-theme-default,
+.hds-theme-light,
+.hds-theme-cds-g0,
+.hds-theme-cds-g10,
+.hds-theme-cds-g90,
+.hds-theme-dark,
+.hds-theme-cds-g100,
+[data-hds-theme="default"],
+[data-hds-theme="light"],
+[data-hds-theme="cds-g0"],
+[data-hds-theme="cds-g10"],
+[data-hds-theme="cds-g90"],
+[data-hds-theme="dark"],
+[data-hds-theme="cds-g100"] {
   --token-border-radius-x-small: 3px;
   --token-border-radius-small: 5px;
   --token-border-radius-medium: 6px;

showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css

@@ -66,7 +66,28 @@
   }
 }
 
-:root {
+/*
+  WHY ARE ALL "COMPUTED" CSS VARIABLES REDECLARED IN EACH THEME SCOPE?
+
+  CSS custom properties (variables) inherit from parent to child, but when a variable is defined
+  as a calculation or alias of another variable (e.g., `--alias-value: var(--source-value)`, its value is fixed
+  at the scope where it is declared—using whatever is visible at that level in the DOM (eg. `:root`).
+
+  This block of "common/shared" CSS variables contains a lot of these aliases, so if we only declare these
+  "computed" variables at `:root` level, their values do not update in themed blocks that override
+  the "source" variables (e.g., `--source-value`) at a lower scope.
+  This results in _stale_ variables, where the computed value is always stuck on the `:root` value,
+  even inside a themed block where the source variable is assigned.
+
+  To make sure every themed block/scoped context (eg. `.hds-theme-light`) correctly computes the aliased values,
+  we redeclare each "computed" variable in every theme scope where its "source" variable is overridden.
+*/
+
+:root,
+.hds-theme-default,
+.hds-theme-system,
+[data-hds-theme="default"],
+[data-hds-theme="system"] {
   --token-border-radius-x-small: 3px;
   --token-border-radius-small: 5px;
   --token-border-radius-medium: 6px;