Jbaker/update hyperlink styles

[jason-capsule42]

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: # (issue, if applicable)

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

Type of change:

Please delete options that are not relevant.

• New capability
• Revision of an existing capability
• Infrastructure change (automation, etc.)
• Other (please elaborate)

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

Summary by Sourcery

Update core hyperlink styling and theme configuration to align with the auro-hyperlink component and improve accessibility, while adjusting layout utilities and build tooling for SCSS linting and theme imports.

Enhancements:

• Revise baseline hyperlink and nav hyperlink styles (including hover and focus-visible behavior) to use design tokens, consistent focus outlines, and hover-only media queries.
• Adjust tablist, grid, and role-based anchor helper styles for more predictable layout and responsive behavior.
• Import legacy auro-classic design token variables into Alaska, Auro-1, and Hawaiian theme base configs and extend theme maps with focus-related tokens.

Build:

• Add postcss-scss and configure stylelint SCSS linting to use the custom SCSS syntax parser, and regenerate SassDoc HTML with updated version metadata.

[sourcery-ai]

Reviewer's Guide

Updates core hyperlink styling and focus behavior across classic and theme-based styles, aligns docs to v11.0.0, and adjusts layout/grid utilities and tooling to support the new styles and SCSS linting.

File-Level Changes

Change	Details	Files
Enhance baseline hyperlink styles for classic and theme-based builds to align with auro-hyperlink component behavior and modern focus/hover patterns.	Add transition, border-radius, and explicit outline properties to base hyperlink class to improve visual feedback and focus ring styling. Introduce :focus-visible rules using theme-driven focus color, offset, and width tokens for hyperlinks and nav variants. Replace .is-touching-based hover suppression with @media (hover: hover) queries and remove !important from nav hover underline. Ensure ondark and default hyperlink variants share consistent hover and focus-visible behavior.	src/essentials/legacy/_auro-classic.scss src/essentials/_base.scss docs/index.html
Extend theme configuration to provide new focus-related tokens used by hyperlink focus styling.	Add focus-color, focus-offset, and focus-width entries to Alaska and Hawaiian base essentials theme maps. Import legacy auro-classic SCSSVariables into Alaska, Auro-1, and Hawaiian base index configs to supply the new focus tokens.	src/config/alaska/base/essentials.scss src/config/hawaiian/base/essentials.scss src/config/alaska/base/index.scss src/config/auro-1/base/index.scss src/config/hawaiian/base/index.scss docs/index.html
Adjust layout, tablist, and roleTab helper ordering for clearer cascade and responsive behavior.	Move grid_gutter mixin calls to follow grid-template-areas declarations for multiple grid layouts. Reorder grid-stickycolumn--md to be applied after padding in anchor nav column. Move auro_anchorTab mixin after margin adjustments in auro_roleTab helper to ensure correct final styles. Relocate responsive breakpoint mixin in auro_tablist to the end of the block for clearer base vs. enhanced behavior.	src/_grids.scss src/componentSupport/_anchor-roleTab.scss src/componentSupport/_tablist.scss docs/index.html
Update tooling and documentation metadata to support SCSS syntax-aware linting and new library version.	Add postcss-scss devDependency and configure stylelint SCSS lint script to use it as custom syntax. Bump documented library version and SassDoc output in docs to v11.0.0, including footer version text.	package.json package-lock.json docs/index.html

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The base and legacy #{$scope}.#{$prefix}hyperlink rules now contain nearly identical focus and hover logic; consider extracting a shared mixin so the behavior stays in sync and is easier to maintain.
• The new transition: all .15s ease on hyperlinks will animate every property including focus outlines; consider limiting the transition to specific properties (e.g., color, text-decoration) to avoid delaying or animating critical focus states.
• The new design-token imports mix package-style paths (e.g., @aurodesignsystem/...) with deep relative ../../../../node_modules/... paths across the base configs; it may be clearer and more robust to standardize on a single import style.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The base and legacy `#{$scope}.#{$prefix}hyperlink` rules now contain nearly identical focus and hover logic; consider extracting a shared mixin so the behavior stays in sync and is easier to maintain.
- The new `transition: all .15s ease` on hyperlinks will animate every property including focus outlines; consider limiting the transition to specific properties (e.g., `color`, `text-decoration`) to avoid delaying or animating critical focus states.
- The new design-token imports mix package-style paths (e.g., `@aurodesignsystem/...`) with deep relative `../../../../node_modules/...` paths across the base configs; it may be clearer and more robust to standardize on a single import style.

## Individual Comments

### Comment 1
<location path="src/componentSupport/_anchor-roleTab.scss" line_range="23" />
<code_context>
 /// @example scss - import selector file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";
 #{$scope}.auro_roleTab {
-  @include auro_anchorTab(sass, noncomponent);
-
   margin-right: calc(#{$ds-size-50} * -1);
</code_context>
<issue_to_address>
**issue (bug_risk):** Reordering the mixin after `margin-right` may cause the mixin to override your negative margin.

Previously the mixin ran first and the explicit `margin-right` overrode any margin set by `auro_anchorTab`. With the new order, if the mixin sets `margin`/`margin-right`, it will override your negative margin. If you need to guarantee this negative margin, keep the mixin before the `margin-right` declaration or adjust the mixin to avoid conflicting margin rules.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

This PR updates hyperlink styling and related theme configuration to align baseline link behavior with the auro-hyperlink component, including focus and hover treatment, while also adjusting SCSS lint parsing and regenerating SassDoc assets.

Changes:

• Updates themed and legacy hyperlink styles with underline, hover, focus-visible, nav, and on-dark behavior.
• Adds focus-related theme map values and imports token variables needed by those configs.
• Adjusts SCSS ordering in support/grid files and updates stylelint to parse SCSS via postcss-scss.

Reviewed changes

Copilot reviewed 12 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/essentials/legacy/_auro-classic.scss	Updates legacy hyperlink styling and variants.
src/essentials/_base.scss	Updates themed baseline hyperlink mixin behavior.
src/elementDemoStyles/elementDemoStyles.scss	Removes markdown anchor extension to .hyperlink.
src/config/hawaiian/base/index.scss	Adds legacy token variable import for Hawaiian base config.
src/config/hawaiian/base/essentials.scss	Adds focus token values to Hawaiian base map.
src/config/auro-1/base/index.scss	Adds legacy token variable import for Auro-1 base config.
src/config/alaska/base/index.scss	Adds legacy token variable import for Alaska base config.
src/config/alaska/base/essentials.scss	Adds focus token values to Alaska base map.
src/componentSupport/_tablist.scss	Reorders breakpoint block after declarations.
src/componentSupport/_anchor-roleTab.scss	Reorders margin declaration before mixin include.
src/_grids.scss	Reorders grid mixin includes relative to declarations.
package.json	Adds postcss-scss and configures SCSS lint command with custom syntax.
docs/assets/css/main.css.map	Removes generated SassDoc source map.
docs/assets/css/main.css	Regenerates SassDoc stylesheet output.

Files not reviewed (1)

• docs/assets/css/main.css: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

🚀 PR Release Published! v0.0.0-pr286.1

To install:

npm install @aurodesignsystem-dev/webcorestylesheets@0.0.0-pr286.1

Install via alias:

npm install @aurodesignsystem@npm:@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr286.1

View on npmjs.com

[rmenner]

🎉 This PR is included in version 11.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