@stackoverflow/stacks 3.0.0-beta.22 → 3.0.0-beta.24

package/lib/components/progress-bar/progress-bar.less

@@ -7,10 +7,10 @@
     --_pr-h: unset;
     --_pr-size: unset;
     --_pr-w: 100%;
-    --_pr-hmn: var(--su-static4);
+    --_pr-hmn: var(--su4);
     --_pr-bar-bar: var(--br-md);
     --_pr-bar-bg: var(--green-400);
-    --_pr-bar-hmn: var(--su-static4);
+    --_pr-bar-hmn: var(--su4);
     --_pr-label-ai: unset;
     --_pr-label-bc: transparent;
     --_pr-label-d: unset;
@@ -69,20 +69,20 @@
 
     &&__circular {
         --_pr-bg: transparent;
-        --_pr-size: var(--su-static32);
+        --_pr-size: var(--su32);
         --s-progress-value: 0;
 
         &.s-progress {
             &__sm {
-                --_pr-size: var(--su-static24);
+                --_pr-size: var(--su24);
             }
 
             &__md {
-                --_pr-size: var(--su-static48);
+                --_pr-size: var(--su48);
             }
 
             &__lg {
-                --_pr-size: var(--su-static64);
+                --_pr-size: var(--su64);
             }
         }
 
@@ -101,7 +101,7 @@
 
                 fill: none;
                 stroke-linecap: round;
-                stroke-width: var(--su-static4);
+                stroke-width: var(--su4);
             }
 
             transform: rotate(270deg); // Make everything originate from the top of the circle
@@ -138,9 +138,9 @@
 
                 background: var(--black-250);
                 border-radius: 0;
-                height: var(--su-static6);
+                height: var(--su6);
                 position: absolute;
-                top: calc(var(--su-static8) + var(--su-static1));
+                top: calc(var(--su8) + var(--su1));
                 z-index: var(--zi-base);
             }
 
@@ -171,7 +171,7 @@
 
                         &--stop {
                             background: var(--theme-secondary);
-                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
+                            box-shadow: 0 0 0 var(--su6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
                         }
                     }
                 }
@@ -208,10 +208,10 @@
                 border-radius: 100%;
                 color: var(--_white-static);
                 display: flex;
-                height: var(--su-static24);
+                height: var(--su24);
                 justify-content: center;
                 position: relative;
-                width: var(--su-static24);
+                width: var(--su24);
                 z-index: var(--zi-selected);
             }
         }
@@ -224,13 +224,13 @@
         min-height: var(--_pr-hmn);
 
         height: 100%;
-        min-width: var(--su-static6);
+        min-width: var(--su6);
         position: relative;
     }
 
     & &--label {
         align-items: var(--_pr-label-ai);
-        border: var(--su-static1) solid var(--_pr-label-bc);
+        border: var(--su1) solid var(--_pr-label-bc);
         display: var(--_pr-label-d);
         gap: var(--_pr-label-g);
         justify-content: var(--_pr-label-jc);
@@ -257,11 +257,11 @@
                 left: var(--sun1);
                 position: absolute;
                 top: 0;
-                width: var(--su-static4);
+                width: var(--su4);
             }
 
             display: block;
-            padding-top: var(--su-static4);
+            padding-top: var(--su4);
             position: relative;
             text-align: center;
         }
@@ -282,7 +282,7 @@
     height: var(--_pr-size, var(--_pr-h));
     min-height: var(--_pr-hmn);
 
-    min-width: var(--su-static6);
+    min-width: var(--su6);
     position: relative;
     width: var(--_pr-size, var(--_pr-w));
 }

package/lib/components/prose/prose.less

@@ -4,7 +4,7 @@
     @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc.
     @pr-spoiler-transition: opacity 0.1s ease-in-out;
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_pr-fs: calc(var(--su-static16) - var(--su-static1)); // Force a font size that doesn’t change at the smallest breakpoint;
+    --_pr-fs: unset;
     --_pr-lh: 1.5;
     --_pr-blockquote-ml: 1em;
     --_pr-blockquote-mt: 0;
@@ -19,7 +19,7 @@
     --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
     --_pr-kbd-bc: var(--black-300);
-    --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
+    --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;
     --_pr-soiler-after-o: unset;
