@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.7

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

@@ -0,0 +1,395 @@
+// 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';
+
+$fixed-nav-width: 280px;
+$fixed-anchor-width: 168px;
+
+
+/// This mixin will set the element to be sticky on tablet and larger devices.
+///
+/// @group grid
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+/// @example scss - import mixin file with altered output values prior to import
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+@mixin grid-stickycolumn--md {
+  @media screen and (min-width: $ds-grid-breakpoint-md) {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+    padding-top: var(--ds-grid-margin-xl, $ds-grid-margin-xl);
+    @content;
+  }
+}
+
+/// This mixin will set the element to be sticky on mobile devices.
+///
+/// @group grid
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+/// @example scss - import mixin file with altered output values prior to import
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+@mixin grid-stickycolumn--xs {
+  position: sticky;
+  top: 0;
+  --align-self: stretch;
+  align-self: var(--align-self);
+}
+
+
+/// @group grid
+/// @param {string} $maxWidth [1232px] - Specifies the max-width value of the grid.
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+/// @example scss - import mixin file with altered output values prior to import
+///   $maxWidth: $ds-grid-breakpoint-xl !default;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+@mixin grid_width($maxWidth) {
+  max-width: $maxWidth;
+}
+
+/// @group grid
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+/// @example scss - import mixin file with altered output values prior to import
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+@mixin grid_margin() {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/// @group grid
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+/// @example scss - import mixin file with altered output values prior to import
+/// $padding: $ds-grid-margin-xs !default;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+@mixin grid_padding($padding) {
+  padding-left: $padding;
+  padding-right: $padding;
+}
+
+/// @group grid
+/// @param {string} $gutter [16px] - Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
+/// @example scss - import mixin file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
+/// @example scss - import mixin file with altered output values prior to import
+///   $gutter: $ds-grid-gutter-xs !default;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+@mixin grid_gutter($gutter) {
+  gap: $gutter;
+  @include auro_grid-breakpoint--sm {
+   gap: var(--ds-grid-gutter-sm, $ds-grid-gutter-sm);
+  }
+  @include auro_grid-breakpoint--md {
+    gap: var(--ds-grid-gutter-md, $ds-grid-gutter-md);
+  }
+  @include auro_grid-breakpoint--lg {
+    gap: var(--ds-grid-gutter-lg, $ds-grid-gutter-lg);
+  }
+  @include auro_grid-breakpoint--xl {
+    gap: var(--ds-grid-gutter-xl, $ds-grid-gutter-xl);
+  }
+}
+
+/// Container class
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group container
+/// @example scss - Default selector(s)
+///   .container {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .container {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_container {}
+///
+/// @example html - Example HTML selector use
+///   <element class="container"> ... </element>
+/// @example scss - import file;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+#{$scope}.#{$prefix}container {
+  display: grid;
+  @include grid_margin();
+  @include grid_width($ds-grid-breakpoint-xl);
+}
+
+/// Container class
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group container
+/// @example scss - Default selector(s)
+///   .container {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .container {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_container {}
+///
+/// @example html - Example HTML selector use
+///   <element class="container"> ... </element>
+/// @example scss - import file;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+#{$scope}.#{$prefix}pagecontainer {
+  @include grid_padding($ds-grid-margin-xs);
+  @include grid_margin();
+  @include grid_width($ds-grid-breakpoint-xl);
+
+  @include auro_grid-breakpoint--sm {
+    @include grid_padding($ds-grid-margin-sm);
+  }
+  @include auro_grid-breakpoint--md {
+    @include grid_padding($ds-grid-margin-md);
+  }
+  @include auro_grid-breakpoint--lg {
+    @include grid_padding($ds-grid-margin-lg);
+  }
+  @include auro_grid-breakpoint--xl {
+    @include grid_padding($ds-grid-margin-xl);
+  }
+
+  &.breadcrumbs {
+    margin-block-end: 3.35rem;
+  }
+}
+
+/// pageLayout-2colAnchorNav class
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group page layouts
+/// @example scss - Default selector(s)
+///   .pageLayout-2colAnchorNav {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .pageLayout-2colAnchorNav {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_pageLayout-2colAnchorNav {}
+///
+/// @example html - Example HTML selector use
+///   <element class="pageLayout-2colAnchorNav"> ... </element>
+/// @example scss - import file;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+#{$scope}.#{$prefix}pageLayout-2colAnchorNav {
+  display: grid;
+  @include grid_margin();
+  @include grid_padding($ds-grid-margin-xs);
+  @include grid_width($ds-grid-breakpoint-xl);
+  @include grid_gutter($ds-grid-gutter-xl);
+  grid-template-areas:
+  "breadcrumbs"
+  "anchornav"
+  "main";
+
+  @include auro_grid-breakpoint--sm {
+    @include grid_padding($ds-grid-margin-sm);
+  }
+  @include auro_grid-breakpoint--md {
+    @include grid_padding($ds-grid-margin-md);
+    grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width);
+      grid-template-areas:
+      "breadcrumbs breadcrumbs"
+      "main anchornav";
+  }
+  @include auro_grid-breakpoint--lg {
+    @include grid_padding($ds-grid-margin-lg);
+  }
+  @include auro_grid-breakpoint--xl {
+    @include grid_padding($ds-grid-margin-xl);
+  }
+
+  .breadcrumbs {
+    grid-area: breadcrumbs;
+  }
+  .main {
+    grid-area: main;
+    * {
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
+    }
+  }
+  .anchornav {
+    grid-area: anchornav;
+    @include grid-stickycolumn--md;
+  }
+}
+
+/// pageLayout-2colSideNav class
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group page layouts
+/// @example scss - Default selector(s)
+///   .pageLayout-2colSideNav {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .pageLayout-2colSideNav {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_pageLayout-2colSideNav {}
+///
+/// @example html - Example HTML selector use
+///   <element class="pageLayout-2colSideNav"> ... </element>
+/// @example scss - import file;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+#{$scope}.#{$prefix}pageLayout-2colSideNav {
+  display: grid;
+  @include grid_margin();
+  @include grid_padding(0);
+  @include grid_width($ds-grid-breakpoint-xl);
+  @include grid_gutter($ds-grid-gutter-xl);
+  grid-template-areas:
+  "breadcrumbs"
+  "sidenav"
+  "main";
+
+
+  @include auro_grid-breakpoint--md {
+    @include grid_padding($ds-grid-margin-md);
+    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
+      grid-template-areas:
+      "breadcrumbs breadcrumbs"
+      "sidenav main";
+  }
+
+  @include auro_grid-breakpoint--lg {
+    @include grid_padding($ds-grid-margin-lg);
+  }
+  @include auro_grid-breakpoint--xl {
+    @include grid_padding($ds-grid-margin-xl);
+  }
+
+
+  .breadcrumbs {
+    grid-area: breadcrumbs;
+    @include grid_padding($ds-grid-margin-xs);
+    @include auro_grid-breakpoint--md {
+      @include grid_padding(0);
+    }
+  }
+
+  .sidenav {
+    grid-area: sidenav;
+    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+    @include grid_padding($ds-grid-margin-xs);
+
+    @include auro_grid-breakpoint--md {
+      @include grid_padding(0);
+      background-color: transparent;
+    }
+  }
+
+  .main {
+    grid-area: main;
+    @include grid_padding($ds-grid-margin-xs);
+    @include auro_grid-breakpoint--md {
+    @include grid_padding(0);
+    }
+    * {
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
+    }
+  }
+}
+
+/// pageLayout-3col class
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group page layouts
+/// @example scss - Default selector(s)
+///   .pageLayout-3col {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .pageLayout-3col {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_pageLayout-3col {}
+///
+/// @example html - Example HTML selector use
+///   <element class="pageLayout-3col"> ... </element>
+/// @example scss - import file;
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
+///
+#{$scope}.#{$prefix}pageLayout-3col {
+  display: grid;
+  @include grid_margin();
+  @include grid_padding(0);
+  @include grid_width($ds-grid-breakpoint-xl);
+  @include grid_gutter($ds-grid-gutter-xl);
+  grid-template-areas:
+  "breadcrumbs"
+  "sidenav"
+  "anchornav"
+  "main";
+
+
+  @include auro_grid-breakpoint--md {
+    @include grid_padding($ds-grid-margin-md);
+    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width);
+      grid-template-areas:
+      "breadcrumbs breadcrumbs breadcrumbs"
+      "sidenav main anchornav";
+  }
+
+  @include auro_grid-breakpoint--lg {
+    @include grid_padding($ds-grid-margin-lg);
+  }
+  @include auro_grid-breakpoint--xl {
+    @include grid_padding($ds-grid-margin-xl);
+  }
+
+
+  .breadcrumbs {
+    grid-area: breadcrumbs;
+    @include grid_padding($ds-grid-margin-xs);
+    @include auro_grid-breakpoint--md {
+      @include grid_padding(0);
+    }
+  }
+
+  .sidenav {
+    grid-area: sidenav;
+    z-index: 1;
+    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+    @include grid_padding($ds-grid-margin-xs);
+    @include grid-stickycolumn--xs();
+
+
+    @include auro_grid-breakpoint--md {
+      @include grid_padding(0);
+      background-color: transparent;
+    }
+  }
+
+  .main {
+    grid-area: main;
+    @include grid_padding($ds-grid-margin-xs);
+    @include auro_grid-breakpoint--md {
+    @include grid_padding(0);
+    }
+    * {
+      scroll-margin-top: var(--ds-grid-margin-md, $ds-grid-margin-md);
+    }
+  }
+
+  .anchornav {
+    grid-area: anchornav;
+    @include grid-stickycolumn--md;
+    @include grid_padding($ds-grid-margin-xs);
+
+    @include auro_grid-breakpoint--md {
+      @include grid_padding(0);
+    }
+  }
+}

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

