@stackoverflow/stacks 1.4.2 → 1.6.0

package/lib/css/components/code-blocks.less

@@ -1,130 +1,103 @@
-//
-//  STACK OVERFLOW
-//  CODE BLOCKS
-//
-//  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-code-block {
+    --_cb-line-numbers-bg: var(--black-050);
 
-pre.s-code-block {
-    font-size: var(--fs-body1);
-    font-family: var(--ff-mono);
-    line-height: var(--lh-md);
-    color: var(--highlight-color);
-    background-color: var(--highlight-bg);
-    border-radius: var(--br-md);
-    margin: 0;
-    padding: var(--su12);
-    overflow: auto;
-
-    @scrollbar-styles();
-}
-
-code[class*="language-"],
-pre.s-code-block > code {
-    font-family: inherit;
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        --_cb-line-numbers-bg: var(--black-025);
+    });
 
-    .hljs-subst {
+    // CHILD COMPONENTS
+    code[class*="language-"] &,
+    pre& > code {
+        .hljs-built_in,
+        .hljs-literal,
+        .hljs-title {
+            color: var(--highlight-literal);
+        }
+        .hljs-bullet,
+        .hljs-code {
+            color: var(--highlight-punctuation);
+        }
+        .hljs-doctag,
+        .hljs-keyword,
+        .hljs-meta-keyword,
+        .hljs-meta,
+        .hljs-section,
+        .hljs-selector-class,
+        .hljs-selector-pseudo,
+        .hljs-selector-tag {
+            color: var(--highlight-keyword);
+        }
+        .hljs-name,
+        .hljs-number,
+        .hljs-quote,
+        .hljs-selector-id,
+        .hljs-template-tag,
+        .hljs-type {
+            color: var(--highlight-namespace);
+        }
+        .hljs-link,
+        .hljs-meta-string,
+        .hljs-regexp,
+        .hljs-selector-attr,
+        .hljs-string,
+        .hljs-symbol,
+        .hljs-template-variable,
+        .hljs-variable {
+            color: var(--highlight-variable);
+        }
+        .hljs-addition {
+            color: var(--highlight-addition);
+        }
+        .hljs-attr {
+            color: var(--highlight-attribute);
+        }
+        .hljs-attribute {
+            color: var(--highlight-symbol);
+        }
+        .hljs-comment {
+            color: var(--highlight-comment);
+        }
+        .hljs-deletion {
+            color: var(--highlight-deletion);
+        }
+        .hljs-emphasis {
+            font-style: italic;
+        }
+        .hljs-strong {
+            font-weight: bold;
+        }
+        .hljs-subst {
+            color: var(--highlight-color);
+        }
+
+        font-family: inherit;
+    }
+    pre& {
+        .s-code-block--line-numbers {
+            background-color: var(--_cb-line-numbers-bg);
+
+            border-color: var(--bc-medium);
+            border-style: solid;
+            border-width: 0 var(--su-static1) 0 0;
+            color: var(--black-300);
+            float: left;
+            margin: calc(var(--su12) * -1);
+            margin-right: var(--su12);
+            padding: var(--su12);
+            padding-right: var(--su6);
+            text-align: right;
+        }
+
+        @scrollbar-styles();
+        background-color: var(--highlight-bg);
+        border-radius: var(--br-md);
         color: var(--highlight-color);
+        font-family: var(--ff-mono);
+        font-size: var(--fs-body1);
+        line-height: var(--lh-md);
+        margin: 0;
+        overflow: auto;
+        padding: var(--su12);
     }
-
-    .hljs-comment {
-        color: var(--highlight-comment);
-    }
-
-    .hljs-keyword,
-    .hljs-selector-tag,
-    .hljs-meta-keyword,
-    .hljs-doctag,
-    .hljs-section {
-        color: var(--highlight-keyword);
-    }
-
-    .hljs-attr {
-        color: var(--highlight-attribute);
-    }
-
-    .hljs-attribute {
-        color: var(--highlight-symbol);
-    }
-
-    .hljs-name,
-    .hljs-type,
-    .hljs-number,
-    .hljs-selector-id,
-    .hljs-quote,
-    .hljs-template-tag {
-        color: var(--highlight-namespace);
-    }
-
-    .hljs-selector-class {
-        color: var(--highlight-keyword);
-    }
-
-    .hljs-string,
-    .hljs-regexp,
-    .hljs-symbol,
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-link,
-    .hljs-selector-attr {
-        color: var(--highlight-variable);
-    }
-
-    .hljs-meta,
-    .hljs-selector-pseudo {
-        color: var(--highlight-keyword);
-    }
-
-    .hljs-built_in,
-    .hljs-title,
-    .hljs-literal {
-        color: var(--highlight-literal);
-    }
-
-    .hljs-bullet,
-    .hljs-code {
-        color: var(--highlight-punctuation);
-    }
-
-    .hljs-meta-string {
-        color: var(--highlight-variable);
-    }
-
-    .hljs-deletion {
-        color: var(--highlight-deletion);
-    }
-
-    .hljs-addition {
-        color: var(--highlight-addition);
-    }
-
-    .hljs-emphasis {
-        font-style: italic;
-    }
-
-    .hljs-strong {
-        font-weight: bold;
-    }
-}
-
-pre.s-code-block .s-code-block--line-numbers {
-    float: left;
-    color: var(--black-300);
-    text-align: right;
-    border-width: 0;
-    border-style: solid;
-    border-color: var(--bc-medium);
-    border-right-width: 1px;
-    margin: calc(var(--su12) * -1);
-    margin-right: var(--su12);
-    padding: var(--su12);
-    padding-right: var(--su6);
-    background-color: var(--black-050);
-
-    .dark-mode({
-        background-color: var(--black-025);
-    });
 }
