@stackoverflow/stacks 1.9.0 → 1.9.2

package/lib/exports/mixins.less

@@ -1,299 +1,299 @@
-/* stylelint-disable indentation */
-//
-//  STACK OVERFLOW
-//  MIXINS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   Clearfix
-//  -----------------------------------------------------------------------------
-.clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after { clear: both; }
-}
-
-//  ============================================================================
-//  --  LIGHTMODE
-//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
-//
-//      .light-mode-forced({ color: var(--black-900) });
-//
-//  ---------------------------------------------------------------------------
-
-.light-mode-forced(@rules) {
-    .theme-light__forced &,
-    body.theme-system .theme-light__forced &,
-    body.theme-dark .theme-light__forced & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  DARKMODE
-//      .darkmode renders a dark mode override behind the
-//      prefers-color-scheme: dark media query and .theme-system. It also
-//      renders the same rules outside of the media query with .theme-dark
-//
-//      Usage example:
-//
-//      .dark-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
-.dark-mode(@rules) {
-    body.theme-system & {
-        @media (prefers-color-scheme: dark) {
-            @rules();
-        }
-    }
-
-    body.theme-dark &,
-    .theme-dark__forced &,
-    body.theme-system .theme-dark__forced & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  HIGHCONTRAST
-//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
-//
-//      Usage example:
-//
-//      .highcontrast-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
-.highcontrast-mode(@rules) {
-    body.theme-highcontrast & {
-        @rules();
-    }
-}
-
-.highcontrast-dark-mode(@rules) {
-    body.theme-highcontrast.theme-system & {
-        @media (prefers-color-scheme: dark) {
-            @rules();
-        }
-    }
-    body.theme-highcontrast.theme-dark & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  FONT FACE
-//      Used to load hosted, custom webfonts. You must provide the font's
-//      full file path in the mixin. All modern browsers the WOFF file format.
-//      Will automatically add various local()s to try using already-installed
-//      fonts before downloading.
-//  ---------------------------------------------------------------------------
-.font-face(@family, @path, @weight, @style) {
-    @font-face {
-        font-family: "@{family}";
-        font-style: @style;
-        font-weight: @weight;
-        & when (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, " Italic");
-        }
-        & when not (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, "");
-        }
-    }
-}
-
-
-//  =============================================================================
-//  --  COLORS
-//      The following mixins let us do color math on the browser. They take a
-//      color prefix, and they expect the different values to be stored in
-//      --{prefix}-h, --{prefix}-s and --{prefix}-l
-//  -----------------------------------------------------------------------------
-
-.load-color-variables(@amount) {
-    @amountDecimal: (@amount / 100);
-    @amountPercentage: @amount * 1%;
-    @complementDecimal: 1 - @amountDecimal;
-    @additionDecimal: 1 + @amountDecimal;
-}
-
-.assemble-color(@color-prefix) {
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 var(~"--@{color-prefix}-l"));
-}
-
-// Increase the lightness of a color in the HSL color space by an absolute amount.
-.native-lighten(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") + @amountPercentage));
-}
-
-// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
-.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
-    @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
-    @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 clamp(10%, calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage), 90%),
-                 clamp(20%, calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage), 100%));
-}
-
-// Decrease the lightness of a color in the HSL color space by an absolute amount.
-.native-darken(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") - @amountPercentage));
-}
-
-// Mix color with white in variable proportion
-.native-tint(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @ramount: 255 * @amountDecimal;
-    @gamount: 255 * @amountDecimal;
-    @bamount: 255 * @amountDecimal;
-    @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Mix color with black in variable proportion
-.native-shade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Set the absolute opacity of a color.
-.native-fade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsla(var(~"--@{color-prefix}-h"),
-                  var(~"--@{color-prefix}-s"),
-                  var(~"--@{color-prefix}-l"),
-                  @amountDecimal);
-}
-
-//  =============================================================================
-//  --  SIZE STYLES
-//      The following mixins let us generate pseudo-private custom properties
-//      for common sizes. They expect a size (@size), a prefix for the custom
-//      property (@prefix), and an array of comma-separates abbreviated styles
-//      (@styles).
-//  -----------------------------------------------------------------------------
-
-.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
-    & when (@index > 0) {
-        @style: extract(@styles, @index);
-
-              // xs
-        & when (@size = xs) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-fine);
-        }
-
-        // sm
-        & when (@size = sm) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-caption);
-        }
-
-        // md
-        & when (@size = md) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
-            }
-        & when (@size = md) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-body3);
-        }
-
-        // lg
-        & when (@size = lg) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
-        }
-        & when (@size = lg) and (@style = fs) {
-                --_@{prefix}-fs: var(--fs-title);
-        }
-
-        // xl
-        & when (@size = xl) and (@style = br) {
-            --_@{prefix}-br: var(--br-md);
-        }
-        & when (@size = xl) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-headline1);
-        }
-
-        .size-styles(@size, @prefix, @styles, @index: @index - 1);
-    }
-}
-
-//  =============================================================================
-//  --  WEBKIT AUTOFILL
-//  -----------------------------------------------------------------------------
-.webkit-autofill() {
-    &:-webkit-autofill {
-        &:focus {
-            border-color: var(--blue-300);
-            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
-            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-
-        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
-        -webkit-text-fill-color: var(--black);
-        border-color: var(--blue-300);
-        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
-    }
-
-    &::-webkit-contacts-auto-fill-button {
-        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
-    }
-
-}
-
-//  ===========================================================================
-//  Internals only beyond this point -- helpers for .font-face()
-//  ---------------------------------------------------------------------------
-
-
-#stacks-internals() {
-
-    // Generate all common variants for local names that this font face may have.
-    // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript
-    // name or the full font name".
-    // For example, given the family "Comic Sans MS", weight 800, italic, we're
-    // trying these local names:
-    //
-    // - Comic Sans MS Extra Bold Italic
-    // - ComicSansMS-ExtraBoldItalic
-    // - Comic Sans MS 800 Italic
-    // - ComicSansMS-800Italic
-    //
-    // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic").
-
-    #font-face-src(@family, @path, @weight, @style-postfix) {
-        @index: round(@weight/100);
-        @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black";
-        @weight-name: extract(@weight-names, @index);
-        #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix);
-    }
-
-    #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) {
-        @family-nospace: replace(@family, " ", "");
-        @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", "");
-        @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", "");
-
-        & when (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff");
-        }
-
-        & when not (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff");
-        }
-    }
-}
+/* stylelint-disable indentation */
+//
+//  STACK OVERFLOW
+//  MIXINS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $   Clearfix
+//  -----------------------------------------------------------------------------
+.clearfix() {
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+    &:after { clear: both; }
+}
+
+//  ============================================================================
+//  --  LIGHTMODE
+//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
+//
+//      .light-mode-forced({ color: var(--black-900) });
+//
+//  ---------------------------------------------------------------------------
+
+.light-mode-forced(@rules) {
+    .theme-light__forced &,
+    body.theme-system .theme-light__forced &,
+    body.theme-dark .theme-light__forced & {
+        @rules();
+    }
+}
+
+//  ===========================================================================
+//  --  DARKMODE
+//      .darkmode renders a dark mode override behind the
+//      prefers-color-scheme: dark media query and .theme-system. It also
+//      renders the same rules outside of the media query with .theme-dark
+//
+//      Usage example:
+//
+//      .dark-mode({ background-color: var(--black-100); });
+//
+//  ---------------------------------------------------------------------------
+
+.dark-mode(@rules) {
+    body.theme-system & {
+        @media (prefers-color-scheme: dark) {
+            @rules();
+        }
+    }
+
+    body.theme-dark &,
+    .theme-dark__forced &,
+    body.theme-system .theme-dark__forced & {
+        @rules();
+    }
+}
+
+//  ===========================================================================
+//  --  HIGHCONTRAST
+//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
+//
+//      Usage example:
+//
+//      .highcontrast-mode({ background-color: var(--black-100); });
+//
+//  ---------------------------------------------------------------------------
+
+.highcontrast-mode(@rules) {
+    body.theme-highcontrast & {
+        @rules();
+    }
+}
+
+.highcontrast-dark-mode(@rules) {
+    body.theme-highcontrast.theme-system & {
+        @media (prefers-color-scheme: dark) {
+            @rules();
+        }
+    }
+    body.theme-highcontrast.theme-dark & {
+        @rules();
+    }
+}
+
+//  ===========================================================================
+//  --  FONT FACE
+//      Used to load hosted, custom webfonts. You must provide the font's
+//      full file path in the mixin. All modern browsers the WOFF file format.
+//      Will automatically add various local()s to try using already-installed
+//      fonts before downloading.
+//  ---------------------------------------------------------------------------
+.font-face(@family, @path, @weight, @style) {
+    @font-face {
+        font-family: "@{family}";
+        font-style: @style;
+        font-weight: @weight;
+        & when (@style=italic) {
+            #stacks-internals #font-face-src(@family, @path, @weight, " Italic");
+        }
+        & when not (@style=italic) {
+            #stacks-internals #font-face-src(@family, @path, @weight, "");
+        }
+    }
+}
+
+
+//  =============================================================================
+//  --  COLORS
+//      The following mixins let us do color math on the browser. They take a
+//      color prefix, and they expect the different values to be stored in
+//      --{prefix}-h, --{prefix}-s and --{prefix}-l
+//  -----------------------------------------------------------------------------
+
+.load-color-variables(@amount) {
+    @amountDecimal: (@amount / 100);
+    @amountPercentage: @amount * 1%;
+    @complementDecimal: 1 - @amountDecimal;
+    @additionDecimal: 1 + @amountDecimal;
+}
+
+.assemble-color(@color-prefix) {
+    @result: hsl(var(~"--@{color-prefix}-h"),
+                 var(~"--@{color-prefix}-s"),
+                 var(~"--@{color-prefix}-l"));
+}
+
+// Increase the lightness of a color in the HSL color space by an absolute amount.
+.native-lighten(@color-prefix, @amount) {
+    .load-color-variables(@amount);
+    @result: hsl(var(~"--@{color-prefix}-h"),
+                 var(~"--@{color-prefix}-s"),
+                 calc(var(~"--@{color-prefix}-l") + @amountPercentage));
+}
+
+// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
+.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
+    @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
+    @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
+    @result: hsl(var(~"--@{color-prefix}-h"),
+                 clamp(10%, calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage), 90%),
+                 clamp(20%, calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage), 100%));
+}
+
+// Decrease the lightness of a color in the HSL color space by an absolute amount.
+.native-darken(@color-prefix, @amount) {
+    .load-color-variables(@amount);
+    @result: hsl(var(~"--@{color-prefix}-h"),
+                 var(~"--@{color-prefix}-s"),
+                 calc(var(~"--@{color-prefix}-l") - @amountPercentage));
+}
+
+// Mix color with white in variable proportion
+.native-tint(@color-prefix, @amount) {
+    .load-color-variables(@amount);
+    @ramount: 255 * @amountDecimal;
+    @gamount: 255 * @amountDecimal;
+    @bamount: 255 * @amountDecimal;
+    @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal),
+                 calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal),
+                 calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal));
+}
+
+// Mix color with black in variable proportion
+.native-shade(@color-prefix, @amount) {
+    .load-color-variables(@amount);
+    @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal),
+                 calc(var(~"--@{color-prefix}-g") * @complementDecimal),
+                 calc(var(~"--@{color-prefix}-b") * @complementDecimal));
+}
+
+// Set the absolute opacity of a color.
+.native-fade(@color-prefix, @amount) {
+    .load-color-variables(@amount);
+    @result: hsla(var(~"--@{color-prefix}-h"),
+                  var(~"--@{color-prefix}-s"),
+                  var(~"--@{color-prefix}-l"),
+                  @amountDecimal);
+}
+
+//  =============================================================================
+//  --  SIZE STYLES
+//      The following mixins let us generate pseudo-private custom properties
+//      for common sizes. They expect a size (@size), a prefix for the custom
+//      property (@prefix), and an array of comma-separates abbreviated styles
+//      (@styles).
+//  -----------------------------------------------------------------------------
+
+.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
+    & when (@index > 0) {
+        @style: extract(@styles, @index);
+
+              // xs
+        & when (@size = xs) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-fine);
+        }
+
+        // sm
+        & when (@size = sm) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-caption);
+        }
+
+        // md
+        & when (@size = md) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            }
+        & when (@size = md) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-body3);
+        }
+
+        // lg
+        & when (@size = lg) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+        }
+        & when (@size = lg) and (@style = fs) {
+                --_@{prefix}-fs: var(--fs-title);
+        }
+
+        // xl
+        & when (@size = xl) and (@style = br) {
+            --_@{prefix}-br: var(--br-md);
+        }
+        & when (@size = xl) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-headline1);
+        }
+
+        .size-styles(@size, @prefix, @styles, @index: @index - 1);
+    }
+}
+
+//  =============================================================================
+//  --  WEBKIT AUTOFILL
+//  -----------------------------------------------------------------------------
+.webkit-autofill() {
+    &:-webkit-autofill {
+        &:focus {
+            border-color: var(--blue-300);
+            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
+            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
+        }
+
+        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
+        -webkit-text-fill-color: var(--black);
+        border-color: var(--blue-300);
+        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
+    }
+
+    &::-webkit-contacts-auto-fill-button {
+        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
+    }
+
+}
+
+//  ===========================================================================
+//  Internals only beyond this point -- helpers for .font-face()
+//  ---------------------------------------------------------------------------
+
+
+#stacks-internals() {
+
+    // Generate all common variants for local names that this font face may have.
+    // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript
+    // name or the full font name".
+    // For example, given the family "Comic Sans MS", weight 800, italic, we're
+    // trying these local names:
+    //
+    // - Comic Sans MS Extra Bold Italic
+    // - ComicSansMS-ExtraBoldItalic
+    // - Comic Sans MS 800 Italic
+    // - ComicSansMS-800Italic
+    //
+    // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic").
+
+    #font-face-src(@family, @path, @weight, @style-postfix) {
+        @index: round(@weight/100);
+        @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black";
+        @weight-name: extract(@weight-names, @index);
+        #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix);
+    }
+
+    #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) {
+        @family-nospace: replace(@family, " ", "");
+        @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", "");
+        @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", "");
+
+        & when (@postfix-name="Regular") {
+            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff");
+        }
+
+        & when not (@postfix-name="Regular") {
+            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff");
+        }
+    }
+}