@@ -33,7 +33,7 @@
     .dark-mode({
         --_pr-kbd-bc: transparent;
         --_pr-kbd-btc: var(--black-400);
-        --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
+        --_pr-kbd-bs: 0 var(--su1) var(--su1) hsla(210, 8%, 5%, 0.8);
     });
 
     .highcontrast-mode({
@@ -178,6 +178,28 @@
     }
 
     // Others child elements
+    // Base anchor styles match .s-link; use theme/fallback directly for color so hover/visited apply
+    // (see lib/components/link/link.less)
+    a:not([class]) {
+        &:active,
+        &:hover {
+            color: var(--theme-link-color-hover, var(--blue-400));
+            text-decoration: underline !important;
+        }
+        &:visited {
+            color: var(--theme-link-color-visited, var(--black-400));
+        }
+
+        &:hover:visited {
+            color: var(--theme-link-color-hover, var(--blue-400));
+            text-decoration: underline !important;
+        }
+
+        color: var(--theme-link-color, var(--black-600));
+        cursor: pointer;
+        user-select: auto;
+    }
+
     blockquote,
     q {
         quotes: none;
@@ -247,7 +269,7 @@
         &:before {
             background: var(--_pr-blockquote-before-bg);
 
-            border-radius: var(--su-static8);
+            border-radius: var(--su8);
             bottom: 0;
             content: "";
             display: block;
@@ -299,7 +321,7 @@
         color: var(--_pr-hr-bg); // value set for background-color reused for color intentionally
 
         border: 0;
-        height: var(--su-static1);
+        height: var(--su1);
         margin-bottom: @pr-spacing;
     }
 
@@ -311,7 +333,7 @@
     }
 
     kbd {
-        border: var(--su-static1) solid var(--_pr-kbd-bc);
+        border: var(--su1) solid var(--_pr-kbd-bc);
         border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
         box-shadow: var(--_pr-kbd-bs);
 
@@ -325,7 +347,7 @@
         margin: 0 0.1em;
         overflow-wrap: break-word;
         padding: 0.1em 0.6em;
-        text-shadow: 0 var(--su-static1) 0 var(--white);
+        text-shadow: 0 var(--su1) 0 var(--white);
     }
 
     li {
@@ -342,6 +364,10 @@
     p {
         --_pr-img-mb: 0;
 
+        a {
+            text-decoration: underline;
+        }
+
         margin-bottom: @pr-spacing;
     }
 
@@ -412,7 +438,7 @@
         background: var(--black-150);
         border-radius: var(--br-md);
         color: var(--black-600);
-        min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
+        min-height: var(--su48); // TODO: Let's find a solution that doesn't have a magic number
     }
 
     .youtube-embed { // [2]
@@ -434,7 +460,7 @@
         width: 100%;
     }
 
-    font-size: var(--_pr-fs); // Force a font size that doesn’t change at the smallest breakpoint
+    font-size: var(--_pr-fs);
     line-height: var(--_pr-lh);
 
     overflow-wrap: break-word;

package/lib/components/select/select.less

@@ -5,13 +5,13 @@
     --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
     --_se-select-px: 0.7em;
-    --_se-select-py: var(--su-static8);
+    --_se-select-py: var(--su8);
     --_se-select-fs: var(--fs-body1);
     --_se-select-lh: var(--lh-base);
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
-        --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-fs: var(--su16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
         --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
         --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
     }
@@ -24,36 +24,52 @@
     .validation-states(se-select);
 
     &&__sm {
-        .size-styles(sm; se-select; @styles: fs);
+        --_se-select-fs: var(--fs-caption);
         --_se-select-lh: var(--lh-sm);
-        --_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
+        --_se-select-py: calc(var(--su6) - var(--su1) / 2);
     }
 
     &&__lg {
-        .size-styles(md; se-select; @styles: fs);
+        --_se-select-fs: var(--fs-body3);
         --_se-select-lh: var(--lh-lg);
     }
 
     // CHILD ELEMENTS
     select&,
     & > select {
-        .webkit-autofill();
+        // TODO: Investigate if this is still needed.
+        &:-webkit-autofill {
+            &:focus {
+                border-color: var(--blue-400);
+                // 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-200) inset, 0 0 0 var(--su4) var(--focus-ring);
+            }
+    
+            -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) 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-400);
+            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
+        }
     }
 
     &:after { // Chevron16UpDown icon
         background-color: currentColor;
         content: "";
-        height: var(--su-static16);
+        height: var(--su16);
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
         pointer-events: none;
         position: absolute;
-        right: calc(var(--su32) - var(--su-static24));
+        right: calc(var(--su32) - var(--su24));
         top: 50%;
         transform: translateY(-50%);
-        width: var(--su-static16);
+        width: var(--su16);
         z-index: var(--zi-selected);
     }
 
