@stackoverflow/stacks 2.5.3 → 2.5.5

package/lib/components/notice/notice.less

@@ -1,195 +1,195 @@
-/**
- * Generate color variables with a given color name
- *
- * Usage example:
- * .generate-variant-variables(purple, important);
- *
- * @colorName - The name of the color to use to construct variables values
- * @modifier - Modifier name to determine variable values for that modifier
- */
-.generate-variant-variables(@colorName: "", @modifier: "") {
-    & when (@modifier = "") {
-        --_no-bc: ~"var(--@{colorName}-300)";
-        --_no-bg: ~"var(--@{colorName}-100)";
-        --_no-btn-bg-active: ~"var(--@{colorName}-200)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-200)";
-        --_no-btn-fc: ~"var(--@{colorName}-500)";
-        --_no-code-bc: ~"var(--@{colorName}-300)";
-        --_no-code-bg: ~"var(--@{colorName}-200)";
-    }
-
-    & when (@modifier = important) {
-        --_no-bc: var(--_no-bg);
-        --_no-bg: ~"var(--@{colorName}-400)";
-        --_no-fc: var(--white);
-        --_no-btn-bg-active: ~"var(--@{colorName}-500)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-500)";
-        --_no-btn-fc: ~"var(--@{colorName}-100)";
-        --_no-code-bc: ~"var(--@{colorName}-300)";
-        --_no-code-bg: ~"var(--@{colorName}-500)";
-
-        .highcontrast-mode({
-            --_no-bg: ~"var(--@{colorName}-500)";
-        });
-    }
-}
-
-/**
- * Generate styles for a notice-based component
- *
- * Usage example:
- * .construct-notice-component(s-banner);
- *
- * @baseClass - The base class name for the notice component
- */
-.construct-notice-component(@baseClass) {
-    --_no-bc: var(--black-225);
-    --_no-bg: var(--black-100);
-    --_no-fc: var(--black-500);
-    --_no-btn-bg-active: var(--black-250);
-    --_no-btn-bg-focus: var(--black-225);
-    --_no-btn-fc: var(--_no-fc);
-    --_no-code-bc: var(--black-300);
-    --_no-code-bg: var(--black-200);
-    --_no-code-fc: var(--_no-fc);
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        --_no-bc: var(--_no-bg);
-    });
-
-    .highcontrast-mode({
-        &,
-        &.@{baseClass}__danger,
-        &.@{baseClass}__info,
-        &.@{baseClass}__success,
-        &.@{baseClass}__warning {
-            --_no-code-bc: var(--black-400);
-            --_no-code-bg: var(--white);
-            --_no-code-fc: var(--black);
-
-            &.@{baseClass}__important {
-                --_no-code-bc: var(--black-200);
-                --_no-code-bg: var(--black);
-                --_no-code-fc: var(--white);
-            }
-        }
-    });
-
-    // MODIFIERS
-    &__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
-        --_no-bc: var(--_no-bg);
-        --_no-bg: var(--black-500);
-        --_no-fc: var(--white);
-        --_no-btn-bg-focus: var(--black-600);
-        --_no-btn-bg-active: var(--black-600);
-        --_no-btn-fc: var(--_no-fc);
-        --_no-code-bc: var(--black-300);
-        --_no-code-bg: var(--black-600);
-    }
-
-    // VARIANTS
-    &__danger {
-        &:not(.@{baseClass}__important) {
-            .generate-variant-variables(red);
-        }
-
-        &.@{baseClass}__important {
-            .generate-variant-variables(red, important);
-        }
-    }
-
-    &__info {
-        &:not(.@{baseClass}__important) {
-            .generate-variant-variables(theme-secondary);
-        }
-
-        &.@{baseClass}__important {
-            .generate-variant-variables(theme-secondary, important);
-        }
-    }
-
-    &__success {
-        &:not(.@{baseClass}__important) {
-            .generate-variant-variables(green);
-        }
-
-        &.@{baseClass}__important {
-            .generate-variant-variables(green, important);
-        }
-    }
-
-    &__warning {
-        &:not(.@{baseClass}__important) {
-            .generate-variant-variables(yellow);
-            --_no-btn-fc: var(--yellow-600);
-        }
-
-        &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--yellow-400);
-            --_no-fc: var(--black);
-            --_no-btn-fc: var(--_no-fc);
-            --_no-btn-bg-active: var(--yellow-300);
-            --_no-btn-bg-focus: var(--yellow-300);
-            --_no-code-bc: var(--yellow-500);
-            --_no-code-bg: var(--yellow-300);
-
-            .dark-mode({
-                --_no-fc: var(--white);
-                --_no-code-bc: var(--yellow-300);
-                --_no-code-bg: var(--yellow-500);
-            });
-
-            .highcontrast-mode({
-                --_no-bg: var(--yellow-500);
-                --_no-fc: var(--white);
-                --_no-btn-bg-active: transparent;
-                --_no-btn-bg-focus: transparent;
-            });
-        }
-    }
-
-    // CHILD ELEMENTS
-    code {
-        background-color: var(--_no-code-bg);
-        color: var(--_no-code-fc);
-        outline: var(--su-static1) solid var(--_no-code-bc);
-
-        border-radius: var(--br-sm);
-        padding-left: var(--su2);
-        padding-right: var(--su2);
-    }
-
-    & &--btn {
-        // TODO: decouple .s-notice--btn from .s-btn
-        &:active {
-            background-color: var(--_no-btn-bg-active, inherit) !important;
-        }
-
-        &:focus-visible,
-        &:hover,
-        &.focus-inset-bordered {
-            background-color: var(--_no-btn-bg-focus, inherit) !important;
-        }
-
-        color: var(--_no-btn-fc, inherit) !important;
-        padding: var(--su8);
-    }
-
-    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    background: var(--_no-bg);
-    border-color: var(--_no-bc);
-    color: var(--_no-fc);
-
-    border-style: solid;
-    font-size: var(--fs-body1);
-}
-
-.s-notice {
-    .construct-notice-component(s-notice);
-
-    border-radius: var(--br-md);
-    border-width: var(--su-static1);
-    padding: var(--su16);
-}
+/**
+ * Generate color variables with a given color name
+ *
+ * Usage example:
+ * .generate-variant-variables(purple, important);
+ *
+ * @colorName - The name of the color to use to construct variables values
+ * @modifier - Modifier name to determine variable values for that modifier
+ */
+.generate-variant-variables(@colorName: "", @modifier: "") {
+    & when (@modifier = "") {
+        --_no-bc: ~"var(--@{colorName}-300)";
+        --_no-bg: ~"var(--@{colorName}-100)";
+        --_no-btn-bg-active: ~"var(--@{colorName}-200)";
+        --_no-btn-bg-focus: ~"var(--@{colorName}-200)";
+        --_no-btn-fc: ~"var(--@{colorName}-500)";
+        --_no-code-bc: ~"var(--@{colorName}-300)";
+        --_no-code-bg: ~"var(--@{colorName}-200)";
+    }
+
+    & when (@modifier = important) {
+        --_no-bc: var(--_no-bg);
+        --_no-bg: ~"var(--@{colorName}-400)";
+        --_no-fc: var(--white);
+        --_no-btn-bg-active: ~"var(--@{colorName}-500)";
+        --_no-btn-bg-focus: ~"var(--@{colorName}-500)";
+        --_no-btn-fc: ~"var(--@{colorName}-100)";
+        --_no-code-bc: ~"var(--@{colorName}-300)";
+        --_no-code-bg: ~"var(--@{colorName}-500)";
+
+        .highcontrast-mode({
+            --_no-bg: ~"var(--@{colorName}-500)";
+        });
+    }
+}
+
+/**
+ * Generate styles for a notice-based component
+ *
+ * Usage example:
+ * .construct-notice-component(s-banner);
+ *
+ * @baseClass - The base class name for the notice component
+ */
+.construct-notice-component(@baseClass) {
+    --_no-bc: var(--black-225);
+    --_no-bg: var(--black-100);
+    --_no-fc: var(--black-500);
+    --_no-btn-bg-active: var(--black-250);
+    --_no-btn-bg-focus: var(--black-225);
+    --_no-btn-fc: var(--_no-fc);
+    --_no-code-bc: var(--black-300);
+    --_no-code-bg: var(--black-200);
+    --_no-code-fc: var(--_no-fc);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        --_no-bc: var(--_no-bg);
+    });
+
+    .highcontrast-mode({
+        &,
+        &.@{baseClass}__danger,
+        &.@{baseClass}__info,
+        &.@{baseClass}__success,
+        &.@{baseClass}__warning {
+            --_no-code-bc: var(--black-400);
+            --_no-code-bg: var(--white);
+            --_no-code-fc: var(--black);
+
+            &.@{baseClass}__important {
+                --_no-code-bc: var(--black-200);
+                --_no-code-bg: var(--black);
+                --_no-code-fc: var(--white);
+            }
+        }
+    });
+
+    // MODIFIERS
+    &__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
+        --_no-bc: var(--_no-bg);
+        --_no-bg: var(--black-500);
+        --_no-fc: var(--white);
+        --_no-btn-bg-focus: var(--black-600);
+        --_no-btn-bg-active: var(--black-600);
+        --_no-btn-fc: var(--_no-fc);
+        --_no-code-bc: var(--black-300);
+        --_no-code-bg: var(--black-600);
+    }
+
+    // VARIANTS
+    &__danger {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(red);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(red, important);
+        }
+    }
+
+    &__info {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(theme-secondary);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(theme-secondary, important);
+        }
+    }
+
+    &__success {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(green);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(green, important);
+        }
+    }
+
+    &__warning {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(yellow);
+            --_no-btn-fc: var(--yellow-600);
+        }
+
+        &.@{baseClass}__important {
+            --_no-bc: var(--_no-bg);
+            --_no-bg: var(--yellow-400);
+            --_no-fc: var(--black);
+            --_no-btn-fc: var(--_no-fc);
+            --_no-btn-bg-active: var(--yellow-300);
+            --_no-btn-bg-focus: var(--yellow-300);
+            --_no-code-bc: var(--yellow-500);
+            --_no-code-bg: var(--yellow-300);
+
+            .dark-mode({
+                --_no-fc: var(--white);
+                --_no-code-bc: var(--yellow-300);
+                --_no-code-bg: var(--yellow-500);
+            });
+
+            .highcontrast-mode({
+                --_no-bg: var(--yellow-500);
+                --_no-fc: var(--white);
+                --_no-btn-bg-active: transparent;
+                --_no-btn-bg-focus: transparent;
+            });
+        }
+    }
+
+    // CHILD ELEMENTS
+    code {
+        background-color: var(--_no-code-bg);
+        color: var(--_no-code-fc);
+        outline: var(--su-static1) solid var(--_no-code-bc);
+
+        border-radius: var(--br-sm);
+        padding-left: var(--su2);
+        padding-right: var(--su2);
+    }
+
+    & &--btn {
+        // TODO: decouple .s-notice--btn from .s-btn
+        &:active {
+            background-color: var(--_no-btn-bg-active, inherit) !important;
+        }
+
+        &:focus-visible,
+        &:hover,
+        &.focus-inset-bordered {
+            background-color: var(--_no-btn-bg-focus, inherit) !important;
+        }
+
+        color: var(--_no-btn-fc, inherit) !important;
+        padding: var(--su8);
+    }
+
+    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    background: var(--_no-bg);
+    border-color: var(--_no-bc);
+    color: var(--_no-fc);
+
+    border-style: solid;
+    font-size: var(--fs-body1);
+}
+
+.s-notice {
+    .construct-notice-component(s-notice);
+
+    border-radius: var(--br-md);
+    border-width: var(--su-static1);
+    padding: var(--su16);
+}

