feat: remove all deprecated references #169

Changes to be committed: modified: src/_blockquote.scss modified: src/_breakpoints.scss modified: src/_essentials.scss modified: src/componentSupport/_table.scss modified: src/elementDemoStyles/elementDemoStyles.scss modified: src/utilityClasses/_listProperties.scss modified: src/utilityClasses/_responsive.scss
AlaskaAirlines · Sep 25, 2023 · 711d729 · 711d729
1 parent de40186
commit 711d729
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 47 deletions.
diff --git a/src/_blockquote.scss b/src/_blockquote.scss
@@ -24,13 +24,13 @@ $focus: null !default;
 ///
 #{$sym}#{$prefix}#{$scope}blockquote {
   margin-left: 0;
-  border-left: 1px solid var(--ds-color-border-active-default);
-  padding: var(--ds-size-100);
-  padding-left: var(--ds-size-400);
-  color: var(--ds-color-text-secondary-default);
+  border-left: 1px solid var(--ds-color-border-active-default, $ds-color-border-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);
   font-weight: 200;
-  margin-top: var(--ds-size-300);
-  margin-bottom: var(--ds-size-300);
+  margin-top: var(--ds-size-300, $ds-size-300);
+  margin-bottom: var(--ds-size-300, $ds-size-300);
 
   p {
     line-height: 2;
@@ -41,6 +41,6 @@ $focus: null !default;
   }
 
   & + p {
-    margin-bottom: var(--ds-size-400);
+    margin-bottom: var(--ds-size-400, $ds-size-400);
   }
 }
diff --git a/src/_breakpoints.scss b/src/_breakpoints.scss
@@ -20,7 +20,7 @@
 ///       }
 ///   }
 @mixin auro_breakpoint--lg {
-  @media screen and (min-width: $ds-breakpoint-lg) {
+  @media screen and (min-width: $ds-grid-breakpoint-lg) {
     @content;
   }
 }
@@ -38,7 +38,7 @@
 ///       }
 ///   }
 @mixin auro_breakpoint--md {
-  @media screen and (min-width: $ds-breakpoint-md) {
+  @media screen and (min-width: $ds-grid-breakpoint-md) {
     @content;
   }
 }
@@ -55,7 +55,7 @@
 ///       }
 ///   }
 @mixin auro_breakpoint--sm {
-  @media screen and (min-width: $ds-breakpoint-sm) {
+  @media screen and (min-width: $ds-grid-breakpoint-sm) {
     @content;
   }
 }
@@ -151,9 +151,9 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
 /// @group responsive
 /// @example scss - Auro breakpoint tokens
-///   $ds-breakpoint-sm: 660px;
-///   $ds-breakpoint-md: 1024px;
-///   $ds-breakpoint-lg: 1232px;
+///   $ds-grid-breakpoint-sm: 576px;
+///   $ds-grid-breakpoint-md: 768px;
+///   $ds-grid-breakpoint-lg: 1024px;
 /// @param {string} $min [null] - sets `min-width` value
 /// @param {string} $max [null] - sets `max-width` value
 /// @param {list} $polar [null] - sets `min-width` and `max-width` values
@@ -162,31 +162,31 @@
 ///   .foo {
 ///     color: orange;
 ///
-///     @include auro_breakpoint($min: $ds-breakpoint-sm) {
+///     @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
 ///       color: blue;
 ///     }
 ///   }
 /// @example scss - Set breakpoint using `$max` argument
 ///   .foo {
 ///     color: orange;
 ///
-///     @include auro_breakpoint($max: $ds-breakpoint-lg) {
+///     @include auro_breakpoint($max: $ds-grid-breakpoint-lg) {
 ///       color: blue;
 ///     }
 ///   }
 /// @example scss - Set breakpoint using `$polar` argument
 ///   .foo {
 ///     color: orange;
 ///
-///     @include auro_breakpoint($polar: $ds-breakpoint-sm $ds-breakpoint-lg) {
+///     @include auro_breakpoint($polar: $ds-grid-breakpoint-sm $ds-grid-breakpoint-lg) {
 ///       color: blue;
 ///     }
 ///   }
 /// @example scss - Set breakpoint using `$cust` argument. Interpolation `#{}` is required if you intend to use a variable within a string.
 ///   .foo {
 ///     color: orange;
 ///
-///     @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$ds-breakpoint-sm})') {
+///     @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$ds-grid-breakpoint-sm})') {
 ///       color: blue;
 ///     }
 ///   }

diff --git a/src/_essentials.scss b/src/_essentials.scss
@@ -260,8 +260,8 @@ $paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-
 ///
 
 #{$scope}.#{$prefix}fineprint {
-  font-family: var(--ds-font-family-default);
-  font-size: var(--ds-text-body-size-xs);
-  line-height: var(--ds-text-body-height-xs);
-  color: var(--ds-color-text-secondary-default);
+  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);
 }
diff --git a/src/componentSupport/_table.scss b/src/componentSupport/_table.scss
@@ -26,7 +26,7 @@
 
   tr {
     &:nth-child(even) {
-      background-color: $ds-color-base-gray-100;
+      background-color: $ds-color-brand-gray-100;
     }
   }
 
@@ -44,7 +44,7 @@
 
   thead {
     border-collapse: collapse;
-    border-bottom: 1px solid $ds-color-base-gray-200;
+    border-bottom: 1px solid $ds-color-brand-gray-200;
   }
 
   th,

diff --git a/src/elementDemoStyles/elementDemoStyles.scss b/src/elementDemoStyles/elementDemoStyles.scss
@@ -71,7 +71,7 @@ $paragraph: true;
 
 // !important because that libraries that inline CSS SUCK!
 pre  {
-  background: var(--ds-color-base-gray-100) !important;
+  background: var(--ds-color-brand-gray-100) !important;
   border: unset !important;
   margin-bottom: var(--ds-size-300) !important;
   padding-left: var(--ds-size-150) !important;

diff --git a/src/utilityClasses/_listProperties.scss b/src/utilityClasses/_listProperties.scss
@@ -53,7 +53,7 @@
   li::before {
     content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='3' cy='5' r='2.75'></circle></svg>");
     display: inline-block;
-    width: var(--ds-size-300);
+    width: var(--ds-size-300, $ds-size-300);
   }
 }
 
@@ -78,16 +78,16 @@
 #{$scope}.#{$prefix}util_listIndented {
   padding-left: 0;
   list-style: none;
-  margin-left: calc(var(--ds-size-300) + var(--ds-size-50));
+  margin-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50));
   li::before {
     content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='3' cy='5' r='2.75'></circle></svg>");
     display: inline-block;
-    width: var(--ds-size-300);
+    width: var(--ds-size-300, $ds-size-300);
   }
 }
 
 
