@stackoverflow/stacks 2.7.3 → 2.7.4

package/lib/components/code-block/code-block.fixtures.ts

@@ -1,88 +1,88 @@
-import type { LanguageFn } from "highlight.js";
-import hljs from "highlight.js/lib/core";
-import hljsJavascript from "highlight.js/lib/languages/javascript";
-import hljsCss from "highlight.js/lib/languages/css";
-import hljsHtml from "highlight.js/lib/languages/xml";
-
-const hljsLanguages: Record<string, LanguageFn> = {
-    javascript: hljsJavascript,
-    css: hljsCss,
-    html: hljsHtml,
-};
-
-const javascriptFixture = `
-import React, { Component } from 'react'
-import { IP } from '../constants/IP'
-import { withAuth0 } from '@auth0/auth0-react';
-
-class AddATournament extends Component {
-    componentDidMount() {
-        this.myNewListOfAllTournamentsWithAuth()
-    }
-}
-
-export default withAuth0(AddATournament);
-`;
-
-const cssFixture = `
-.s-input,
-.s-textarea {
-    -webkit-appearance: none;
-    width: 100%;
-    margin: 0;
-    padding: 0.6em 0.7em;
-    border: 1px solid var(--bc-darker);
-    border-radius: 3px;
-    background-color: var(--white);
-    color: var(--fc-dark);
-    font-size: 13px;
-    font-family: inherit;
-    line-height: 1.15384615;
-    scrollbar-color: var(--scrollbar) transparent;
-}
-@supports (-webkit-overflow-scrolling: touch) {
-    .s-input,
-    .s-textarea {
-        font-size: 16px;
-        padding: 0.36em 0.55em;
-    }
-    .s-input::-webkit-input-placeholder,
-    .s-textarea::-webkit-input-placeholder {
-        line-height: normal !important;
-    }
-}
-`;
-
-const htmlFixture = `
-<form class="d-flex gy4 fd-column">
-    <label class="flex--item s-label" for="question-title">Question title</label>
-    <div class="d-flex ps-relative">
-        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
-    </div>
-</form>
-`;
-
-const fixtures: Record<string, string> = {
-    javascript: javascriptFixture,
-    css: cssFixture,
-    html: htmlFixture,
-};
-
-const highlightFixture = (fixture: string, language: string) => {
-    const hljsLanguage = hljsLanguages[language];
-    hljs.registerLanguage(language, hljsLanguage);
-
-    const highlightedCode = hljs.highlight(fixture, { language }).value;
-
-    return `<code>${highlightedCode}</code>`;
-};
-
-const highlightedFixtures = Object.keys(fixtures).reduce(
-    (acc, language) => {
-        acc[language] = highlightFixture(fixtures[language], language);
-        return acc;
-    },
-    {} as Record<string, string>
-);
-
-export default highlightedFixtures;
+import type { LanguageFn } from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import hljsJavascript from "highlight.js/lib/languages/javascript";
+import hljsCss from "highlight.js/lib/languages/css";
+import hljsHtml from "highlight.js/lib/languages/xml";
+
+const hljsLanguages: Record<string, LanguageFn> = {
+    javascript: hljsJavascript,
+    css: hljsCss,
+    html: hljsHtml,
+};
+
+const javascriptFixture = `
+import React, { Component } from 'react'
+import { IP } from '../constants/IP'
+import { withAuth0 } from '@auth0/auth0-react';
+
+class AddATournament extends Component {
+    componentDidMount() {
+        this.myNewListOfAllTournamentsWithAuth()
+    }
+}
+
+export default withAuth0(AddATournament);
+`;
+
+const cssFixture = `
+.s-input,
+.s-textarea {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.6em 0.7em;
+    border: 1px solid var(--bc-darker);
+    border-radius: 3px;
+    background-color: var(--white);
+    color: var(--fc-dark);
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.15384615;
+    scrollbar-color: var(--scrollbar) transparent;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+    .s-input,
+    .s-textarea {
+        font-size: 16px;
+        padding: 0.36em 0.55em;
+    }
+    .s-input::-webkit-input-placeholder,
+    .s-textarea::-webkit-input-placeholder {
+        line-height: normal !important;
+    }
+}
+`;
+
+const htmlFixture = `
+<form class="d-flex gy4 fd-column">
+    <label class="flex--item s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+`;
+
+const fixtures: Record<string, string> = {
+    javascript: javascriptFixture,
+    css: cssFixture,
+    html: htmlFixture,
+};
+
+const highlightFixture = (fixture: string, language: string) => {
+    const hljsLanguage = hljsLanguages[language];
+    hljs.registerLanguage(language, hljsLanguage);
+
+    const highlightedCode = hljs.highlight(fixture, { language }).value;
+
+    return `<code>${highlightedCode}</code>`;
+};
+
+const highlightedFixtures = Object.keys(fixtures).reduce(
+    (acc, language) => {
+        acc[language] = highlightFixture(fixtures[language], language);
+        return acc;
+    },
+    {} as Record<string, string>
+);
+
+export default highlightedFixtures;

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

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