added local testing of CSS helpers/tokens/variables

Author: didoo

addons/rose/addon/styles/addon.scss

@@ -72,3 +72,35 @@
 
 @include PlexSans.all;
 @include PlexMono.all;
+
+// TEMP - THEME TESTING
+
+.projects-theming-test {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 0 24px;
+  padding: 24px 0;
+
+  --local-foreground-color: var(--token-color-foreground-primary);
+  --local-background-color: var(--token-color-surface-faint);
+  --local-font-family: var(--token-typography-font-stack-text);
+  --local-font-size: var(--token-typography-body-200-font-size);
+  --local-font-weight: var(--token-typography-font-weight-semibold);
+}
+
+.projects-theming-test-normal-local-classes {
+  color: var(--token-color-foreground-primary);
+  background-color: var(--token-color-surface-faint);
+  font-family: var(--token-typography-font-stack-text);
+  font-size: var(--token-typography-body-200-font-size);
+  font-weight: var(--token-typography-font-weight-semibold);
+}
+
+.projects-theming-test-aliased-local-classes {
+  color: var(--local-foreground-color);
+  background-color: var(--local-background-color);
+  font-family: var(--local-font-family);
+  font-size: var(--local-font-size);
+  font-weight: var(--local-font-weight);
+}

ui/admin/app/templates/scopes/scope/scopes.hbs

@@ -23,4 +23,19 @@
   />
 {{/if}}
 
+<div class='projects-theming-test'>
+  {{! template-lint-disable no-bare-strings }}
+  <p
+    class='hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary hds-surface-faint'
+  >Test CSS helper classes for "sans" font</p>
+  <p class='projects-theming-test-normal-local-classes'>Test normal local CSS
+    classes</p>
+  <p class='projects-theming-test-aliased-local-classes'>Test normal aliased CSS
+    classes</p>
+  <p
+    class='hds-typography-code-200 hds-font-weight-semibold hds-foreground-primary hds-surface-faint'
+  >Test CSS helper classes for "mono" font</p>
+  {{! template-lint-enable no-bare-strings }}
+</div>
+
 {{outlet}}