-/// Utility class to display ordered lists with unindented numbering
+/// Utility class to display ordered lists with non-indented numbering
 ///
 /// [Manage](/#utility-variable-important) `!important` flag.
 ///
@@ -111,13 +111,13 @@
   li::before {
     counter-increment: li-counter;
     content: counter(li-counter) ".";
-    width: var(--ds-size-300);
+    width: var(--ds-size-300, $ds-size-300);
     display: inline-block;
   }
 }
 
 
-/// Utility class to display ordered lists with unindented numbering
+/// Utility class to display ordered lists with non-indented numbering
 ///
 /// [Manage](/#utility-variable-important) `!important` flag.
 ///
@@ -135,13 +135,13 @@
 /// @example scss - import mixin file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
 #{$scope}.#{$prefix}util_listIndentedOrdered {
-  padding-left: calc(var(--ds-size-300) + var(--ds-size-50));
+  padding-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $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);
+    width: var(--ds-size-300, $ds-size-300);
     display: inline-block;
   }
 }
@@ -165,12 +165,12 @@
 /// @example scss - import mixin file
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
 #{$scope}.#{$prefix}util_listAuroIcon {
-  padding-left: calc(var(--ds-size-300) + var(--ds-size-50));
+  padding-left: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50));
   list-style: none;
   li {
-    text-indent: calc(var(--ds-size-200) * -1);
+    text-indent: calc(var(--ds-size-200, $ds-size-200) * -1);
   }
   ds-icon {
-    width: var(--ds-size-200);
+    width: var(--ds-size-200, $ds-size-200);
   }
 }
diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss
@@ -31,8 +31,8 @@
 ///
 
 #{$scope}.#{$prefix}util_is-smOnly {
-  @if variable-exists(ds-breakpoint-sm) {
-    @include auro_breakpoint($min: $ds-breakpoint-sm) {
+  @if variable-exists(ds-grid-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
       display: none $important;
     }
   }
@@ -59,13 +59,13 @@
 ///
 
 #{$scope}.#{$prefix}util_is-mdOnly {
-  @if variable-exists(ds-breakpoint-sm) {
+  @if variable-exists(ds-grid-breakpoint-sm) {
     display: none $important;
 
-    @include auro_breakpoint($min: $ds-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
       display: block $important;
     }
-    @include auro_breakpoint($min: $ds-breakpoint-md) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
       display: none $important;
     }
   }
@@ -91,13 +91,13 @@
 ///   .auro_util_is-mdOnly--inline {}
 ///
 #{$scope}.#{$prefix}util_is-mdOnly--inline {
-  @if variable-exists(ds-breakpoint-sm) {
+  @if variable-exists(ds-grid-breakpoint-sm) {
     display: none $important;
 
-    @include auro_breakpoint($min: $ds-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
       display: inline-block $important;
     }
-    @include auro_breakpoint($min: $ds-breakpoint-md) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
       display: none $important;
     }
   }
@@ -124,10 +124,10 @@
 ///
 
 #{$scope}.#{$prefix}util_is-mdAppears {
-  @if variable-exists(ds-breakpoint-sm) {
+  @if variable-exists(ds-grid-breakpoint-sm) {
     display: none $important;
 
-    @include auro_breakpoint($min: $ds-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
       display: block $important;
     }
   }
@@ -154,10 +154,10 @@
 ///
 
 #{$scope}.#{$prefix}util_is-mdAppears--inline {
-  @if variable-exists(ds-breakpoint-sm) {
+  @if variable-exists(ds-grid-breakpoint-sm) {
     display: none $important;
 
-    @include auro_breakpoint($min: $ds-breakpoint-sm) {
+    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
       display: inline-block $important;
     }
   }