fix(type): disable font ligatures across all typography classes and themes AB#1608258 - #299
Conversation
…hemes AB#1608258 Alaska Air Group brand guidelines prohibit ligature use across all brand typefaces, but the modern typography classes rendered ligatures by default because neither generator set font-variant-ligatures. The legacy no-common-ligatures rule on html/body/.baseType never reached these classes. - Add `font-variant-ligatures: none;` to `generate-body-classes` (src/type/partials/_body.scss), covering `.body-*`. - Add `font-variant-ligatures: none;` to `generate-fluid-type-classes` (src/type/mixins/_fluid-type.scss), covering `.display-*`, `.heading-*`, and `.accent-*`. - Add tests/typeLigatures.spec.js regression coverage asserting the rule is emitted on every family, for both the CSS-variable and Alaska static-fallback generators. - Regenerate committed dist bundles; the rule now applies across all themes (Alaska, Alaska Classic, Atmos, and Hawaiian/Chronicle Display). Co-authored-by AI: Claude Opus 4.8
Reviewer's GuideDisables all font ligatures across modern typography classes for every brand theme by updating the Sass generators, regenerating bundled CSS, and adding regression tests and documentation tied to ticket AB#1608258. Flow diagram for ligature disabling across typography generators and themesgraph TD
generate_body_classes[generate_body_classes mixin]
generate_fluid_type_classes[generate_fluid_type_classes mixin]
typography_classes[".body-*, .display-*, .heading-*, .accent-* classes (font-variant-ligatures: none)"]
theme_bundles["Alaska, AlaskaClassic, Atmos, Hawaiian global CSS bundles"]
typeLigatures_spec[typeLigatures_spec]
test_runner[Test runner]
generate_body_classes --> typography_classes
generate_fluid_type_classes --> typography_classes
typography_classes --> theme_bundles
test_runner --> typeLigatures_spec
typeLigatures_spec --> generate_body_classes
typeLigatures_spec --> generate_fluid_type_classes
typeLigatures_spec --> typography_classes
typeLigatures_spec --> theme_bundles
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
🚀 PR Release Published! To install: npm install @aurodesignsystem-dev/webcorestylesheets@0.0.0-pr299.2Install via alias: npm install @aurodesignsystem@npm:@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr299.2 |
jason-capsule42
left a comment
jason-capsule42
left a comment
There was a problem hiding this comment.
🤖 Claude Code Review — no blocking issues
The change adds font-variant-ligatures: none; to the two typography generator mixins, regenerates the committed dist/ bundles, and adds a compile-output regression test. No 🔴 blocking issues. The two suggestions below are optional polish.
Verified clean:
- Source correctness — the rule is emitted first in each generated class block, outside the
@if/@elsefont-family branches, so both the CSS-variable and static-fallback builds inherit it. No later declaration in the block (includingaccent'stext-transformvia@content) overrides a different property. Valid CSS3. - Test is not vacuous —
tests/typeLigatures.spec.jscompiles the real generators for all 4 families (body,display,heading,accent) across both branches; the positive regex requiresmatches.length > 0, and the negative assertion does not false-matchno-common-ligatures. - Dist is consistent with source — a clean 1:1 rule-to-class ratio (29:29) across
classes.css,classes.alaska.css, and all 4 theme global bundles; no ligature-enabling value remains anywhere indist/.
🎫 Ticket completeness — AB#1608258: The ADO work item has no Description/Acceptance Criteria populated, so completeness was judged from the post-mortem's enumerated requirements — 4 of 4 resolved (rule on .body/.display/.heading/.accent-*; applies to all themes; added to both generate-body-classes and generate-fluid-type-classes).
Commit & post-mortem: fix(type): is the correct Conventional Commit prefix for a compliance bug fix (PATCH); additive/non-breaking, so no BREAKING CHANGE. Post-mortem docs/post-mortem/1608258.md present and technically accurate; Discussion #298 in sync. No TRD linked (informational).
🤖 Multi-model: opus + sonnet, high effort. opus — clean pass (0 findings), actively dismissed the @content nit below. sonnet — the two optional nits below. Both models agree there are no blocking issues.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @jason-capsule42, your pull request is larger than the review limit of 150000 diff characters
|
how do we disable the font ligature on b, strong? such as |
The and tags nested will not over ride the parent typography class. |
|
There were three issues I noticed, listed below. I made the suggested changes in the Feel free to cherry-pick or merge, etc. I did not visually test them. Observed issues
Why
|
Base styles previously used the weaker `font-variant-ligatures: no-common-ligatures` (only common ligatures such as fi/fl), while the generated typography classes used `none`, producing inconsistent ligature behavior across the system. Alaska Air Group brand guidelines require ligatures disabled entirely, so `none` is the correct value. - Add a shared `auro_noLigatures` mixin (src/utilityMixins/_noLigatures.scss) as the single source of truth for the brand ligature policy, replacing the value that was duplicated across the type generators and base styles. - Route the fluid-type and body class generators, the base essentials rule, and the Auro Classic legacy base rule through the mixin; the base rules now emit `none` instead of `no-common-ligatures`. - Simplify tests/typeLigatures.spec.js to assert the declaration is present within each generated class block rather than tied to its exact position, so an unrelated declaration reorder no longer breaks the guard. - Regenerate committed dist bundles across all themes (Alaska, Alaska Classic, Atmos, Hawaiian) and legacy Auro Classic. Co-authored-by AI: Claude Opus 4.8
Changes committed for these |
chrisfalaska
left a comment
chrisfalaska
left a comment
There was a problem hiding this comment.
Changes look good! Just a bit of doc drift in the post-mortem. It should mention _noLigatures.scss and the base reconciliation.
Base styles previously used the weaker `font-variant-ligatures: no-common-ligatures` (only common ligatures such as fi/fl), while the generated typography classes used `none`, producing inconsistent ligature behavior across the system. Alaska Air Group brand guidelines require ligatures disabled entirely, so `none` is the correct value. - Add a shared `auro_noLigatures` mixin (src/utilityMixins/_noLigatures.scss) as the single source of truth for the brand ligature policy, replacing the value that was duplicated across the type generators and base styles. - Route the fluid-type and body class generators, the base essentials rule, and the Auro Classic legacy base rule through the mixin; the base rules now emit `none` instead of `no-common-ligatures`. - Simplify tests/typeLigatures.spec.js to assert the declaration is present within each generated class block rather than tied to its exact position, so an unrelated declaration reorder no longer breaks the guard. - Regenerate committed dist bundles across all themes (Alaska, Alaska Classic, Atmos, Hawaiian) and legacy Auro Classic. Co-authored-by AI: Claude Opus 4.8
06511f8 to
16bd593
Compare
Resolved |
chrisfalaska
left a comment
chrisfalaska
left a comment
There was a problem hiding this comment.
Feedback applied, looks great!
## [12.0.1](v12.0.0...v12.0.1) (2026-08-20) ### Bug Fixes * **type:** disable all ligatures via shared auro_noLigatures mixin [#299](#299) ([37d3182](37d3182)) * **type:** disable font ligatures across all typography classes and themes AB[#1608258](https://github.com/AlaskaAirlines/WebCoreStyleSheets/issues/1608258) ([0fd7013](0fd7013))
|
🎉 This PR is included in version 12.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
4 participants
Tickets
AB#1608258
Alaska Air Group brand guidelines prohibit the use of "ligatures" — decorative glyphs that fuse adjacent letter pairs (for example, the joined "fl" in "flight search"). Our shared typography styles were letting browsers render these ligatures by default, which put on-screen text out of compliance with the brand standard across every product using the design system.
This change turns ligatures off for all of the modern typography styles, for every brand theme (Alaska, Alaska Classic, Atmos, and Hawaiian — including the Chronicle Display font). Text now renders with plain, unjoined letters everywhere, bringing the typography back into brand compliance with no other visual change.
Tracking ticket: AB#1608258.
Links:
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.
Checklist:
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
Enforce the brand requirement for fully disabled ligatures throughout the typography system and shipped style bundles.
New Features:
Bug Fixes:
Enhancements:
Documentation:
Tests:
Chores: