fix: #37 address deprecation issues

AlaskaAirlines · Mar 24, 2020 · 4885844 · 4885844
1 parent c894df7
commit 4885844
Show file tree

Hide file tree

Showing 13 changed files with 549 additions and 496 deletions.
diff --git a/docs/index.html b/docs/index.html
diff --git 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. `<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.
@@ -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
@@ -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
@@ -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
@@ -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);
+  }
 }