WC Style Sheets

WC Style Sheets(WCSS) is a responsive, mobile-first collection of styles and tools designed to make it quick and simple for developers to create web experiences using the Auro Design Language.

What's included

This repository is a library of core level styles, functions, and mixins that can be used for consistent front-end UI development. This will include full descriptions of CSS selectors, mixins and any other supporting functions or tools.

Documentation

Please see the documentation site for all information related to WC Style Sheets.

Upgrading to v12 (Sass modules)

WCSS v12.0.0 migrates from the deprecated Sass @import system to the Sass module system (@use / @forward). This is a breaking change for consumers. See the Migration Guide for the required @use syntax and the new @use ... with (...) form for scope, prefix, and !important configuration.

Design tokens and legacy component support

Upgrading to WCSS v5.x requires @aurodesignsystem/[email protected].

When upgrading your project it may be required to also retain @aurodesignsystem/[email protected] in order to support Auro custom elements have not been updated to support the new design token naming convention.

Please also see Auro design tokens migration from 3.x to 4.x for additional information.

Install

Pre-processed bundled resources

At a limited scale, some files have been pre-processed to CSS so that it can be delivered via CDN and used in environments where this rendered resource is required.

API Note: First supporting version v2.9.0

NOTICE! Use @latest at your own risk. This will not restrict updates and will allow instant access to MAJOR releases that will contain BREAKING CHANGES. You have been warned!

| resource | CDN URL | |---|--- | essentials.scssfonts.scss|https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css| | focus-visible.scssessentials.scssfonts.scss|https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials+fv.css|

Using the files in Sass from npm resource

$ npm i @aurodesignsystem/webcorestylesheets

There are no core files to import, rather WCSS is an à la carte solution allowing for users to load what they want and when they want it. WCSS ships as Sass modules — load a file with @use as illustrated below:

@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... " as *;

Multi-Theme Support

WebCoreStyleSheets provides multi-theme support for various brands in the Alaska Air Group. Each theme includes its own font definitions and styling.

Available Themes

For more information on the available themes and how to use them, please see the Auro Design Tokens documentation.

Using a Theme

To use a specific theme in your project, load the corresponding theme file.

For example:

/* Alaska Airlines theme (Auro default) */
@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials-as" as *;

Additional themes are available in the src directory.

Bundled Theme Resources

Each theme also has a bundled version in the dist/bundles directory that includes essentials for quick implementation:

For example:

/* Alaska Airlines theme (Auro default) */
dist/bundles/essentials-as.css

Development

To develop against WCSS run both npm run watch and npm run serve in separate terminals.

The watch command will run a Sass linter, process a test file from Sass to CSS and run a post CSS linter. This will ensure the quality of all new Sass added to the repo.

If additional selectors or scenarios are needed, please update the ./scripts/testBuild.scss file to test your code.

Running the serve command will open the Sassdoc view. Please review all changes as Sassdoc produces all documentation.

Committed build output

Two sets of files are generated and committed to the repo:

• dist/ — the pre-processed bundles consumed by downstream users.
• src/type/mixins/_theme-codes.scss — a generated Sass partial (@use "theme-codes") written by scripts/theme-codes.build.mjs from the AuroDesignTokens theme definitions. Because it is committed, a direct sass invocation compiles without any prebuild step.

Both are produced by npm run build (which runs build:theme-codes first). Do not hand-edit them — _theme-codes.scss is regenerated from design-tokens, and dist/ from src/. CI enforces that the committed output matches a fresh build, so whenever you change src/ or bump @aurodesignsystem/design-tokens, run npm run build and commit the resulting changes or the PR build will fail.

To regenerate just the theme-codes partial:

$ npm run build:theme-codes