Upgrade to Stacks v2 (#256)

* build(deps): Update to @stackoverflow/stacks v2.0.0-rc.1 * Update colors to v2 mappings * 0.9.0-rc.0 * 0.9.0-rc.1 * Apply tasteful theming to editor controls * Add custom theme toggle to demo * Upgrade to Stacks 2.0.0-rc.12 * 0.9.0-rc.2 * Upgrade to Stacks v2.0.0; Stacks-Icons v6.0.0
StackExchange · Oct 6, 2023 · 971ef0b · 971ef0b
1 parent c5aa719
commit 971ef0b
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@stackoverflow/stacks-editor",
-    "version": "0.8.9",
+    "version": "0.9.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -87,8 +87,8 @@
     "dependencies": {
         "@lezer/highlight": "^1.1.3",
         "@lezer/markdown": "^1.0.2",
-        "@stackoverflow/stacks": "^1.9.0",
-        "@stackoverflow/stacks-icons": "^5.3.1",
+        "@stackoverflow/stacks": "^2.0.0",
+        "@stackoverflow/stacks-icons": "^6.0.0",
         "@types/markdown-it": "12.2.3",
         "markdown-it": "^13.0.1",
         "orderedmap": "^2.1.0",

diff --git a/site/index.ts b/site/index.ts
@@ -164,6 +164,16 @@ domReady(() => {
             document.body.classList.toggle("theme-dark");
         });
 
+    document
+        .querySelector("#js-toggle-theme")
+        ?.addEventListener("change", (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            document.body.classList.toggle("theme-custom");
+            document.body.classList.toggle("themed");
+        });
+
     document
         .querySelector("#js-toggle-contrast")
         ?.addEventListener("change", (e: Event) => {

diff --git a/site/layout.html b/site/layout.html
@@ -54,6 +54,15 @@
                             Dark mode
                         </label>
                     </li>
+                    <li class="d-flex ai-center s-block-link">
+                        <div class="flex--item s-toggle-switch">
+                            <input id="js-toggle-theme" type="checkbox" />
+                            <div class="s-toggle-switch--indicator"></div>
+                        </div>
+                        <label for="js-toggle-theme" class="flex--item ml4">
+                            Custom theme
+                        </label>
+                    </li>
                     <li class="d-flex ai-center s-block-link">
                         <div class="flex--item s-toggle-switch">
                             <input id="js-toggle-contrast" type="checkbox" />

diff --git a/site/site.css b/site/site.css
@@ -2,6 +2,27 @@
 @import "../src/styles/index.css";
 
 /* Place demo specific styles here */
+body.themed.theme-custom,
+body.themed.theme-custom * {
+    /* Light mode */
+    --theme-base-primary-color-h: 172;
+    --theme-base-primary-color-s: 37%;
+    --theme-base-primary-color-l: 48%;
+    --theme-base-secondary-color-h: 259;
+    --theme-base-secondary-color-s: 29%;
+    --theme-base-secondary-color-l: 55%;
+
+    /* Dark mode */
+    --theme-dark-primary-color-h: 172;
+    --theme-dark-primary-color-s: 37%;
+    --theme-dark-primary-color-l: 48%;
+    --theme-dark-secondary-color-h: 259;
+    --theme-dark-secondary-color-s: 29%;
+    --theme-dark-secondary-color-l: 55%;
+
+    --theme-button-color: var(--theme-link-color);
+}
+
 .svg-icon-bg.iconGitHub {
     --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/GitHub.svg");
 }
@@ -24,7 +45,7 @@
     font-size: var(--fs-fine);
     position: absolute;
     transform: translate(-75%, -75%);
-    color: var(--red-500);
+    color: var(--red-400);
     user-select: none;
     pointer-events: none;
 }

diff --git a/src/rich-text/node-views/code-block.ts b/src/rich-text/node-views/code-block.ts
@@ -57,7 +57,7 @@ export class CodeBlockView implements NodeView {
         const randomId = generateRandomId();
 
         this.dom.innerHTML = escapeHTML`
-        <div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-300 js-language-indicator" contenteditable=false></div>
+        <div class="ps-absolute t2 r4 fs-fine pe-none us-none fc-black-350 js-language-indicator" contenteditable=false></div>
         <div class="d-flex ps-absolute t0 r0 js-processor-toggle">
             <label class="flex--item mr4" for="js-editor-toggle-${randomId}">
                 Edit

diff --git a/src/shared/prosemirror-plugins/image-upload.ts b/src/shared/prosemirror-plugins/image-upload.ts
@@ -168,7 +168,7 @@ export class ImageUploader extends PluginInterfaceView<
                     <button class="s-btn s-btn__primary ws-nowrap mr8 js-add-image" type="button" disabled>Add image</button>
                     <button class="s-btn ws-nowrap js-cancel-button" type="button">Cancel</button>
                 </div>
-                <div class="d-flex fd-column fs-caption fc-black-300 s-anchors s-anchors__muted">
+                <div class="d-flex fd-column fs-caption fc-black-350 s-anchors s-anchors__muted">
                     <div class="js-branding-html"></div>
                     <div class="js-content-policy-html"></div>
                 </div>
@@ -274,14 +274,14 @@ export class ImageUploader extends PluginInterfaceView<
 
     highlightDropArea(event: DragEvent): void {
         this.uploadContainer.classList.add("bs-ring");
-        this.uploadContainer.classList.add("bc-blue-300");
+        this.uploadContainer.classList.add("bc-theme-secondary-400");
         event.preventDefault();
         event.stopPropagation();
     }
 
     unhighlightDropArea(event: DragEvent): void {
         this.uploadContainer.classList.remove("bs-ring");
-        this.uploadContainer.classList.remove("bc-blue-300");
+        this.uploadContainer.classList.remove("bc-theme-secondary-400");
         event.preventDefault();
         event.stopPropagation();
     }
@@ -660,7 +660,7 @@ function createPlaceholder(): HTMLDivElement {
     const placeholder = document.createElement("div");
     placeholder.className = "ws-normal d-block m8 js-image-upload-placeholder";
     placeholder.innerHTML = `
-<div class="py6 px6 bg-black-050 bar-sm gsx gs8 d-inline-flex ai-center fw-normal fs-body1">
+<div class="py6 px6 bg-black-150 bar-sm gsx gs8 d-inline-flex ai-center fw-normal fs-body1">
     <span class="s-spinner s-spinner__sm flex--item">
         <span class="v-visible-sr">Loading…</span>
     </span>

diff --git a/src/stacks-editor/editor.ts b/src/stacks-editor/editor.ts
@@ -307,11 +307,17 @@ export class StacksEditor implements View {
         // set up focus/blur listeners so we can style the dom to match
         this.backingView.editorView.props.handleDOMEvents = {
             focus: () => {
-                this.innerTarget.classList.add("bs-ring", "bc-blue-300");
+                this.innerTarget.classList.add(
+                    "bs-ring",
+                    "bc-theme-secondary-400"
+                );
                 return false;
             },
             blur: () => {
-                this.innerTarget.classList.remove("bs-ring", "bc-blue-300");
+                this.innerTarget.classList.remove(
+                    "bs-ring",
+                    "bc-theme-secondary-400"
+                );
                 return false;
             },
         };

diff --git a/src/styles/custom-components.css b/src/styles/custom-components.css
@@ -92,37 +92,47 @@
     transition: top 0.2s ease, opacity 0.1s ease;
 }
 
-.s-editor-btn {
-    --theme-button-color: var(--fc-medium);
-    --theme-button-hover-color: var(--fc-medium);
-    --theme-button-hover-background-color: var(--black-050);
-    --theme-button-active-background-color: var(--theme-secondary-100);
-    --theme-button-selected-color: var(--theme-secondary-900);
-    --theme-button-selected-background-color: var(--theme-secondary-100);
-    /* TODO when upstream adopts the ability to change the border color on default buttons, remove this */
-    --editor-button-border-color: transparent;
-    border-color: var(--editor-button-border-color);
+.s-btn.s-editor-btn {
+    border-radius: var(--br-sm);
+    color: var(--black-500) !important;
     padding: var(--su2);
 }
 
-.s-editor-btn.is-selected,
-.s-editor-btn:active {
-    --editor-button-border-color: currentColor;
+.s-btn.s-editor-btn:not(.s-btn__outlined) {
+    border-color: transparent !important;
+}
+
+.s-btn.s-editor-btn:focus {
+    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+}
+
+.s-btn.s-editor-btn:hover,
+.s-btn.s-editor-btn:focus {
+    background-color: var(--theme-secondary-200) !important;
+    color: var(--black-600) !important;
+}
+
+.s-btn.s-editor-btn.is-selected,
+.s-btn.s-editor-btn:active {
+    background-color: var(--theme-secondary-200) !important;
+    color: var(--theme-secondary-600) !important;
 }
 
-.s-editor-btn:focus {
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+.s-btn.s-editor-btn.is-selected:hover,
+.s-btn.s-editor-btn.is-selected:focus {
+    color: var(--theme-secondary-500) !important;
 }
 
-.s-editor-btn.is-disabled {
+.s-btn.s-editor-btn.is-disabled {
+    background-color: transparent !important;
     opacity: 0.5;
 }
 
-.s-editor-btn.s-btn__dropdown {
+.s-btn.s-editor-btn.s-btn__dropdown {
     padding-right: var(--su12);
 }
 
-.s-editor-btn.s-btn__dropdown:after {
+.s-btn.s-editor-btn.s-btn__dropdown:after {
     right: var(--su2);
 }
 
@@ -131,12 +141,12 @@
 }
 
 .s-editor--dropdown-item:hover {
-    background-color: var(--black-050);
+    background-color: var(--black-150);
 }
 
 .s-editor--dropdown-item.is-selected {
-    background-color: var(--theme-secondary-100);
-    color: var(--theme-secondary-900);
+    background-color: var(--theme-secondary-200);
+    color: var(--theme-secondary-600);
     font-weight: 400;
 }
 

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -1,5 +1,5 @@
 .s-code-block.markdown .hljs-section {
-    color: var(--black-800) !important;
+    color: var(--black-600) !important;
     font-size: var(--fs-body2);
     font-weight: 700;
 }
@@ -8,11 +8,11 @@
 .s-code-block.markdown .hljs-string,
 .s-code-block.markdown .hljs-symbol,
 .s-code-block.markdown .hljs-tag {
-    color: var(--black-600) !important;
+    color: var(--black-500) !important;
 }
 
 .s-code-block.markdown .hljs-link {
-    color: var(--blue-600) !important;
+    color: var(--blue-500) !important;
     text-decoration: underline;
 }