@@ -98,7 +114,7 @@
         }
 
         background-color: var(--_se-select-bg);
-        border: var(--su-static1) solid var(--_se-select-bc);
+        border: var(--su1) solid var(--_se-select-bc);
         border-radius: var(--_se-select-br);
         color: var(--_se-select-fc);
         font-size: var(--_se-select-fs);

package/lib/components/table/table.less

@@ -1,9 +1,9 @@
 .s-table {
-    @ta-cell-border: var(--su-static1) solid var(--bc-medium);
+    @ta-cell-border: var(--su1) solid var(--bc-medium);
     @ta-columns: (100% / 12);
 
     --_ta-tbody-tbody-bc: var(--bc-medium);
-    --_ta-tbody-tbody-bw: var(--su-static2);
+    --_ta-tbody-tbody-bw: var(--su2);
     --_ta-tbody-tr-even-bg: unset;
     --_ta-td-bbw: 0;
     --_ta-td-bc: var(--bc-medium);
@@ -22,6 +22,13 @@
     --_ta-th-va: middle;
     --_ta-th-w: unset;
 
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
+
     // VARIANTS
     &&__stripes {
         --_ta-tbody-tr-even-bg: var(--black-100);
@@ -68,7 +75,7 @@
         --_ta-td-bc: transparent;
         --_ta-th-bc: transparent;
         --_ta-tbody-tbody-bc: transparent; // [1]
-        --_ta-tbody-tbody-bw: var(--su-static12); // [1]
+        --_ta-tbody-tbody-bw: var(--su12); // [1]
         --_ta-thead-th-bg: transparent;
 
         thead th {
@@ -135,7 +142,7 @@
                 border: 0;
                 cursor: pointer;
                 display: flex;
-                gap: var(--su-static4);
+                gap: var(--su4);
                 font-weight: inherit;
                 margin: calc(var(--_ta-th-p) * -1);
                 padding: var(--_ta-th-p);
@@ -164,6 +171,29 @@
     }
 
     // CHILD ELEMENTS
+    td,
+    tr {
+        a:not([class]) {
+            &:active,
+            &:hover {
+                color: var(--theme-link-color-hover, var(--blue-400));
+                text-decoration: underline;
+            }
+
+            &:visited {
+                color: var(--theme-link-color-visited, var(--black-400));
+            }
+
+            &:hover:visited {
+                color: var(--theme-link-color-hover, var(--blue-400));
+            }
+        }
+
+        color: var(--theme-link-color, var(--black-600));
+        text-decoration: none;
+        cursor: pointer;
+    }
+
     & &--cell {
         .generate-cell-widths-classes(@n, @i: 1) when (@i =< @n) {
             &@{i} { // generates iterated cell classes
@@ -214,14 +244,14 @@
         &.s-table--progress-bar {
             --_ta-td-blw: 0;
             --_ta-td-pl: 0;
-            --_ta-td-w: calc(var(--su-static12) * 10); // 120px
+            --_ta-td-w: calc(var(--su12) * 10); // 120px
         }
 
-        border: var(--su-static1) solid var(--_ta-td-bc);
-        border-bottom-width: var(--_ta-td-bbw, var(--su-static1));
-        border-left-width: var(--_ta-td-blw, var(--su-static1));
-        border-right-width: var(--_ta-td-brw, var(--su-static1));
-        border-top-width: var(--_ta-td-btw, var(--su-static1));
+        border: var(--su1) solid var(--_ta-td-bc);
+        border-bottom-width: var(--_ta-td-bbw, var(--su1));
+        border-left-width: var(--_ta-td-blw, var(--su1));
+        border-right-width: var(--_ta-td-brw, var(--su1));
+        border-top-width: var(--_ta-td-btw, var(--su1));
         font-size: var(--_ta-td-fs);
         font-weight: var(--_ta-td-fw);
         padding: var(--_ta-td-p);
@@ -249,8 +279,8 @@
             --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
         }
 
-        border: var(--su-static1) solid var(--_ta-th-bc);
-        border-width: var(--su-static1) var(--su-static1) var(--_ta-th-bbw);
+        border: var(--su1) solid var(--_ta-th-bc);
+        border-width: var(--su1) var(--su1) var(--_ta-th-bbw);
         font-size: var(--_ta-th-fs);
         padding: var(--_ta-th-p);
         padding-top: var(--_ta-th-pt, var(--_ta-th-p));
@@ -274,8 +304,8 @@
 
     tr {
         &:last-of-type {
-            --_ta-td-bbw: var(--su-static1);
-            --_ta-th-bbw: var(--su-static1);
+            --_ta-td-bbw: var(--su1);
+            --_ta-th-bbw: var(--su1);
         }
 
         &.is-disabled {
@@ -297,5 +327,9 @@
     width: 100%;
 }
 
+// TABLE LAYOUT ATOMIC CLASSES
+.tl-fixed { table-layout: fixed !important; }
+.tl-auto { table-layout: auto !important; }
+
 // [1]  This makes the border transparent, so we need to use whitespace
 //      to achieve the same effect a 2px gray border achieves.

package/lib/components/tag/tag.less

@@ -16,6 +16,11 @@
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
+        &:is(a),
+        a[href] {
+            text-decoration: underline;
+        }
+
         &:not(&__moderator):not(&__required) {
             --_ta-bc: var(--theme-tag-border-color, var(--black-300));
             --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
@@ -49,10 +54,10 @@
             background-color: currentColor;
             content: "";
             display: block;
-            height: calc(var(--su-static16) - var(--su-static2));
+            height: calc(var(--su16) - var(--su2));
             -webkit-mask-size: contain;
             mask-size: contain;            
-            width: calc(var(--su-static16) - var(--su-static2));
+            width: calc(var(--su16) - var(--su2));
         }
     }
 
@@ -150,12 +155,17 @@
             height: 100%;
         }
 
-        max-width: calc(var(--su-static16) + var(--su-static2));
+        max-width: calc(var(--su16) + var(--su2));
         margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
     }
 
     // INTERACTION
-    a& {
+    &:has([href]),
+    a {
+        text-decoration: none;
+    }
+
+    a:not([class]) {
         &:hover,
         &:active {
             background-color: var(--_ta-bg-hover);
@@ -169,7 +179,7 @@
     }
 
     background-color: var(--_ta-bg);
-    border: var(--su-static1) solid var(--_ta-bc);
+    border: var(--su1) solid var(--_ta-bc);
     color: var(--_ta-fc);
     font-size: var(--_ta-fs);
     padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);

package/lib/components/toggle-switch/toggle-switch.less

@@ -97,10 +97,10 @@
         border-radius: 1000px;
         cursor: pointer;
         flex-shrink: 0;
-        height: var(--su-static24);
+        height: var(--su24);
         margin: 0; // guard against production adding 5px of margin to these
         transition: background-position 0.2s ease;
         vertical-align: top;
-        width: calc(var(--su-static48) - var(--su-static4));
+        width: calc(var(--su48) - var(--su4));
     }
 }

package/lib/components/topbar/topbar.less

@@ -1,12 +1,12 @@
 .s-topbar {
     --_tb-bt: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
-    --_tb-h: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    --_tb-h: var(--theme-topbar-height, calc(var(--su48) + var(--su8)));
     // CHILD COMPONENT CUSTOM PROPERTIES
     // Item
     --_tb-item-bg: unset;
     --_tb-item-fc: var(--theme-topbar-item-color, var(--black-400));
     // Item s-activity-indicator
-    --_tb-item-ai-bs: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color, var(--white));
+    --_tb-item-ai-bs: 0 0 0 var(--su2)  var(--theme-topbar-background-color, var(--white));
     --_tb-item-ai-t: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px;
     // Logo
     --_tb-logo-bg: transparent;
@@ -16,9 +16,9 @@
     --_tb-menu-btn-fc-hover: unset;
     --_tb-menu-btn-span-bg: var(--theme-topbar-item-color, var(--black-400));
     --_tb-menu-btn-span-fc: unset;
-    --_tb-menu-btn-span-after-t: calc(var(--su-static6) - var(--su-static1)); // 5px;
+    --_tb-menu-btn-span-after-t: calc(var(--su6) - var(--su1)); // 5px;
     --_tb-menu-btn-span-after-rotate: 0deg;
-    --_tb-menu-btn-span-before-t: calc(var(--su-static1) - var(--su-static6)); // -5px;
+    --_tb-menu-btn-span-before-t: calc(var(--su1) - var(--su6)); // -5px;
     --_tb-menu-btn-span-before-rotate: 0deg;
     // Notice
     --_tb-notice-bg: transparent;
@@ -84,7 +84,7 @@
         --theme-topbar-item-background-hover: var(--black-300);
         --theme-topbar-item-color-current: var(--black);
 
-        border-bottom: var(--su-static1) solid currentColor;
+        border-bottom: var(--su1) solid currentColor;
     });
 
     .highcontrast-dark-mode({
@@ -179,7 +179,7 @@
                 --_tb-item-bg: var(--theme-topbar-item-background-hover, var(--black-200));
                 --_tb-item-fc: var(--theme-topbar-item-color-hover, var(--black-600));
 
-                --_tb-item-ai-bs: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
+                --_tb-item-ai-bs: 0 0 0 var(--su2) var(--theme-topbar-item-background-hover, var(--black-200));
                 --_tb-item-ai-t: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
 
                 outline: none;
@@ -190,7 +190,7 @@
                 top: var(--_tb-item-ai-t);
 
                 position: absolute;
-                right: var(--su-static2);
+                right: var(--su2);
                 transition: top var(--te-smooth) 0.15s;
             }
 
@@ -247,9 +247,9 @@
             &,
             &:after,
             &:before {
-                height: var(--su-static2);
+                height: var(--su2);
                 position: relative;
-                width: var(--su-static16);
+                width: var(--su16);
             }
 
             &:after,
@@ -319,7 +319,7 @@
         }
 
         background-color: var(--_tb-notice-bg);
