feat: add globally compiled scss for storybook only

src/components/docs/examples/_home.scss

@@ -1,3 +1,6 @@
+@use '../../../foundation/typography/typography' as *;
+@use '../../../foundation/utility/utility' as *;
+
 .example {
   display: flex;
   flex-flow: column nowrap;
@@ -81,7 +84,7 @@
     padding: var(--spacing-2xl) var(--spacing-xl);
 
     .watch-h2 {
-      @include heading-large;
+      @include h2;
 
       font-size: var(--font-size-display);
       margin-top: 0;
@@ -102,7 +105,7 @@
     padding: var(--spacing-2xl) var(--spacing-xl);
 
     &-h2 {
-      @include heading-large;
+      @include h2;
 
       font-size: var(--font-size-display);
       max-width: 980px;

src/components/docs/examples/_program.scss

@@ -1,18 +1,21 @@
+@use '../../../foundation/typography/typography' as *;
+@use '../../../foundation/utility/utility' as *;
+
 .example {
   .dynamic {
     background: var(--colors-primary-lighter);
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
 
     .dynamic-h2 {
-      @include heading-large;
+      @include h2;
 
       font-size: var(--font-size-display);
       margin: 0 auto var(--spacing-xl);
     }
 
     .dynamic-h3 {
-      @include heading-medium;
+      @include h3;
 
       font-size: var(--font-size-h2);
       margin: var(--spacing-xl) auto var(--spacing-xl);

src/components/forms/_fieldset.scss

@@ -1,5 +1,3 @@
-@use '../tokens/tokens' as *;
-
 fieldset {
   border: var(--border-sm) solid var(--color-fieldset-border);
   border-radius: var(--radius-fieldset);

src/components/forms/checkbox/_checkbox.scss

@@ -54,7 +54,7 @@
 
 .form-item--checkbox__item {
   input[type='checkbox'] {
-    @include sr-only;
+    @include visually-hidden;
   }
 
   input[type='checkbox']:checked + .form-item--checkbox__item--label::before {

src/components/forms/radio/_radio.scss

@@ -54,7 +54,7 @@
 
 .form-item--radio__item {
   input[type='radio'] {
-    @include sr-only;
+    @include visually-hidden;
   }
 
   input[type='radio']:checked + .form-item--radio__item--label::after {

src/components/forms/textfields/_textfields.scss

@@ -1,4 +1,5 @@
 @use '../../../foundation/breakpoints/breakpoints' as *;
+@use '../../../foundation/utility/utility' as *;
 
 .form-item {
   @include clearfix;
@@ -17,7 +18,7 @@
   font-weight: bold;
   line-height: var(--input-label-lineheight);
 
-  @include xs {
+  @include breakpoint('xsmall') {
     display: block;
     margin-right: 2%;
     padding: 0.6em 0;

src/components/storybook-styles/cl-storybook.scss

@@ -1,5 +1,3 @@
-@import '../tokens/tokens';
-
 @mixin sb-list-reset() {
   padding: 0;
   margin: 0;

src/foundation/breakpoints/_breakpoints.scss

@@ -6,7 +6,7 @@
 
 /////////////////////
 // Global Breakpoints
-@use '../functions/rem-calc' as *;
+@use '../functions/rem-calc';
 
 $xsmall: rem-calc(610);
 $small: rem-calc(767);

src/foundation/colors/cl-colors.scss

@@ -1,6 +1,6 @@
-@use '../functions/color' as *;
-@use '../spacing/spacing' as *;
-@use './color-definitions' as *;
+@use '../functions/color';
+@use '../spacing/spacing';
+@use './color-definitions' as c;
 
 // These styles only affect the colors "Usage" page in the component library
 .sb-show-main {
@@ -24,8 +24,8 @@
     padding: space(1);
     transition: all 0.4s;
     flex: 1 1 20%;
-    min-width: space(1) * 20;
-    min-height: space(1) * 18;
+    min-width: calc(#{space(1)} * 20);
+    min-height: calc(#{space(1)} * 18);
     display: flex;
     flex-flow: column wrap;
     align-items: flex-start;
@@ -102,7 +102,7 @@
 }
 
 // Set color swatch styles based on defined color in $color-palette.
-@each $theme, $palette in $color-palette {
+@each $theme, $palette in c.$color-palette {
   .cl-colors__list--#{$theme} {
     background-color: clr(background);
     padding: 0 0 space(2);

src/foundation/colors/_color-properties.scss → src/foundation/colors/color-properties.scss

@@ -1,12 +1,12 @@
 @use '../functions/color' as *;
-@use './color-definitions' as *;
+@use './color-definitions' as c;
 
 // Create CSS custom properties based on the color-palette map.
 // For each color variable (e.g. `text` and `background`) a css custom
 // property will be created. (e.g. `--c-text:` and `--c-background:`).
 :root {
   // Create custom properties from the default theme.
-  @each $theme, $palette in $color-palette {
+  @each $theme, $palette in c.$color-palette {
     @if $theme == 'default' {
       @each $name, $color in $palette {
         @if type-of($color) == map {
@@ -28,7 +28,7 @@
   // has a data-theme attribute set. This can be set
   // on the body tag to affect the entire page or set
   // on any tag within the page to affect it's children.
-  @each $theme, $palette in $color-palette {
+  @each $theme, $palette in c.$color-palette {
     [data-theme='#{$theme}'] {
       @each $name, $color in $palette {
         @if type-of($color) == map {
@@ -66,7 +66,7 @@
   // their OS or User-Agent setting.
   // See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
   // @media (prefers-color-scheme: dark) {
-  //   @each $theme, $palette in $color-palette {
+  //   @each $theme, $palette in c.$color-palette {
   //     // Change the following theme value to any theme you've defined in
   //     // _01-color-definitions.scss to be the representative dark-mode.
   //     @if ($theme == 'dark') {

src/foundation/functions/_color.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../colors/color-definitions' as *;
+@use '../colors/color-definitions' as c;
 
 // Convert color values to desire format.
 // Returns hex by default.
@@ -46,34 +46,34 @@ $format: 'rgb';
 ) {
   // Coverage: clr(text)
   @if not $variant {
-    @if type-of(map.get(map.get($color-palette, $theme), $name)) == map {
-      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), 'base'), $format)),
+    @if type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map {
+      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
         $alpha #{')'};
     } @else {
-      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get($color-palette, $theme), $name), $format)),
+      @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
         $alpha #{')'};
     }
   }
 
   // Return variant as alpha value.
   // Coverage: clr(text, 0.5), clr(text, 0.5, contrast)
   @if $variant != null and type-of($variant) == number {
-    @if map-has-key($color-palette, $alpha) {
+    @if map-has-key(c.$color-palette, $alpha) {
       // Return color value if it doesn't have variations or assume
       // the base color from multi-dimensional array.
-      @if type-of(map.get(map.get($color-palette, $theme), $name)) == map {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), 'base'), $format)),
+      @if type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map {
+        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
           $variant #{')'};
       } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get($color-palette, $theme), $name), $format)),
+        @return #{$format}#{'a('} var(--c-#{$name}-#{$alpha}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
           $variant #{')'};
       }
     } @else {
-      @if type-of(map.get(map.get($color-palette, $theme), $name)) == map {
-        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), 'base'), $format)),
+      @if type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map {
+        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
           $variant #{')'};
       } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get($color-palette, $theme), $name), $format)),
+        @return #{$format}#{'a('} var(--c-#{$name}, cnvrt-clr(map.get(map.get(c.$color-palette, $theme), $name), $format)),
           $variant #{')'};
       }
     }
@@ -85,52 +85,52 @@ $format: 'rgb';
   @if $variant != null and type-of($variant) == string {
     // Return theme specific color if it's defined.
     // Coverage: clr(text, contrast), clr(text, contrast, 0.5)
-    @if map-has-key($color-palette, $variant) {
-      @if type-of(map.get(map.get($color-palette, $theme), $name)) == map {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get($color-palette, $variant), $name), 'base'), $format)),
+    @if map-has-key(c.$color-palette, $variant) {
+      @if type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map {
+        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $variant), $name), 'base'), $format)),
           $alpha #{')'};
       } @else {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get($color-palette, $variant), $name), $format)),
+        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(c.$color-palette, $variant), $name), $format)),
           $alpha #{')'};
       }
     }
 
     // Coverage: clr(text, inverse), clr(text, inverse, 0.5),
     // clr(text, inverse, contrast), clr(text, inverse, 0.5, contrast)
