@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.10

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_fontStyles.scss

@@ -0,0 +1,151 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+@import '../libSupport/deprecated';
+@import '../utilityVariables/important';
+@import '../libSupport/manageScope';
+
+/// Utility class for default font-weight
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_fontWeightDefault {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_fontWeightDefault {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+  }
+}
+
+/// Utility class for font-weight `medium`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_fontWeightMedium {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_fontWeightMedium {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+  }
+}
+
+/// Utility class for display font-weight
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_fontWeightDisplay {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_fontWeightDisplay {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+  }
+}
+
+/// Utility class for font-size `lg`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_body--lg {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_body--lg {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+  }
+}
+
+/// Utility class for font-size `sm`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_body--sm {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_body--sm {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+  }
+}
+
+/// Utility class for font-size `xs`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-font
+/// @example scss - Default selector(s)
+///   .util_body--xs {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_body--xs {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_body--xs {}
+///
+/// @example scss - import Sass file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
+
+#{$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;
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_inset.scss

@@ -0,0 +1,188 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+// sass-lint:disable mixins-before-declarations variable-for-property
+
+@import '../utilityVariables/important';
+
+@include deprecated('Inset utility selectors and mixin.');
+
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetNone {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetNone {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetNone {}
+///
+
+#{$scope}.#{$prefix}util_insetNone {
+  padding: 0 $important;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs {
+  padding: 0.125rem;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs--stretch {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs--stretch {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs--stretch {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs--stretch {
+  padding: calc(0.125rem * 2) 0.125rem;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs--squish {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs--squish {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs--squish {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs--squish {
+  padding: 0 0.125rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs {
+  padding: 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs--stretch {
+  padding: calc(0.25rem * 1.5) 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs--squish {
+  padding: calc(0.25rem / 2) 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs {
+  padding: 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs--stretch {
+  padding: calc(0.5rem * 1.5) 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs--squish {
+  padding: calc(0.5rem / 2) 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm {
+  padding: 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm--stretch {
+  padding: calc(0.75rem * 1.5) 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm--squish {
+  padding: calc(0.75rem / 2) 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd {
+  padding: 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd--stretch {
+  padding: calc(1rem * 1.5) 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd--squish {
+  padding: calc(1rem / 2) 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg {
+  padding: 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg--stretch {
+  padding: calc(1.5rem * 1.5) 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg--squish {
+  padding: calc(1.5rem / 2) 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl {
+  padding: 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl--stretch {
+  padding: calc(2rem * 1.5) 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl--squish {
+  padding: calc(2rem / 2) 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl {
+  padding: 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl--stretch {
+  padding: calc(3rem * 1.5) 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl--squish {
+  padding: calc(3rem / 2) 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl {
+  padding: 4rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl--stretch {
+  padding: calc(4rem * 1.5) 4rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl--squish {
+  padding: calc(4rem / 2) 4rem;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_layoutProperties.scss

@@ -0,0 +1,75 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+// Variables are defined by baseline Design Tokens
+
+@import '../libSupport/deprecated';
+@import '../utilityVariables/important';
+@import '../libSupport/manageScope';
+
+// floats
+// ---------------------------------------------------------------------
+
+/// Utility class to set elements to float `left`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-layout
+/// @example scss - Default selector(s)
+///   .util_floatLeft {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_floatLeft {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_floatLeft {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
+#{$scope}.#{$prefix}util_floatLeft {
+  float: left $important;
+}
+
+/// Utility class to set elements to float `right`
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-layout
+/// @example scss - Default selector(s)
+///   .util_floatRight {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_floatRight {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_floatRight {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
+#{$scope}.#{$prefix}util_floatRight {
+  float: right $important;
+}
+
+/// Utility class to center content within a block element
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-layout
+/// @example scss - Default selector(s)
+///   .util_margin--auto {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_margin--auto {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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;
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_listProperties.scss

@@ -0,0 +1,176 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/manageScope';
+@import '../utilityVariables/important';
+
+
+/// Utility class to display unordered lists without bulleting
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listUnstyled {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listUnstyled {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_listUnstyled {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
+#{$scope}.#{$prefix}util_listUnstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+
+/// Utility class to display unordered lists with non-indented bullets
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listNoIndent {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listNoIndent {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_listNoIndent {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
+#{$scope}.#{$prefix}util_listNoIndent {
+  padding-left: 0; // CHANGE: to 0
+  list-style: none;
+  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, $ds-size-300);
+  }
+}
+
+
+/// Utility class to display unordered lists with non-indented bullets
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listIndented {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listIndented {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_listIndented {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
+#{$scope}.#{$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));
+  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, $ds-size-300);
+  }
+}
+
+
+/// Utility class to display ordered lists with non-indented numbering
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listNoIndentOrdered {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listNoIndentOrdered {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_listNoIndentOrdered {}
+///
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
+#{$scope}.#{$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);
+    display: inline-block;
+  }
+}
+
+
+/// Utility class to display ordered lists with non-indented numbering
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listIndentedOrdered {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listIndentedOrdered {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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));
+  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);
+    display: inline-block;
+  }
+}
+
+
+/// Utility class to display unordered lists with auro icons
+///
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-list
+/// @example scss - Default selector(s)
+///   .util_listAuroIcon {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_listAuroIcon {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .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));
+  list-style: none;
+  li {
+    text-indent: calc(var(--ds-size-200, $ds-size-200) * -1);
+  }
+  ds-icon {
+    width: var(--ds-size-200, $ds-size-200);
+  }
+}