package/lib/index.ts

@@ -1,32 +1,32 @@
-import "./stacks.less";
-import {
-    BannerController,
-    ExpandableController,
-    ModalController,
-    PopoverController,
-    TableController,
-    TabListController,
-    ToastController,
-    TooltipController,
-    UploaderController,
-} from "./controllers";
-import { application, StacksApplication } from "./stacks";
-
-// register all built-in controllers
-application.register("s-banner", BannerController);
-application.register("s-expandable-control", ExpandableController);
-application.register("s-modal", ModalController);
-application.register("s-toast", ToastController);
-application.register("s-navigation-tablist", TabListController);
-application.register("s-popover", PopoverController);
-application.register("s-table", TableController);
-application.register("s-tooltip", TooltipController);
-application.register("s-uploader", UploaderController);
-
-// finalize the application to guard our controller namespace
-StacksApplication.finalize();
-
-// export all controllers w/ helpers
-export * from "./controllers";
-// export the entirety of the contents of stacks.ts
-export * from "./stacks";
+import "./stacks.less";
+import {
+    BannerController,
+    ExpandableController,
+    ModalController,
+    PopoverController,
+    TableController,
+    TabListController,
+    ToastController,
+    TooltipController,
+    UploaderController,
+} from "./controllers";
+import { application, StacksApplication } from "./stacks";
+
+// register all built-in controllers
+application.register("s-banner", BannerController);
+application.register("s-expandable-control", ExpandableController);
+application.register("s-modal", ModalController);
+application.register("s-toast", ToastController);
+application.register("s-navigation-tablist", TabListController);
+application.register("s-popover", PopoverController);
+application.register("s-table", TableController);
+application.register("s-tooltip", TooltipController);
+application.register("s-uploader", UploaderController);
+
+// finalize the application to guard our controller namespace
+StacksApplication.finalize();
+
+// export all controllers w/ helpers
+export * from "./controllers";
+// export the entirety of the contents of stacks.ts
+export * from "./stacks";