-    @if type-of(map.get(map.get($color-palette, #{$theme}), #{$name})) == map {
+    @if type-of(map.get(map.get(c.$color-palette, #{$theme}), #{$name})) == map {
       // Coverage: clr(text, inverse),
       // clr(text, inverse, 0.5), clr(text, contrast, 0.5),
       // clr(text, inverse, 0.5, contrast)
       @if type-of($alpha) == number {
         @if (
-          map-has-key($color-palette, $variant) and
-            type-of(map.get(map.get($color-palette, $variant), $name)) ==
+          map-has-key(c.$color-palette, $variant) and
+            type-of(map.get(map.get(c.$color-palette, $variant), $name)) ==
             map
         ) {
-          @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get($color-palette, $variant), $name), 'base'), $format)),
+          @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $variant), $name), 'base'), $format)),
             $alpha #{')'};
         } @else {
           @if (
-            type-of(map.get(map.get($color-palette, $theme), $name)) == map
+            type-of(map.get(map.get(c.$color-palette, $theme), $name)) == map
           ) {
-            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), 'base'), $format)),
+            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), 'base'), $format)),
               $alpha #{')'};
           } @else {
-            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), $variant), $format)),
+            @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), $variant), $format)),
               $alpha #{')'};
           }
         }
       }
 
       // Coverage: clr(text, inverse, contrast)
