feat(type): add data-attribute theme scoping for type custom properties AB#1612078

.github/actions/build/action.yml

@@ -22,6 +22,21 @@ runs:
     - name: Build
       run: npm run build
       shell: bash
+    - name: Verify committed build output is up to date
+      # Guardrail: the committed generated files must match what `npm run build`
+      # produces. This covers both the publishable dist/ bundles and the
+      # generated Sass partial src/type/mixins/_theme-codes.scss (derived from
+      # @aurodesignsystem/design-tokens). If this fails, someone changed src/ or
+      # bumped design-tokens without rebuilding — run `npm run build` locally and
+      # commit the resulting changes.
+      run: |
+        if [ -n "$(git status --porcelain -- dist/ src/type/mixins/_theme-codes.scss)" ]; then
+          echo "::error::Committed build output is out of date. Run 'npm run build' and commit the changes."
+          git status --porcelain -- dist/ src/type/mixins/_theme-codes.scss
+          git diff -- dist/ src/type/mixins/_theme-codes.scss
+          exit 1
+        fi
+      shell: bash
     - name: Build SassDoc
       run: npm run build:sassdoc
       shell: bash

.github/workflows/pull-request.yml

@@ -85,7 +85,9 @@ jobs:
               return packageJson;
             result-encoding: string
         - name: Publish to NPM
-          run: npm publish --registry=https://registry.npmjs.org --tag pr
+          # Prerelease versions require an explicit dist-tag. Use a PR-scoped tag
+          # so PR releases never move the shared `latest` tag.
+          run: npm publish --registry=https://registry.npmjs.org --tag pr${{ github.event.pull_request.number }}
           env:
             NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # Fallback only
             NPM_TOKEN: ${{ secrets.NPM_TOKEN }} # Fallback only

.npmignore

@@ -25,3 +25,4 @@ src/scripts/
 # overrides
 !CHANGELOG.md
 !README.md
+!MIGRATION.md

.stylelintrc

@@ -19,6 +19,7 @@
         "warn",
         "extend",
         "use",
+        "forward",
         "layer"
       ]
     }]

FAQ.md

@@ -4,10 +4,10 @@ The following are frequently asked questions.
 
 ## I updated my version and am now getting a missing variable error?
 
-When you update to v2.8, if you get an error that there are missing Sass variables with the Auro namespace, e.g. `$auro- ...` simply import the new Auro Sass variables generated from the tokens.
+When you update to v2.8, if you get an error that there are missing Sass variables with the Auro namespace, e.g. `$auro- ...` simply load the new Auro Sass variables generated from the tokens.
 
 ```scss
-@import "~@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
+@use "~@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables" as *;
 ```
 
 ## I updated my version, now some utility selectors are no longer there?
@@ -18,10 +18,10 @@ If you have been using selectors from the now deprecated `_layoutProperties.scss
 .util_[margin/padding][Top/Right/Bottom/Left]--[none/xs/md/lg/xl]
 ```
 
-The easy fix is to import the new layout properties generator file that will fill this gap.
+The easy fix is to load the new layout properties generator file that will fill this gap.
 
 ```scss
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator" as *;
 ```
 
 For full details on this generator, please see the [generator documentation](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-layout-mixin-auro_layoutPropertiesGenerator).

FEATURES.md

@@ -4,13 +4,13 @@ For the full API, please see the [WCSS docs site](https://alaskaairlines.github.
 
 ## Scoping
 
-Be sure to see the [prefixing and scoping API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#scope-prefix) in the documentation site.
+Be sure to see the [prefixing and scoping API](https://alaskaairlines.github.io/WebCoreStyleSheets/#scope-prefix) in the documentation site.
 
-When supporting legacy UIs there may be issues with importing a Sass file and its selectors. To enable scoping simply set the `$scope` variable to be `true` before importing any selectors that support this setting.
+When supporting legacy UIs there may be issues with importing a Sass file and its selectors. Under the Sass module system, configure the `$scope` value via `@use ... with (...)` on the `manageScope` module. This must be done **before** loading any selectors that support this setting (the first `@use` of `manageScope` is the one that carries configuration).
 
 ```scss
-$scope: true;
-@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "
+@use "~@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($scope: true);
+@use "~@aurodesignsystem/webcorestylesheets/dist/ ... ";
 ```
 
 This setting will result in the following CSS selectors
@@ -24,11 +24,11 @@ html.auro { ... }
 
 ## Prefixing
 
-To enable prefixing simply set the `$prefix` variable to be `true` before importing any selectors that support this setting.
+To enable prefixing, configure the `$prefix` value via `@use ... with (...)` on the `manageScope` module, **before** loading any selectors that support this setting.
 
 ```scss
-$prefix: true;
-@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "
+@use "~@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($prefix: true);
+@use "~@aurodesignsystem/webcorestylesheets/dist/ ... ";
 ```
 
 This setting will result in the following CSS selectors
@@ -42,12 +42,11 @@ body,
 
 ## Scoping and prefixing
 
-If needed, both `$scope` and `prefix` can work in tandem. To enable, simply set both the `scope` and `prefix` variables as `true` before importing any selectors that support these settings.
+If needed, both `$scope` and `$prefix` can work in tandem. Configure both on the `manageScope` module in a single `@use ... with (...)`, **before** loading any selectors that support these settings.
 
 ```scss
-$scope: true;
-$prefix: true;
-@import "~@aurodesignsystem/webcorestylesheets/dist/ ... "
+@use "~@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($scope: true, $prefix: true);
+@use "~@aurodesignsystem/webcorestylesheets/dist/ ... ";
 ```
 
 This setting will result in the following CSS selectors
@@ -61,10 +60,11 @@ html.auro { ... }
 
 ## Importing utility classes and using the !important flag
 
-When importing utility selectors developers have the option to invoke the `!important` CSS flag. Within WCSS the global `$important` variable is `null` by default. To change, simply change the value of the variable before importing any utility partials.
+When importing utility selectors developers have the option to invoke the `!important` CSS flag. Within WCSS the `$important` variable is `null` by default. To change it, configure the `important` module via `@use ... with (...)` **before** loading any utility partials.
 
 ```scss
-$important: true;
+@use "~@aurodesignsystem/webcorestylesheets/dist/utilityVariables/important" with ($important: true);
+@use "~@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... ";
 ```
 
 The output of default selector
@@ -83,7 +83,7 @@ The output with `$important: true`
 }
 ```
 
-See !important [spec](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-variable-important)
+See !important [spec](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-variable-important)
 
 
 ## layoutPropertiesGenerator
@@ -94,7 +94,7 @@ Importing this file will auto-generates all available utility selectors. Output
 none, xs, md, lg, xl
 ```
 
-See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_layoutPropertiesGenerator)
+See [API](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-layout-mixin-auro_layoutPropertiesGenerator)
 
 ## insetUtility selector generator
 
@@ -104,7 +104,7 @@ Importing this file will return a series of pre-defined inset (_the padding arou
 none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
 ```
 
-See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_inset)
+See [API](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-inset)
 
 ## spacingUtility selector generator
 
@@ -116,4 +116,4 @@ Importing this file will return a series of pre-defined selectors based on the s
 none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
 ```
 
-See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_spacing)
+See [API](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-layout-mixin-auro_spacing)