@stackoverflow/stacks 1.9.0 → 1.9.2

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -1,158 +1,158 @@
-.s-checkbox,
-.s-radio {
-    --_ch-baw: var(--su-static1);
-    --_ch-bc: var(--bc-darker);
-    --_ch-bc-focus: var(--theme-secondary-300);
-    --_ch-bg: var(--white);
-    --_ch-bg-image: unset;
-    --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-
-    // CONTEXTUAL STYLES
-    fieldset[disabled] &,
-    &[disabled] {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-    }
-
-    .s-check-control & {
-        &[disabled] + .s-label {
-            &:extend(.is-disabled .s-label);
-        }
-    }
-
-    .s-check-group & {
-        margin-top: calc(var(--su2) + var(--su1)); // 3px
-    }
-
-    input& {
-        flex-shrink: 0;
-    }
-
-    // INTERACTION
-    &:focus {
-        box-shadow: var(--_ch-bs-focus);
-    }
-
-    background-color: var(--_ch-bg);
-    border: var(--_ch-baw) solid var(--_ch-bc);
-
-    appearance: none;
-    cursor: pointer;
-    font-size: inherit;
-    height: 1em;
-    margin: 0; // A guard against Core's default margins
-    outline: 0;
-    vertical-align: middle;
-    width: 1em;
-}
-
-.s-checkbox {
-
-    // CONTEXTUAL STYLES
-    .highcontrast-dark-mode({
-        &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-700) !important;
-            --_ch-bc-focus: var(--_ch-bc);
-            --_ch-bg: var(--blue-300);
-        }
-    });
-
-    // STATES
-    &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
-
-        &:focus {
-            --_ch-bc-focus: var(--theme-secondary-400);
-        }
-    }
-
-    &:checked {
-        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
-    }
-
-    &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
-    }
-
-    // INTERACTION
-    &:focus {
-        border-color: var(--_ch-bc-focus);
-    }
-
-    background-image: var(--_ch-bg-image);
-
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border-radius: var(--br-sm);
-}
-
-.s-radio {
-
-    // CONTEXTUAL STYLES
-    .highcontrast-dark-mode({
-        &:checked {
-            --_ch-bc: var(--blue-300);
-            outline: var(--su-static1) solid var(--black);
-        }
-    });
-
-    .dark-mode({
-        &:checked {
-            --_ch-bg: var(--black);
-        }
-    });
-
-    // STATES
-    &:checked {
-        --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
-        --_ch-bg: var(--white);
-    }
-
-    border-radius: var(--br-circle);
-}
-
-.s-checkbox,
-.s-radio:not(:checked) {
-    .validation-states(ch);
-}
-
-.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
-    --_cc-ai: center;
-
-    // CONTEXTUAL STYLES
-    .s-check-group & {
-        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
-    }
-
-    // CHILD ELEMENTS
-    .s-label {
-        font-weight: normal;
-    }
-
-    align-items: var(--_cc-ai);
-    display: flex;
-    gap: var(--su8);
-}
-
-.s-check-group {
-    --_cg-fd: column;
-
-    // MODIFIERS
-    &&__horizontal {
-        --_cg-fd: row;
-    }
-
-    // CHILD ELEMENTS
-    // TODO HACK? <legend> isn't respecting gap...
-    legend.s-label {
-        margin-bottom: var(--su8);
-    }
-
-    flex-direction: var(--_cg-fd);
-
-    display: flex;
-    gap: var(--su8);
-}
+.s-checkbox,
+.s-radio {
+    --_ch-baw: var(--su-static1);
+    --_ch-bc: var(--bc-darker);
+    --_ch-bc-focus: var(--theme-secondary-300);
+    --_ch-bg: var(--white);
+    --_ch-bg-image: unset;
+    --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+
+    // CONTEXTUAL STYLES
+    fieldset[disabled] &,
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    .s-check-control & {
+        &[disabled] + .s-label {
+            &:extend(.is-disabled .s-label);
+        }
+    }
+
+    .s-check-group & {
+        margin-top: calc(var(--su2) + var(--su1)); // 3px
+    }
+
+    input& {
+        flex-shrink: 0;
+    }
+
+    // INTERACTION
+    &:focus {
+        box-shadow: var(--_ch-bs-focus);
+    }
+
+    background-color: var(--_ch-bg);
+    border: var(--_ch-baw) solid var(--_ch-bc);
+
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    height: 1em;
+    margin: 0; // A guard against Core's default margins
+    outline: 0;
+    vertical-align: middle;
+    width: 1em;
+}
+
+.s-checkbox {
+
+    // CONTEXTUAL STYLES
+    .highcontrast-dark-mode({
+        &:checked, &:indeterminate {
+            --_ch-bc: var(--blue-700) !important;
+            --_ch-bc-focus: var(--_ch-bc);
+            --_ch-bg: var(--blue-300);
+        }
+    });
+
+    // STATES
+    &:checked, &:indeterminate {
+        --_ch-bc: var(--theme-secondary-400) !important;
+        --_ch-bg: var(--theme-secondary-400);
+
+        &:focus {
+            --_ch-bc-focus: var(--theme-secondary-400);
+        }
+    }
+
+    &:checked {
+        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
+    }
+
+    &:indeterminate {
+        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
+    }
+
+    // INTERACTION
+    &:focus {
+        border-color: var(--_ch-bc-focus);
+    }
+
+    background-image: var(--_ch-bg-image);
+
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border-radius: var(--br-sm);
+}
+
+.s-radio {
+
+    // CONTEXTUAL STYLES
+    .highcontrast-dark-mode({
+        &:checked {
+            --_ch-bc: var(--blue-300);
+            outline: var(--su-static1) solid var(--black);
+        }
+    });
+
+    .dark-mode({
+        &:checked {
+            --_ch-bg: var(--black);
+        }
+    });
+
+    // STATES
+    &:checked {
+        --_ch-baw: 0.30769231em;
+        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bg: var(--white);
+    }
+
+    border-radius: var(--br-circle);
+}
+
+.s-checkbox,
+.s-radio:not(:checked) {
+    .validation-states(ch);
+}
+
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+    --_cc-ai: center;
+
+    // CONTEXTUAL STYLES
+    .s-check-group & {
+        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+    }
+
+    // CHILD ELEMENTS
+    .s-label {
+        font-weight: normal;
+    }
+
+    align-items: var(--_cc-ai);
+    display: flex;
+    gap: var(--su8);
+}
+
+.s-check-group {
+    --_cg-fd: column;
+
+    // MODIFIERS
+    &&__horizontal {
+        --_cg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    flex-direction: var(--_cg-fd);
+
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/code-block/code-block.less

@@ -1,116 +1,116 @@
-.s-code-block {
-    --_cb-line-numbers-bg: var(--black-050);
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        --_cb-line-numbers-bg: var(--black-025);
-    });
-
-    // 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);
-    }
-}
+.s-code-block {
+    --_cb-line-numbers-bg: var(--black-050);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        --_cb-line-numbers-bg: var(--black-025);
+    });
+
+    // 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);
+    }
+}

package/lib/components/description/description.less

@@ -1,9 +1,9 @@
-.s-description {
-    .is-disabled & {
-        opacity: var(--_o-disabled-static);
-    }
-
-    color: var(--fc-medium);
-    font-size: var(--fs-caption);
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-}
+.s-description {
+    .is-disabled & {
+        opacity: var(--_o-disabled-static);
+    }
+
+    color: var(--fc-medium);
+    font-size: var(--fs-caption);
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
+}

package/lib/components/empty-state/empty-state.less

@@ -1,16 +1,16 @@
-.s-empty-state {
-    // CHILD ELEMENTS
-    p {
-        strong {
-            color: var(--fc-dark);
-        }
-
-        font-size: var(--fs-body1);
-        margin-bottom: var(--su12);
-    }
-
-    color: var(--fc-light);
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-}
+.s-empty-state {
+    // CHILD ELEMENTS
+    p {
+        strong {
+            color: var(--fc-dark);
+        }
+
+        font-size: var(--fs-body1);
+        margin-bottom: var(--su12);
+    }
+
+    color: var(--fc-light);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}