package/lib/components/page-title/page-title.less

@@ -1,51 +1,51 @@
-.s-page-title {
-    --_pt-ai: flex-end;
-    --_pt-fd: row;
-    --_pt-actions-ml: var(--su8);
-    --_pt-actions-mt: unset;
-    --_pt-breadcrums-mb: var(--su8);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_pt-breadcrums-mb: var(--su2);
-    });
-    #stacks-internals #screen-md({
-        --_pt-ai: flex-start;
-        --_pt-fd: column;
-        --_pt-actions-ml: 0;
-        --_pt-actions-mt: var(--su8);
-    });
-
-    // CHILD ELEMENTS
-    & &--actions {
-        margin-left: var(--_pt-actions-ml);
-        margin-top: var(--_pt-actions-mt);
-        flex-shrink: 0;
-    }
-    & &--description {
-        color: var(--fc-light);
-        font-size: var(--fs-body2);
-        margin-bottom: 0;
-        margin-top: var(--su4);
-    }
-    & &--header {
-        color: var(--fc-dark);
-        font-size: var(--fs-headline1);
-        font-weight: bold;
-        line-height: var(--lh-sm);
-        margin: 0;
-        margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️
-    }
-    .s-breadcrumbs {
-        margin-bottom: var(--_pt-breadcrums-mb);
-    }
-
-    align-items: var(--_pt-ai);
-    flex-direction: var(--_pt-fd);
-
-    border-bottom: var(--su-static1) solid var(--bc-medium);
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: var(--su16);
-    width: 100%;
-}
+.s-page-title {
+    --_pt-ai: flex-end;
+    --_pt-fd: row;
+    --_pt-actions-ml: var(--su8);
+    --_pt-actions-mt: unset;
+    --_pt-breadcrums-mb: var(--su8);
+
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        --_pt-breadcrums-mb: var(--su2);
+    });
+    #stacks-internals #screen-md({
+        --_pt-ai: flex-start;
+        --_pt-fd: column;
+        --_pt-actions-ml: 0;
+        --_pt-actions-mt: var(--su8);
+    });
+
+    // CHILD ELEMENTS
+    & &--actions {
+        margin-left: var(--_pt-actions-ml);
+        margin-top: var(--_pt-actions-mt);
+        flex-shrink: 0;
+    }
+    & &--description {
+        color: var(--fc-light);
+        font-size: var(--fs-body2);
+        margin-bottom: 0;
+        margin-top: var(--su4);
+    }
+    & &--header {
+        color: var(--fc-dark);
+        font-size: var(--fs-headline1);
+        font-weight: bold;
+        line-height: var(--lh-sm);
+        margin: 0;
+        margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️
+    }
+    .s-breadcrumbs {
+        margin-bottom: var(--_pt-breadcrums-mb);
+    }
+
+    align-items: var(--_pt-ai);
+    flex-direction: var(--_pt-fd);
+
+    border-bottom: var(--su-static1) solid var(--bc-medium);
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: var(--su16);
+    width: 100%;
+}