@@ -0,0 +1,255 @@
+// 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';
+
+/// 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.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+///
+#{$scope}.#{$prefix}heading {
+  margin: calc(#{$ds-size-200} + #{$ds-size-150}) 0;
+
+  letter-spacing: var(--ds-text-heading-default-spacing, $ds-text-heading-default-spacing);
+
+  font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
+}
+
+/// 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.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--display {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--display {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--display {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--display"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--display {
+  margin-top: 0;
+
+  font-size: var(--ds-text-heading-display-size-breakpoint-sm, $ds-text-heading-display-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);
+  line-height: var(--ds-text-heading-display-height-breakpoint-sm, $ds-text-heading-display-height-breakpoint-sm);
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    font-size: var(--ds-text-heading-display-size-breakpoint-md, $ds-text-heading-display-size-breakpoint-md);
+    line-height: var(--ds-text-heading-display-height-breakpoint-md, $ds-text-heading-display-height-breakpoint-md);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
+    font-size: var(--ds-text-heading-display-size-breakpoint-lg, $ds-text-heading-display-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-display-height-breakpoint-lg, $ds-text-heading-display-height-breakpoint-lg);
+  }
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--800 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--800 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--800 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--800"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--800 {
+  font-size: var(--ds-text-heading-800-size-breakpoint-sm, $ds-text-heading-800-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-800-weight, $ds-text-heading-800-weight);
+  line-height: var(--ds-text-heading-800-height-breakpoint-sm, $ds-text-heading-800-height-breakpoint-sm);
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    font-size: var(--ds-text-heading-800-size-breakpoint-md, $ds-text-heading-800-size-breakpoint-md);
+    line-height: var(--ds-text-heading-800-height-breakpoint-md, $ds-text-heading-800-height-breakpoint-md);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
+    font-size: var(--ds-text-heading-800-size-breakpoint-lg, $ds-text-heading-800-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-800-height-breakpoint-lg, $ds-text-heading-800-height-breakpoint-lg);
+  }
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--700 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--700 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--700 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--700"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--700 {
+  font-size: var(--ds-text-heading-700-size-breakpoint-sm, $ds-text-heading-700-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-700-weight, $ds-text-heading-700-weight);
+  line-height: var(--ds-text-heading-700-height-breakpoint-sm, $ds-text-heading-700-height-breakpoint-sm);
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    font-size: var(--ds-text-heading-700-size-breakpoint-md, $ds-text-heading-700-size-breakpoint-md);
+    line-height: var(--ds-text-heading-700-height-breakpoint-md, $ds-text-heading-700-height-breakpoint-md);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
+    font-size: var(--ds-text-heading-700-size-breakpoint-lg, $ds-text-heading-700-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-700-height-breakpoint-lg, $ds-text-heading-700-height-breakpoint-lg);
+  }
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--600 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--600 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--600 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--600"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--600 {
+  margin: $ds-size-200 0;
+
+  font-size: var(--ds-text-heading-600-size-breakpoint-sm, $ds-text-heading-600-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-600-weight, $ds-text-heading-600-weight);
+  line-height: var(--ds-text-heading-600-height-breakpoint-sm, $ds-text-heading-600-height-breakpoint-sm);
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    font-size: var(--ds-text-heading-600-size-breakpoint-md, $ds-text-heading-600-size-breakpoint-md);
+    line-height: var(--ds-text-heading-600-height-breakpoint-md, $ds-text-heading-600-height-breakpoint-md);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
+    font-size: var(--ds-text-heading-600-size-breakpoint-lg, $ds-text-heading-600-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-600-height-breakpoint-lg, $ds-text-heading-600-height-breakpoint-lg);
+  }
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--500 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--500 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--500 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--500"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--500 {
+  margin: $ds-size-200 0;
+
+  font-size: var(--ds-text-heading-500-size-breakpoint-sm, $ds-text-heading-500-size-breakpoint-sm);
+  font-weight: var(--ds-text-heading-500-weight, $ds-text-heading-500-weight);
+  line-height: var(--ds-text-heading-500-height-breakpoint-sm, $ds-text-heading-500-height-breakpoint-sm);
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
+    font-size: var(--ds-text-heading-500-size-breakpoint-md, $ds-text-heading-500-size-breakpoint-md);
+    line-height: var(--ds-text-heading-500-height-breakpoint-md, $ds-text-heading-500-height-breakpoint-md);
+  }
+
+  @include auro_breakpoint($min: $ds-grid-breakpoint-lg) {
+    font-size: var(--ds-text-heading-500-size-breakpoint-lg, $ds-text-heading-500-size-breakpoint-lg);
+    line-height: var(--ds-text-heading-500-height-breakpoint-lg, $ds-text-heading-500-height-breakpoint-lg);
+  }
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--400 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--400 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--400 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--400"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--400 {
+  margin: $ds-size-150 0;
+
+  font-size: var(--ds-text-heading-400-size, $ds-text-heading-400-size);
+  font-weight: var(--ds-text-heading-400-weight, $ds-text-heading-400-weight);
+  line-height: var(--ds-text-heading-400-height, $ds-text-heading-400-height);
+}
+
+/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group headings
+/// @example scss - Default selector(s)
+///   .heading--300 {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .heading--300 {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_heading--300 {}
+///
+/// @example html - Example HTML selector use
+///   <element class="heading heading--300"> ... </element>
+/// @example scss - import file
+///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
+#{$scope}.#{$prefix}heading--300 {
+  margin: $ds-size-150 0;
+
+  font-size: var(--ds-text-heading-300-size, $ds-text-heading-300-size);
+  font-weight: var(--ds-text-heading-300-weight, $ds-text-heading-300-weight);
+  line-height: var(--ds-text-heading-300-height, $ds-text-heading-300-height);
+}