beaver/beaver-plugin-obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): switch thumb travels inside the track, toggle scene for the preview

Browse Source
This commit is contained in:
hh
2026-08-29 19:42:59 +02:00
parent 353ee143f6
commit b619c75119
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/entry.ts
+5 -1
View File
@@ -25,6 +25,7 @@ function press(element: Element | null | undefined): void {
// Scenes for screenshots: open the page with a hash to land in a state. // Scenes for screenshots: open the page with a hash to land in a state.
// Width comes from the window (``--window-size``), the state from here. // Width comes from the window (``--window-size``), the state from here.
// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one flat scene list
async function main(): Promise<void> { async function main(): Promise<void> {
const client = new FakeClient(); const client = new FakeClient();
const state = new PanelState(); const state = new PanelState();
@@ -33,7 +34,7 @@ async function main(): Promise<void> {
if (scene === "empty") { if (scene === "empty") {
state.selected = null; state.selected = null;
} }
if (scene === "question") { if (scene === "question" || scene === "toggle") {
state.selected = BRANCH_BLASTER; state.selected = BRANCH_BLASTER;
} }
if (scene === "deep") { if (scene === "deep") {
@@ -95,6 +96,9 @@ async function main(): Promise<void> {
}) })
); );
} }
if (scene.startsWith("toggle")) {
press(document.querySelector('[data-slot="switch"]'));
}
if (scene.startsWith("actions")) { if (scene.startsWith("actions")) {
press(document.querySelector('[aria-label="Conversation actions"]')); press(document.querySelector('[aria-label="Conversation actions"]'));
} }
src/tailwind.css
+15 -6
View File
@@ -360,18 +360,23 @@
.beaver-root [data-slot="select-content"]::before { .beaver-root [data-slot="select-content"]::before {
display: none !important; display: none !important;
} }
/* Obsidian's own toggle: border-hover track, accent when on, a white thumb. */ /* Obsidian's own toggle: border-hover track, accent when on, a white thumb.
.beaver-root [data-slot="switch"] { Tripled class: luma's group/data variants carry three classes' worth of
specificity, and the utilities are all !important. */
.beaver-root.beaver-root.beaver-root [data-slot="switch"] {
justify-content: flex-start !important;
width: 40px !important; width: 40px !important;
height: 20px !important; height: 20px !important;
padding: 0 !important;
background: var(--background-modifier-border-hover) !important; background: var(--background-modifier-border-hover) !important;
border: 0 !important; border: 0 !important;
border-radius: var(--toggle-radius, 18px) !important; border-radius: var(--toggle-radius, 18px) !important;
} }
.beaver-root [data-slot="switch"][data-state="checked"] { .beaver-root.beaver-root.beaver-root
[data-slot="switch"][data-state="checked"] {
background: var(--interactive-accent) !important; background: var(--interactive-accent) !important;
} }
.beaver-root [data-slot="switch-thumb"] { .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] {
display: block !important; display: block !important;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
@@ -380,8 +385,12 @@
border-radius: 50% !important; border-radius: 50% !important;
box-shadow: var(--shadow-s) !important; box-shadow: var(--shadow-s) !important;
} }
.beaver-root [data-slot="switch-thumb"][data-state="checked"] { .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] {
transform: translateX(20px) !important; translate: 0 !important;
}
.beaver-root.beaver-root.beaver-root
[data-slot="switch-thumb"][data-state="checked"] {
translate: 20px 0 !important;
} }
.beaver-root [data-slot="button"][data-variant="default"], .beaver-root [data-slot="button"][data-variant="default"],
.beaver-root [data-slot="button"]:not([class*="bg-"]) { .beaver-root [data-slot="button"]:not([class*="bg-"]) {