package/lib/components/pagination/pagination.less

@@ -1,65 +1,65 @@
-.s-pagination {
-    & &--item {
-        --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-darker);
-        --_pa-item-fc: var(--fc-medium);
-        --_pa-item-bg-focus: var(--black-400);
-        --_pa-item-fc-focus: var(--white);
-        --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-darker);
-        --_pa-item-fc-hover: var(--fc-dark);
-
-        // CONTEXTUAL STYLES
-        .highcontrast-mode({ text-decoration: none; });
-
-        // MODIFIERS
-        &.is-selected {
-            --_pa-item-bg: var(--theme-primary);
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: var(--white);
-            --_pa-item-bg-focus: var(--theme-primary-400);
-        }
-        &.s-pagination--item__clear {
-            --_pa-item-bg: transparent;
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: inherit;
-        }
-        // override hover styles to match base styles
-        &.is-selected,
-        &.s-pagination--item__clear {
-            --_pa-item-bc-hover: var(--_pa-item-bc);
-            --_pa-item-bg-hover: var(--_pa-item-bg);
-            --_pa-item-fc-hover: var(--_pa-item-fc);
-        }
-
-        // INTERACTION
-        &:hover {
-            background-color: var(--_pa-item-bg-hover);
-            border-color: var(--_pa-item-bc-hover);
-            color: var(--_pa-item-fc-hover);
-        }
-
-        &:focus-visible {
-            .focus-styles(true, true);
-        }
-
-        &:focus-visible,
-        &.focus-inset-bordered {
-            background-color: var(--_pa-item-bg-focus);
-            color: var(--_pa-item-fc-focus);
-        }
-
-        background-color: var(--_pa-item-bg);
-        border: 1px solid var(--_pa-item-bc);
-        color: var(--_pa-item-fc);
-
-        border-radius: var(--br-sm);
-        font-size: var(--fs-body1);
-        line-height: var(--lh-xl);
-        padding: 0 var(--su8);
-    }
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--su4);
-}
+.s-pagination {
+    & &--item {
+        --_pa-item-bg: transparent;
+        --_pa-item-bc: var(--bc-darker);
+        --_pa-item-fc: var(--fc-medium);
+        --_pa-item-bg-focus: var(--black-400);
+        --_pa-item-fc-focus: var(--white);
+        --_pa-item-bg-hover: var(--black-225);
+        --_pa-item-bc-hover: var(--bc-darker);
+        --_pa-item-fc-hover: var(--fc-dark);
+
+        // CONTEXTUAL STYLES
+        .highcontrast-mode({ text-decoration: none; });
+
+        // MODIFIERS
+        &.is-selected {
+            --_pa-item-bg: var(--theme-primary);
+            --_pa-item-bc: transparent;
+            --_pa-item-fc: var(--white);
+            --_pa-item-bg-focus: var(--theme-primary-400);
+        }
+        &.s-pagination--item__clear {
+            --_pa-item-bg: transparent;
+            --_pa-item-bc: transparent;
+            --_pa-item-fc: inherit;
+        }
+        // override hover styles to match base styles
+        &.is-selected,
+        &.s-pagination--item__clear {
+            --_pa-item-bc-hover: var(--_pa-item-bc);
+            --_pa-item-bg-hover: var(--_pa-item-bg);
+            --_pa-item-fc-hover: var(--_pa-item-fc);
+        }
+
+        // INTERACTION
+        &:hover {
+            background-color: var(--_pa-item-bg-hover);
+            border-color: var(--_pa-item-bc-hover);
+            color: var(--_pa-item-fc-hover);
+        }
+
+        &:focus-visible {
+            .focus-styles(true, true);
+        }
+
+        &:focus-visible,
+        &.focus-inset-bordered {
+            background-color: var(--_pa-item-bg-focus);
+            color: var(--_pa-item-fc-focus);
+        }
+
+        background-color: var(--_pa-item-bg);
+        border: 1px solid var(--_pa-item-bc);
+        color: var(--_pa-item-fc);
+
+        border-radius: var(--br-sm);
+        font-size: var(--fs-body1);
+        line-height: var(--lh-xl);
+        padding: 0 var(--su8);
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--su4);
+}