-

package/lib/css/components/expandable.less

@@ -29,76 +29,86 @@
 // (no longer visible) element itself to remain at the top, thereby forcing the excess pixels to be added
 // above the top, not below the bottom. And because extending content above the document top will not do
 // anything to the document height, there is no jumping during the transition.
-
-@stacks-internals-s-expandable-transition-duration: 100ms;
+// see custom property "--_ex-transition-duration"
 
 // Per the answer referenced above, the component can only guarantee smooth transitions if above a minimum
 // height and can only guarantee the element will be hidden is below a maximimum height.
 // The minimum height has been set at 10px because that's below the height of a single line of text in an s-description.
-@stacks-internal-s-expandable-min-expected-height: 10px;
-@stacks-internal-s-expandable-max-expected-height: 1500px;
+// see custom properties "--_ex-min-expected-height" and "--_ex-content-mb"
 
 .s-expandable {
-    display: flex;
-    -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    align-items: flex-start; // see comment above
-    transition: clip-path 0s @stacks-internals-s-expandable-transition-duration, -webkit-clip-path 0s @stacks-internals-s-expandable-transition-duration;
+    // CONSTANTS
+    --_ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
+    --_ex-min-expected-height: 10px;
+    --_ex-transition-duration: 100ms;
+    // VARIABLES
+    --_ex-after-h: 10px;
+    --_ex-after-hmx: 0;
+    --_ex-after-transition:
+        height var(--_ex-transition-duration) linear,
+        max-height 0s var(--_ex-transition-duration) linear;
+    --_ex-content-hmx: 1000000px;
+    --_ex-content-mb: 0;
+    --_ex-content-o: unset;
+    --_ex-content-transform: unset;
+    --_ex-content-transition:
+        margin-bottom var(--_ex-transition-duration) cubic-bezier(0, 0, 0, 1),
+        transform var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
+        opacity var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1);
 
+    &:not(.is-expanded) {
+        --_ex-after-h: 0;
+        --_ex-after-hmx: var(--_ex-min-expected-height);
+        --_ex-after-transition: height var(--_ex-min-expected-height) linear;
+        --_ex-content-hmx: 0;
+        --_ex-content-mb: -1500px;
+        --_ex-content-o: 0;
+        --_ex-content-transform: scaleY(0);
+        --_ex-content-transition:
+            margin-bottom var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
+            visibility 0s var(--_ex-transition-duration),
+            max-height 0s var(--_ex-transition-duration),
+            transform var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1),
+            opacity var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1);
+
+        & .s-expandable--content {
+            @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
+                --_ex-content-o: 1;
+                --_ex-content-transform: none;
+            }
+        }
+
+        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+        overflow: hidden;
+        transition: none;
+    }
     &:after {
-        content: '';
+        height: var(--_ex-after-h);
+        max-height: var(--_ex-after-hmx);
+        transition: var(--_ex-after-transition);
+
         -ms-flex-preferred-size: 0;
+        content: '';
         flex-basis: 0;
-        height: @stacks-internal-s-expandable-min-expected-height;
-        max-height: 0;
-        transition:
-            height @stacks-internals-s-expandable-transition-duration linear,
-            max-height 0s @stacks-internals-s-expandable-transition-duration linear;
     }