-        border: var(--su-static1) solid var(--_tb-notice-bg); // notice border-color matches background-color
+        border: var(--su1) solid var(--_tb-notice-bg); // notice border-color matches background-color
         color: var(--_tb-notice-fc);
         text-decoration: var(--_tb-notice-td);
 
@@ -474,7 +474,7 @@
 
     align-items: center;
     background-color: var(--theme-topbar-background-color, var(--white));
-    border-bottom: var(--theme-topbar-bottom-border, var(--su-static1) solid var(--black-225));
+    border-bottom: var(--theme-topbar-bottom-border, var(--su1) solid var(--black-225));
     border-top: var(--_tb-bt);
     display: flex;
     height: var(--_tb-h);
@@ -501,7 +501,7 @@
     #calc-topbar-lightness-increase();
 
     --theme-topbar-background-color: @topbar-actual-background;
-    --theme-topbar-bottom-border: var(--su-static1) solid @topbar-actual-background;
+    --theme-topbar-bottom-border: var(--su1) solid @topbar-actual-background;
 
     // Search input
     --theme-topbar-search-color: lighten(@topbar-actual-background, 80% + @topbar-search-lightness-increase);
@@ -531,7 +531,7 @@
     // TODO extend forced light mode instead of overriding
 
     --theme-topbar-background-color: var(--_white-static);
-    --theme-topbar-bottom-border: var(--su-static1) solid .set-black()[225];
+    --theme-topbar-bottom-border: var(--su1) solid .set-black()[225];
 
     // Search input
     --theme-topbar-search-color: .set-black()[500];

package/lib/components/uploader/uploader.less

@@ -82,7 +82,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        min-height: var(--su-static128);
+        min-height: var(--su128);
         padding: var(--su8) var(--su16);
         position: relative;
         text-align: center;
@@ -114,7 +114,7 @@
 
     & &--preview-thumbnail {
         .highcontrast-mode({
-            border: var(--su-static1) solid var(--black);
+            border: var(--su1) solid var(--black);
         });
 
         &:is(img) {
@@ -129,7 +129,7 @@
         background-color: var(--white);
         border-radius: var(--br-md);
         box-shadow: var(--bs-md);
-        max-height: var(--su-static128);
+        max-height: var(--su128);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -171,9 +171,9 @@
                 }
 
                 color: transparent;
-                height: var(--su-static32);
+                height: var(--su32);
                 flex-shrink: 0;
-                width: var(--su-static32);
+                width: var(--su32);
             }
         }