diff --git a/extension/api/components/_.mjs b/extension/api/components/_.mjs index 14544e3..e1d98e6 100644 --- a/extension/api/components/_.mjs +++ b/extension/api/components/_.mjs @@ -26,4 +26,11 @@ export { tooltip } from './tooltip.mjs'; */ export { feather } from './feather.mjs'; -export { panel } from './panel.mjs'; +/** + * adds a view to the enhancer's side panel + * @param {string} param0.id - a uuid, used to restore it on reload if it was last open + * @param {string} param0.icon - an svg string + * @param {string} param0.title - the name of the view + * @param {Element} param0.$content - an element containing the content of the view + */ +export { addPanelView } from './panel.mjs'; diff --git a/extension/api/components/panel.css b/extension/api/components/panel.css index 149ab3c..1294867 100644 --- a/extension/api/components/panel.css +++ b/extension/api/components/panel.css @@ -85,9 +85,12 @@ height: 1em; width: 1em; } -.enhancer--panel-view-title span { +.enhancer--panel-view-title .enhancer--panel-view-title-text { font-size: 0.9em; - margin-left: 0.5em; + margin: 0 0 0 0.75em; + padding-bottom: 0.3em; + white-space: nowrap; + overflow: hidden; } #enhancer--panel-header { @@ -97,77 +100,24 @@ align-items: center; cursor: pointer; user-select: none; -} -#enhancer--panel-header .enhancer--panel-view-title { - font-size: 1.2rem; -} -#enhancer--panel-content { - padding: 0.75rem 1rem; - font-size: 1rem; + padding: 0.75rem 0 0.75rem 1rem; + --scoped--bg: var(--theme--bg_secondary); + background: var(--scoped--bg); } #enhancer--panel-header-title { - padding: 0 0.5em 0.1em 1rem; + max-width: calc(100% - 4.25rem); } -#enhancer--panel-header-switcher { - padding: 4px; - margin: 0.75rem 0; +#enhancer--panel-header-title .enhancer--panel-view-title { + font-size: 1.2rem; } -#enhancer--panel-header-toggle { - margin-left: auto; - padding-right: 1rem; - height: 100%; - width: 2.5em; - opacity: 0; - display: flex; +#enhancer--panel-header-title .enhancer--panel-view-title-text { + max-width: calc(100% - 1.75em); + position: relative; } -#enhancer--panel-header-toggle > div { - margin: auto 0 auto auto; -} -#enhancer--panel-header-switcher, -#enhancer--panel-header-toggle > div { - color: var(--theme--icon_secondary); +.enhancer--panel-view-title-fade-edge { + display: inline-block; + width: 0.75rem; height: 1em; - width: 1em; - cursor: pointer; - display: flex; - flex-direction: column; - border-radius: 3px; - transition: 300ms ease-in-out; -} -#enhancer--panel-header-switcher:hover, -#enhancer--panel-header-switcher:focus, -#enhancer--panel-header-toggle > div:hover, -#enhancer--panel-header-toggle > div:focus { - background: var(--theme--ui_interactive-hover); -} -#enhancer--panel #enhancer--panel-header-toggle svg { - transition: 300ms ease-in-out; -} -#enhancer--panel:not([data-enhancer-panel-pinned]) #enhancer--panel-header-toggle svg { - transform: rotateZ(-180deg); -} -#enhancer--panel:hover #enhancer--panel-header-toggle { - opacity: 1; -} - -#enhancer--panel-resize { - position: absolute; - left: -5px; - height: 100%; - width: 10px; -} -#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize { - cursor: col-resize; -} -#enhancer--panel-resize div { - transition: background 150ms ease-in-out; - background: transparent; - width: 2px; - margin-left: 4px; - height: 100%; -} -#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize:hover div { - background: var(--theme--ui_divider); } #enhancer--panel-switcher-overlay-container { @@ -199,9 +149,89 @@ user-select: none; cursor: pointer; overflow: hidden; - transition: background 300ms ease; + position: relative; + --scoped--bg: var(--theme--bg_popup); + background: var(--scoped--bg); } +#enhancer--panel-header:hover, +#enhancer--panel-header:focus-within, .enhancer--panel-switcher-item:hover, .enhancer--panel-switcher-item:focus { - background: var(--theme--ui_interactive-hover); + --scoped--bg: var(--theme--ui_interactive-hover); +} +#enhancer--panel-header:active, +.enhancer--panel-switcher-item:active { + background: var(--theme--ui_interactive-active); +} +.enhancer--panel-view-title-fade-edge:after { + content: ''; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 0.75rem; + background: linear-gradient( + to right, + transparent 0%, + var(--scoped--bg) 50%, + var(--scoped--bg) 100% + ); +} + +#enhancer--panel-content { + margin: 0.75rem 1rem; + font-size: 1rem; +} +#enhancer--panel-header-switcher { + padding: 4px; +} +#enhancer--panel-header-toggle { + margin-left: auto; + padding-right: 1rem; + height: 100%; + width: 2.5em; + opacity: 0; + display: flex; +} +#enhancer--panel-header-toggle > div { + margin: auto 0 auto auto; +} +#enhancer--panel-header-switcher, +#enhancer--panel-header-toggle > div { + color: var(--theme--icon_secondary); + height: 1em; + width: 1em; + cursor: pointer; + display: flex; + flex-direction: column; + transition: 300ms ease-in-out; +} +#enhancer--panel #enhancer--panel-header-toggle svg { + transition: 300ms ease-in-out; +} +#enhancer--panel:not([data-enhancer-panel-pinned]) #enhancer--panel-header-toggle svg { + transform: rotateZ(-180deg); +} +#enhancer--panel:hover #enhancer--panel-header-toggle { + opacity: 1; +} + +#enhancer--panel-resize { + position: absolute; + left: -5px; + height: 100%; + width: 10px; +} +#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize { + cursor: col-resize; +} +#enhancer--panel-resize div { + transition: background 150ms ease-in-out; + background: transparent; + width: 2px; + margin-left: 4px; + height: 100%; +} +#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize:hover div { + background: var(--theme--ui_divider); } diff --git a/extension/api/components/panel.mjs b/extension/api/components/panel.mjs index f17e709..f4c743b 100644 --- a/extension/api/components/panel.mjs +++ b/extension/api/components/panel.mjs @@ -14,10 +14,8 @@ import { web, components, registry } from '../_.mjs'; const db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d'); -let $panel, - _views = []; - -const svgExpand = web.raw` +const _views = [], + svgExpand = web.raw` 5.43056L 3.01191 8.43056L 3.98809 9.56944Z"> `; -export const panel = async (icon, title, generator = () => {}) => { - _views.push({ - icon: web.html`${icon}`, - title: web.html`${web.escape(title)}`, - $elem: generator(), - }); +// open + close +let $notionFrame, + $notionRightSidebar, + // resize + dragStartX, + dragStartWidth, + dragEventsFired, + panelWidth, + // render content + $notionApp; - if (!$panel) { - $panel = web.html`
`; - - const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]'; - await web.whenReady([notionRightSidebarSelector]); - web.loadStylesheet('api/components/panel.css'); - - // opening/closing - const $notionFrame = document.querySelector('.notion-frame'), - $notionRightSidebar = document.querySelector(notionRightSidebarSelector), - $pinnedToggle = web.html`
- ${await components.feather('chevrons-right')} -
`, - $hoverTrigger = web.html`
`, - panelPinnedAttr = 'data-enhancer-panel-pinned', - isPinned = () => $panel.hasAttribute(panelPinnedAttr), - togglePanel = () => { - const $elems = [$notionRightSidebar, $notionFrame, $hoverTrigger, $panel]; - if (isPinned()) { - closeSwitcher(); - for (const $elem of $elems) $elem.removeAttribute(panelPinnedAttr); - } else { - for (const $elem of $elems) $elem.setAttribute(panelPinnedAttr, 'true'); - } - db.set(['panel.pinned'], isPinned()); - }; - if (await db.get(['panel.pinned'])) togglePanel(); - web.addHotkeyListener(await db.get(['panel.hotkey']), togglePanel); - $pinnedToggle.addEventListener('click', (event) => { - event.stopPropagation(); - togglePanel(); - }); - - // resizing - let dragStartX, - dragStartWidth, - dragEventsFired, - panelWidth = await db.get(['panel.width'], 240); - const $resizeHandle = web.html`
`, - updateWidth = async () => { - document.documentElement.style.setProperty( - '--component--panel-width', - panelWidth + 'px' - ); - db.set(['panel.width'], panelWidth); - }, - resizeDrag = (event) => { - event.preventDefault(); - dragEventsFired = true; - panelWidth = dragStartWidth + (dragStartX - event.clientX); - if (panelWidth < 190) panelWidth = 190; - if (panelWidth > 480) panelWidth = 480; - $panel.style.width = panelWidth + 'px'; - $hoverTrigger.style.width = panelWidth + 'px'; - $notionFrame.style.paddingRight = panelWidth + 'px'; - $notionRightSidebar.style.right = panelWidth + 'px'; - }, - resizeEnd = (event) => { - $panel.style.width = ''; - $hoverTrigger.style.width = ''; - $notionFrame.style.paddingRight = ''; - $notionRightSidebar.style.right = ''; - updateWidth(); - $resizeHandle.style.cursor = ''; - document.body.removeEventListener('mousemove', resizeDrag); - document.body.removeEventListener('mouseup', resizeEnd); - }, - resizeStart = (event) => { - dragStartX = event.clientX; - dragStartWidth = panelWidth; - $resizeHandle.style.cursor = 'auto'; - document.body.addEventListener('mousemove', resizeDrag); - document.body.addEventListener('mouseup', resizeEnd); - }; - updateWidth(); - $resizeHandle.addEventListener('mousedown', resizeStart); - $resizeHandle.addEventListener('click', () => { - if (dragEventsFired) { - dragEventsFired = false; - } else togglePanel(); - }); - - // view selection - const $title = web.html`
`, - $header = web.render(web.html`
`, $title), - $content = web.html`
`, - $switcherTrigger = web.html`
- ${svgExpand} -
`, - $notionApp = document.querySelector('.notion-app-inner'), - $switcherOverlayContainer = web.html`
`, - $switcher = web.html`
`, - isSwitcherOpen = () => document.body.contains($switcher), - renderView = (view) => { - web.render( - web.empty($title), - web.render( - web.html`

`, - view.icon, - view.title - ) - ); - web.render(web.empty($content), view.$elem); - }, - openSwitcher = () => { - if (!isPinned()) return togglePanel(); - web.render($notionApp, $switcherOverlayContainer); - web.empty($switcher); - for (const view of _views) { - const $item = web.render( - web.html`
`, - web.render( - web.html`

`, - view.icon.cloneNode(true), - view.title.cloneNode(true) - ) - ); - $item.addEventListener('click', () => renderView(view)); - web.render($switcher, $item); - } - const rect = $header.getBoundingClientRect(); - web.render( - web.empty($switcherOverlayContainer), - web.render( - web.html`
`, - web.render( - web.html`
`, - $switcher - ) - ) - ); - $switcher.firstElementChild.focus(); - $switcher.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 }); - }; - function closeSwitcher() { - $switcher.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200 }).onfinish = () => - $switcherOverlayContainer.remove(); +// open + close +const $panel = web.html`
`, + $pinnedToggle = web.html`
+ ${await components.feather('chevrons-right')} +
`, + $hoverTrigger = web.html`
`, + panelPinnedAttr = 'data-enhancer-panel-pinned', + isPinned = () => $panel.hasAttribute(panelPinnedAttr), + togglePanel = () => { + const $elems = [$notionRightSidebar, $notionFrame, $hoverTrigger, $panel]; + if (isPinned()) { + closeSwitcher(); + for (const $elem of $elems) $elem.removeAttribute(panelPinnedAttr); + } else { + for (const $elem of $elems) $elem.setAttribute(panelPinnedAttr, 'true'); } - web.addHotkeyListener(['Escape'], () => { - if (isSwitcherOpen()) closeSwitcher(); - }); - web.addHotkeyListener(['Enter'], () => { - if (isSwitcherOpen()) document.activeElement.click(); - }); - document.addEventListener('keydown', (event) => { - if (isSwitcherOpen()) { - if (event.key === 'ArrowUp') { + db.set(['panel.pinned'], isPinned()); + }, + // resize + $resizeHandle = web.html`
`, + updateWidth = async () => { + document.documentElement.style.setProperty('--component--panel-width', panelWidth + 'px'); + db.set(['panel.width'], panelWidth); + }, + resizeDrag = (event) => { + event.preventDefault(); + dragEventsFired = true; + panelWidth = dragStartWidth + (dragStartX - event.clientX); + if (panelWidth < 190) panelWidth = 190; + if (panelWidth > 480) panelWidth = 480; + $panel.style.width = panelWidth + 'px'; + $hoverTrigger.style.width = panelWidth + 'px'; + $notionFrame.style.paddingRight = panelWidth + 'px'; + $notionRightSidebar.style.right = panelWidth + 'px'; + }, + resizeEnd = (event) => { + $panel.style.width = ''; + $hoverTrigger.style.width = ''; + $notionFrame.style.paddingRight = ''; + $notionRightSidebar.style.right = ''; + updateWidth(); + $resizeHandle.style.cursor = ''; + document.body.removeEventListener('mousemove', resizeDrag); + document.body.removeEventListener('mouseup', resizeEnd); + }, + resizeStart = (event) => { + dragStartX = event.clientX; + dragStartWidth = panelWidth; + $resizeHandle.style.cursor = 'auto'; + document.body.addEventListener('mousemove', resizeDrag); + document.body.addEventListener('mouseup', resizeEnd); + }, + // render content + $panelTitle = web.html`
`, + $header = web.render(web.html`
`, $panelTitle), + $panelContent = web.html`
`, + $switcher = web.html`
`, + $switcherTrigger = web.html`
+ ${svgExpand} +
`, + $switcherOverlayContainer = web.html`
`, + isSwitcherOpen = () => document.body.contains($switcher), + openSwitcher = () => { + if (!isPinned()) return togglePanel(); + web.render($notionApp, $switcherOverlayContainer); + web.empty($switcher); + for (const view of _views) { + const open = $panelTitle.contains(view.$title), + $item = web.render( + web.html`
`, + web.render( + web.html``, + view.$icon.cloneNode(true), + view.$title.cloneNode(true) + ) + ); + $item.addEventListener('click', () => { + renderView(view); + db.set(['panel.open'], view.id); + }); + web.render($switcher, $item); + } + const rect = $header.getBoundingClientRect(); + web.render( + web.empty($switcherOverlayContainer), + web.render( + web.html`
`, + web.render( + web.html`
`, + $switcher + ) + ) + ); + $switcher.querySelector('[data-open]').focus(); + $switcher.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 }); + document.addEventListener('keydown', switcherKeyListeners); + }, + closeSwitcher = () => { + document.removeEventListener('keydown', switcherKeyListeners); + $switcher.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200 }).onfinish = () => + $switcherOverlayContainer.remove(); + }, + switcherKeyListeners = (event) => { + if (isSwitcherOpen()) { + switch (event.key) { + case 'Escape': + closeSwitcher(); + event.stopPropagation(); + break; + case 'Enter': + document.activeElement.click(); + event.stopPropagation(); + break; + case 'ArrowUp': const $prev = event.target.previousElementSibling; ($prev || event.target.parentElement.lastElementChild).focus(); event.stopPropagation(); - } - if (event.key === 'ArrowDown') { + break; + case 'ArrowDown': const $next = event.target.nextElementSibling; ($next || event.target.parentElement.firstElementChild).focus(); event.stopPropagation(); - } + break; } - }); - $header.addEventListener('click', openSwitcher); - $switcherTrigger.addEventListener('click', openSwitcher); - $switcherOverlayContainer.addEventListener('click', closeSwitcher); - renderView(_views[0]); - + } + }, + renderView = (view) => { web.render( - $panel, - web.render($header, $title, $switcherTrigger, $pinnedToggle), - $content, - $resizeHandle + web.empty($panelTitle), + web.render( + web.html``, + view.$icon, + view.$title + ) ); - $notionRightSidebar.after($hoverTrigger, $panel); - } + web.render(web.empty($panelContent), view.$content); + }; + +async function createPanel() { + const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]'; + await web.whenReady([notionRightSidebarSelector]); + $notionFrame = document.querySelector('.notion-frame'); + $notionRightSidebar = document.querySelector(notionRightSidebarSelector); + if (await db.get(['panel.pinned'])) togglePanel(); + web.addHotkeyListener(await db.get(['panel.hotkey']), togglePanel); + $pinnedToggle.addEventListener('click', (event) => { + event.stopPropagation(); + togglePanel(); + }); + web.render( + $panel, + web.render($header, $panelTitle, $switcherTrigger, $pinnedToggle), + $panelContent, + $resizeHandle + ); + + await enablePanelResize(); + await createViews(); + + $notionRightSidebar.after($hoverTrigger, $panel); +} + +async function enablePanelResize() { + panelWidth = await db.get(['panel.width'], 240); + updateWidth(); + $resizeHandle.addEventListener('mousedown', resizeStart); + $resizeHandle.addEventListener('click', () => { + if (dragEventsFired) { + dragEventsFired = false; + } else togglePanel(); + }); +} + +async function createViews() { + $notionApp = document.querySelector('.notion-app-inner'); + $header.addEventListener('click', openSwitcher); + $switcherTrigger.addEventListener('click', openSwitcher); + $switcherOverlayContainer.addEventListener('click', closeSwitcher); +} + +web.loadStylesheet('api/components/panel.css'); + +/** + * adds a view to the enhancer's side panel + * @param {string} param0.id - a uuid, used to restore the last open view on reload + * @param {string} param0.icon - an svg string + * @param {string} param0.title - the name of the view + * @param {Element} param0.$content - an element containing the content of the view + */ +export const addPanelView = async ({ id, icon, title, $content }) => { + const view = { + id, + $icon: web.html` + ${icon} + `, + $title: web.html` + ${web.escape(title)} + + `, + $content, + }; + _views.push(view); + if (_views.length === 1) await createPanel(); + if (_views.length === 1 || (await db.get(['panel.open'])) === id) renderView(view); }; diff --git a/extension/api/components/tooltip.mjs b/extension/api/components/tooltip.mjs index 4487ed7..e52d3f0 100644 --- a/extension/api/components/tooltip.mjs +++ b/extension/api/components/tooltip.mjs @@ -13,7 +13,8 @@ import { fmt, web } from '../_.mjs'; -let _$tooltip; +const _$tooltip = web.html`
`; +web.loadStylesheet('api/components/tooltip.css'); /** * add a tooltip to show extra information on hover @@ -21,11 +22,7 @@ let _$tooltip; * @param {string} text - the markdown content of the tooltip */ export const tooltip = ($ref, text) => { - if (!_$tooltip) { - _$tooltip = web.html`
`; - web.loadStylesheet('api/components/tooltip.css'); - web.render(document.body, _$tooltip); - } + web.render(document.body, _$tooltip); text = fmt.md.render(text); $ref.addEventListener('mouseover', (event) => { _$tooltip.innerHTML = text; diff --git a/extension/repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.mjs b/extension/repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.mjs index 8ff7f1a..b510184 100644 --- a/extension/repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.mjs +++ b/extension/repo/bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f/client.mjs @@ -30,11 +30,4 @@ export default async function (api, db) { _lastPage = getCurrentPage(); } }); - - components.panel(await components.feather('sidebar'), 'Test Panel', ($panel) => { - return web.html`

test

`; - }); - components.panel(await components.feather('users'), 'Other Panel', ($panel) => { - return web.html`

yay

`; - }); } diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs index f9e15c1..22e0604 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/styles.mjs @@ -40,7 +40,7 @@ const customClasses = { 'nav-notion': apply`flex items-center font-semibold text-xl cursor-pointer select-none mr-4 ml-4 sm:mb-4 md:w-full lg:(w-auto ml-0 mb-0)`, 'nav-notion-icon': apply`h-12 w-12 mr-5 sm:(h-6 w-6 mr-3)`, - 'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-focus`, + 'nav-item': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium hover:bg-interactive-hover focus:bg-interactive-active`, 'nav-item-selected': apply`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-divider bg-notion-secondary`, 'main': apply`transition px-4 py-3 overflow-y-auto max-h-full-64 sm:max-h-full-48 md:max-h-full-32 lg:max-h-full-16`, 'main-message': apply`mx-2.5 my-2.5 px-px text-sm text-foreground-secondary text-justify`, @@ -110,7 +110,7 @@ setup({ 'foreground': 'var(--theme--text)', 'foreground-secondary': 'var(--theme--text_secondary)', 'interactive-hover': 'var(--theme--ui_interactive-hover)', - 'interactive-focus': 'var(--theme--ui_interactive-focus)', + 'interactive-active': 'var(--theme--ui_interactive-active)', 'tag': 'var(--theme--tag_default)', 'tag-text': 'var(--theme--tag_default-text)', 'toggle': { diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css index 207639a..7a4f74f 100644 --- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/theme.css @@ -349,7 +349,7 @@ body, .notion-default-overlay-container [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];'] .notion-focusable[style*='background: rgb(223, 223, 222);'] { - background: var(--theme--ui_interactive-focus) !important; + background: var(--theme--ui_interactive-active) !important; } .notion-focusable-within, diff --git a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css index 9f43b96..b7bf564 100644 --- a/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css +++ b/extension/repo/theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082/variables.css @@ -47,7 +47,7 @@ --theme--ui_shadow: rgba(15, 15, 15, 0.15); --theme--ui_divider: rgb(237, 237, 236); --theme--ui_interactive-hover: rgba(55, 53, 47, 0.08); - --theme--ui_interactive-focus: rgba(55, 53, 47, 0.16); + --theme--ui_interactive-active: rgba(55, 53, 47, 0.16); --theme--ui_toggle-on: var(--theme--accent_blue); --theme--ui_toggle-off: rgba(135, 131, 120, 0.3); --theme--ui_toggle-feature: #fff; @@ -211,7 +211,7 @@ --theme--ui_shadow: rgba(15, 15, 15, 0.15); --theme--ui_divider: rgb(255, 255, 255, 0.07); --theme--ui_interactive-hover: rgb(71, 76, 80); - --theme--ui_interactive-focus: rgb(63, 68, 71); + --theme--ui_interactive-active: rgb(63, 68, 71); --theme--ui_toggle-on: var(--theme--accent_blue); --theme--ui_toggle-off: rgba(202, 204, 206, 0.3); --theme--ui_toggle-feature: #fff;