diff --git a/.github/actions/build/action.yml b/.github/actions/build/action.yml index c1a6176a..163f1206 100644 --- a/.github/actions/build/action.yml +++ b/.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 diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index c3b98e5b..81793537 100644 --- a/.github/workflows/pull-request.yml +++ b/.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 diff --git a/.npmignore b/.npmignore index 8e65c137..1db8be85 100644 --- a/.npmignore +++ b/.npmignore @@ -25,3 +25,4 @@ src/scripts/ # overrides !CHANGELOG.md !README.md +!MIGRATION.md diff --git a/.stylelintrc b/.stylelintrc index 022cf8f8..df3dadcd 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -19,6 +19,7 @@ "warn", "extend", "use", + "forward", "layer" ] }] diff --git a/FAQ.md b/FAQ.md index 4dd043bb..b27b5a59 100644 --- a/FAQ.md +++ b/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). diff --git a/FEATURES.md b/FEATURES.md index 33bfe94f..04914f1e 100644 --- a/FEATURES.md +++ b/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) diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 00000000..49abe9d7 --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,248 @@ +# Migration Guide + +## v11.x → v12.0.0 — Sass module system (`@use`/`@forward`) + +WebCoreStyleSheets v12 replaces the legacy Sass `@import` system with the +[Sass module system](https://sass-lang.com/documentation/at-rules/use/) +(`@use` / `@forward`). Dart Sass has deprecated `@import` and will remove it in +Dart Sass 3.0.0; this release moves WCSS — and, by extension, your project — off +the deprecation path. + +This is a **breaking change**. The shipped `src/` (and compiled `dist/`) partials +are the package's public API, and that API is now module-based. Read the sections +below that apply to how you consume WCSS. + +--- + +### 1. Load files with `@use`, not `@import` + +Replace every `@import` of a WCSS partial with `@use`. + +```scss +// Before (v11) +@import "~@aurodesignsystem/webcorestylesheets/dist/normalize"; + +// After (v12) +@use "~@aurodesignsystem/webcorestylesheets/dist/normalize" as *; +``` + +`as *` pulls the module's members into the global namespace, matching the old +`@import` behavior most closely. If you prefer namespaced access (recommended by +Sass for clarity), drop `as *` and reference members through the namespace: + +```scss +@use "~@aurodesignsystem/webcorestylesheets/dist/animation"; + +.foo { + @include animation.auro_transition; +} +``` + +Key differences from `@import` to be aware of: + +- **Members are namespaced by default.** Without `as *`, mixins/functions/variables + are accessed as `.`. +- **`@use` is not transitive.** A module's members are only available in the file + that `@use`s it. Each file that needs a helper must `@use` it directly. +- **A module is only loaded once.** Repeated `@use` of the same file resolves to a + single shared instance — no duplicated CSS output. + +### 2. Scope / prefix configuration (`manageScope`) + +Previously you set the global `$scope` / `$prefix` variables **before** importing +selectors. Under the module system, globals no longer flow into a module — you must +configure the `manageScope` module explicitly with `@use ... with (...)`. + +```scss +// Before (v11) +$scope: true; +$prefix: true; +@import "~@aurodesignsystem/webcorestylesheets/dist/componentSupport/table"; + +// After (v12) +@use "~@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ( + $scope: true, + $prefix: true +); +@use "~@aurodesignsystem/webcorestylesheets/dist/componentSupport/table"; +``` + +**Ordering matters.** Module configuration must happen at the *first* load of +`manageScope` in the compilation. Put the configured `@use` of `manageScope` +**before** any `@use` of a selector partial that depends on it, or Sass will report +that the module was already loaded. + +> ⚠️ If you keep using the old `$scope: true; @import ...` form, the `@import` will +> still resolve (with a deprecation warning) but the scope/prefix will **silently +> stop applying** — your global no longer reaches the module. Switch to the +> `@use ... with (...)` form. + +### 3. `!important` configuration (`important`) + +Same pattern as scope/prefix — configure the `important` module rather than setting +a global. + +```scss +// Before (v11) +$important: true; +@import "~@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; + +// After (v12) +@use "~@aurodesignsystem/webcorestylesheets/dist/utilityVariables/important" with ( + $important: true +); +@use "~@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; +``` + +### 4. Design tokens are now an explicit dependency + +Several partials previously relied on you injecting Auro design-token variables into +the global scope (via a bare `@import` of the token SCSS) and detected them with +`meta.variable-exists()`. Under the module system those globals never reach the +module, so WCSS now `@use`s the tokens directly from +`@aurodesignsystem/design-tokens`. + +- `@aurodesignsystem/design-tokens` is a direct dependency of WCSS, so it is + installed automatically alongside the package — you do not need to add it yourself. +- You no longer need to pre-import the token SCSS before WCSS partials for token + defaults to resolve — WCSS loads them itself. +- If you were relying on overriding token values by injecting your own globals ahead + of the WCSS import, that path no longer works; theme via the design-tokens package + instead. + +### 5. Writing tests (`sass-true`) + +Test files now use the module API as well: + +```scss +// Before (v11) +@import 'true'; +@import '[path to function]'; + +// After (v12) +@use 'true' as *; +@use '[path to function]' as *; +``` + +For partials that take configuration, use `@use ... as * with (...)`: + +```scss +@use 'true' as *; +@use '../src/utilityMixins/spacingUtility' as * with ( + $ds-spacing-types: inline, + $ds-spacing-options: (25, 1000) +); +``` + +### 6. Paragraph margin opt-in (`$paragraph`) + +The `

` element margin is still **opt-in and off by default** (unchanged behavior), +but the flag is configured through the module rather than a shared global. The +`essentials` entry point forwards the `$paragraph` flag from its Auro Classic +essentials copy, so configure it there: + +```scss +// Before (v11) +$paragraph: true; +@import "~@aurodesignsystem/webcorestylesheets/dist/essentials"; + +// After (v12) +@use "~@aurodesignsystem/webcorestylesheets/dist/essentials" with ( + $paragraph: true +); +``` + +If you load a **per-theme** essentials bundle (e.g. `essentials/themes/alaska`) +rather than the top-level `essentials` entry point, the flag no longer flows in +through a global. The per-theme bundles emit their `p` rule from the shared +`essentials/base` module, so configure that module **first** — before the +per-theme `@use` loads it — so the base singleton is configured when it is +generated: + +```scss +// Before (v11) +$paragraph: true; +@import "~@aurodesignsystem/webcorestylesheets/dist/essentials/themes/alaska"; + +// After (v12) +@use "~@aurodesignsystem/webcorestylesheets/dist/essentials/base" with ( + $paragraph: true +); +@use "~@aurodesignsystem/webcorestylesheets/dist/essentials/themes/alaska"; +``` + +### 7. Type theme bundles moved to a per-theme file + +The old per-theme bundled sub-directories (e.g. +`src/bundled/type/themes/auro-1/body.scss`, +`.../auro-2/accent.scss`, and the individual per-part files under each theme dir) +have been removed. Each theme is now a single bundle file: + +```scss +// Before (v11) +@import ".../bundled/type/themes/auro-1/body"; + +// After (v12) — one file emits the whole theme's type custom properties +@use ".../bundled/type/themes/atmos"; +``` + +Note the `auro-1` / `auro-2` theme names are gone: design-tokens now ships +`atmos` (code `atm`) in place of the former `auro-1`, and `auro-2` is no longer +built. + +The same rename applies to the **theme-level global** stylesheets under +`dist/bundled/themes/`. The bundle is now named for the theme's directory, so +the former `auro-1` global file has been replaced by `atmos`: + +```scss +// Before (v11) +@import ".../bundled/themes/auro-1.global.css"; + +// After (v12) +@use ".../bundled/themes/atmos.global.css"; +``` + +Consumers loading a global stylesheet by the old `auro-1` name must repoint to +`atmos.global.css` (there is no `auro-1.global.css` in the v12 dist). + +The `src/type/themes/auro-1/index.scss` partial is preserved only as a compat +shim: it now emits **Atmos** (`atm`) type custom properties, not Auro 1. Anyone +`@use`-ing that path directly (rather than a bundled global) should migrate to +the bundled multi-theme file, which emits Atmos as the `:root` default: + +```scss +@use ".../src/bundled/type/themes/atmos"; +``` + +There is no `src/type/themes/atmos/` single-theme partial; if you require a +single-theme direct path and accept the shim's side-effects, the `auro-1` compat +path is the only option for now. The `auro-1` path may be removed in a future +release. + +#### Type mixin signature change (`generate-theme-type-css-vars`) + +If you call the type generator mixins directly, note that +`generate-theme-type-css-vars` now takes a second positional argument, the theme +name, used to build its data-attribute scope selector: + +```scss +// Before (v11) — loaded via `@import`, so the mixin was called unnamespaced +@include generate-theme-type-css-vars($theme-configs); + +// After (v12) — loaded via `@use`, so the mixin is called through its namespace +@include type-generator.generate-theme-type-css-vars($theme-configs, $theme-name); +``` + +--- + +### Quick reference + +| v11 (`@import`) | v12 (`@use`) | +| -------------------------------------------- | ----------------------------------------------------------------------- | +| `@import ".../normalize";` | `@use ".../normalize" as *;` | +| `$scope: true; @import ".../table";` | `@use ".../libSupport/manageScope" with ($scope: true);` then `@use ".../table";` | +| `$prefix: true; @import ...;` | `@use ".../libSupport/manageScope" with ($prefix: true);` then `@use ...;` | +| `$important: true; @import ...;` | `@use ".../utilityVariables/important" with ($important: true);` then `@use ...;` | +| `@import 'true'; @import '[partial]';` | `@use 'true' as *; @use '[partial]' as *;` | + +For the full API, see the [WCSS docs site](https://alaskaairlines.github.io/WebCoreStyleSheets/). diff --git a/README.md b/README.md index de1385f1..46bca811 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,14 @@ This repository is a library of core level styles, functions, and mixins that ca Please see the [documentation site](https://alaskaairlines.github.io/WebCoreStyleSheets/) 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](https://sass-lang.com/documentation/at-rules/use/) +(`@use` / `@forward`). This is a breaking change for consumers. See the +[Migration Guide](./MIGRATION.md) 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/design-tokens@4.x`. @@ -45,10 +53,10 @@ At a limited scale, some files have been pre-processed to CSS so that it can be $ npm i @aurodesignsystem/webcorestylesheets ``` -There are no core files to import, rather WCSS is an à la carte solution allowing for users to import what they want and when they want it. In most cases you can simply import the Sass file as illustrated below: +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: ```scss -@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... "; +@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... " as *; ``` ### Multi-Theme Support @@ -61,13 +69,13 @@ For more information on the available themes and how to use them, please see the #### Using a Theme -To use a specific theme in your project, import the corresponding theme file. +To use a specific theme in your project, load the corresponding theme file. For example: ```scss /* Alaska Airlines theme (Auro default) */ -@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials-as"; +@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials-as" as *; ``` Additional themes are available in the `src` directory. @@ -92,3 +100,18 @@ The `watch` command will run a Sass linter, process a test file from Sass to CSS 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: + +```shell +$ npm run build:theme-codes +``` diff --git a/TESTS.md b/TESTS.md index a7bdf180..eb24700a 100644 --- a/TESTS.md +++ b/TESTS.md @@ -13,8 +13,8 @@ The basic construct of a function unit test is to include the test-module and th The assertion has [multiple methods](https://www.oddbird.net/true/docs/api-assert-values.html) to choose from. This example is using the `@include assert-equal()` method. ```scss -@import 'true'; -@import '[path to function]'; +@use 'true' as *; +@use '[path to function]' as *; @include describe('[name of function]') { @include it('should return [description of function]') { @@ -30,8 +30,8 @@ The basic construct of a mixin unit test is to include the test-module and the t The [assertion model](https://www.oddbird.net/true/docs/api-assert-output.html) for comparing outputs uses the `@include assert()` method that requires the `@include output` and `@include expect` methods. ```scss -@import 'true'; -@import '[path to mixin]'; +@use 'true' as *; +@use '[path to mixin]' as *; @include describe('[name of mixin]') { @include it('should return [description of mixin]') { diff --git a/dist/auroElement/README.md b/dist/auroElement/README.md new file mode 100644 index 00000000..3dbf7f8a --- /dev/null +++ b/dist/auroElement/README.md @@ -0,0 +1,86 @@ +# What is auroElement? + +The concept of auroElement is that it is an extension of the base litElement class. When your component imports auroElement you are inheriting new base functionality. + +## Accessibility + +When building a component with the auroElement base class you will inherit a simple API for accessibility support. + +| Property | Attribute | Type | Description | +|------------------|------------------|-----------|--------------------------------------------------| +| `hidden` | `hidden` | `Boolean` | If present, the component will be hidden both visually and from screen readers | +| `hiddenAudible` | `hiddenAudible` | `Boolean` | If present, the component will be hidden from screen readers, but seen visually | +| `hiddenVisually` | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers | + +### Install + +The auroElement.js is already included with the base setup of a web component within the WCSS package. Installing requires a few modifications to the structure of the component. + +Find the following + +```js +import { LitElement, html, css } from "lit"; +``` + +Update to the following + +```js +import { html, css } from "lit"; +import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs'; +``` + +**Note:** The legacy `/auroElement.js` is deprecated and will no longer be supported. Any reference to this file should be updated to point to `/auroElement.mjs`. + +### Add supporting styles + +To complete the install, be sure to add the following to the `./src/styles.scss` file + +```scss +@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; +``` + +### Update class + +In the component's JS file, find the following + +```js +class [Namespace][Name] extends LitElement { ... } +``` + +Update to + +```js +class [Namespace][Name] extends AuroElement { ... } +``` + +### Update properties + +In the component's class, find the following + +```js +static get properties() { + return { + + }; +} +``` + +And update to include the `super` keyword is used to access and call functions on an object's parent. + +```js +static get properties() { + return { + ...super.properties, + }; +} +``` + +### Update HTML template + +Within the auroElement will be the `hideAudible()` method. In order to make full use of auroElement's accessibility features, be sure to add the following to the HTML element(s) you wish to hide from screen readers. + +```html +aria-hidden="${this.hideAudible(this.hiddenAudible)}" +``` + +This completes the install of auroElement and all its supported features. diff --git a/dist/auroElement/_auroElement.scss b/dist/auroElement/_auroElement.scss new file mode 100644 index 00000000..5a0be0b9 --- /dev/null +++ b/dist/auroElement/_auroElement.scss @@ -0,0 +1,45 @@ +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +@use '../../src/utilityClasses/displayProperties'; + +/// Component a11y support for `:host`
+/// For use with auroElement.js base class and web component development +/// +/// @group Component-support +/// @example scss - Default selector +/// :host {} +/// +/// @example scss - import mixin file +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; +:host { + @extend .util_displayBlock; +} + +/// Component a11y support for `:host` selector with `hidden` attribute
+/// For use with auroElement.js base class and web component development +/// +/// @group Component-support +/// @example scss - Default selector +/// :host([hidden]:not(:focus):not(:active)) {} +/// +/// @example scss - import mixin file +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; +:host([hidden]:not(:focus):not(:active)) { + @extend .util_displayHidden; +} + +/// Component a11y support for `:host` selector with `hiddenVisually` attribute
+/// For use with auroElement.js base class and web component development +/// +/// @group Component-support +/// @example scss - Default selector +/// :host([hiddenVisually]:not(:focus):not(:active)) {} +/// +/// @example scss - import mixin file +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; +:host([hiddenVisually]:not(:focus):not(:active)) { + @extend .util_displayHiddenVisually; +} diff --git a/dist/auroElement/auroElement.js b/dist/auroElement/auroElement.js new file mode 100644 index 00000000..634976c4 --- /dev/null +++ b/dist/auroElement/auroElement.js @@ -0,0 +1,38 @@ +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +import { LitElement } from "lit"; + +/** + * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers + * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers + * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually + */ + +export default class AuroElement extends LitElement { + + // function to define props used within the scope of this component + static get properties() { + return { + hidden: { type: Boolean, + reflect: true }, + hiddenVisually: { type: Boolean, + reflect: true }, + hiddenAudible: { type: Boolean, + reflect: true }, + }; + } + + /** + * @private Function that determines state of aria-hidden + */ + hideAudible(value) { + if (value) { + return 'true' + } + + return 'false' + } +} diff --git a/dist/auroElement/auroElement.mjs b/dist/auroElement/auroElement.mjs new file mode 100644 index 00000000..634976c4 --- /dev/null +++ b/dist/auroElement/auroElement.mjs @@ -0,0 +1,38 @@ +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +import { LitElement } from "lit"; + +/** + * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers + * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers + * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually + */ + +export default class AuroElement extends LitElement { + + // function to define props used within the scope of this component + static get properties() { + return { + hidden: { type: Boolean, + reflect: true }, + hiddenVisually: { type: Boolean, + reflect: true }, + hiddenAudible: { type: Boolean, + reflect: true }, + }; + } + + /** + * @private Function that determines state of aria-hidden + */ + hideAudible(value) { + if (value) { + return 'true' + } + + return 'false' + } +} diff --git a/dist/bundled/themes/alaska-classic.global.css b/dist/bundled/themes/alaska-classic.global.css index db36472a..8e6d71ff 100644 --- a/dist/bundled/themes/alaska-classic.global.css +++ b/dist/bundled/themes/alaska-classic.global.css @@ -186,7 +186,12 @@ small, src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2") format("woff2"); unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; } -:root { +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { --wcss-body-family: "AS Circular"; --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --wcss-body-letter-spacing: 0; @@ -337,6 +342,464 @@ small, --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); } +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +/* --------------------------------------------------------------------- */ +/* + * Generates common typography classes for use across all themes. + * These classes are identical across themes and only reference the CSS custom properties. + */ .body-default { font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); font-weight: var(--wcss-body-default-weight); diff --git a/dist/bundled/themes/alaska-classic.global.min.css b/dist/bundled/themes/alaska-classic.global.min.css index 64413aad..9c72506c 100644 --- a/dist/bundled/themes/alaska-classic.global.min.css +++ b/dist/bundled/themes/alaska-classic.global.min.css @@ -2,4 +2,4 @@ * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license * See LICENSE in the project root for license information. */ -:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#2a2a2a;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:450;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#2875b5}.hyperlink:focus-visible{outline-color:#01426a;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#01426a;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#ebf3f9}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:450;letter-spacing:0;line-height:1rem}.fineprint{color:#676767;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file +:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#2a2a2a;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:450;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#2875b5}.hyperlink:focus-visible{outline-color:#01426a;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#01426a;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#ebf3f9}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:450;letter-spacing:0;line-height:1rem}.fineprint{color:#676767;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root,[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file diff --git a/dist/bundled/themes/alaska.global.css b/dist/bundled/themes/alaska.global.css index 2363a6a4..8cb55f73 100644 --- a/dist/bundled/themes/alaska.global.css +++ b/dist/bundled/themes/alaska.global.css @@ -226,7 +226,12 @@ small, src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2") format("woff2"); unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; } -:root { +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { --wcss-body-family: "AS Circular"; --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --wcss-body-letter-spacing: 0; @@ -377,6 +382,464 @@ small, --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); } +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +/* --------------------------------------------------------------------- */ +/* + * Generates common typography classes for use across all themes. + * These classes are identical across themes and only reference the CSS custom properties. + */ .body-default { font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); font-weight: var(--wcss-body-default-weight); diff --git a/dist/bundled/themes/alaska.global.min.css b/dist/bundled/themes/alaska.global.min.css index 1d3f785c..f7c3bc40 100644 --- a/dist/bundled/themes/alaska.global.min.css +++ b/dist/bundled/themes/alaska.global.min.css @@ -2,4 +2,4 @@ * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license * See LICENSE in the project root for license information. */ -:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#2a2a2a;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:450;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#2875b5}.hyperlink:focus-visible{outline-color:#01426a;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#01426a;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#ebf3f9}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:450;letter-spacing:0;line-height:1rem}.fineprint{color:#676767;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/GoodOT-CondNews.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/GoodOT-CondMedium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file +:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#2a2a2a;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:450;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#2875b5}.hyperlink:focus-visible{outline-color:#01426a;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#01426a;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#ebf3f9}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:450;letter-spacing:0;line-height:1rem}.fineprint{color:#676767;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/GoodOT-CondNews.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/GoodOT-CondMedium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Good OT";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root,[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file diff --git a/dist/bundled/themes/atmos.global.css b/dist/bundled/themes/atmos.global.css new file mode 100644 index 00000000..1b81671e --- /dev/null +++ b/dist/bundled/themes/atmos.global.css @@ -0,0 +1,1064 @@ +@charset "UTF-8"; +/* + * Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +/* + * This file is reserved for CDN consumption of web components using the Alaska theme + * and not intended to be used with standard dynamic projects. + */ +/* + Base essentials mixin – shared styles across all themes, + excluding legacy themes such as Auro Classic. + + Accepts a map of SCSS variable name mappings for theme-specific values +*/ +:focus:not(:focus-visible) { + outline: 3px solid transparent; +} + +html { + box-sizing: border-box; + font-size: 1rem; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body, +.baseType { + margin: 0; + color: #101d2c; + font-family: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1rem; + font-weight: 450; + line-height: 1.5rem; + letter-spacing: 0; + font-variant-ligatures: no-common-ligatures; +} + +.baseParagraph { + margin: 0 0 1rem; + line-height: 1.5rem; +} +.baseParagraph .hyperlink { + text-decoration: underline; +} + +.hyperlink { + transition: all 0.15s ease; + text-decoration: underline; + color: #101d2c; + border-radius: 3px; + outline-offset: unset; + outline-style: solid; + outline-width: 1px; + outline-color: transparent; +} +.hyperlink:visited { + color: #101d2c; +} +.hyperlink:focus-visible { + outline-color: #101d2c; + outline-offset: 0.125rem; +} +@media (hover: hover) { + .hyperlink:hover { + text-decoration: none; + color: #005fa7; + } +} +.hyperlink--nav { + display: block; + text-decoration: none; +} +@media (hover: hover) { + .hyperlink--nav:hover { + text-decoration: underline; + } +} +.hyperlink--nav:focus-visible { + outline-width: 0.25rem; + outline-offset: unset; +} +.hyperlink--ondark { + color: #faf9f5; +} +@media (hover: hover) { + .hyperlink--ondark:hover { + color: #cfe0ef; + } +} +.hyperlink--ondark:visited { + color: #faf9f5; +} + +img { + max-width: 100%; +} + +small, +.type--small { + font-size: 0.75rem; + font-weight: 450; + line-height: 1rem; + letter-spacing: 0; +} + +.fineprint { + font-family: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.75rem; + font-weight: 450; + line-height: 1rem; + color: #6a717c; + letter-spacing: 0; +} + +@font-face { + font-family: "AS Circular"; + font-weight: 300; + font-style: normal; + font-display: fallback; + src: url("https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; +} +@font-face { + font-family: "AS Circular"; + font-weight: 450; + font-style: normal; + font-display: fallback; + src: url("https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; +} +@font-face { + font-family: "AS Circular"; + font-weight: 500; + font-style: normal; + font-display: fallback; + src: url("https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Medium.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; +} +@font-face { + font-family: "Teodor"; + font-weight: 300; + font-style: normal; + font-display: fallback; + src: url("https://resource.alaskaair.net/en-us/assets/font/Teodor-Light.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2") format("woff2"); + unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 450; + font-display: swap; + src: url("https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2") format("woff2"); + unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2") format("woff2"); + unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF; +} +@font-face { + font-family: "Teodor"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2") format("woff2"); + unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+FF00-FFEF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2") format("woff2"); + unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 450; + font-display: swap; + src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2") format("woff2"); + unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; +} +@font-face { + font-family: "AS Circular"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2") format("woff2"); + unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; +} +@font-face { + font-family: "Teodor"; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2") format("woff2"); + unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; +} +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +/* --------------------------------------------------------------------- */ +/* + * Generates common typography classes for use across all themes. + * These classes are identical across themes and only reference the CSS custom properties. + */ +.body-default { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-default-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-default-font-size); + line-height: var(--wcss-body-default-line-height); +} + +.body-default-emphasized { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-default-emphasized-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-default-emphasized-font-size); + line-height: var(--wcss-body-default-emphasized-line-height); +} + +.body-lg { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-lg-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-lg-font-size); + line-height: var(--wcss-body-lg-line-height); +} + +.body-lg-emphasized { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-lg-emphasized-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-lg-emphasized-font-size); + line-height: var(--wcss-body-lg-emphasized-line-height); +} + +.body-sm { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-sm-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-sm-font-size); + line-height: var(--wcss-body-sm-line-height); +} + +.body-sm-emphasized { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-sm-emphasized-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-sm-emphasized-font-size); + line-height: var(--wcss-body-sm-emphasized-line-height); +} + +.body-xs { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-xs-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-xs-font-size); + line-height: var(--wcss-body-xs-line-height); +} + +.body-xs-emphasized { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-xs-emphasized-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-xs-emphasized-font-size); + line-height: var(--wcss-body-xs-emphasized-line-height); +} + +.body-2xs { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-2xs-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-2xs-font-size); + line-height: var(--wcss-body-2xs-line-height); +} + +.body-2xs-emphasized { + font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); + font-weight: var(--wcss-body-2xs-emphasized-weight); + letter-spacing: var(--wcss-body-letter-spacing); + font-size: var(--wcss-body-2xs-emphasized-font-size); + line-height: var(--wcss-body-2xs-emphasized-line-height); +} + +.display-2xl { + font-family:var(--wcss-display-2xl-family), var(--wcss-display-2xl-family-fallback); + font-weight: var(--wcss-display-2xl-weight); + line-height: var(--wcss-display-2xl-line-height); + font-size: var(--wcss-display-2xl-font-size); + letter-spacing: var(--wcss-display-2xl-letter-spacing); +} + +.display-xl { + font-family:var(--wcss-display-xl-family), var(--wcss-display-xl-family-fallback); + font-weight: var(--wcss-display-xl-weight); + line-height: var(--wcss-display-xl-line-height); + font-size: var(--wcss-display-xl-font-size); + letter-spacing: var(--wcss-display-xl-letter-spacing); +} + +.display-lg { + font-family:var(--wcss-display-lg-family), var(--wcss-display-lg-family-fallback); + font-weight: var(--wcss-display-lg-weight); + line-height: var(--wcss-display-lg-line-height); + font-size: var(--wcss-display-lg-font-size); + letter-spacing: var(--wcss-display-lg-letter-spacing); +} + +.display-md { + font-family:var(--wcss-display-md-family), var(--wcss-display-md-family-fallback); + font-weight: var(--wcss-display-md-weight); + line-height: var(--wcss-display-md-line-height); + font-size: var(--wcss-display-md-font-size); + letter-spacing: var(--wcss-display-md-letter-spacing); +} + +.display-sm { + font-family:var(--wcss-display-sm-family), var(--wcss-display-sm-family-fallback); + font-weight: var(--wcss-display-sm-weight); + line-height: var(--wcss-display-sm-line-height); + font-size: var(--wcss-display-sm-font-size); + letter-spacing: var(--wcss-display-sm-letter-spacing); +} + +.display-xs { + font-family:var(--wcss-display-xs-family), var(--wcss-display-xs-family-fallback); + font-weight: var(--wcss-display-xs-weight); + line-height: var(--wcss-display-xs-line-height); + font-size: var(--wcss-display-xs-font-size); + letter-spacing: var(--wcss-display-xs-letter-spacing); +} + +.heading-xl { + font-family:var(--wcss-heading-xl-family), var(--wcss-heading-xl-family-fallback); + font-weight: var(--wcss-heading-xl-weight); + line-height: var(--wcss-heading-xl-line-height); + font-size: var(--wcss-heading-xl-font-size); + letter-spacing: var(--wcss-heading-xl-letter-spacing); +} + +.heading-lg { + font-family:var(--wcss-heading-lg-family), var(--wcss-heading-lg-family-fallback); + font-weight: var(--wcss-heading-lg-weight); + line-height: var(--wcss-heading-lg-line-height); + font-size: var(--wcss-heading-lg-font-size); + letter-spacing: var(--wcss-heading-lg-letter-spacing); +} + +.heading-md { + font-family:var(--wcss-heading-md-family), var(--wcss-heading-md-family-fallback); + font-weight: var(--wcss-heading-md-weight); + line-height: var(--wcss-heading-md-line-height); + font-size: var(--wcss-heading-md-font-size); + letter-spacing: var(--wcss-heading-md-letter-spacing); +} + +.heading-sm { + font-family:var(--wcss-heading-sm-family), var(--wcss-heading-sm-family-fallback); + font-weight: var(--wcss-heading-sm-weight); + line-height: var(--wcss-heading-sm-line-height); + font-size: var(--wcss-heading-sm-font-size); + letter-spacing: var(--wcss-heading-sm-letter-spacing); +} + +.heading-xs { + font-family:var(--wcss-heading-xs-family), var(--wcss-heading-xs-family-fallback); + font-weight: var(--wcss-heading-xs-weight); + line-height: var(--wcss-heading-xs-line-height); + font-size: var(--wcss-heading-xs-font-size); + letter-spacing: var(--wcss-heading-xs-letter-spacing); +} + +.heading-2xs { + font-family:var(--wcss-heading-2xs-family), var(--wcss-heading-2xs-family-fallback); + font-weight: var(--wcss-heading-2xs-weight); + line-height: var(--wcss-heading-2xs-line-height); + font-size: var(--wcss-heading-2xs-font-size); + letter-spacing: var(--wcss-heading-2xs-letter-spacing); +} + +.accent-2xl { + font-family:var(--wcss-accent-2xl-family), var(--wcss-accent-2xl-family-fallback); + font-weight: var(--wcss-accent-2xl-weight); + line-height: var(--wcss-accent-2xl-line-height); + font-size: var(--wcss-accent-2xl-font-size); + letter-spacing: var(--wcss-accent-2xl-letter-spacing); + text-transform: uppercase; +} + +.accent-xl { + font-family:var(--wcss-accent-xl-family), var(--wcss-accent-xl-family-fallback); + font-weight: var(--wcss-accent-xl-weight); + line-height: var(--wcss-accent-xl-line-height); + font-size: var(--wcss-accent-xl-font-size); + letter-spacing: var(--wcss-accent-xl-letter-spacing); + text-transform: uppercase; +} + +.accent-lg { + font-family:var(--wcss-accent-lg-family), var(--wcss-accent-lg-family-fallback); + font-weight: var(--wcss-accent-lg-weight); + line-height: var(--wcss-accent-lg-line-height); + font-size: var(--wcss-accent-lg-font-size); + letter-spacing: var(--wcss-accent-lg-letter-spacing); + text-transform: uppercase; +} + +.accent-md { + font-family:var(--wcss-accent-md-family), var(--wcss-accent-md-family-fallback); + font-weight: var(--wcss-accent-md-weight); + line-height: var(--wcss-accent-md-line-height); + font-size: var(--wcss-accent-md-font-size); + letter-spacing: var(--wcss-accent-md-letter-spacing); + text-transform: uppercase; +} + +.accent-sm { + font-family:var(--wcss-accent-sm-family), var(--wcss-accent-sm-family-fallback); + font-weight: var(--wcss-accent-sm-weight); + line-height: var(--wcss-accent-sm-line-height); + font-size: var(--wcss-accent-sm-font-size); + letter-spacing: var(--wcss-accent-sm-letter-spacing); + text-transform: uppercase; +} + +.accent-xs { + font-family:var(--wcss-accent-xs-family), var(--wcss-accent-xs-family-fallback); + font-weight: var(--wcss-accent-xs-weight); + line-height: var(--wcss-accent-xs-line-height); + font-size: var(--wcss-accent-xs-font-size); + letter-spacing: var(--wcss-accent-xs-letter-spacing); + text-transform: uppercase; +} + +.accent-2xs { + font-family:var(--wcss-accent-2xs-family), var(--wcss-accent-2xs-family-fallback); + font-weight: var(--wcss-accent-2xs-weight); + line-height: var(--wcss-accent-2xs-line-height); + font-size: var(--wcss-accent-2xs-font-size); + letter-spacing: var(--wcss-accent-2xs-letter-spacing); + text-transform: uppercase; +} \ No newline at end of file diff --git a/dist/bundled/themes/atmos.global.min.css b/dist/bundled/themes/atmos.global.min.css new file mode 100644 index 00000000..9d3e1d37 --- /dev/null +++ b/dist/bundled/themes/atmos.global.min.css @@ -0,0 +1,5 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#101d2c;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:450;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#101d2c}.hyperlink:focus-visible{outline-color:#101d2c;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#005fa7;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#faf9f5}@media (hover:hover){.hyperlink--ondark:hover{color:#cfe0ef}}.hyperlink--ondark:visited{color:#faf9f5}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:450;letter-spacing:0;line-height:1rem}.fineprint{color:#6a717c;font-family:"AS Circular",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Book.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/ASCircularWeb-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Teodor";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/en-us/assets/font/Teodor-Light.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Teodor";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-300.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:450;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"AS Circular";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Teodor";font-style:normal;font-weight:300;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-300.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root,[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file diff --git a/dist/bundled/themes/hawaiian.global.css b/dist/bundled/themes/hawaiian.global.css index 18b7a588..4c1bbb4a 100644 --- a/dist/bundled/themes/hawaiian.global.css +++ b/dist/bundled/themes/hawaiian.global.css @@ -186,7 +186,12 @@ small, src: url("https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2") format("woff2"); unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; } -:root { +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { --wcss-body-family: "Slate Pro"; --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --wcss-body-letter-spacing: 0; @@ -295,48 +300,506 @@ small, --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); --wcss-accent-2xl-family: "Slate Pro"; --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-2xl-letter-spacing: ; + --wcss-accent-2xl-letter-spacing: normal; --wcss-accent-2xl-weight: 400; --wcss-accent-2xl-line-height: 1; --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); --wcss-accent-xl-family: "Slate Pro"; --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-xl-letter-spacing: ; + --wcss-accent-xl-letter-spacing: normal; --wcss-accent-xl-weight: 400; --wcss-accent-xl-line-height: 1.3; --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); --wcss-accent-lg-family: "Slate Pro"; --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-lg-letter-spacing: ; + --wcss-accent-lg-letter-spacing: normal; --wcss-accent-lg-weight: 400; --wcss-accent-lg-line-height: 1.3; --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); --wcss-accent-md-family: "Slate Pro"; --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-md-letter-spacing: ; + --wcss-accent-md-letter-spacing: normal; --wcss-accent-md-weight: 500; --wcss-accent-md-line-height: 1.3; --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); --wcss-accent-sm-family: "Slate Pro"; --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-sm-letter-spacing: ; + --wcss-accent-sm-letter-spacing: normal; --wcss-accent-sm-weight: 500; --wcss-accent-sm-line-height: 1.3; --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); --wcss-accent-xs-family: "Slate Pro"; --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-xs-letter-spacing: ; + --wcss-accent-xs-letter-spacing: normal; --wcss-accent-xs-weight: 500; --wcss-accent-xs-line-height: 1.3; --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); --wcss-accent-2xs-family: "Slate Pro"; --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; - --wcss-accent-2xs-letter-spacing: ; + --wcss-accent-2xs-letter-spacing: normal; --wcss-accent-2xs-weight: 400; --wcss-accent-2xs-line-height: 1.3; --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); } +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +/* --------------------------------------------------------------------- */ +/* + * Generates common typography classes for use across all themes. + * These classes are identical across themes and only reference the CSS custom properties. + */ .body-default { font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); font-weight: var(--wcss-body-default-weight); @@ -518,6 +981,7 @@ small, font-weight: var(--wcss-accent-2xl-weight); line-height: var(--wcss-accent-2xl-line-height); font-size: var(--wcss-accent-2xl-font-size); + letter-spacing: var(--wcss-accent-2xl-letter-spacing); text-transform: uppercase; } @@ -526,6 +990,7 @@ small, font-weight: var(--wcss-accent-xl-weight); line-height: var(--wcss-accent-xl-line-height); font-size: var(--wcss-accent-xl-font-size); + letter-spacing: var(--wcss-accent-xl-letter-spacing); text-transform: uppercase; } @@ -534,6 +999,7 @@ small, font-weight: var(--wcss-accent-lg-weight); line-height: var(--wcss-accent-lg-line-height); font-size: var(--wcss-accent-lg-font-size); + letter-spacing: var(--wcss-accent-lg-letter-spacing); text-transform: uppercase; } @@ -542,6 +1008,7 @@ small, font-weight: var(--wcss-accent-md-weight); line-height: var(--wcss-accent-md-line-height); font-size: var(--wcss-accent-md-font-size); + letter-spacing: var(--wcss-accent-md-letter-spacing); text-transform: uppercase; } @@ -550,6 +1017,7 @@ small, font-weight: var(--wcss-accent-sm-weight); line-height: var(--wcss-accent-sm-line-height); font-size: var(--wcss-accent-sm-font-size); + letter-spacing: var(--wcss-accent-sm-letter-spacing); text-transform: uppercase; } @@ -558,6 +1026,7 @@ small, font-weight: var(--wcss-accent-xs-weight); line-height: var(--wcss-accent-xs-line-height); font-size: var(--wcss-accent-xs-font-size); + letter-spacing: var(--wcss-accent-xs-letter-spacing); text-transform: uppercase; } @@ -566,5 +1035,6 @@ small, font-weight: var(--wcss-accent-2xs-weight); line-height: var(--wcss-accent-2xs-line-height); font-size: var(--wcss-accent-2xs-font-size); + letter-spacing: var(--wcss-accent-2xs-letter-spacing); text-transform: uppercase; } \ No newline at end of file diff --git a/dist/bundled/themes/hawaiian.global.min.css b/dist/bundled/themes/hawaiian.global.min.css index 86b449c7..c0bc62d8 100644 --- a/dist/bundled/themes/hawaiian.global.min.css +++ b/dist/bundled/themes/hawaiian.global.min.css @@ -2,4 +2,4 @@ * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license * See LICENSE in the project root for license information. */ -:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#000;font-family:"Slate Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:400;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#ce0c88}.hyperlink:focus-visible{outline-color:#463c8f;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#831a57;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#fff}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:400;letter-spacing:0;line-height:1rem}.fineprint{color:#3d3d3d;font-family:"Slate Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/en-us/assets/font/ChronicleDisplay-Semibold.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/en-us/assets/font/SlatePro-Regular.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/SlatePro-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v55-japanese-600.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-600.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing: ;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing: ;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing: ;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing: ;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing: ;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing: ;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing: ;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file +:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:1rem;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.baseType,body{color:#000;font-family:"Slate Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-variant-ligatures:no-common-ligatures;font-weight:400;letter-spacing:0;line-height:1.5rem;margin:0}.baseParagraph{line-height:1.5rem;margin:0 0 1rem}.baseParagraph .hyperlink,.hyperlink{text-decoration:underline}.hyperlink{border-radius:3px;outline-color:transparent;outline-offset:unset;outline-style:solid;outline-width:1px;transition:all .15s ease}.hyperlink,.hyperlink:visited{color:#ce0c88}.hyperlink:focus-visible{outline-color:#463c8f;outline-offset:.125rem}@media (hover:hover){.hyperlink:hover{color:#831a57;text-decoration:none}}.hyperlink--nav{display:block;text-decoration:none}@media (hover:hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-offset:unset;outline-width:.25rem}.hyperlink--ondark{color:#fff}@media (hover:hover){.hyperlink--ondark:hover{color:#fff}}.hyperlink--ondark:visited{color:#fff}img{max-width:100%}.fineprint,.type--small,small{font-size:.75rem;font-weight:400;letter-spacing:0;line-height:1rem}.fineprint{color:#3d3d3d;font-family:"Slate Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}@font-face{font-display:fallback;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/en-us/assets/font/ChronicleDisplay-Semibold.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/en-us/assets/font/SlatePro-Regular.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:fallback;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/en-us/assets/font/SlatePro-Medium.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF}@font-face{font-display:swap;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v55-japanese-600.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-400.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ja-jp/assets/font/noto-sans-jp-v54-japanese-500.woff2) format("woff2");unicode-range:U+3000-303F,U+3040-309F,U+30A0-30FF,U+31F0-31FF,U+4E00-9FFF,U+FF00-FFEF}@font-face{font-display:swap;font-family:"Chronicle Display";font-style:normal;font-weight:600;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-600.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:400;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-400.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}@font-face{font-display:swap;font-family:"Slate Pro";font-style:normal;font-weight:500;src:url(https://resource.alaskaair.net/ko-kr/assets/font/noto-sans-kr-v38-korean-500.woff2) format("woff2");unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}:root,[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}.body-default{font-size:var(--wcss-body-default-font-size);font-weight:var(--wcss-body-default-weight);line-height:var(--wcss-body-default-line-height)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size);font-weight:var(--wcss-body-default-emphasized-weight);line-height:var(--wcss-body-default-emphasized-line-height)}.body-lg{font-size:var(--wcss-body-lg-font-size);font-weight:var(--wcss-body-lg-weight);line-height:var(--wcss-body-lg-line-height)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size);font-weight:var(--wcss-body-lg-emphasized-weight);line-height:var(--wcss-body-lg-emphasized-line-height)}.body-sm{font-size:var(--wcss-body-sm-font-size);font-weight:var(--wcss-body-sm-weight);line-height:var(--wcss-body-sm-line-height)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size);font-weight:var(--wcss-body-sm-emphasized-weight);line-height:var(--wcss-body-sm-emphasized-line-height)}.body-xs{font-size:var(--wcss-body-xs-font-size);font-weight:var(--wcss-body-xs-weight);line-height:var(--wcss-body-xs-line-height)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size);font-weight:var(--wcss-body-xs-emphasized-weight);line-height:var(--wcss-body-xs-emphasized-line-height)}.body-2xs{font-size:var(--wcss-body-2xs-font-size);font-weight:var(--wcss-body-2xs-weight);line-height:var(--wcss-body-2xs-line-height)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family),var(--wcss-body-family-fallback);letter-spacing:var(--wcss-body-letter-spacing)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size);font-weight:var(--wcss-body-2xs-emphasized-weight);line-height:var(--wcss-body-2xs-emphasized-line-height)}.display-2xl{font-family:var(--wcss-display-2xl-family),var(--wcss-display-2xl-family-fallback);font-size:var(--wcss-display-2xl-font-size);font-weight:var(--wcss-display-2xl-weight);letter-spacing:var(--wcss-display-2xl-letter-spacing);line-height:var(--wcss-display-2xl-line-height)}.display-xl{font-family:var(--wcss-display-xl-family),var(--wcss-display-xl-family-fallback);font-size:var(--wcss-display-xl-font-size);font-weight:var(--wcss-display-xl-weight);letter-spacing:var(--wcss-display-xl-letter-spacing);line-height:var(--wcss-display-xl-line-height)}.display-lg{font-family:var(--wcss-display-lg-family),var(--wcss-display-lg-family-fallback);font-size:var(--wcss-display-lg-font-size);font-weight:var(--wcss-display-lg-weight);letter-spacing:var(--wcss-display-lg-letter-spacing);line-height:var(--wcss-display-lg-line-height)}.display-md{font-family:var(--wcss-display-md-family),var(--wcss-display-md-family-fallback);font-size:var(--wcss-display-md-font-size);font-weight:var(--wcss-display-md-weight);letter-spacing:var(--wcss-display-md-letter-spacing);line-height:var(--wcss-display-md-line-height)}.display-sm{font-family:var(--wcss-display-sm-family),var(--wcss-display-sm-family-fallback);font-size:var(--wcss-display-sm-font-size);font-weight:var(--wcss-display-sm-weight);letter-spacing:var(--wcss-display-sm-letter-spacing);line-height:var(--wcss-display-sm-line-height)}.display-xs{font-family:var(--wcss-display-xs-family),var(--wcss-display-xs-family-fallback);font-size:var(--wcss-display-xs-font-size);font-weight:var(--wcss-display-xs-weight);letter-spacing:var(--wcss-display-xs-letter-spacing);line-height:var(--wcss-display-xs-line-height)}.heading-xl{font-family:var(--wcss-heading-xl-family),var(--wcss-heading-xl-family-fallback);font-size:var(--wcss-heading-xl-font-size);font-weight:var(--wcss-heading-xl-weight);letter-spacing:var(--wcss-heading-xl-letter-spacing);line-height:var(--wcss-heading-xl-line-height)}.heading-lg{font-family:var(--wcss-heading-lg-family),var(--wcss-heading-lg-family-fallback);font-size:var(--wcss-heading-lg-font-size);font-weight:var(--wcss-heading-lg-weight);letter-spacing:var(--wcss-heading-lg-letter-spacing);line-height:var(--wcss-heading-lg-line-height)}.heading-md{font-family:var(--wcss-heading-md-family),var(--wcss-heading-md-family-fallback);font-size:var(--wcss-heading-md-font-size);font-weight:var(--wcss-heading-md-weight);letter-spacing:var(--wcss-heading-md-letter-spacing);line-height:var(--wcss-heading-md-line-height)}.heading-sm{font-family:var(--wcss-heading-sm-family),var(--wcss-heading-sm-family-fallback);font-size:var(--wcss-heading-sm-font-size);font-weight:var(--wcss-heading-sm-weight);letter-spacing:var(--wcss-heading-sm-letter-spacing);line-height:var(--wcss-heading-sm-line-height)}.heading-xs{font-family:var(--wcss-heading-xs-family),var(--wcss-heading-xs-family-fallback);font-size:var(--wcss-heading-xs-font-size);font-weight:var(--wcss-heading-xs-weight);letter-spacing:var(--wcss-heading-xs-letter-spacing);line-height:var(--wcss-heading-xs-line-height)}.heading-2xs{font-family:var(--wcss-heading-2xs-family),var(--wcss-heading-2xs-family-fallback);font-size:var(--wcss-heading-2xs-font-size);font-weight:var(--wcss-heading-2xs-weight);letter-spacing:var(--wcss-heading-2xs-letter-spacing);line-height:var(--wcss-heading-2xs-line-height)}.accent-2xl{font-family:var(--wcss-accent-2xl-family),var(--wcss-accent-2xl-family-fallback);font-size:var(--wcss-accent-2xl-font-size);font-weight:var(--wcss-accent-2xl-weight);letter-spacing:var(--wcss-accent-2xl-letter-spacing);line-height:var(--wcss-accent-2xl-line-height)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family),var(--wcss-accent-xl-family-fallback);font-size:var(--wcss-accent-xl-font-size);font-weight:var(--wcss-accent-xl-weight);letter-spacing:var(--wcss-accent-xl-letter-spacing);line-height:var(--wcss-accent-xl-line-height)}.accent-lg{font-family:var(--wcss-accent-lg-family),var(--wcss-accent-lg-family-fallback);font-size:var(--wcss-accent-lg-font-size);font-weight:var(--wcss-accent-lg-weight);letter-spacing:var(--wcss-accent-lg-letter-spacing);line-height:var(--wcss-accent-lg-line-height)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family),var(--wcss-accent-md-family-fallback);font-size:var(--wcss-accent-md-font-size);font-weight:var(--wcss-accent-md-weight);letter-spacing:var(--wcss-accent-md-letter-spacing);line-height:var(--wcss-accent-md-line-height)}.accent-sm{font-family:var(--wcss-accent-sm-family),var(--wcss-accent-sm-family-fallback);font-size:var(--wcss-accent-sm-font-size);font-weight:var(--wcss-accent-sm-weight);letter-spacing:var(--wcss-accent-sm-letter-spacing);line-height:var(--wcss-accent-sm-line-height)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family),var(--wcss-accent-xs-family-fallback);font-size:var(--wcss-accent-xs-font-size);font-weight:var(--wcss-accent-xs-weight);letter-spacing:var(--wcss-accent-xs-letter-spacing);line-height:var(--wcss-accent-xs-line-height)}.accent-2xs{font-family:var(--wcss-accent-2xs-family),var(--wcss-accent-2xs-family-fallback);font-size:var(--wcss-accent-2xs-font-size);font-weight:var(--wcss-accent-2xs-weight);letter-spacing:var(--wcss-accent-2xs-letter-spacing);line-height:var(--wcss-accent-2xs-line-height);text-transform:uppercase} \ No newline at end of file diff --git a/dist/bundled/type/classes.css b/dist/bundled/type/classes.css index 754f45f3..8f9bfcc5 100644 --- a/dist/bundled/type/classes.css +++ b/dist/bundled/type/classes.css @@ -9,6 +9,11 @@ * Generates common typography classes for use across all themes. * These classes are identical across themes and only reference the CSS custom properties. */ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ .body-default { font-family:var(--wcss-body-family), var(--wcss-body-family-fallback); font-weight: var(--wcss-body-default-weight); diff --git a/dist/bundled/type/themes/alaska-classic.css b/dist/bundled/type/themes/alaska-classic.css new file mode 100644 index 00000000..11d19da9 --- /dev/null +++ b/dist/bundled/type/themes/alaska-classic.css @@ -0,0 +1,614 @@ +@charset "UTF-8"; +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ + +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} \ No newline at end of file diff --git a/dist/bundled/type/themes/alaska-classic.min.css b/dist/bundled/type/themes/alaska-classic.min.css new file mode 100644 index 00000000..4902191c --- /dev/null +++ b/dist/bundled/type/themes/alaska-classic.min.css @@ -0,0 +1,5 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +:root,[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)} \ No newline at end of file diff --git a/dist/bundled/type/themes/alaska.css b/dist/bundled/type/themes/alaska.css new file mode 100644 index 00000000..84b5d4e9 --- /dev/null +++ b/dist/bundled/type/themes/alaska.css @@ -0,0 +1,614 @@ +@charset "UTF-8"; +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ + +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} \ No newline at end of file diff --git a/dist/bundled/type/themes/alaska.min.css b/dist/bundled/type/themes/alaska.min.css new file mode 100644 index 00000000..892e4bb1 --- /dev/null +++ b/dist/bundled/type/themes/alaska.min.css @@ -0,0 +1,5 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +:root,[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)} \ No newline at end of file diff --git a/dist/bundled/type/themes/atmos.css b/dist/bundled/type/themes/atmos.css new file mode 100644 index 00000000..018610ff --- /dev/null +++ b/dist/bundled/type/themes/atmos.css @@ -0,0 +1,614 @@ +@charset "UTF-8"; +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ + +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} \ No newline at end of file diff --git a/dist/bundled/type/themes/atmos.min.css b/dist/bundled/type/themes/atmos.min.css new file mode 100644 index 00000000..fbc1d08e --- /dev/null +++ b/dist/bundled/type/themes/atmos.min.css @@ -0,0 +1,5 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +:root,[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)} \ No newline at end of file diff --git a/dist/bundled/type/themes/hawaiian.css b/dist/bundled/type/themes/hawaiian.css new file mode 100644 index 00000000..96d459c2 --- /dev/null +++ b/dist/bundled/type/themes/hawaiian.css @@ -0,0 +1,614 @@ +@charset "UTF-8"; +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ + +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +:root, [data-aag-theme=aag-theme-ha], [data-aag-theme=aag-theme-ha-type] { + --wcss-body-family: "Slate Pro"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 400; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 400; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 400; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 400; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 400; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "Chronicle Display"; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 600; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "Chronicle Display"; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 600; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "Chronicle Display"; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 600; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "Chronicle Display"; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 600; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "Chronicle Display"; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 600; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "Chronicle Display"; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 600; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "Slate Pro"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 500; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "Slate Pro"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 500; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "Slate Pro"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "Slate Pro"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "Slate Pro"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "Slate Pro"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Slate Pro"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: normal; + --wcss-accent-2xl-weight: 400; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Slate Pro"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: normal; + --wcss-accent-xl-weight: 400; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Slate Pro"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: normal; + --wcss-accent-lg-weight: 400; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Slate Pro"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: normal; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Slate Pro"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: normal; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Slate Pro"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: normal; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Slate Pro"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: normal; + --wcss-accent-2xs-weight: 400; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-as], [data-aag-theme=aag-theme-as-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "Good OT"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "Good OT"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "Good OT"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "Good OT"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "Good OT"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "Good OT"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "Good OT"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-asc], [data-aag-theme=aag-theme-asc-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 700; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 700; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 700; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 700; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 700; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: "AS Circular"; + --wcss-display-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: "AS Circular"; + --wcss-display-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: "AS Circular"; + --wcss-display-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: "AS Circular"; + --wcss-display-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: "AS Circular"; + --wcss-display-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: "AS Circular"; + --wcss-display-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 450; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 450; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 500; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 500; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 500; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 500; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 450; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 450; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 450; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 450; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} + +[data-aag-theme=aag-theme-atm], [data-aag-theme=aag-theme-atm-type] { + --wcss-body-family: "AS Circular"; + --wcss-body-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-body-letter-spacing: 0; + --wcss-body-default-weight: 450; + --wcss-body-default-font-size: 1rem; + --wcss-body-default-line-height: 1.5rem; + --wcss-body-default-emphasized-weight: 500; + --wcss-body-default-emphasized-font-size: 1rem; + --wcss-body-default-emphasized-line-height: 1.5rem; + --wcss-body-lg-weight: 450; + --wcss-body-lg-font-size: 1.125rem; + --wcss-body-lg-line-height: 1.625rem; + --wcss-body-lg-emphasized-weight: 500; + --wcss-body-lg-emphasized-font-size: 1.125rem; + --wcss-body-lg-emphasized-line-height: 1.625rem; + --wcss-body-sm-weight: 450; + --wcss-body-sm-font-size: 0.875rem; + --wcss-body-sm-line-height: 1.25rem; + --wcss-body-sm-emphasized-weight: 500; + --wcss-body-sm-emphasized-font-size: 0.875rem; + --wcss-body-sm-emphasized-line-height: 1.25rem; + --wcss-body-xs-weight: 450; + --wcss-body-xs-font-size: 0.75rem; + --wcss-body-xs-line-height: 1rem; + --wcss-body-xs-emphasized-weight: 500; + --wcss-body-xs-emphasized-font-size: 0.75rem; + --wcss-body-xs-emphasized-line-height: 1rem; + --wcss-body-2xs-weight: 450; + --wcss-body-2xs-font-size: 0.625rem; + --wcss-body-2xs-line-height: 0.875rem; + --wcss-body-2xs-emphasized-weight: 500; + --wcss-body-2xs-emphasized-font-size: 0.625rem; + --wcss-body-2xs-emphasized-line-height: 0.875rem; + --wcss-body-weight: var(--wcss-body-default-weight); + --wcss-display-2xl-family: Teodor; + --wcss-display-2xl-family-fallback: Georgia, serif; + --wcss-display-2xl-letter-spacing: 0; + --wcss-display-2xl-weight: 300; + --wcss-display-2xl-line-height: 1.3; + --wcss-display-2xl-font-size: clamp(3.5rem, 6vw, 5.375rem); + --wcss-display-xl-family: Teodor; + --wcss-display-xl-family-fallback: Georgia, serif; + --wcss-display-xl-letter-spacing: 0; + --wcss-display-xl-weight: 300; + --wcss-display-xl-line-height: 1.3; + --wcss-display-xl-font-size: clamp(3rem, 5.3333333333vw, 4.5rem); + --wcss-display-lg-family: Teodor; + --wcss-display-lg-family-fallback: Georgia, serif; + --wcss-display-lg-letter-spacing: 0; + --wcss-display-lg-weight: 300; + --wcss-display-lg-line-height: 1.3; + --wcss-display-lg-font-size: clamp(2.75rem, 4.6666666667vw, 4rem); + --wcss-display-md-family: Teodor; + --wcss-display-md-family-fallback: Georgia, serif; + --wcss-display-md-letter-spacing: 0; + --wcss-display-md-weight: 300; + --wcss-display-md-line-height: 1.3; + --wcss-display-md-font-size: clamp(2.5rem, 4vw, 3.5rem); + --wcss-display-sm-family: Teodor; + --wcss-display-sm-family-fallback: Georgia, serif; + --wcss-display-sm-letter-spacing: 0; + --wcss-display-sm-weight: 300; + --wcss-display-sm-line-height: 1.3; + --wcss-display-sm-font-size: clamp(2rem, 3.6666666667vw, 3rem); + --wcss-display-xs-family: Teodor; + --wcss-display-xs-family-fallback: Georgia, serif; + --wcss-display-xs-letter-spacing: 0; + --wcss-display-xs-weight: 300; + --wcss-display-xs-line-height: 1.3; + --wcss-display-xs-font-size: clamp(1.75rem, 3vw, 2.375rem); + --wcss-heading-xl-family: "AS Circular"; + --wcss-heading-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xl-letter-spacing: 0; + --wcss-heading-xl-weight: 300; + --wcss-heading-xl-line-height: 1.3; + --wcss-heading-xl-font-size: clamp(2rem, 3vw, 2.5rem); + --wcss-heading-lg-family: "AS Circular"; + --wcss-heading-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-lg-letter-spacing: 0; + --wcss-heading-lg-weight: 300; + --wcss-heading-lg-line-height: 1.3; + --wcss-heading-lg-font-size: clamp(1.75rem, 2.6666666667vw, 2.25rem); + --wcss-heading-md-family: "AS Circular"; + --wcss-heading-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-md-letter-spacing: 0; + --wcss-heading-md-weight: 300; + --wcss-heading-md-line-height: 1.3; + --wcss-heading-md-font-size: clamp(1.625rem, 2.3333333333vw, 1.75rem); + --wcss-heading-sm-family: "AS Circular"; + --wcss-heading-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-sm-letter-spacing: 0; + --wcss-heading-sm-weight: 300; + --wcss-heading-sm-line-height: 1.3; + --wcss-heading-sm-font-size: clamp(1.375rem, 2vw, 1.5rem); + --wcss-heading-xs-family: "AS Circular"; + --wcss-heading-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-xs-letter-spacing: 0; + --wcss-heading-xs-weight: 300; + --wcss-heading-xs-line-height: 1.3; + --wcss-heading-xs-font-size: clamp(1.25rem, 1.6666666667vw, 1.25rem); + --wcss-heading-2xs-family: "AS Circular"; + --wcss-heading-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-heading-2xs-letter-spacing: 0; + --wcss-heading-2xs-weight: 300; + --wcss-heading-2xs-line-height: 1.3; + --wcss-heading-2xs-font-size: clamp(1.125rem, 1.5vw, 1.125rem); + --wcss-accent-2xl-family: "AS Circular"; + --wcss-accent-2xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xl-letter-spacing: 0.05em; + --wcss-accent-2xl-weight: 500; + --wcss-accent-2xl-line-height: 1; + --wcss-accent-2xl-font-size: clamp(2rem, 3.1666666667vw, 2.375rem); + --wcss-accent-xl-family: "AS Circular"; + --wcss-accent-xl-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xl-letter-spacing: 0.05em; + --wcss-accent-xl-weight: 500; + --wcss-accent-xl-line-height: 1.3; + --wcss-accent-xl-font-size: clamp(1.625rem, 2.3333333333vw, 2rem); + --wcss-accent-lg-family: "AS Circular"; + --wcss-accent-lg-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-lg-letter-spacing: 0.05em; + --wcss-accent-lg-weight: 500; + --wcss-accent-lg-line-height: 1.3; + --wcss-accent-lg-font-size: clamp(1.5rem, 2.1666666667vw, 1.75rem); + --wcss-accent-md-family: "AS Circular"; + --wcss-accent-md-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-md-letter-spacing: 0.05em; + --wcss-accent-md-weight: 500; + --wcss-accent-md-line-height: 1.3; + --wcss-accent-md-font-size: clamp(1.375rem, 1.8333333333vw, 1.5rem); + --wcss-accent-sm-family: "AS Circular"; + --wcss-accent-sm-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-sm-letter-spacing: 0.05em; + --wcss-accent-sm-weight: 500; + --wcss-accent-sm-line-height: 1.3; + --wcss-accent-sm-font-size: clamp(1.125rem, 1.5vw, 1.25rem); + --wcss-accent-xs-family: "AS Circular"; + --wcss-accent-xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-xs-letter-spacing: 0.1em; + --wcss-accent-xs-weight: 500; + --wcss-accent-xs-line-height: 1.3; + --wcss-accent-xs-font-size: clamp(1rem, 1.3333333333vw, 1rem); + --wcss-accent-2xs-family: "AS Circular"; + --wcss-accent-2xs-family-fallback: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; + --wcss-accent-2xs-letter-spacing: 0.1em; + --wcss-accent-2xs-weight: 500; + --wcss-accent-2xs-line-height: 1.3; + --wcss-accent-2xs-font-size: clamp(0.875rem, 1.1666666667vw, 0.875rem); +} \ No newline at end of file diff --git a/dist/bundled/type/themes/hawaiian.min.css b/dist/bundled/type/themes/hawaiian.min.css new file mode 100644 index 00000000..81af3b10 --- /dev/null +++ b/dist/bundled/type/themes/hawaiian.min.css @@ -0,0 +1,5 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +:root,[data-aag-theme=aag-theme-ha-type],[data-aag-theme=aag-theme-ha]{--wcss-body-family:"Slate Pro";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:400;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:400;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:400;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:400;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:400;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"Chronicle Display";--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:600;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"Chronicle Display";--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:600;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"Chronicle Display";--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:600;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"Chronicle Display";--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:600;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"Chronicle Display";--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:600;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"Chronicle Display";--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:600;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"Slate Pro";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:500;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"Slate Pro";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:500;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"Slate Pro";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"Slate Pro";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"Slate Pro";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"Slate Pro";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Slate Pro";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:normal;--wcss-accent-2xl-weight:400;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Slate Pro";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:normal;--wcss-accent-xl-weight:400;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Slate Pro";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:normal;--wcss-accent-lg-weight:400;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Slate Pro";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:normal;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Slate Pro";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:normal;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Slate Pro";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:normal;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Slate Pro";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:normal;--wcss-accent-2xs-weight:400;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-as-type],[data-aag-theme=aag-theme-as]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"Good OT";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"Good OT";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"Good OT";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"Good OT";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"Good OT";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"Good OT";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"Good OT";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-asc-type],[data-aag-theme=aag-theme-asc]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:700;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:700;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:700;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:700;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:700;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:"AS Circular";--wcss-display-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:"AS Circular";--wcss-display-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:"AS Circular";--wcss-display-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:"AS Circular";--wcss-display-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:"AS Circular";--wcss-display-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:"AS Circular";--wcss-display-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:450;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:450;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:500;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:500;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:500;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:500;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:450;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:450;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:450;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:450;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)}[data-aag-theme=aag-theme-atm-type],[data-aag-theme=aag-theme-atm]{--wcss-body-family:"AS Circular";--wcss-body-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-body-letter-spacing:0;--wcss-body-default-weight:450;--wcss-body-default-font-size:1rem;--wcss-body-default-line-height:1.5rem;--wcss-body-default-emphasized-weight:500;--wcss-body-default-emphasized-font-size:1rem;--wcss-body-default-emphasized-line-height:1.5rem;--wcss-body-lg-weight:450;--wcss-body-lg-font-size:1.125rem;--wcss-body-lg-line-height:1.625rem;--wcss-body-lg-emphasized-weight:500;--wcss-body-lg-emphasized-font-size:1.125rem;--wcss-body-lg-emphasized-line-height:1.625rem;--wcss-body-sm-weight:450;--wcss-body-sm-font-size:0.875rem;--wcss-body-sm-line-height:1.25rem;--wcss-body-sm-emphasized-weight:500;--wcss-body-sm-emphasized-font-size:0.875rem;--wcss-body-sm-emphasized-line-height:1.25rem;--wcss-body-xs-weight:450;--wcss-body-xs-font-size:0.75rem;--wcss-body-xs-line-height:1rem;--wcss-body-xs-emphasized-weight:500;--wcss-body-xs-emphasized-font-size:0.75rem;--wcss-body-xs-emphasized-line-height:1rem;--wcss-body-2xs-weight:450;--wcss-body-2xs-font-size:0.625rem;--wcss-body-2xs-line-height:0.875rem;--wcss-body-2xs-emphasized-weight:500;--wcss-body-2xs-emphasized-font-size:0.625rem;--wcss-body-2xs-emphasized-line-height:0.875rem;--wcss-body-weight:var(--wcss-body-default-weight);--wcss-display-2xl-family:Teodor;--wcss-display-2xl-family-fallback:Georgia,serif;--wcss-display-2xl-letter-spacing:0;--wcss-display-2xl-weight:300;--wcss-display-2xl-line-height:1.3;--wcss-display-2xl-font-size:clamp(3.5rem,6vw,5.375rem);--wcss-display-xl-family:Teodor;--wcss-display-xl-family-fallback:Georgia,serif;--wcss-display-xl-letter-spacing:0;--wcss-display-xl-weight:300;--wcss-display-xl-line-height:1.3;--wcss-display-xl-font-size:clamp(3rem,5.3333333333vw,4.5rem);--wcss-display-lg-family:Teodor;--wcss-display-lg-family-fallback:Georgia,serif;--wcss-display-lg-letter-spacing:0;--wcss-display-lg-weight:300;--wcss-display-lg-line-height:1.3;--wcss-display-lg-font-size:clamp(2.75rem,4.6666666667vw,4rem);--wcss-display-md-family:Teodor;--wcss-display-md-family-fallback:Georgia,serif;--wcss-display-md-letter-spacing:0;--wcss-display-md-weight:300;--wcss-display-md-line-height:1.3;--wcss-display-md-font-size:clamp(2.5rem,4vw,3.5rem);--wcss-display-sm-family:Teodor;--wcss-display-sm-family-fallback:Georgia,serif;--wcss-display-sm-letter-spacing:0;--wcss-display-sm-weight:300;--wcss-display-sm-line-height:1.3;--wcss-display-sm-font-size:clamp(2rem,3.6666666667vw,3rem);--wcss-display-xs-family:Teodor;--wcss-display-xs-family-fallback:Georgia,serif;--wcss-display-xs-letter-spacing:0;--wcss-display-xs-weight:300;--wcss-display-xs-line-height:1.3;--wcss-display-xs-font-size:clamp(1.75rem,3vw,2.375rem);--wcss-heading-xl-family:"AS Circular";--wcss-heading-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xl-letter-spacing:0;--wcss-heading-xl-weight:300;--wcss-heading-xl-line-height:1.3;--wcss-heading-xl-font-size:clamp(2rem,3vw,2.5rem);--wcss-heading-lg-family:"AS Circular";--wcss-heading-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-lg-letter-spacing:0;--wcss-heading-lg-weight:300;--wcss-heading-lg-line-height:1.3;--wcss-heading-lg-font-size:clamp(1.75rem,2.6666666667vw,2.25rem);--wcss-heading-md-family:"AS Circular";--wcss-heading-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-md-letter-spacing:0;--wcss-heading-md-weight:300;--wcss-heading-md-line-height:1.3;--wcss-heading-md-font-size:clamp(1.625rem,2.3333333333vw,1.75rem);--wcss-heading-sm-family:"AS Circular";--wcss-heading-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-sm-letter-spacing:0;--wcss-heading-sm-weight:300;--wcss-heading-sm-line-height:1.3;--wcss-heading-sm-font-size:clamp(1.375rem,2vw,1.5rem);--wcss-heading-xs-family:"AS Circular";--wcss-heading-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-xs-letter-spacing:0;--wcss-heading-xs-weight:300;--wcss-heading-xs-line-height:1.3;--wcss-heading-xs-font-size:clamp(1.25rem,1.6666666667vw,1.25rem);--wcss-heading-2xs-family:"AS Circular";--wcss-heading-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-heading-2xs-letter-spacing:0;--wcss-heading-2xs-weight:300;--wcss-heading-2xs-line-height:1.3;--wcss-heading-2xs-font-size:clamp(1.125rem,1.5vw,1.125rem);--wcss-accent-2xl-family:"AS Circular";--wcss-accent-2xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xl-letter-spacing:0.05em;--wcss-accent-2xl-weight:500;--wcss-accent-2xl-line-height:1;--wcss-accent-2xl-font-size:clamp(2rem,3.1666666667vw,2.375rem);--wcss-accent-xl-family:"AS Circular";--wcss-accent-xl-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xl-letter-spacing:0.05em;--wcss-accent-xl-weight:500;--wcss-accent-xl-line-height:1.3;--wcss-accent-xl-font-size:clamp(1.625rem,2.3333333333vw,2rem);--wcss-accent-lg-family:"AS Circular";--wcss-accent-lg-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-lg-letter-spacing:0.05em;--wcss-accent-lg-weight:500;--wcss-accent-lg-line-height:1.3;--wcss-accent-lg-font-size:clamp(1.5rem,2.1666666667vw,1.75rem);--wcss-accent-md-family:"AS Circular";--wcss-accent-md-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-md-letter-spacing:0.05em;--wcss-accent-md-weight:500;--wcss-accent-md-line-height:1.3;--wcss-accent-md-font-size:clamp(1.375rem,1.8333333333vw,1.5rem);--wcss-accent-sm-family:"AS Circular";--wcss-accent-sm-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-sm-letter-spacing:0.05em;--wcss-accent-sm-weight:500;--wcss-accent-sm-line-height:1.3;--wcss-accent-sm-font-size:clamp(1.125rem,1.5vw,1.25rem);--wcss-accent-xs-family:"AS Circular";--wcss-accent-xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-xs-letter-spacing:0.1em;--wcss-accent-xs-weight:500;--wcss-accent-xs-line-height:1.3;--wcss-accent-xs-font-size:clamp(1rem,1.3333333333vw,1rem);--wcss-accent-2xs-family:"AS Circular";--wcss-accent-2xs-family-fallback:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;--wcss-accent-2xs-letter-spacing:0.1em;--wcss-accent-2xs-weight:500;--wcss-accent-2xs-line-height:1.3;--wcss-accent-2xs-font-size:clamp(0.875rem,1.1666666667vw,0.875rem)} \ No newline at end of file diff --git a/dist/elementDemoStyles.css b/dist/elementDemoStyles.css index a606a403..c812a0d2 100644 --- a/dist/elementDemoStyles.css +++ b/dist/elementDemoStyles.css @@ -1,4 +1,3 @@ -/* stylelint-disable no-invalid-position-at-import-rule */ .container { display: grid; margin-left: auto; diff --git a/docs/index.html b/docs/index.html index ef804fcc..26a7821e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,89 +1,89 @@ @aurodesignsystem/webcorestylesheets - v11.1.3

accessibility

css

:focus

accessibility
css
:focus
:focus { ... }
Description
Global selector to address box-model and default :focus pseudo elements. Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
Check current browser support for :focus-visible on Can I Use.
Example
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";
&:focus-visible
&:focus-visible { ... }
Description
Global setting for the display of focus-visible accessibility interaction. Can I Use.
This is a OPT-IN feature, support is NOT added by default. Users MUST subscribe to Sass import described below.
The focus-visible Sass file MUST be imported BEFORE the essentials Sass file. Sass load order is IMPORTANT. See example below.
Manage $scope option.
Example
Default selector(s)
*:focus-visible {}
Selector(s) when $scope: true;
.auro *:focus-visible {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
it's important to import focus-visible BEFORE essentials
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
animation
mixins
auro_transition
:focus { ... }
Description
Global selector to address box-model and default :focus pseudo elements. Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
Check current browser support for :focus-visible on Can I Use.
Example
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core" as *;
&:focus-visible
&:focus-visible { ... }
Description
Global setting for the display of focus-visible accessibility interaction. Can I Use.
This is a OPT-IN feature, support is NOT added by default. Users MUST subscribe to Sass import described below.
The focus-visible Sass file MUST be imported BEFORE the essentials Sass file. Sass load order is IMPORTANT. See example below.
Manage $scope option.
Example
Default selector(s)
*:focus-visible {}
Selector(s) when $scope: true;
.auro *:focus-visible {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible" as *;
it's important to import focus-visible BEFORE essentials
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
animation
mixins
auro_transition
@mixin auro_transition($property: $ds-animation-default-property, $duration: $ds-animation-default-duration, $timing: $ds-animation-default-timing, $delay: null) { ... }
Description
Provides a way to control animation speed when changing CSS properties.
Defaults are set by baseline Design Tokens
Compatibility: css-transitions
Parameters
NameDescriptionTypeDefault value
$property
Specifies the name of the CSS property the transition effect is for
String$ds-animation-default-property
$duration
Specifies how many seconds or milliseconds a transition effect takes to complete
String$ds-animation-default-duration
$timing
Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)
String$ds-animation-default-timing
$delay
Specifies a delay (in seconds) for the transition effect
Stringnull
Example
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation";
Using mixin with default values;
.foo {
+ }" data-collapsed="@mixin auro_transition($property: $ds-animation-default-property, $duration: $ds-animation-default-duration, $timing: $ds-animation-default-timing, $delay: null) { ... }">@mixin auro_transition($property: $ds-animation-default-property, $duration: $ds-animation-default-duration, $timing: $ds-animation-default-timing, $delay: null) { ... }
Description
Provides a way to control animation speed when changing CSS properties.
Defaults are set by baseline Design Tokens
Compatibility: css-transitions
Parameters
NameDescriptionTypeDefault value
$property
Specifies the name of the CSS property the transition effect is for
String$ds-animation-default-property
$duration
Specifies how many seconds or milliseconds a transition effect takes to complete
String$ds-animation-default-duration
$timing
Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)
String$ds-animation-default-timing
$delay
Specifies a delay (in seconds) for the transition effect
Stringnull
Example
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation" as *;
Using mixin with default values;
.foo {
   @include auro_transition;
 }
component-support
css
:host
:host { ... }
Description
Component a11y support for :host
For use with auroElement.js base class and web component development
Example
Default selector
:host {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
:host([hidden]:not(:focus):not(:active))
:host { ... }
Description
Component a11y support for :host
For use with auroElement.js base class and web component development
Example
Default selector
:host {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *;
:host([hidden]:not(:focus):not(:active))
:host([hidden]:not(:focus):not(:active)) { ... }
Description
Component a11y support for :host selector with hidden attribute
For use with auroElement.js base class and web component development
Example
Default selector
:host([hidden]:not(:focus):not(:active)) {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
:host([hiddenVisually]:not(:focus):not(:active))
:host([hidden]:not(:focus):not(:active)) { ... }
Description
Component a11y support for :host selector with hidden attribute
For use with auroElement.js base class and web component development
Example
Default selector
:host([hidden]:not(:focus):not(:active)) {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *;
:host([hiddenVisually]:not(:focus):not(:active))
:host([hiddenVisually]:not(:focus):not(:active)) { ... }
Description
Component a11y support for :host selector with hiddenVisually attribute
For use with auroElement.js base class and web component development
Example
Default selector
:host([hiddenVisually]:not(:focus):not(:active)) {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
container
css
#{$scope}.#{$prefix}container
:host([hiddenVisually]:not(:focus):not(:active)) { ... }
Description
Component a11y support for :host selector with hiddenVisually attribute
For use with auroElement.js base class and web component development
Example
Default selector
:host([hiddenVisually]:not(:focus):not(:active)) {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *;
container
css
#{manageScope.$scope}.#{manageScope.$prefix}container
#{$scope}.#{$prefix}container { ... }
Description
Container class
Manage $scope and $prefix options.
Example
Default selector(s)
.container {}
Selector(s) when $scope: true;
.auro .container {}
Selector(s) when $prefix: true;
.auro_container {}
Example HTML selector use
<element class="container"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
#{$scope}.#{$prefix}pagecontainer
#{manageScope.$scope}.#{manageScope.$prefix}container { ... }
Description
Container class
Manage $scope and $prefix options.
Example
Default selector(s)
.container {}
Selector(s) when $scope: true;
.auro .container {}
Selector(s) when $prefix: true;
.auro_container {}
Example HTML selector use
<element class="container"> ... </element>
import file;
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
#{manageScope.$scope}.#{manageScope.$prefix}pagecontainer
#{$scope}.#{$prefix}pagecontainer { ... }
Description
Container class
Manage $scope and $prefix options.
Example
Default selector(s)
.container {}
Selector(s) when $scope: true;
.auro .container {}
Selector(s) when $prefix: true;
.auro_container {}
Example HTML selector use
<element class="container"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
core
css
#{$sym}#{$prefix}#{$scope}blockquote
#{manageScope.$scope}.#{manageScope.$prefix}pagecontainer { ... }
Description
Container class
Manage $scope and $prefix options.
Example
Default selector(s)
.container {}
Selector(s) when $scope: true;
.auro .container {}
Selector(s) when $prefix: true;
.auro_container {}
Example HTML selector use
<element class="container"> ... </element>
import file;
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
core
css
#{manageScope.$sym}#{manageScope.$prefix}#{manageScope.$scope}blockquote
#{$sym}#{$prefix}#{$scope}blockquote { ... }
Description
Baseline HTML setting for blockquote element.
Manage $scope option.
Example
Default selector(s)
blockquote {}
Selector(s) when $scope: true;
.auro blockquote {}
Selector(s) when $prefix: true;
.auro_blockquote {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote";
#{$sym}#{$prefix}picture#{$scope}
#{manageScope.$sym}#{manageScope.$prefix}#{manageScope.$scope}blockquote { ... }
Description
Baseline HTML setting for blockquote element.
Manage $scope option.
Example
Default selector(s)
blockquote {}
Selector(s) when $scope: true;
.auro blockquote {}
Selector(s) when $prefix: true;
.auro_blockquote {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote" as *;
#{manageScope.$sym}#{manageScope.$prefix}picture#{manageScope.$scope}
#{$sym}#{$prefix}picture#{$scope} { ... }
Description
Baseline HTML setting for picture element.
Manage $scope and $prefix options.
Example
Default selector(s)
picture img {}
Selector(s) when $scope: true;
picture.auro img {}
Selector(s) when $prefix: true;
.auro_picture img {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture";
essentials
css
#{$sym}#{$prefix}html#{$scope}
#{manageScope.$sym}#{manageScope.$prefix}picture#{manageScope.$scope} { ... }
Description
Baseline HTML setting for picture element.
Manage $scope and $prefix options.
Example
Default selector(s)
picture img {}
Selector(s) when $scope: true;
picture.auro img {}
Selector(s) when $prefix: true;
.auro_picture img {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture" as *;
essentials
css
#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope}
#{$sym}#{$prefix}html#{$scope} { ... }
Description
Baseline HTML setting to establish box-model and default font size.
Manage $scope and $prefix options.
Example
Default selector(s)
html {}
Selector(s) when $scope: true;
html.auro {}
Selector(s) when $prefix: true;
.auro_html {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType
#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope} { ... }
Description
Baseline HTML setting to establish box-model and default font size.
Manage $scope and $prefix options.
Example
Default selector(s)
html {}
Selector(s) when $scope: true;
html.auro {}
Selector(s) when $prefix: true;
.auro_html {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body, #{manageScope.$scope}.#{manageScope.$prefix}baseType
#{$scope}#{$sym}#{$prefix}body,
-#{$scope}.#{$prefix}baseType { ... }
Description
Set baseline type settings for body element or with the use of the .baseType selector.
Manage $scope and $prefix options.
Example
Default selector(s)
body,
+  font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default);
+  font-weight: var(--ds-text-body-default-weight, SCSSVariables.$ds-text-body-default-weight);
+  line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default);
+}" data-collapsed="#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body,
+#{manageScope.$scope}.#{manageScope.$prefix}baseType { ... }">#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body,
+#{manageScope.$scope}.#{manageScope.$prefix}baseType { ... }
Description
Set baseline type settings for body element or with the use of the .baseType selector.
Manage $scope and $prefix options.
Example
Default selector(s)
body,
 .baseType {}
Selector(s) when $scope: true;
.auro body,
 .auro .baseType {}
Selector(s) when $prefix: true;
.body,
-.auro_baseType {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}.#{$prefix}baseParagraph
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph
#{$scope}.#{$prefix}baseParagraph { ... }
Description
Sets standard margin for all paragraph style content
Use of nested .auro_hyperlink defines underline text-decoration for anchor tags
Manage $scope and $prefix options.
Example
Default selector(s)
.baseParagraph {}
+}" data-collapsed="#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph { ... }">#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph { ... }
Description
Sets standard margin for all paragraph style content
Use of nested .auro_hyperlink defines underline text-decoration for anchor tags
Manage $scope and $prefix options.
Example
Default selector(s)
.baseParagraph {}
 .baseParagraph .hyperlink {}
Selector(s) when $scope: true;
.auro .baseParagraph {}
 .auro .baseParagraph .hyperlink {}
Selector(s) when $prefix: true;
.auro_baseParagraph {}
-.auro_baseParagraph .auro_hyperlink {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}.#{$prefix}hyperlink
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}.#{manageScope.$prefix}hyperlink
#{$scope}.#{$prefix}hyperlink { ... }
Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
Support for: .hyperlink--nav, and .hyperlink--ondark
Manage $scope and $prefix options.
Example
Default selector(s)
.hyperlink {}
+}" data-collapsed="#{manageScope.$scope}.#{manageScope.$prefix}hyperlink { ... }">#{manageScope.$scope}.#{manageScope.$prefix}hyperlink { ... }
Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
Support for: .hyperlink--nav, and .hyperlink--ondark
Manage $scope and $prefix options.
Example
Default selector(s)
.hyperlink {}
 .hyperlink--inline {}
 .hyperlink--darktheme {}
Selector(s) when $scope: true;
.auro .hyperlink {}
 .auro .hyperlink--inline {}
 .auro .hyperlink--darktheme {}
Selector(s) when $prefix: true;
.auro_hyperlink {}
 .auro_hyperlink--inline {}
-.auro_hyperlink--darktheme {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}img
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img
#{$scope}#{$sym}#{$prefix}img { ... }
Description
Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.
Manage $scope and $prefix options.
Example
Default selector(s)
img {}
Selector(s) when $scope: true;
.auro img {}
Selector(s) when $prefix: true;
.auro_img {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small
#{$scope}#{$sym}#{$prefix}small,
-#{$scope}.#{$prefix}type--small { ... }
Description
Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.
Manage $scope and $prefix options.
Example
Default selector(s)
small,
+}" data-collapsed="#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img { ... }">#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img { ... }
Description
Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.
Manage $scope and $prefix options.
Example
Default selector(s)
img {}
Selector(s) when $scope: true;
.auro img {}
Selector(s) when $prefix: true;
.auro_img {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small, #{manageScope.$scope}.#{manageScope.$prefix}type--small
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small,
+#{manageScope.$scope}.#{manageScope.$prefix}type--small { ... }
Description
Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.
Manage $scope and $prefix options.
Example
Default selector(s)
small,
 .type--small {}
Selector(s) when $scope: true;
.auro small,
 .auro .type--small {}
Selector(s) when $prefix: true;
.auro_small,
-.auro_type--small {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}p
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p
#{$scope}#{$sym}#{$prefix}p { ... }
Description
Set <p> element margin standard. This selector is not set by default, set the $paragraph flag to `true' prior to import.
Other options are to use the <small> element or the .baseParagraph selector.
Manage $scope and $prefix options.
Example
Default selector(s)
p {}
Selector(s) when $scope: true;
.auro p {}
Selector(s) when $prefix: true;
.auro_p {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
import file with $paragraph flag set to true
$paragraph: true;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}.#{$prefix}fineprint
#{$scope}.#{$prefix}fineprint { ... }
Description
Defines the font size and color of fine print text
Manage $scope and $prefix options.
Example
Default selector(s)
.fineprint {}
Selector(s) when $scope: true;
.auro .fineprint {}
Selector(s) when $prefix: true;
.auro_fineprint {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
grid
mixins
grid-stickycolumn--md
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p { ... }
Description
Set <p> element margin standard. This selector is not set by default, set the $paragraph flag to `true' prior to import.
Other options are to use the <small> element or the .baseParagraph selector.
Manage $scope and $prefix options.
Example
Default selector(s)
p {}
Selector(s) when $scope: true;
.auro p {}
Selector(s) when $prefix: true;
.auro_p {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
import file with $paragraph flag set to true
$paragraph: true;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}.#{manageScope.$prefix}fineprint
#{manageScope.$scope}.#{manageScope.$prefix}fineprint { ... }
Description
Defines the font size and color of fine print text
Manage $scope and $prefix options.
Example
Default selector(s)
.fineprint {}
Selector(s) when $scope: true;
.auro .fineprint {}
Selector(s) when $prefix: true;
.auro_fineprint {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
grid
mixins
grid-stickycolumn--md
@mixin grid-stickycolumn--md() { ... }
Description
This mixin will set the element to be sticky on tablet and larger devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
grid-stickycolumn--xs
@mixin grid-stickycolumn--md() { ... }
Description
This mixin will set the element to be sticky on tablet and larger devices.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
import mixin file with altered output values prior to import
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
grid-stickycolumn--xs
@mixin grid-stickycolumn--xs() { ... }
Description
This mixin will set the element to be sticky on mobile devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
grid_width
@mixin grid-stickycolumn--xs() { ... }
Description
This mixin will set the element to be sticky on mobile devices.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
import mixin file with altered output values prior to import
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
grid_width
@mixin grid_width($maxWidth: 1232px) { ... }
Parameters
NameDescriptionTypeDefault value
$maxWidth
Specifies the max-width value of the grid.
String1232px
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
import mixin file with altered output values prior to import
$maxWidth: vac.$ds-grid-breakpoint-xl !default;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
grid_margin
@mixin grid_width($maxWidth: 1232px) { ... }
Parameters
NameDescriptionTypeDefault value
$maxWidth
Specifies the max-width value of the grid.
String1232px
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
import mixin file with altered output values prior to import
$maxWidth: vac.$ds-grid-breakpoint-xl !default;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
grid_margin
@mixin grid_margin() { ... }
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
grid_padding
@mixin grid_margin() { ... }
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
import mixin file with altered output values prior to import
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
grid_padding
@mixin grid_padding() { ... }
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
import mixin file with altered output values prior to import
$padding: vac.$ds-grid-margin-xs !default;
-  @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
grid_gutter
@mixin grid_padding() { ... }
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
import mixin file with altered output values prior to import
$padding: vac.$ds-grid-margin-xs !default;
+  @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
grid_gutter
@mixin grid_gutter($gutter: 16px) { ... }
Parameters
NameDescriptionTypeDefault value
$gutter
Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
String16px
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
import mixin file with altered output values prior to import
$gutter: vac.$ds-grid-gutter-xs !default;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
headings
css
#{$scope}.#{$prefix}heading
@mixin grid_gutter($gutter: 16px) { ... }
Parameters
NameDescriptionTypeDefault value
$gutter
Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
String16px
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
import mixin file with altered output values prior to import
$gutter: vac.$ds-grid-gutter-xs !default;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
headings
css
#{manageScope.$scope}.#{manageScope.$prefix}heading
#{$scope}.#{$prefix}heading { ... }
Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
Manage $scope and $prefix options.
Example
Default selector(s)
.heading {}
Selector(s) when $scope: true;
.auro .heading {}
Selector(s) when $prefix: true;
.auro_heading {}
Example HTML selector use
<element class="heading"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--display
#{manageScope.$scope}.#{manageScope.$prefix}heading { ... }
Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
Manage $scope and $prefix options.
Example
Default selector(s)
.heading {}
Selector(s) when $scope: true;
.auro .heading {}
Selector(s) when $prefix: true;
.auro_heading {}
Example HTML selector use
<element class="heading"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--display
#{$scope}.#{$prefix}heading--display { ... }
Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--display {}
Selector(s) when $scope: true;
.auro .heading--display {}
Selector(s) when $prefix: true;
.auro_heading--display {}
Example HTML selector use
<element class="heading heading--display"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--800
#{manageScope.$scope}.#{manageScope.$prefix}heading--display { ... }
Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--display {}
Selector(s) when $scope: true;
.auro .heading--display {}
Selector(s) when $prefix: true;
.auro_heading--display {}
Example HTML selector use
<element class="heading heading--display"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--800
#{$scope}.#{$prefix}heading--800 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--800 {}
Selector(s) when $scope: true;
.auro .heading--800 {}
Selector(s) when $prefix: true;
.auro_heading--800 {}
Example HTML selector use
<element class="heading heading--800"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--700
#{manageScope.$scope}.#{manageScope.$prefix}heading--800 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--800 {}
Selector(s) when $scope: true;
.auro .heading--800 {}
Selector(s) when $prefix: true;
.auro_heading--800 {}
Example HTML selector use
<element class="heading heading--800"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--700
#{$scope}.#{$prefix}heading--700 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--700 {}
Selector(s) when $scope: true;
.auro .heading--700 {}
Selector(s) when $prefix: true;
.auro_heading--700 {}
Example HTML selector use
<element class="heading heading--700"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--600
#{manageScope.$scope}.#{manageScope.$prefix}heading--700 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--700 {}
Selector(s) when $scope: true;
.auro .heading--700 {}
Selector(s) when $prefix: true;
.auro_heading--700 {}
Example HTML selector use
<element class="heading heading--700"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--600
#{$scope}.#{$prefix}heading--600 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--600 {}
Selector(s) when $scope: true;
.auro .heading--600 {}
Selector(s) when $prefix: true;
.auro_heading--600 {}
Example HTML selector use
<element class="heading heading--600"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--500
#{manageScope.$scope}.#{manageScope.$prefix}heading--600 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--600 {}
Selector(s) when $scope: true;
.auro .heading--600 {}
Selector(s) when $prefix: true;
.auro_heading--600 {}
Example HTML selector use
<element class="heading heading--600"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--500
#{$scope}.#{$prefix}heading--500 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--500 {}
Selector(s) when $scope: true;
.auro .heading--500 {}
Selector(s) when $prefix: true;
.auro_heading--500 {}
Example HTML selector use
<element class="heading heading--500"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--400
#{manageScope.$scope}.#{manageScope.$prefix}heading--500 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--500 {}
Selector(s) when $scope: true;
.auro .heading--500 {}
Selector(s) when $prefix: true;
.auro_heading--500 {}
Example HTML selector use
<element class="heading heading--500"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--400
#{$scope}.#{$prefix}heading--400 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--400 {}
Selector(s) when $scope: true;
.auro .heading--400 {}
Selector(s) when $prefix: true;
.auro_heading--400 {}
Example HTML selector use
<element class="heading heading--400"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
#{$scope}.#{$prefix}heading--300
#{manageScope.$scope}.#{manageScope.$prefix}heading--400 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--400 {}
Selector(s) when $scope: true;
.auro .heading--400 {}
Selector(s) when $prefix: true;
.auro_heading--400 {}
Example HTML selector use
<element class="heading heading--400"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--300
#{$scope}.#{$prefix}heading--300 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--300 {}
Selector(s) when $scope: true;
.auro .heading--300 {}
Selector(s) when $prefix: true;
.auro_heading--300 {}
Example HTML selector use
<element class="heading heading--300"> ... </element>
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
normalize
css
html#{$scope}
#{manageScope.$scope}.#{manageScope.$prefix}heading--300 { ... }
Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with .heading selector
Manage $scope and $prefix options.
Example
Default selector(s)
.heading--300 {}
Selector(s) when $scope: true;
.auro .heading--300 {}
Selector(s) when $prefix: true;
.auro_heading--300 {}
Example HTML selector use
<element class="heading heading--300"> ... </element>
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
normalize
css
html#{manageScope.$scope}
html#{$scope} { ... }
Description
  1. Correct the line height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
Manage $scope option.
Example
Default selector(s)
html {}
Selector(s) when $scope: true;
html.auro {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}body
html#{manageScope.$scope} { ... }
Description
  1. Correct the line height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
Manage $scope option.
Example
Default selector(s)
html {}
Selector(s) when $scope: true;
html.auro {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}body
#{$scope}body { ... }
Description
Remove the margin in all browsers.
Manage $scope option.
Example
Default selector(s)
body {}
Selector(s) when $scope: true;
.auro body {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}main
#{manageScope.$scope}body { ... }
Description
Remove the margin in all browsers.
Manage $scope option.
Example
Default selector(s)
body {}
Selector(s) when $scope: true;
.auro body {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}main
#{$scope}main { ... }
Description
Render the main element consistently in IE.
Manage $scope option.
Example
Default selector(s)
main {}
Selector(s) when $scope: true;
.auro main {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}hr
#{manageScope.$scope}main { ... }
Description
Render the main element consistently in IE.
Manage $scope option.
Example
Default selector(s)
main {}
Selector(s) when $scope: true;
.auro main {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}hr
#{$scope}hr { ... }
Description
  1. Show the overflow in Edge and IE.
  2. Add the correct box sizing in Firefox.
Manage $scope option.
Example
Default selector(s)
hr {}
Selector(s) when $scope: true;
.auro hr {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}pre
#{manageScope.$scope}hr { ... }
Description
  1. Show the overflow in Edge and IE.
  2. Add the correct box sizing in Firefox.
Manage $scope option.
Example
Default selector(s)
hr {}
Selector(s) when $scope: true;
.auro hr {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}pre
#{$scope}pre { ... }
Description
  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.
Manage $scope option.
Example
Default selector(s)
pre {}
Selector(s) when $scope: true;
.auro pre {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}a
#{manageScope.$scope}pre { ... }
Description
  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.
Manage $scope option.
Example
Default selector(s)
pre {}
Selector(s) when $scope: true;
.auro pre {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}a
#{$scope}a { ... }
Description
Remove the gray background on active links in IE 10.
Manage $scope option.
Example
Default selector(s)
a {}
Selector(s) when $scope: true;
.auro a {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}abbr
#{manageScope.$scope}a { ... }
Description
Remove the gray background on active links in IE 10.
Manage $scope option.
Example
Default selector(s)
a {}
Selector(s) when $scope: true;
.auro a {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}abbr
#{$scope}abbr { ... }
Description
  1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  2. Remove the bottom border in Chrome 57-
Manage $scope option.
Example
Default selector(s)
abbr[title] {}
Selector(s) when $scope: true;
.auro abbr[title] {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}b, #{$scope}strong
#{manageScope.$scope}abbr { ... }
Description
  1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  2. Remove the bottom border in Chrome 57-
Manage $scope option.
Example
Default selector(s)
abbr[title] {}
Selector(s) when $scope: true;
.auro abbr[title] {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}b, #{manageScope.$scope}strong
#{$scope}b,
-#{$scope}strong { ... }
Description
Add the correct font weight in Chrome, Edge, and Safari.
Manage $scope option.
Example
Default selector(s)
b,
+}" data-collapsed="#{manageScope.$scope}b,
+#{manageScope.$scope}strong { ... }">#{manageScope.$scope}b,
+#{manageScope.$scope}strong { ... }
Description
Add the correct font weight in Chrome, Edge, and Safari.
Manage $scope option.
Example
Default selector(s)
b,
 strong {}
Selector(s) when $scope: true;
.auro b,
-.auro strong {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}code, #{$scope}kbd, #{$scope}samp
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}code, #{manageScope.$scope}kbd, #{manageScope.$scope}samp
#{$scope}code,
-#{$scope}kbd,
-#{$scope}samp { ... }
Description
  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.
Manage $scope option.
Example
Default selector(s)
code,
+  font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default); /* 2 */
+}" data-collapsed="#{manageScope.$scope}code,
+#{manageScope.$scope}kbd,
+#{manageScope.$scope}samp { ... }">#{manageScope.$scope}code,
+#{manageScope.$scope}kbd,
+#{manageScope.$scope}samp { ... }
Description
  1. Correct the inheritance and scaling of font size in all browsers.
  2. Correct the odd em font sizing in all browsers.
Manage $scope option.
Example
Default selector(s)
code,
 kbd,
 samp {}
Selector(s) when $scope: true;
.auro code,
 .auro kbd,
-.auro samp {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}sub, #{$scope}sup
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}sub, #{manageScope.$scope}sup
#{$scope}sub,
-#{$scope}sup { ... }
Description
Prevent sub and sup elements from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sub,
+}" data-collapsed="#{manageScope.$scope}sub,
+#{manageScope.$scope}sup { ... }">#{manageScope.$scope}sub,
+#{manageScope.$scope}sup { ... }
Description
Prevent sub and sup elements from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sub,
 sup {}
Selector(s) when $scope: true;
.auro sub,
-.auro sup {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}sub
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}sub
#{$scope}sub { ... }
Description
Prevent sub element from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sub {}
Selector(s) when $scope: true;
.auro sub {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}sup
#{manageScope.$scope}sub { ... }
Description
Prevent sub element from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sub {}
Selector(s) when $scope: true;
.auro sub {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}sup
#{$scope}sup { ... }
Description
Prevent sup element from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sup {}
Selector(s) when $scope: true;
.auro sup {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}img
#{manageScope.$scope}sup { ... }
Description
Prevent sup element from affecting the line height in all browsers.
Manage $scope option.
Example
Default selector(s)
sup {}
Selector(s) when $scope: true;
.auro sup {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}img
#{$scope}img { ... }
Description
Remove the border on images inside links in IE 10.
Manage $scope option.
Example
Default selector(s)
img {}
Selector(s) when $scope: true;
.auro img {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}input, #{$scope}optgroup, #{$scope}select, #{$scope}textarea
#{manageScope.$scope}img { ... }
Description
Remove the border on images inside links in IE 10.
Manage $scope option.
Example
Default selector(s)
img {}
Selector(s) when $scope: true;
.auro img {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}button, #{manageScope.$scope}input, #{manageScope.$scope}optgroup, #{manageScope.$scope}select, #{manageScope.$scope}textarea
#{$scope}button,
-#{$scope}input,
-#{$scope}optgroup,
-#{$scope}select,
-#{$scope}textarea { ... }
Description
  1. Remove the margin in Firefox and Safari.
  2. Change the font styles in all browsers.
Manage $scope option.
Example
Default selector(s)
button,
+  line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default); /* 2 */
+}" data-collapsed="#{manageScope.$scope}button,
+#{manageScope.$scope}input,
+#{manageScope.$scope}optgroup,
+#{manageScope.$scope}select,
+#{manageScope.$scope}textarea { ... }">#{manageScope.$scope}button,
+#{manageScope.$scope}input,
+#{manageScope.$scope}optgroup,
+#{manageScope.$scope}select,
+#{manageScope.$scope}textarea { ... }
Description
  1. Remove the margin in Firefox and Safari.
  2. Change the font styles in all browsers.
Manage $scope option.
Example
Default selector(s)
button,
 input,
 optgroup,
 select,
@@ -479,53 +467,53 @@
 .auro input,
 .auro optgroup,
 .auro select,
-.auro textarea {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}input
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}button, #{manageScope.$scope}input
#{$scope}button,
-#{$scope}input { ... }
Description
Show the overflow in IE.
  1. Show the overflow in Edge.
Manage $scope option.
Example
Default selector(s)
button,
+}" data-collapsed="#{manageScope.$scope}button,
+#{manageScope.$scope}input { ... }">#{manageScope.$scope}button,
+#{manageScope.$scope}input { ... }
Description
Show the overflow in IE.
  1. Show the overflow in Edge.
Manage $scope option.
Example
Default selector(s)
button,
 input {}
Selector(s) when $scope: true;
.auro button,
-.auro input {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}select
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}button, #{manageScope.$scope}select
#{$scope}button,
-#{$scope}select { ... }
Description
Remove the inheritance of text transform in Edge, Firefox, and IE.
  1. Remove the inheritance of text transform in Firefox.
Manage $scope option.
Example
Default selector(s)
button,
+}" data-collapsed="#{manageScope.$scope}button,
+#{manageScope.$scope}select { ... }">#{manageScope.$scope}button,
+#{manageScope.$scope}select { ... }
Description
Remove the inheritance of text transform in Edge, Firefox, and IE.
  1. Remove the inheritance of text transform in Firefox.
Manage $scope option.
Example
Default selector(s)
button,
 select {}
Selector(s) when $scope: true;
.auro button,
-.auro select {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}[type='button'], #{$scope}[type='reset'], #{$scope}[type='submit']
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}button, #{manageScope.$scope}[type='button'], #{manageScope.$scope}[type='reset'], #{manageScope.$scope}[type='submit']
#{$scope}button,
-#{$scope}[type='button'],
-#{$scope}[type='reset'],
-#{$scope}[type='submit'] { ... }
Description
Correct the inability to style clickable types in iOS and Safari.
Manage $scope option.
Example
Default selector(s)
button,
+}" data-collapsed="#{manageScope.$scope}button,
+#{manageScope.$scope}[type='button'],
+#{manageScope.$scope}[type='reset'],
+#{manageScope.$scope}[type='submit'] { ... }">#{manageScope.$scope}button,
+#{manageScope.$scope}[type='button'],
+#{manageScope.$scope}[type='reset'],
+#{manageScope.$scope}[type='submit'] { ... }
Description
Correct the inability to style clickable types in iOS and Safari.
Manage $scope option.
Example
Default selector(s)
button,
 [type="button"],
 [type="reset"],
 [type="submit"] {}
Selector(s) when $scope: true;
.auro button,
 .auro [type="button"],
 .auro [type="reset"],
-.auro [type="submit"] {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}fieldset
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}fieldset
#{$scope}fieldset { ... }
Description
Correct the padding in Firefox.
Manage $scope option.
Example
Default selector(s)
fieldset {}
Selector(s) when $scope: true;
.auro fieldset {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}legend
#{manageScope.$scope}fieldset { ... }
Description
Correct the padding in Firefox.
Manage $scope option.
Example
Default selector(s)
fieldset {}
Selector(s) when $scope: true;
.auro fieldset {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}legend
#{$scope}legend { ... }
Description
  1. Correct the text wrapping in Edge and IE.
  2. Remove the padding so developers are not caught out when they zero out fieldset elements in all browsers.
  3. Correct the color inheritance from fieldset elements in IE.
Manage $scope option.
Example
Default selector(s)
legend {}
Selector(s) when $scope: true;
.auro legend {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}progress
#{manageScope.$scope}legend { ... }
Description
  1. Correct the text wrapping in Edge and IE.
  2. Remove the padding so developers are not caught out when they zero out fieldset elements in all browsers.
  3. Correct the color inheritance from fieldset elements in IE.
Manage $scope option.
Example
Default selector(s)
legend {}
Selector(s) when $scope: true;
.auro legend {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}progress
#{$scope}progress { ... }
Description
Add the correct vertical alignment in Chrome, Firefox, and Opera.
Manage $scope option.
Example
Default selector(s)
progress {}
Selector(s) when $scope: true;
.auro progress {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}textarea
#{manageScope.$scope}progress { ... }
Description
Add the correct vertical alignment in Chrome, Firefox, and Opera.
Manage $scope option.
Example
Default selector(s)
progress {}
Selector(s) when $scope: true;
.auro progress {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}textarea
#{$scope}textarea { ... }
Description
Remove the default vertical scrollbar in IE 10+.
Manage $scope option.
Example
Default selector(s)
textarea {}
Selector(s) when $scope: true;
.auro textarea {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}[type='number']
#{manageScope.$scope}textarea { ... }
Description
Remove the default vertical scrollbar in IE 10+.
Manage $scope option.
Example
Default selector(s)
textarea {}
Selector(s) when $scope: true;
.auro textarea {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}[type='number']
#{$scope}[type='number'] { ... }
Description
Correct the cursor style of increment and decrement buttons in Chrome.
Manage $scope option.
Example
Default selector(s)
[type="number"]::-webkit-inner-spin-button,
+}" data-collapsed="#{manageScope.$scope}[type='number'] { ... }">#{manageScope.$scope}[type='number'] { ... }
Description
Correct the cursor style of increment and decrement buttons in Chrome.
Manage $scope option.
Example
Default selector(s)
[type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {}
Selector(s) when $scope: true;
.auro [type="number"]::-webkit-inner-spin-button,
-.auro [type="number"]::-webkit-outer-spin-button {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}[type='search']
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}[type='search']
#{$scope}[type='search'] { ... }
Description
  1. Correct the outline style in Safari.
  2. Correct the odd appearance in Chrome and Safari.
Manage $scope option.
Example
Default selector(s)
[type="search"] {}
Selector(s) when $scope: true;
.auro [type="search"] {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}::-webkit-search-decoration
#{manageScope.$scope}[type='search'] { ... }
Description
  1. Correct the outline style in Safari.
  2. Correct the odd appearance in Chrome and Safari.
Manage $scope option.
Example
Default selector(s)
[type="search"] {}
Selector(s) when $scope: true;
.auro [type="search"] {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}::-webkit-search-decoration
#{$scope}::-webkit-search-decoration { ... }
Description
Remove the inner padding in Chrome and Safari on macOS.
Manage $scope option.
Example
Default selector(s)
[type="search"]::-webkit-search-decoration {}
Selector(s) when $scope: true;
.auro [type="search"]::-webkit-search-decoration {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}::-webkit-file-upload-button
#{manageScope.$scope}::-webkit-search-decoration { ... }
Description
Remove the inner padding in Chrome and Safari on macOS.
Manage $scope option.
Example
Default selector(s)
[type="search"]::-webkit-search-decoration {}
Selector(s) when $scope: true;
.auro [type="search"]::-webkit-search-decoration {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}::-webkit-file-upload-button
#{$scope}::-webkit-file-upload-button { ... }
Description
!. Change font properties to inherit in Safari.
  1. Correct the inability to style clickable types in iOS and Safari.
Manage $scope option.
Example
Default selector(s)
::-webkit-file-upload-button {}
Selector(s) when $scope: true;
.auro ::-webkit-file-upload-button {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}details
#{manageScope.$scope}::-webkit-file-upload-button { ... }
Description
!. Change font properties to inherit in Safari.
  1. Correct the inability to style clickable types in iOS and Safari.
Manage $scope option.
Example
Default selector(s)
::-webkit-file-upload-button {}
Selector(s) when $scope: true;
.auro ::-webkit-file-upload-button {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}details
#{$scope}details { ... }
Description
Add the correct display in Edge, IE 10+, and Firefox.
Manage $scope option.
Example
Default selector(s)
details {}
Selector(s) when $scope: true;
.auro details {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}summary
#{manageScope.$scope}details { ... }
Description
Add the correct display in Edge, IE 10+, and Firefox.
Manage $scope option.
Example
Default selector(s)
details {}
Selector(s) when $scope: true;
.auro details {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}summary
#{$scope}summary { ... }
Description
Add the correct display in all browsers.
Manage $scope option.
Example
Default selector(s)
summary {}
Selector(s) when $scope: true;
.auro summary {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}template
#{manageScope.$scope}summary { ... }
Description
Add the correct display in all browsers.
Manage $scope option.
Example
Default selector(s)
summary {}
Selector(s) when $scope: true;
.auro summary {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}template
#{$scope}template { ... }
Description
Add the correct display in IE 10+.
Manage $scope option.
Example
Default selector(s)
template {}
Selector(s) when $scope: true;
.auro template {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}[hidden]
#{manageScope.$scope}template { ... }
Description
Add the correct display in IE 10+.
Manage $scope option.
Example
Default selector(s)
template {}
Selector(s) when $scope: true;
.auro template {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
#{manageScope.$scope}[hidden]
#{$scope}[hidden] { ... }
Description
Add the correct display in IE 10.
Manage $scope option.
Example
Default selector(s)
[hidden] {}
Selector(s) when $scope: true;
.auro [hidden] {}
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
page layouts
css
#{$scope}.#{$prefix}pageLayout-2colAnchorNav
#{manageScope.$scope}[hidden] { ... }
Description
Add the correct display in IE 10.
Manage $scope option.
Example
Default selector(s)
[hidden] {}
Selector(s) when $scope: true;
.auro [hidden] {}
import file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *;
page layouts
css
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colAnchorNav
#{$scope}.#{$prefix}pageLayout-2colAnchorNav { ... }
Description
pageLayout-2colAnchorNav class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-2colAnchorNav {}
Selector(s) when $scope: true;
.auro .pageLayout-2colAnchorNav {}
Selector(s) when $prefix: true;
.auro_pageLayout-2colAnchorNav {}
Example HTML selector use
<element class="pageLayout-2colAnchorNav"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
#{$scope}.#{$prefix}pageLayout-2colSideNav
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colAnchorNav { ... }
Description
pageLayout-2colAnchorNav class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-2colAnchorNav {}
Selector(s) when $scope: true;
.auro .pageLayout-2colAnchorNav {}
Selector(s) when $prefix: true;
.auro_pageLayout-2colAnchorNav {}
Example HTML selector use
<element class="pageLayout-2colAnchorNav"> ... </element>
import file;
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colSideNav
#{$scope}.#{$prefix}pageLayout-2colSideNav { ... }
Description
pageLayout-2colSideNav class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-2colSideNav {}
Selector(s) when $scope: true;
.auro .pageLayout-2colSideNav {}
Selector(s) when $prefix: true;
.auro_pageLayout-2colSideNav {}
Example HTML selector use
<element class="pageLayout-2colSideNav"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
#{$scope}.#{$prefix}pageLayout-3col
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colSideNav { ... }
Description
pageLayout-2colSideNav class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-2colSideNav {}
Selector(s) when $scope: true;
.auro .pageLayout-2colSideNav {}
Selector(s) when $prefix: true;
.auro_pageLayout-2colSideNav {}
Example HTML selector use
<element class="pageLayout-2colSideNav"> ... </element>
import file;
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-3col
#{$scope}.#{$prefix}pageLayout-3col { ... }
Description
pageLayout-3col class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-3col {}
Selector(s) when $scope: true;
.auro .pageLayout-3col {}
Selector(s) when $prefix: true;
.auro_pageLayout-3col {}
Example HTML selector use
<element class="pageLayout-3col"> ... </element>
import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
responsive
mixins
auro_breakpoint
#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-3col { ... }
Description
pageLayout-3col class
Manage $scope and $prefix options.
Example
Default selector(s)
.pageLayout-3col {}
Selector(s) when $scope: true;
.auro .pageLayout-3col {}
Selector(s) when $prefix: true;
.auro_pageLayout-3col {}
Example HTML selector use
<element class="pageLayout-3col"> ... </element>
import file;
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *;
responsive
mixins
auro_breakpoint
@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }
Description
Open format mixin to define any breakpoint.
See also: Media_features
Compatibility: css-mediaqueries
Parameters
NameDescriptionTypeDefault value
$min
sets min-width value
Stringnull
$max
sets max-width value
Stringnull
$polar
sets min-width and max-width values
Listnull
$cust
allows for 100% custom breakpoint options
Stringnull
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
Auro breakpoint tokens
$ds-grid-breakpoint-sm: 576px;
+ }" data-collapsed="@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }">@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }
Description
Open format mixin to define any breakpoint.
See also: Media_features
Compatibility: css-mediaqueries
Parameters
NameDescriptionTypeDefault value
$min
sets min-width value
Stringnull
$max
sets max-width value
Stringnull
$polar
sets min-width and max-width values
Listnull
$cust
allows for 100% custom breakpoint options
Stringnull
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
Auro breakpoint tokens
$ds-grid-breakpoint-sm: 576px;
 $ds-grid-breakpoint-md: 768px;
 $ds-grid-breakpoint-lg: 1024px;
Set breakpoint using $min argument
.foo {
   color: orange;
@@ -782,7 +770,7 @@
   @media screen and (min-width: vac.$ds-grid-breakpoint-xl) {
     @content;
   }
- }" data-collapsed="@mixin auro_grid-breakpoint--xl() { ... }">@mixin auro_grid-breakpoint--xl() { ... }
Description
Standard breakpoint to support resolutions greater than 1232px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";
Set grid-breakpoint
.foo {
+ }" data-collapsed="@mixin auro_grid-breakpoint--xl() { ... }">@mixin auro_grid-breakpoint--xl() { ... }
Description
Standard breakpoint to support resolutions greater than 1232px.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *;
Set grid-breakpoint
.foo {
     @include auro_grid-breakpoint--xl {
       ...
     }
@@ -790,7 +778,7 @@
   @media screen and (min-width: vac.$ds-grid-breakpoint-lg) {
     @content;
   }
- }" data-collapsed="@mixin auro_grid-breakpoint--lg() { ... }">@mixin auro_grid-breakpoint--lg() { ... }
Description
Standard breakpoint to support resolutions greater than 1024px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";
Set grid-breakpoint
.foo {
+ }" data-collapsed="@mixin auro_grid-breakpoint--lg() { ... }">@mixin auro_grid-breakpoint--lg() { ... }
Description
Standard breakpoint to support resolutions greater than 1024px.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *;
Set grid-breakpoint
.foo {
     @include auro_grid-breakpoint--lg {
       ...
     }
@@ -798,7 +786,7 @@
   @media screen and (min-width: vac.$ds-grid-breakpoint-md) {
     @content;
   }
- }" data-collapsed="@mixin auro_grid-breakpoint--md() { ... }">@mixin auro_grid-breakpoint--md() { ... }
Description
Standard breakpoint to support resolutions greater than 768px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";
Set grid-breakpoint
.foo {
+ }" data-collapsed="@mixin auro_grid-breakpoint--md() { ... }">@mixin auro_grid-breakpoint--md() { ... }
Description
Standard breakpoint to support resolutions greater than 768px.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *;
Set grid-breakpoint
.foo {
     @include auro_grid-breakpoint--md {
       ...
     }
@@ -806,7 +794,7 @@
   @media screen and (min-width: vac.$ds-grid-breakpoint-sm) {
     @content;
   }
- }" data-collapsed="@mixin auro_grid-breakpoint--sm() { ... }">@mixin auro_grid-breakpoint--sm() { ... }
Description
Standard breakpoint to support resolutions greater than 576px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";
Set grid-breakpoint
.foo {
+ }" data-collapsed="@mixin auro_grid-breakpoint--sm() { ... }">@mixin auro_grid-breakpoint--sm() { ... }
Description
Standard breakpoint to support resolutions greater than 576px.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *;
Set grid-breakpoint
.foo {
     @include auro_grid-breakpoint--sm {
       ...
     }
@@ -814,54 +802,52 @@
   @media screen and (min-width: vac.$ds-grid-breakpoint-xs) {
     @content;
   }
- }" data-collapsed="@mixin auro_grid-breakpoint--xs() { ... }">@mixin auro_grid-breakpoint--xs() { ... }
Description
Standard breakpoint to support resolutions greater than 320px.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";
Set grid-breakpoint
.foo {
+ }" data-collapsed="@mixin auro_grid-breakpoint--xs() { ... }">@mixin auro_grid-breakpoint--xs() { ... }
Description
Standard breakpoint to support resolutions greater than 320px.
Parameters
None.
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *;
Set grid-breakpoint
.foo {
     @include auro_grid-breakpoint--xs {
       ...
     }
-}
scope-prefix
variables
scope
$scope: null !default;
Description
Variables to determine if $scope is to be displayed.
Set true value prior to importing file if scope selector output file is wanted
Type
Boolean
Example
import file
$scope: true;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...
return example
.auro [selector] { ... }
Used by
prefix
$prefix: null !default;
Description
Variables to determine if $prefix is to be displayed
Set true value prior to importing file if prefix selector output file is wanted
Type
Boolean
Example
import file
$prefix: true;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...
return example
.auro_[selector] { ... }
Used by
General
mixins
essentials-base
scope-prefix
variables
scope
$scope: null !default;
Description
Variables to determine if $scope is to be displayed.
Configure $scope: true via @use ... with (...) when a scoped selector output is wanted.
Type
Boolean
Example
configure and load
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($scope: true);
return example
.auro [selector] { ... }
Used by
prefix
$prefix: null !default;
Description
Variables to determine if $prefix is to be displayed
Configure $prefix: true via @use ... with (...) when a prefixed selector output is wanted.
Type
Boolean
Example
configure and load
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($prefix: true);
return example
.auro_[selector] { ... }
Used by
General
mixins
essentials-base
@mixin essentials-base($theme-props) { ... }
Description
Mixin for base essentials
Parameters
NameDescriptionTypeDefault value
$theme-props
Theme map containing property values
Map—
Requires
css
#{$sym}#{$prefix}html#{$scope}
@mixin essentials-base($theme-props) { ... }
Description
Mixin for base essentials
Parameters
NameDescriptionTypeDefault value
$theme-props
Theme map containing property values
Map—
Requires
css
#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope}
#{$sym}#{$prefix}html#{$scope} { ... }
Description
Baseline HTML setting to establish box-model and default font size.
#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType
#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope} { ... }
Description
Baseline HTML setting to establish box-model and default font size.
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body, #{manageScope.$scope}.#{manageScope.$prefix}baseType
#{$scope}#{$sym}#{$prefix}body,
-  #{$scope}.#{$prefix}baseType { ... }
Description
Set baseline type settings for body element or with the use of the .baseType selector.
#{$scope}.#{$prefix}baseParagraph
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body,
+  #{manageScope.$scope}.#{manageScope.$prefix}baseType { ... }
Description
Set baseline type settings for body element or with the use of the .baseType selector.
#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph
#{$scope}.#{$prefix}baseParagraph { ... }
Description
Sets standard margin for all paragraph style content
#{$scope}.#{$prefix}hyperlink
#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph { ... }
Description
Sets standard margin for all paragraph style content
#{manageScope.$scope}.#{manageScope.$prefix}hyperlink
#{$scope}.#{$prefix}hyperlink { ... }
Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
#{$scope}#{$sym}#{$prefix}img
#{manageScope.$scope}.#{manageScope.$prefix}hyperlink { ... }
Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img
#{$scope}#{$sym}#{$prefix}img { ... }
Description
Default setting for all <img /> tags
#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img { ... }
Description
Default setting for all <img /> tags
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small, #{manageScope.$scope}.#{manageScope.$prefix}type--small
#{$scope}#{$sym}#{$prefix}small,
-  #{$scope}.#{$prefix}type--small { ... }
Description
Legal copy, disclaimers, and footnotes
#{$scope}#{$sym}#{$prefix}p
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small,
+  #{manageScope.$scope}.#{manageScope.$prefix}type--small { ... }
Description
Legal copy, disclaimers, and footnotes
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p
#{$scope}#{$sym}#{$prefix}p { ... }
Description
Paragraph element margin (conditional)
#{$scope}.#{$prefix}fineprint
#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p { ... }
Description
Paragraph element margin (conditional)
#{manageScope.$scope}.#{manageScope.$prefix}fineprint
#{$scope}.#{$prefix}fineprint { ... }
Description
Fine print text
utility
functions
auro_capitalize
#{manageScope.$scope}.#{manageScope.$prefix}fineprint { ... }
Description
Fine print text
utility
functions
auro_capitalize
@function auro_capitalize($string: null) { ... }
Description
The purpose of this function is to take a string and capitalize the first letter on output
Parameters
NameDescriptionTypeDefault value
$string
pass in string to be capitolized
Stringnull
Example
pass string into function
capitalize('foo') => Foo
import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";
Used by
auro_contains
@function auro_capitalize($string: null) { ... }
Description
The purpose of this function is to take a string and capitalize the first letter on output
Parameters
NameDescriptionTypeDefault value
$string
pass in string to be capitolized
Stringnull
Example
pass string into function
capitalize('foo') => Foo
import dependency
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize" as *;
Used by
auro_contains
@function auro_contains($list: null, $var) { ... }
Description
The purpose of this function is to evaluate if a requested var is in the supplied array
Parameters
NameDescriptionTypeDefault value
$list
variable list to be evaluated
Variablenull
$var
item in list
Item—
Example
pass string into function
ods-contains($options, $value)
import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains";
Used by
auro_map-deep-get
@function auro_contains($list: null, $var) { ... }
Description
The purpose of this function is to evaluate if a requested var is in the supplied array
Parameters
NameDescriptionTypeDefault value
$list
variable list to be evaluated
Variablenull
$var
item in list
Item—
Example
pass string into function
ods-contains($options, $value)
import dependency
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains" as *;
Used by
auro_map-deep-get
import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get";
Used by
Links
variables
important
$important: null !default;
Description
The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.
Map structure
NameDescriptionTypeValue
$important
manage use of !important flag
Booleannull
Example
update value prior to importing utility support file if !important flag is needed
$important: true;
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... ";
Used by
ds-spacing-options
$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;
Description
When using spacing mixins, it's required to import this variable list for use of options.
Map structure
NameDescriptionTypeValue
$options
list of available token options
Variablelist
Example
import dependency variable list
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";
utility-auro
css
#{$scope}.auro_roleButton
#{$scope}.auro_roleButton { ... }
Description
.auro_roleButton is a utility class to support the UI of a standard html hyperlink using the attribute role="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.
See for more information
Manage $scope options.
Example
Default selector(s)
.auro_roleButton {}
Selector(s) when $scope: true;
.auro .auro_roleButton {}
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton";
#{$scope}.auro_roleTab
#{$scope}.auro_roleTab { ... }
Description
auro_roleTab is a helper class to support the UI of a hyperlink using role="tab"
Manage $scope options.
Example
Default selector(s)
.auro_roleTab {}
Selector(s) when $scope: true;
.auro .auro_roleTab {}
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";
#{$scope}.auro_containedButtons
import dependency
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get" as *;
Used by
Links
variables
important
$important: null !default;
Description
The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.
Map structure
NameDescriptionTypeValue
$important
manage use of !important flag
Booleannull
Example
configure the !important flag before loading utility support files
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/important" with ($important: true);
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... " as *;
Used by
ds-spacing-options
$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;
Description
When using spacing mixins, it's required to import this variable list for use of options.
Map structure
NameDescriptionTypeValue
$options
list of available token options
Variablelist
Example
import dependency variable list
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options" as *;
Used by
utility-auro
css
#{manageScope.$scope}.auro_roleButton
#{manageScope.$scope}.auro_roleButton { ... }
Description
.auro_roleButton is a utility class to support the UI of a standard html hyperlink using the attribute role="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.
See for more information
Manage $scope options.
Example
Default selector(s)
.auro_roleButton {}
Selector(s) when $scope: true;
.auro .auro_roleButton {}
import selector file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton" as *;
#{manageScope.$scope}.auro_roleTab
#{manageScope.$scope}.auro_roleTab { ... }
Description
auro_roleTab is a helper class to support the UI of a hyperlink using role="tab"
Manage $scope options.
Example
Default selector(s)
.auro_roleTab {}
Selector(s) when $scope: true;
.auro .auro_roleTab {}
import selector file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab" as *;
#{manageScope.$scope}.auro_containedButtons
#{$scope}.auro_containedButtons { ... }
Description
.auro_containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.
.auro_containedButtons has a dependency on WCSS breakpoints. See example below to import dependency.
Manage $scope options.
Place selector on outer parent element.
Example
Default selector(s)
.auro_containedButtons {}
Selector(s) when $scope: true;
.auro .auro_containedButtons {}
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";
import dependency file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
#{$scope}.auro_table
#{manageScope.$scope}.auro_containedButtons { ... }
Description
.auro_containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.
.auro_containedButtons has a dependency on WCSS breakpoints. See example below to import dependency.
Manage $scope options.
Place selector on outer parent element.
Example
Default selector(s)
.auro_containedButtons {}
Selector(s) when $scope: true;
.auro .auro_containedButtons {}
import selector file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons" as *;
import dependency file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
#{manageScope.$scope}.auro_table
#{$scope}.auro_table { ... }
Description
CSS selectors for easy reproduction of Auro Table UI.
Defaults are set by baseline Design Tokens
Manage $scope options.
Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";
#{$scope}.auro_tablist
#{manageScope.$scope}.auro_table { ... }
Description
CSS selectors for easy reproduction of Auro Table UI.
Defaults are set by baseline Design Tokens
Manage $scope options.
Example
import selector file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table" as *;
#{manageScope.$scope}.auro_tablist
#{$scope}.auro_tablist { ... }
Description
.auro_tablist is a helper class to support the UI of a hyperlink using role="tab"
Place selector on outer div or section container with the role="tablist" also applied.
Manage $scope options.
Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist";
utility-display
css
#{$scope}.#{$prefix}util_displayInline
#{$scope}.#{$prefix}util_displayInline { ... }
Description
Utility class to display elements inline
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayInline {}
Selector(s) when $scope: true;
.auro .util_displayInline {}
Selector(s) when $prefix: true;
.auro_util_displayInline {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayInlineBlock
#{$scope}.#{$prefix}util_displayInlineBlock { ... }
Description
Utility class to display elements inline-block
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayInline {}
Selector(s) when $scope: true;
.auro .util_displayInline {}
Selector(s) when $prefix: true;
.auro_util_displayInline {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayBlock
#{$scope}.#{$prefix}util_displayBlock { ... }
Description
Utility class to display elements block
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayBlock {}
Selector(s) when $scope: true;
.auro .util_displayBlock {}
Selector(s) when $prefix: true;
.auro_util_displayBlock {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayFlex
#{$scope}.#{$prefix}util_displayFlex { ... }
Description
Utility class to display elements flex
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayFlex {}
Selector(s) when $scope: true;
.auro .util_displayFlex {}
Selector(s) when $prefix: true;
.auro_util_displayFlex {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayHidden
#{$scope}.#{$prefix}util_displayHidden { ... }
Description
Utility class to display elements none
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayHidden {}
Selector(s) when $scope: true;
.auro .util_displayHidden {}
Selector(s) when $prefix: true;
.auro_util_displayHidden {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayHiddenVisually
#{$scope}.#{$prefix}util_displayHiddenVisually { ... }
Description
Utility class to visually hide elements within the UI, but still be picked up by screen readers.
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayHiddenVisually {}
Selector(s) when $scope: true;
.auro .util_displayHiddenVisually {}
Selector(s) when $prefix: true;
.auro_util_displayHiddenVisually {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
utility-font
css
#{$scope}.#{$prefix}util_fontWeightDefault
#{$scope}.#{$prefix}util_fontWeightDefault { ... }
Description
Utility class for default font-weight
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightDefault {}
Selector(s) when $scope: true;
.auro .util_fontWeightDefault {}
Selector(s) when $prefix: true;
.auro_util_fontWeightDefault {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
#{$scope}.#{$prefix}util_fontWeightMedium
#{$scope}.#{$prefix}util_fontWeightMedium { ... }
Description
Utility class for font-weight medium
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightMedium {}
Selector(s) when $scope: true;
.auro .util_fontWeightMedium {}
Selector(s) when $prefix: true;
.auro_util_fontWeightMedium {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
#{$scope}.#{$prefix}util_fontWeightDisplay
#{$scope}.#{$prefix}util_fontWeightDisplay { ... }
Description
Utility class for display font-weight
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightDisplay {}
Selector(s) when $scope: true;
.auro .util_fontWeightDisplay {}
Selector(s) when $prefix: true;
.auro_util_fontWeightDisplay {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
#{$scope}.#{$prefix}util_body--lg
#{$scope}.#{$prefix}util_body--lg { ... }
Description
Utility class for font-size lg
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--lg {}
Selector(s) when $scope: true;
.auro .util_body--lg {}
Selector(s) when $prefix: true;
.auro_util_body--lg {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
#{$scope}.#{$prefix}util_body--sm
#{$scope}.#{$prefix}util_body--sm { ... }
Description
Utility class for font-size sm
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--sm {}
Selector(s) when $scope: true;
.auro .util_body--sm {}
Selector(s) when $prefix: true;
.auro_util_body--sm {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
#{$scope}.#{$prefix}util_body--xs
#{$scope}.#{$prefix}util_body--xs { ... }
Description
Utility class for font-size xs
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--xs {}
Selector(s) when $scope: true;
.auro .util_body--xs {}
Selector(s) when $prefix: true;
.auro_util_body--xs {}
import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
utility-inset
css
#{$scope}.#{$prefix}util_insetNone
#{$scope}.#{$prefix}util_insetNone { ... }
Description
Manage $scope and $prefix options.
Example
Default selector(s)
.util_insetNone {}
Selector(s) when $scope: true;
.auro .util_insetNone {}
Selector(s) when $prefix: true;
.auro_util_insetNone {}
#{$scope}.#{$prefix}util_insetXxxs
#{manageScope.$scope}.auro_tablist { ... }
Description
.auro_tablist is a helper class to support the UI of a hyperlink using role="tab"
Place selector on outer div or section container with the role="tablist" also applied.
Manage $scope options.
Example
import selector file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist" as *;
utility-display
css
#{manageScope.$scope}.#{manageScope.$prefix}util_displayInline
#{manageScope.$scope}.#{manageScope.$prefix}util_displayInline { ... }
Description
Utility class to display elements inline
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayInline {}
Selector(s) when $scope: true;
.auro .util_displayInline {}
Selector(s) when $prefix: true;
.auro_util_displayInline {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_displayInlineBlock
#{manageScope.$scope}.#{manageScope.$prefix}util_displayInlineBlock { ... }
Description
Utility class to display elements inline-block
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayInline {}
Selector(s) when $scope: true;
.auro .util_displayInline {}
Selector(s) when $prefix: true;
.auro_util_displayInline {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_displayBlock
#{manageScope.$scope}.#{manageScope.$prefix}util_displayBlock { ... }
Description
Utility class to display elements block
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayBlock {}
Selector(s) when $scope: true;
.auro .util_displayBlock {}
Selector(s) when $prefix: true;
.auro_util_displayBlock {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_displayFlex
#{manageScope.$scope}.#{manageScope.$prefix}util_displayFlex { ... }
Description
Utility class to display elements flex
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayFlex {}
Selector(s) when $scope: true;
.auro .util_displayFlex {}
Selector(s) when $prefix: true;
.auro_util_displayFlex {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_displayHidden
#{manageScope.$scope}.#{manageScope.$prefix}util_displayHidden { ... }
Description
Utility class to display elements none
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayHidden {}
Selector(s) when $scope: true;
.auro .util_displayHidden {}
Selector(s) when $prefix: true;
.auro_util_displayHidden {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_displayHiddenVisually
#{manageScope.$scope}.#{manageScope.$prefix}util_displayHiddenVisually { ... }
Description
Utility class to visually hide elements within the UI, but still be picked up by screen readers.
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_displayHiddenVisually {}
Selector(s) when $scope: true;
.auro .util_displayHiddenVisually {}
Selector(s) when $prefix: true;
.auro_util_displayHiddenVisually {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *;
utility-font
css
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDefault
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDefault { ... }
Description
Utility class for default font-weight
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightDefault {}
Selector(s) when $scope: true;
.auro .util_fontWeightDefault {}
Selector(s) when $prefix: true;
.auro_util_fontWeightDefault {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightMedium
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightMedium { ... }
Description
Utility class for font-weight medium
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightMedium {}
Selector(s) when $scope: true;
.auro .util_fontWeightMedium {}
Selector(s) when $prefix: true;
.auro_util_fontWeightMedium {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDisplay
#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDisplay { ... }
Description
Utility class for display font-weight
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_fontWeightDisplay {}
Selector(s) when $scope: true;
.auro .util_fontWeightDisplay {}
Selector(s) when $prefix: true;
.auro_util_fontWeightDisplay {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_body--lg
#{manageScope.$scope}.#{manageScope.$prefix}util_body--lg { ... }
Description
Utility class for font-size lg
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--lg {}
Selector(s) when $scope: true;
.auro .util_body--lg {}
Selector(s) when $prefix: true;
.auro_util_body--lg {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_body--sm
#{manageScope.$scope}.#{manageScope.$prefix}util_body--sm { ... }
Description
Utility class for font-size sm
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--sm {}
Selector(s) when $scope: true;
.auro .util_body--sm {}
Selector(s) when $prefix: true;
.auro_util_body--sm {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_body--xs
#{manageScope.$scope}.#{manageScope.$prefix}util_body--xs { ... }
Description
Utility class for font-size xs
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_body--xs {}
Selector(s) when $scope: true;
.auro .util_body--xs {}
Selector(s) when $prefix: true;
.auro_util_body--xs {}
import Sass file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *;
utility-inset
css
#{manageScope.$scope}.#{manageScope.$prefix}util_insetNone
#{manageScope.$scope}.#{manageScope.$prefix}util_insetNone { ... }
Description
Manage $scope and $prefix options.
Example
Default selector(s)
.util_insetNone {}
Selector(s) when $scope: true;
.auro .util_insetNone {}
Selector(s) when $prefix: true;
.auro_util_insetNone {}
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs
#{$scope}.#{$prefix}util_insetXxxs { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs {}
Selector(s) when $scope: true;
.auro .util_insetXxxs {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs {}
#{$scope}.#{$prefix}util_insetXxxs--stretch
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs {}
Selector(s) when $scope: true;
.auro .util_insetXxxs {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs {}
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--stretch
#{$scope}.#{$prefix}util_insetXxxs--stretch { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--stretch {}
Selector(s) when $scope: true;
.auro .util_insetXxxs--stretch {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs--stretch {}
#{$scope}.#{$prefix}util_insetXxxs--squish
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--stretch { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--stretch {}
Selector(s) when $scope: true;
.auro .util_insetXxxs--stretch {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs--stretch {}
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--squish
#{$scope}.#{$prefix}util_insetXxxs--squish { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--squish {}
Selector(s) when $scope: true;
.auro .util_insetXxxs--squish {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs--squish {}
utility-layout
css
#{$scope}.#{$prefix}util_floatLeft
#{$scope}.#{$prefix}util_floatLeft { ... }
Description
Utility class to set elements to float left
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_floatLeft {}
Selector(s) when $scope: true;
.auro .util_floatLeft {}
Selector(s) when $prefix: true;
.auro_util_floatLeft {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
#{$scope}.#{$prefix}util_floatRight
#{$scope}.#{$prefix}util_floatRight { ... }
Description
Utility class to set elements to float right
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_floatRight {}
Selector(s) when $scope: true;
.auro .util_floatRight {}
Selector(s) when $prefix: true;
.auro_util_floatRight {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
#{$scope}.#{$prefix}util_margin--auto
#{$scope}.#{$prefix}util_margin--auto { ... }
Description
Utility class to center content within a block element
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_margin--auto {}
Selector(s) when $scope: true;
.auro .util_margin--auto {}
Selector(s) when $prefix: true;
.auro_util_margin--auto {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
mixins
auro_layoutPropertiesGenerator
#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--squish { ... }
Description
Manage !important flag.
Manage $scope and $prefix options.
Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--squish {}
Selector(s) when $scope: true;
.auro .util_insetXxxs--squish {}
Selector(s) when $prefix: true;
.auro_util_insetXxxs--squish {}
utility-layout
css
#{manageScope.$scope}.#{manageScope.$prefix}util_floatLeft
#{manageScope.$scope}.#{manageScope.$prefix}util_floatLeft { ... }
Description
Utility class to set elements to float left
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_floatLeft {}
Selector(s) when $scope: true;
.auro .util_floatLeft {}
Selector(s) when $prefix: true;
.auro_util_floatLeft {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_floatRight
#{manageScope.$scope}.#{manageScope.$prefix}util_floatRight { ... }
Description
Utility class to set elements to float right
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_floatRight {}
Selector(s) when $scope: true;
.auro .util_floatRight {}
Selector(s) when $prefix: true;
.auro_util_floatRight {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_margin--auto
#{manageScope.$scope}.#{manageScope.$prefix}util_margin--auto { ... }
Description
Utility class to center content within a block element
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_margin--auto {}
Selector(s) when $scope: true;
.auro .util_margin--auto {}
Selector(s) when $prefix: true;
.auro_util_margin--auto {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *;
mixins
auro_layoutPropertiesGenerator
example default output selector
.util_paddingLeft--none {}
example output selector when $scope: true;
.auro .util_paddingLeft--none {}
example output selector when $prefix: true;
.auro_util_paddingLeft--none {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";
import mixin file with altered output values prior to import
$layout-properties: margin;
-$layout-extensions: Right;
-$layout-modifiers: (
-  "25": $ds-size-25,
-  "50": $ds-size-50,
-  "600": $ds-size-600,
-  "800": $ds-size-800,
-);
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";
Requires
auro_spacing
example default output selector
.util_paddingLeft--none {}
example output selector when $scope: true;
.auro .util_paddingLeft--none {}
example output selector when $prefix: true;
.auro_util_paddingLeft--none {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator" as *;
import mixin file with altered output values
// Load any modules referenced by your overrides (e.g. design tokens) first,
+// then pass the overrides through `@use ... with (...)`. Under the Sass module
+// system, redefining `$layout-*` before the `@use` no longer configures it.
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator" with (
+  $layout-properties: margin,
+  $layout-extensions: Right,
+  $layout-modifiers: (
+    "25": tokens.$ds-size-25,
+    "50": tokens.$ds-size-50,
+    "600": tokens.$ds-size-600,
+    "800": tokens.$ds-size-800
+  )
+);
Requires
auro_spacing
import dependencies
@import "./node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariableMap";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";
import with custom over-rides
$ds-spacing-types: inline;
-$ds-spacing-options: 200;
-@import "./node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariableMap";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";
Throws
  • INVALID, \
Requires
utility-list
css
#{$scope}.#{$prefix}util_listUnstyled
use dependencies
@use "@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";
use with custom over-rides
@use "@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility" with (
+  $ds-spacing-types: inline,
+  $ds-spacing-options: 200
+);
Throws
  • INVALID, \
Requires
utility-list
css
#{manageScope.$scope}.#{manageScope.$prefix}util_listUnstyled
#{$scope}.#{$prefix}util_listUnstyled { ... }
Description
Utility class to display unordered lists without bulleting
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listUnstyled {}
Selector(s) when $scope: true;
.auro .util_listUnstyled {}
Selector(s) when $prefix: true;
.auro_util_listUnstyled {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
#{$scope}.#{$prefix}util_listNoIndent
#{manageScope.$scope}.#{manageScope.$prefix}util_listUnstyled { ... }
Description
Utility class to display unordered lists without bulleting
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listUnstyled {}
Selector(s) when $scope: true;
.auro .util_listUnstyled {}
Selector(s) when $prefix: true;
.auro_util_listUnstyled {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndent
#{$scope}.#{$prefix}util_listNoIndent { ... }
Description
Utility class to display unordered lists with non-indented bullets
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listNoIndent {}
Selector(s) when $scope: true;
.auro .util_listNoIndent {}
Selector(s) when $prefix: true;
.auro_util_listNoIndent {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
#{$scope}.#{$prefix}util_listIndented
#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndent { ... }
Description
Utility class to display unordered lists with non-indented bullets
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listNoIndent {}
Selector(s) when $scope: true;
.auro .util_listNoIndent {}
Selector(s) when $prefix: true;
.auro_util_listNoIndent {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_listIndented
#{$scope}.#{$prefix}util_listIndented { ... }
Description
Utility class to display unordered lists with non-indented bullets
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listIndented {}
Selector(s) when $scope: true;
.auro .util_listIndented {}
Selector(s) when $prefix: true;
.auro_util_listIndented {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
#{$scope}.#{$prefix}util_listNoIndentOrdered
#{manageScope.$scope}.#{manageScope.$prefix}util_listIndented { ... }
Description
Utility class to display unordered lists with non-indented bullets
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listIndented {}
Selector(s) when $scope: true;
.auro .util_listIndented {}
Selector(s) when $prefix: true;
.auro_util_listIndented {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndentOrdered
#{$scope}.#{$prefix}util_listNoIndentOrdered { ... }
Description
Utility class to display ordered lists with non-indented numbering
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listNoIndentOrdered {}
Selector(s) when $scope: true;
.auro .util_listNoIndentOrdered {}
Selector(s) when $prefix: true;
.auro_util_listNoIndentOrdered {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
#{$scope}.#{$prefix}util_listIndentedOrdered
#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndentOrdered { ... }
Description
Utility class to display ordered lists with non-indented numbering
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listNoIndentOrdered {}
Selector(s) when $scope: true;
.auro .util_listNoIndentOrdered {}
Selector(s) when $prefix: true;
.auro_util_listNoIndentOrdered {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_listIndentedOrdered
#{$scope}.#{$prefix}util_listIndentedOrdered { ... }
Description
Utility class to display ordered lists with non-indented numbering
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listIndentedOrdered {}
Selector(s) when $scope: true;
.auro .util_listIndentedOrdered {}
Selector(s) when $prefix: true;
.auro_util_listIndentedOrdered {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
#{$scope}.#{$prefix}util_listAuroIcon
#{manageScope.$scope}.#{manageScope.$prefix}util_listIndentedOrdered { ... }
Description
Utility class to display ordered lists with non-indented numbering
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listIndentedOrdered {}
Selector(s) when $scope: true;
.auro .util_listIndentedOrdered {}
Selector(s) when $prefix: true;
.auro_util_listIndentedOrdered {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
#{manageScope.$scope}.#{manageScope.$prefix}util_listAuroIcon
#{$scope}.#{$prefix}util_listAuroIcon { ... }
Description
Utility class to display unordered lists with auro icons
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listAuroIcon {}
Selector(s) when $scope: true;
.auro .util_listAuroIcon {}
Selector(s) when $prefix: true;
.auro_util_listAuroIcon {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
utility-mixins
mixins
auro_anchorButton
#{manageScope.$scope}.#{manageScope.$prefix}util_listAuroIcon { ... }
Description
Utility class to display unordered lists with auro icons
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_listAuroIcon {}
Selector(s) when $scope: true;
.auro .util_listAuroIcon {}
Selector(s) when $prefix: true;
.auro_util_listAuroIcon {}
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *;
utility-mixins
mixins
auro_anchorButton
@mixin auro_anchorButton($style, $env, $display: inline-block) { ... }
Description
Creates Sass variable or custom property output for multi-use button shape
Parameters
NameDescriptionTypeDefault value
$style
Specifies the style type (sass, css)
String—
$env
Specifies the style environment (component, noncomponent)
String—
$display
Specifies display type
Stringinline-block
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton";
Set properties for Sass output that is NOT within a component
.auro_roleButton {
+ }" data-collapsed="@mixin auro_anchorButton($style, $env, $display: inline-block) { ... }">@mixin auro_anchorButton($style, $env, $display: inline-block) { ... }
Description
Creates Sass variable or custom property output for multi-use button shape
Parameters
NameDescriptionTypeDefault value
$style
Specifies the style type (sass, css)
String—
$env
Specifies the style environment (component, noncomponent)
String—
$display
Specifies display type
Stringinline-block
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton" as *;
Set properties for Sass output that is NOT within a component
.auro_roleButton {
     @include auro_anchorButton(sass, noncomponent);
 }
Set properties for CSS output that IS within a component
.button {
     @include auro_anchorButton(css, component)
@@ -1447,22 +1425,22 @@
   $isactive-color: null;
 
   @if $style == css {
-    $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
-    $border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
-    $padding: var(--ds-size-200, $ds-size-200, $ds-size-200, $ds-size-200);
-    $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
-    $isactive-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+    $color: var(--ds-color-text-ui-default-default, tokens.$ds-color-text-ui-default-default);
+    $border-color: var(--ds-color-border-primary-default, tokens.$ds-color-border-primary-default);
+    $padding: var(--ds-size-200, tokens.$ds-size-200, tokens.$ds-size-200, tokens.$ds-size-200);
+    $hover-color: var(--ds-color-container-ui-primary-hover-default, tokens.$ds-color-container-ui-primary-hover-default);
+    $isactive-color: var(--ds-color-text-primary-default, tokens.$ds-color-text-primary-default);
   } @else if $style == sass or $style == scss {
-    $color: $ds-color-text-ui-default-default;
-    $border-color: $ds-color-border-primary-default;
-    $padding: $ds-size-200;
-    $hover-color: $ds-color-container-ui-primary-hover-default;
-    $isactive-color: $ds-color-text-primary-default;
+    $color: tokens.$ds-color-text-ui-default-default;
+    $border-color: tokens.$ds-color-border-primary-default;
+    $padding: tokens.$ds-size-200;
+    $hover-color: tokens.$ds-color-container-ui-primary-hover-default;
+    $isactive-color: tokens.$ds-color-text-primary-default;
   } @else {
     @error 'Invalid $style option. Please use `css` or `sass`';
   }
 
-  padding: $ds-size-200;
+  padding: tokens.$ds-size-200;
 
   color: $color;
   border-width: 0 0 1px;
@@ -1503,81 +1481,67 @@
     border-width: 0 0 2px;
     border-color: currentColor;
   }
- }" data-collapsed="@mixin auro_anchorTab($style, $env) { ... }">@mixin auro_anchorTab($style, $env) { ... }
Description
Creates Sass variable or custom property output for multi-use tab shape
Parameters
NameDescriptionTypeDefault value
$style
Specifies the style type (sass, css)
String—
$env
Specifies the style environment (component, noncomponent)
String—
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab";
Set properties for Sass output that is NOT within a component
.auro_roleTab {
+ }" data-collapsed="@mixin auro_anchorTab($style, $env) { ... }">@mixin auro_anchorTab($style, $env) { ... }
Description
Creates Sass variable or custom property output for multi-use tab shape
Parameters
NameDescriptionTypeDefault value
$style
Specifies the style type (sass, css)
String—
$env
Specifies the style environment (component, noncomponent)
String—
Example
import mixin file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab" as *;
Set properties for Sass output that is NOT within a component
.auro_roleTab {
    @include auro_anchorTab(sass, noncomponent);
 }
Set properties for CSS output that IS within a component
.hyperlink--tab {
     @include auro_anchorTab(css, component)
-}
Throws
  • Invalid $style option. Please use css or sass
  • Invalid $env option. Please use component or noncomponent
utility-responsive
css
#{$scope}.#{$prefix}util_is-smOnly
Throws
  • Invalid $style option. Please use css or sass
  • Invalid $env option. Please use component or noncomponent
utility-responsive
css
#{manageScope.$scope}.#{manageScope.$prefix}util_is-smOnly
#{$scope}.#{$prefix}util_is-smOnly { ... }
Description
Utility class to restrain visibility of UI element to sm users only.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-smOnly {}
Selector(s) when $scope: true;
.auro .util_is-smOnly {}
Selector(s) when $prefix: true;
.auro_util_is-smOnly {}
#{$scope}.#{$prefix}util_is-mdOnly
#{manageScope.$scope}.#{manageScope.$prefix}util_is-smOnly { ... }
Description
Utility class to restrain visibility of UI element to sm users only.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-smOnly {}
Selector(s) when $scope: true;
.auro .util_is-smOnly {}
Selector(s) when $prefix: true;
.auro_util_is-smOnly {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly
#{$scope}.#{$prefix}util_is-mdOnly { ... }
Description
Utility class to restrain block visibility of UI element between sm and md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-mdOnly {}
Selector(s) when $scope: true;
.auro .util_is-mdOnly {}
Selector(s) when $prefix: true;
.auro_util_is-mdOnly {}
#{$scope}.#{$prefix}util_is-mdOnly--inline
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly { ... }
Description
Utility class to restrain block visibility of UI element between sm and md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-mdOnly {}
Selector(s) when $scope: true;
.auro .util_is-mdOnly {}
Selector(s) when $prefix: true;
.auro_util_is-mdOnly {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly--inline
#{$scope}.#{$prefix}util_is-mdOnly--inline { ... }
Description
Utility class to restrain inline-block visibility of UI element between sm and md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-mdOnly--inline {}
Selector(s) when $scope: true;
.auro .util_is-mdOnly--inline {}
Selector(s) when $prefix: true;
.auro_util_is-mdOnly--inline {}
#{$scope}.#{$prefix}util_is-mdAppears
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly--inline { ... }
Description
Utility class to restrain inline-block visibility of UI element between sm and md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-mdOnly--inline {}
Selector(s) when $scope: true;
.auro .util_is-mdOnly--inline {}
Selector(s) when $prefix: true;
.auro_util_is-mdOnly--inline {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears
#{$scope}.#{$prefix}util_is-mdAppears { ... }
Description
Utility class to restrain block visibility of UI element for md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-mdAppears {}
Selector(s) when $scope: true;
.auro .util_is-mdAppears {}
Selector(s) when $prefix: true;
.auro_util_is-mdAppears {}
#{$scope}.#{$prefix}util_is-mdAppears--inline
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears { ... }
Description
Utility class to restrain block visibility of UI element for md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-mdAppears {}
Selector(s) when $scope: true;
.auro .util_is-mdAppears {}
Selector(s) when $prefix: true;
.auro_util_is-mdAppears {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears--inline
#{$scope}.#{$prefix}util_is-mdAppears--inline { ... }
Description
Utility class to restrain block visibility of UI element for md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-mdAppears--inline {}
Selector(s) when $scope: true;
.auro .util_is-mdAppears--inline {}
Selector(s) when $prefix: true;
.auro_util_is-mdAppears--inline {}
#{$scope}.#{$prefix}util_is-lgOnly
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears--inline { ... }
Description
Utility class to restrain block visibility of UI element for md screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-mdAppears--inline {}
Selector(s) when $scope: true;
.auro .util_is-mdAppears--inline {}
Selector(s) when $prefix: true;
.auro_util_is-mdAppears--inline {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly
#{$scope}.#{$prefix}util_is-lgOnly { ... }
Description
Utility class to restrain block visibility of UI element for lg screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-lgOnly {}
Selector(s) when $scope: true;
.auro .util_is-lgOnly {}
Selector(s) when $prefix: true;
.auro_util_is-lgOnly {}
#{$scope}.#{$prefix}util_is-lgOnly--inline
#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly { ... }
Description
Utility class to restrain block visibility of UI element for lg screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
Default selector(s)
.util_is-lgOnly {}
Selector(s) when $scope: true;
.auro .util_is-lgOnly {}
Selector(s) when $prefix: true;
.auro_util_is-lgOnly {}
#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly--inline
#{$scope}.#{$prefix}util_is-lgOnly--inline { ... }
Description
Utility class to restrain block visibility of UI element for lg screens.
Manage !important flag.
Manage $scope and $prefix options.
Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_is-lgOnly--inline {}
Selector(s) when $scope: true;
.auro .util_is-lgOnly--inline {}
Selector(s) when $prefix: true;
.auro_util_is-lgOnly--inline {}
#{$scope}.#{$prefix}util_img-is-responsive
#{$scope}.#{$prefix}util_img-is-responsive { ... }
Description
Utility class that will allow img src to fill 100% of space for responsive characteristics
See variable use for managing the !important flag.
Manage $scope and $prefix options.
Example
import selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
Default selector(s)
.util_img-is-responsive {}
Selector(s) when $scope: true;
.auro .util_img-is-responsive {}
Selector(s) when $prefix: true;
.auro_util_img-is-responsive {}
Example HTML selector use
<img class="util_img-is-responsive" src=" ... " alt="" />
utility-type
css
#{$scope}.#{$prefix}util_nowrap
#{$scope}.#{$prefix}util_nowrap { ... }
Description
Utility class force no wrap on content
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_nowrap {}
Selector(s) when $scope: true;
.auro .util_nowrap {}
Selector(s) when $prefix: true;
.auro_util_nowrap {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
#{$scope}.#{$prefix}util_capitalize
#{$scope}.#{$prefix}util_capitalize { ... }
Description
Utility class to capitalize a string
Manage !important flag.
Manage $scope and $prefix options.
Example
Default selector(s)
.util_capitalize {}
Selector(s) when $scope: true;
.auro .util_capitalize {}
Selector(s) when $prefix: true;
.auro_util_capitalize {}
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
utility-variables
variables
css-ns
$css-ns: "wcss" !default;
Description
Global CSS theme custom property namespace
Defines the namespace used for all CSS theme custom properties
Type
String
Example
$css-ns: 'auro'; // Would result in --auro-property-name
 @aurodesignsystem/webcorestylesheets - v11.1.3 , under Apache-2.0
SassDoc Logo

\ No newline at end of file
+}" data-collapsed="#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly--inline { ... }">#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly--inline { ... }

Description

Utility class to restrain block visibility of UI element for lg screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
+@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;

Default selector(s)

.util_is-lgOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly--inline {}

#{manageScope.$scope}.#{manageScope.$prefix}util_img-is-responsive

#{manageScope.$scope}.#{manageScope.$prefix}util_img-is-responsive { ... }

Description

Utility class that will allow img src to fill 100% of space for responsive characteristics

See variable use for managing the !important flag.

Manage $scope and $prefix options.

Example

import selector partial file

@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;

Default selector(s)

.util_img-is-responsive {}

Selector(s) when $scope: true;

.auro .util_img-is-responsive {}

Selector(s) when $prefix: true;

.auro_util_img-is-responsive {}

Example HTML selector use

<img class="util_img-is-responsive" src=" ... " alt="" />

utility-type

css

#{manageScope.$scope}.#{manageScope.$prefix}util_nowrap

#{manageScope.$scope}.#{manageScope.$prefix}util_nowrap { ... }

Description

Utility class force no wrap on content

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_nowrap {}

Selector(s) when $scope: true;

.auro .util_nowrap {}

Selector(s) when $prefix: true;

.auro_util_nowrap {}

import mixin file

@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties" as *;

#{manageScope.$scope}.#{manageScope.$prefix}util_capitalize

#{manageScope.$scope}.#{manageScope.$prefix}util_capitalize { ... }

Description

Utility class to capitalize a string

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_capitalize {}

Selector(s) when $scope: true;

.auro .util_capitalize {}

Selector(s) when $prefix: true;

.auro_util_capitalize {}

import mixin file

@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties" as *;

utility-variables

variables

css-ns

$css-ns: "wcss" !default;

Description

Global CSS theme custom property namespace

Defines the namespace used for all CSS theme custom properties

Type

String

Example

$css-ns: 'auro'; // Would result in --auro-property-name
@aurodesignsystem/webcorestylesheets - v11.1.3 , under Apache-2.0
SassDoc Logo
\ No newline at end of file diff --git a/docs/post-mortem/1388992.md b/docs/post-mortem/1388992.md new file mode 100644 index 00000000..8ca798be --- /dev/null +++ b/docs/post-mortem/1388992.md @@ -0,0 +1,68 @@ +# AB#1388992 + +## Executive Summary + +The WebCoreStyleSheets feature documentation pages linked out to the old **Orion** design system website for their "see the documentation" references. That site was retired when the team completed its move from Orion to Auro, so every one of those links returned a "page not found" error. This change repoints all of those references to the current, live WebCoreStyleSheets documentation site, so readers can once again follow them and land on the correct reference material. + +Tracked in [AB#1388992](https://itsals.visualstudio.com/E_Retain_Content/_workitems/edit/1388992). + +## The Problem + +The public feature documentation at `auro.alaskaair.com/webcorestylesheets/features` is generated from the repository's `FEATURES.md`. Under most feature headings, that page offered a convenience link — "see the API", "see the spec", "prefixing and scoping API" — meant to take the reader to the detailed reference for that feature. + +Those links still pointed at the previous-generation Orion site (`alaskaairlines.github.io/OrionWebCoreStyleSheets/...`). Because that site has been decommissioned, following any of them produced a dead end. Broken links on the documentation site erode trust and block developers from finding the guidance they need to use the framework correctly. + +## Root Cause + +The links were hard-coded in `FEATURES.md` and were never updated when the documentation site moved from Orion to the current WebCoreStyleSheets SassDoc site (`alaskaairlines.github.io/WebCoreStyleSheets/`, built by `scripts/sassdoc.build.mjs`). Five references still carried the retired `OrionWebCoreStyleSheets` host: + +- Line 7 — prefixing and scoping API → `#scope-prefix` +- Line 86 — `!important` spec → `#utility-variable-important` +- Line 97 — `layoutPropertiesGenerator` API → `#utility-layout-mixin-auro_layoutPropertiesGenerator` +- Line 107 — `insetUtility` API → `#utility-layout-mixin-auro_inset` +- Line 119 — `spacingUtility` API → `#utility-layout-mixin-auro_spacing` + +A compounding factor for one link: the inset utility was demoted from a SassDoc **mixin** to a statically generated set of classes (`src/utilityClasses/_inset.scss`, now flagged via `deprecated.deprecated(...)`). As a result its SassDoc anchor changed from `#utility-layout-mixin-auro_inset` to the group anchor `#utility-inset`, so a naive host-only swap would still have 404'd on the fragment. + +## The Fix + +All five links in `FEATURES.md` were repointed to the current documentation site, and upgraded from `http://` to `https://`: + +- The four still-valid anchors (`#scope-prefix`, `#utility-variable-important`, `#utility-layout-mixin-auro_layoutPropertiesGenerator`, `#utility-layout-mixin-auro_spacing`) kept their fragments and only had the host changed from `alaskaairlines.github.io/OrionWebCoreStyleSheets/` to `alaskaairlines.github.io/WebCoreStyleSheets/`. +- The inset link was remapped to the correct current anchor: `https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-inset`. + +No other documentation files needed changes: `README.md` and `MIGRATION.md` already point at the live site root, and `FAQ.md`'s deep link (`#utility-layout-mixin-auro_layoutPropertiesGenerator`) was already on the current host and remains valid. + +## Why This Works + +The current documentation site is generated by SassDoc from `./src` into `./docs` and published at `alaskaairlines.github.io/WebCoreStyleSheets/`. SassDoc uses a deterministic anchor scheme (`--`) that the Orion site also used, so four of the five fragments carry over unchanged — only the host was ever wrong for those. + +Each destination anchor was verified to exist in the built `docs/index.html` before shipping: + +- `#scope-prefix` ✓ +- `#utility-variable-important` ✓ +- `#utility-layout-mixin-auro_layoutPropertiesGenerator` ✓ +- `#utility-inset` ✓ (the old `#utility-layout-mixin-auro_inset` no longer exists, confirming the remap was necessary) +- `#utility-layout-mixin-auro_spacing` ✓ + +Because `docs/index.html` is the exact artifact that is published, an anchor present there is present on the live site — the links resolve to real, current reference material rather than a retired host. + +## Outcome + +Every feature-heading documentation link on the WebCoreStyleSheets features page now points to live, working reference material instead of a decommissioned site. Readers following "see the API / spec / prefixing and scoping API" from the features page reach the intended content, restoring the documentation's reliability and reflecting the completed migration off Orion. + +## Ticket Completeness + +Both requirements expressed in the ticket are resolved. (The ticket had no formal Description or Acceptance Criteria fields; requirements were taken from its repro-steps "Current/Desired behavior".) + +**Resolved** + +- *Replace the retired-Orion "see the documentation" links on the WebCoreStyleSheets feature pages* — all five Orion-host links in `FEATURES.md` (the source of the features page) were replaced; a repo-wide check confirms no `OrionWebCoreStyleSheets` references remain in the docs. +- *Each link should point to the current, working documentation for that feature* — all five now target `alaskaairlines.github.io/WebCoreStyleSheets/`, and every destination anchor was verified present in the built `docs/index.html`, including the remapped `#utility-inset`. + +## Learnings + +- Documentation links to a design-system predecessor (Orion) are a recurring debt when migrating to Auro; a host rename alone is insufficient when the underlying doc generator has reorganized anchors. +- SassDoc anchors are tied to the symbol's **kind** (mixin vs. class group). Deprecating a mixin into generated classes silently changes its anchor (`#utility-layout-mixin-auro_inset` → `#utility-inset`), which can break deep links even after the host is corrected. +- Always validate fragment anchors against the actual built `docs/index.html`, not just the host — a link that returns 200 at the host can still land nowhere if the fragment is stale. +- Worth a follow-up: a CI link-check over `*.md` for retired hosts (`OrionWebCoreStyleSheets`) and for anchors that don't exist in the built docs would catch this class of regression automatically. diff --git a/docs/post-mortem/1612078.md b/docs/post-mortem/1612078.md new file mode 100644 index 00000000..df130fe1 --- /dev/null +++ b/docs/post-mortem/1612078.md @@ -0,0 +1,201 @@ +# AB#1612078 + +## Executive Summary + +WebCoreStyleSheets (WCSS) previously shipped each visual theme's typography settings as a +separate stylesheet with no way to switch typography themes within a single page. This work +adds a standard "data attribute" hook so a consumer can activate any theme's typography on +part of a page — and bundles every theme's typography into each themed stylesheet so switching +between them no longer requires loading multiple files. The change is additive for typography: +existing pages render exactly as before unless they opt in to the new hook. It mirrors the same +scoping convention already shipped by AuroDesignTokens, keeping the two systems aligned. + +A follow-up hardening pass closed a release-blocking gap that would have broken every downstream +Sass consumer on the next publish, and removed leftover files so the shipped package reflects the +new architecture cleanly. + +Two follow-on decisions were made during the work at the team's direction: the **Auro 2** theme +was fully removed from the build, and the **Auro 1** theme's attribute code was set to `atm`. + +Ticket: [AB#1612078](https://itsals.visualstudio.com/E_Retain_Content/_workitems/edit/1612078) + +## The Problem + +WCSS builds one bundled stylesheet per theme (Alaska, Alaska Classic, Auro 1, Auro 2, Hawaiian). +Each file exposed its typography settings under a single global scope, so there was no way to say +"use Alaska typography here, Hawaiian typography there" on the same page, and no way to switch a +theme's typography without swapping out the whole stylesheet. AuroDesignSystem's tokens already +solved this with a per-theme attribute selector; WCSS had no equivalent, leaving the two systems +inconsistent for anyone using both. + +## Root Cause + +The type custom properties were emitted under a flat, unscoped `:root {}` block by +`generate-theme-type-css-vars` in `src/type/mixins/_type-generator.scss`, invoked once per theme +from `generate-theme` in `src/type/mixins/_theme-generator.scss`. Because the only selector was +`:root`, there was no attribute-based hook a consumer could target, and each themed bundle +(`src/bundled/themes/theme.global.template.scss` → `dist/bundled/themes/*.global.css`) contained +only its own theme's variables. Nothing in the pipeline knew each design-tokens theme's short +"code," so it could not construct the `[data-aag-theme=…]` selectors that AuroDesignTokens uses. + +A second, latent cause surfaced in review: the fix depends on a **generated, git-ignored** Sass +partial (`src/type/mixins/_theme-codes.scss`). Nothing regenerated it at publish time, and the CI +release job restores a build cache that does not include `src/`. On a fresh `npm publish` the file +would be physically absent from the working tree, so — although `.npmignore` does not exclude it — +npm would ship a package missing the partial, and every downstream Sass consumer would hit a fatal +`Can't find stylesheet to import: theme-codes`. + +## The Fix + +- **Theme codes are sourced, not hardcoded.** A new codegen step, + `scripts/theme-codes.build.mjs`, reads `THEME_DEFINITIONS` from + `@aurodesignsystem/design-tokens` and writes a Sass map partial + (`src/type/mixins/_theme-codes.scss`, git-ignored) mapping each theme directory to its code. + This keeps WCSS aligned with design-tokens instead of drifting from a hand-maintained list. +- **Scoped selector builder.** `src/type/mixins/_type-generator.scss` gained + `wcss-type-scope-selector($theme-name, $include-root)`, which emits both the base + `[data-aag-theme="aag-theme-"]` and the `-type` suffixed selector, optionally prefixed + with `:root` for the file's default theme. A new `generate-multi-theme-type-css-vars` mixin + emits the default theme under `:root` + its attributes and every other theme under its + attributes only. +- **Multi-theme bundles.** New entry files `src/bundled/type/themes/.scss` plus the + aggregated `src/bundled/type/themes/_all-theme-configs.scss` compile to + `dist/bundled/type/themes/.css` (+ `.min`) via a loop added to + `scripts/type.classes.css.build.mjs`. The global template + (`src/bundled/themes/theme.global.template.scss`) was updated to import the multi-theme type + vars (all themes) plus the theme-agnostic typography classes, so each `*.global.css` now + carries every theme's typography with its namesake as the `:root` default. +- **Publish safety (`prepack`).** A `prepack` script (`node scripts/theme-codes.build.mjs`) was + added to `package.json`, so npm regenerates the git-ignored partial into the working tree + immediately before packing during `npm publish` (which semantic-release invokes). This + guarantees the file is present in the published package regardless of what the CI build cache + contains — closing the release-blocking gap above. +- **Build wiring & de-dup.** `build:theme-codes` runs first in the `build` and test flows so the + generated map exists before any Sass compile. The duplicate invocation was removed from + `build:dist-bundle` (which is only ever called from `build`), so the codegen no longer runs + twice per build. +- **Tests.** `tests/typeThemeScoping.spec.scss` (sass-true) asserts the scoped selectors for + Alaska, Hawaiian, and Auro 1, the `:root`-only fallback for an unknown theme with `:root` + included, and the same unknown-theme fallback with `:root` excluded (the null-code branch + short-circuits before `$include-root` is consulted). +- **Package cleanup.** Four orphaned per-component subdirectories under + `src/bundled/type/themes/` (`alaska/`, `alaska-classic/`, `auro-1/`, `hawaiian/` — each with + `accent`/`body`/`display`/`heading` files using the older `@use … as v` + individual-config + pattern) were deleted; nothing in the codebase imported them, and they would have shipped in the + package alongside the new flat bundles and misled maintainers. `_all-theme-configs.scss` gained a + maintenance comment noting it is a **static** manifest while theme discovery elsewhere is + dynamic, so adding a theme requires updating it by hand or the multi-theme bundles silently omit + the new theme. +- **Auro 2 removal (team direction).** A shared `scripts/excluded-themes.mjs` filter removes + Auro 2 from all three theme-driven build scripts; all Auro 2 source directories/partials and + its entries in `_all-theme-configs.scss` and `src/config/_index.scss` were deleted. +- **Auro 1 code override (team direction).** `scripts/theme-codes.build.mjs` includes a + `THEME_CODE_OVERRIDES` map setting Auro 1's emitted code to `atm` (rather than design-tokens' + `a1`), so its selectors are `aag-theme-atm` / `aag-theme-atm-type`. + +## Why This Works + +The `:root` output is retained for every theme, so the cascade for existing consumers is +unchanged — the attribute selectors are purely additive and only take effect when a consumer sets +`data-aag-theme` on an element. Deriving the selector from design-tokens' own `THEME_DEFINITIONS` +means the WCSS attribute value matches AuroDesignTokens for the same theme, so both systems can be +driven by one attribute. Because each theme's type-config Sass variables are uniquely named, all +themes' variables coexist in one file without collision, which is what makes the multi-theme +"switch within one stylesheet" output safe. The typography classes are theme-agnostic (they +reference the custom properties), so emitting them once per bundle keeps output correct and +non-duplicated. + +The `prepack` step is what makes the "non-breaking for existing consumers" guarantee actually +hold at publish time: because the generated partial is regenerated from the source of truth right +before packing, it is deterministic and cannot go stale, and Sass-source consumers can import the +type mixins on a fresh install without a compile error. Centralizing both the exclusion list and +the code override in single, commented locations keeps the theme list otherwise fully derived from +design-tokens. + +## Outcome + +- Each themed stylesheet now lets a consumer scope or switch any theme's typography within a + single page via the `data-aag-theme` attribute, matching AuroDesignTokens' convention. +- Default rendering is unchanged for typography — the new selectors are opt-in. +- The published package now contains the generated theme-codes partial, so downstream Sass + consumers compile cleanly on the next release (the release-blocking gap is closed). +- Leftover per-component theme files no longer ship, so the package reflects the flat multi-theme + bundle architecture without misleading dead files. +- Auro 2 no longer ships in any build output. +- Auro 1's typography activates under the `atm` attribute code. +- The full build passes and the automated test suite is green (50/50). + +## Ticket Completeness + +**3 of 4 acceptance criteria resolved; 1 partial (color decision deferred without a TRD).** Note +that scope was intentionally broadened beyond the ticket (all themes scoped, not just three; +multi-theme-per-file output; Auro 2 removed; Auro 1 code overridden), at the team's direction +during the work. + +**Resolved** +- *Attribute selectors wrap type custom properties for Alaska, Hawaiian, and Auro 1, additive to + `:root`.* Delivered via `wcss-type-scope-selector()` and the multi-theme mixin; `:root` output + retained for all themes. +- *Existing consumers see no change in rendered typography (non-breaking).* The scoped selectors + are additive; `:root` blocks are unchanged. The `prepack` fix ensures this holds at publish time + for Sass-source consumers, who would otherwise have hit a fatal missing-import error. +- *sass-true spec(s) assert the new type attribute selectors for Alaska, Hawaiian, and Auro 1.* + Added in `tests/typeThemeScoping.spec.scss` (passing), including both unknown-theme fallback + paths. + +**Not Resolved / Partial** +- *A decision is documented (via TRD) on whether/how color scoping is achieved.* **Partial.** + Color was correctly treated as out of scope (WCSS bakes color to literals at compile time, so + there is nothing to attribute-scope yet), but no TRD was produced to formally document the + decision — it lives only in the ticket and this session. A follow-up TRD/ticket is still owed. +- *Non-breaking across the whole change set.* **Caveat, not a ticket miss.** The typography + scoping is non-breaking, but two team-directed additions are breaking beyond the ticket: any + consumer importing `type/themes/auro-2` (now deleted) or relying on Auro 1's `a1`/`aag-theme-a1` + selectors (now `atm`) is affected. These fall outside the original acceptance criteria and were + explicit later requests. + +## Learnings + +- **Derive from the source of truth.** Reading theme codes from design-tokens' + `THEME_DEFINITIONS` at build time avoids a hand-maintained list drifting out of alignment — the + same principle applied to the exclusion filter and the code override, each centralized in one + place. +- **A git-ignored generated file needs a `prepack`/`prepublishOnly` hook to actually ship.** It is + not enough that `.npmignore` allows the file and `src/` is published — npm only packs what is + physically in the working tree at pack time. CI restores a cache that excludes `src/`, so the + generated partial was absent on a fresh release. Regenerating it in `prepack` (not `postinstall`, + which is excluded from the package and would break consumer installs) is the reliable fix. +- **Static manifests hidden inside a dynamic pipeline drift silently.** `_all-theme-configs.scss` + is hand-maintained while the build scripts discover themes dynamically; without a comment + flagging that, adding a theme would produce incomplete multi-theme output with no build error. A + visible maintenance note is the cheapest guard. +- **Delete dead files with the feature, not later.** The old per-component theme subdirectories + were superseded by the flat bundles but left behind; they shipped in the package and invited + confusion. Removing them as part of the change keeps the published surface honest. +- **Confirm output shape early.** The first implementation scoped only the `*.global.css` files + single-theme; the intended deliverable was multi-theme output under `dist/bundled/type/*`. + Pinning down "which files, what shape" before building would have avoided a rework. +- **A stated alignment goal can be overridden by product choice — record the tension.** The ticket + wanted the attribute naming aligned with AuroDesignTokens (which uses `a1` for Auro 1), but the + team chose `atm`. That divergence is intentional but worth flagging for anyone using both + systems, since it defeats the "one attribute drives both" benefit for that theme. +- **Report ground truth over an edited expectation.** When a test assertion was changed to expect + a value the tokens didn't support, verifying against `THEME_DEFINITIONS` (rather than trusting + the edit) surfaced the conflict for an explicit decision instead of silently encoding a wrong + value. + +## Iterations That Didn't Work + +- **Single-theme scoping in the global files only.** The initial attempt added the attribute + selectors just to `dist/bundled/themes/*.global.css`, each carrying only its own theme. This + was rejected: the deliverable needed the scoped selectors in `dist/bundled/type/*` and needed + every theme included per file for runtime switching. Superseded by the multi-theme mixin and the + per-theme entry files. +- **Assuming the generated partial ships because `src/` is published.** An early reading concluded + the theme-codes partial would ship simply because the package includes `src/`. Review disproved + this — the file is git-ignored and absent from CI's restored cache at publish time — and the + `prepack` regeneration replaced that assumption. +- **Auro 1 code as `a1`, then as `atm`.** design-tokens defines Auro 1's code as `a1`, and an + early test edit expected an unrelated `atm` value; that assertion was first corrected back to + `a1` after validating the tokens. The team then explicitly required `atm` as an intentional + override, which was implemented via `THEME_CODE_OVERRIDES` and the spec updated to match. diff --git a/package-lock.json b/package-lock.json index e83ebce5..add48a51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,39 +10,38 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/design-tokens": "^8.19.0", - "chalk": "^5.4.1" + "@aurodesignsystem/design-tokens": "^9.3.3" }, "devDependencies": { "@commitlint/cli": "^19.6.1", "@commitlint/config-conventional": "^19.6.0", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.0", - "@semantic-release/npm": "^13.0.0", - "auto-changelog": "^2.5.0", + "@semantic-release/npm": "^13.1.5", + "auto-changelog": "^2.6.0", "concat": "^1.0.3", "copyfiles": "^2.4.1", "cssnano": "^7.0.7", "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", - "live-server": "^1.2.1", - "nodemon": "^3.1.9", + "live-server": "^1.2.2", + "nodemon": "^3.1.14", "npm-run-all": "^4.1.5", - "postcss": "^8.5.3", + "postcss": "^8.5.26", "postcss-scss": "^4.0.9", "replace-in-file": "^7.2.0", - "sass": "^1.77.8", + "sass": "^1.102.0", "sass-lint": "^1.13.1", "sass-true": ">=6.1.0", - "sassdoc": "^2.7.3", - "semantic-release": "^25.0.0", + "sassdoc": "^2.7.4", + "semantic-release": "^25.0.9", "stylelint": ">=13.13.1", "stylelint-config-recommended": ">=5.0.0", "stylelint-config-standard": ">=22.0.0" }, "engines": { - "node": "^20 || ^22" + "node": ">=20" }, "peerDependencies": { "sass": "^1.42.1" @@ -101,9 +100,10 @@ } }, "node_modules/@aurodesignsystem/design-tokens": { - "version": "8.19.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-8.19.0.tgz", - "integrity": "sha512-ovu+2R1j2xtm/FlVRbpTCMXxar8geSon/01osmpWOuWG8H4X3fg+AeC+9YZxsIrjsszhuLoc/A1n8Vhm0fjIQA==", + "version": "9.3.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-9.3.3.tgz", + "integrity": "sha512-iezcPvnP6FA1f/5c9z77aLHy8BP9dZFAlGKSeD/HdtNZGTyDPZqXqq6uVZKx5IXD2z6ELmlunjptxqezEVTTUg==", + "license": "Apache-2.0", "engines": { "node": "^22.14.0 || >= 24.10.0" } @@ -1828,6 +1828,294 @@ "@octokit/openapi-types": "^28.0.0" } }, + "node_modules/@parcel/watcher": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz", + "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.6.0", + "@parcel/watcher-darwin-arm64": "2.6.0", + "@parcel/watcher-darwin-x64": "2.6.0", + "@parcel/watcher-freebsd-x64": "2.6.0", + "@parcel/watcher-linux-arm-glibc": "2.6.0", + "@parcel/watcher-linux-arm-musl": "2.6.0", + "@parcel/watcher-linux-arm64-glibc": "2.6.0", + "@parcel/watcher-linux-arm64-musl": "2.6.0", + "@parcel/watcher-linux-x64-glibc": "2.6.0", + "@parcel/watcher-linux-x64-musl": "2.6.0", + "@parcel/watcher-win32-arm64": "2.6.0", + "@parcel/watcher-win32-x64": "2.6.0" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz", + "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz", + "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz", + "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz", + "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz", + "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz", + "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz", + "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz", + "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz", + "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz", + "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz", + "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz", + "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -3198,24 +3486,22 @@ } }, "node_modules/auto-changelog": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.5.0.tgz", - "integrity": "sha512-UTnLjT7I9U2U/xkCUH5buDlp8C7g0SGChfib+iDrJkamcj5kaMqNKHNfbKJw1kthJUq8sUo3i3q2S6FzO/l/wA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.6.0.tgz", + "integrity": "sha512-jJgUkuWXQ7fPLPXOMQk/XSSmy7KvzpzhjJa6w660dq1KTEez/GW2CPckBra3jMMMMpcwxp84bOslo29qRCewzA==", "dev": true, - "license": "MIT", "dependencies": { "commander": "^7.2.0", - "handlebars": "^4.7.7", + "handlebars": "^4.7.9", "import-cwd": "^3.0.0", - "node-fetch": "^2.6.1", - "parse-github-url": "^1.0.3", - "semver": "^7.3.5" + "parse-github-url": "^1.0.4", + "semver": "^7.8.1" }, "bin": { "auto-changelog": "src/index.js" }, "engines": { - "node": ">=8.3" + "node": ">= 10" } }, "node_modules/autoprefixer": { @@ -3957,9 +4243,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001718", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001718.tgz", - "integrity": "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw==", + "version": "1.0.30001809", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz", + "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==", "dev": true, "funding": [ { @@ -3974,7 +4260,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/cdocparser": { "version": "0.13.0", @@ -4015,6 +4302,7 @@ "version": "5.4.1", "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz", "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==", + "dev": true, "license": "MIT", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" @@ -5995,6 +6283,16 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -8224,9 +8522,9 @@ "dev": true }, "node_modules/handlebars": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", - "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "version": "4.7.9", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.9.tgz", + "integrity": "sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==", "dev": true, "dependencies": { "minimist": "^1.2.5", @@ -8693,9 +8991,9 @@ "dev": true }, "node_modules/immutable": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", - "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", + "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==", "dev": true }, "node_modules/import-cwd": { @@ -12275,9 +12573,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz", + "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==", "dev": true, "funding": [ { @@ -12422,6 +12720,13 @@ "lower-case": "^1.1.1" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "optional": true + }, "node_modules/node-emoji": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.2.0.tgz", @@ -12451,26 +12756,6 @@ "url": "https://github.com/sindresorhus/is?sponsor=1" } }, - "node_modules/node-fetch": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", - "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", - "dev": true, - "dependencies": { - "whatwg-url": "^5.0.0" - }, - "engines": { - "node": "4.x || >=6.0.0" - }, - "peerDependencies": { - "encoding": "^0.1.0" - }, - "peerDependenciesMeta": { - "encoding": { - "optional": true - } - } - }, "node_modules/node-int64": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz", @@ -12484,16 +12769,15 @@ "dev": true }, "node_modules/nodemon": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz", - "integrity": "sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==", + "version": "3.1.14", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz", + "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==", "dev": true, - "license": "MIT", "dependencies": { "chokidar": "^3.5.2", "debug": "^4", "ignore-by-default": "^1.0.1", - "minimatch": "^3.1.2", + "minimatch": "^10.2.1", "pstree.remy": "^1.1.8", "semver": "^7.5.3", "simple-update-notifier": "^2.0.0", @@ -12512,6 +12796,15 @@ "url": "https://opencollective.com/nodemon" } }, + "node_modules/nodemon/node_modules/balanced-match": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", + "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", + "dev": true, + "engines": { + "node": "18 || 20 || >=22" + } + }, "node_modules/nodemon/node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -12521,6 +12814,18 @@ "node": ">=8" } }, + "node_modules/nodemon/node_modules/brace-expansion": { + "version": "5.0.9", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz", + "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==", + "dev": true, + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "20 || >=22" + } + }, "node_modules/nodemon/node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", @@ -12614,6 +12919,21 @@ "node": ">=0.12.0" } }, + "node_modules/nodemon/node_modules/minimatch": { + "version": "10.2.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz", + "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==", + "dev": true, + "dependencies": { + "brace-expansion": "^5.0.8" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/nodemon/node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -15272,11 +15592,10 @@ } }, "node_modules/parse-github-url": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.3.tgz", - "integrity": "sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.4.tgz", + "integrity": "sha512-CEtCOt55fHmd6DpBc/N7H5NC4vJpcquhzzs9Iw2mRj8bVxo1O5TQI5MXKOMO7+yBOqD+5dKCCRK4Kj1KskZc6Q==", "dev": true, - "license": "MIT", "bin": { "parse-github-url": "cli.js" }, @@ -15652,9 +15971,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.26", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz", + "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==", "dev": true, "funding": [ { @@ -15671,7 +15990,7 @@ } ], "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.17", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -17461,20 +17780,23 @@ } }, "node_modules/sass": { - "version": "1.77.8", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", - "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz", + "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==", "dev": true, "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", + "chokidar": "^5.0.0", + "immutable": "^5.1.5", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" } }, "node_modules/sass-convert": { @@ -17782,121 +18104,32 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/sass/node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/sass/node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/sass/node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/sass/node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", "dev": true, "dependencies": { - "to-regex-range": "^5.0.1" + "readdirp": "^5.0.0" }, "engines": { - "node": ">=8" - } - }, - "node_modules/sass/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.1" + "node": ">= 20.19.0" }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/sass/node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/sass/node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "engines": { - "node": ">=0.12.0" + "funding": { + "url": "https://paulmillr.com/funding/" } }, "node_modules/sass/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", "dev": true, - "dependencies": { - "picomatch": "^2.2.1" - }, "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/sass/node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "dependencies": { - "is-number": "^7.0.0" + "node": ">= 20.19.0" }, - "engines": { - "node": ">=8.0" + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" } }, "node_modules/sassdoc": { @@ -17961,41 +18194,41 @@ } }, "node_modules/sassdoc-theme-default/node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/sassdoc-theme-default/node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" } }, "node_modules/sassdoc-theme-default/node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], + "license": "MIT", "optional": true, "peer": true, "dependencies": { @@ -18010,6 +18243,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -18030,10 +18266,11 @@ "dev": true }, "node_modules/sassdoc-theme-default/node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "dependencies": { @@ -18058,6 +18295,7 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, + "license": "ISC", "optional": true, "peer": true, "dependencies": { @@ -18072,6 +18310,7 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "dependencies": { @@ -18086,6 +18325,7 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "engines": { @@ -18131,6 +18371,7 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "dependencies": { @@ -18145,6 +18386,7 @@ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, + "license": "MIT", "optional": true, "peer": true, "dependencies": { @@ -18884,13 +19126,10 @@ } }, "node_modules/semver": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", - "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", + "version": "7.8.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", + "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==", "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, "bin": { "semver": "bin/semver.js" }, @@ -18907,24 +19146,6 @@ "node": ">=0.10.0" } }, - "node_modules/semver/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/semver/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/send": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", @@ -21244,12 +21465,6 @@ "nodetouch": "bin/nodetouch.js" } }, - "node_modules/tr46": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", - "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", - "dev": true - }, "node_modules/traverse": { "version": "0.6.8", "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.8.tgz", @@ -22276,12 +22491,6 @@ "makeerror": "1.0.12" } }, - "node_modules/webidl-conversions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", - "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", - "dev": true - }, "node_modules/websocket-driver": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", @@ -22305,16 +22514,6 @@ "node": ">=0.8.0" } }, - "node_modules/whatwg-url": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", - "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", - "dev": true, - "dependencies": { - "tr46": "~0.0.3", - "webidl-conversions": "^3.0.0" - } - }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 906cb187..2a2dceb6 100644 --- a/package.json +++ b/package.json @@ -10,39 +10,38 @@ "url": "https://github.com/AlaskaAirlines/WebCoreStyleSheets" }, "engines": { - "node": "^20 || ^22" + "node": ">=20" }, "peerDependencies": { "sass": "^1.42.1" }, "dependencies": { - "@aurodesignsystem/design-tokens": "^8.19.0", - "chalk": "^5.4.1" + "@aurodesignsystem/design-tokens": "^9.3.3" }, "devDependencies": { "@commitlint/cli": "^19.6.1", "@commitlint/config-conventional": "^19.6.0", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.0", - "@semantic-release/npm": "^13.0.0", - "auto-changelog": "^2.5.0", + "@semantic-release/npm": "^13.1.5", + "auto-changelog": "^2.6.0", "concat": "^1.0.3", "copyfiles": "^2.4.1", "cssnano": "^7.0.7", "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", - "live-server": "^1.2.1", - "nodemon": "^3.1.9", + "live-server": "^1.2.2", + "nodemon": "^3.1.14", "npm-run-all": "^4.1.5", - "postcss": "^8.5.3", + "postcss": "^8.5.26", + "postcss-scss": "^4.0.9", "replace-in-file": "^7.2.0", - "sass": "^1.77.8", + "sass": "^1.102.0", "sass-lint": "^1.13.1", "sass-true": ">=6.1.0", - "sassdoc": "^2.7.3", - "semantic-release": "^25.0.0", - "postcss-scss": "^4.0.9", + "sassdoc": "^2.7.4", + "semantic-release": "^25.0.9", "stylelint": ">=13.13.1", "stylelint-config-recommended": ">=5.0.0", "stylelint-config-standard": ">=22.0.0" @@ -51,22 +50,24 @@ "copy:files": "copyfiles -u 1 -V './src/auroElement/**/*' ./dist", "css:lint": "stylelint './results/css/*.css'", "scss:lint": "stylelint './src/**/*.scss' --custom-syntax postcss-scss", - "build": "npm-run-all build:sassdoc build:sass:demo build:dist-bundle copy:files postinstall", + "build": "npm-run-all build:theme-codes build:sassdoc build:sass:demo build:dist-bundle copy:files postinstall", "build:dist-bundle": "npm-run-all build:type-classes-css build:theme-css", + "prepack": "node scripts/theme-codes.build.mjs", + "build:theme-codes": "node scripts/theme-codes.build.mjs", "build:theme-css": "node scripts/theme.global.css.build.mjs", "build:type-classes-css": "node scripts/type.classes.css.build.mjs", "build:ci": "npm-run-all sweep build", - "build:dev": "npm-run-all scss:lint build:sass:test css:lint jest", - "build:sassdoc": "sassdoc ./src -d ./docs && node scripts/sassdocTheme.js", + "build:dev": "npm-run-all build:theme-codes scss:lint build:sass:test css:lint jest", + "build:sassdoc": "node scripts/sassdoc.build.mjs && node scripts/sassdocTheme.js", "build:sass:demo": "sass --load-path=node_modules --no-source-map ./src/elementDemoStyles/:./dist/", "build:sass:test": "sass --load-path=node_modules --no-source-map ./tests/styleTest.scss:./results/css/testBuild.css", "sweep": "rm -rf ./dist ./results ./sassdoc", "postinstall": "node packageScripts/postinstall.mjs", "jest": "jest", - "test": "npm-run-all scss:lint build:sass:test css:lint jest", + "test": "npm-run-all build:theme-codes scss:lint build:sass:test css:lint jest", "serve": "npm run build:sassdoc && node scripts/live-server.js", "watch": "nodemon -e scss --watch tests --watch src --exec npm run build:dev", - "prepare": "husky" + "prepare": "husky && npm run build:theme-codes" }, "commitlint": { "extends": [ diff --git a/packageScripts/postinstall.mjs b/packageScripts/postinstall.mjs index 9b9f7bd5..42ffb21e 100644 --- a/packageScripts/postinstall.mjs +++ b/packageScripts/postinstall.mjs @@ -1,11 +1,16 @@ 'use strict'; -import chalk from 'chalk'; import { createRequire } from 'node:module'; const require = createRequire(import.meta.url); const pjson = require('../package.json'); -console.log(chalk.hex('#f26135')(` +// Raw ANSI truecolor escapes replace chalk so this install-time script ships +// no runtime dependency (chalk.hex('#f26135') / chalk.hex('#ffd200').bold). +const RESET = '\x1b[0m'; +const orange = (text) => `\x1b[38;2;242;97;53m${text}${RESET}`; +const yellowBold = (text) => `\x1b[1m\x1b[38;2;255;210;0m${text}${RESET}`; + +console.log(orange(` _______ __ __ __ | __|.---.-.--.--. | |--.-----.| | |.-----. |__ || _ | | | | | -__|| | || _ | @@ -17,11 +22,11 @@ console.log(chalk.hex('#f26135')(` |____|_____| |___|___||_____|__| |_____||__| `) + -chalk.hex('#f26135')(` +orange(` ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮ Thanks for installing the latest version - of `) + chalk.hex('#ffd200').bold(`WC Stylesheets v${pjson.version}.`) + chalk.hex('#f26135')(` + of `) + yellowBold(`WC Stylesheets v${pjson.version}.`) + orange(` Requires Design Tokens ${pjson.dependencies["@aurodesignsystem/design-tokens"]} npm i @aurodesignsystem/design-tokens@latest diff --git a/scripts/excluded-themes.mjs b/scripts/excluded-themes.mjs new file mode 100644 index 00000000..59fdc7d5 --- /dev/null +++ b/scripts/excluded-themes.mjs @@ -0,0 +1,26 @@ +/** + * Excluded Themes + * + * Themes present in AuroDesignTokens' THEME_DEFINITIONS that WebCoreStyleSheets + * intentionally does NOT build. The theme list is otherwise derived wholesale + * from design-tokens, so this is the single place to opt a theme out of every + * build (theme codes, type bundles, and global theme CSS). + */ + +// Theme directory names to skip when building. +// NOTE: `auro-2` is absent from design-tokens 9.x THEME_DEFINITIONS, so this +// filter is currently a no-op. It is kept as forward-proofing in case the theme +// returns in a future design-tokens release; remove it only if that's ruled out. +export const EXCLUDED_THEMES = ['auro-2']; + +/** + * Filter a list of theme definitions (or dir names) down to the ones WCSS builds. + * @param {Array} themes - THEME_DEFINITIONS entries or dir strings + * @returns {Array} themes with excluded ones removed + */ +export function withoutExcludedThemes(themes) { + return themes.filter(theme => { + const dir = typeof theme === 'string' ? theme : theme.dir; + return !EXCLUDED_THEMES.includes(dir); + }); +} diff --git a/scripts/sassdoc.build.mjs b/scripts/sassdoc.build.mjs new file mode 100644 index 00000000..a6004b7f --- /dev/null +++ b/scripts/sassdoc.build.mjs @@ -0,0 +1,62 @@ +#!/usr/bin/env node + +/** + * Build SassDoc Documentation + * + * Runs SassDoc against ./src and outputs to ./docs. SassDoc cleans the entire + * destination directory on each run, which would otherwise remove hand-authored + * content such as the docs/post-mortem write-ups. This wrapper preserves those + * directories across the regeneration: + * + * 1. Moves the protected directories out of ./docs to a temp location + * 2. Runs SassDoc (which wipes and rebuilds ./docs) + * 3. Restores the protected directories back into ./docs + */ + +import fs from 'fs'; +import os from 'os'; +import path from 'path'; +import { execFileSync } from 'child_process'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const rootDir = path.join(__dirname, '..'); +const docsDir = path.join(rootDir, 'docs'); +const binDir = path.join(rootDir, 'node_modules', '.bin'); + +// Directories inside ./docs that SassDoc must not remove. +const protectedDirs = ['post-mortem']; + +// Move protected directories to a temp holding area so SassDoc can't delete them. +const backupDir = fs.mkdtempSync(path.join(os.tmpdir(), 'wcss-docs-')); +const preserved = []; + +for (const name of protectedDirs) { + const source = path.join(docsDir, name); + if (fs.existsSync(source)) { + const backup = path.join(backupDir, name); + fs.cpSync(source, backup, { recursive: true }); + preserved.push(name); + } +} + +try { + // Run SassDoc via its local bin (works on Windows via .cmd shim). + const isWindows = process.platform === 'win32'; + const sassdocBin = path.join(binDir, isWindows ? 'sassdoc.cmd' : 'sassdoc'); + execFileSync(sassdocBin, ['./src', '-d', './docs'], { + cwd: rootDir, + stdio: 'inherit', + shell: isWindows + }); +} finally { + // Restore preserved directories regardless of SassDoc's outcome. + for (const name of preserved) { + const backup = path.join(backupDir, name); + const destination = path.join(docsDir, name); + fs.cpSync(backup, destination, { recursive: true }); + } + fs.rmSync(backupDir, { recursive: true, force: true }); +} diff --git a/scripts/theme-codes.build.mjs b/scripts/theme-codes.build.mjs new file mode 100644 index 00000000..c77b7434 --- /dev/null +++ b/scripts/theme-codes.build.mjs @@ -0,0 +1,69 @@ +#!/usr/bin/env node + +/** + * Build Theme Codes Sass Partial + * + * Generates a Sass map of theme directory → short theme code, sourced from + * AuroDesignTokens' THEME_DEFINITIONS. This keeps WCSS's data-attribute theme + * scoping (e.g. [data-aag-theme="aag-theme-as-type"]) aligned with the design + * tokens' theme codes rather than hardcoding them in Sass. + * + * 1. Reads THEME_DEFINITIONS from @aurodesignsystem/design-tokens + * 2. Writes src/type/mixins/_theme-codes.scss with the $wcss-theme-codes map + * + * The output file is generated (git-ignored) and must exist before any Sass + * compile that imports the type mixins. + */ + +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import { THEME_DEFINITIONS } from '@aurodesignsystem/design-tokens/src/config/themes.js'; +import { withoutExcludedThemes } from './excluded-themes.mjs'; +import { STANDARD_LICENSE, createBuildReporter } from './utils/build-utils.mjs'; + +// Get dirname +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +// WCSS-specific overrides of the design-tokens theme code. Use this when the +// data-attribute scoping code must differ from THEME_DEFINITIONS' `code` value, +// keyed by theme directory name → the code WCSS should emit in its selectors. +// NOTE: overrides must not collide with another theme's native `code` (e.g. do +// not map any theme to `atm`, which `atmos` already emits natively). +const THEME_CODE_OVERRIDES = {}; + +// Output partial +const outPath = path.join(__dirname, '../src/type/mixins/_theme-codes.scss'); + +const reporter = createBuildReporter('Theme codes Sass partial'); +reporter.start(); + +// Build the Sass map entries from the design tokens theme definitions +// (excluding any themes WCSS opts out of building, applying any code overrides). +const themes = withoutExcludedThemes(THEME_DEFINITIONS); +const entries = themes + .map(theme => ` '${theme.dir}': '${THEME_CODE_OVERRIDES[theme.dir] ?? theme.code}'`) + .join(',\n'); + +const contents = `${STANDARD_LICENSE} +/* --------------------------------------------------------------------- */ +// AUTO-GENERATED by scripts/theme-codes.build.mjs — do not edit by hand. +// Source: @aurodesignsystem/design-tokens THEME_DEFINITIONS. +// Regenerate with: npm run build:theme-codes + +// Map of theme directory name → short theme code (used to build the +// [data-aag-theme="aag-theme--type"] scoping selectors). +$wcss-theme-codes: ( +${entries} +); +`; + +try { + reporter.processing('@aurodesignsystem/design-tokens/src/config/themes.js', path.relative(path.join(__dirname, '..'), outPath)); + fs.writeFileSync(outPath, contents, 'utf8'); + reporter.success(`(${themes.length} themes)`); +} catch (error) { + reporter.processError(error); + process.exit(1); +} diff --git a/scripts/theme.global.css.build.mjs b/scripts/theme.global.css.build.mjs index 26264056..21fd8c6e 100755 --- a/scripts/theme.global.css.build.mjs +++ b/scripts/theme.global.css.build.mjs @@ -69,7 +69,7 @@ function createThemeConfig(theme, isLegacy) { destPath, minDestPath, sassOptions: { - loadPaths: [path.join(__dirname, '../node_modules')], + loadPaths: [path.join(__dirname, '../src'), path.join(__dirname, '../node_modules')], isTemplate, templateData: isTemplate ? { 'THEME_NAME': theme.name || theme.src.split('/').pop().replace('.global.scss', '') diff --git a/scripts/theme.global.css.config.mjs b/scripts/theme.global.css.config.mjs index 24535563..5bb73292 100644 --- a/scripts/theme.global.css.config.mjs +++ b/scripts/theme.global.css.config.mjs @@ -5,6 +5,7 @@ // Import theme codes from design tokens import { THEME_DEFINITIONS } from '@aurodesignsystem/design-tokens/src/config/themes.js'; +import { withoutExcludedThemes } from './excluded-themes.mjs'; // File extensions export const SOURCE_EXT = 'global.scss'; @@ -15,7 +16,7 @@ export const OUTPUT_EXT = 'global.css'; export const basePrefix = ''; // Standard themes -export const standardThemes = THEME_DEFINITIONS.map(theme => ({ +export const standardThemes = withoutExcludedThemes(THEME_DEFINITIONS).map(theme => ({ src: `themes/theme.global.template.scss`, dest: `themes/${theme.dir}.${OUTPUT_EXT}`, name: theme.dir diff --git a/scripts/type.classes.css.build.mjs b/scripts/type.classes.css.build.mjs index ea3c7231..3e032087 100644 --- a/scripts/type.classes.css.build.mjs +++ b/scripts/type.classes.css.build.mjs @@ -14,7 +14,9 @@ import path from 'path'; import { fileURLToPath } from 'url'; -import { +import { THEME_DEFINITIONS } from '@aurodesignsystem/design-tokens/src/config/themes.js'; +import { withoutExcludedThemes } from './excluded-themes.mjs'; +import { ensureDirectoryExists, processSassToCSS, createBuildReporter @@ -26,10 +28,12 @@ const __dirname = path.dirname(__filename); // Base directories const srcDir = path.join(__dirname, '../src/type'); +const bundledTypeSrcDir = path.join(__dirname, '../src/bundled/type'); const distDir = path.join(__dirname, '../dist/bundled/type'); -// Ensure output directory exists +// Ensure output directories exist ensureDirectoryExists(distDir); +ensureDirectoryExists(path.join(distDir, 'themes')); // Create build reporter const reporter = createBuildReporter('typography classes CSS file'); @@ -56,7 +60,7 @@ const buildConfigs = [ minDestPath: path.join(distDir, 'classes.alaska.min.css'), sassOptions: { loadPaths: [ - path.join(__dirname, '../src'), + path.join(__dirname, '../src'), path.join(__dirname, '../node_modules') ] }, @@ -64,6 +68,28 @@ const buildConfigs = [ } ]; +// Per-theme multi-theme type custom property bundles (AB#1612078). +// Each theme's entry file emits its own type vars under `:root` plus its +// data-aag-theme attribute selectors, and every other theme's vars under their +// attribute selectors only — so a single stylesheet supports runtime theme +// switching via the data-aag-theme attribute. Sourced from design-tokens' +// THEME_DEFINITIONS so the theme list stays drift-free. +for (const { dir } of withoutExcludedThemes(THEME_DEFINITIONS)) { + buildConfigs.push({ + name: `Type Theme Bundle (${dir})`, + srcPath: path.join(bundledTypeSrcDir, 'themes', `${dir}.scss`), + destPath: path.join(distDir, 'themes', `${dir}.css`), + minDestPath: path.join(distDir, 'themes', `${dir}.min.css`), + sassOptions: { + loadPaths: [ + path.join(__dirname, '../src'), + path.join(__dirname, '../node_modules') + ] + }, + addCharset: true + }); +} + // Start build process reporter.start(); diff --git a/src/_animation.scss b/src/_animation.scss index b72c5f02..9f2e0bf7 100644 --- a/src/_animation.scss +++ b/src/_animation.scss @@ -3,7 +3,11 @@ // --------------------------------------------------------------------- -@import './libSupport/deprecated'; +@use 'libSupport/deprecated'; +// Animation defaults are provided by the design-tokens package. Under the module +// system they must be loaded explicitly rather than relying on a consumer-injected +// global `@import` of the token stylesheet. +@use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as tokens; /// Provides a way to control animation speed when changing CSS properties. /// @@ -18,13 +22,13 @@ /// @param {string} $delay [null] - Specifies a delay (in seconds) for the transition effect /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation" as *; /// /// @example scss - Using mixin with default values; /// .foo { /// @include auro_transition; /// } -@mixin auro_transition($property: $ds-animation-default-property, $duration: $ds-animation-default-duration, $timing: $ds-animation-default-timing, $delay: null) { +@mixin auro_transition($property: tokens.$ds-animation-default-property, $duration: tokens.$ds-animation-default-duration, $timing: tokens.$ds-animation-default-timing, $delay: null) { transition: $property $duration $timing $delay; } diff --git a/src/_blockquote.scss b/src/_blockquote.scss index 4406be8e..95b394e0 100644 --- a/src/_blockquote.scss +++ b/src/_blockquote.scss @@ -2,7 +2,8 @@ // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; $focus: null !default; @@ -20,17 +21,17 @@ $focus: null !default; /// .auro_blockquote {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote" as *; /// -#{$sym}#{$prefix}#{$scope}blockquote { +#{manageScope.$sym}#{manageScope.$prefix}#{manageScope.$scope}blockquote { margin-left: 0; - border-left: 1px solid var(--ds-color-border-ui-active-default, $ds-color-border-ui-active-default); - padding: var(--ds-size-100, $ds-size-100); - padding-left: var(--ds-size-400, $ds-size-400); - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); + border-left: 1px solid var(--ds-color-border-ui-active-default, SCSSVariables.$ds-color-border-ui-active-default); + padding: var(--ds-size-100, SCSSVariables.$ds-size-100); + padding-left: var(--ds-size-400, SCSSVariables.$ds-size-400); + color: var(--ds-color-text-secondary-default, SCSSVariables.$ds-color-text-secondary-default); font-weight: 200; - margin-top: var(--ds-size-300, $ds-size-300); - margin-bottom: var(--ds-size-300, $ds-size-300); + margin-top: var(--ds-size-300, SCSSVariables.$ds-size-300); + margin-bottom: var(--ds-size-300, SCSSVariables.$ds-size-300); p { line-height: 2; @@ -41,6 +42,6 @@ $focus: null !default; } & + p { - margin-bottom: var(--ds-size-400, $ds-size-400); + margin-bottom: var(--ds-size-400, SCSSVariables.$ds-size-400); } } diff --git a/src/_breakpoints.scss b/src/_breakpoints.scss index 61a842ce..794648ac 100644 --- a/src/_breakpoints.scss +++ b/src/_breakpoints.scss @@ -3,13 +3,14 @@ // --------------------------------------------------------------------- -/* stylelint-disable no-invalid-position-at-import-rule */ +// stylelint-disable no-invalid-position-at-import-rule (obsolete under the module system; rule also disabled globally in .stylelintrc) // @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac; @use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as vac; -@import './libSupport/deprecated'; +@use "sass:list"; +@use 'libSupport/deprecated'; // The following mixins provide pre-configured Orion approved // breakpoints when development mobile-first UIs. @@ -20,7 +21,7 @@ /// /// Compatibility: [css-mediaqueries](https://caniuse.com/#feat=css-mediaqueries\) /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; /// @group responsive /// @example scss - Auro breakpoint tokens /// $ds-grid-breakpoint-sm: 576px; @@ -70,7 +71,7 @@ } @else if $max { $breakpoints: '(max-width: #{$max})'; } @else if $polar { - $breakpoints: '(min-width: #{nth($polar, 1)}) and (max-width: #{nth($polar, 2)})'; + $breakpoints: '(min-width: #{list.nth($polar, 1)}) and (max-width: #{list.nth($polar, 2)})'; } @else if $cust { $breakpoints: #{$cust}; } @@ -82,7 +83,7 @@ /// Standard breakpoint to support resolutions greater than 1232px. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *; /// @group responsive /// @example scss - Set grid-breakpoint /// .foo { @@ -98,7 +99,7 @@ /// Standard breakpoint to support resolutions greater than 1024px. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *; /// @group responsive /// @example scss - Set grid-breakpoint /// .foo { @@ -114,7 +115,7 @@ /// Standard breakpoint to support resolutions greater than 768px. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *; /// @group responsive /// @example scss - Set grid-breakpoint /// .foo { @@ -130,7 +131,7 @@ /// Standard breakpoint to support resolutions greater than 576px. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *; /// @group responsive /// @example scss - Set grid-breakpoint /// .foo { @@ -146,7 +147,7 @@ /// Standard breakpoint to support resolutions greater than 320px. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints" as *; /// @group responsive /// @example scss - Set grid-breakpoint /// .foo { diff --git a/src/_core.scss b/src/_core.scss index 79315845..93e5e853 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -2,7 +2,7 @@ // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; $focus: null !default; $focus-visible: null !default; @@ -15,7 +15,7 @@ $focus-visible: null !default; /// Check current browser support for :focus-visible on [Can I Use](https://caniuse.com/css-focus-visible). /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core" as *; /// /// @group Accessibility :focus { diff --git a/src/_focus-visible.scss b/src/_focus-visible.scss index 4cbf325d..218fbfed 100644 --- a/src/_focus-visible.scss +++ b/src/_focus-visible.scss @@ -2,14 +2,12 @@ // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import 'libSupport/manageScope'; - -$focus: false; -$focus-visible: false; +@use 'libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; // sass-lint:disable no-important -#{$scope} * { +#{manageScope.$scope} * { /// Global setting for the display of [focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) accessibility interaction. [Can I Use](https://caniuse.com/css-focus-visible). /// /// This is a **OPT-IN** feature, support is **NOT** added by default. Users **MUST** subscribe to Sass import described below. @@ -25,12 +23,12 @@ $focus-visible: false; /// .auro *:focus-visible {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible" as *; /// /// @example scss - it's important to import focus-visible BEFORE essentials -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; &:focus-visible { - outline: 1px solid var(--ds-color-border-ui-focus-default, $ds-color-border-ui-focus-default); + outline: 1px solid var(--ds-color-border-ui-focus-default, SCSSVariables.$ds-color-border-ui-focus-default); } } diff --git a/src/_grids.scss b/src/_grids.scss index c2980a4b..c7f1bb07 100644 --- a/src/_grids.scss +++ b/src/_grids.scss @@ -5,7 +5,8 @@ // stylelint-disable mixins-before-declarations, variable-for-property, no-vendor-prefixes, no-invalid-position-at-import-rule @use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as vac; -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; +@use "breakpoints"; $fixed-nav-width: 280px; $fixed-anchor-width: 168px; @@ -15,9 +16,9 @@ $fixed-anchor-width: 168px; /// /// @group grid /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @example scss - import mixin file with altered output values prior to import -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @mixin grid-stickycolumn--md { @media screen and (min-width: vac.$ds-grid-breakpoint-md) { @@ -33,9 +34,9 @@ $fixed-anchor-width: 168px; /// /// @group grid /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @example scss - import mixin file with altered output values prior to import -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @mixin grid-stickycolumn--xs { position: sticky; @@ -48,10 +49,10 @@ $fixed-anchor-width: 168px; /// @group grid /// @param {string} $maxWidth [1232px] - Specifies the max-width value of the grid. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @example scss - import mixin file with altered output values prior to import /// $maxWidth: vac.$ds-grid-breakpoint-xl !default; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @mixin grid_width($maxWidth) { max-width: $maxWidth; @@ -59,9 +60,9 @@ $fixed-anchor-width: 168px; /// @group grid /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @example scss - import mixin file with altered output values prior to import -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; @mixin grid_margin() { margin-left: auto; margin-right: auto; @@ -69,10 +70,10 @@ $fixed-anchor-width: 168px; /// @group grid /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// @example scss - import mixin file with altered output values prior to import /// $padding: vac.$ds-grid-margin-xs !default; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; @mixin grid_padding($padding) { padding-left: $padding; padding-right: $padding; @@ -81,22 +82,22 @@ $fixed-anchor-width: 168px; /// @group grid /// @param {string} $gutter [16px] - Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid. /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; /// @example scss - import mixin file with altered output values prior to import /// $gutter: vac.$ds-grid-gutter-xs !default; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; @mixin grid_gutter($gutter) { gap: $gutter; - @include auro_grid-breakpoint--sm { + @include breakpoints.auro_grid-breakpoint--sm { gap: var(--ds-grid-gutter-sm, vac.$ds-grid-gutter-sm); } - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { gap: var(--ds-grid-gutter-md, vac.$ds-grid-gutter-md); } - @include auro_grid-breakpoint--lg { + @include breakpoints.auro_grid-breakpoint--lg { gap: var(--ds-grid-gutter-lg, vac.$ds-grid-gutter-lg); } - @include auro_grid-breakpoint--xl { + @include breakpoints.auro_grid-breakpoint--xl { gap: var(--ds-grid-gutter-xl, vac.$ds-grid-gutter-xl); } } @@ -117,9 +118,9 @@ $fixed-anchor-width: 168px; /// @example html - Example HTML selector use /// ... /// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// -#{$scope}.#{$prefix}container { +#{manageScope.$scope}.#{manageScope.$prefix}container { display: grid; @include grid_margin(); @include grid_width(vac.$ds-grid-breakpoint-xl); @@ -141,23 +142,23 @@ $fixed-anchor-width: 168px; /// @example html - Example HTML selector use /// ... /// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// -#{$scope}.#{$prefix}pagecontainer { +#{manageScope.$scope}.#{manageScope.$prefix}pagecontainer { @include grid_padding(vac.$ds-grid-margin-xs); @include grid_margin(); @include grid_width(vac.$ds-grid-breakpoint-xl); - @include auro_grid-breakpoint--sm { + @include breakpoints.auro_grid-breakpoint--sm { @include grid_padding(vac.$ds-grid-margin-sm); } - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(vac.$ds-grid-margin-md); } - @include auro_grid-breakpoint--lg { + @include breakpoints.auro_grid-breakpoint--lg { @include grid_padding(vac.$ds-grid-margin-lg); } - @include auro_grid-breakpoint--xl { + @include breakpoints.auro_grid-breakpoint--xl { @include grid_padding(vac.$ds-grid-margin-xl); } @@ -182,9 +183,9 @@ $fixed-anchor-width: 168px; /// @example html - Example HTML selector use /// ... /// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// -#{$scope}.#{$prefix}pageLayout-2colAnchorNav { +#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colAnchorNav { display: grid; @include grid_margin(); @include grid_padding(vac.$ds-grid-margin-xs); @@ -195,20 +196,20 @@ $fixed-anchor-width: 168px; "main"; @include grid_gutter(vac.$ds-grid-gutter-xl); - @include auro_grid-breakpoint--sm { + @include breakpoints.auro_grid-breakpoint--sm { @include grid_padding(vac.$ds-grid-margin-sm); } - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(vac.$ds-grid-margin-md); grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width); grid-template-areas: "breadcrumbs breadcrumbs" "main anchornav"; } - @include auro_grid-breakpoint--lg { + @include breakpoints.auro_grid-breakpoint--lg { @include grid_padding(vac.$ds-grid-margin-lg); } - @include auro_grid-breakpoint--xl { + @include breakpoints.auro_grid-breakpoint--xl { @include grid_padding(vac.$ds-grid-margin-xl); } @@ -243,9 +244,9 @@ $fixed-anchor-width: 168px; /// @example html - Example HTML selector use /// ... /// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// -#{$scope}.#{$prefix}pageLayout-2colSideNav { +#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-2colSideNav { display: grid; @include grid_margin(); @include grid_padding(0); @@ -257,7 +258,7 @@ $fixed-anchor-width: 168px; @include grid_gutter(vac.$ds-grid-gutter-xl); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(vac.$ds-grid-margin-md); grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto; grid-template-areas: @@ -265,10 +266,10 @@ $fixed-anchor-width: 168px; "sidenav main"; } - @include auro_grid-breakpoint--lg { + @include breakpoints.auro_grid-breakpoint--lg { @include grid_padding(vac.$ds-grid-margin-lg); } - @include auro_grid-breakpoint--xl { + @include breakpoints.auro_grid-breakpoint--xl { @include grid_padding(vac.$ds-grid-margin-xl); } @@ -276,17 +277,17 @@ $fixed-anchor-width: 168px; .breadcrumbs { grid-area: breadcrumbs; @include grid_padding(vac.$ds-grid-margin-xs); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); } } .sidenav { grid-area: sidenav; - background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + background-color: var(--ds-color-container-primary-default, vac.$ds-color-container-primary-default); @include grid_padding(vac.$ds-grid-margin-xs); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); background-color: transparent; } @@ -295,7 +296,7 @@ $fixed-anchor-width: 168px; .main { grid-area: main; @include grid_padding(vac.$ds-grid-margin-xs); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); } * { @@ -320,9 +321,9 @@ $fixed-anchor-width: 168px; /// @example html - Example HTML selector use /// ... /// @example scss - import file; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids" as *; /// -#{$scope}.#{$prefix}pageLayout-3col { +#{manageScope.$scope}.#{manageScope.$prefix}pageLayout-3col { display: grid; @include grid_margin(); @include grid_padding(0); @@ -335,7 +336,7 @@ $fixed-anchor-width: 168px; @include grid_gutter(vac.$ds-grid-gutter-xl); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(vac.$ds-grid-margin-md); grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width); grid-template-areas: @@ -343,10 +344,10 @@ $fixed-anchor-width: 168px; "sidenav main anchornav"; } - @include auro_grid-breakpoint--lg { + @include breakpoints.auro_grid-breakpoint--lg { @include grid_padding(vac.$ds-grid-margin-lg); } - @include auro_grid-breakpoint--xl { + @include breakpoints.auro_grid-breakpoint--xl { @include grid_padding(vac.$ds-grid-margin-xl); } @@ -354,7 +355,7 @@ $fixed-anchor-width: 168px; .breadcrumbs { grid-area: breadcrumbs; @include grid_padding(vac.$ds-grid-margin-xs); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); } } @@ -362,12 +363,12 @@ $fixed-anchor-width: 168px; .sidenav { grid-area: sidenav; z-index: 1; - background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + background-color: var(--ds-color-container-primary-default, vac.$ds-color-container-primary-default); @include grid_padding(vac.$ds-grid-margin-xs); @include grid-stickycolumn--xs(); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); background-color: transparent; } @@ -376,7 +377,7 @@ $fixed-anchor-width: 168px; .main { grid-area: main; @include grid_padding(vac.$ds-grid-margin-xs); - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); } * { @@ -389,7 +390,7 @@ $fixed-anchor-width: 168px; @include grid_padding(vac.$ds-grid-margin-xs); @include grid-stickycolumn--md; - @include auro_grid-breakpoint--md { + @include breakpoints.auro_grid-breakpoint--md { @include grid_padding(0); } } diff --git a/src/_headings.scss b/src/_headings.scss index 022acae9..b618714e 100644 --- a/src/_headings.scss +++ b/src/_headings.scss @@ -5,7 +5,9 @@ // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; +@use "breakpoints"; /// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `

`, `

`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes. /// @@ -23,14 +25,14 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; /// -#{$scope}.#{$prefix}heading { - margin: calc(#{$ds-size-200} + #{$ds-size-150}) 0; +#{manageScope.$scope}.#{manageScope.$prefix}heading { + margin: calc(#{SCSSVariables.$ds-size-200} + #{SCSSVariables.$ds-size-150}) 0; - letter-spacing: var(--ds-text-heading-default-spacing, $ds-text-heading-default-spacing); + letter-spacing: var(--ds-text-heading-default-spacing, SCSSVariables.$ds-text-heading-default-spacing); - font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight); + font-weight: var(--ds-text-heading-default-weight, SCSSVariables.$ds-text-heading-default-weight); } /// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `

`, `

`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes. @@ -49,22 +51,22 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--display { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--display { margin-top: 0; - font-size: var(--ds-text-heading-display-size-breakpoint-sm, $ds-text-heading-display-size-breakpoint-sm); - font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight); - line-height: var(--ds-text-heading-display-height-breakpoint-sm, $ds-text-heading-display-height-breakpoint-sm); + font-size: var(--ds-text-heading-display-size-breakpoint-sm, SCSSVariables.$ds-text-heading-display-size-breakpoint-sm); + font-weight: var(--ds-text-heading-display-weight, SCSSVariables.$ds-text-heading-display-weight); + line-height: var(--ds-text-heading-display-height-breakpoint-sm, SCSSVariables.$ds-text-heading-display-height-breakpoint-sm); - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - font-size: var(--ds-text-heading-display-size-breakpoint-md, $ds-text-heading-display-size-breakpoint-md); - line-height: var(--ds-text-heading-display-height-breakpoint-md, $ds-text-heading-display-height-breakpoint-md); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) { + font-size: var(--ds-text-heading-display-size-breakpoint-md, SCSSVariables.$ds-text-heading-display-size-breakpoint-md); + line-height: var(--ds-text-heading-display-height-breakpoint-md, SCSSVariables.$ds-text-heading-display-height-breakpoint-md); } - @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { - font-size: var(--ds-text-heading-display-size-breakpoint-lg, $ds-text-heading-display-size-breakpoint-lg); - line-height: var(--ds-text-heading-display-height-breakpoint-lg, $ds-text-heading-display-height-breakpoint-lg); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) { + font-size: var(--ds-text-heading-display-size-breakpoint-lg, SCSSVariables.$ds-text-heading-display-size-breakpoint-lg); + line-height: var(--ds-text-heading-display-height-breakpoint-lg, SCSSVariables.$ds-text-heading-display-height-breakpoint-lg); } } @@ -84,20 +86,20 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--800 { - font-size: var(--ds-text-heading-800-size-breakpoint-sm, $ds-text-heading-800-size-breakpoint-sm); - font-weight: var(--ds-text-heading-800-weight, $ds-text-heading-800-weight); - line-height: var(--ds-text-heading-800-height-breakpoint-sm, $ds-text-heading-800-height-breakpoint-sm); - - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - font-size: var(--ds-text-heading-800-size-breakpoint-md, $ds-text-heading-800-size-breakpoint-md); - line-height: var(--ds-text-heading-800-height-breakpoint-md, $ds-text-heading-800-height-breakpoint-md); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--800 { + font-size: var(--ds-text-heading-800-size-breakpoint-sm, SCSSVariables.$ds-text-heading-800-size-breakpoint-sm); + font-weight: var(--ds-text-heading-800-weight, SCSSVariables.$ds-text-heading-800-weight); + line-height: var(--ds-text-heading-800-height-breakpoint-sm, SCSSVariables.$ds-text-heading-800-height-breakpoint-sm); + + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) { + font-size: var(--ds-text-heading-800-size-breakpoint-md, SCSSVariables.$ds-text-heading-800-size-breakpoint-md); + line-height: var(--ds-text-heading-800-height-breakpoint-md, SCSSVariables.$ds-text-heading-800-height-breakpoint-md); } - @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { - font-size: var(--ds-text-heading-800-size-breakpoint-lg, $ds-text-heading-800-size-breakpoint-lg); - line-height: var(--ds-text-heading-800-height-breakpoint-lg, $ds-text-heading-800-height-breakpoint-lg); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) { + font-size: var(--ds-text-heading-800-size-breakpoint-lg, SCSSVariables.$ds-text-heading-800-size-breakpoint-lg); + line-height: var(--ds-text-heading-800-height-breakpoint-lg, SCSSVariables.$ds-text-heading-800-height-breakpoint-lg); } } @@ -117,20 +119,20 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--700 { - font-size: var(--ds-text-heading-700-size-breakpoint-sm, $ds-text-heading-700-size-breakpoint-sm); - font-weight: var(--ds-text-heading-700-weight, $ds-text-heading-700-weight); - line-height: var(--ds-text-heading-700-height-breakpoint-sm, $ds-text-heading-700-height-breakpoint-sm); - - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - font-size: var(--ds-text-heading-700-size-breakpoint-md, $ds-text-heading-700-size-breakpoint-md); - line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--700 { + font-size: var(--ds-text-heading-700-size-breakpoint-sm, SCSSVariables.$ds-text-heading-700-size-breakpoint-sm); + font-weight: var(--ds-text-heading-700-weight, SCSSVariables.$ds-text-heading-700-weight); + line-height: var(--ds-text-heading-700-height-breakpoint-sm, SCSSVariables.$ds-text-heading-700-height-breakpoint-sm); + + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) { + font-size: var(--ds-text-heading-700-size-breakpoint-md, SCSSVariables.$ds-text-heading-700-size-breakpoint-md); + line-height: var(--ds-text-heading-700-height-breakpoint-md, SCSSVariables.$ds-text-heading-700-height-breakpoint-md); } - @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { - font-size: var(--ds-text-heading-700-size-breakpoint-lg, $ds-text-heading-700-size-breakpoint-lg); - line-height: var(--ds-text-heading-700-height-breakpoint-lg, $ds-text-heading-700-height-breakpoint-lg); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) { + font-size: var(--ds-text-heading-700-size-breakpoint-lg, SCSSVariables.$ds-text-heading-700-size-breakpoint-lg); + line-height: var(--ds-text-heading-700-height-breakpoint-lg, SCSSVariables.$ds-text-heading-700-height-breakpoint-lg); } } @@ -150,22 +152,22 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--600 { - margin: $ds-size-200 0; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--600 { + margin: SCSSVariables.$ds-size-200 0; - font-size: var(--ds-text-heading-600-size-breakpoint-sm, $ds-text-heading-600-size-breakpoint-sm); - font-weight: var(--ds-text-heading-600-weight, $ds-text-heading-600-weight); - line-height: var(--ds-text-heading-600-height-breakpoint-sm, $ds-text-heading-600-height-breakpoint-sm); + font-size: var(--ds-text-heading-600-size-breakpoint-sm, SCSSVariables.$ds-text-heading-600-size-breakpoint-sm); + font-weight: var(--ds-text-heading-600-weight, SCSSVariables.$ds-text-heading-600-weight); + line-height: var(--ds-text-heading-600-height-breakpoint-sm, SCSSVariables.$ds-text-heading-600-height-breakpoint-sm); - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - font-size: var(--ds-text-heading-600-size-breakpoint-md, $ds-text-heading-600-size-breakpoint-md); - line-height: var(--ds-text-heading-600-height-breakpoint-md, $ds-text-heading-600-height-breakpoint-md); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) { + font-size: var(--ds-text-heading-600-size-breakpoint-md, SCSSVariables.$ds-text-heading-600-size-breakpoint-md); + line-height: var(--ds-text-heading-600-height-breakpoint-md, SCSSVariables.$ds-text-heading-600-height-breakpoint-md); } - @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { - font-size: var(--ds-text-heading-600-size-breakpoint-lg, $ds-text-heading-600-size-breakpoint-lg); - line-height: var(--ds-text-heading-600-height-breakpoint-lg, $ds-text-heading-600-height-breakpoint-lg); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) { + font-size: var(--ds-text-heading-600-size-breakpoint-lg, SCSSVariables.$ds-text-heading-600-size-breakpoint-lg); + line-height: var(--ds-text-heading-600-height-breakpoint-lg, SCSSVariables.$ds-text-heading-600-height-breakpoint-lg); } } @@ -185,22 +187,22 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--500 { - margin: $ds-size-200 0; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--500 { + margin: SCSSVariables.$ds-size-200 0; - font-size: var(--ds-text-heading-500-size-breakpoint-sm, $ds-text-heading-500-size-breakpoint-sm); - font-weight: var(--ds-text-heading-500-weight, $ds-text-heading-500-weight); - line-height: var(--ds-text-heading-500-height-breakpoint-sm, $ds-text-heading-500-height-breakpoint-sm); + font-size: var(--ds-text-heading-500-size-breakpoint-sm, SCSSVariables.$ds-text-heading-500-size-breakpoint-sm); + font-weight: var(--ds-text-heading-500-weight, SCSSVariables.$ds-text-heading-500-weight); + line-height: var(--ds-text-heading-500-height-breakpoint-sm, SCSSVariables.$ds-text-heading-500-height-breakpoint-sm); - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - font-size: var(--ds-text-heading-500-size-breakpoint-md, $ds-text-heading-500-size-breakpoint-md); - line-height: var(--ds-text-heading-500-height-breakpoint-md, $ds-text-heading-500-height-breakpoint-md); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) { + font-size: var(--ds-text-heading-500-size-breakpoint-md, SCSSVariables.$ds-text-heading-500-size-breakpoint-md); + line-height: var(--ds-text-heading-500-height-breakpoint-md, SCSSVariables.$ds-text-heading-500-height-breakpoint-md); } - @include auro_breakpoint($min: $ds-grid-breakpoint-lg) { - font-size: var(--ds-text-heading-500-size-breakpoint-lg, $ds-text-heading-500-size-breakpoint-lg); - line-height: var(--ds-text-heading-500-height-breakpoint-lg, $ds-text-heading-500-height-breakpoint-lg); + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) { + font-size: var(--ds-text-heading-500-size-breakpoint-lg, SCSSVariables.$ds-text-heading-500-size-breakpoint-lg); + line-height: var(--ds-text-heading-500-height-breakpoint-lg, SCSSVariables.$ds-text-heading-500-height-breakpoint-lg); } } @@ -220,13 +222,13 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--400 { - margin: $ds-size-150 0; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--400 { + margin: SCSSVariables.$ds-size-150 0; - font-size: var(--ds-text-heading-400-size, $ds-text-heading-400-size); - font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight); - line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height); + font-size: var(--ds-text-heading-400-size, SCSSVariables.$ds-text-heading-400-size); + font-weight: var(--ds-text-heading-400-weight, SCSSVariables.$ds-text-heading-400-weight); + line-height: var(--ds-text-heading-400-height, SCSSVariables.$ds-text-heading-400-height); } /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector @@ -245,11 +247,11 @@ /// @example html - Example HTML selector use /// ... /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings"; -#{$scope}.#{$prefix}heading--300 { - margin: $ds-size-150 0; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *; +#{manageScope.$scope}.#{manageScope.$prefix}heading--300 { + margin: SCSSVariables.$ds-size-150 0; - font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size); - font-weight: var(--ds-text-heading-300-weight, $ds-text-heading-300-weight); - line-height: var(--ds-text-heading-300-height, $ds-text-heading-300-height); + font-size: var(--ds-text-heading-300-size, SCSSVariables.$ds-text-heading-300-size); + font-weight: var(--ds-text-heading-300-weight, SCSSVariables.$ds-text-heading-300-weight); + line-height: var(--ds-text-heading-300-height, SCSSVariables.$ds-text-heading-300-height); } diff --git a/src/_normalize.scss b/src/_normalize.scss index c73c8dfc..1c134574 100644 --- a/src/_normalize.scss +++ b/src/_normalize.scss @@ -3,7 +3,8 @@ // --------------------------------------------------------------------- -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; // sass-lint:disable variable-for-property, no-vendor-prefixes, no-duplicate-properties @@ -23,9 +24,9 @@ /// html.auro {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -html#{$scope} { +html#{manageScope.$scope} { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ @@ -46,9 +47,9 @@ html#{$scope} { /// .auro body {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}body { +#{manageScope.$scope}body { margin: 0; -webkit-font-smoothing: antialiased; @@ -67,9 +68,9 @@ html#{$scope} { /// .auro main {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}main { +#{manageScope.$scope}main { display: block; } @@ -89,9 +90,9 @@ html#{$scope} { /// .auro hr {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}hr { +#{manageScope.$scope}hr { overflow: visible; /* 1 */ box-sizing: content-box; /* 2 */ @@ -111,15 +112,11 @@ html#{$scope} { /// .auro pre {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}pre { +#{manageScope.$scope}pre { font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */ - @if variable-exists(ds-text-body-size-default) { - font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); /* 2 */ - } @else { - font-size: var(--size-font-root, $size-font-root); - } + font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default); /* 2 */ } /* Text-level semantics @@ -137,9 +134,9 @@ html#{$scope} { /// .auro a {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}a { +#{manageScope.$scope}a { background-color: transparent; } @@ -156,9 +153,9 @@ html#{$scope} { /// .auro abbr[title] {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}abbr { +#{manageScope.$scope}abbr { &[title] { text-decoration: underline; /* 1 */ text-decoration: underline dotted; /* 1 */ /* stylelint-disable-line declaration-block-no-duplicate-properties */ @@ -181,10 +178,10 @@ html#{$scope} { /// .auro strong {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}b, -#{$scope}strong { +#{manageScope.$scope}b, +#{manageScope.$scope}strong { font-weight: bolder; } @@ -205,17 +202,13 @@ html#{$scope} { /// .auro samp {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}code, -#{$scope}kbd, -#{$scope}samp { +#{manageScope.$scope}code, +#{manageScope.$scope}kbd, +#{manageScope.$scope}samp { font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */ - @if variable-exists(ds-text-body-size-default) { - font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); /* 2 */ - } @else { - font-size: var(--size-font-root, $size-font-root); - } + font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default); /* 2 */ } /// @@ -232,10 +225,10 @@ html#{$scope} { /// .auro sup {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}sub, -#{$scope}sup { +#{manageScope.$scope}sub, +#{manageScope.$scope}sup { position: relative; vertical-align: baseline; @@ -256,9 +249,9 @@ html#{$scope} { /// .auro sub {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}sub { +#{manageScope.$scope}sub { bottom: -.25em; } @@ -274,9 +267,9 @@ html#{$scope} { /// .auro sup {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}sup { +#{manageScope.$scope}sup { top: -.5em; } @@ -295,9 +288,9 @@ html#{$scope} { /// .auro img {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}img { +#{manageScope.$scope}img { border-style: none; } @@ -325,22 +318,18 @@ html#{$scope} { /// .auro textarea {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}button, -#{$scope}input, -#{$scope}optgroup, -#{$scope}select, -#{$scope}textarea { +#{manageScope.$scope}button, +#{manageScope.$scope}input, +#{manageScope.$scope}optgroup, +#{manageScope.$scope}select, +#{manageScope.$scope}textarea { margin: 0; /* 1 */ font-family: inherit; /* 2 */ font-size: 100%; /* 2 */ - @if variable-exists(ds-text-body-height-default) { - line-height: var(--ds-text-body-height-default, $ds-text-body-height-default); /* 2 */ - } @else { - line-height: var(--size-margin-baseline, $size-margin-baseline); /* 2 */ - } + line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default); /* 2 */ } /// @@ -358,10 +347,10 @@ html#{$scope} { /// .auro input {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}button, -#{$scope}input { /* 1 */ +#{manageScope.$scope}button, +#{manageScope.$scope}input { /* 1 */ overflow: visible; } @@ -380,10 +369,10 @@ html#{$scope} { /// .auro select {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}button, -#{$scope}select { /* 1 */ +#{manageScope.$scope}button, +#{manageScope.$scope}select { /* 1 */ text-transform: none; } @@ -405,12 +394,12 @@ html#{$scope} { /// .auro [type="submit"] {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}button, -#{$scope}[type='button'], -#{$scope}[type='reset'], -#{$scope}[type='submit'] { +#{manageScope.$scope}button, +#{manageScope.$scope}[type='button'], +#{manageScope.$scope}[type='reset'], +#{manageScope.$scope}[type='submit'] { -webkit-appearance: none; appearance: none; } @@ -427,9 +416,9 @@ html#{$scope} { /// .auro fieldset {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}fieldset { +#{manageScope.$scope}fieldset { padding: .35em .75em .625em; } @@ -448,9 +437,9 @@ html#{$scope} { /// .auro legend {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}legend { +#{manageScope.$scope}legend { display: table; /* 1 */ box-sizing: border-box; /* 1 */ @@ -474,9 +463,9 @@ html#{$scope} { /// .auro progress {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}progress { +#{manageScope.$scope}progress { vertical-align: baseline; } @@ -492,9 +481,9 @@ html#{$scope} { /// .auro textarea {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}textarea { +#{manageScope.$scope}textarea { overflow: auto; } @@ -512,9 +501,9 @@ html#{$scope} { /// .auro [type="number"]::-webkit-outer-spin-button {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}[type='number'] { +#{manageScope.$scope}[type='number'] { &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { height: auto; @@ -534,9 +523,9 @@ html#{$scope} { /// .auro [type="search"] {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}[type='search'] { +#{manageScope.$scope}[type='search'] { outline-offset: -2px; /* 1 */ -webkit-appearance: textfield; /* 2 */ @@ -555,9 +544,9 @@ html#{$scope} { /// .auro [type="search"]::-webkit-search-decoration {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}::-webkit-search-decoration { +#{manageScope.$scope}::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } @@ -575,9 +564,9 @@ html#{$scope} { /// .auro ::-webkit-file-upload-button {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}::-webkit-file-upload-button { +#{manageScope.$scope}::-webkit-file-upload-button { font: inherit; /* 1 */ -webkit-appearance: button; /* 2 */ @@ -599,9 +588,9 @@ html#{$scope} { /// .auro details {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}details { +#{manageScope.$scope}details { display: block; } @@ -617,9 +606,9 @@ html#{$scope} { /// .auro summary {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}summary { +#{manageScope.$scope}summary { display: list-item; } @@ -638,9 +627,9 @@ html#{$scope} { /// .auro template {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}template { +#{manageScope.$scope}template { display: none; } @@ -656,8 +645,8 @@ html#{$scope} { /// .auro [hidden] {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize" as *; /// -#{$scope}[hidden] { +#{manageScope.$scope}[hidden] { display: none; } diff --git a/src/_picture.scss b/src/_picture.scss index df36a7f0..13e34b82 100644 --- a/src/_picture.scss +++ b/src/_picture.scss @@ -2,7 +2,7 @@ // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import 'libSupport/manageScope'; +@use 'libSupport/manageScope'; $focus: null !default; @@ -22,9 +22,9 @@ $focus: null !default; /// .auro_picture img {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture" as *; /// -#{$sym}#{$prefix}picture#{$scope} { +#{manageScope.$sym}#{manageScope.$prefix}picture#{manageScope.$scope} { img { display: block; } diff --git a/src/_utilityClasses.scss b/src/_utilityClasses.scss index bffe9cde..3b597aee 100644 --- a/src/_utilityClasses.scss +++ b/src/_utilityClasses.scss @@ -4,19 +4,19 @@ // --------------------------------------------------------------------- // Set element display: none on mobile devices and tablets -@import 'utilityClasses/responsive'; +@use 'utilityClasses/responsive'; // Functional selectors for the use of defining different display properties -@import 'utilityClasses/displayProperties'; +@use 'utilityClasses/displayProperties'; // Functional selectors for the use of defining different font style properties -@import 'utilityClasses/fontStyles'; +@use 'utilityClasses/fontStyles'; // Functional selectors for the use of defining different layout properties -@import 'utilityClasses/layoutProperties'; +@use 'utilityClasses/layoutProperties'; // Functional selectors for the use of defining different list properties -@import 'utilityClasses/listProperties'; +@use 'utilityClasses/listProperties'; // Functional selectors for the use of defining different inset properties -@import 'utilityClasses/inset'; +@use 'utilityClasses/inset'; diff --git a/src/auroElement/README.md b/src/auroElement/README.md index d96132d8..3dbf7f8a 100644 --- a/src/auroElement/README.md +++ b/src/auroElement/README.md @@ -36,7 +36,7 @@ import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/a To complete the install, be sure to add the following to the `./src/styles.scss` file ```scss -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement"; +@use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; ``` ### Update class diff --git a/src/auroElement/_auroElement.scss b/src/auroElement/_auroElement.scss index f697e30a..5a0be0b9 100644 --- a/src/auroElement/_auroElement.scss +++ b/src/auroElement/_auroElement.scss @@ -3,7 +3,7 @@ // --------------------------------------------------------------------- -@import '../../src/utilityClasses/displayProperties'; +@use '../../src/utilityClasses/displayProperties'; /// Component a11y support for `:host`
/// For use with auroElement.js base class and web component development @@ -13,7 +13,7 @@ /// :host {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; :host { @extend .util_displayBlock; } @@ -26,7 +26,7 @@ /// :host([hidden]:not(:focus):not(:active)) {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; :host([hidden]:not(:focus):not(:active)) { @extend .util_displayHidden; } @@ -39,7 +39,7 @@ /// :host([hiddenVisually]:not(:focus):not(:active)) {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement" as *; :host([hiddenVisually]:not(:focus):not(:active)) { @extend .util_displayHiddenVisually; } diff --git a/src/bundled/legacy/auro-classic+fv.global.scss b/src/bundled/legacy/auro-classic+fv.global.scss index e27292e2..7214f11d 100644 --- a/src/bundled/legacy/auro-classic+fv.global.scss +++ b/src/bundled/legacy/auro-classic+fv.global.scss @@ -14,11 +14,9 @@ Provided for backwards compatibility. */ -// Import Sass variables -@import '../../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - // Import minimum essential files - focus-visible MUST be loaded BEFORE essentials. // Based on Auro Classic theme -@import '../../focus-visible'; -@import '../../essentials/legacy/auro-classic'; -@import '../../fonts/legacy/auro-classic'; +@use '../../focus-visible'; +@use '../../essentials/legacy/auro-classic'; +// Alias avoids a namespace collision with essentials/legacy/auro-classic above. +@use '../../fonts/legacy/auro-classic' as fonts-auro-classic; diff --git a/src/bundled/legacy/auro-classic.global.scss b/src/bundled/legacy/auro-classic.global.scss index ba5b8d49..f9794668 100644 --- a/src/bundled/legacy/auro-classic.global.scss +++ b/src/bundled/legacy/auro-classic.global.scss @@ -14,9 +14,7 @@ Provided for backwards compatibility. */ -// Import Sass variables -@import '../../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - // Import minimum essential files -@import '../../essentials/legacy/auro-classic'; -@import '../../fonts/legacy/auro-classic'; +@use '../../essentials/legacy/auro-classic'; +// Alias avoids a namespace collision with essentials/legacy/auro-classic above. +@use '../../fonts/legacy/auro-classic' as fonts-auro-classic; diff --git a/src/bundled/themes/theme.global.template.scss b/src/bundled/themes/theme.global.template.scss index ad545c84..27ba590b 100644 --- a/src/bundled/themes/theme.global.template.scss +++ b/src/bundled/themes/theme.global.template.scss @@ -11,12 +11,18 @@ // Template for theme compilation - THEME_NAME will be replaced by build script // Built with theme.global.css.build.mjs -// Tokens & config -@import "../../config/THEME_NAME"; - // Essentials -@import "../../essentials/themes/THEME_NAME"; -@import "../../fonts/themes/THEME_NAME"; +// Each theme's essentials module @uses its own config (tokens + base config map), +// so no global token threading is required. +@use "../../essentials/themes/THEME_NAME" as essentials; +@use "../../fonts/themes/THEME_NAME" as fonts; // Type styles -@import "../../type/themes/THEME_NAME"; +// Every theme's type custom properties are emitted so this single global +// stylesheet can switch themes at runtime via the data-aag-theme attribute. +// THEME_NAME is the default (also under :root); the other themes are scoped to +// their attribute selectors only (AB#1612078). +@use "../type/themes/THEME_NAME"; + +// Typography classes (theme-agnostic; reference the type custom properties above). +@use "../../type/mixins/type-classes-generator"; diff --git a/src/bundled/type/themes/_all-theme-configs.scss b/src/bundled/type/themes/_all-theme-configs.scss new file mode 100644 index 00000000..05bab750 --- /dev/null +++ b/src/bundled/type/themes/_all-theme-configs.scss @@ -0,0 +1,62 @@ +// Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Aggregates every theme's type config into a single map keyed by theme name, so +// the per-theme type bundles can emit all themes' custom properties in one file +// (each theme scoped by its data-aag-theme attribute). Each theme's config vars +// are uniquely named, so they coexist without collision. +// +// MAINTENANCE: this is a STATIC manifest. Theme discovery elsewhere (the build +// scripts theme-codes.build.mjs and type.classes.css.build.mjs) is dynamic, +// driven by design-tokens' THEME_DEFINITIONS. When a theme is added there, two +// files must be updated by hand: this manifest (import its config + add a +// $wcss-all-theme-configs entry) and a new src/bundled/type/themes/.scss. +// If you forget the bundled Sass file, the build script errors with a Sass +// "Can't find stylesheet"; if you forget the manifest entry, the spec test +// (typeThemeScoping.spec.scss) catches the drift. + +@use "../../../config/alaska-classic/type/accent" as accent2; +@use "../../../config/alaska-classic/type/body" as body2; +@use "../../../config/alaska-classic/type/display" as display2; +@use "../../../config/alaska-classic/type/heading" as heading2; +@use "../../../config/alaska/type/accent"; +@use "../../../config/alaska/type/body"; +@use "../../../config/alaska/type/display"; +@use "../../../config/alaska/type/heading"; +@use "../../../config/atmos/type/accent" as accent3; +@use "../../../config/atmos/type/body" as body3; +@use "../../../config/atmos/type/display" as display3; +@use "../../../config/atmos/type/heading" as heading3; +@use "../../../config/hawaiian/type/accent" as accent4; +@use "../../../config/hawaiian/type/body" as body4; +@use "../../../config/hawaiian/type/display" as display4; +@use "../../../config/hawaiian/type/heading" as heading4; + +$wcss-all-theme-configs: ( + 'alaska': ( + 'body': body.$alaska-type-body-config, + 'display': display.$alaska-type-display-config, + 'heading': heading.$alaska-type-heading-config, + 'accent': accent.$alaska-type-accent-config + ), + 'alaska-classic': ( + 'body': body2.$alaska-classic-type-body-config, + 'display': display2.$alaska-classic-type-display-config, + 'heading': heading2.$alaska-classic-type-heading-config, + 'accent': accent2.$alaska-classic-type-accent-config + ), + 'atmos': ( + 'body': body3.$atmos-type-body-config, + 'display': display3.$atmos-type-display-config, + 'heading': heading3.$atmos-type-heading-config, + 'accent': accent3.$atmos-type-accent-config + ), + 'hawaiian': ( + 'body': body4.$hawaiian-type-body-config, + 'display': display4.$hawaiian-type-display-config, + 'heading': heading4.$hawaiian-type-heading-config, + 'accent': accent4.$hawaiian-type-accent-config + ) +); diff --git a/src/bundled/type/themes/alaska-classic.scss b/src/bundled/type/themes/alaska-classic.scss new file mode 100644 index 00000000..865abf6e --- /dev/null +++ b/src/bundled/type/themes/alaska-classic.scss @@ -0,0 +1,14 @@ +// Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Alaska Classic type custom properties, multi-theme bundle. +// Emits every theme's type custom properties in one stylesheet, with Alaska Classic as +// the default (`:root`) theme. Consumers switch themes at runtime via the +// `data-aag-theme` attribute. + +@use "all-theme-configs"; +@use "../../../type/mixins/type-generator"; + +@include type-generator.generate-multi-theme-type-css-vars(all-theme-configs.$wcss-all-theme-configs, 'alaska-classic'); diff --git a/src/bundled/type/themes/alaska-classic/accent.scss b/src/bundled/type/themes/alaska-classic/accent.scss deleted file mode 100644 index 3f981173..00000000 --- a/src/bundled/type/themes/alaska-classic/accent.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska Classic theme Accent styles -@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as v; - -// Import config -@import "../../../../config/alaska-classic/type/accent"; - -// Import Accent theme -@import "../../../../type/themes/alaska-classic/accent"; diff --git a/src/bundled/type/themes/alaska-classic/body.scss b/src/bundled/type/themes/alaska-classic/body.scss deleted file mode 100644 index c33dc985..00000000 --- a/src/bundled/type/themes/alaska-classic/body.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska Classic theme Body styles -@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as v; - -// Import config -@import "../../../../config/alaska-classic/type/body"; - -// Import Body theme -@import "../../../../type/themes/alaska-classic/body"; diff --git a/src/bundled/type/themes/alaska-classic/display.scss b/src/bundled/type/themes/alaska-classic/display.scss deleted file mode 100644 index 664c161a..00000000 --- a/src/bundled/type/themes/alaska-classic/display.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska Classic theme Display styles -@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as v; - -// Import config -@import "../../../../config/alaska-classic/type/display"; - -// Import Display theme -@import "../../../../type/themes/alaska-classic/display"; diff --git a/src/bundled/type/themes/alaska-classic/heading.scss b/src/bundled/type/themes/alaska-classic/heading.scss deleted file mode 100644 index 0f0c14d7..00000000 --- a/src/bundled/type/themes/alaska-classic/heading.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska Classic theme Heading styles -@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as v; - -// Import config -@import "../../../../config/alaska-classic/type/heading"; - -// Import Heading theme -@import "../../../../type/themes/alaska-classic/heading"; diff --git a/src/bundled/type/themes/alaska.scss b/src/bundled/type/themes/alaska.scss new file mode 100644 index 00000000..de026858 --- /dev/null +++ b/src/bundled/type/themes/alaska.scss @@ -0,0 +1,14 @@ +// Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Alaska type custom properties, multi-theme bundle. +// Emits every theme's type custom properties in one stylesheet, with Alaska as +// the default (`:root`) theme. Consumers switch themes at runtime via the +// `data-aag-theme` attribute. + +@use "all-theme-configs"; +@use "../../../type/mixins/type-generator"; + +@include type-generator.generate-multi-theme-type-css-vars(all-theme-configs.$wcss-all-theme-configs, 'alaska'); diff --git a/src/bundled/type/themes/alaska/accent.scss b/src/bundled/type/themes/alaska/accent.scss deleted file mode 100644 index 507397e4..00000000 --- a/src/bundled/type/themes/alaska/accent.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska theme Accent styles -@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; - -// Import config -@import "../../../../config/alaska/type/accent"; - -// Import Accent theme -@import "../../../../type/themes/alaska/accent"; diff --git a/src/bundled/type/themes/alaska/body.scss b/src/bundled/type/themes/alaska/body.scss deleted file mode 100644 index be609556..00000000 --- a/src/bundled/type/themes/alaska/body.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska theme Body styles -@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; - -// Import config -@import "../../../../config/alaska/type/body"; - -// Import Body theme -@import "../../../../type/themes/alaska/body"; diff --git a/src/bundled/type/themes/alaska/display.scss b/src/bundled/type/themes/alaska/display.scss deleted file mode 100644 index ffcbb8ed..00000000 --- a/src/bundled/type/themes/alaska/display.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska theme Display styles -@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; - -// Import config -@import "../../../../config/alaska/type/display"; - -// Import Display theme -@import "../../../../type/themes/alaska/display"; diff --git a/src/bundled/type/themes/alaska/heading.scss b/src/bundled/type/themes/alaska/heading.scss deleted file mode 100644 index da628b8f..00000000 --- a/src/bundled/type/themes/alaska/heading.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Alaska theme Heading styles -@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; - -// Import config -@import "../../../../config/alaska/type/heading"; - -// Import Heading theme -@import "../../../../type/themes/alaska/heading"; diff --git a/src/bundled/type/themes/atmos.scss b/src/bundled/type/themes/atmos.scss new file mode 100644 index 00000000..8c6b74bb --- /dev/null +++ b/src/bundled/type/themes/atmos.scss @@ -0,0 +1,14 @@ +// Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Atmos type custom properties, multi-theme bundle. +// Emits every theme's type custom properties in one stylesheet, with Atmos as +// the default (`:root`) theme. Consumers switch themes at runtime via the +// `data-aag-theme` attribute. + +@use "all-theme-configs"; +@use "../../../type/mixins/type-generator"; + +@include type-generator.generate-multi-theme-type-css-vars(all-theme-configs.$wcss-all-theme-configs, 'atmos'); diff --git a/src/bundled/type/themes/auro-1/accent.scss b/src/bundled/type/themes/auro-1/accent.scss deleted file mode 100644 index f83a2ee8..00000000 --- a/src/bundled/type/themes/auro-1/accent.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-1 theme Accent styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1" as v; - -// Import config -@import "../../../../config/auro-1/type/accent"; - -// Import Accent theme -@import "../../../../type/themes/auro-1/accent"; diff --git a/src/bundled/type/themes/auro-1/body.scss b/src/bundled/type/themes/auro-1/body.scss deleted file mode 100644 index 6beb32bc..00000000 --- a/src/bundled/type/themes/auro-1/body.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-1 theme Body styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1" as v; - -// Import config -@import "../../../../config/auro-1/type/body"; - -// Import Body theme -@import "../../../../type/themes/auro-1/body"; diff --git a/src/bundled/type/themes/auro-1/display.scss b/src/bundled/type/themes/auro-1/display.scss deleted file mode 100644 index abf4adee..00000000 --- a/src/bundled/type/themes/auro-1/display.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-1 theme Display styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1" as v; - -// Import config -@import "../../../../config/auro-1/type/display"; - -// Import Display theme -@import "../../../../type/themes/auro-1/display"; diff --git a/src/bundled/type/themes/auro-1/heading.scss b/src/bundled/type/themes/auro-1/heading.scss deleted file mode 100644 index 7e915d79..00000000 --- a/src/bundled/type/themes/auro-1/heading.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-1 theme Heading styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1" as v; - -// Import config -@import "../../../../config/auro-1/type/heading"; - -// Import Heading theme -@import "../../../../type/themes/auro-1/heading"; diff --git a/src/bundled/type/themes/auro-2/accent.scss b/src/bundled/type/themes/auro-2/accent.scss deleted file mode 100644 index e59f8bf3..00000000 --- a/src/bundled/type/themes/auro-2/accent.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-2 theme Accent styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2" as v; - -// Import config -@import "../../../../config/auro-2/type/accent"; - -// Import Accent theme -@import "../../../../type/themes/auro-2/accent"; diff --git a/src/bundled/type/themes/auro-2/body.scss b/src/bundled/type/themes/auro-2/body.scss deleted file mode 100644 index ecd5b1e5..00000000 --- a/src/bundled/type/themes/auro-2/body.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-2 theme Body styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2" as v; - -// Import config -@import "../../../../config/auro-2/type/body"; - -// Import Body theme -@import "../../../../type/themes/auro-2/body"; diff --git a/src/bundled/type/themes/auro-2/display.scss b/src/bundled/type/themes/auro-2/display.scss deleted file mode 100644 index 75a0f0a7..00000000 --- a/src/bundled/type/themes/auro-2/display.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-2 theme Display styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2" as v; - -// Import config -@import "../../../../config/auro-2/type/display"; - -// Import Display theme -@import "../../../../type/themes/auro-2/display"; diff --git a/src/bundled/type/themes/auro-2/heading.scss b/src/bundled/type/themes/auro-2/heading.scss deleted file mode 100644 index 0b79b9a7..00000000 --- a/src/bundled/type/themes/auro-2/heading.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for auro-2 theme Heading styles -@use "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2" as v; - -// Import config -@import "../../../../config/auro-2/type/heading"; - -// Import Heading theme -@import "../../../../type/themes/auro-2/heading"; diff --git a/src/bundled/type/themes/hawaiian.scss b/src/bundled/type/themes/hawaiian.scss new file mode 100644 index 00000000..ef0eedad --- /dev/null +++ b/src/bundled/type/themes/hawaiian.scss @@ -0,0 +1,14 @@ +// Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Hawaiian type custom properties, multi-theme bundle. +// Emits every theme's type custom properties in one stylesheet, with Hawaiian as +// the default (`:root`) theme. Consumers switch themes at runtime via the +// `data-aag-theme` attribute. + +@use "all-theme-configs"; +@use "../../../type/mixins/type-generator"; + +@include type-generator.generate-multi-theme-type-css-vars(all-theme-configs.$wcss-all-theme-configs, 'hawaiian'); diff --git a/src/bundled/type/themes/hawaiian/accent.scss b/src/bundled/type/themes/hawaiian/accent.scss deleted file mode 100644 index 6195aa76..00000000 --- a/src/bundled/type/themes/hawaiian/accent.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Hawaiian theme Accent styles -@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; - -// Import config -@import "../../../../config/hawaiian/type/accent"; - -// Import Accent theme -@import "../../../../type/themes/hawaiian/accent"; diff --git a/src/bundled/type/themes/hawaiian/body.scss b/src/bundled/type/themes/hawaiian/body.scss deleted file mode 100644 index 19dc9330..00000000 --- a/src/bundled/type/themes/hawaiian/body.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Hawaiian theme Body styles -@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; - -// Import config -@import "../../../../config/hawaiian/type/body"; - -// Import Body theme -@import "../../../../type/themes/hawaiian/body"; diff --git a/src/bundled/type/themes/hawaiian/display.scss b/src/bundled/type/themes/hawaiian/display.scss deleted file mode 100644 index d9691458..00000000 --- a/src/bundled/type/themes/hawaiian/display.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Hawaiian theme Display styles -@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; - -// Import config -@import "../../../../config/hawaiian/type/display"; - -// Import Display theme -@import "../../../../type/themes/hawaiian/display"; diff --git a/src/bundled/type/themes/hawaiian/heading.scss b/src/bundled/type/themes/hawaiian/heading.scss deleted file mode 100644 index 19a69db4..00000000 --- a/src/bundled/type/themes/hawaiian/heading.scss +++ /dev/null @@ -1,8 +0,0 @@ -// This file provides a convenient single import for Hawaiian theme Heading styles -@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; - -// Import config -@import "../../../../config/hawaiian/type/heading"; - -// Import Heading theme -@import "../../../../type/themes/hawaiian/heading"; diff --git a/src/componentSupport/_anchor-roleButton.scss b/src/componentSupport/_anchor-roleButton.scss index a8ff8153..44a7f557 100644 --- a/src/componentSupport/_anchor-roleButton.scss +++ b/src/componentSupport/_anchor-roleButton.scss @@ -3,15 +3,15 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; // Wrapper class around anchor-roleButton utility mixin // This selector is NOT auto included with any other web code style sheet. // If the auro_roleButton selector is required, it is to be individually included. -@import '../utilityMixins/anchor-roleButton'; +@use '../utilityMixins/anchor-roleButton'; /// `.auro_roleButton` is a utility class to support the UI of a standard html hyperlink using the attribute `role="button"`. This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute. /// @@ -26,7 +26,7 @@ /// .auro .auro_roleButton {} /// /// @example scss - import selector file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton"; -#{$scope}.auro_roleButton { - @include auro_anchorButton(sass, noncomponent); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton" as *; +#{manageScope.$scope}.auro_roleButton { + @include anchor-roleButton.auro_anchorButton(sass, noncomponent); } diff --git a/src/componentSupport/_anchor-roleTab.scss b/src/componentSupport/_anchor-roleTab.scss index 5f02a3c4..c74e75a5 100644 --- a/src/componentSupport/_anchor-roleTab.scss +++ b/src/componentSupport/_anchor-roleTab.scss @@ -3,9 +3,10 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; -@import '../utilityMixins/anchor-roleTab'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; +@use '../utilityMixins/anchor-roleTab'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; /// `auro_roleTab` is a helper class to support the UI of a hyperlink using `role="tab"` /// @@ -18,9 +19,9 @@ /// .auro .auro_roleTab {} /// /// @example scss - import selector file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab"; -#{$scope}.auro_roleTab { - margin-right: calc(#{$ds-size-50} * -1); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab" as *; +#{manageScope.$scope}.auro_roleTab { + margin-right: calc(#{tokens.$ds-size-50} * -1); - @include auro_anchorTab(sass, noncomponent); + @include anchor-roleTab.auro_anchorTab(sass, noncomponent); } diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss index 372562e6..6afc2318 100644 --- a/src/componentSupport/_containedButtons.scss +++ b/src/componentSupport/_containedButtons.scss @@ -3,8 +3,10 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; +@use "../breakpoints" as breakpoints; // Wrapper class around the use of ods-hyperlink role=button and ods-button. @@ -28,28 +30,28 @@ /// .auro .auro_containedButtons {} /// /// @example scss - import selector file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons" as *; /// @example scss - import dependency file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; -#{$scope}.auro_containedButtons { +#{manageScope.$scope}.auro_containedButtons { display: flex; flex-direction: column; > * { - margin-bottom: var(--ds-text-body-size-default, $ds-text-body-size-default); + margin-bottom: var(--ds-text-body-size-default, tokens.$ds-text-body-size-default); &:last-child { margin-bottom: 0; } } - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { + @include breakpoints.auro_breakpoint($min: tokens.$ds-grid-breakpoint-md) { flex-direction: row; > * { margin-bottom: 0; - margin-left: var(--ds-text-body-size-default, $ds-text-body-size-default); + margin-left: var(--ds-text-body-size-default, tokens.$ds-text-body-size-default); &:first-child { margin-left: 0; diff --git a/src/componentSupport/_table.scss b/src/componentSupport/_table.scss index 7a740266..1959f155 100644 --- a/src/componentSupport/_table.scss +++ b/src/componentSupport/_table.scss @@ -1,3 +1,7 @@ +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; +@use "../breakpoints"; +@use "../libSupport/manageScope"; + // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -10,33 +14,33 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` options. /// @group utility-auro /// @example scss - import selector file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table" as *; -#{$scope}.auro_table { +#{manageScope.$scope}.auro_table { display: block; overflow: scroll; width: auto; - margin-bottom: var(--ds-size-400, $ds-size-400); + margin-bottom: var(--ds-size-400, SCSSVariables.$ds-size-400); - border-spacing: var(--ds-size-150, $ds-size-150); + border-spacing: var(--ds-size-150, SCSSVariables.$ds-size-150); border-collapse: collapse; - font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight); + font-weight: var(--ds-text-heading-display-weight, SCSSVariables.$ds-text-heading-display-weight); tr { &:nth-child(even) { - background-color: var(--ds-color-container-secondary-default, $ds-color-container-secondary-default); + background-color: var(--ds-color-container-secondary-default, SCSSVariables.$ds-color-container-secondary-default); } } th { text-align: left; - font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight); + font-weight: var(--ds-text-heading-default-weight, SCSSVariables.$ds-text-heading-default-weight); } - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { + @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-sm) { display: table; width: 100%; @@ -44,11 +48,11 @@ thead { border-collapse: collapse; - border-bottom: 1px solid var(--ds-color-border-tertiary-default, $ds-color-border-tertiary-default); + border-bottom: 1px solid var(--ds-color-border-tertiary-default, SCSSVariables.$ds-color-border-tertiary-default); } th, td { - padding: var(--ds-size-200, $ds-size-200); + padding: var(--ds-size-200, SCSSVariables.$ds-size-200); } } diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss index fccb3b1c..3e9ebcf0 100644 --- a/src/componentSupport/_tablist.scss +++ b/src/componentSupport/_tablist.scss @@ -3,8 +3,10 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; +@use "../breakpoints" as breakpoints; /// `.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"` /// @@ -13,23 +15,23 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` options. /// @group utility-auro /// @example scss - import selector file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist" as *; -#{$scope}.auro_tablist { +#{manageScope.$scope}.auro_tablist { overflow-y: scroll; - height: calc(#{$ds-size-600} + 1px); - margin-bottom: var(--ds-size-200, $ds-size-200); + height: calc(#{tokens.$ds-size-600} + 1px); + margin-bottom: var(--ds-size-200, tokens.$ds-size-200); white-space: nowrap; border-width: 0 0 1px; border-style: solid; - border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); + border-color: var(--ds-color-border-primary-default, tokens.$ds-color-border-primary-default); - line-height: var(--ds-size-600, $ds-size-600); + line-height: var(--ds-size-600, tokens.$ds-size-600); - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { + @include breakpoints.auro_breakpoint($min: tokens.$ds-grid-breakpoint-sm) { overflow-y: unset; white-space: unset; diff --git a/src/config/_index.scss b/src/config/_index.scss index d8ee7a57..79840a85 100644 --- a/src/config/_index.scss +++ b/src/config/_index.scss @@ -5,9 +5,12 @@ // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes -// Theme configs -@import 'alaska'; -@import 'alaska-classic'; -@import 'auro-1'; -@import 'auro-2'; -@import 'hawaiian'; +// Theme configs. +// Alaska and Alaska Classic both expose a `$alaska-base-config` map (Alaska Classic +// forwards Alaska's), so the module system cannot forward every theme into one flat +// namespace without collisions. Each theme is forwarded under a theme prefix +// (e.g. `atmos.$atmos-base-config`) to keep every config reachable. +@forward "alaska" as alaska-*; +@forward "alaska-classic" as alaska-classic-*; +@forward "atmos" as atmos-*; +@forward "hawaiian" as hawaiian-*; diff --git a/src/config/alaska-classic/base/index.scss b/src/config/alaska-classic/base/index.scss index 7dac7c14..4c0863ea 100644 --- a/src/config/alaska-classic/base/index.scss +++ b/src/config/alaska-classic/base/index.scss @@ -1,2 +1,2 @@ // Alaska Classic uses the same base configuration as Alaska, as it is a derivative theme. -@import "../../alaska/base"; +@forward "../../alaska/base"; diff --git a/src/config/alaska-classic/index.scss b/src/config/alaska-classic/index.scss index e275891b..2f18fb21 100644 --- a/src/config/alaska-classic/index.scss +++ b/src/config/alaska-classic/index.scss @@ -2,5 +2,5 @@ // See LICENSE in the project root for license information. // Alaska Classic theme configs -@import "base"; -@import "type"; +@forward "base"; +@forward "type"; diff --git a/src/config/alaska-classic/type/accent.scss b/src/config/alaska-classic/type/accent.scss index 395b3de8..c0c4e690 100644 --- a/src/config/alaska-classic/type/accent.scss +++ b/src/config/alaska-classic/type/accent.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska-classic/SCSSVariables--alaskaClassic" as v; + // Accent - Type $alaska-classic-type-accent-config: ( 'family': v.$ds-basic-type-family-accent, diff --git a/src/config/alaska-classic/type/body.scss b/src/config/alaska-classic/type/body.scss index c0d14d32..42843ac5 100644 --- a/src/config/alaska-classic/type/body.scss +++ b/src/config/alaska-classic/type/body.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska-classic/SCSSVariables--alaskaClassic" as v; + // Body - Type $alaska-classic-type-body-config: ( 'family': v.$ds-basic-type-family-body, diff --git a/src/config/alaska-classic/type/display.scss b/src/config/alaska-classic/type/display.scss index a60ca9e1..922648ed 100644 --- a/src/config/alaska-classic/type/display.scss +++ b/src/config/alaska-classic/type/display.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska-classic/SCSSVariables--alaskaClassic" as v; + // Display - Type $alaska-classic-type-display-config: ( 'family': v.$ds-basic-type-family-display, diff --git a/src/config/alaska-classic/type/heading.scss b/src/config/alaska-classic/type/heading.scss index 49236e62..4f845d9e 100644 --- a/src/config/alaska-classic/type/heading.scss +++ b/src/config/alaska-classic/type/heading.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska-classic/SCSSVariables--alaskaClassic" as v; + // Heading - Type $alaska-classic-type-heading-config: ( 'family': v.$ds-basic-type-family-heading, diff --git a/src/config/alaska-classic/type/index.scss b/src/config/alaska-classic/type/index.scss index 308e5612..27b99550 100644 --- a/src/config/alaska-classic/type/index.scss +++ b/src/config/alaska-classic/type/index.scss @@ -1,7 +1,5 @@ -@use "@aurodesignsystem/design-tokens/dist/themes/alaska-classic/SCSSVariables--alaskaClassic" as v; - // Alaska Classic Type Configs -@import "accent"; -@import "body"; -@import "display"; -@import "heading"; +@forward "accent"; +@forward "body"; +@forward "display"; +@forward "heading"; diff --git a/src/config/alaska/base/essentials.scss b/src/config/alaska/base/essentials.scss index 33d91123..5f871cee 100644 --- a/src/config/alaska/base/essentials.scss +++ b/src/config/alaska/base/essentials.scss @@ -1,23 +1,26 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as tokens; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as classic; + // Base Essentials $alaska-base-config: ( - 'font-size': $ds-type-size-16, - 'text-color': $ds-basic-color-texticon-default, - 'font-family': $ds-basic-type-family-body, - 'font-family-fallback': $ds-basic-type-family-body-fallback, - 'font-weight': $ds-type-weight-book, - 'line-height': $ds-type-line-height-px-24, - 'letter-spacing': $ds-type-letter-spacing-0, - 'hyperlink-color': $ds-advanced-color-hyperlink-text, - 'hyperlink-hover-color': $ds-advanced-color-hyperlink-text-hover, - 'hyperlink-inverse-color': $ds-advanced-color-hyperlink-text-inverse, - 'hyperlink-inverse-hover-color': $ds-advanced-color-hyperlink-text-inverse-hover, - 'focus-color': $ds-advanced-color-state-focused, - 'focus-offset': $ds-size-25, - 'focus-width': $ds-size-50, - 'small-font-size': $ds-type-size-12, - 'small-font-weight': $ds-type-weight-book, - 'small-line-height': $ds-type-line-height-px-16, - 'small-letter-spacing': $ds-type-letter-spacing-0, - 'paragraph-line-height': $ds-type-line-height-px-16, - 'muted-text-color': $ds-basic-color-texticon-muted + 'font-size': tokens.$ds-type-size-16, + 'text-color': tokens.$ds-basic-color-texticon-default, + 'font-family': tokens.$ds-basic-type-family-body, + 'font-family-fallback': tokens.$ds-basic-type-family-body-fallback, + 'font-weight': tokens.$ds-type-weight-book, + 'line-height': tokens.$ds-type-line-height-px-24, + 'letter-spacing': tokens.$ds-type-letter-spacing-0, + 'hyperlink-color': tokens.$ds-advanced-color-hyperlink-text, + 'hyperlink-hover-color': tokens.$ds-advanced-color-hyperlink-text-hover, + 'hyperlink-inverse-color': tokens.$ds-advanced-color-hyperlink-text-inverse, + 'hyperlink-inverse-hover-color': tokens.$ds-advanced-color-hyperlink-text-inverse-hover, + 'focus-color': tokens.$ds-advanced-color-state-focused, + 'focus-offset': classic.$ds-size-25, + 'focus-width': classic.$ds-size-50, + 'small-font-size': tokens.$ds-type-size-12, + 'small-font-weight': tokens.$ds-type-weight-book, + 'small-line-height': tokens.$ds-type-line-height-px-16, + 'small-letter-spacing': tokens.$ds-type-letter-spacing-0, + 'paragraph-line-height': tokens.$ds-type-line-height-px-16, + 'muted-text-color': tokens.$ds-basic-color-texticon-muted ); diff --git a/src/config/alaska/base/index.scss b/src/config/alaska/base/index.scss index 3d126fd7..2b5ca212 100644 --- a/src/config/alaska/base/index.scss +++ b/src/config/alaska/base/index.scss @@ -1,5 +1,2 @@ -@import "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska"; -@import "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; - // Alaska Base Configs -@import "essentials"; +@forward "essentials"; diff --git a/src/config/alaska/index.scss b/src/config/alaska/index.scss index a4c3ea45..ef8d0cc9 100644 --- a/src/config/alaska/index.scss +++ b/src/config/alaska/index.scss @@ -2,5 +2,5 @@ // See LICENSE in the project root for license information. // Alaska theme configs -@import "base"; -@import "type"; +@forward "base"; +@forward "type"; diff --git a/src/config/alaska/type/accent.scss b/src/config/alaska/type/accent.scss index 66f42efd..78d0302a 100644 --- a/src/config/alaska/type/accent.scss +++ b/src/config/alaska/type/accent.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; + // Accent - Type $alaska-type-accent-config: ( 'family': v.$ds-basic-type-family-accent, diff --git a/src/config/alaska/type/body.scss b/src/config/alaska/type/body.scss index f024a7d7..6250401c 100644 --- a/src/config/alaska/type/body.scss +++ b/src/config/alaska/type/body.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; + // Body - Type $alaska-type-body-config: ( 'family': v.$ds-basic-type-family-body, diff --git a/src/config/alaska/type/display.scss b/src/config/alaska/type/display.scss index a1b7504b..a4f1513a 100644 --- a/src/config/alaska/type/display.scss +++ b/src/config/alaska/type/display.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; + // Display - Type $alaska-type-display-config: ( 'family': v.$ds-basic-type-family-display, diff --git a/src/config/alaska/type/heading.scss b/src/config/alaska/type/heading.scss index 98e533e7..28358f59 100644 --- a/src/config/alaska/type/heading.scss +++ b/src/config/alaska/type/heading.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; + // Heading - Type $alaska-type-heading-config: ( 'family': v.$ds-basic-type-family-heading, diff --git a/src/config/alaska/type/index.scss b/src/config/alaska/type/index.scss index 52c46c01..5cd461f2 100644 --- a/src/config/alaska/type/index.scss +++ b/src/config/alaska/type/index.scss @@ -1,7 +1,5 @@ -@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; - // Alaska Type Configs -@import "accent"; -@import "body"; -@import "display"; -@import "heading"; +@forward "accent"; +@forward "body"; +@forward "display"; +@forward "heading"; diff --git a/src/config/atmos/base/essentials.scss b/src/config/atmos/base/essentials.scss new file mode 100644 index 00000000..5aac25d6 --- /dev/null +++ b/src/config/atmos/base/essentials.scss @@ -0,0 +1,26 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as tokens; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as classic; + +// Atmos Base Essentials (Alaska base structure resolved against Atmos design tokens) +$atmos-base-config: ( + 'font-size': tokens.$ds-type-size-16, + 'text-color': tokens.$ds-basic-color-texticon-default, + 'font-family': tokens.$ds-basic-type-family-body, + 'font-family-fallback': tokens.$ds-basic-type-family-body-fallback, + 'font-weight': tokens.$ds-type-weight-book, + 'line-height': tokens.$ds-type-line-height-px-24, + 'letter-spacing': tokens.$ds-type-letter-spacing-0, + 'hyperlink-color': tokens.$ds-advanced-color-hyperlink-text, + 'hyperlink-hover-color': tokens.$ds-advanced-color-hyperlink-text-hover, + 'hyperlink-inverse-color': tokens.$ds-advanced-color-hyperlink-text-inverse, + 'hyperlink-inverse-hover-color': tokens.$ds-advanced-color-hyperlink-text-inverse-hover, + 'focus-color': tokens.$ds-advanced-color-state-focused, + 'focus-offset': classic.$ds-size-25, + 'focus-width': classic.$ds-size-50, + 'small-font-size': tokens.$ds-type-size-12, + 'small-font-weight': tokens.$ds-type-weight-book, + 'small-line-height': tokens.$ds-type-line-height-px-16, + 'small-letter-spacing': tokens.$ds-type-letter-spacing-0, + 'paragraph-line-height': tokens.$ds-type-line-height-px-16, + 'muted-text-color': tokens.$ds-basic-color-texticon-muted +); diff --git a/src/config/atmos/base/index.scss b/src/config/atmos/base/index.scss new file mode 100644 index 00000000..fb3180aa --- /dev/null +++ b/src/config/atmos/base/index.scss @@ -0,0 +1,2 @@ +// Atmos Base Configs - Alaska base essentials structure resolved against Atmos design tokens +@forward "essentials"; diff --git a/src/config/auro-2/index.scss b/src/config/atmos/index.scss similarity index 72% rename from src/config/auro-2/index.scss rename to src/config/atmos/index.scss index d2621b67..daa5ce09 100644 --- a/src/config/auro-2/index.scss +++ b/src/config/atmos/index.scss @@ -1,6 +1,6 @@ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. -// Auro 2 theme configs -@import "base"; -@import "type"; +// Atmos theme configs +@forward "base"; +@forward "type"; diff --git a/src/config/auro-1/type/accent.scss b/src/config/atmos/type/accent.scss similarity index 95% rename from src/config/auro-1/type/accent.scss rename to src/config/atmos/type/accent.scss index d8eefeef..3a362588 100644 --- a/src/config/auro-1/type/accent.scss +++ b/src/config/atmos/type/accent.scss @@ -1,5 +1,7 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as v; + // Accent - Type -$auro-1-type-accent-config: ( +$atmos-type-accent-config: ( 'family': v.$ds-basic-type-family-accent, 'familyFallback': v.$ds-basic-type-family-accent-fallback, 'sizes': ( diff --git a/src/config/auro-2/type/body.scss b/src/config/atmos/type/body.scss similarity index 94% rename from src/config/auro-2/type/body.scss rename to src/config/atmos/type/body.scss index 4142d940..5d49879b 100644 --- a/src/config/auro-2/type/body.scss +++ b/src/config/atmos/type/body.scss @@ -1,5 +1,7 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as v; + // Body - Type -$auro-2-type-body-config: ( +$atmos-type-body-config: ( 'family': v.$ds-basic-type-family-body, 'familyFallback': v.$ds-basic-type-family-body-fallback, 'letter-spacing': v.$ds-basic-type-letter-spacing-body, diff --git a/src/config/auro-2/type/display.scss b/src/config/atmos/type/display.scss similarity index 91% rename from src/config/auro-2/type/display.scss rename to src/config/atmos/type/display.scss index 4a69e002..13587c1e 100644 --- a/src/config/auro-2/type/display.scss +++ b/src/config/atmos/type/display.scss @@ -1,5 +1,7 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as v; + // Display - Type -$auro-2-type-display-config: ( +$atmos-type-display-config: ( 'family': v.$ds-basic-type-family-display, 'familyFallback': v.$ds-basic-type-family-display-fallback, 'weight': v.$ds-basic-type-weight-display, diff --git a/src/config/auro-2/type/heading.scss b/src/config/atmos/type/heading.scss similarity index 92% rename from src/config/auro-2/type/heading.scss rename to src/config/atmos/type/heading.scss index de0d3ced..43dadeae 100644 --- a/src/config/auro-2/type/heading.scss +++ b/src/config/atmos/type/heading.scss @@ -1,5 +1,7 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as v; + // Heading - Type -$auro-2-type-heading-config: ( +$atmos-type-heading-config: ( 'family': v.$ds-basic-type-family-heading, 'familyFallback': v.$ds-basic-type-family-heading-fallback, 'letter-spacing': v.$ds-basic-type-letter-spacing-heading, diff --git a/src/config/atmos/type/index.scss b/src/config/atmos/type/index.scss new file mode 100644 index 00000000..fa774534 --- /dev/null +++ b/src/config/atmos/type/index.scss @@ -0,0 +1,5 @@ +// Atmos Type Configs +@forward "accent"; +@forward "body"; +@forward "display"; +@forward "heading"; diff --git a/src/config/auro-1/base/index.scss b/src/config/auro-1/base/index.scss deleted file mode 100644 index 0ddce547..00000000 --- a/src/config/auro-1/base/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1"; -@import "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; - -// Auro-1 Base Configs - uses Alaska base essentials with Auro-1 design tokens -@import "../../alaska/base/essentials"; diff --git a/src/config/auro-1/index.scss b/src/config/auro-1/index.scss deleted file mode 100644 index dcd73de2..00000000 --- a/src/config/auro-1/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// Auro 1 theme configs -@import "base"; -@import "type"; diff --git a/src/config/auro-1/type/body.scss b/src/config/auro-1/type/body.scss deleted file mode 100644 index 5e170211..00000000 --- a/src/config/auro-1/type/body.scss +++ /dev/null @@ -1,58 +0,0 @@ -// Body - Type -$auro-1-type-body-config: ( - 'family': v.$ds-basic-type-family-body, - 'familyFallback': v.$ds-basic-type-family-body-fallback, - 'letter-spacing': v.$ds-basic-type-letter-spacing-body, - 'sizes': ( - 'default': ( - 'font-size': v.$ds-type-size-16, - 'line-height': v.$ds-basic-type-line-height-body2, - 'weight': v.$ds-basic-type-weight-body - ), - 'default-emphasized': ( - 'font-size': v.$ds-type-size-16, - 'line-height': v.$ds-basic-type-line-height-body2, - 'weight': v.$ds-type-weight-medium - ), - 'lg': ( - 'font-size': v.$ds-type-size-18, - 'line-height': v.$ds-basic-type-line-height-body, - 'weight': v.$ds-basic-type-weight-body - ), - 'lg-emphasized': ( - 'font-size': v.$ds-type-size-18, - 'line-height': v.$ds-basic-type-line-height-body, - 'weight': v.$ds-type-weight-medium - ), - 'sm': ( - 'font-size': v.$ds-type-size-14, - 'line-height': v.$ds-basic-type-line-height-body3, - 'weight': v.$ds-basic-type-weight-body - ), - 'sm-emphasized': ( - 'font-size': v.$ds-type-size-14, - 'line-height': v.$ds-basic-type-line-height-body3, - 'weight': v.$ds-type-weight-medium - ), - 'xs': ( - 'font-size': v.$ds-type-size-12, - 'line-height': v.$ds-basic-type-line-height-body4, - 'weight': v.$ds-basic-type-weight-body - ), - 'xs-emphasized': ( - 'font-size': v.$ds-type-size-12, - 'line-height': v.$ds-basic-type-line-height-body4, - 'weight': v.$ds-type-weight-medium - ), - '2xs': ( - 'font-size': v.$ds-type-size-10, - 'line-height': v.$ds-basic-type-line-height-body5, - 'weight': v.$ds-basic-type-weight-body - ), - '2xs-emphasized': ( - 'font-size': v.$ds-type-size-10, - 'line-height': v.$ds-basic-type-line-height-body5, - 'weight': v.$ds-type-weight-medium - ) - ) -); diff --git a/src/config/auro-1/type/display.scss b/src/config/auro-1/type/display.scss deleted file mode 100644 index f888bfd9..00000000 --- a/src/config/auro-1/type/display.scss +++ /dev/null @@ -1,52 +0,0 @@ -// Display - Type -$auro-1-type-display-config: ( - 'family': v.$ds-basic-type-family-display, - 'familyFallback': v.$ds-basic-type-family-display-fallback, - 'weight': v.$ds-basic-type-weight-display, - 'letter-spacing': v.$ds-basic-type-letter-spacing-display, - 'line-height': v.$ds-basic-type-line-height-display, - 'sizes': ( - '2xl': ( - 'font-size': ( - 'min': v.$ds-type-size-56, - 'max': v.$ds-type-size-86, - 'preferred': v.$ds-type-size-72 - ) - ), - 'xl': ( - 'font-size': ( - 'min': v.$ds-type-size-48, - 'max': v.$ds-type-size-72, - 'preferred': v.$ds-type-size-64 - ) - ), - 'lg': ( - 'font-size': ( - 'min': v.$ds-type-size-44, - 'max': v.$ds-type-size-64, - 'preferred': v.$ds-type-size-56 - ) - ), - 'md': ( - 'font-size': ( - 'min': v.$ds-type-size-40, - 'max': v.$ds-type-size-56, - 'preferred': v.$ds-type-size-48 - ) - ), - 'sm': ( - 'font-size': ( - 'min': v.$ds-type-size-32, - 'max': v.$ds-type-size-48, - 'preferred': v.$ds-type-size-44 - ) - ), - 'xs': ( - 'font-size': ( - 'min': v.$ds-type-size-28, - 'max': v.$ds-type-size-38, - 'preferred': v.$ds-type-size-36 - ) - ) - ) -); diff --git a/src/config/auro-1/type/heading.scss b/src/config/auro-1/type/heading.scss deleted file mode 100644 index 66de96e6..00000000 --- a/src/config/auro-1/type/heading.scss +++ /dev/null @@ -1,57 +0,0 @@ -// Heading - Type -$auro-1-type-heading-config: ( - 'family': v.$ds-basic-type-family-heading, - 'familyFallback': v.$ds-basic-type-family-heading-fallback, - 'letter-spacing': v.$ds-basic-type-letter-spacing-heading, - 'line-height': v.$ds-basic-type-line-height-heading, - 'sizes': ( - 'xl': ( - 'font-size': ( - 'min': v.$ds-type-size-32, - 'max': v.$ds-type-size-40, - 'preferred': v.$ds-type-size-36 - ), - 'weight': v.$ds-basic-type-weight-heading - ), - 'lg': ( - 'font-size': ( - 'min': v.$ds-type-size-28, - 'max': v.$ds-type-size-36, - 'preferred': v.$ds-type-size-32 - ), - 'weight': v.$ds-basic-type-weight-heading - ), - 'md': ( - 'font-size': ( - 'min': v.$ds-type-size-26, - 'max': v.$ds-type-size-28, - 'preferred': v.$ds-type-size-28 - ), - 'weight': v.$ds-basic-type-weight-heading2 - ), - 'sm': ( - 'font-size': ( - 'min': v.$ds-type-size-22, - 'max': v.$ds-type-size-24, - 'preferred': v.$ds-type-size-24 - ), - 'weight': v.$ds-basic-type-weight-heading2 - ), - 'xs': ( - 'font-size': ( - 'min': v.$ds-type-size-20, - 'max': v.$ds-type-size-20, - 'preferred': v.$ds-type-size-20 - ), - 'weight': v.$ds-basic-type-weight-heading2 - ), - '2xs': ( - 'font-size': ( - 'min': v.$ds-type-size-18, - 'max': v.$ds-type-size-18, - 'preferred': v.$ds-type-size-18 - ), - 'weight': v.$ds-basic-type-weight-heading2 - ) - ) -); diff --git a/src/config/auro-1/type/index.scss b/src/config/auro-1/type/index.scss deleted file mode 100644 index 7f75ace8..00000000 --- a/src/config/auro-1/type/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "@aurodesignsystem/design-tokens/dist/themes/auro-1/SCSSVariables--auro1" as v; - -// Auro 1 Type Configs -@import "accent"; -@import "body"; -@import "display"; -@import "heading"; diff --git a/src/config/auro-2/base/index.scss b/src/config/auro-2/base/index.scss deleted file mode 100644 index 70d7f268..00000000 --- a/src/config/auro-2/base/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2"; - -// Auro-2 Base Configs - uses Alaska base essentials with Auro-2 design tokens -@import "../../alaska/base"; diff --git a/src/config/auro-2/type/accent.scss b/src/config/auro-2/type/accent.scss deleted file mode 100644 index 928eca17..00000000 --- a/src/config/auro-2/type/accent.scss +++ /dev/null @@ -1,77 +0,0 @@ -// Accent - Type -$auro-2-type-accent-config: ( - 'family': v.$ds-basic-type-family-accent, - 'familyFallback': v.$ds-basic-type-family-accent-fallback, - 'sizes': ( - '2xl': ( - 'font-size': ( - 'min': v.$ds-type-size-32, - 'max': v.$ds-type-size-38, - 'preferred': v.$ds-type-size-38 - ), - 'weight': v.$ds-basic-type-weight-accent, - 'letter-spacing': v.$ds-basic-type-letter-spacing-accent, - 'line-height': v.$ds-basic-type-line-height-accent2 - ), - 'xl': ( - 'font-size': ( - 'min': v.$ds-type-size-26, - 'max': v.$ds-type-size-32, - 'preferred': v.$ds-type-size-28 - ), - 'weight': v.$ds-basic-type-weight-accent, - 'letter-spacing': v.$ds-basic-type-letter-spacing-accent, - 'line-height': v.$ds-basic-type-line-height-accent - ), - 'lg': ( - 'font-size': ( - 'min': v.$ds-type-size-24, - 'max': v.$ds-type-size-28, - 'preferred': v.$ds-type-size-26 - ), - 'weight': v.$ds-basic-type-weight-accent, - 'letter-spacing': v.$ds-basic-type-letter-spacing-accent, - 'line-height': v.$ds-basic-type-line-height-accent - ), - 'md': ( - 'font-size': ( - 'min': v.$ds-type-size-22, - 'max': v.$ds-type-size-24, - 'preferred': v.$ds-type-size-22 - ), - 'weight': v.$ds-basic-type-weight-accent2, - 'letter-spacing': v.$ds-basic-type-letter-spacing-accent, - 'line-height': v.$ds-basic-type-line-height-accent - ), - 'sm': ( - 'font-size': ( - 'min': v.$ds-type-size-18, - 'max': v.$ds-type-size-20, - 'preferred': v.$ds-type-size-18 - ), - 'weight': v.$ds-basic-type-weight-accent2, - 'letter-spacing': v.$ds-basic-type-letter-spacing-accent, - 'line-height': v.$ds-basic-type-line-height-accent - ), - 'xs': ( - 'font-size': ( - 'min': v.$ds-type-size-16, - 'max': v.$ds-type-size-16, - 'preferred': v.$ds-type-size-16 - ), - 'weight': v.$ds-basic-type-weight-accent2, - 'letter-spacing': v.$ds-type-letter-spacing-010, - 'line-height': v.$ds-basic-type-line-height-accent - ), - '2xs': ( - 'font-size': ( - 'min': v.$ds-type-size-14, - 'max': v.$ds-type-size-14, - 'preferred': v.$ds-type-size-14 - ), - 'weight': v.$ds-basic-type-weight-accent, - 'letter-spacing': v.$ds-type-letter-spacing-010, - 'line-height': v.$ds-basic-type-line-height-accent - ) - ) -); diff --git a/src/config/auro-2/type/index.scss b/src/config/auro-2/type/index.scss deleted file mode 100644 index 32b6c8a5..00000000 --- a/src/config/auro-2/type/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "@aurodesignsystem/design-tokens/dist/themes/auro-2/SCSSVariables--auro2" as v; - -// Auro 2 Type Configs -@import "accent"; -@import "body"; -@import "display"; -@import "heading"; diff --git a/src/config/hawaiian/base/essentials.scss b/src/config/hawaiian/base/essentials.scss index 6d475037..72f53f5e 100644 --- a/src/config/hawaiian/base/essentials.scss +++ b/src/config/hawaiian/base/essentials.scss @@ -1,23 +1,26 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as tokens; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as classic; + // Base Essentials $hawaiian-base-config: ( - 'font-size': $ds-type-size-16, - 'text-color': $ds-basic-color-texticon-default, - 'font-family': $ds-basic-type-family-body, - 'font-family-fallback': $ds-basic-type-family-body-fallback, - 'font-weight': $ds-type-weight-regular, - 'line-height': $ds-type-line-height-px-24, - 'letter-spacing': $ds-type-letter-spacing-0, - 'hyperlink-color': $ds-advanced-color-hyperlink-text, - 'hyperlink-hover-color': $ds-advanced-color-hyperlink-text-hover, - 'hyperlink-inverse-color': $ds-advanced-color-hyperlink-text-inverse, - 'hyperlink-inverse-hover-color': $ds-advanced-color-hyperlink-text-inverse-hover, - 'focus-color': $ds-advanced-color-state-focused, - 'focus-offset': $ds-size-25, - 'focus-width': $ds-size-50, - 'small-font-size': $ds-type-size-12, - 'small-font-weight': $ds-type-weight-regular, - 'small-line-height': $ds-type-line-height-px-16, - 'small-letter-spacing': $ds-type-letter-spacing-0, - 'paragraph-line-height': $ds-type-line-height-px-16, - 'muted-text-color': $ds-basic-color-texticon-muted + 'font-size': tokens.$ds-type-size-16, + 'text-color': tokens.$ds-basic-color-texticon-default, + 'font-family': tokens.$ds-basic-type-family-body, + 'font-family-fallback': tokens.$ds-basic-type-family-body-fallback, + 'font-weight': tokens.$ds-type-weight-regular, + 'line-height': tokens.$ds-type-line-height-px-24, + 'letter-spacing': tokens.$ds-type-letter-spacing-0, + 'hyperlink-color': tokens.$ds-advanced-color-hyperlink-text, + 'hyperlink-hover-color': tokens.$ds-advanced-color-hyperlink-text-hover, + 'hyperlink-inverse-color': tokens.$ds-advanced-color-hyperlink-text-inverse, + 'hyperlink-inverse-hover-color': tokens.$ds-advanced-color-hyperlink-text-inverse-hover, + 'focus-color': tokens.$ds-advanced-color-state-focused, + 'focus-offset': classic.$ds-size-25, + 'focus-width': classic.$ds-size-50, + 'small-font-size': tokens.$ds-type-size-12, + 'small-font-weight': tokens.$ds-type-weight-regular, + 'small-line-height': tokens.$ds-type-line-height-px-16, + 'small-letter-spacing': tokens.$ds-type-letter-spacing-0, + 'paragraph-line-height': tokens.$ds-type-line-height-px-16, + 'muted-text-color': tokens.$ds-basic-color-texticon-muted ); diff --git a/src/config/hawaiian/base/index.scss b/src/config/hawaiian/base/index.scss index 16330210..2343128e 100644 --- a/src/config/hawaiian/base/index.scss +++ b/src/config/hawaiian/base/index.scss @@ -1,5 +1,2 @@ -@import "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian"; -@import "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; - // Hawaiian Base Configs -@import "essentials"; +@forward "essentials"; diff --git a/src/config/hawaiian/index.scss b/src/config/hawaiian/index.scss index 786a6a3b..d6cf059a 100644 --- a/src/config/hawaiian/index.scss +++ b/src/config/hawaiian/index.scss @@ -2,5 +2,5 @@ // See LICENSE in the project root for license information. // Hawaiian theme configs -@import "base"; -@import "type"; +@forward "base"; +@forward "type"; diff --git a/src/config/hawaiian/type/accent.scss b/src/config/hawaiian/type/accent.scss index 69f31be9..3060d5ed 100644 --- a/src/config/hawaiian/type/accent.scss +++ b/src/config/hawaiian/type/accent.scss @@ -1,7 +1,18 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; + // Accent - Type +// +// letter-spacing: normal — Hawaiian intentionally has NO accent tracking. The +// multi-theme global stylesheet (AB#1612078) emits a single, theme-agnostic set +// of `.accent-*` classes that always reference `var(--wcss-accent-*-letter-spacing)`, +// so a theme can no longer opt out by omitting the class declaration (the old +// `$accent-uses-letter-spacing: false` path). Resolving the custom property to an +// explicit `normal` neutralizes the shared declaration for Hawaiian; without this +// key the property emits empty and the class applies an invalid/inherited value. $hawaiian-type-accent-config: ( 'family': v.$ds-basic-type-family-accent, 'familyFallback': v.$ds-basic-type-family-accent-fallback, + 'letter-spacing': normal, 'sizes': ( '2xl': ( 'font-size': ( diff --git a/src/config/hawaiian/type/body.scss b/src/config/hawaiian/type/body.scss index 8a86cfa4..3ae680ed 100644 --- a/src/config/hawaiian/type/body.scss +++ b/src/config/hawaiian/type/body.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; + // Body - Type $hawaiian-type-body-config: ( 'family': v.$ds-basic-type-family-body, diff --git a/src/config/hawaiian/type/display.scss b/src/config/hawaiian/type/display.scss index 4f039f77..a6581201 100644 --- a/src/config/hawaiian/type/display.scss +++ b/src/config/hawaiian/type/display.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; + // Display - Type $hawaiian-type-display-config: ( 'family': v.$ds-basic-type-family-display, diff --git a/src/config/hawaiian/type/heading.scss b/src/config/hawaiian/type/heading.scss index 7a2fc1db..1c8a7ea9 100644 --- a/src/config/hawaiian/type/heading.scss +++ b/src/config/hawaiian/type/heading.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; + // Heading - Type $hawaiian-type-heading-config: ( 'family': v.$ds-basic-type-family-heading, diff --git a/src/config/hawaiian/type/index.scss b/src/config/hawaiian/type/index.scss index 8177aba9..3c30fb01 100644 --- a/src/config/hawaiian/type/index.scss +++ b/src/config/hawaiian/type/index.scss @@ -1,7 +1,5 @@ -@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as v; - // Hawaiian Type Configs -@import "accent"; -@import "body"; -@import "display"; -@import "heading"; +@forward "accent"; +@forward "body"; +@forward "display"; +@forward "heading"; diff --git a/src/elementDemoStyles/demoWrapper.scss b/src/elementDemoStyles/demoWrapper.scss index b499bc0c..c4a73f9f 100644 --- a/src/elementDemoStyles/demoWrapper.scss +++ b/src/elementDemoStyles/demoWrapper.scss @@ -6,10 +6,10 @@ // matches max-width of AS.com and Auro docsite width specs -@import './../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; +@use '../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; body { - padding: var(--ds-size-400, $ds-size-400); + padding: var(--ds-size-400, SCSSVariables.$ds-size-400); } main { diff --git a/src/elementDemoStyles/elementDemoStyles.scss b/src/elementDemoStyles/elementDemoStyles.scss index 0888efa8..299cd410 100644 --- a/src/elementDemoStyles/elementDemoStyles.scss +++ b/src/elementDemoStyles/elementDemoStyles.scss @@ -5,20 +5,21 @@ // All styles for the custom element are located in the ./src directory. // ----------------------- DO NOT EDIT ----------------------------- -@import './../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; -@import './../../node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska'; +@use '../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; +@use '../../node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska'; -@import './../breakpoints'; -@import './../grids'; +@use '../breakpoints'; +@use '../grids'; // Creates baseline output in CSS -@import './../fonts/legacy/auro-classic'; -@import './../normalize'; -@import './../headings'; -@import './../blockquote'; -@import './../componentSupport/table'; -@import './../focus-visible'; -@import './../essentials/legacy/auro-classic'; +@use '../fonts/legacy/auro-classic'; +@use '../normalize'; +@use '../headings'; +@use '../blockquote'; +@use '../componentSupport/table'; +@use '../focus-visible'; +// Alias avoids a namespace collision with fonts/legacy/auro-classic above. +@use '../essentials/legacy/auro-classic' as essentials-auro-classic; /* stylelint-disable selector-type-no-unknown */ @@ -70,10 +71,10 @@ } pre { - background: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100) !important; + background: var(--ds-color-brand-gray-100, SCSSVariables.$ds-color-brand-gray-100) !important; border: unset !important; padding: var(--ds-size-200) !important; - margin-bottom: var(--ds-size-300, $ds-size-300) !important; + margin-bottom: var(--ds-size-300, SCSSVariables.$ds-size-300) !important; border-style: solid !important; border-width: 1px !important; border-color: var(--ds-color-border-secondary-default) !important; @@ -94,7 +95,7 @@ pre { } code:not(.html):not(.css):not(.js):not([class*='language-']) { - color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500); + color: var(--ds-color-brand-flamingo-500, SCSSVariables.$ds-color-brand-flamingo-500); margin-bottom: 0 !important; } diff --git a/src/essentials/_base.scss b/src/essentials/_base.scss index cb763a8a..6292876b 100644 --- a/src/essentials/_base.scss +++ b/src/essentials/_base.scss @@ -12,8 +12,10 @@ // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes -@import "../libSupport/manageScope"; -@import "../core"; +@use "sass:map"; + +@use "../libSupport/manageScope"; +@use "../core"; // Define the $paragraph variable with default value $paragraph: null !default; @@ -23,45 +25,45 @@ $paragraph: null !default; @mixin essentials-base($theme-props) { /// Baseline HTML setting to establish box-model and default font size. - #{$sym}#{$prefix}html#{$scope} { + #{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope} { box-sizing: border-box; - font-size: map-get($theme-props, 'font-size'); + font-size: map.get($theme-props, 'font-size'); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /// Set baseline type settings for `body` element or with the use of the `.baseType` selector. - #{$scope}#{$sym}#{$prefix}body, - #{$scope}.#{$prefix}baseType { + #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body, + #{manageScope.$scope}.#{manageScope.$prefix}baseType { margin: 0; - color: map-get($theme-props, 'text-color'); - font-family: map-get($theme-props, 'font-family'), map-get($theme-props, 'font-family-fallback'); - font-size: map-get($theme-props, 'font-size'); - font-weight: map-get($theme-props, 'font-weight'); - line-height: map-get($theme-props, 'line-height'); + color: map.get($theme-props, 'text-color'); + font-family: map.get($theme-props, 'font-family'), map.get($theme-props, 'font-family-fallback'); + font-size: map.get($theme-props, 'font-size'); + font-weight: map.get($theme-props, 'font-weight'); + line-height: map.get($theme-props, 'line-height'); - @if map-has-key($theme-props, 'letter-spacing') { - letter-spacing: map-get($theme-props, 'letter-spacing'); + @if map.has-key($theme-props, 'letter-spacing') { + letter-spacing: map.get($theme-props, 'letter-spacing'); } font-variant-ligatures: no-common-ligatures; } /// Sets standard `margin` for all paragraph style content - #{$scope}.#{$prefix}baseParagraph { + #{manageScope.$scope}.#{manageScope.$prefix}baseParagraph { margin: 0 0 1rem; - line-height: map-get($theme-props, 'line-height'); + line-height: map.get($theme-props, 'line-height'); - .#{$prefix}hyperlink { + .#{manageScope.$prefix}hyperlink { text-decoration: underline; } } /// Baseline hyperlink styles as mirrored in auro-hyperlink web component - #{$scope}.#{$prefix}hyperlink { + #{manageScope.$scope}.#{manageScope.$prefix}hyperlink { transition: all .15s ease; text-decoration: underline; - color: map-get($theme-props, 'hyperlink-color'); + color: map.get($theme-props, 'hyperlink-color'); border-radius: 3px; outline-offset: unset; outline-style: solid; @@ -69,18 +71,18 @@ $paragraph: null !default; outline-color: transparent; &:visited { - color: map-get($theme-props, 'hyperlink-color'); + color: map.get($theme-props, 'hyperlink-color'); } &:focus-visible { - outline-color: map-get($theme-props, 'focus-color'); - outline-offset: map-get($theme-props, 'focus-offset'); + outline-color: map.get($theme-props, 'focus-color'); + outline-offset: map.get($theme-props, 'focus-offset'); } @media (hover: hover) { &:hover { text-decoration: none; - color: map-get($theme-props, 'hyperlink-hover-color'); + color: map.get($theme-props, 'hyperlink-hover-color'); } } @@ -95,61 +97,61 @@ $paragraph: null !default; } &:focus-visible { - outline-width: map-get($theme-props, 'focus-width'); + outline-width: map.get($theme-props, 'focus-width'); outline-offset: unset; } } &--ondark { - color: map-get($theme-props, 'hyperlink-inverse-color'); + color: map.get($theme-props, 'hyperlink-inverse-color'); @media (hover: hover) { &:hover { - color: map-get($theme-props, 'hyperlink-inverse-hover-color'); + color: map.get($theme-props, 'hyperlink-inverse-hover-color'); } } &:visited { - color: map-get($theme-props, 'hyperlink-inverse-color'); + color: map.get($theme-props, 'hyperlink-inverse-color'); } } } /// Default setting for all `` tags - #{$scope}#{$sym}#{$prefix}img { + #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img { max-width: 100%; } /// Legal copy, disclaimers, and footnotes - #{$scope}#{$sym}#{$prefix}small, - #{$scope}.#{$prefix}type--small { - font-size: map-get($theme-props, 'small-font-size'); - font-weight: map-get($theme-props, 'small-font-weight'); - line-height: map-get($theme-props, 'small-line-height'); + #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small, + #{manageScope.$scope}.#{manageScope.$prefix}type--small { + font-size: map.get($theme-props, 'small-font-size'); + font-weight: map.get($theme-props, 'small-font-weight'); + line-height: map.get($theme-props, 'small-line-height'); - @if map-has-key($theme-props, 'small-letter-spacing') { - letter-spacing: map-get($theme-props, 'small-letter-spacing'); + @if map.has-key($theme-props, 'small-letter-spacing') { + letter-spacing: map.get($theme-props, 'small-letter-spacing'); } } /// Paragraph element margin (conditional) - #{$scope}#{$sym}#{$prefix}p { + #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p { @if $paragraph { margin: 0 0 1rem; - line-height: map-get($theme-props, 'paragraph-line-height'); + line-height: map.get($theme-props, 'paragraph-line-height'); } } /// Fine print text - #{$scope}.#{$prefix}fineprint { - font-family: map-get($theme-props, 'font-family'), map-get($theme-props, 'font-family-fallback'); - font-size: map-get($theme-props, 'small-font-size'); - font-weight: map-get($theme-props, 'small-font-weight'); - line-height: map-get($theme-props, 'small-line-height'); - color: map-get($theme-props, 'muted-text-color'); + #{manageScope.$scope}.#{manageScope.$prefix}fineprint { + font-family: map.get($theme-props, 'font-family'), map.get($theme-props, 'font-family-fallback'); + font-size: map.get($theme-props, 'small-font-size'); + font-weight: map.get($theme-props, 'small-font-weight'); + line-height: map.get($theme-props, 'small-line-height'); + color: map.get($theme-props, 'muted-text-color'); - @if map-has-key($theme-props, 'small-letter-spacing') { - letter-spacing: map-get($theme-props, 'small-letter-spacing'); + @if map.has-key($theme-props, 'small-letter-spacing') { + letter-spacing: map.get($theme-props, 'small-letter-spacing'); } } } diff --git a/src/essentials/_index.scss b/src/essentials/_index.scss index c2037c63..3f7b0b78 100644 --- a/src/essentials/_index.scss +++ b/src/essentials/_index.scss @@ -5,6 +5,8 @@ // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes -// Import all essentials -@import 'base'; -@import './legacy/auro-classic'; +// Forward all essentials (re-exports members and emits the Auro Classic essentials CSS). +// `base` also declares `$paragraph`; hide it so the configurable `$paragraph` flag +// resolves to the Auro Classic essentials copy that actually guards the `p` selector. +@forward 'base' hide $paragraph; +@forward 'legacy/auro-classic'; diff --git a/src/essentials/legacy/_auro-classic.scss b/src/essentials/legacy/_auro-classic.scss index 6dc04728..f0640896 100644 --- a/src/essentials/legacy/_auro-classic.scss +++ b/src/essentials/legacy/_auro-classic.scss @@ -9,8 +9,9 @@ // sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes -@import '../../libSupport/manageScope'; -@import '../../core'; +@use '../../libSupport/manageScope'; +@use '../../core'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; /// Baseline HTML setting to establish box-model and default font size. /// @@ -26,12 +27,12 @@ /// .auro_html {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$sym}#{$prefix}html#{$scope} { +#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope} { box-sizing: border-box; - font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); + font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; @@ -54,19 +55,19 @@ /// .auro_baseType {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}#{$sym}#{$prefix}body, -#{$scope}.#{$prefix}baseType { +#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body, +#{manageScope.$scope}.#{manageScope.$prefix}baseType { margin: 0; - color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); + color: var(--ds-color-text-primary-default, SCSSVariables.$ds-color-text-primary-default); - font-family: var(--ds-font-family-default, $ds-font-family-default); + font-family: var(--ds-font-family-default, SCSSVariables.$ds-font-family-default); font-variant-ligatures: no-common-ligatures; - font-size: var(--ds-text-body-size-default, $ds-text-body-size-default); - font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight); - line-height: var(--ds-text-body-height-default, $ds-text-body-height-default); + font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default); + font-weight: var(--ds-text-body-default-weight, SCSSVariables.$ds-text-body-default-weight); + line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default); } /// Sets standard `margin` for all paragraph style content @@ -88,14 +89,14 @@ /// .auro_baseParagraph .auro_hyperlink {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}.#{$prefix}baseParagraph { +#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph { margin: 0 0 1rem; - line-height: var(--ds-text-body-height-default, $ds-text-body-height-default); + line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default); - .#{$prefix}hyperlink { + .#{manageScope.$prefix}hyperlink { text-decoration: underline; } } @@ -122,8 +123,8 @@ /// .auro_hyperlink--darktheme {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; -#{$scope}.#{$prefix}hyperlink { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; +#{manageScope.$scope}.#{manageScope.$prefix}hyperlink { transition: all .15s ease; text-decoration: underline; color: var(--ds-advanced-color-hyperlink-text); @@ -134,12 +135,12 @@ outline-color: transparent; &:visited { - color: var(--ds-advanced-color-hyperlink-text, $ds-color-text-ui-default-default); + color: var(--ds-advanced-color-hyperlink-text, SCSSVariables.$ds-color-text-ui-default-default); } &:focus-visible { - outline-color: var(--ds-advanced-color-state-focused, $ds-color-border-ui-focus-default); - outline-offset: var(--ds-size-25, $ds-size-25); + outline-color: var(--ds-advanced-color-state-focused, SCSSVariables.$ds-color-border-ui-focus-default); + outline-offset: var(--ds-size-25, SCSSVariables.$ds-size-25); } @media (hover: hover) { @@ -150,8 +151,8 @@ } &:focus-visible { - outline-color: var(--ds-color-border-ui-focus-default, $ds-color-border-ui-focus-default); - outline-offset: var(--ds-size-25, $ds-size-25); + outline-color: var(--ds-color-border-ui-focus-default, SCSSVariables.$ds-color-border-ui-focus-default); + outline-offset: var(--ds-size-25, SCSSVariables.$ds-size-25); } &--nav { @@ -165,7 +166,7 @@ } &:focus-visible { - outline-width: var(--ds-size-50, $ds-size-50); + outline-width: var(--ds-size-50, SCSSVariables.$ds-size-50); outline-offset: unset; } } @@ -200,9 +201,9 @@ /// .auro_img {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}#{$sym}#{$prefix}img { +#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}img { max-width: 100%; } @@ -223,12 +224,12 @@ /// .auro_type--small {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}#{$sym}#{$prefix}small, -#{$scope}.#{$prefix}type--small { - font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); - line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs); +#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small, +#{manageScope.$scope}.#{manageScope.$prefix}type--small { + font-size: var(--ds-text-body-size-xs, SCSSVariables.$ds-text-body-size-xs); + line-height: var(--ds-text-body-height-xs, SCSSVariables.$ds-text-body-height-xs); } $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-in-block */ @@ -248,18 +249,18 @@ $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first- /// .auro_p {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// /// @example scss - import file with `$paragraph` flag set to true /// $paragraph: true; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}#{$sym}#{$prefix}p { +#{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p { @if $paragraph { margin: 0 0 1rem; - line-height: var(--ds-text-body-height-default, $ds-text-body-height-default); + line-height: var(--ds-text-body-height-default, SCSSVariables.$ds-text-body-height-default); } } @@ -277,12 +278,12 @@ $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first- /// .auro_fineprint {} /// /// @example scss - import file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *; /// -#{$scope}.#{$prefix}fineprint { - font-family: var(--ds-font-family-default, $ds-font-family-default); - font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); - line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs); - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); +#{manageScope.$scope}.#{manageScope.$prefix}fineprint { + font-family: var(--ds-font-family-default, SCSSVariables.$ds-font-family-default); + font-size: var(--ds-text-body-size-xs, SCSSVariables.$ds-text-body-size-xs); + line-height: var(--ds-text-body-height-xs, SCSSVariables.$ds-text-body-height-xs); + color: var(--ds-color-text-secondary-default, SCSSVariables.$ds-color-text-secondary-default); } diff --git a/src/essentials/themes/_alaska-classic.scss b/src/essentials/themes/_alaska-classic.scss index 9ae8c6d2..9b616daa 100644 --- a/src/essentials/themes/_alaska-classic.scss +++ b/src/essentials/themes/_alaska-classic.scss @@ -1,2 +1,6 @@ // Alaska Classic uses the Alaska Essentials, as it is a derivative theme. -@import "alaska"; +@use "../base"; +@use "../../config/alaska-classic/base" as config; + +// Generate Alaska Classic theme bundled essentials +@include base.essentials-base(config.$alaska-base-config); diff --git a/src/essentials/themes/_alaska.scss b/src/essentials/themes/_alaska.scss index 27b6df87..47488f01 100644 --- a/src/essentials/themes/_alaska.scss +++ b/src/essentials/themes/_alaska.scss @@ -1,4 +1,5 @@ -@import "../base"; +@use "../base"; +@use "../../config/alaska/base" as config; // Generate Alaska theme bundled essentials -@include essentials-base($alaska-base-config); +@include base.essentials-base(config.$alaska-base-config); diff --git a/src/essentials/themes/_atmos.scss b/src/essentials/themes/_atmos.scss new file mode 100644 index 00000000..b1179325 --- /dev/null +++ b/src/essentials/themes/_atmos.scss @@ -0,0 +1,5 @@ +@use "../base"; +@use "../../config/atmos/base" as config; + +// Generate Atmos theme bundled essentials +@include base.essentials-base(config.$atmos-base-config); diff --git a/src/essentials/themes/_auro-1.scss b/src/essentials/themes/_auro-1.scss deleted file mode 100644 index b6fc75ee..00000000 --- a/src/essentials/themes/_auro-1.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Auro 1 uses the Alaska Essentials, as it is a derivative theme. -@import "alaska"; diff --git a/src/essentials/themes/_auro-2.scss b/src/essentials/themes/_auro-2.scss deleted file mode 100644 index 5220b764..00000000 --- a/src/essentials/themes/_auro-2.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Auro 2 uses the Alaska Essentials, as it is a derivative theme. -@import "alaska"; diff --git a/src/essentials/themes/_hawaiian.scss b/src/essentials/themes/_hawaiian.scss index 534efcb0..44d70912 100644 --- a/src/essentials/themes/_hawaiian.scss +++ b/src/essentials/themes/_hawaiian.scss @@ -1,4 +1,5 @@ -@import "../base"; +@use "../base"; +@use "../../config/hawaiian/base" as config; // Generate Hawaiian theme bundled essentials -@include essentials-base($hawaiian-base-config); +@include base.essentials-base(config.$hawaiian-base-config); diff --git a/src/fonts/legacy/_auro-classic.scss b/src/fonts/legacy/_auro-classic.scss index ce21652b..e2a5e1eb 100644 --- a/src/fonts/legacy/_auro-classic.scss +++ b/src/fonts/legacy/_auro-classic.scss @@ -1,3 +1,5 @@ +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables"; + // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -10,8 +12,8 @@ // Auro Classic (AC) theme fonts @font-face { - font-family: $ds-asset-font-circular-family-name; - font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight); + font-family: SCSSVariables.$ds-asset-font-circular-family-name; + font-weight: var(--ds-text-heading-display-weight, SCSSVariables.$ds-text-heading-display-weight); font-style: normal; font-display: fallback; @@ -20,8 +22,8 @@ } @font-face { - font-family: $ds-asset-font-circular-family-name; - font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight); + font-family: SCSSVariables.$ds-asset-font-circular-family-name; + font-weight: var(--ds-text-heading-medium-weight, SCSSVariables.$ds-text-heading-medium-weight); font-style: normal; font-display: fallback; @@ -30,8 +32,8 @@ } @font-face { - font-family: $ds-asset-font-circular-family-name; - font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight); + font-family: SCSSVariables.$ds-asset-font-circular-family-name; + font-weight: var(--ds-text-body-default-weight, SCSSVariables.$ds-text-body-default-weight); font-style: normal; font-display: fallback; diff --git a/src/fonts/themes/_alaska-classic.scss b/src/fonts/themes/_alaska-classic.scss index ca0cff11..33191df2 100644 --- a/src/fonts/themes/_alaska-classic.scss +++ b/src/fonts/themes/_alaska-classic.scss @@ -1,34 +1,35 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as tokens; // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import '../../utilityMixins/fontFace'; -@import '../../utilityMixins/fontFaceI18n'; -@import '../../utilityVariables/fontUtils'; +@use '../../utilityMixins/fontFace'; +@use '../../utilityMixins/fontFaceI18n'; +@use '../../utilityVariables/fontUtils'; // Alaska Classic (ASC) theme EN fonts -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-light, 'ASCircularWeb-Light', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-book, 'ASCircularWeb-Book', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-medium, 'ASCircularWeb-Medium', $unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, 'ASCircularWeb-Light', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, 'ASCircularWeb-Book', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, 'ASCircularWeb-Medium', fontUtils.$unicode-range-en); // --------------------------------------------------------------------- // i18n font remapping // Remaps existing English font-family + weight pairs to appropriate i18n weights. -@if $enable-i18n-fonts == true { +@if fontUtils.$enable-i18n-fonts == true { // Japanese (JP) // AS Circular 300 Light -> Noto Sans JP 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-jp-300-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-jp-300-path, fontUtils.$unicode-range-jp); // AS Circular 450 Book -> Noto Sans JP 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-jp-400-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-jp-400-path, fontUtils.$unicode-range-jp); // AS Circular 500 Medium -> Noto Sans JP 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-jp-500-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-jp-500-path, fontUtils.$unicode-range-jp); // Korean (KR) // AS Circular 300 Light -> Noto Sans KR 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-kr-300-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-kr-300-path, fontUtils.$unicode-range-kr); // AS Circular 450 Book -> Noto Sans KR 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-kr-400-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-kr-400-path, fontUtils.$unicode-range-kr); // AS Circular 500 Medium -> Noto Sans KR 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-kr-500-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-kr-500-path, fontUtils.$unicode-range-kr); } diff --git a/src/fonts/themes/_alaska.scss b/src/fonts/themes/_alaska.scss index 03062985..a6b4bfc5 100644 --- a/src/fonts/themes/_alaska.scss +++ b/src/fonts/themes/_alaska.scss @@ -1,43 +1,44 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as tokens; // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import '../../utilityMixins/fontFace'; -@import '../../utilityMixins/fontFaceI18n'; -@import '../../utilityVariables/fontUtils'; +@use '../../utilityMixins/fontFace'; +@use '../../utilityMixins/fontFaceI18n'; +@use '../../utilityVariables/fontUtils'; // Alaska (AS) theme EN fonts -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-light, 'ASCircularWeb-Light', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-book, 'ASCircularWeb-Book', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-news, 'GoodOT-CondNews', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-medium, 'GoodOT-CondMedium', $unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, 'ASCircularWeb-Light', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, 'ASCircularWeb-Book', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-news, 'GoodOT-CondNews', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-medium, 'GoodOT-CondMedium', fontUtils.$unicode-range-en); // --------------------------------------------------------------------- // i18n font remapping // Remaps existing English font-family + weight pairs to appropriate i18n weights. -@if $enable-i18n-fonts == true { +@if fontUtils.$enable-i18n-fonts == true { // Japanese (JP) // AS Circular 300 Light -> Noto Sans JP 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-jp-300-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-jp-300-path, fontUtils.$unicode-range-jp); // AS Circular 450 Book -> Noto Sans JP 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-jp-400-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-jp-400-path, fontUtils.$unicode-range-jp); // AS Circular 500 Medium -> Noto Sans JP 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-jp-500-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-jp-500-path, fontUtils.$unicode-range-jp); // Good OT 450 Cond News -> Noto Sans JP 400 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-news, $i18n-font-jp-400-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-news, fontUtils.$i18n-font-jp-400-path, fontUtils.$unicode-range-jp); // Good OT 500 Cond Medium -> Noto Sans JP 500 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-medium, $i18n-font-jp-500-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-medium, fontUtils.$i18n-font-jp-500-path, fontUtils.$unicode-range-jp); // Korean (KR) // AS Circular 300 Light -> Noto Sans KR 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-kr-300-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-kr-300-path, fontUtils.$unicode-range-kr); // AS Circular 450 Book -> Noto Sans KR 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-kr-400-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-kr-400-path, fontUtils.$unicode-range-kr); // AS Circular 500 Medium -> Noto Sans KR 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-kr-500-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-kr-500-path, fontUtils.$unicode-range-kr); // Good OT 450 Cond News -> Noto Sans KR 400 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-news, $i18n-font-kr-400-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-news, fontUtils.$i18n-font-kr-400-path, fontUtils.$unicode-range-kr); // Good OT 500 Cond Medium -> Noto Sans KR 500 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-cond-medium, $i18n-font-kr-500-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-cond-medium, fontUtils.$i18n-font-kr-500-path, fontUtils.$unicode-range-kr); } diff --git a/src/fonts/themes/_atmos.scss b/src/fonts/themes/_atmos.scss new file mode 100644 index 00000000..9830900a --- /dev/null +++ b/src/fonts/themes/_atmos.scss @@ -0,0 +1,40 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/atmos/SCSSVariables--atmos" as tokens; +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +@use '../../utilityMixins/fontFace'; +@use '../../utilityMixins/fontFaceI18n'; +@use '../../utilityVariables/fontUtils'; + +// Atmos (atm) theme EN fonts +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, 'ASCircularWeb-Light', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, 'ASCircularWeb-Book', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, 'ASCircularWeb-Medium', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-light, 'Teodor-Light', fontUtils.$unicode-range-en); + +// --------------------------------------------------------------------- +// i18n font remapping +// Remaps existing English font-family + weight pairs to appropriate i18n weights. +@if fontUtils.$enable-i18n-fonts == true { + // Japanese (JP) + // AS Circular 300 Light -> Noto Sans JP 300 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-jp-300-path, fontUtils.$unicode-range-jp); + // AS Circular 450 Book -> Noto Sans JP 400 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-jp-400-path, fontUtils.$unicode-range-jp); + // AS Circular 500 Medium -> Noto Sans JP 500 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-jp-500-path, fontUtils.$unicode-range-jp); + // Teodor 300 Light -> Noto Sans JP 300 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-jp-300-path, fontUtils.$unicode-range-jp); + + // Korean (KR) + // AS Circular 300 Light -> Noto Sans KR 300 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-kr-300-path, fontUtils.$unicode-range-kr); + // AS Circular 450 Book -> Noto Sans KR 400 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-book, fontUtils.$i18n-font-kr-400-path, fontUtils.$unicode-range-kr); + // AS Circular 500 Medium -> Noto Sans KR 500 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-kr-500-path, fontUtils.$unicode-range-kr); + // Teodor 300 Light -> Noto Sans KR 300 + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-light, fontUtils.$i18n-font-kr-300-path, fontUtils.$unicode-range-kr); +} diff --git a/src/fonts/themes/_auro-1.scss b/src/fonts/themes/_auro-1.scss deleted file mode 100644 index 46bb0212..00000000 --- a/src/fonts/themes/_auro-1.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -@import '../../utilityMixins/fontFace'; -@import '../../utilityMixins/fontFaceI18n'; -@import '../../utilityVariables/fontUtils'; - -// Auro-1 (a1) theme EN fonts -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-light, 'ASCircularWeb-Light', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-book, 'ASCircularWeb-Book', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-medium, 'ASCircularWeb-Medium', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-secondary, $ds-type-weight-light, 'Teodor-Light', $unicode-range-en); - -// --------------------------------------------------------------------- -// i18n font remapping -// Remaps existing English font-family + weight pairs to appropriate i18n weights. -@if $enable-i18n-fonts == true { - // Japanese (JP) - // AS Circular 300 Light -> Noto Sans JP 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-jp-300-path, $unicode-range-jp); - // AS Circular 450 Book -> Noto Sans JP 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-jp-400-path, $unicode-range-jp); - // AS Circular 500 Medium -> Noto Sans JP 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-jp-500-path, $unicode-range-jp); - // Teodor 300 Light -> Noto Sans JP 300 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-light, $i18n-font-jp-300-path, $unicode-range-jp); - - // Korean (KR) - // AS Circular 300 Light -> Noto Sans KR 300 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-light, $i18n-font-kr-300-path, $unicode-range-kr); - // AS Circular 450 Book -> Noto Sans KR 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-book, $i18n-font-kr-400-path, $unicode-range-kr); - // AS Circular 500 Medium -> Noto Sans KR 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-kr-500-path, $unicode-range-kr); - // Teodor 300 Light -> Noto Sans KR 300 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-light, $i18n-font-kr-300-path, $unicode-range-kr); -} diff --git a/src/fonts/themes/_auro-2.scss b/src/fonts/themes/_auro-2.scss deleted file mode 100644 index 12e90ab6..00000000 --- a/src/fonts/themes/_auro-2.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. - -// --------------------------------------------------------------------- - -@import '../../utilityMixins/fontFace'; -@import '../../utilityVariables/fontUtils'; - -// Auro-2 (a2) theme fonts - -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-light, 'ASCircularWeb-Light', $unicode-range-en); - -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-medium, 'ASCircularWeb-Medium', $unicode-range-en); - -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-book, 'ASCircularWeb-Book', $unicode-range-en); - -@include font-face($ds-basic-type-brand-family-secondary, $ds-type-weight-light, 'Teodor-Light', $unicode-range-en); diff --git a/src/fonts/themes/_hawaiian.scss b/src/fonts/themes/_hawaiian.scss index 2d6909b4..ad840105 100644 --- a/src/fonts/themes/_hawaiian.scss +++ b/src/fonts/themes/_hawaiian.scss @@ -1,34 +1,35 @@ +@use "@aurodesignsystem/design-tokens/dist/themes/hawaiian/SCSSVariables--hawaiian" as tokens; // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. // --------------------------------------------------------------------- -@import '../../utilityMixins/fontFace'; -@import '../../utilityMixins/fontFaceI18n'; -@import '../../utilityVariables/fontUtils'; +@use '../../utilityMixins/fontFace'; +@use '../../utilityMixins/fontFaceI18n'; +@use '../../utilityVariables/fontUtils'; // Hawaiian (HA) theme EN fonts -@include font-face($ds-basic-type-brand-family-secondary, $ds-type-weight-semibold, 'ChronicleDisplay-Semibold', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-regular, 'SlatePro-Regular', $unicode-range-en); -@include font-face($ds-basic-type-brand-family-primary, $ds-type-weight-medium, 'SlatePro-Medium', $unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-semibold, 'ChronicleDisplay-Semibold', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-regular, 'SlatePro-Regular', fontUtils.$unicode-range-en); +@include fontFace.font-face(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, 'SlatePro-Medium', fontUtils.$unicode-range-en); // --------------------------------------------------------------------- // i18n font remapping // Remaps existing English font-family + weight pairs to appropriate i18n weights. -@if $enable-i18n-fonts == true { +@if fontUtils.$enable-i18n-fonts == true { // Japanese (JP) // Chronicle Display 600 -> Noto Sans JP 600 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-semibold, $i18n-font-jp-600-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-semibold, fontUtils.$i18n-font-jp-600-path, fontUtils.$unicode-range-jp); // Slate Pro 400 -> Noto Sans JP 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-regular, $i18n-font-jp-400-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-regular, fontUtils.$i18n-font-jp-400-path, fontUtils.$unicode-range-jp); // Slate Pro 500 -> Noto Sans JP 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-jp-500-path, $unicode-range-jp); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-jp-500-path, fontUtils.$unicode-range-jp); // Korean (KR) // Chronicle Display 600 -> Noto Sans KR 600 - @include font-face-i18n($ds-basic-type-brand-family-secondary, $ds-type-weight-semibold, $i18n-font-kr-600-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-secondary, tokens.$ds-type-weight-semibold, fontUtils.$i18n-font-kr-600-path, fontUtils.$unicode-range-kr); // Slate Pro 400 -> Noto Sans KR 400 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-regular, $i18n-font-kr-400-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-regular, fontUtils.$i18n-font-kr-400-path, fontUtils.$unicode-range-kr); // Slate Pro 500 -> Noto Sans KR 500 - @include font-face-i18n($ds-basic-type-brand-family-primary, $ds-type-weight-medium, $i18n-font-kr-500-path, $unicode-range-kr); + @include fontFaceI18n.font-face-i18n(tokens.$ds-basic-type-brand-family-primary, tokens.$ds-type-weight-medium, fontUtils.$i18n-font-kr-500-path, fontUtils.$unicode-range-kr); } diff --git a/src/libSupport/_deprecated.scss b/src/libSupport/_deprecated.scss index 25b44f2a..107f13e5 100644 --- a/src/libSupport/_deprecated.scss +++ b/src/libSupport/_deprecated.scss @@ -7,10 +7,19 @@ // Internal support mixin, not designed for public use. +// Internal builds that intentionally compile deprecated modules (e.g. the +// `styleTest.scss` smoke test) configure this to `true` at first load to keep +// their output clean. Consumers leave it at the `false` default and continue to +// receive deprecation warnings. +// @use './libSupport/deprecated' with ($silence: true); +$silence: false !default; + // @example scss - Using mixin with default values; -// @import './libSupport/deprecated'; +// @use './libSupport/deprecated' as *; // @include deprecated('@mixin auro_transition. No replacement. Discontinue use.'); @mixin deprecated($string) { - @warn 'Deprecated: #{$string} Please see https://alaskaairlines.github.io/WebCoreStyleSheets/ for more information.'; + @if not $silence { + @warn 'Deprecated: #{$string} Please see https://alaskaairlines.github.io/WebCoreStyleSheets/ for more information.'; + } } diff --git a/src/libSupport/_manageScope.scss b/src/libSupport/_manageScope.scss index 6a7fe8b1..27f233b3 100644 --- a/src/libSupport/_manageScope.scss +++ b/src/libSupport/_manageScope.scss @@ -5,13 +5,12 @@ /// Variables to determine if `$scope` is to be displayed. /// -/// Set `true` value prior to importing file if scope selector output file is wanted +/// Configure `$scope: true` via `@use ... with (...)` when a scoped selector output is wanted. /// /// @group scope-prefix /// @type boolean -/// @example scss - import file -/// $scope: true; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ... +/// @example scss - configure and load +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($scope: true); /// @example scss - return example /// .auro [selector] { ... } @@ -19,13 +18,12 @@ $scope: null !default; /// Variables to determine if $prefix is to be displayed /// -/// Set `true` value prior to importing file if prefix selector output file is wanted +/// Configure `$prefix: true` via `@use ... with (...)` when a prefixed selector output is wanted. /// /// @group scope-prefix /// @type boolean -/// @example scss - import file -/// $prefix: true; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ... +/// @example scss - configure and load +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/libSupport/manageScope" with ($prefix: true); /// @example scss - return example /// .auro_[selector] { ... } diff --git a/src/type/functions/_type-property-check.scss b/src/type/functions/_type-property-check.scss index b49045dd..19c089f3 100644 --- a/src/type/functions/_type-property-check.scss +++ b/src/type/functions/_type-property-check.scss @@ -1,10 +1,14 @@ -// Check if type properties (font-family, font-weight, etc.) are shared across type sizes (2xl, xl, lg, etc.), +@use "../../utilityFunctions/map-deep-get"; + +@use "sass:map"; + +// Check if type properties (font-family, font-weight, etc.) are shared across type sizes (2xl, xl, lg, etc.), // if not it will use the size-specific value, otherwise falls back to global value in the theme config. @function type-property-check($theme-config, $size, $key) { - $size-value: auro_map-deep-get($theme-config, 'sizes', $size, $key); + $size-value: map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, $key); @if $size-value { @return $size-value; } @else { - @return map-get($theme-config, $key); + @return map.get($theme-config, $key); } } diff --git a/src/type/mixins/_fluid-type.scss b/src/type/mixins/_fluid-type.scss index ad5edb6f..e9e51c53 100644 --- a/src/type/mixins/_fluid-type.scss +++ b/src/type/mixins/_fluid-type.scss @@ -1,24 +1,24 @@ -@import "../functions/calculate-fluid-clamp"; -@import '../functions/type-property-check'; -@import '../../utilityFunctions/map-deep-get'; -@import '../../utilityVariables/cssNamespace'; +@use "../functions/calculate-fluid-clamp"; +@use '../functions/type-property-check'; +@use '../../utilityFunctions/map-deep-get'; +@use '../../utilityVariables/cssNamespace'; // Generate CSS custom properties for fluid type @mixin generate-fluid-type-css-vars($type, $sizes, $theme-config) { @each $size in $sizes { // Set base properties - --#{$css-ns}-#{$type}-#{$size}-family: #{type-property-check($theme-config, $size, 'family')}; - --#{$css-ns}-#{$type}-#{$size}-family-fallback: #{type-property-check($theme-config, $size, 'familyFallback')}; - --#{$css-ns}-#{$type}-#{$size}-letter-spacing: #{type-property-check($theme-config, $size, 'letter-spacing')}; - --#{$css-ns}-#{$type}-#{$size}-weight: #{type-property-check($theme-config, $size, 'weight')}; - --#{$css-ns}-#{$type}-#{$size}-line-height: #{type-property-check($theme-config, $size, 'line-height')}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-family: #{type-property-check.type-property-check($theme-config, $size, 'family')}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-family-fallback: #{type-property-check.type-property-check($theme-config, $size, 'familyFallback')}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-letter-spacing: #{type-property-check.type-property-check($theme-config, $size, 'letter-spacing')}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-weight: #{type-property-check.type-property-check($theme-config, $size, 'weight')}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-line-height: #{type-property-check.type-property-check($theme-config, $size, 'line-height')}; // Get min, preferred and max values from the config - $min-size: auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'min'); - $preferred-size: auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'preferred'); - $max-size: auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'max'); + $min-size: map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'min'); + $preferred-size: map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'preferred'); + $max-size: map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'font-size', 'max'); - --#{$css-ns}-#{$type}-#{$size}-font-size: #{calculate-fluid-clamp($min-size, $preferred-size, $max-size)}; + --#{cssNamespace.$css-ns}-#{$type}-#{$size}-font-size: #{calculate-fluid-clamp.calculate-fluid-clamp($min-size, $preferred-size, $max-size)}; } } @@ -28,26 +28,26 @@ .#{$type}-#{$size} { @if $use-fallback and $fallback-config != null { // Use CSS fallback - font-family: var(--#{$css-ns}-#{$type}-#{$size}-family, #{type-property-check($fallback-config, $size, 'family')}), var(--#{$css-ns}-#{$type}-#{$size}-family-fallback, #{type-property-check($fallback-config, $size, 'familyFallback')}); - font-weight: var(--#{$css-ns}-#{$type}-#{$size}-weight, #{type-property-check($fallback-config, $size, 'weight')}); - line-height: var(--#{$css-ns}-#{$type}-#{$size}-line-height, #{type-property-check($fallback-config, $size, 'line-height')}); - font-size: var(--#{$css-ns}-#{$type}-#{$size}-font-size, #{calculate-fluid-clamp( - auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'min'), - auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'preferred'), - auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'max') + font-family: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-family, #{type-property-check.type-property-check($fallback-config, $size, 'family')}), var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-family-fallback, #{type-property-check.type-property-check($fallback-config, $size, 'familyFallback')}); + font-weight: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-weight, #{type-property-check.type-property-check($fallback-config, $size, 'weight')}); + line-height: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-line-height, #{type-property-check.type-property-check($fallback-config, $size, 'line-height')}); + font-size: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-font-size, #{calculate-fluid-clamp.calculate-fluid-clamp( + map-deep-get.auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'min'), + map-deep-get.auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'preferred'), + map-deep-get.auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size', 'max') )}); @if $use-letter-spacing { - letter-spacing: var(--#{$css-ns}-#{$type}-#{$size}-letter-spacing, #{type-property-check($fallback-config, $size, 'letter-spacing')}); + letter-spacing: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-letter-spacing, #{type-property-check.type-property-check($fallback-config, $size, 'letter-spacing')}); } } @else { - font-family: var(--#{$css-ns}-#{$type}-#{$size}-family), var(--#{$css-ns}-#{$type}-#{$size}-family-fallback); - font-weight: var(--#{$css-ns}-#{$type}-#{$size}-weight); - line-height: var(--#{$css-ns}-#{$type}-#{$size}-line-height); - font-size: var(--#{$css-ns}-#{$type}-#{$size}-font-size); + font-family: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-family), var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-family-fallback); + font-weight: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-weight); + line-height: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-line-height); + font-size: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-font-size); @if $use-letter-spacing { - letter-spacing: var(--#{$css-ns}-#{$type}-#{$size}-letter-spacing); + letter-spacing: var(--#{cssNamespace.$css-ns}-#{$type}-#{$size}-letter-spacing); } } @content; diff --git a/src/type/mixins/_theme-codes.scss b/src/type/mixins/_theme-codes.scss new file mode 100644 index 00000000..3c539060 --- /dev/null +++ b/src/type/mixins/_theme-codes.scss @@ -0,0 +1,17 @@ +/* + * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license + * See LICENSE in the project root for license information. + */ +/* --------------------------------------------------------------------- */ +// AUTO-GENERATED by scripts/theme-codes.build.mjs — do not edit by hand. +// Source: @aurodesignsystem/design-tokens THEME_DEFINITIONS. +// Regenerate with: npm run build:theme-codes + +// Map of theme directory name → short theme code (used to build the +// [data-aag-theme="aag-theme--type"] scoping selectors). +$wcss-theme-codes: ( + 'alaska': 'as', + 'alaska-classic': 'asc', + 'atmos': 'atm', + 'hawaiian': 'ha' +); diff --git a/src/type/mixins/_theme-generator.scss b/src/type/mixins/_theme-generator.scss index a37f1422..07287c7a 100644 --- a/src/type/mixins/_theme-generator.scss +++ b/src/type/mixins/_theme-generator.scss @@ -1,8 +1,8 @@ -@import "../partials/body"; -@import "../partials/display"; -@import "../partials/heading"; -@import "../partials/accent"; -@import "../mixins/type-generator"; +@use "../partials/body"; +@use "../partials/display"; +@use "../partials/heading"; +@use "../partials/accent"; +@use "../mixins/type-generator"; // Theme generator @mixin generate-theme( @@ -22,8 +22,8 @@ ); // Generate CSS variables for the theme - @include generate-theme-type-css-vars($theme-configs); + @include type-generator.generate-theme-type-css-vars($theme-configs, $theme-name); // Generate theme type classes - @include generate-theme-type-classes($accent-use-letter-spacing: $accent-uses-letter-spacing); + @include type-generator.generate-theme-type-classes($accent-use-letter-spacing: $accent-uses-letter-spacing); } diff --git a/src/type/mixins/_type-classes-alaska-generator.scss b/src/type/mixins/_type-classes-alaska-generator.scss index 0d6da616..47fc5e21 100644 --- a/src/type/mixins/_type-classes-alaska-generator.scss +++ b/src/type/mixins/_type-classes-alaska-generator.scss @@ -5,16 +5,19 @@ */ // Import needed mixins and partials -@import "../partials/body"; -@import "../partials/display"; -@import "../partials/heading"; -@import "../partials/accent"; +@use "../partials/body" as partials-body; +@use "../partials/display" as partials-display; +@use "../partials/heading" as partials-heading; +@use "../partials/accent" as partials-accent; // Import Alaska theme configs -@import "../../../src/config/alaska/type/index.scss"; +@use "../../config/alaska/type/accent"; +@use "../../config/alaska/type/body"; +@use "../../config/alaska/type/display"; +@use "../../config/alaska/type/heading"; // Generate typography classes with Alaska fallbacks -@include generate-body-classes(true, $alaska-type-body-config); -@include generate-display-classes(true, $alaska-type-display-config); -@include generate-heading-classes(true, $alaska-type-heading-config); -@include generate-accent-classes(true, $alaska-type-accent-config); +@include partials-body.generate-body-classes(true, body.$alaska-type-body-config); +@include partials-display.generate-display-classes(true, display.$alaska-type-display-config); +@include partials-heading.generate-heading-classes(true, heading.$alaska-type-heading-config); +@include partials-accent.generate-accent-classes(true, accent.$alaska-type-accent-config); diff --git a/src/type/mixins/_type-classes-generator.scss b/src/type/mixins/_type-classes-generator.scss index 1beb7d72..b2b04810 100644 --- a/src/type/mixins/_type-classes-generator.scss +++ b/src/type/mixins/_type-classes-generator.scss @@ -5,7 +5,7 @@ */ // Import type generator -@import "type-generator"; +@use "type-generator"; // Generate typography classes -@include generate-theme-type-classes(); +@include type-generator.generate-theme-type-classes(); diff --git a/src/type/mixins/_type-generator.scss b/src/type/mixins/_type-generator.scss index 3eee9af0..705b2ed5 100644 --- a/src/type/mixins/_type-generator.scss +++ b/src/type/mixins/_type-generator.scss @@ -1,22 +1,99 @@ -@import "../partials/body"; -@import "../partials/display"; -@import "../partials/heading"; -@import "../partials/accent"; - -// Generate all type CSS variables for a theme -@mixin generate-theme-type-css-vars($theme-configs) { - :root { - @include generate-body-css-vars(map-get($theme-configs, 'body')); - @include generate-display-css-vars(map-get($theme-configs, 'display')); - @include generate-heading-css-vars(map-get($theme-configs, 'heading')); - @include generate-accent-css-vars(map-get($theme-configs, 'accent')); +@use "sass:map"; + +@use "../partials/body"; +@use "../partials/display"; +@use "../partials/heading"; +@use "../partials/accent"; +// `theme-codes` is generated by scripts/theme-codes.build.mjs and committed to +// the repo (regenerate with `npm run build:theme-codes`; do not hand-edit). +@use "theme-codes"; + +// Build the data-attribute scoping selector for a theme's type custom properties. +// Emits both the base `[data-aag-theme="aag-theme-"]` selector and the +// `-type` suffixed variant (mirroring the AuroDesignTokens attribute convention), +// so the base attribute activates typography just like the type-specific one. +// When `$include-root` is true the theme is also emitted under `:root`, marking it +// as the stylesheet's default theme (additive and non-breaking). Falls back to +// `:root` only if the theme has no known code. +@function wcss-type-scope-selector($theme-name, $include-root: false) { + $code: map.get(theme-codes.$wcss-theme-codes, $theme-name); + + @if $code == null { + @warn "No theme code found for '#{$theme-name}'; emitting :root only for type custom properties."; + @return ":root"; + } + + $attributes: "[data-aag-theme=\"aag-theme-#{$code}\"], [data-aag-theme=\"aag-theme-#{$code}-type\"]"; + + @if $include-root { + @return ":root, #{$attributes}"; + } + + @return $attributes; +} + +// Emit a single theme's type custom properties under the provided selector list. +@mixin generate-type-css-vars($theme-configs, $selectors) { + #{$selectors} { + @include body.generate-body-css-vars(map.get($theme-configs, 'body')); + @include display.generate-display-css-vars(map.get($theme-configs, 'display')); + @include heading.generate-heading-css-vars(map.get($theme-configs, 'heading')); + @include accent.generate-accent-css-vars(map.get($theme-configs, 'accent')); + } +} + +// Generate a single theme's type CSS variables scoped to `:root` and its own +// data-attribute selectors. Used by the per-theme global theme bundle. +@mixin generate-theme-type-css-vars($theme-configs, $theme-name) { + @include generate-type-css-vars($theme-configs, wcss-type-scope-selector($theme-name, true)); +} + +// Generate every theme's type CSS variables into a single stylesheet so consumers +// can switch themes at runtime via the data-aag-theme attribute. `$default-theme` +// (the file's namesake) is emitted first under `:root` plus its attribute +// selectors; every other theme follows under its attribute selectors only. +// `$themes` is a map of theme name → its type config map +// (keys: body, display, heading, accent). +@mixin generate-multi-theme-type-css-vars($themes, $default-theme) { + @include generate-type-css-vars( + map.get($themes, $default-theme), + wcss-type-scope-selector($default-theme, true) + ); + + @each $theme-name, $theme-configs in $themes { + @if $theme-name != $default-theme { + // A non-default theme MUST resolve to an attribute selector. If it has no + // known code, wcss-type-scope-selector() falls back to `:root`, which would + // silently override the default theme's typography — hard-fail instead so + // manifest/theme-code drift is caught at build time. + @if map.get(theme-codes.$wcss-theme-codes, $theme-name) == null { + @error "Non-default theme '#{$theme-name}' has no theme code in $wcss-theme-codes; it would fall back to :root and override the default theme '#{$default-theme}'. Add its code (scripts/theme-codes.build.mjs) or remove it from the multi-theme manifest."; + } + + @include generate-type-css-vars($theme-configs, wcss-type-scope-selector($theme-name, false)); + } } } // Generate theme type classes @mixin generate-theme-type-classes($use-fallback: false, $fallback-configs: null, $accent-use-letter-spacing: true) { - @include generate-body-classes($use-fallback, if($fallback-configs != null, map-get($fallback-configs, 'body'), null)); - @include generate-display-classes($use-fallback, if($fallback-configs != null, map-get($fallback-configs, 'display'), null)); - @include generate-heading-classes($use-fallback, if($fallback-configs != null, map-get($fallback-configs, 'heading'), null)); - @include generate-accent-classes($use-fallback, if($fallback-configs != null, map-get($fallback-configs, 'accent'), null), $accent-use-letter-spacing); + // Resolve per-partial fallback configs. Assign via @if/@else rather than the + // classic `if()` ternary: the peerDep floor (sass ^1.42.1) predates first-class + // `if()`, while classic `if()` is on the Sass deprecation-removal path. + $body-fallback: null; + $display-fallback: null; + $heading-fallback: null; + $accent-fallback: null; + + @if $fallback-configs != null { + $body-fallback: map.get($fallback-configs, 'body'); + $display-fallback: map.get($fallback-configs, 'display'); + $heading-fallback: map.get($fallback-configs, 'heading'); + $accent-fallback: map.get($fallback-configs, 'accent'); + } + + @include body.generate-body-classes($use-fallback, $body-fallback); + @include display.generate-display-classes($use-fallback, $display-fallback); + @include heading.generate-heading-classes($use-fallback, $heading-fallback); + @include accent.generate-accent-classes($use-fallback, $accent-fallback, $accent-use-letter-spacing); } diff --git a/src/type/partials/_accent.scss b/src/type/partials/_accent.scss index 6ddd52bc..b61a2fa1 100644 --- a/src/type/partials/_accent.scss +++ b/src/type/partials/_accent.scss @@ -1,15 +1,15 @@ -@import "../mixins/fluid-type"; +@use "../mixins/fluid-type"; $accent-sizes: ('2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs'); // Generate CSS custom properties for Accent @mixin generate-accent-css-vars($theme-config) { - @include generate-fluid-type-css-vars('accent', $accent-sizes, $theme-config); + @include fluid-type.generate-fluid-type-css-vars('accent', $accent-sizes, $theme-config); } // Generate Accent classes @mixin generate-accent-classes($use-fallback: false, $fallback-config: null, $use-letter-spacing: true) { - @include generate-fluid-type-classes('accent', $accent-sizes, $use-fallback, $fallback-config, $use-letter-spacing) { + @include fluid-type.generate-fluid-type-classes('accent', $accent-sizes, $use-fallback, $fallback-config, $use-letter-spacing) { text-transform: uppercase; } } diff --git a/src/type/partials/_body.scss b/src/type/partials/_body.scss index ea6e0c98..319baea7 100644 --- a/src/type/partials/_body.scss +++ b/src/type/partials/_body.scss @@ -1,31 +1,34 @@ // Body type styling with CSS custom properties -@import '../../utilityFunctions/map-deep-get'; -@import '../../utilityVariables/cssNamespace'; +@use "sass:list"; +@use "sass:map"; + +@use '../../utilityFunctions/map-deep-get'; +@use '../../utilityVariables/cssNamespace'; $body-base-sizes: ('default', 'lg', 'sm', 'xs', '2xs'); $body-sizes: (); @each $size in $body-base-sizes { - $body-sizes: append($body-sizes, $size); - $body-sizes: append($body-sizes, '#{$size}-emphasized'); + $body-sizes: list.append($body-sizes, $size); + $body-sizes: list.append($body-sizes, '#{$size}-emphasized'); } // Generate CSS custom properties for Body @mixin generate-body-css-vars($theme-config) { - --#{$css-ns}-body-family: #{map-get($theme-config, 'family')}; - --#{$css-ns}-body-family-fallback: #{map-get($theme-config, 'familyFallback')}; - --#{$css-ns}-body-letter-spacing: #{map-get($theme-config, 'letter-spacing')}; + --#{cssNamespace.$css-ns}-body-family: #{map.get($theme-config, 'family')}; + --#{cssNamespace.$css-ns}-body-family-fallback: #{map.get($theme-config, 'familyFallback')}; + --#{cssNamespace.$css-ns}-body-letter-spacing: #{map.get($theme-config, 'letter-spacing')}; @each $size in $body-sizes { - --#{$css-ns}-body-#{$size}-weight: #{auro_map-deep-get($theme-config, 'sizes', $size, 'weight')}; - --#{$css-ns}-body-#{$size}-font-size: #{auro_map-deep-get($theme-config, 'sizes', $size, 'font-size')}; - --#{$css-ns}-body-#{$size}-line-height: #{auro_map-deep-get($theme-config, 'sizes', $size, 'line-height')}; + --#{cssNamespace.$css-ns}-body-#{$size}-weight: #{map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'weight')}; + --#{cssNamespace.$css-ns}-body-#{$size}-font-size: #{map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'font-size')}; + --#{cssNamespace.$css-ns}-body-#{$size}-line-height: #{map-deep-get.auro_map-deep-get($theme-config, 'sizes', $size, 'line-height')}; } // Backward-compatibility alias for pre-v11 consumers (e.g. bundled Auro component CSS). // Remove in next major once consumers migrate to --wcss-body-default-weight. - --#{$css-ns}-body-weight: var(--#{$css-ns}-body-default-weight); + --#{cssNamespace.$css-ns}-body-weight: var(--#{cssNamespace.$css-ns}-body-default-weight); } // Generate Body classes @@ -34,17 +37,17 @@ $body-sizes: (); .body-#{$size} { @if $use-fallback and $fallback-config != null { // Use CSS fallback - font-family: var(--#{$css-ns}-body-family, auro_map-deep-get($fallback-config, 'family')), auro_map-deep-get($fallback-config, 'familyFallback'); - font-weight: var(--#{$css-ns}-body-#{$size}-weight, auro_map-deep-get($fallback-config, 'weight')); - letter-spacing: var(--#{$css-ns}-body-letter-spacing, auro_map-deep-get($fallback-config, 'letter-spacing')); - font-size: var(--#{$css-ns}-body-#{$size}-font-size, auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size')); - line-height: var(--#{$css-ns}-body-#{$size}-line-height, auro_map-deep-get($fallback-config, 'sizes', $size, 'line-height')); + font-family: var(--#{cssNamespace.$css-ns}-body-family, map-deep-get.auro_map-deep-get($fallback-config, 'family')), map-deep-get.auro_map-deep-get($fallback-config, 'familyFallback'); + font-weight: var(--#{cssNamespace.$css-ns}-body-#{$size}-weight, map-deep-get.auro_map-deep-get($fallback-config, 'weight')); + letter-spacing: var(--#{cssNamespace.$css-ns}-body-letter-spacing, map-deep-get.auro_map-deep-get($fallback-config, 'letter-spacing')); + font-size: var(--#{cssNamespace.$css-ns}-body-#{$size}-font-size, map-deep-get.auro_map-deep-get($fallback-config, 'sizes', $size, 'font-size')); + line-height: var(--#{cssNamespace.$css-ns}-body-#{$size}-line-height, map-deep-get.auro_map-deep-get($fallback-config, 'sizes', $size, 'line-height')); } @else { - font-family: var(--#{$css-ns}-body-family), var(--#{$css-ns}-body-family-fallback); - font-weight: var(--#{$css-ns}-body-#{$size}-weight); - letter-spacing: var(--#{$css-ns}-body-letter-spacing); - font-size: var(--#{$css-ns}-body-#{$size}-font-size); - line-height: var(--#{$css-ns}-body-#{$size}-line-height); + font-family: var(--#{cssNamespace.$css-ns}-body-family), var(--#{cssNamespace.$css-ns}-body-family-fallback); + font-weight: var(--#{cssNamespace.$css-ns}-body-#{$size}-weight); + letter-spacing: var(--#{cssNamespace.$css-ns}-body-letter-spacing); + font-size: var(--#{cssNamespace.$css-ns}-body-#{$size}-font-size); + line-height: var(--#{cssNamespace.$css-ns}-body-#{$size}-line-height); } } } diff --git a/src/type/partials/_display.scss b/src/type/partials/_display.scss index 400a48ed..4d3b9fe8 100644 --- a/src/type/partials/_display.scss +++ b/src/type/partials/_display.scss @@ -1,13 +1,13 @@ -@import "../mixins/fluid-type"; +@use "../mixins/fluid-type"; $display-sizes: ('2xl', 'xl', 'lg', 'md', 'sm', 'xs'); // Generate CSS custom properties for Display @mixin generate-display-css-vars($theme-config) { - @include generate-fluid-type-css-vars('display', $display-sizes, $theme-config); + @include fluid-type.generate-fluid-type-css-vars('display', $display-sizes, $theme-config); } // Generate Display classes @mixin generate-display-classes($use-fallback: false, $fallback-config: null) { - @include generate-fluid-type-classes('display', $display-sizes, $use-fallback, $fallback-config); + @include fluid-type.generate-fluid-type-classes('display', $display-sizes, $use-fallback, $fallback-config); } diff --git a/src/type/partials/_heading.scss b/src/type/partials/_heading.scss index 07d18aad..82ef0b81 100644 --- a/src/type/partials/_heading.scss +++ b/src/type/partials/_heading.scss @@ -1,13 +1,13 @@ -@import "../mixins/fluid-type"; +@use "../mixins/fluid-type"; $heading-sizes: ('xl', 'lg', 'md', 'sm', 'xs', '2xs'); // Generate CSS custom properties for Heading @mixin generate-heading-css-vars($theme-config) { - @include generate-fluid-type-css-vars('heading', $heading-sizes, $theme-config); + @include fluid-type.generate-fluid-type-css-vars('heading', $heading-sizes, $theme-config); } // Generate Heading classes @mixin generate-heading-classes($use-fallback: false, $fallback-config: null) { - @include generate-fluid-type-classes('heading', $heading-sizes, $use-fallback, $fallback-config); + @include fluid-type.generate-fluid-type-classes('heading', $heading-sizes, $use-fallback, $fallback-config); } diff --git a/src/type/themes/alaska-classic/index.scss b/src/type/themes/alaska-classic/index.scss index cfbedb46..88bf84dc 100644 --- a/src/type/themes/alaska-classic/index.scss +++ b/src/type/themes/alaska-classic/index.scss @@ -1,10 +1,14 @@ -@import "../../mixins/theme-generator"; +@use "../../mixins/theme-generator"; +@use "../../../config/alaska-classic/type/body" as body; +@use "../../../config/alaska-classic/type/display" as display; +@use "../../../config/alaska-classic/type/heading" as heading; +@use "../../../config/alaska-classic/type/accent" as accent; // Generate Alaska Classic theme -@include generate-theme( +@include theme-generator.generate-theme( 'alaska-classic', - $alaska-classic-type-body-config, - $alaska-classic-type-display-config, - $alaska-classic-type-heading-config, - $alaska-classic-type-accent-config + body.$alaska-classic-type-body-config, + display.$alaska-classic-type-display-config, + heading.$alaska-classic-type-heading-config, + accent.$alaska-classic-type-accent-config ); diff --git a/src/type/themes/alaska/index.scss b/src/type/themes/alaska/index.scss index 0fb39c62..1c239ec5 100644 --- a/src/type/themes/alaska/index.scss +++ b/src/type/themes/alaska/index.scss @@ -1,10 +1,14 @@ -@import "../../mixins/theme-generator"; +@use "../../mixins/theme-generator"; +@use "../../../config/alaska/type/body" as body; +@use "../../../config/alaska/type/display" as display; +@use "../../../config/alaska/type/heading" as heading; +@use "../../../config/alaska/type/accent" as accent; // Generate Alaska theme -@include generate-theme( +@include theme-generator.generate-theme( 'alaska', - $alaska-type-body-config, - $alaska-type-display-config, - $alaska-type-heading-config, - $alaska-type-accent-config + body.$alaska-type-body-config, + display.$alaska-type-display-config, + heading.$alaska-type-heading-config, + accent.$alaska-type-accent-config ); diff --git a/src/type/themes/auro-1/index.scss b/src/type/themes/auro-1/index.scss index 4a8bd974..55ca2067 100644 --- a/src/type/themes/auro-1/index.scss +++ b/src/type/themes/auro-1/index.scss @@ -1,10 +1,14 @@ -@import "../../mixins/theme-generator"; +@use "../../mixins/theme-generator"; +@use "../../../config/atmos/type/body" as body; +@use "../../../config/atmos/type/display" as display; +@use "../../../config/atmos/type/heading" as heading; +@use "../../../config/atmos/type/accent" as accent; -// Generate Auro-1 theme -@include generate-theme( - 'auro-1', - $auro-1-type-body-config, - $auro-1-type-display-config, - $auro-1-type-heading-config, - $auro-1-type-accent-config +// Generate Atmos theme +@include theme-generator.generate-theme( + 'atmos', + body.$atmos-type-body-config, + display.$atmos-type-display-config, + heading.$atmos-type-heading-config, + accent.$atmos-type-accent-config ); diff --git a/src/type/themes/auro-2/index.scss b/src/type/themes/auro-2/index.scss deleted file mode 100644 index 44616b74..00000000 --- a/src/type/themes/auro-2/index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "../../mixins/theme-generator"; - -// Generate Auro-2 theme -@include generate-theme( - 'auro-2', - $auro-2-type-body-config, - $auro-2-type-display-config, - $auro-2-type-heading-config, - $auro-2-type-accent-config -); diff --git a/src/type/themes/hawaiian/index.scss b/src/type/themes/hawaiian/index.scss index b063b6cf..c364e75f 100644 --- a/src/type/themes/hawaiian/index.scss +++ b/src/type/themes/hawaiian/index.scss @@ -1,11 +1,21 @@ -@import "../../mixins/theme-generator"; +@use "../../mixins/theme-generator"; +@use "../../../config/hawaiian/type/body" as body; +@use "../../../config/hawaiian/type/display" as display; +@use "../../../config/hawaiian/type/heading" as heading; +@use "../../../config/hawaiian/type/accent" as accent; // Generate Hawaiian theme -@include generate-theme( +@include theme-generator.generate-theme( 'hawaiian', - $hawaiian-type-body-config, - $hawaiian-type-display-config, - $hawaiian-type-heading-config, - $hawaiian-type-accent-config, + body.$hawaiian-type-body-config, + display.$hawaiian-type-display-config, + heading.$hawaiian-type-heading-config, + accent.$hawaiian-type-accent-config, + // Keep false. This single-theme bundle preserves the pre-v12 behavior of omitting + // the letter-spacing declaration from the generated `.accent-*` classes (Hawaiian + // has no accent tracking). Do NOT remove as "redundant" just because the accent + // config now supplies 'letter-spacing': normal — that key only neutralizes the + // SHARED declaration in the multi-theme bundle, which always emits letter-spacing. + // See src/config/hawaiian/type/accent.scss for the full rationale. $accent-uses-letter-spacing: false ); diff --git a/src/utilityClasses/_displayProperties.scss b/src/utilityClasses/_displayProperties.scss index 93210e3c..81e4237c 100644 --- a/src/utilityClasses/_displayProperties.scss +++ b/src/utilityClasses/_displayProperties.scss @@ -3,8 +3,8 @@ // --------------------------------------------------------------------- -@import '../libSupport/manageScope'; -@import '../utilityVariables/important'; +@use '../libSupport/manageScope'; +@use '../utilityVariables/important'; /// Utility class to display elements `inline` /// @@ -22,9 +22,9 @@ /// .auro_util_displayInline {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayInline { - display: inline $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayInline { + display: inline important.$important; } /// Utility class to display elements `inline-block` @@ -43,9 +43,9 @@ /// .auro_util_displayInline {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayInlineBlock { - display: inline-block $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayInlineBlock { + display: inline-block important.$important; } /// Utility class to display elements `block` @@ -64,9 +64,9 @@ /// .auro_util_displayBlock {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayBlock { - display: block $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayBlock { + display: block important.$important; } /// Utility class to display elements `flex` @@ -85,9 +85,9 @@ /// .auro_util_displayFlex {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayFlex { - display: flex $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayFlex { + display: flex important.$important; } /// Utility class to display elements `none` @@ -106,9 +106,9 @@ /// .auro_util_displayHidden {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayHidden { - display: none $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayHidden { + display: none important.$important; } /// Utility class to visually hide elements within the UI, but still be picked up by screen readers. @@ -127,16 +127,16 @@ /// .auro_util_displayHiddenVisually {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties"; -#{$scope}.#{$prefix}util_displayHiddenVisually { - position: absolute $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_displayHiddenVisually { + position: absolute important.$important; - overflow: hidden $important; - clip: rect(1px, 1px, 1px, 1px) $important; + overflow: hidden important.$important; + clip: rect(1px, 1px, 1px, 1px) important.$important; - width: 1px $important; - height: 1px $important; - padding: 0 $important; + width: 1px important.$important; + height: 1px important.$important; + padding: 0 important.$important; - border: 0 $important; + border: 0 important.$important; } diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss index c0de6ce0..97f8d028 100644 --- a/src/utilityClasses/_fontStyles.scss +++ b/src/utilityClasses/_fontStyles.scss @@ -4,9 +4,10 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -@import '../libSupport/deprecated'; -@import '../utilityVariables/important'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../utilityVariables/important'; +@use '../libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as *; /// Utility class for default font-weight /// @@ -24,11 +25,9 @@ /// .auro_util_fontWeightDefault {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; -#{$scope}.#{$prefix}util_fontWeightDefault { - @if variable-exists(ds-text-body-default-weight) { - font-weight: var(--$ds-text-body-default-weight) $important; - } +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDefault { + font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight) important.$important; } /// Utility class for font-weight `medium` @@ -47,11 +46,9 @@ /// .auro_util_fontWeightMedium {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; -#{$scope}.#{$prefix}util_fontWeightMedium { - @if variable-exists(ds-text-body-default-weight) { - font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight) $important; - } +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightMedium { + font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight) important.$important; } /// Utility class for display font-weight @@ -70,11 +67,9 @@ /// .auro_util_fontWeightDisplay {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; -#{$scope}.#{$prefix}util_fontWeightDisplay { - @if variable-exists(ds-text-heading-display-weight) { - font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight) $important; - } +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_fontWeightDisplay { + font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight) important.$important; } /// Utility class for font-size `lg` @@ -93,12 +88,10 @@ /// .auro_util_body--lg {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; -#{$scope}.#{$prefix}util_body--lg { - @if variable-exists(ds-text-body-size-lg) { - font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg) $important; - line-height: var(--ds-text-body-height-lg, $ds-text-body-height-lg) $important; - } +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_body--lg { + font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg) important.$important; + line-height: var(--ds-text-body-height-lg, $ds-text-body-height-lg) important.$important; } /// Utility class for font-size `sm` @@ -117,12 +110,10 @@ /// .auro_util_body--sm {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; -#{$scope}.#{$prefix}util_body--sm { - @if variable-exists(ds-text-body-size-lg) { - font-size: var(--ds-text-body-size-sm, $ds-text-body-size-sm) $important; - line-height: var(--ds-text-body-height-sm, $ds-text-body-height-sm) $important; - } +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_body--sm { + font-size: var(--ds-text-body-size-sm, $ds-text-body-size-sm) important.$important; + line-height: var(--ds-text-body-height-sm, $ds-text-body-height-sm) important.$important; } /// Utility class for font-size `xs` @@ -141,11 +132,9 @@ /// .auro_util_body--xs {} /// /// @example scss - import Sass file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles" as *; -#{$scope}.#{$prefix}util_body--xs { - @if variable-exists(ds-text-body-size-xs) { - font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs) $important; - line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs) $important; - } +#{manageScope.$scope}.#{manageScope.$prefix}util_body--xs { + font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs) important.$important; + line-height: var(--ds-text-body-height-xs, $ds-text-body-height-xs) important.$important; } diff --git a/src/utilityClasses/_inset.scss b/src/utilityClasses/_inset.scss index e1993940..aff64fe0 100644 --- a/src/utilityClasses/_inset.scss +++ b/src/utilityClasses/_inset.scss @@ -3,14 +3,14 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; // sass-lint:disable mixins-before-declarations variable-for-property -@import '../utilityVariables/important'; +@use '../utilityVariables/important'; -@include deprecated('Inset utility selectors and mixin.'); +@include deprecated.deprecated('Inset utility selectors and mixin.'); /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-inset @@ -24,8 +24,8 @@ /// .auro_util_insetNone {} /// -#{$scope}.#{$prefix}util_insetNone { - padding: 0 $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_insetNone { + padding: 0 important.$important; } /// [Manage](/#utility-variable-important) `!important` flag. @@ -45,7 +45,7 @@ /// .auro_util_insetXxxs {} /// -#{$scope}.#{$prefix}util_insetXxxs { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs { padding: 0.125rem; } @@ -66,7 +66,7 @@ /// .auro_util_insetXxxs--stretch {} /// -#{$scope}.#{$prefix}util_insetXxxs--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--stretch { padding: calc(0.125rem * 2) 0.125rem; } @@ -87,102 +87,102 @@ /// .auro_util_insetXxxs--squish {} /// -#{$scope}.#{$prefix}util_insetXxxs--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxs--squish { padding: 0 0.125rem; } -#{$scope}.#{$prefix}util_insetXxs { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxs { padding: 0.25rem; } -#{$scope}.#{$prefix}util_insetXxs--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxs--stretch { padding: calc(0.25rem * 1.5) 0.25rem; } -#{$scope}.#{$prefix}util_insetXxs--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxs--squish { padding: calc(0.25rem / 2) 0.25rem; } -#{$scope}.#{$prefix}util_insetXs { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXs { padding: 0.5rem; } -#{$scope}.#{$prefix}util_insetXs--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXs--stretch { padding: calc(0.5rem * 1.5) 0.5rem; } -#{$scope}.#{$prefix}util_insetXs--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXs--squish { padding: calc(0.5rem / 2) 0.5rem; } -#{$scope}.#{$prefix}util_insetSm { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetSm { padding: 0.75rem; } -#{$scope}.#{$prefix}util_insetSm--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetSm--stretch { padding: calc(0.75rem * 1.5) 0.75rem; } -#{$scope}.#{$prefix}util_insetSm--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetSm--squish { padding: calc(0.75rem / 2) 0.75rem; } -#{$scope}.#{$prefix}util_insetMd { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetMd { padding: 1rem; } -#{$scope}.#{$prefix}util_insetMd--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetMd--stretch { padding: calc(1rem * 1.5) 1rem; } -#{$scope}.#{$prefix}util_insetMd--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetMd--squish { padding: calc(1rem / 2) 1rem; } -#{$scope}.#{$prefix}util_insetLg { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetLg { padding: 1.5rem; } -#{$scope}.#{$prefix}util_insetLg--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetLg--stretch { padding: calc(1.5rem * 1.5) 1.5rem; } -#{$scope}.#{$prefix}util_insetLg--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetLg--squish { padding: calc(1.5rem / 2) 1.5rem; } -#{$scope}.#{$prefix}util_insetXl { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXl { padding: 2rem; } -#{$scope}.#{$prefix}util_insetXl--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXl--stretch { padding: calc(2rem * 1.5) 2rem; } -#{$scope}.#{$prefix}util_insetXl--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXl--squish { padding: calc(2rem / 2) 2rem; } -#{$scope}.#{$prefix}util_insetXxl { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxl { padding: 3rem; } -#{$scope}.#{$prefix}util_insetXxl--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxl--stretch { padding: calc(3rem * 1.5) 3rem; } -#{$scope}.#{$prefix}util_insetXxl--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxl--squish { padding: calc(3rem / 2) 3rem; } -#{$scope}.#{$prefix}util_insetXxxl { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxl { padding: 4rem; } -#{$scope}.#{$prefix}util_insetXxxl--stretch { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxl--stretch { padding: calc(4rem * 1.5) 4rem; } -#{$scope}.#{$prefix}util_insetXxxl--squish { +#{manageScope.$scope}.#{manageScope.$prefix}util_insetXxxl--squish { padding: calc(4rem / 2) 4rem; } diff --git a/src/utilityClasses/_layoutProperties.scss b/src/utilityClasses/_layoutProperties.scss index b988a986..731895a4 100644 --- a/src/utilityClasses/_layoutProperties.scss +++ b/src/utilityClasses/_layoutProperties.scss @@ -4,9 +4,9 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -@import '../libSupport/deprecated'; -@import '../utilityVariables/important'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../utilityVariables/important'; +@use '../libSupport/manageScope'; // floats // --------------------------------------------------------------------- @@ -27,9 +27,9 @@ /// .auro_util_floatLeft {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties"; -#{$scope}.#{$prefix}util_floatLeft { - float: left $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_floatLeft { + float: left important.$important; } /// Utility class to set elements to float `right` @@ -48,9 +48,9 @@ /// .auro_util_floatRight {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties"; -#{$scope}.#{$prefix}util_floatRight { - float: right $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_floatRight { + float: right important.$important; } /// Utility class to center content within a block element @@ -69,7 +69,7 @@ /// .auro_util_margin--auto {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties"; -#{$scope}.#{$prefix}util_margin--auto { - margin: 0 auto $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_margin--auto { + margin: 0 auto important.$important; } diff --git a/src/utilityClasses/_listProperties.scss b/src/utilityClasses/_listProperties.scss index 4a63deb4..c2888fb6 100644 --- a/src/utilityClasses/_listProperties.scss +++ b/src/utilityClasses/_listProperties.scss @@ -3,8 +3,9 @@ // --------------------------------------------------------------------- -@import '../libSupport/manageScope'; -@import '../utilityVariables/important'; +@use '../libSupport/manageScope'; +@use '../utilityVariables/important'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; /// Utility class to display unordered lists without bulleting @@ -23,8 +24,8 @@ /// .auro_util_listUnstyled {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listUnstyled { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listUnstyled { padding-left: 0; list-style: none; } @@ -46,14 +47,14 @@ /// .auro_util_listNoIndent {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listNoIndent { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndent { padding-left: 0; // CHANGE: to 0 list-style: none; li::before { content: url("data:image/svg+xml;utf8,"); display: inline-block; - width: var(--ds-size-300, $ds-size-300); + width: var(--ds-size-300, tokens.$ds-size-300); } } @@ -74,15 +75,15 @@ /// .auro_util_listIndented {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listIndented { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listIndented { padding-left: 0; list-style: none; - margin-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50)); + margin-left: calc(var(--ds-size-300, tokens.$ds-size-300) + var(--ds-size-50, tokens.$ds-size-50)); li::before { content: url("data:image/svg+xml;utf8,"); display: inline-block; - width: var(--ds-size-300, $ds-size-300); + width: var(--ds-size-300, tokens.$ds-size-300); } } @@ -103,15 +104,15 @@ /// .auro_util_listNoIndentOrdered {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listNoIndentOrdered { +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listNoIndentOrdered { padding-left: 0; list-style: none; counter-reset: li-counter; li::before { counter-increment: li-counter; content: counter(li-counter) "."; - width: var(--ds-size-300, $ds-size-300); + width: var(--ds-size-300, tokens.$ds-size-300); display: inline-block; } } @@ -133,15 +134,15 @@ /// .auro_util_listIndentedOrdered {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listIndentedOrdered { - padding-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50)); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listIndentedOrdered { + padding-left: calc(var(--ds-size-300, tokens.$ds-size-300) + var(--ds-size-50, tokens.$ds-size-50)); list-style: none; counter-reset: li-counter; li::before { counter-increment: li-counter; content: counter(li-counter) "."; - width: var(--ds-size-300, $ds-size-300); + width: var(--ds-size-300, tokens.$ds-size-300); display: inline-block; } } @@ -163,14 +164,14 @@ /// .auro_util_listAuroIcon {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties"; -#{$scope}.#{$prefix}util_listAuroIcon { - padding-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50)); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_listAuroIcon { + padding-left: calc(var(--ds-size-300, tokens.$ds-size-300) + var(--ds-size-50, tokens.$ds-size-50)); list-style: none; li { - text-indent: calc(var(--ds-size-200, $ds-size-200) * -1); + text-indent: calc(var(--ds-size-200, tokens.$ds-size-200) * -1); } ds-icon { - width: var(--ds-size-200, $ds-size-200); + width: var(--ds-size-200, tokens.$ds-size-200); } } diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss index a8afb078..7d921b3d 100644 --- a/src/utilityClasses/_responsive.scss +++ b/src/utilityClasses/_responsive.scss @@ -3,12 +3,14 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; -@import '../libSupport/manageScope'; +@use '../libSupport/deprecated'; +@use '../libSupport/manageScope'; // sass-lint:disable mixins-before-declarations variable-for-property -@import '../utilityVariables/important'; +@use '../utilityVariables/important'; +@use "../breakpoints" as breakpoints; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as *; /// Utility class to restrain visibility of UI element to __sm__ users only. /// @@ -17,8 +19,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-smOnly {} @@ -30,11 +32,9 @@ /// .auro_util_is-smOnly {} /// -#{$scope}.#{$prefix}util_is-smOnly { - @if variable-exists(ds-grid-breakpoint-sm) { - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { - display: none $important; - } +#{manageScope.$scope}.#{manageScope.$prefix}util_is-smOnly { + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) { + display: none important.$important; } } @@ -45,8 +45,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-mdOnly {} @@ -58,16 +58,14 @@ /// .auro_util_is-mdOnly {} /// -#{$scope}.#{$prefix}util_is-mdOnly { - @if variable-exists(ds-grid-breakpoint-sm) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly { + display: none important.$important; - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { - display: block $important; - } - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - display: none $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) { + display: block important.$important; + } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-md) { + display: none important.$important; } } @@ -78,8 +76,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-mdOnly--inline {} @@ -90,16 +88,14 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-mdOnly--inline {} /// -#{$scope}.#{$prefix}util_is-mdOnly--inline { - @if variable-exists(ds-grid-breakpoint-sm) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly--inline { + display: none important.$important; - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { - display: inline-block $important; - } - @include auro_breakpoint($min: $ds-grid-breakpoint-md) { - display: none $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) { + display: inline-block important.$important; + } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-md) { + display: none important.$important; } } @@ -110,8 +106,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-mdAppears {} @@ -123,13 +119,11 @@ /// .auro_util_is-mdAppears {} /// -#{$scope}.#{$prefix}util_is-mdAppears { - @if variable-exists(ds-grid-breakpoint-sm) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears { + display: none important.$important; - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { - display: block $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) { + display: block important.$important; } } @@ -140,8 +134,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-mdAppears--inline {} @@ -153,13 +147,11 @@ /// .auro_util_is-mdAppears--inline {} /// -#{$scope}.#{$prefix}util_is-mdAppears--inline { - @if variable-exists(ds-grid-breakpoint-sm) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears--inline { + display: none important.$important; - @include auro_breakpoint($min: $ds-grid-breakpoint-sm) { - display: inline-block $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) { + display: inline-block important.$important; } } @@ -170,8 +162,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-lgOnly {} @@ -182,13 +174,11 @@ /// @example scss - Selector(s) when $prefix: true; /// .auro_util_is-lgOnly {} /// -#{$scope}.#{$prefix}util_is-lgOnly { - @if variable-exists(ds-breakpoint-lg) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly { + display: none important.$important; - @include auro_breakpoint($min: $ds-breakpoint-lg) { - display: block $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-lg) { + display: block important.$important; } } @@ -199,8 +189,8 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import mixin file and selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_is-lgOnly--inline {} @@ -212,13 +202,11 @@ /// .auro_util_is-lgOnly--inline {} /// -#{$scope}.#{$prefix}util_is-lgOnly--inline { - @if variable-exists(ds-breakpoint-lg) { - display: none $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly--inline { + display: none important.$important; - @include auro_breakpoint($min: $ds-breakpoint-lg) { - display: inline-block $important; - } + @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-lg) { + display: inline-block important.$important; } } @@ -230,7 +218,7 @@ /// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options. /// @group Utility-responsive /// @example scss - import selector partial file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *; /// /// @example scss - Default selector(s) /// .util_img-is-responsive {} @@ -244,6 +232,6 @@ /// @example html - Example HTML selector use /// /// -#{$scope}.#{$prefix}util_img-is-responsive { - width: 100% $important; +#{manageScope.$scope}.#{manageScope.$prefix}util_img-is-responsive { + width: 100% important.$important; } diff --git a/src/utilityClasses/_typeProperties.scss b/src/utilityClasses/_typeProperties.scss index 7d660f25..9bcc0be5 100644 --- a/src/utilityClasses/_typeProperties.scss +++ b/src/utilityClasses/_typeProperties.scss @@ -3,8 +3,8 @@ // --------------------------------------------------------------------- -@import '../libSupport/manageScope'; -@import '../utilityVariables/important'; +@use '../libSupport/manageScope'; +@use '../utilityVariables/important'; /// Utility class force no wrap on content /// @@ -22,9 +22,9 @@ /// .auro_util_nowrap {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties"; -#{$scope}.#{$prefix}util_nowrap { - white-space: nowrap $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_nowrap { + white-space: nowrap important.$important; } /// Utility class to capitalize a string @@ -43,7 +43,7 @@ /// .auro_util_capitalize {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties"; -#{$scope}.#{$prefix}util_capitalize { - text-transform: capitalize $important; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties" as *; +#{manageScope.$scope}.#{manageScope.$prefix}util_capitalize { + text-transform: capitalize important.$important; } diff --git a/src/utilityFunctions/_capitalize.scss b/src/utilityFunctions/_capitalize.scss index bd00c24f..c132efd1 100644 --- a/src/utilityFunctions/_capitalize.scss +++ b/src/utilityFunctions/_capitalize.scss @@ -4,17 +4,20 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens +@use "sass:meta"; +@use "sass:string"; + /// The purpose of this function is to take a string and capitalize the first letter on output /// @group utility /// @parameter {String} $string [null] - pass in string to be capitolized /// @example scss - pass string into function /// capitalize('foo') => Foo /// @example scss - import dependency -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize" as *; @function auro_capitalize($string) { - @if type-of($string) == string { - @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2); + @if meta.type-of($string) == string { + @return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2); } @return #{$string}; } diff --git a/src/utilityFunctions/_contains.scss b/src/utilityFunctions/_contains.scss index c95b212b..930f7f0f 100644 --- a/src/utilityFunctions/_contains.scss +++ b/src/utilityFunctions/_contains.scss @@ -11,7 +11,7 @@ /// @example scss - pass string into function /// ods-contains($options, $value) /// @example scss - import dependency -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains" as *; @function auro_contains($list, $var) { $eval: false; diff --git a/src/utilityFunctions/_map-deep-get.scss b/src/utilityFunctions/_map-deep-get.scss index 4364e83a..7f7f7121 100644 --- a/src/utilityFunctions/_map-deep-get.scss +++ b/src/utilityFunctions/_map-deep-get.scss @@ -4,6 +4,8 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens +@use "sass:map"; + /// This function is to be used to return nested key values within a nested map /// @group utility /// @parameter {Variable} $map [null] - pass in map to be evaluated @@ -18,11 +20,11 @@ /// ); /// $var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth /// @example scss - import dependency -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get" as *; @function auro_map-deep-get($map, $keys...) { @each $key in $keys { - $map: map-get($map, $key); + $map: map.get($map, $key); } @return $map; diff --git a/src/utilityMixins/_anchor-roleButton.scss b/src/utilityMixins/_anchor-roleButton.scss index ad5a680d..43aee10e 100644 --- a/src/utilityMixins/_anchor-roleButton.scss +++ b/src/utilityMixins/_anchor-roleButton.scss @@ -3,7 +3,8 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; +@use '../libSupport/deprecated'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; /// Creates Sass variable or custom property output for multi-use button shape /// @group utility-mixins @@ -11,7 +12,7 @@ /// @param {string} $env [] - Specifies the style environment (component, noncomponent) /// @param {string} $display [inline-block] - Specifies display type /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton" as *; /// @example scss - Set properties for Sass output that is NOT within a component /// .auro_roleButton { /// @include auro_anchorButton(sass, noncomponent); @@ -28,15 +29,15 @@ $hover-color: null; @if $style == css { - $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); - $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default); - $line-height: var(--ds-unitless-scale-300, $ds-unitless-scale-300); - $padding: 0 var(--ds-size-200, $ds-size-200); + $color: var(--ds-color-text-ui-default-default, tokens.$ds-color-text-ui-default-default); + $hover-color: var(--ds-color-container-ui-primary-hover-default, tokens.$ds-color-container-ui-primary-hover-default); + $line-height: var(--ds-unitless-scale-300, tokens.$ds-unitless-scale-300); + $padding: 0 var(--ds-size-200, tokens.$ds-size-200); } @else if $style == sass or $style == scss { - $color: $ds-color-text-ui-default-default; - $hover-color: $ds-color-container-ui-primary-hover-default; - $line-height: $ds-unitless-scale-300; - $padding: 0 $ds-size-200; + $color: tokens.$ds-color-text-ui-default-default; + $hover-color: tokens.$ds-color-container-ui-primary-hover-default; + $line-height: tokens.$ds-unitless-scale-300; + $padding: 0 tokens.$ds-size-200; } @else { @error 'Invalid $style option. Please use `css` or `sass`'; } diff --git a/src/utilityMixins/_anchor-roleTab.scss b/src/utilityMixins/_anchor-roleTab.scss index 2eaab6a4..76136833 100644 --- a/src/utilityMixins/_anchor-roleTab.scss +++ b/src/utilityMixins/_anchor-roleTab.scss @@ -3,14 +3,15 @@ // --------------------------------------------------------------------- -@import '../libSupport/deprecated'; +@use '../libSupport/deprecated'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; /// Creates Sass variable or custom property output for multi-use tab shape /// @group utility-mixins /// @param {string} $style [] - Specifies the style type (sass, css) /// @param {string} $env [] - Specifies the style environment (component, noncomponent) /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab" as *; /// @example scss - Set properties for Sass output that is NOT within a component /// .auro_roleTab { /// @include auro_anchorTab(sass, noncomponent); @@ -27,22 +28,22 @@ $isactive-color: null; @if $style == css { - $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default); - $border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default); - $padding: var(--ds-size-200, $ds-size-200, $ds-size-200, $ds-size-200); - $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default); - $isactive-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); + $color: var(--ds-color-text-ui-default-default, tokens.$ds-color-text-ui-default-default); + $border-color: var(--ds-color-border-primary-default, tokens.$ds-color-border-primary-default); + $padding: var(--ds-size-200, tokens.$ds-size-200, tokens.$ds-size-200, tokens.$ds-size-200); + $hover-color: var(--ds-color-container-ui-primary-hover-default, tokens.$ds-color-container-ui-primary-hover-default); + $isactive-color: var(--ds-color-text-primary-default, tokens.$ds-color-text-primary-default); } @else if $style == sass or $style == scss { - $color: $ds-color-text-ui-default-default; - $border-color: $ds-color-border-primary-default; - $padding: $ds-size-200; - $hover-color: $ds-color-container-ui-primary-hover-default; - $isactive-color: $ds-color-text-primary-default; + $color: tokens.$ds-color-text-ui-default-default; + $border-color: tokens.$ds-color-border-primary-default; + $padding: tokens.$ds-size-200; + $hover-color: tokens.$ds-color-container-ui-primary-hover-default; + $isactive-color: tokens.$ds-color-text-primary-default; } @else { @error 'Invalid $style option. Please use `css` or `sass`'; } - padding: $ds-size-200; + padding: tokens.$ds-size-200; color: $color; border-width: 0 0 1px; diff --git a/src/utilityMixins/_fontFace.scss b/src/utilityMixins/_fontFace.scss index a84eeb47..277ac88b 100644 --- a/src/utilityMixins/_fontFace.scss +++ b/src/utilityMixins/_fontFace.scss @@ -5,7 +5,7 @@ // sass-lint:disable no-duplicate-properties -@import '../utilityVariables/fontUtils'; +@use '../utilityVariables/fontUtils'; // @font-face is not supported in SassDocs @@ -16,7 +16,7 @@ font-weight: $weight; font-style: normal; font-display: fallback; - src: url("#{$i18n-font-base-path-en}/#{$filename}.woff2") format("woff2"); + src: url("#{fontUtils.$i18n-font-base-path-en}/#{$filename}.woff2") format("woff2"); @if $unicode-range != null { unicode-range: $unicode-range; } diff --git a/src/utilityMixins/_insetUtility.scss b/src/utilityMixins/_insetUtility.scss index 9d45e49b..e80413f7 100644 --- a/src/utilityMixins/_insetUtility.scss +++ b/src/utilityMixins/_insetUtility.scss @@ -6,4 +6,4 @@ // In its place is a static generated series of utility selectors that will be removed // with the next major release of Auro's web core style sheets. -@import '../utilityClasses/inset'; +@use '../utilityClasses/inset'; diff --git a/src/utilityMixins/_layoutPropertiesGenerator.scss b/src/utilityMixins/_layoutPropertiesGenerator.scss index 07cf583c..429af2dc 100644 --- a/src/utilityMixins/_layoutPropertiesGenerator.scss +++ b/src/utilityMixins/_layoutPropertiesGenerator.scss @@ -4,8 +4,11 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -@import '../utilityVariables/important'; -@import '../libSupport/manageScope'; +@use "sass:string"; + +@use '../utilityVariables/important'; +@use '../libSupport/manageScope'; +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; // Utility layout selector mixin @@ -15,10 +18,10 @@ $layout-properties: margin padding !default; $layout-extensions: Top Left Bottom Right !default; $layout-modifiers: ( 'none': 0, - '100': $ds-size-100, - '200': $ds-size-200, - '300': $ds-size-300, - '400': $ds-size-400, + '100': tokens.$ds-size-100, + '200': tokens.$ds-size-200, + '300': tokens.$ds-size-300, + '400': tokens.$ds-size-400, ) !default; /// Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below. @@ -34,10 +37,10 @@ $layout-modifiers: ( /// $layout-extensions: Top Left Bottom Right !default; /// $layout-modifiers: ( /// "none": 0, -/// "100": $ds-size-100, -/// "200": $ds-size-200, -/// "300": $ds-size-300, -/// "400": $ds-size-400 +/// "100": tokens.$ds-size-100, +/// "200": tokens.$ds-size-200, +/// "300": tokens.$ds-size-300, +/// "400": tokens.$ds-size-400 /// ) !default; /// @example scss - example default output selector /// .util_paddingLeft--none {} @@ -49,23 +52,28 @@ $layout-modifiers: ( /// .auro_util_paddingLeft--none {} /// /// @example scss - import mixin file -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator"; -/// @example scss - import mixin file with altered output values prior to import -/// $layout-properties: margin; -/// $layout-extensions: Right; -/// $layout-modifiers: ( -/// "25": $ds-size-25, -/// "50": $ds-size-50, -/// "600": $ds-size-600, -/// "800": $ds-size-800, +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator" as *; +/// @example scss - import mixin file with altered output values +/// // Load any modules referenced by your overrides (e.g. design tokens) first, +/// // then pass the overrides through `@use ... with (...)`. Under the Sass module +/// // system, redefining `$layout-*` before the `@use` no longer configures it. +/// @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as tokens; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator" with ( +/// $layout-properties: margin, +/// $layout-extensions: Right, +/// $layout-modifiers: ( +/// "25": tokens.$ds-size-25, +/// "50": tokens.$ds-size-50, +/// "600": tokens.$ds-size-600, +/// "800": tokens.$ds-size-800 +/// ) /// ); -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator"; @mixin auro_layoutPropertiesGenerator() { @each $property in $layout-properties { @each $extension in $layout-extensions { @each $type, $value in $layout-modifiers { - #{$scope}.#{$prefix}util_#{$property}#{$extension}--#{$type} { - #{$property}-#{to-lower-case($extension)}: $value $important; + #{manageScope.$scope}.#{manageScope.$prefix}util_#{$property}#{$extension}--#{$type} { + #{$property}-#{string.to-lower-case($extension)}: $value important.$important; } } } diff --git a/src/utilityMixins/_spacingUtility.scss b/src/utilityMixins/_spacingUtility.scss index 1dcf5d1f..f9829b06 100644 --- a/src/utilityMixins/_spacingUtility.scss +++ b/src/utilityMixins/_spacingUtility.scss @@ -4,14 +4,21 @@ // --------------------------------------------------------------------- // Variables are defined by baseline Design Tokens -@import '../utilityVariables/spacing-options'; -@import '../utilityFunctions/capitalize'; -@import '../utilityFunctions/map-deep-get'; -@import '../utilityVariables/important'; -@import '../libSupport/manageScope'; +@use "sass:list"; +@use "sass:map"; +@use '../utilityVariables/spacing-options'; +@use '../utilityFunctions/capitalize'; +@use '../utilityFunctions/map-deep-get'; +@use '../utilityFunctions/contains'; +@use '../utilityVariables/important'; +@use '../libSupport/manageScope'; +// The spacing scale map (`$tokens`) is provided by the design-tokens package. +// Under the module system it must be loaded explicitly rather than relying on a +// consumer-injected global. +@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariableMap" as tokens; $ds-spacing-types: inline, stack !default; -$ds-spacing-options: $ds-spacing-options !default; +$ds-spacing-options: spacing-options.$ds-spacing-options !default; $ds-spacing-properties: padding, padding, margin, margin !default; /// This mixin is designed to return a series of pre-defined selectors based on the stack or inline spacing design specs @@ -35,20 +42,19 @@ $ds-spacing-properties: padding, padding, margin, margin !default; /// .util_inlineMargin25--right { /// margin-right: 0.125rem; /// } -/// @example scss - import dependencies -/// @import "./node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariableMap"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility"; -/// @example scss - import with custom over-rides -/// $ds-spacing-types: inline; -/// $ds-spacing-options: 200; -/// @import "./node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariableMap"; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility"; +/// @example scss - use dependencies +/// @use "@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility"; +/// @example scss - use with custom over-rides +/// @use "@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility" with ( +/// $ds-spacing-types: inline, +/// $ds-spacing-options: 200 +/// ); @mixin auro_spacing($types: $ds-spacing-types, $options: $ds-spacing-options) { @each $type in $types { @each $value in $options { - $map: map-keys($tokens); - $var: auro_map-deep-get($tokens, #{$map}, #{$value}); + $map: map.keys(tokens.$tokens); + $var: map-deep-get.auro_map-deep-get(tokens.$tokens, #{$map}, #{$value}); $directions: null; $properties: null; @@ -62,29 +68,29 @@ $ds-spacing-properties: padding, padding, margin, margin !default; $properties: $ds-spacing-properties; } - @if not index($types, $type) { + @if not list.index($types, $type) { @error 'INVALID, \'#{$type}\' is not known, please choose from options, [#{$types}]'; } - @if auro_contains($options, $value) { - @if not index($options, $value) { - @error 'INVALID, \'#{$value}\' is not known, please choose from options, [#{$ds-inset-options}]'; + @if contains.auro_contains($options, $value) { + @if not list.index($options, $value) { + @error 'INVALID, \'#{$value}\' is not known, please choose from options, [#{$ds-spacing-options}]'; } @if $value == 'none' { - @for $i from 1 through length($properties) { - $direction: nth($directions, $i); - $property: nth($properties, $i); - #{$scope}.#{$prefix}util_#{$type}#{auro_capitalize($property)}#{auro_capitalize($value)}--#{$direction} { - #{$property}-#{$direction}: 0 $important; + @for $i from 1 through list.length($properties) { + $direction: list.nth($directions, $i); + $property: list.nth($properties, $i); + #{manageScope.$scope}.#{manageScope.$prefix}util_#{$type}#{capitalize.auro_capitalize($property)}#{capitalize.auro_capitalize($value)}--#{$direction} { + #{$property}-#{$direction}: 0 important.$important; } } } @else { - @for $i from 1 through length($properties) { - $direction: nth($directions, $i); - $property: nth($properties, $i); - #{$scope}.#{$prefix}util_#{$type}#{auro_capitalize($property)}#{auro_capitalize($value)}--#{$direction} { - #{$property}-#{$direction}: $var $important; + @for $i from 1 through list.length($properties) { + $direction: list.nth($directions, $i); + $property: list.nth($properties, $i); + #{manageScope.$scope}.#{manageScope.$prefix}util_#{$type}#{capitalize.auro_capitalize($property)}#{capitalize.auro_capitalize($value)}--#{$direction} { + #{$property}-#{$direction}: $var important.$important; } } } diff --git a/src/utilityVariables/_important.scss b/src/utilityVariables/_important.scss index 66b68d50..37948a06 100644 --- a/src/utilityVariables/_important.scss +++ b/src/utilityVariables/_important.scss @@ -9,9 +9,9 @@ /// By default the `!important` flag is NOT set on any CSS selector. /// @group Utility /// @prop {Boolean} $important [null] - manage use of `!important` flag -/// @example scss - update value prior to importing utility support file if `!important` flag is needed -/// $important: true; -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... "; +/// @example scss - configure the `!important` flag before loading utility support files +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/important" with ($important: true); +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... " as *; $important: null !default; diff --git a/src/utilityVariables/_spacing-options.scss b/src/utilityVariables/_spacing-options.scss index 86e8649f..c9ba8f18 100644 --- a/src/utilityVariables/_spacing-options.scss +++ b/src/utilityVariables/_spacing-options.scss @@ -8,6 +8,6 @@ /// @group utility /// @prop {Variable} $options [list] - list of available token options /// @example scss - import dependency variable list -/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options"; +/// @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options" as *; $ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default; diff --git a/tests/_capitalize.spec.scss b/tests/_capitalize.spec.scss index 8acf2c34..dda882fd 100644 --- a/tests/_capitalize.spec.scss +++ b/tests/_capitalize.spec.scss @@ -1,5 +1,5 @@ -@import 'true'; -@import './src/utilityFunctions/capitalize'; +@use 'true' as *; +@use './src/utilityFunctions/capitalize' as *; @include describe('auro_capitalize()') { @include it('should return a string with a capitol letter') { diff --git a/tests/_contains.spec.scss b/tests/_contains.spec.scss index 4098c0de..a812d117 100644 --- a/tests/_contains.spec.scss +++ b/tests/_contains.spec.scss @@ -1,5 +1,5 @@ -@import 'true'; -@import './src/utilityFunctions/contains'; +@use 'true' as *; +@use './../src/utilityFunctions/contains' as *; @include describe('auro_contains()') { @include it('returns true if the asked var is in the list') { diff --git a/tests/_mapDeep.spec.scss b/tests/_mapDeep.spec.scss index 1c5e42f7..bfcf01b0 100644 --- a/tests/_mapDeep.spec.scss +++ b/tests/_mapDeep.spec.scss @@ -1,5 +1,5 @@ -@import 'true'; -@import './src/utilityFunctions/map-deep-get'; +@use 'true' as *; +@use './../src/utilityFunctions/map-deep-get' as *; @include describe('auro_map-deep-get()') { @include it('should return the value from a deep-map request') { diff --git a/tests/breakpoint.spec.scss b/tests/breakpoint.spec.scss index f068fb6a..de5b2b90 100644 --- a/tests/breakpoint.spec.scss +++ b/tests/breakpoint.spec.scss @@ -1,7 +1,6 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables.scss'; - -@import 'true'; -@import '../src/breakpoints'; +@use 'true' as *; +@use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as *; +@use './../src/breakpoints' as *; @include describe('auro_breakpoint--lg()') { @include it('should return content within pre-defined media query') { diff --git a/tests/grids.spec.scss b/tests/grids.spec.scss index bc82ff34..be4032fa 100644 --- a/tests/grids.spec.scss +++ b/tests/grids.spec.scss @@ -1,8 +1,6 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; -@import "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariableMap"; -@import 'true'; -@import "./src/breakpoints"; -@import "./src/grids"; +@use 'true' as *; +@use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as *; +@use './../src/grids' as *; @include describe('grid-stickycolumn--md()') { @include it('should return sticky styling for tablet and larger devices') { diff --git a/tests/propGenerator.spec.scss b/tests/propGenerator.spec.scss index 29f3b267..52e5c01a 100644 --- a/tests/propGenerator.spec.scss +++ b/tests/propGenerator.spec.scss @@ -1,17 +1,16 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - -@import 'true'; - -$layout-properties: margin; -$layout-extensions: Right; -$layout-modifiers: ( - 'none': 0, - '100': $ds-size-100, - '200': $ds-size-200, - '300': $ds-size-300, - '400': $ds-size-400, +@use 'true' as *; +@use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as vac; +@use './../src/utilityMixins/layoutPropertiesGenerator' as * with ( + $layout-properties: margin, + $layout-extensions: Right, + $layout-modifiers: ( + 'none': 0, + '100': vac.$ds-size-100, + '200': vac.$ds-size-200, + '300': vac.$ds-size-300, + '400': vac.$ds-size-400, + ) ); -@import '../src/utilityMixins/layoutPropertiesGenerator'; @include describe('auro_layoutPropertiesGenerator()') { @include it('should return a series of selectors matching the config spec ') { diff --git a/tests/roleButton.spec.scss b/tests/roleButton.spec.scss index b5c20eaf..ba5e16fc 100644 --- a/tests/roleButton.spec.scss +++ b/tests/roleButton.spec.scss @@ -1,7 +1,5 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - -@import 'true'; -@import '../src/utilityMixins/anchor-roleButton'; +@use 'true' as *; +@use './../src/utilityMixins/anchor-roleButton' as *; @include describe('auro_anchorButton()') { @include it('should return a populated selector based on (sass, noncomponent)') { diff --git a/tests/roleTab.spec.scss b/tests/roleTab.spec.scss index 5f4ba3f3..7be5491c 100644 --- a/tests/roleTab.spec.scss +++ b/tests/roleTab.spec.scss @@ -1,7 +1,5 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - -@import 'true'; -@import '../src/utilityMixins/anchor-roleTab'; +@use 'true' as *; +@use './../src/utilityMixins/anchor-roleTab' as *; @include describe('auro_anchorTab()') { @include it('should return a populated selector based on (sass, noncomponent)') { diff --git a/tests/spacing.spec.scss b/tests/spacing.spec.scss index f50f7353..5f70c9b5 100644 --- a/tests/spacing.spec.scss +++ b/tests/spacing.spec.scss @@ -1,11 +1,8 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; -@import "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariableMap"; - -@import 'true'; - -$ds-spacing-types: inline; -$ds-spacing-options: 25, 1000; -@import "./src/utilityMixins/spacingUtility"; +@use 'true' as *; +@use './../src/utilityMixins/spacingUtility' as * with ( + $ds-spacing-types: inline, + $ds-spacing-options: (25, 1000) +); @include describe('auro_spacing()') { @include it('should return a series of selectors matching the config spec ') { diff --git a/tests/styleTest.scss b/tests/styleTest.scss index fb43eb8a..ae139fc6 100644 --- a/tests/styleTest.scss +++ b/tests/styleTest.scss @@ -1,91 +1,99 @@ -// Import build resources to ensure that src resources are working as expected +// Load build resources to ensure that src resources are working as expected. +// This smoke test exercises the module (`@use`) consumer API. Modules whose CSS is +// pulled in more than once (e.g. via the `utilityClasses` aggregate and individually) +// are emitted only once under `@use`, unlike the legacy `@import` build. + +/* --------start deprecated silence (internal smoke test only) ------------- */ +// This smoke test intentionally compiles deprecated modules (e.g. `inset`) to +// verify they still build. Configure the shared `deprecated` module to silence +// its load-time `@warn` here — this MUST be the first `@use` so the module is +// configured before any other stylesheet loads it. Real consumers are unaffected: +// `deprecated.$silence` defaults to `false`, so they still get warned. +@use './../src/libSupport/deprecated' with ($silence: true); +/* --------end deprecated silence ------------- */ /* --------start variables import ------------- */ @use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as vac; -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; /* --------end variables import ------------- */ -/* --------start core import ------------- */ -// @import './../src/core'; -/* --------end core import ------------- */ - /* --------start focus visible import ------------- */ -@import './../src/focus-visible'; +@use './../src/focus-visible'; /* --------end focus visible import ------------- */ /* --------start essentials import ------------- */ -@import './../src/essentials/legacy/auro-classic'; +@use './../src/essentials/legacy/auro-classic' as essentials-legacy; /* --------end essentials import ------------- */ /* --------start breakpoints import ------------- */ -@import './../src/breakpoints'; +@use './../src/breakpoints'; /* --------start grids import ------------- */ -@import './../src/grids'; +@use './../src/grids'; /* --------start fonts import ------------- */ -@import './../src/fonts/legacy/auro-classic'; +@use './../src/fonts/legacy/auro-classic' as fonts-legacy; /* --------start normalize import ------------- */ -@import './../src/normalize'; +@use './../src/normalize'; /* --------start headings import ------------- */ -@import './../src/headings'; +@use './../src/headings'; /* --------start utility/Classes import ------------- */ -@import './../src/utilityClasses'; +@use './../src/utilityClasses'; /* --------start utilityClasses/inset import ------------- */ -@import "./../src/utilityClasses/inset"; +@use "./../src/utilityClasses/inset"; /* --------start utilityClasses/displayProps import ------------- */ -@import './../src/utilityClasses/displayProperties'; +@use './../src/utilityClasses/displayProperties'; /* --------start utilityClasses/fontStyles import ------------- */ -@import './../src/utilityClasses/fontStyles'; +@use './../src/utilityClasses/fontStyles'; /* --------start utilityClasses/responsive import ------------- */ -@import './../src/utilityClasses/responsive'; +@use './../src/utilityClasses/responsive'; /* --------start componentSupport/anchor-roleButton import ------------- */ -@import './../src/componentSupport/anchor-roleButton'; +@use './../src/componentSupport/anchor-roleButton'; /* --------start componentSupport/anchor-roleTab import ------------- */ -@import './../src/componentSupport/anchor-roleTab'; +@use './../src/componentSupport/anchor-roleTab'; /* --------start componentSupport/containedButtons import ------------- */ -@import './../src/componentSupport/containedButtons'; +@use './../src/componentSupport/containedButtons'; /* --------start componentSupport/tablist import ------------- */ -@import './../src/componentSupport/tablist'; +@use './../src/componentSupport/tablist'; -/* --------start componentSupport/tablist import ------------- */ -@import './../src/componentSupport/table'; +/* --------start componentSupport/table import ------------- */ +@use './../src/componentSupport/table'; /* --------start utilityClasses/layoutProperties import ------------- */ -@import '../src/utilityClasses/layoutProperties'; +@use '../src/utilityClasses/layoutProperties'; /* --------start picture import ------------- */ -@import './../src/picture'; +@use './../src/picture'; /* --------start blockquote import ------------- */ -@import './../src/blockquote'; +@use './../src/blockquote'; /* --------start spacingUtility mixin import ------------- */ -$ds-spacing-types: inline; -$ds-spacing-options: 25, 1000; -$ds-spacing-properties: padding, margin; -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariableMap.scss'; -@import './../src/utilityMixins/spacingUtility'; +@use './../src/utilityMixins/spacingUtility' with ( + $ds-spacing-types: inline, + $ds-spacing-options: (25, 1000), + $ds-spacing-properties: (padding, margin) +); /* --------start layoutPropertiesGenerator mixin import ------------- */ -$layout-properties: margin; -$layout-extensions: Right; -$layout-modifiers: ( - 'none': 0, - '100': $ds-size-100, - '200': $ds-size-200, - '300': $ds-size-300, - '400': $ds-size-400, +@use './../src/utilityMixins/layoutPropertiesGenerator' with ( + $layout-properties: margin, + $layout-extensions: Right, + $layout-modifiers: ( + 'none': 0, + '100': vac.$ds-size-100, + '200': vac.$ds-size-200, + '300': vac.$ds-size-300, + '400': vac.$ds-size-400, + ) ); -@import './../src/utilityMixins/layoutPropertiesGenerator'; diff --git a/tests/transition.spec.scss b/tests/transition.spec.scss index 7b1b1fdd..36234db6 100644 --- a/tests/transition.spec.scss +++ b/tests/transition.spec.scss @@ -1,7 +1,5 @@ -@import '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables'; - -@import 'true'; -@import '../src/animation'; +@use 'true' as *; +@use './../src/animation' as *; @include describe('auro_transition()') { @include it('should return standard default properties') { diff --git a/tests/typeThemeScoping.spec.scss b/tests/typeThemeScoping.spec.scss new file mode 100644 index 00000000..60710659 --- /dev/null +++ b/tests/typeThemeScoping.spec.scss @@ -0,0 +1,166 @@ +@use 'true' as *; +@use 'sass:list'; +@use 'sass:map'; +@use './../src/type/mixins/type-generator' as *; +@use './../src/type/mixins/theme-codes'; +@use './../src/type/functions/type-property-check' as type-property-check; +@use './../src/bundled/type/themes/all-theme-configs'; +@use './../src/config/hawaiian/type/accent' as hawaiian-accent; + +// Verifies the data-attribute theme scoping selectors for type custom properties +// (AB#1612078). The selector is built from the design-tokens theme code, so these +// assertions also guard against drift in the generated $wcss-theme-codes map. +@include describe('wcss-type-scope-selector()') { + @include it('scopes a default theme to :root plus its base and -type attributes') { + @include assert-equal( + wcss-type-scope-selector('alaska', true), + ':root, [data-aag-theme="aag-theme-as"], [data-aag-theme="aag-theme-as-type"]' + ); + } + + @include it('scopes a non-default theme to its base and -type attributes only') { + @include assert-equal( + wcss-type-scope-selector('hawaiian'), + '[data-aag-theme="aag-theme-ha"], [data-aag-theme="aag-theme-ha-type"]' + ); + } + + @include it('scopes atmos to its native design-tokens code (atm)') { + @include assert-equal( + wcss-type-scope-selector('atmos'), + '[data-aag-theme="aag-theme-atm"], [data-aag-theme="aag-theme-atm-type"]' + ); + } + + @include it('scopes alaska-classic to its design-tokens code (asc)') { + @include assert-equal( + wcss-type-scope-selector('alaska-classic'), + '[data-aag-theme="aag-theme-asc"], [data-aag-theme="aag-theme-asc-type"]' + ); + } + + @include it('falls back to :root for an unknown theme even when root is excluded') { + // The null-code branch returns `:root` before `$include-root` is consulted, + // so an unknown theme yields `:root` regardless of the flag. + @include assert-equal( + wcss-type-scope-selector('not-a-theme', false), + ':root' + ); + } +} + +// The multi-theme bundle mixin (generate-multi-theme-type-css-vars) hard-`@error`s +// when a NON-default manifest theme has no theme code, because it would otherwise +// fall back to `:root` and silently clobber the default theme's typography. The +// `@error` itself aborts compilation and can't be asserted directly, so this guards +// the invariant the error protects: every theme in the static manifest resolves to +// a real code. Adding a theme to $wcss-all-theme-configs without a corresponding +// code (theme-codes.build.mjs) fails here instead of at global-bundle build time. +@include describe('multi-theme type manifest (guards the :root-fallback @error)') { + @include it('every theme in $wcss-all-theme-configs has a theme code') { + $missing: (); + @each $theme-name, $theme-configs in all-theme-configs.$wcss-all-theme-configs { + @if map.get(theme-codes.$wcss-theme-codes, $theme-name) == null { + $missing: list.append($missing, $theme-name); + } + } + + // Empty list => no manifest theme would fall back to :root. + @include assert-equal($missing, ()); + } + + @include it('every theme with a code is in $wcss-all-theme-configs') { + $missing: (); + @each $theme-name, $code in theme-codes.$wcss-theme-codes { + @if map.get(all-theme-configs.$wcss-all-theme-configs, $theme-name) == null { + $missing: list.append($missing, $theme-name); + } + } + + // Empty list => every coded theme has manifest configs, so no theme is + // silently omitted from the multi-theme bundles. + @include assert-equal($missing, ()); + } +} + +// Directly guards the invariant the @error above protects: generate-multi-theme-type-css-vars +// must emit the DEFAULT theme under `:root` (plus its attribute selectors) and every +// NON-default theme under its attribute selectors ONLY — never `:root`, which would clobber +// the default theme's typography. A two-theme stub drawn from the real manifest feeds the +// partial generators valid configs; the `expect` block reproduces the SAME generator output +// under hardcoded selectors, so the type-var internals cancel out and only the selector +// composition is under test. Regressing the mixin to pass `$include-root: true` for a +// non-default theme would emit its block under `:root` and fail this assertion. +@include describe('generate-multi-theme-type-css-vars() scoping') { + @include it('emits the default theme under :root but scopes non-default themes to attribute selectors only') { + $stub-themes: ( + 'alaska': map.get(all-theme-configs.$wcss-all-theme-configs, 'alaska'), + 'hawaiian': map.get(all-theme-configs.$wcss-all-theme-configs, 'hawaiian') + ); + + @include assert { + @include output { + @include generate-multi-theme-type-css-vars($stub-themes, 'alaska'); + } + @include expect { + @include generate-type-css-vars( + map.get($stub-themes, 'alaska'), + ':root, [data-aag-theme="aag-theme-as"], [data-aag-theme="aag-theme-as-type"]' + ); + @include generate-type-css-vars( + map.get($stub-themes, 'hawaiian'), + '[data-aag-theme="aag-theme-ha"], [data-aag-theme="aag-theme-ha-type"]' + ); + } + } + } + + // Guards SOURCE ORDER specifically: the default theme's `:root` block must be + // emitted BEFORE any non-default attribute block. `:root` and `[data-aag-theme]` + // have equal specificity, so if a consumer sets a non-default theme attribute on + // the root element, the cascade resolves by source order — the non-default block + // only wins if it follows the default's `:root` block. This stub deliberately + // lists the default theme SECOND in the map; a mixin that emitted in map order + // (instead of hoisting the default first) would put the non-default block ahead + // of `:root` and fail this assertion. + @include it('emits the default theme first even when it is not first in the manifest map') { + $stub-themes: ( + 'hawaiian': map.get(all-theme-configs.$wcss-all-theme-configs, 'hawaiian'), + 'alaska': map.get(all-theme-configs.$wcss-all-theme-configs, 'alaska') + ); + + @include assert { + @include output { + @include generate-multi-theme-type-css-vars($stub-themes, 'alaska'); + } + @include expect { + @include generate-type-css-vars( + map.get($stub-themes, 'alaska'), + ':root, [data-aag-theme="aag-theme-as"], [data-aag-theme="aag-theme-as-type"]' + ); + @include generate-type-css-vars( + map.get($stub-themes, 'hawaiian'), + '[data-aag-theme="aag-theme-ha"], [data-aag-theme="aag-theme-ha-type"]' + ); + } + } + } +} + +// The multi-theme global stylesheet (AB#1612078) emits ONE theme-agnostic set of +// `.accent-*` classes that always reference `var(--wcss-accent-*-letter-spacing)`. +// Hawaiian historically opted out of accent tracking via the now-defunct +// `$accent-uses-letter-spacing: false` class flag; in the shared-class model it must +// instead neutralize the declaration by resolving that custom property to `normal`. +// Without the config key the property emits empty and the shared class silently +// applies an invalid/inherited letter-spacing to Hawaiian accents. +@include describe('Hawaiian accent letter-spacing (guards AB#1612078 regression)') { + @include it('resolves letter-spacing to normal for every accent size') { + @each $size in ('2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs') { + @include assert-equal( + type-property-check.type-property-check(hawaiian-accent.$hawaiian-type-accent-config, $size, 'letter-spacing'), + normal + ); + } + } +} diff --git a/tests/utilityClasses.spec.js b/tests/utilityClasses.spec.js new file mode 100644 index 00000000..f0c02ddb --- /dev/null +++ b/tests/utilityClasses.spec.js @@ -0,0 +1,76 @@ +const path = require('path') +const sass = require('sass') + +// Regression coverage for the two utility-class output fixes in commit 799c24b +// ("fix: correct lg breakpoint token and font-weight custom property in utility +// classes #294"). Both files in src/utilityClasses/ emit their rules at the +// top level (on `@use`), not through a mixin, so sass-true's output/expect blocks +// can't isolate them — instead we compile the real source file and assert on the +// emitted CSS. Testing the actual file (not a reconstruction) is what makes these +// true regression guards: reintroducing the original bug fails the compile-output +// assertion below. + +const loadPaths = [path.resolve(process.cwd(), 'node_modules'), process.cwd()] + +/** Compile a utility-class partial standalone and return its CSS with runs of + * whitespace collapsed, so assertions are independent of Sass's formatting. */ +function compileCss(relPath) { + const { css } = sass.compile(path.resolve(process.cwd(), relPath), { loadPaths }) + return css.replace(/\s+/g, ' ').trim() +} + +describe('utilityClasses/responsive — .util_is-lgOnly (799c24b)', () => { + // Bug: the class guarded on / referenced the non-existent `$ds-breakpoint-lg` + // token (correct token: `$ds-grid-breakpoint-lg`), so the `@media` rule was + // never emitted and `.util_is-lgOnly` had no effect above the lg breakpoint. + let css + beforeAll(() => { + css = compileCss('src/utilityClasses/_responsive.scss') + }) + + it('emits the base hidden state', () => { + expect(css).toContain('.util_is-lgOnly { display: none;') + }) + + it('emits the lg (min-width: 1024px) media rule that was previously missing', () => { + expect(css).toMatch( + /@media screen and \(min-width: 1024px\) \{ \.util_is-lgOnly \{ display: block;/ + ) + }) + + it('emits the --inline variant media rule as inline-block', () => { + expect(css).toMatch( + /@media screen and \(min-width: 1024px\) \{ \.util_is-lgOnly--inline \{ display: inline-block;/ + ) + }) + + it('resolves the lg breakpoint from the correct grid token (no stale $ds-breakpoint-lg)', () => { + // The corrected token compiles to 1024px; the old token would not resolve. + expect(css).toContain('min-width: 1024px') + }) +}) + +describe('utilityClasses/fontStyles — .util_fontWeightDefault (799c24b)', () => { + // Bug: the declaration was written `var(--$ds-text-body-default-weight)` — a + // `$`-prefixed name. Sass interpolates the variable's VALUE into the custom- + // property name, so it compiled to the malformed `var(-- 500)` (a property + // named `-- 500`) rather than a real reference. Fix uses the literal + // `var(--ds-text-body-default-weight, $ds-text-body-default-weight)` — a valid + // custom property with a Sass fallback. + let css + beforeAll(() => { + css = compileCss('src/utilityClasses/_fontStyles.scss') + }) + + it('emits a valid custom property with a token fallback', () => { + expect(css).toContain( + '.util_fontWeightDefault { font-weight: var(--ds-text-body-default-weight, 500);' + ) + }) + + it('never emits the malformed custom-property name from the interpolated $-variable', () => { + // The old bug produced `var(-- 500)`; guard against any `var(--` immediately + // followed by whitespace or a digit (i.e. an interpolated value, not a name). + expect(css).not.toMatch(/var\(--\s*\d/) + }) +})