@stackoverflow/stacks 2.1.1 → 2.3.0

package/lib/atomic/misc.less

@@ -1,3 +1,8 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../exports/mixins.less";
+
 //
 //  STACK OVERFLOW
 //  UTILITIES
@@ -78,6 +83,31 @@
     background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
 }
 
+// Focus styles
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+    .focus-styles();
+}
+
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+    .focus-styles(true);
+}
+
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+    .focus-styles(false, true);
+}
+
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+    .focus-styles(true, true);
+}
+
 //  ============================================================================
 //  $  OBJECT-FIT / OBJECT-POSITION
 //  ----------------------------------------------------------------------------

package/lib/atomic/misc.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("atomic: misc", () => {
+    it("should output all atomic css classes", async () => {
+        const css = await renderLess(`
+            @import "./lib/atomic/misc.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/atomic/spacing.less

@@ -1,21 +1,10 @@
-//
-//  STACK OVERFLOW
-//  SPACING
-//
-//  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/
-//
-//  • SPACING UNIT CSS VARIABLES
-//  • MARGIN
-//  • PADDING
-//  • POSITIONING
-//
-//  ============================================================================
-//  $   SPACING UNITS CSS VARIABLES
-//  ----------------------------------------------------------------------------
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/spacing-mixins.less";
+
+// SPACING UNITS CSS CUSTOM PROPERTIES
 body {
     --su-base: 1;
+    --su-static0: 0px;
     --su-static1: 1px;
     --su-static2: 2px;
     --su-static4: 4px;
@@ -30,6 +19,7 @@ body {
     --su-static96: 96px;
     --su-static128: 128px;
 
+    --su0: var(--su-static0);
     // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
     --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
     --su2: calc(var(--su-static2) * var(--su-base));
@@ -46,297 +36,63 @@ body {
     --su128: calc(var(--su-static128) * var(--su-base));
 }
 
-//  ============================================================================
-//  $   MARGIN
-//  ----------------------------------------------------------------------------
-//  $$ 0 margin
-.m0 { margin: 0 !important; }
-.mt0 { margin-top: 0 !important; }
-.mr0 { margin-right: 0 !important; }
-.mb0 { margin-bottom: 0 !important; }
-.ml0 { margin-left: 0 !important; }
-.mx0 { margin-left: 0 !important; margin-right: 0 !important; }
-.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-
-//  $$ auto margin
+// MARGIN
+//  Margin
 .m-auto { margin: auto !important; }
+.generate-spacing('.m', margin, true);
+.generate-spacing('.m', margin, true, percent);
+
+//  Margin top
 .mt-auto { margin-top: auto !important; }
+.generate-spacing('.mt', margin-top, true);
+.generate-spacing('.mt', margin-top, true, percent);
+
+//  Margin right
 .mr-auto { margin-right: auto !important; }
+.generate-spacing('.mr', margin-right, true);
+.generate-spacing('.mr', margin-right, true, percent);
+
+//  Margin bottom
 .mb-auto { margin-bottom: auto !important; }
+.generate-spacing('.mb', margin-bottom, true);
+.generate-spacing('.mb', margin-bottom, true, percent);
+
+//  Margin left
 .ml-auto { margin-left: auto !important; }
+.generate-spacing('.ml', margin-left, true);
+.generate-spacing('.ml', margin-left, true, percent);
+
+//  Margin x-axis, y-axis
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-
-// $$ Margin
-#stacks-internals #build-classes(
-    responsive,
-    '.m',
-    { .template(@value) { margin: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.m0', { margin: 0 !important; });
-
-// $$ Margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mn',
-    { .template(@value) { margin: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Top margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mt',
-    { .template(@value) { margin-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mt0', { margin-top: 0 !important; });
-
-// $$ Top margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mtn',
-    { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Right margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mr',
-    { .template(@value) { margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mr0', { margin-right: 0 !important; });
-
-// $$ Right margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mrn',
-    { .template(@value) { margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Bottom margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mb',
-    { .template(@value) { margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mb0', { margin-bottom: 0 !important; });
-
-// $$ Bottom margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mbn',
-    { .template(@value) { margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Left margin
-#stacks-internals #build-classes(
-    responsive,
-    '.ml',
-    { .template(@value) { margin-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.ml0', { margin-left: 0 !important; });
-
-// $$ Left margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mln',
-    { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mx', { .template(@value) { margin-left: var(~"--su@{value}") !important; margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mxn', { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.myn', { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   PADDING
-//  ----------------------------------------------------------------------------
-
-//  $$ 0 padding
-.p0 { padding: 0 !important; }
-.pt0 { padding-top: 0 !important; }
-.pr0 { padding-right: 0 !important; }
-.pb0 { padding-bottom: 0 !important; }
-.pl0 { padding-left: 0 !important; }
-.px0 { padding-left: 0 !important; padding-right: 0 !important; }
-.py0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-
-#stacks-internals #build-classes(
-    responsive,
-    '.p', { .template(@value) { padding: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.p0', { padding: 0 !important; });
-
-//  $$  Top Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pt', { .template(@value) { padding-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pt0', { padding-top: 0 !important; });
-
-//  $$  Right Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pr', { .template(@value) { padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Bottom Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pb', { .template(@value) { padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pr0', { padding-right: 0 !important; });
-
-//  $$  Left Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pl', { .template(@value) { padding-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pl0', { padding-left: 0 !important; });
-
-//  $$  X-Axis Padding
-#stacks-internals #build-classes(
-    '.px', { .template(@value) { padding-left: var(~"--su@{value}") !important; padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Y-Axis Padding
-#stacks-internals #build-classes(
-    '.py', { .template(@value) { padding-top: var(~"--su@{value}") !important; padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   POSITIONING
-//  ----------------------------------------------------------------------------
-
-//  $$ Top
-#stacks-internals #build-classes(
-    responsive,
-    '.t', { .template(@value) { top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Top 0, percent
-#stacks-internals #build-classes(
-    '.t', { .template(@value) { top: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Top negative
-#stacks-internals #build-classes(
-    responsive,
-    '.tn', { .template(@value) { top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right
-#stacks-internals #build-classes(
-    responsive,
-    '.r', { .template(@value) { right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right 0, percent
-#stacks-internals #build-classes(
-    '.r', { .template(@value) { right: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Right negative
-#stacks-internals #build-classes(
-    responsive,
-    '.rn', { .template(@value) { right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom
-#stacks-internals #build-classes(
-    responsive,
-    '.b', { .template(@value) { bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom 0, percent
-#stacks-internals #build-classes(
-    '.b', { .template(@value) { bottom: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Bottom negative
-#stacks-internals #build-classes(
-    responsive,
-    '.bn', { .template(@value) { bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left
-#stacks-internals #build-classes(
-    responsive,
-    '.l', { .template(@value) { left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left 0, percent
-#stacks-internals #build-classes(
-    '.l', { .template(@value) { left: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Left negative
-#stacks-internals #build-classes(
-    responsive,
-    '.ln', { .template(@value) { left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset
-#stacks-internals #build-classes(
-    responsive,
-    '.i', { .template(@value) { inset: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset 0
-#stacks-internals #build-classes(
-    '.i', { .template(@value) { inset: @value !important; } },
-    0
-);
+.generate-spacing('.mx'; margin-left, margin-right; true);
+.generate-spacing('.my'; margin-top, margin-bottom; true);
+
+// PADDING
+.generate-spacing('.p', padding);
+.generate-spacing('.pt', padding-top);
+.generate-spacing('.pr', padding-right);
+.generate-spacing('.pb', padding-bottom);
+.generate-spacing('.pl', padding-left);
+.generate-spacing('.px'; padding-left, padding-right);
+.generate-spacing('.py'; padding-top, padding-bottom);
+
+// POSITIONING
+// Inset
+.generate-spacing('.i', inset);
+
+//  Top
+.generate-spacing('.t', top, true);
+.generate-spacing('.t', top, true, percent);
+
+// Right
+.generate-spacing('.r', right, true);
+.generate-spacing('.r', right, true, percent);
+
+// Bottom
+.generate-spacing('.b', bottom, true);
+.generate-spacing('.b', bottom, true, percent);
+
+// Left
+.generate-spacing('.l', left, true);
+.generate-spacing('.l', left, true, percent);

package/lib/atomic/spacing.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("atomic: misc", () => {
+    it("should output all atomic css classes", async () => {
+        const css = await renderLess(`
+            @import "./lib/atomic/spacing.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/components/badge/badge.a11y.test.ts

@@ -1,28 +1,38 @@
 import { runA11yTests } from "../../test/a11y-test-utils";
-// import { Icons } from "@stackoverflow/stacks-icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
 
 const variants = {
     blings: ["gold", "silver", "bronze"],
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
-    states: {
-        filled: ["danger", "muted"],
-        other: ["info", "warning"],
-    },
+    filled: ["danger", "muted"],
+    states: ["danger", "muted", "info", "new", "warning"],
     users: ["admin", "moderator", "staff"],
 };
 
 describe("badge", () => {
-    // Award badges (Default/badge counts)
+    // Base badge
+    runA11yTests({
+        baseClass: "s-badge",
+        children: {
+            default: `base badge`,
+        },
+        tag: "span",
+    });
+
+    // Award badges
     variants.blings.map((bling) => {
         runA11yTests({
             baseClass: "s-badge",
             variants: [bling],
             children: {
                 default: `<span class="s-award-bling s-award-bling__${bling}">
-                    Altruist
+                    with bling
                 </span>`,
             },
+            options: {
+                includeNullVariant: false,
+            },
             tag: "span",
         });
     });
@@ -34,22 +44,49 @@ describe("badge", () => {
         children: {
             default: "123",
         },
+        options: {
+            includeNullVariant: false,
+        },
+        tag: "span",
+    });
+
+    // State badges
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.states,
+        children: {
+            default: `badge`,
+        },
+        tag: "span",
+        skippedTestids: ["s-badge-dark-new"],
+    });
+
+    // State badges w/ filled modifier
+    runA11yTests({
+        baseClass: "s-badge",
+        variants: variants.filled,
+        modifiers: {
+            primary: ["filled"],
+        },
+        children: {
+            default: `filled badge`,
+        },
         options: {
             includeNullModifier: false,
         },
         tag: "span",
     });
 
-    // Icon badges
+    // State badges w/ filled modifier and icon
     runA11yTests({
         baseClass: "s-badge",
-        variants: [...variants.states.filled, ...variants.states.other],
+        variants: variants.filled,
         modifiers: {
-            primary: ["icon"],
+            primary: ["filled"],
+            secondary: ["icon"],
         },
         children: {
-            default: "with icon",
-            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
@@ -57,20 +94,18 @@ describe("badge", () => {
         tag: "span",
     });
 
-    // Filled badges
+    // State badges w/ icon
     runA11yTests({
         baseClass: "s-badge",
-        variants: variants.states.filled,
+        variants: variants.states.filter((state) => state !== "new"),
         modifiers: {
             primary: ["icon"],
         },
         children: {
-            default: "filled",
-            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
-            includeNullVariant: false,
         },
         tag: "span",
     });
@@ -83,7 +118,10 @@ describe("badge", () => {
             primary: ["xs", "sm"],
         },
         children: {
-            default: "user",
+            default: "user badge",
+        },
+        options: {
+            includeNullVariant: false,
         },
         tag: "span",
     });
@@ -97,6 +135,9 @@ describe("badge", () => {
         children: {
             default: "size badge",
         },
+        options: {
+            includeNullModifier: false,
+        },
         tag: "span",
     });
 });

package/lib/components/badge/badge.less

@@ -4,10 +4,12 @@
     --_ba-bg: var(--black-150);
     --_ba-fc: var(--black-500);
     --_ba-fs: var(--fs-caption);
+    --_ba-fw: normal;
     --_ba-g: 0.3em;
     --_ba-lh: 2;
     --_ba-px: var(--su6);
     --_ba-py: 0;
+    --_ba-tt: unset;
     --_ba-wmn: 0;
 
     // CONTEXTUAL STYLES
@@ -26,6 +28,10 @@
         &__staff {
             --_ba-bc: currentColor;
         }
+
+        &__new {
+            --_ba-fc: var(--purple-600);
+        }
     });
 
     // MODIFIERS
@@ -208,6 +214,14 @@
         }
     }
 
+    &&__new {
+        --_ba-bc: var(--_ba-bg);
+        --_ba-bg: var(--purple-100);
+        --_ba-fc: var(--purple-400);
+        --_ba-fw: bold;
+        --_ba-tt: uppercase;
+    }
+
     // CHILD ELEMENTS
     &--image, // Included with no base class to account for usage in .s-progress__badge
     & &--image {
@@ -228,14 +242,15 @@
     color: var(--_ba-fc);
     font-size: var(--_ba-fs);
     gap: var(--_ba-g);
+    font-weight: var(--_ba-fw);
     line-height: var(--_ba-lh);
     min-width: var(--_ba-wmn);
     padding: var(--_ba-py) var(--_ba-px);
+    text-transform: var(--_ba-tt);
 
     align-items: center;
     border-radius: var(--br-sm);
     display: inline-flex;
-    font-weight: normal;
     justify-content: center;
     text-decoration: none;
     vertical-align: middle;