-      @else if map-has-key($color-palette, #{$alpha}) {
-        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get($color-palette, #{$alpha}), $name), $variant), $format)),
+      @else if map-has-key(c.$color-palette, #{$alpha}) {
+        @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}-#{$alpha}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, #{$alpha}), $name), $variant), $format)),
           1 #{')'};
       } @else {
         @return 'Property #{$alpha} must be either an alpha number or theme name.';
       }
     } @else {
-      @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get($color-palette, $theme), $name), $variant), $format)),
+      @return #{$format}#{'a('} var(--c-#{$name}-#{$variant}, cnvrt-clr(map.get(map.get(map.get(c.$color-palette, $theme), $name), $variant), $format)),
         #{$alpha} #{')'};
     }
   }

src/foundation/motion/cl-motion.scss

@@ -1,4 +1,4 @@
-@use './motion' as *;
+@use './motion';
 
 .motion {
   padding: 0 1rem;

src/foundation/spacing/_spacing.scss

@@ -1,7 +1,5 @@
-@use 'sass:math';
 @use 'sass:map';
-@use '../functions/map' as *;
-@use '../breakpoints/breakpoints' as *;
+@use '../breakpoints/breakpoints' as bp;
 
 $size-spacing-14: 12rem;
 $size-spacing-13: 10rem;
@@ -53,12 +51,12 @@ $spacings: (
     padding-top: space(2);
   }
 
-  @include breakpoint('small') {
-    padding-top: space(2.5) * $multiplier;
+  @include bp.breakpoint('small') {
+    padding-top: #{space(2.5) * $multiplier};
   }
 
-  @include breakpoint('large') {
-    padding-top: space(3) * $multiplier;
+  @include bp.breakpoint('large') {
+    padding-top: #{space(3) * $multiplier};
   }
 }
 
@@ -67,12 +65,12 @@ $spacings: (
     padding-bottom: space(2);
   }
 
-  @include breakpoint('small') {
-    padding-bottom: space(2.5) * $multiplier;
+  @include bp.breakpoint('small') {
+    padding-bottom: #{space(2.5) * $multiplier};
   }
 
-  @include breakpoint('large') {
-    padding-bottom: space(3) * $multiplier;
+  @include bp.breakpoint('large') {
+    padding-bottom: #{space(3) * $multiplier};
   }
 }
 
@@ -83,20 +81,20 @@ $spacings: (
 
 @mixin margin-gap-top($multiplier: 1) {
   & {
-    margin-top: space(2) * $multiplier;
+    margin-top: #{space(2) * $multiplier};
   }
 
-  @include breakpoint('large') {
-    margin-top: space(3) * $multiplier;
+  @include bp.breakpoint('large') {
+    margin-top: #{space(3) * $multiplier};
   }
 }
 
 @mixin margin-gap-bottom($multiplier: 1) {
   &:not(:last-child) {
-    margin-bottom: space(2) * $multiplier;
+    margin-bottom: #{space(2) * $multiplier};
 
-    @include breakpoint('large') {
-      margin-bottom: space(3) * $multiplier;
+    @include bp.breakpoint('large') {
+      margin-bottom: #{space(3) * $multiplier};
     }
   }
 }

src/foundation/typography/_fonts.scss

@@ -1,10 +1,3 @@
-@use '../spacing/spacing' as *;
-@use '../functions/rem-calc' as *;
-@use 'sass:map';
-@use '../functions/color' as *;
-@use '../functions/map' as *;
-@use '../breakpoints/breakpoints' as *;
-
 $font-url: '../../assets/fonts';
 
 /* Inter */