From 4885844b2dc0eb46217712ccaafeed5034bc14e1 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Wed, 11 Mar 2020 10:44:42 -0700 Subject: [PATCH] fix: #37 address deprecation issues --- docs/index.html | 446 +++++++++++-------- src/_baseline.scss | 123 ++--- src/_fonts.scss | 77 ++-- src/componentSupport/_anchor-roleButton.scss | 4 +- src/componentSupport/_anchor-roleTab.scss | 6 +- src/componentSupport/_containedButtons.scss | 74 +-- src/componentSupport/_tablist.scss | 28 +- src/formElements/_inputTypeText.scss | 18 +- src/utilityClasses/_focusVisible.scss | 4 +- src/utilityClasses/_fontStyles.scss | 26 +- src/utilityClasses/_layoutProperties.scss | 32 +- src/utilityClasses/_responsive.scss | 112 +++-- staticDocs/howToUseFonts.md | 95 ---- 13 files changed, 549 insertions(+), 496 deletions(-) delete mode 100644 staticDocs/howToUseFonts.md diff --git a/docs/index.html b/docs/index.html index 28ede5f..88cb16f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -43,7 +43,9 @@ #{$scope}[type="reset"]:-moz-focusring, #{$scope}[type="submit"]:-moz-focusring">#{$scope}button:-moz-focusring, #{$scope}[type="button"]:-moz-focusring, #{$scope}[type="reset"]:-moz-focusring, #{$scope}[type="submit"]:-moz-focusring
  • #{$scope}fieldset
  • #{$scope}legend
  • #{$scope}progress
  • #{$scope}textarea
  • #{$scope}[type="number"]::-webkit-inner-spin-button, #{$scope}[type="number"]::-webkit-outer-spin-button
  • #{$scope}[type="search"]
  • #{$scope}[type="search"]::-webkit-search-decoration
  • #{$scope}::-webkit-file-upload-button
  • #{$scope}details
  • #{$scope}summary
  • #{$scope}template
  • #{$scope}[hidden]

    • responsive

    mixins

    scope-prefix

    variables

    utility

    functions

    variables

    utility-auro

    css

    utility-display

    css

    utility-font

    css

    utility-layout

    css

    mixins

    utility-mixins

    mixins

    utility-responsive

    css

    †deprecated

    mixins

    css

    responsive

    mixins

    scope-prefix

    variables

    General

    css

    utility

    functions

    variables

    utility-auro

    css

    utility-display

    css

    utility-font

    css

    utility-layout

    css

    mixins

    utility-mixins

    mixins

    utility-responsive

    css

    †deprecated

    mixins

    css

    Description

    .focus-visible is a selector assigned to a DOM node as a user tabs through the UI.

    See npm focus-visible polyfill

    See CSSWG spec

    The role of this selector is to apply the designed :focus-visible style to DOM nodes that ARE NOT Auro Web Components

    Supports the following selectors with $scope and/or $prefix defined:

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

    .util_fontWeightBook

    Deprecated!

    see .util_fontWeightDefault

    .util_fontWeightBook { ... }

    Description

    Utility class for font-weight book

    Manage !important flag.

    Example

    import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

    .util_fontWeightLight

    Deprecated!

    see .util_fontWeightDisplay

    .util_fontWeightLight { ... }

    Description

    Utility class for font-weight light

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

    .util_type--lg

    Deprecated!

    discontinue use, see heading styles

    .util_type--lg { ... }

    Description

    Utility class for font-size lg

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

    .util_type--xl

    Deprecated!

    discontinue use, see heading styles

    .util_type--xl { ... }

    Description

    Utility class for font-size xl

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

    .util_type--secondary

    Deprecated!

    discontinue use, see body styles

    .util_type--secondary { ... }

    Description

    Utility class for color secondary

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

    .util_marginAuto

    Deprecated!

    see util_margin--auto

    .util_marginAuto { ... }

    Description

    Utility class to center content within a block element

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginBottom--sml

    Deprecated!

    see .util_stackMarginXs--bottom (auro_spacing)

    .util_marginBottom--sml { ... }

    Description

    Utility class to set margin-bottom to sml

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginBottom--med

    Deprecated!

    see .util_stackMarginMd--bottom (auro_spacing)

    .util_marginBottom--med { ... }

    Description

    Utility class to set margin-bottom to med

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginTop--sml

    Deprecated!

    see .util_stackMarginXs--top (auro_spacing)

    .util_marginTop--sml { ... }

    Description

    Utility class to set margin-top to sml

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginTop--med

    Deprecated!

    see .util_stackMarginMd--top (auro_spacing)

    .util_marginTop--med { ... }

    Description

    Utility class to set margin-top to med

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginRight--sml

    Deprecated!

    see .util_inlineMarginXs--right (auro_layoutPropertiesGenerator)

    .util_marginRight--sml { ... }

    Description

    Utility class to set margin-right to sml

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginRight--med

    Deprecated!

    see .util_inlineMarginMd--right (auro_layoutPropertiesGenerator)

    .util_marginRight--med { ... }

    Description

    Utility class to set margin-right to med

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginLeft--sml

    Deprecated!

    see .util_inlineMarginXs--left (auro_layoutPropertiesGenerator)

    .util_marginLeft--sml { ... }

    Description

    Utility class to set margin-left to sml

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_marginLeft--med

    Deprecated!

    see .util_inlineMarginMd--left (auro_layoutPropertiesGenerator)

    .util_marginLeft--med { ... }

    Description

    Utility class to set margin-left to med

    Manage !important flag.

    Example

    import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

    .util_is-mobileOnly

    Deprecated!

    see .util_is-smOnly

    .util_is-mobileOnly { ... }

    Description

    Utility class to restrain visibility of UI element to mobile users only.

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-narrowOnly

    Deprecated!

    see .util_is-mdOnly

    .util_is-narrowOnly { ... }

    Description

    Utility class to restrain block visibility of UI element between narrow and medium screens.

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-narrowOnly--inline

    Deprecated!

    see .util_is-mdOnly--inline

    .util_is-narrowOnly--inline { ... }

    Description

    Utility class to restrain inline-block visibility of UI element between narrow and medium screens.

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-narrowAppears

    Deprecated!

    see .util_is-mdAppears

    .util_is-narrowAppears { ... }

    Description

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

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-narrowAppears--inline

    Deprecated!

    see .util_is-mdAppears--inline

    .util_is-narrowAppears--inline { ... }

    Description

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

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-tabletOnly

    Deprecated!

    no new selector

    .util_is-tabletOnly { ... }

    Description

    Utility class to restrain block visibility of UI element between medium and wide screens.

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    Default selector(s)

    .util_is-tabletOnly {}

    Selector(s) when $scope: true;

    .auro .util_is-tabletOnly {}

    Selector(s) when $prefix: true;

    .auro_util_is-tabletOnly {}

    .util_is-tabletOnly--inline

    Deprecated!

    no new selector

    .util_is-tabletOnly--inline { ... }

    Description

    Utility class to restrain inline-block visibility of UI element between medium and wide screens.

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    Default selector(s)

    .util_is-tabletOnly--inline {}

    Selector(s) when $scope: true;

    .auro .util_is-tabletOnly--inline {}

    Selector(s) when $prefix: true;

    .auro_util_is-tabletOnly--inline {}

    .util_is-tabletAppears

    Deprecated!

    no new selector

    .util_is-tabletAppears { ... }

    Description

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

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    Default selector(s)

    .util_is-tabletAppears {}

    Selector(s) when $scope: true;

    .auro .util_is-tabletAppears {}

    Selector(s) when $prefix: true;

    .auro_util_is-tabletAppears {}

    .util_is-tabletAppears--inline

    Deprecated!

    no new selector

    .util_is-tabletAppears--inline { ... }

    Description

    Utility class to restrain inline-block visibility of UI element for medium screens.

    Manage !important flag.

    Manage $scope and $prefix options.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    Default selector(s)

    .util_is-tabletAppears--inline {}

    Selector(s) when $scope: true;

    .auro .util_is-tabletAppears--inline {}

    Selector(s) when $prefix: true;

    .auro_util_is-tabletAppears--inline {}

    .util_is-desktopOnly

    Deprecated!

    see .util_is-lgOnly

    .util_is-desktopOnly { ... }

    Description

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

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

    .util_is-desktopOnly--inline

    Deprecated!

    see .util_is-lgOnly--inline

    .util_is-desktopOnly--inline { ... }

    Description

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

    Manage !important flag.

    Example

    import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
    \ No newline at end of file diff --git a/src/_baseline.scss b/src/_baseline.scss index 2ec58bc..f959df1 100644 --- a/src/_baseline.scss +++ b/src/_baseline.scss @@ -36,12 +36,14 @@ body, .baseType { @include deprecated('selctors body, .baseType'); - margin: 0; - font-family: $auro-font-family-default; - font-weight: $weight-book; - font-size: $size-font-breakpoint-all-med; - line-height: $vertical-alignment-body; - color: $color-type-theme-light-primary; + @if variable-exists(font-family-base) { + margin: 0; + font-family: $font-family-base; + font-weight: $weight-book; + font-size: $size-font-breakpoint-all-med; + line-height: $vertical-alignment-body; + color: $color-type-theme-light-primary; + } } /// Sets standard `margin-bottom` for all paragraph style content @@ -56,10 +58,12 @@ body, .baseParagraph { @include deprecated('selctor .baseParagraph'); - margin-bottom: $size-margin-baseline; + @if variable-exists(size-margin-baseline) { + margin-bottom: $size-margin-baseline; - .hyperlink { - text-decoration: underline; + .hyperlink { + text-decoration: underline; + } } } @@ -75,43 +79,45 @@ body, .hyperlink { @include deprecated('selctor .hyperlink'); - color: $color-type-theme-light-link; - padding: 0 $size-scale-sml; - text-decoration: none; - - &:visited { + @if variable-exists(color-type-theme-light-link) { color: $color-type-theme-light-link; - } - - &--inline { - padding: 0; - text-decoration: underline; + padding: 0 $size-scale-sml; + text-decoration: none; - &:not(.is-touching) { - &:hover { - text-decoration: none !important; // sass-lint:disable-line no-important - } + &:visited { + color: $color-type-theme-light-link; } - } - &--darktheme { - color: $color-type-theme-dark-link; + &--inline { + padding: 0; + text-decoration: underline; - &:not(.is-touching) { - &:hover { - color: $color-type-theme-dark-link-hover; + &:not(.is-touching) { + &:hover { + text-decoration: none !important; // sass-lint:disable-line no-important + } } } - &:visited { + &--darktheme { color: $color-type-theme-dark-link; + + &:not(.is-touching) { + &:hover { + color: $color-type-theme-dark-link-hover; + } + } + + &:visited { + color: $color-type-theme-dark-link; + } } - } - &:not(.is-touching) { - &:hover { - color: $color-type-theme-light-link-hover; - text-decoration: underline; + &:not(.is-touching) { + &:hover { + color: $color-type-theme-light-link-hover; + text-decoration: underline; + } } } } @@ -146,7 +152,9 @@ small, .type--small { @include deprecated('selctors small, .type--small'); - font-size: $size-font-breakpoint-all-small; + @if variable-exists(color-type-theme-light-link) { + font-size: $size-font-breakpoint-all-small; + } } /// Baseline block 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. @@ -161,9 +169,11 @@ small, .heading { @include deprecated('selctor .heading'); - margin: $size-margin-header-y-axis $size-margin-header-x-axis; - font-weight: inherit; - line-height: $vertical-alignment-heading; + @if variable-exists(color-type-theme-light-link) { + margin: $size-margin-header-y-axis $size-margin-header-x-axis; + font-weight: inherit; + line-height: $vertical-alignment-heading; + } } /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector @@ -179,11 +189,13 @@ small, .heading--max { @include deprecated('selctor .heading--max'); - font-size: $size-font-breakpoint-mobile-max; - margin-top: 0; + @if variable-exists(color-type-theme-light-link) { + font-size: $size-font-breakpoint-mobile-max; + margin-top: 0; - @include breakpoint-medium { - font-size: $size-font-breakpoint-desktop-max; + @include breakpoint-medium { + font-size: $size-font-breakpoint-desktop-max; + } } } @@ -199,10 +211,12 @@ small, .heading--xxl { @include deprecated('selctor .heading--xxl'); - font-size: $size-font-breakpoint-mobile-xxl; + @if variable-exists(color-type-theme-light-link) { + font-size: $size-font-breakpoint-mobile-xxl; - @include breakpoint-medium { - font-size: $size-font-breakpoint-desktop-xxl; + @include breakpoint-medium { + font-size: $size-font-breakpoint-desktop-xxl; + } } } @@ -218,10 +232,12 @@ small, .heading--xl { @include deprecated('selctor .heading--xl'); - font-size: $size-font-breakpoint-mobile-xl; + @if variable-exists(color-type-theme-light-link) { + font-size: $size-font-breakpoint-mobile-xl; - @include breakpoint-medium { - font-size: $size-font-breakpoint-desktop-xl; + @include breakpoint-medium { + font-size: $size-font-breakpoint-desktop-xl; + } } } @@ -237,10 +253,11 @@ small, .heading--lg { @include deprecated('selctor .heading--lg'); - font-size: $size-font-breakpoint-mobile-lg; + @if variable-exists(color-type-theme-light-link) { + font-size: $size-font-breakpoint-mobile-lg; - @include breakpoint-medium { - font-size: $size-font-breakpoint-desktop-lg; + @include breakpoint-medium { + font-size: $size-font-breakpoint-desktop-lg; + } } } - diff --git a/src/_fonts.scss b/src/_fonts.scss index a9a2ffc..fe5f61e 100644 --- a/src/_fonts.scss +++ b/src/_fonts.scss @@ -3,73 +3,63 @@ // --------------------------------------------------------------------- -@import "./libSupport/deprecated"; - // sass-lint:disable no-duplicate-properties // @font-face is not supported in SassDocs -// See https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/howToUseFonts.md for full details /// Baseline font-face setting for using web based custom fonts - font weight light -/// @group †deprecated /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; -@font-face { - @include deprecated('legacy @font-face setup'); - @if variable-exists(asset-font-circular-family-name){ - font-family: $asset-font-circular-family-name; - } @else { - font-family: $auro-font-family-default; +// Auro rule +@if variable-exists(auro-asset-font-circular-family-name) { + @font-face { + font-family: $auro-asset-font-circular-family-name; + src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); + font-weight: $auro-text-heading-display-weight; + font-style: normal; + font-display: fallback; } - src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), - url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); - @if variable-exists(weight-light){ +} + +// deprecated rule +@if variable-exists(asset-font-circular-family-name) { + @font-face { + font-family: $asset-font-circular-family-name; + src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); font-weight: $weight-light; - } @else { - font-family: $auro-text-heading-display-weight; + font-style: normal; + font-display: fallback; } - font-style: normal; - font-display: fallback; } -/// Baseline font-face setting for using web based custom fonts - font weight light -/// @group Baseline -/// @example scss - import src file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; -@font-face { - font-family: $auro-asset-font-circular-family-name; - src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), - url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); - font-weight: $auro-text-heading-display-weight; - font-style: normal; - font-display: fallback; -} /// Baseline font-face setting for using web based custom fonts - font weight medium -/// @group Baseline /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { - font-family: $auro-asset-font-circular-family-name; - src: url("https://resource.alaskaair.net/-/media/A5558137DB0F4B818D85EBE44FDC542E.woff2") format("woff2"), - url("https://resource.alaskaair.net/-/media/F4E82B6C6CBA46B4A322B4B99B2CBC63.woff") format("woff"); + @if variable-exists(asset-font-circular-family-name){ + font-family: $asset-font-circular-family-name; + } @else { + font-family: $auro-asset-font-circular-family-name; + } + src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"), + url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff"); font-weight: $auro-text-heading-medium-weight; font-style: normal; font-display: fallback; } /// Baseline font-face setting for using web based custom fonts - font weight book -/// @group †deprecated /// @example scss - import src file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; @font-face { - @include deprecated('legacy @font-face setup'); - @if variable-exists(asset-font-circular-family-name){ font-family: $asset-font-circular-family-name; } @else { - font-family: $auro-font-family-default; + font-family: $auro-asset-font-circular-family-name; } src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"), url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff"); @@ -81,16 +71,3 @@ font-style: normal; font-display: fallback; } - -/// Baseline font-face setting for using web based custom fonts - font weight book -/// @group Baseline -/// @example scss - import src file -/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts"; -@font-face { - font-family: $auro-asset-font-circular-family-name; - src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"), - url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff"); - font-weight: $auro-text-body-default-weight; - font-style: normal; - font-display: fallback; -} diff --git a/src/componentSupport/_anchor-roleButton.scss b/src/componentSupport/_anchor-roleButton.scss index a9c833f..ca69a94 100644 --- a/src/componentSupport/_anchor-roleButton.scss +++ b/src/componentSupport/_anchor-roleButton.scss @@ -22,7 +22,9 @@ .ods-roleButton { @include deprecated('selctor .ods-roleButton'); - @include anchorButton(sass, noncomponent); + @if variable-exists(color-type-theme-light-link) { + @include anchorButton(sass, noncomponent); + } } diff --git a/src/componentSupport/_anchor-roleTab.scss b/src/componentSupport/_anchor-roleTab.scss index f367403..3ee72ce 100644 --- a/src/componentSupport/_anchor-roleTab.scss +++ b/src/componentSupport/_anchor-roleTab.scss @@ -21,8 +21,10 @@ .ods-roleTab { @include deprecated('selctor .ods-roleTab'); - @include anchorTab(sass, noncomponent); - margin-right: calc(#{$size-scale-micro} * -1); + @if variable-exists(color-type-theme-light-link) { + @include anchorTab(sass, noncomponent); + margin-right: calc(#{$size-scale-micro} * -1); + } } diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss index f091a77..8d7dfb9 100644 --- a/src/componentSupport/_containedButtons.scss +++ b/src/componentSupport/_containedButtons.scss @@ -29,53 +29,55 @@ .ods-containedButtons { @include deprecated('selctor .ods-containedButtons'); - display: flex; - flex-direction: column; + @if variable-exists(breakpoint-width-medium) { + display: flex; + flex-direction: column; - > * { - margin-bottom: 1rem; + > * { + margin-bottom: 1rem; - &:last-child { - margin-bottom: 0; + &:last-child { + margin-bottom: 0; + } } - } - ods-button { - order: -1; - } + ods-button { + order: -1; + } - [role=button] { - margin-bottom: 0; - width: 100%; - text-align: center; - } + [role=button] { + margin-bottom: 0; + width: 100%; + text-align: center; + } - &--reverse { - @include breakpoint-medium { - justify-content: flex-end; + &--reverse { + @include breakpoint-medium { + justify-content: flex-end; + } } - } - @include breakpoint-medium { - flex-direction: row; + @include breakpoint-medium { + flex-direction: row; - > * { - margin-left: 1rem; - margin-bottom: 0; + > * { + margin-left: 1rem; + margin-bottom: 0; - &:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } - } - ods-button { - order: inherit; - } + ods-button { + order: inherit; + } - [role=button] { - margin: inherit; - width: inherit; - text-align: inherit; + [role=button] { + margin: inherit; + width: inherit; + text-align: inherit; + } } } } @@ -122,12 +124,12 @@ } &--reverse { - @include breakpoint-medium { + @include auro_breakpoint--md { justify-content: flex-end; } } - @include breakpoint-medium { + @include auro_breakpoint--md { flex-direction: row; > * { diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss index 7cdb7a8..db00b52 100644 --- a/src/componentSupport/_tablist.scss +++ b/src/componentSupport/_tablist.scss @@ -21,19 +21,21 @@ .ods-tablist { @include deprecated('selctor .ods-tablist'); - @include breakpoint-narrow { - overflow-y: unset; - white-space: unset; - } + @if variable-exists(breakpoint-width-narrow) { + @include breakpoint-narrow { + overflow-y: unset; + white-space: unset; + } - border-width: 0 0 1px 0; - border-style: solid; - border-color: $color-background-light-rule; - line-height: $size-scale-xxl; - height: calc(#{$size-scale-xxl} + 1px); - margin-bottom: $size-scale-med; - overflow-y: scroll; - white-space: nowrap; + border-width: 0 0 1px 0; + border-style: solid; + border-color: $color-background-light-rule; + line-height: $size-scale-xxl; + height: calc(#{$size-scale-xxl} + 1px); + margin-bottom: $size-scale-med; + overflow-y: scroll; + white-space: nowrap; + } } /// `.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"` @@ -46,7 +48,7 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist"; #{$scope}.auro_tablist { - @include breakpoint-narrow { + @include auro_breakpoint--sm { overflow-y: unset; white-space: unset; } diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss index c92a37e..35e341c 100644 --- a/src/formElements/_inputTypeText.scss +++ b/src/formElements/_inputTypeText.scss @@ -16,14 +16,16 @@ input[type=password], input[type=email] { @include deprecated('selectors for inputTypeText'); - border-width: 0 0 1px 0; - border-color: $color-base-shark; - border-style: solid; - color: $color-type-theme-light-primary; + @if variable-exists(color-base-shark) { + border-width: 0 0 1px 0; + border-color: $color-base-shark; + border-style: solid; + color: $color-type-theme-light-primary; - &:focus { - border-color: $color-accessibility-border-active; - outline: 0; - box-shadow: unset; + &:focus { + border-color: $color-accessibility-border-active; + outline: 0; + box-shadow: unset; + } } } diff --git a/src/utilityClasses/_focusVisible.scss b/src/utilityClasses/_focusVisible.scss index c6ee291..d76bbee 100644 --- a/src/utilityClasses/_focusVisible.scss +++ b/src/utilityClasses/_focusVisible.scss @@ -33,7 +33,9 @@ &.ods-roleTab { @include deprecated('selector .focus-visible'); - @include focus-hyperlink(sass) + @if variable-exists(color-base-white) { + @include focus-hyperlink(sass) + } } } diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss index f88c663..8089d8c 100644 --- a/src/utilityClasses/_fontStyles.scss +++ b/src/utilityClasses/_fontStyles.scss @@ -18,7 +18,9 @@ .util_fontWeightBook { @include deprecated('selector .util_fontWeightBook'); - font-weight: $weight-book $important; + @if variable-exists(weight-book) { + font-weight: $weight-book $important; + } } /// Utility class for default font-weight @@ -75,7 +77,9 @@ .util_fontWeightLight { @include deprecated('selector .util_fontWeightLight'); - font-weight: $weight-light $important; + @if variable-exists(weight-light) { + font-weight: $weight-light $important; + } } /// Utility class for display font-weight @@ -177,7 +181,9 @@ .util_type--lg { @include deprecated('selector .util_type--lg'); - font-size: $size-font-breakpoint-desktop-lg $important; + @if variable-exists(size-font-breakpoint-desktop-lg) { + font-size: $size-font-breakpoint-desktop-lg $important; + } } /// Utility class for font-size `xl` @@ -192,11 +198,13 @@ .util_type--xl { @include deprecated('selector .util_type--xl'); - @include breakpoint-medium { - font-size: $size-font-breakpoint-desktop-xl $important; - } + @if variable-exists(breakpoint-medium) { + @include breakpoint-medium { + font-size: $size-font-breakpoint-desktop-xl $important; + } - font-size: $size-font-breakpoint-mobile-xl $important; + font-size: $size-font-breakpoint-mobile-xl $important; + } } /// Utility class for color `secondary` @@ -211,5 +219,7 @@ .util_type--secondary { @include deprecated('selector .util_type--secondary'); - color: $color-type-theme-light-secondary $important; + @if variable-exists(color-type-theme-light-secondary) { + color: $color-type-theme-light-secondary $important; + } } diff --git a/src/utilityClasses/_layoutProperties.scss b/src/utilityClasses/_layoutProperties.scss index 777ea02..e1a7468 100644 --- a/src/utilityClasses/_layoutProperties.scss +++ b/src/utilityClasses/_layoutProperties.scss @@ -99,7 +99,9 @@ .util_marginBottom--sml { @include deprecated('selctor .util_marginBottom--sml'); - margin-bottom: $size-scale-sml $important; + @if variable-exists(size-scale-sml) { + margin-bottom: $size-scale-sml $important; + } } /// Utility class to set margin-bottom to `med` @@ -113,7 +115,9 @@ .util_marginBottom--med { @include deprecated('selctor .util_marginBottom--med'); - margin-bottom: $size-scale-med $important; + @if variable-exists(size-scale-med) { + margin-bottom: $size-scale-med $important; + } } /// Utility class to set margin-top to `sml` @@ -127,7 +131,9 @@ .util_marginTop--sml { @include deprecated('selctor .util_marginTop--sml'); - margin-top: $size-scale-sml $important; + @if variable-exists(size-scale-sml) { + margin-top: $size-scale-sml $important; + } } /// Utility class to set margin-top to `med` @@ -141,7 +147,9 @@ .util_marginTop--med { @include deprecated('selctor .util_marginTop--med'); - margin-top: $size-scale-med $important; + @if variable-exists(size-scale-sml) { + margin-top: $size-scale-sml $important; + } } /// Utility class to set margin-right to `sml` @@ -155,7 +163,9 @@ .util_marginRight--sml { @include deprecated('selctor .util_marginRight--sml'); - margin-right: $size-scale-sml $important; + @if variable-exists(size-scale-sml) { + margin-right: $size-scale-sml $important; + } } /// Utility class to set margin-right to `med` @@ -169,7 +179,9 @@ .util_marginRight--med { @include deprecated('selctor .util_marginRight--med'); - margin-right: $size-scale-med $important; + @if variable-exists(size-scale-med) { + margin-right: $size-scale-med $important; + } } /// Utility class to set margin-left to `sml` @@ -183,7 +195,9 @@ .util_marginLeft--sml { @include deprecated('selctor .util_marginLeft--sml'); - margin-left: $size-scale-sml $important; + @if variable-exists(size-scale-sml) { + margin-left: $size-scale-sml $important; + } } /// Utility class to set margin-left to `med` @@ -197,5 +211,7 @@ .util_marginLeft--med { @include deprecated('selctor .util_marginLeft--med'); - margin-left: $size-scale-med $important; + @if variable-exists(size-scale-med) { + margin-left: $size-scale-med $important; + } } diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss index b692f36..b7cc589 100644 --- a/src/utilityClasses/_responsive.scss +++ b/src/utilityClasses/_responsive.scss @@ -19,10 +19,12 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints"; /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; .util_is-mobileOnly { - @include breakpoint-narrow { - @include deprecated('selector .util_is-mobileOnly'); + @if variable-exists(breakpoint-width-narrow) { + @include breakpoint-narrow { + @include deprecated('selector .util_is-mobileOnly'); - display: none $important; + display: none $important; + } } } @@ -62,14 +64,16 @@ .util_is-narrowOnly { @include deprecated('selector .util_is-narrowOnly'); - display: none $important; + @if variable-exists(breakpoint-width-narrow) { + display: none $important; - @include breakpoint-narrow { - display: block $important; - } + @include breakpoint-narrow { + display: block $important; + } - @include breakpoint-medium { - display: none $important; + @include breakpoint-medium { + display: none $important; + } } } @@ -115,14 +119,16 @@ .util_is-narrowOnly--inline { @include deprecated('selector .util_is-narrowOnly--inline'); - display: none $important; + @if variable-exists(breakpoint-width-narrow) { + display: none $important; - @include breakpoint-narrow { - display: inline-block $important; - } + @include breakpoint-narrow { + display: inline-block $important; + } - @include breakpoint-medium { - display: none $important; + @include breakpoint-medium { + display: none $important; + } } } @@ -168,10 +174,12 @@ .util_is-narrowAppears { @include deprecated('selector .util_is-narrowAppears'); - display: none $important; + @if variable-exists(breakpoint-width-narrow) { + display: none $important; - @include breakpoint-narrow { - display: block $important; + @include breakpoint-narrow { + display: block $important; + } } } @@ -213,10 +221,12 @@ .util_is-narrowAppears--inline { @include deprecated('selector .util_is-narrowAppears--inline'); - display: none $important; + @if variable-exists(breakpoint-width-narrow) { + display: none $important; - @include breakpoint-narrow { - display: inline-block $important; + @include breakpoint-narrow { + display: inline-block $important; + } } } @@ -270,14 +280,16 @@ .util_is-tabletOnly { @include deprecated('selector .util_is-tabletOnly'); - display: none $important; + @if variable-exists(breakpoint-width-medium) { + display: none $important; - @include breakpoint-medium { - display: block $important; - } + @include breakpoint-medium { + display: block $important; + } - @include breakpoint-wide { - display: none $important; + @include breakpoint-wide { + display: none $important; + } } } @@ -304,14 +316,16 @@ .util_is-tabletOnly--inline { @include deprecated('selector .util_is-tabletOnly--inline'); - display: none $important; + @if variable-exists(breakpoint-width-medium) { + display: none $important; - @include breakpoint-medium { - display: inline-block $important; - } + @include breakpoint-medium { + display: inline-block $important; + } - @include breakpoint-wide { - display: none $important; + @include breakpoint-wide { + display: none $important; + } } } @@ -338,10 +352,12 @@ .util_is-tabletAppears { @include deprecated('selector .util_is-tabletAppears'); - display: none $important; + @if variable-exists(breakpoint-width-medium) { + display: none $important; - @include breakpoint-medium { - display: block $important; + @include breakpoint-medium { + display: block $important; + } } } @@ -368,10 +384,12 @@ .util_is-tabletAppears--inline { @include deprecated('selector .util_is-tabletAppears--inline'); - display: none $important; + @if variable-exists(breakpoint-width-medium) { + display: none $important; - @include breakpoint-medium { - display: inline-block $important; + @include breakpoint-medium { + display: inline-block $important; + } } } @@ -386,10 +404,12 @@ .util_is-desktopOnly { @include deprecated('selector .util_is-desktopOnly'); - display: none $important; + @if variable-exists(breakpoint-width-max) { + display: none $important; - @include breakpoint-max { - display: block $important; + @include breakpoint-max { + display: block $important; + } } } @@ -431,10 +451,12 @@ .util_is-desktopOnly--inline { @include deprecated('selector .util_is-desktopOnly--inline'); - display: none $important; + @if variable-exists(breakpoint-width-max) { + display: none $important; - @include breakpoint-max { - display: inline-block $important; + @include breakpoint-max { + display: inline-block $important; + } } } diff --git a/staticDocs/howToUseFonts.md b/staticDocs/howToUseFonts.md deleted file mode 100644 index b28f1e8..0000000 --- a/staticDocs/howToUseFonts.md +++ /dev/null @@ -1,95 +0,0 @@ -# How to use Orion Web Fonts - -All Orion's web fonts are to be used directly from this npm package, not manually copied to the individual project. Copying files directly to an individual project would violate use compliance and the maintainers of this resource will not be responsible for any issues that may arise. - -When using these web fonts, be sure to add this Sass reference of the `@font-face` rules to your `global.scss` file. - -```sass -@import "@alaskaairux/orion-web-core-style-sheets/dist/fonts"; -``` - -## Include in Webpack pipeline - -Webpack offers a few different solutions to make using web fonts easy. - -**NOTE:** Again, please **DO NOT** manually copy these files to your local project and add to version control. It is important that these font files are referenced from the npm package for proper versioning and distribution. - -### This all depends ... - -When using this npm resource, the need to copy the `fonts/` dir to your local `./src` directory all depends on your personal setup. In many cases, the copying of font files to the local `./src` directory will make things easer. In other configurations, (namely the current release of create-react-app), the React setup will be able to read resources directly from the npm and not require these resources to be in the local `./src` dir. - -#### Fonts from CDN - -The issues with font copying and location resource location will be resolved once all the fonts are located in a CDN. Work that is slotted in the near future. - -#### The fonts location Token - -In the fonts Sass file, there is a variable reference defined by this [Design Token](https://github.com/AlaskaAirlines/OrionDesignTokens/blob/master/src/asset/font.json#L6). If at any time you need to over-ride this location Token, usign something like the following will allow you to do so: - -```scss -$asset-font-circular-dir: 'fonts/'; -@import "~@alaskaairux/orion-web-core-style-sheets/dist/fonts"; -``` - -Doing this, the Token value of `../fonts/` will be updated to `fonts/` prior to the loading of the `fonts.scss` file. - -### With full access to Webpack - -If using the `public` directory as a dev/build resource of assets, it is suggested that you use the `copy-webpack-plugin` plugin. - -To install: - -``` -$ npm i -D copy-webpack-plugin -``` - -In `webpack.config.js` file add the following dependency: - -``` -const copyWebpackPlugin = require("copy-webpack-plugin"); -``` - -Within the plugins section of the webpack.config.js file, add the following reference: - -``` -plugins: [ - // This plugin will copy resources from the npm package and use them within - // the accessible asset directories in the app - new copyWebpackPlugin([ - { - from: "./node_modules/@alaskaair/orion-web-core-style-sheets/fonts", - to: "./src/fonts", - toType: "dir" - } - ]), -], -``` - -### Without direct to Webpack - -If the project is using a `build.js` process and have not ejected your Webpack configurations, please add the following to the project's `package.json` file: - -```js -$ npm i copyfiles -D -``` - -``` -"scripts": { - "copyfiles": "copyfiles -f ./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts/*.* ./src/fonts" -} -``` - -## CSS/Sass support - -Using Orion Design System fonts has a dependency on [Orion Design Tokens](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens) and [Sass](https://sass-lang.com). Please see the [instal](https://github.com/AlaskaAirlines/OrionDesignTokens#install) instructions for any questions regarding Orion Design Tokens. - -To install supporting Sass into your project add the following lines to the project's main Sass stylesheet: - -```scss -@import "~@alaskaairux/orion-icons/dist/fonts"; -@import "~@alaskaairux/orion-icons/dist/baseline"; -``` - -## Need more help? - -If you require additional development assistance in order to consume these fonts, please reach out to the `E-comm XD&R` Teams team.