feat(size): update to use new size tokens #128

FEATURES.md

@@ -91,7 +91,7 @@ See !important [spec](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#u
 Importing this file will auto-generates all available utility selectors. Output can be configured by redefining default values before import. See the default value examples below.
 
 ```sass
-none, xs, md, lg, xl
+none, 100, 200, 300, 400
 ```
 
 See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_layoutPropertiesGenerator)
@@ -101,7 +101,7 @@ See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layou
 Importing this file will return a series of pre-defined inset (_the padding around an element where all sides are equal_) selectors based on the inset spacing design spec.
 
 ```sass
-none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+none, 25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000
 ```
 
 See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_inset)
@@ -113,7 +113,7 @@ Importing this file will return a series of pre-defined selectors based on the s
 ```sass
 [inline, stack] inline - L/R, stack - top/bottom
 
-none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+none, 25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000
 ```
 
 See [API](http://alaskaairlines.github.io/OrionWebCoreStyleSheets/#utility-layout-mixin-auro_spacing)

src/utilityMixins/_insetUtility.scss

@@ -22,22 +22,22 @@ $auro-inset-spacing-options: $auro-spacing-options !default;
 /// **Dependency:** `$npm i alaskaairux/design-tokens`
 /// @group utility-layout
 /// @param {String} $auro-inset-directions ["", --stretch, --squish] defines value
-/// @param {String} $auro-inset-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied
+/// @param {String} $auro-inset-spacing-options [none, 25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000] defines value applied
 /// @example css - Example output css
-///  .util_insetXxxs {
+///  .util_inset25 {
 ///    padding: 0.125rem;
 ///  }
-///  .util_insetXxxs--stretch {
+///  .util_inset25--stretch {
 ///    padding: calc(0.125rem * 2) 0.125rem;
 ///  }
-///  .util_insetXxxs--squish {
+///  .util_inset25--squish {
 ///    padding: 0 0.125rem;
 ///  }
 /// @example scss - import dependencies
 ///   @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
 /// @example scss - import with custom over-rides
-///   $auro-inset-spacing-options: xxxs;
+///   $auro-inset-spacing-options: 25;
 ///   $auro-inset-directions:'';
 ///   @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
@@ -54,7 +54,7 @@ $auro-inset-spacing-options: $auro-spacing-options !default;
       $squish-string: 0 $important;
       $stretch-string: 0 $important;
       $mapValue: 0;
-    } @else if $value == 'xxxs' {
+    } @else if $value == '25' {
       $squish-string: 0 $mapValue $important;
       $stretch-string: calc(#{$mapValue} * 2) $mapValue $important;
     } @else {

src/utilityMixins/_layoutPropertiesGenerator.scss

@@ -14,18 +14,12 @@
 $layout-properties: margin padding !default;
 $layout-extensions: Top Left Bottom Right !default;
 
-// none, xs, md, lg and xl have been deprecated and should be removed with next major release
-// ---------------------------------------------------------------------
 $layout-modifiers: (
   'none': 0,
   '100': $auro-size-100,
   '200': $auro-size-200,
   '300': $auro-size-300,
   '400': $auro-size-400,
-  'xs': $auro-size-100,
-  'md': $auro-size-200,
-  'lg': $auro-size-300,
-  'xl': $auro-size-xl
 ) !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.

src/utilityMixins/_spacingUtility.scss

@@ -23,26 +23,26 @@ $auro-spacing-properties: padding, padding, margin, margin !default;
 /// **Dependency:** `$npm i alaskaairux/design-tokens`
 /// @group utility-layout
 /// @param {string} $auro-spacing-types [inline, stack] inline - L/R, stack - top/bottom
-/// @param {string} $auro-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied
+/// @param {string} $auro-spacing-options [none, 25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000] defines value applied
 /// @example css - Example output css
-///  .util_stackPaddingXxxs--top {
+///  .util_stackPadding25--top {
 ///    padding-top: 0.125rem;
 ///  }
-///  .util_stackPaddingXxxs--bottom {
+///  .util_stackPadding25--bottom {
 ///    padding-bottom: 0.125rem;
 ///  }
-///  .util_stackMarginXxxs--top {
+///  .util_stackMargin25--top {
 ///    margin-top: 0.125rem;
 ///  }
-///  .util_stackMarginXxxs--bottom {
+///  .util_stackMargin25--bottom {
 ///    margin-bottom: 0.125rem;
 ///  }
 /// @example scss - import dependencies
 ///   @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";
 /// @example scss - import with custom over-rides
 ///   $auro-spacing-types: inline;
-///   $auro-spacing-options: xxxs;
+///   $auro-spacing-options: 25;
 ///   @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";
 

src/utilityVariables/_spacing-options.scss

@@ -10,4 +10,4 @@
 /// @example scss - import dependency variable list
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";
 
-$auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl !default;
+$auro-spacing-options: none, 25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;

tests/propGenerator.spec.scss

@@ -5,10 +5,6 @@
 $layout-properties: margin;
 $layout-extensions: Right;
 $layout-modifiers: (
-  "xxxs": $auro-size-xxxs,
-  "xxs": $auro-size-xxs,
-  "xxl": $auro-size-xxl,
-  "xxxl": $auro-size-xxxl,
   "25": $auro-size-25,
   "50": $auro-size-50,
   "600": $auro-size-600,
@@ -24,22 +20,6 @@ $layout-modifiers: (
       }
 
       @include expect {
-        .util_marginRight--xxxs {
-          margin-right: 0.125rem;
-        }
-
-        .util_marginRight--xxs {
-          margin-right: 0.25rem;
-        }
-
-        .util_marginRight--xxl {
-          margin-right: 3rem;
-        }
-
-        .util_marginRight--xxxl {
-          margin-right: 4rem;
-        }
-
         .util_marginRight--25 {
           margin-right: 0.125rem;
         }