-}
-
-.s-expandable--content {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-height: 1000000px;
-    margin-bottom: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    transition:
-        margin-bottom @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 0, 0, 1),
-        transform @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1),
-        opacity @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1);
-}
+    & &--content {
+        max-height: var(--_ex-content-hmx);
+        margin-bottom: var(--_ex-content-mb);
+        opacity: var(--_ex-content-o);
+        -webkit-transform: var(--_ex-content-transform);
+        transform: var(--_ex-content-transform);
 
-.s-expandable:not(.is-expanded) {
-    overflow: hidden;
-    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-    transition: none;
-
-    .s-expandable--content {
-        visibility: hidden;
-        max-height: 0;
-        margin-bottom: -@stacks-internal-s-expandable-max-expected-height;
-        opacity: 0;
-        -webkit-transform: scaleY(0);
-        transform: scaleY(0);
-        transition:
-            margin-bottom @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1),
-            visibility 0s @stacks-internals-s-expandable-transition-duration,
-            max-height 0s @stacks-internals-s-expandable-transition-duration,
-            transform @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 1, 1, 1),
-            opacity @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 1, 1, 1);
-        @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
-            opacity: 1;
-            -webkit-transform: none;
-            transform: none;
-        }
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        -webkit-transform-origin: 0 0;
+        transform-origin: 0 0;
+        transition: var(--_ex-content-transition);
     }
 
-    &:after {
-        height: 0;
-        max-height: @stacks-internal-s-expandable-min-expected-height;
-        transition: height @stacks-internals-s-expandable-transition-duration linear;
-    }
-}
+    align-items: flex-start; // see comment above
+    display: flex;
+    -webkit-clip-path: var(--_ex-clip-path);
+    clip-path: var(--_ex-clip-path);
+    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
+  }

package/lib/css/components/inputs.less

@@ -1,27 +1,3 @@
-//
-//  STACK OVERFLOW
-//  INPUTS
-//
-//  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
-//  • Variables
-//  • Inputs
-//    - Base Style (Input / Textarea)
-//    - Textarea Styles
-//    - Fieldset Resets
-//  • Text Styles
-//  • Connected Input Fills
-//  • Select Menus
-//  • Checkbox & Radio
-//  • Input States
-//  • Validation States
-//  • Input Sizes
-//  ============================================================================
-//  $  VARIABLES & MIXINS
-//  ----------------------------------------------------------------------------
 @input-padding: 0.6em 0.7em;
 
 @autofill: {
@@ -268,6 +244,44 @@ fieldset {
 //  ============================================================================
 //  $   CHECKBOXES & RADIOS
 //  ----------------------------------------------------------------------------
+// TODO would _love_ to use .s-check instead, with no class on the input itself
+.s-check-control {
+    display: flex;
+    gap: var(--su8);
+    align-items: center;
+
+    [disabled] + .s-label {
+        &:extend(.is-disabled .s-label);
+    }
+
+    .s-label {
+        font-weight: normal;
+    }
+}
+
+.s-check-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--su8);
+
+    &&__horizontal {
+        flex-direction: row;
+    }
+
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    // manually align the checkboxes and radios to the top of the group
+    .s-check-control {
+        align-items: flex-start;
+    }
+    .s-checkbox, .s-radio {
+        margin-top: calc(var(--su2) + var(--su1)); // 3px
+    }
+}
+
 .s-checkbox,
 .s-radio {
     //  [1]   Check to see if we can use custom styles, if so reset the defaults

package/lib/css/components/link-previews.less

@@ -1,136 +1,124 @@
-//
-//  STACK OVERFLOW
-//  LINK UNFURLS
-//
-//  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/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .s-link-preview {
-    border: 1px solid var(--bc-medium);
-    border-radius: var(--br-sm);
-    text-align: left;
-    box-shadow: var(--bs-sm);
-}
-
-.s-link-preview--header {
-    display: flex;
-    background: var(--black-025);
-    border-top-left-radius: var(--br-sm);
-    border-top-right-radius: var(--br-sm);
-    border-bottom: 1px solid var(--bc-medium);
-    padding: var(--su12) var(--su8);
-}
-
-.s-link-preview--icon {
-    margin-right: var(--su8);
-    color: var(--black-800); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
-}
-
-.s-link-preview--title {
-    font-size: var(--fs-body3);
-    font-weight: bold;
-    color: var(--black-900);
-}
-
-a.s-link-preview--title {
-    text-decoration: none;
-    color: var(--theme-link-color);
-    cursor: pointer;
-
-    &.s-link__visited:visited {
-        color: var(--theme-link-color);
-        text-decoration: none;
-
-        .highcontrast-mode({ text-decoration: underline; });
-    }
-
-    &:hover,
-    &.s-link__visited:hover,
-    &:active,
-    &.s-link__visited:active {
-        color: var(--theme-link-color-hover);
-        text-decoration: none;
-
-        .highcontrast-mode({ text-decoration: underline; });
-    }
-}
-
-.s-link-preview--details {
-    font-size: var(--fs-caption);
-    color: var(--black-500);
-    margin-top: var(--su2);
+    --_lp-details-mt: var(--su2);
+    --_lp-footer-fd: unset;
+    --_lp-misc-pl: var(--su4);
+    --_lp-misc-pt: unset;
 
+    // CONTEXTUAL STYLES
     #stacks-internals #screen-sm({
-        margin-top: var(--su4);
+        --_lp-details-mt: var(--su4);
+        --_lp-footer-fd: column;
+        --_lp-misc-pl: 0;
+        --_lp-misc-pt: var(--su2);
     });
