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

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_essentials.scss

@@ -0,0 +1,267 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// sass-lint:disable mixins-before-declarations variable-for-property no-vendor-prefixes
+
+@import 'libSupport/manageScope';
+@import 'core';
+
+/// Baseline HTML setting to establish box-model and default font size.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   html {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   html.auro {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_html {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$sym}#{$prefix}html#{$scope} {
+  box-sizing: border-box;
+
+  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+/// Set baseline type settings for `body` element or with the use of the `.baseType` selector.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   body,
+///   .baseType {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro body,
+///   .auro .baseType {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .body,
+///   .auro_baseType {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$scope}#{$sym}#{$prefix}body,
+#{$scope}.#{$prefix}baseType {
+  margin: 0;
+
+  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+
+  font-family: var(--ds-font-family-default, $ds-font-family-default);
+  font-variant-ligatures: no-common-ligatures;
+  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
+  line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
+}
+
+/// Sets standard `margin` for all paragraph style content
+///
+/// Use of nested `.auro_hyperlink` defines underline text-decoration for anchor tags
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   .baseParagraph {}
+///   .baseParagraph .hyperlink {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .baseParagraph {}
+///   .auro .baseParagraph .hyperlink {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_baseParagraph {}
+///   .auro_baseParagraph .auro_hyperlink {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$scope}.#{$prefix}baseParagraph {
+  margin: 0 0 1rem;
+
+  line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
+
+  .#{$prefix}hyperlink {
+    text-decoration: underline;
+  }
+}
+
+/// Baseline hyperlink styles as mirrored in auro-hyperlink web component
+///
+/// Support for: `.hyperlink--nav`, and `.hyperlink--ondark`
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   .hyperlink {}
+///   .hyperlink--inline {}
+///   .hyperlink--darktheme {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .hyperlink {}
+///   .auro .hyperlink--inline {}
+///   .auro .hyperlink--darktheme {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_hyperlink {}
+///   .auro_hyperlink--inline {}
+///   .auro_hyperlink--darktheme {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$scope}.#{$prefix}hyperlink {
+  text-decoration: underline;
+
+  color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+
+  &:visited {
+    color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
+  }
+
+  &--nav {
+    display: block;
+
+    text-decoration: none;
+
+    &:not(.is-touching) {
+      &:hover {
+        text-decoration: underline !important;
+      }
+    }
+  }
+
+  &--ondark {
+    color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
+
+    &:not(.is-touching) {
+      &:hover {
+        color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
+      }
+    }
+
+    &:visited {
+      color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
+    }
+  }
+
+  &:not(.is-touching) {
+    &:hover {
+      text-decoration: none;
+
+      color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
+    }
+  }
+}
+
+/// Default setting for all `<img />` tags so that images will automatically adjust to fit the size of the screen.
+/// If additional properties are needed to shape the img selector, please see the list of Utility classes including the [.util_img-is-responsive](/#utility-responsive-css-#{$scope}.#{$prefix}util_img-is-responsive) selector to scale images with responsive aspects.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   img {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro img {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_img {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$scope}#{$sym}#{$prefix}img {
+  max-width: 100%;
+}
+
+/// Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   small,
+///   .type--small {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro small,
+///   .auro .type--small {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_small,
+///   .auro_type--small {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+#{$scope}#{$sym}#{$prefix}small,
+#{$scope}.#{$prefix}type--small {
+  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);
+}
+
+$paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-in-block */
+/// Set `<p>` element margin standard. This selector is not set by default, set the `$paragraph` flag to `true' prior to import.
+///
+/// Other options are to use the `<small>` element or the `.baseParagraph` selector.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   p {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro p {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_p {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+/// @example scss - import file with `$paragraph` flag set to true
+///   $paragraph: true;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+
+#{$scope}#{$sym}#{$prefix}p {
+  @if $paragraph {
+    margin: 0 0 1rem;
+
+    line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
+  }
+}
+
+/// Defines the font size and color of fine print text
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group essentials
+/// @example scss - Default selector(s)
+///   .fineprint {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .fineprint {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_fineprint {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+///
+
+#{$scope}.#{$prefix}fineprint {
+  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);
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_focus-visible.scss

@@ -0,0 +1,36 @@
+// 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';
+
+$focus: false;
+$focus-visible: false;
+
+// sass-lint:disable no-important
+
+#{$scope} * {
+/// Global setting for the display of [focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) accessibility interaction. [Can I Use](https://caniuse.com/css-focus-visible).
+///
+/// This is a **OPT-IN** feature, support is **NOT** added by default. Users **MUST** subscribe to Sass import described below.
+///
+/// The `focus-visible` Sass file **MUST** be imported **BEFORE** the `essentials` Sass file. Sass load order is **IMPORTANT**. See example below.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` option.
+/// @group Accessibility
+/// @example scss - Default selector(s)
+///   *:focus-visible {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro *:focus-visible {}
+///
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
+///
+/// @example scss - it's important to import focus-visible BEFORE essentials
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
+  &:focus-visible {
+    outline: 1px solid var(--ds-color-border-ui-focus-default, $ds-color-border-ui-focus-default);
+  }
+}

package/components/combobox/node_modules/@aurodesignsystem/webcorestylesheets/src/_fonts.scss

@@ -0,0 +1,50 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// sass-lint:disable no-duplicate-properties
+
+// @font-face is not supported in SassDocs
+
+/// Baseline font-face setting for using web based custom fonts - font weight light
+/// @example scss - import src file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
+
+// Auro rule
+@font-face {
+  font-family: $ds-asset-font-circular-family-name;
+  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
+  font-style: normal;
+
+  font-display: fallback;
+  src: url('https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production') format('woff2'),
+  url('https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production') format('woff');
+}
+
+
+/// Baseline font-face setting for using web based custom fonts - font weight medium
+/// @example scss - import src file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
+@font-face {
+  font-family: $ds-asset-font-circular-family-name;
+  font-weight: var(--ds-text-heading-medium-weight, $ds-text-heading-medium-weight);
+  font-style: normal;
+
+  font-display: fallback;
+  src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),
+  url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
+}
+
+/// Baseline font-face setting for using web based custom fonts - font weight book
+/// @example scss - import src file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";
+@font-face {
+  font-family: $ds-asset-font-circular-family-name;
+  font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
+  font-style: normal;
+
+  font-display: fallback;
+  src: url('https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production') format('woff2'),
+  url('https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production') format('woff');
+}