@stackoverflow/stacks 1.3.6 → 1.4.0

package/lib/css/components/labels.less

@@ -1,10 +1,10 @@
 .s-label {
-    --_fs: var(--fs-body2);
+    --_la-fs: var(--fs-body2);
 
+    // CONTEXTUAL STYLES
     &[for] {
         cursor: pointer;
     }
-
     fieldset[disabled] &,
     .is-disabled & {
         cursor: not-allowed;
@@ -14,85 +14,85 @@
             opacity: unset;
         }
     }
-
     .is-readonly & {
         cursor: not-allowed;
     }
 
-    .s-description,
-    .s-input-message {
-        font-weight: normal;
-        margin-bottom: 0;
-        margin-top: var(--su4);
-        padding: 0;
-    }
-
+    // VARIANTS
     // Sizes
-    &.s-label__sm {
-        --_fs: var(--fs-caption);
+    &&__sm {
+        --_la-fs: var(--fs-caption);
     }
-    &.s-label__md {
-        --_fs: var(--fs-body3);
+    &&__md {
+        --_la-fs: var(--fs-body3);
     }
-    &.s-label__lg {
-        --_fs: var(--fs-title);
+    &&__lg {
+        --_la-fs: var(--fs-title);
     }
-    &.s-label__xl {
-        --_fs: var(--fs-headline1);
+    &&__xl {
+        --_la-fs: var(--fs-headline1);
     }
 
-    color: var(--fc-dark);
-    font-family: inherit;
-    font-size: var(--_fs);
-    font-weight: 600;
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-}
+    // CHILD ELEMENTS
+    // Label status flag
+    // Is this form item required or optional? Flag the status for users.
+    // Default styling is optional.
+    & &--status {
+        --_la-status-b: none;
+        --_la-status-bg: var(--black-050);
+        --_la-status-fc: var(--fc-medium);
 
-//  $$  LABEL STATUS FLAG
-//  ----------------------------------------------------------------------------
-//      Is this form item required or optional? Flag the status for users.
-//      Default styling is optional.
-.s-label--status {
-    --_b: none;
-    --_bg: var(--black-050);
-    --_fc: var(--fc-medium);
+        .highcontrast-mode({
+            --_la-status-b: var(--su-static1) solid currentColor;
+        });
 
-    .highcontrast-mode({
-        --_b: var(--su-static1) solid currentColor;
-    });
+        // TODO: include child component class (without variant) on selector
+        &__beta {
+            --_la-status-bg: var(--blue-100);
+            --_la-status-fc: var(--blue-700);
+        }
+        &__new {
+            --_la-status-bg: var(--green-100);
+            --_la-status-fc: var(--green-700);
+    
+            .dark-mode({
+                --_la-status-bg: var(--green-050);
+                --_la-status-fc: var(--green-800);
+            });
+        }
+        &__required {
+            --_la-status-bg: var(--red-100);
+            --_la-status-fc: var(--red-700);
+    
+            .dark-mode({
+                --_la-status-bg: var(--red-050);
+                --_la-status-fc: var(--red-800);
+            });
+        }
 
-    &.s-label--status__required {
-        --_bg: var(--red-100);
-        --_fc: var(--red-700);
+        background-color: var(--_la-status-bg);
+        border: var(--_la-status-b);
+        color: var(--_la-status-fc);
 
-        .dark-mode({
-            --_bg: var(--red-050);
-            --_fc: var(--red-800);
-        });
+        border-radius: 1000px;
+        font-size: var(--fs-caption);
+        font-weight: 400;
+        margin-left: var(--su4);
+        padding: var(--su2) var(--su8);
+        vertical-align: text-bottom;
     }
-
-    &.s-label--status__new {
-        --_bg: var(--green-100);
-        --_fc: var(--green-700);
-
-        .dark-mode({
-            --_bg: var(--green-050);
-            --_fc: var(--green-800);
-        });
+    .s-description,
+    .s-input-message {
+        font-weight: normal;
+        margin-bottom: 0;
+        margin-top: var(--su4);
+        padding: 0;
     }
 
-    &.s-label--status__beta {
-        --_bg: var(--blue-100);
-        --_fc: var(--blue-700);
-    }
+    font-size: var(--_la-fs);
 
-    background-color: var(--_bg);
-    border: var(--_b);
-    border-radius: 1000px;
-    color: var(--_fc);
-    font-size: var(--fs-caption);
-    font-weight: 400;
-    margin-left: var(--su4);
-    padding: var(--su2) var(--su8);
-    vertical-align: text-bottom;
-}
+    color: var(--fc-dark);
+    font-family: inherit;
+    font-weight: 600;
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
+}

package/lib/css/components/links.less

@@ -190,7 +190,7 @@ button.s-link {
     @focus-styles();
 
     &.is-selected {
-        --_block-bs: inset var(--_block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
+        --_li-block-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
 
         color: var(--black-800);
         font-weight: bold;
@@ -201,12 +201,12 @@ button.s-link {
         });
 
         &.s-block-link__right {
-            --_block-bs-offset-x: -3px;
+            --_li-block-bs-offset-x: -3px;
         }
 
         &.s-block-link__left,
         &.s-block-link__right {
-            box-shadow: var(--_block-bs);
+            box-shadow: var(--_li-block-bs);
 
             &:focus:not(:focus-visible),
             &:focus-visible {
@@ -214,7 +214,7 @@ button.s-link {
             }
 
             &:focus-visible {
-                box-shadow: var(--_block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
+                box-shadow: var(--_li-block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
             }
         }
     }

package/lib/css/components/menu.less

@@ -1,47 +1,36 @@
-//
-//  STACK OVERFLOW
-//  MENU
-//
-//  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/
-//
-
 .s-menu {
-    .list-reset;
+    --_me-divider-bg: var(--bc-light);
+    --_me-label-btc: var(--bc-light);
+    --_me-label-cursor: pointer;
+
+    .dark-mode({
+        --_me-divider-bg: var(--bc-lightest);
+        --_me-label-btc: var(--bc-lightest);
+    });
+
+    & &--divider {
+        background-color: var(--_me-divider-bg);
+        height: var(--su-static1);
+        margin: var(--su8) 0;
+    }
+    & &--label {
+        &.is-disabled {
+            --_me-label-cursor: not-allowed;
+        }
 
-    .s-menu--title {
+        cursor: var(--_me-label-cursor);
+        border-top: 1px solid var(--_me-label-btc);
+        padding: var(--su12);
+    }
+    & &--title {
+        color: var(--black-600);
+        font-size: var(--fs-fine);
         padding: var(--su8) var(--su12);
         text-transform: uppercase;
-        font-size: var(--fs-fine);
-        color: var(--black-600);
     }
-
-    li + .s-menu--title {
+    & li + &--title {
         margin-top: var(--su12);
     }
 
-    .s-menu--divider {
-        margin: var(--su8) 0;
-        height: 1px;
-        background-color: var(--bc-light);
-
-        .dark-mode({
-            background-color: var(--bc-lightest);
-        });
-    }
-
-    .s-menu--label {
-        cursor: pointer;
-        padding: var(--su12);
-        border-top: 1px solid var(--bc-light);
-
-        .dark-mode({
-            border-top-color: var(--bc-lightest);
-        });
-
-        &.is-disabled {
-            cursor: not-allowed;
-        }
-    }
+    .list-reset;
 }

package/lib/css/components/navigation.less

@@ -1,146 +1,143 @@
-//
-//  STACK OVERFLOW
-//  NAVIGATION
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • MUTED STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .s-navigation {
-    display: flex;
-    margin: calc(var(--su2) * -1);
-    padding: var(--su2) 0;
-    flex-wrap: wrap;
-
-    // If the s-navigation is a list, let's reset all the properties
-    list-style: none;
-
-    .s-navigation--item {
-        display: flex;
-        align-items: center;
-        padding: var(--su6) var(--su12);
-        position: relative;
-
-        // Reset some things for when the navigation item is also a button
-        border: none;
-        font: unset;
-        background: none;
-        box-shadow: none;
-        cursor: pointer;
-        user-select: auto;
-        border-radius: 1000px;
-        margin: var(--su2);
-        white-space: nowrap;
-        color: var(--black-600);
-
-        &:hover,
-        &:active {
-            background: var(--black-075);
-            color: var(--black-600);
+    --_na-fd: row;
+    --_na-fw: wrap;
+    --_na-p: var(--su2) 0;
+    --_na-gap: var(--su4);
+
+    // MODIFIERS
+    &&__scroll {
+        --_na-fw: nowrap;
+        overflow-x: auto;
+        @scrollbar-styles();
+    }
+    // Sizes
+    &&__sm {
+        .s-navigation--item {
+            --_na-item-fs: var(--fs-caption);
+            --_na-item-p: var(--su4) var(--su12);
+        }
+    }
+    // Orientation
+    &&__vertical {
+        --_na-fd: column;
+        --_na-gap: 0;
+        --_na-p: 0;
 
-            .highcontrast-mode({
-                background: var(--black-600);
-                color: var(--black-100);
-            });
+        .s-navigation--item {
+            --_na-item-ws: normal;
         }
+    }
 
-        @focus-styles();
+    // VARIANTS
+    &&__muted {
+        .s-navigation--item {
+            &.is-selected {
+                --_na-item-bg: var(--black-050);
+                --_na-item-fc: var(--black-800);
+                --_na-item-bg-hover: var(--_na-item-bg);
+                --_na-item-fc-hover: var(--_na-item-fc);
+
+                .highcontrast-mode({
+                    --_na-item-bg: var(--black-800);
+                    --_na-item-fc: var(--black-050);
+                });
+            }
+        }
+    }
 
+    // CHILD ELEMENTS
+    & &--item {
+        --_na-item-bg: none;
+        --_na-item-fc: var(--black-600);
+        --_na-item-fs: unset;
+        --_na-item-p: var(--su6) var(--su12);
+        --_na-item-py: var(--su12);
+        --_na-item-ws: nowrap;
+        // hover
+        --_na-item-bg-hover: var(--black-075);
+        --_na-item-fc-hover: var(--_na-item-fc);
+
+        .highcontrast-mode({
+            --_na-item-bg-hover: var(--black-600);
+            --_na-item-fc-hover: var(--black-100);
+        });
+
+        // STATES
+        // Selected
         &.is-selected {
-            background: var(--theme-primary-color);
-            color: var(--white);
-
-            &:hover,
-            &:active {
-                background: var(--theme-primary-600);
-                color: var(--white);
-            }
+            --_na-item-bg: var(--theme-primary-color);
+            --_na-item-fc: var(--white);
+            --_na-item-bg-hover: var(--theme-primary-600);
 
-            .highcontrast-mode({ text-decoration: none; });
+            .highcontrast-mode({
+                text-decoration: none;
+            });
         }
 
-        &.s-navigation--item__dropdown {
-            padding-right: 2em;
-
+        // MODIFIERS
+        // TODO: include child component class (without variant) on selector
+        &__dropdown {
             &:after {
-                content: "";
-                position: absolute;
-                z-index: var(--zi-active);
-                top: calc(50% - 2px);
-                right: 0.9em;
                 border-style: solid;
-                border-width: var(--su-static4);
-                border-top-width: var(--su-static4);
-                border-bottom-width: 0;
+                border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
                 border-color: currentColor transparent;
+                content: "";
                 pointer-events: none;
+                position: absolute;
+                right: 0.9em;
+                top: calc(50% - 2px);
+                z-index: var(--zi-active);
             }
+
+            padding-right: 2em;
         }
-    }
 
-    &.s-navigation__scroll {
-        overflow-x: auto;
-        flex-wrap: nowrap;
+        // Interaction states
+        &:hover,
+        &:active {
+            background-color: var(--_na-item-bg-hover);
+            color: var(--_na-item-fc-hover);
+        }
 
-        @scrollbar-styles();
-    }
+        @focus-styles();
 
-    &.s-navigation__vertical {
-        flex-direction: column;
-        padding: 0;
-        margin: 0;
+        background-color: var(--_na-item-bg);
+        color: var(--_na-item-fc);
+        font: unset; // Needs to come before font-size for cascade
+        font-size: var(--_na-item-fs);
+        padding: var(--_na-item-p);
+        white-space: var(--_na-item-ws);
 
-        .s-navigation--item {
-            margin: 0;
-            white-space: normal;
-        }
+        align-items: center;
+        border: none; // Reset some things for when the navigation item is also a button
+        border-radius: 1000px;
+        box-shadow: none;
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        user-select: auto;
     }
-
-    .s-navigation--title {
-        font-size: var(--fs-fine);
-        font-weight: bold;
-        margin-top: var(--su16);
-        padding: var(--su6) var(--su12);
-        text-transform: uppercase;
+    & &--title {
+        --_na-title-mt: var(--su16);
 
         &:first-child {
-            margin-top: 0;
+            --_na-title-mt: 0;
         }
-    }
 
-    //  ============================================================================
-    //  $   MUTED STYLE
-    //  ----------------------------------------------------------------------------
-    &.s-navigation__muted .s-navigation--item {
-        &.is-selected {
-            background: var(--black-050);
-            color: var(--black-800);
+        margin-top: var(--_na-title-mt);
 
-            .highcontrast-mode({
-                background: var(--black-800);
-                color: var(--black-050);
-            });
-        }
+        font-size: var(--fs-fine);
+        font-weight: bold;
+        padding: var(--su6) var(--su12);
+        text-transform: uppercase;
     }
 
-    //  ============================================================================
-    //  $   SMALL SIZE
-    //  ----------------------------------------------------------------------------
-    &.s-navigation__sm {
-        .s-navigation--item {
-            padding: var(--su4) var(--su12);
-            font-size: var(--fs-caption);
+    flex-direction: var(--_na-fd);
+    flex-wrap: var(--_na-fw);
+    gap: var(--_na-gap);
+    padding: var(--_na-p);
 
-            &.s-navigation--item__dropdown {
-                padding-right: 2em;
-            }
-        }
-    }
+    display: flex;
+    list-style: none; // If the s-navigation is a list, let's reset all the properties
+    margin: 0;
 }