-}
 
-.s-link-preview--body {
-    padding: var(--su12);
-    font-size: var(--fs-body2);
-
-    *:last-child {
-        margin-bottom: 0;
+    // CHILD ELEMENTS
+    & &--details,
+    & &--footer {
+        a {
+            &:visited {
+                color: var(--black-700);
+            }
+            &:hover,
+            &:active,
+            &:focus {
+                color: var(--black-600);
+            }
+
+            color: var(--black-500);
+            cursor: pointer;
+            text-decoration: none;
+        }
     }
-}
+    & &--body {
+        *:last-child {
+            margin-bottom: 0;
+        }
 
-.s-link-preview--code {
-    pre {
-        border-radius: 0 !important;
-        margin: 0;
-        max-height: 400px;
+        font-size: var(--fs-body2);
+        padding: var(--su12);
     }
-}
-
-.s-link-preview--footer {
-    display: flex;
-    justify-content: space-between;
-    background: var(--black-025);
-    border-bottom-left-radius: var(--br-sm);
-    border-bottom-right-radius: var(--br-sm);
-    border-top: 1px solid var(--bc-medium);
-    padding: var(--su12);
-    font-size: var(--fs-caption);
-
-    #stacks-internals #screen-sm({
-        flex-direction: column;
-    });
-}
-
-.s-link-preview--url {
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis !important;
-    white-space: nowrap;
-}
-
-.s-link-preview--misc {
-    color: var(--black-500);
-    padding-left: var(--su4);
-
-    #stacks-internals #screen-sm({
-        padding-left: 0;
-        padding-top: var(--su2);
-    });
-}
+    & &--code {
+        pre {
+            border-radius: 0 !important;
+            margin: 0;
+            max-height: 400px;
+        }
+    }
+    & &--details {
+        margin-top: var(--_lp-details-mt);
 
-.s-link-preview--details a,
-.s-link-preview--footer a {
-    text-decoration: none;
-    cursor: pointer;
-    color: var(--black-500);
+        color: var(--black-500);
+        font-size: var(--fs-caption);
+    }
+    & &--footer {
+        flex-direction: var(--_lp-footer-fd);
+
+        background: var(--black-025);
+        border-bottom-left-radius: var(--br-sm);
+        border-bottom-right-radius: var(--br-sm);
+        border-top: 1px solid var(--bc-medium);
+        display: flex;
+        font-size: var(--fs-caption);
+        justify-content: space-between;
+        padding: var(--su12);
+    }
+    & &--header {
+        background: var(--black-025);
+        border-bottom: 1px solid var(--bc-medium);
+        border-top-left-radius: var(--br-sm);
+        border-top-right-radius: var(--br-sm);
+        display: flex;
+        padding: var(--su12) var(--su8);
+    }
+    & &--icon {
+        color: var(--black-800); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
+        margin-right: var(--su8);
+    }
+    & &--misc {
+        padding-left: var(--_lp-misc-pl);
+        padding-top: var(--_lp-misc-pt);
 
-    &:visited {
-        color: var(--black-700);
+        color: var(--black-500);
     }
+    & &--title {
+        color: var(--black-900);
+        font-size: var(--fs-body3);
+        font-weight: bold;
+    }
+    & a&--title {
+        &:active,
+        &:hover{
+            &,
+            &.s-link__visited {
+                color: var(--theme-link-color-hover);
+            }
+        }
+        &:active,
+        &:hover,
+        &.s-link__visited:active,
+        &.s-link__visited:hover,
+        &.s-link__visited:visited {
+            .highcontrast-mode({ text-decoration: underline; });
+            text-decoration: none;
+        }
+        &.s-link__visited:visited {
+            color: var(--theme-link-color);
+        }
 
-    &:hover,
-    &:active,
-    &:focus {
-        color: var(--black-600);
+        color: var(--theme-link-color);
+        cursor: pointer;
+        text-decoration: none;
     }
+    & &--url {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis !important;
+        white-space: nowrap;
+    }
+
+    border: 1px solid var(--bc-medium);
+    border-radius: var(--br-sm);
+    box-shadow: var(--bs-sm);
+    text-align: left;
 }