From 3ac4e70507654d9815a867ee3cb3af85a119b2b7 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Tue, 17 Jan 2023 17:42:35 +0000 Subject: [PATCH 1/8] feat: add theme toggle button for error overlay --- packages/astro/src/core/errors/overlay.ts | 63 +++++++++++++++++++++-- 1 file changed, 60 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts index 7ed3df148411..f2cf9c0ad2f5 100644 --- a/packages/astro/src/core/errors/overlay.ts +++ b/packages/astro/src/core/errors/overlay.ts @@ -59,7 +59,12 @@ const style = /* css */ ` rgba(255, 255, 255, 0.96449) 78.38%, rgba(255, 255, 255, 0.991353) 84.11%, #ffffff 89.84% - ); + ); + + /* Theme toggle */ + --theme-toggle-color: #6B7280; + --theme-toggle-background-hover-and-focus: var(--box-background); + /* Syntax Highlighting */ --shiki-color-text: #000000; @@ -74,8 +79,7 @@ const style = /* css */ ` --shiki-token-link: #ee0000; } -@media (prefers-color-scheme: dark) { - :host { + :host(.astro-dark) { --background: #090b11; --error-text: #f49090; --error-text-hover: #ffaaaa; @@ -110,6 +114,9 @@ const style = /* css */ ` #090b11 89.84% ); + /* Theme toggle */ + --theme-toggle-color: #9CA3AF; + /* Syntax Highlighting */ --shiki-color-text: #ffffff; --shiki-token-constant: #90f4e3; @@ -122,8 +129,29 @@ const style = /* css */ ` --shiki-token-punctuation: #ffffff; --shiki-token-link: #ee0000; } + +#theme-toggle{ + display: inline-flex; + padding: 0.625rem; + color: var(--theme-toggle-color); + background-color: var(--theme-toggle-background); + font-size: 0.875rem; + line-height: 1.25rem; + align-items: center; + border-radius: 0.5rem; + border: none; +} + +#theme-toggle:focus{ + box-shadow: 0 0 0 4px var(--theme-toggle-background-hover-and-focus); + outline: 0; } +#theme-toggle:hover{ + background-color: var(--theme-toggle-background-hover-and-focus); +} + + #backdrop { font-family: var(--font-monospace); position: fixed; @@ -172,6 +200,7 @@ const style = /* css */ ` #header-left { min-height: 63px; display: flex; + align-items: flex-start; flex-direction: column; justify-content: end; } @@ -392,6 +421,13 @@ ${style.trim()}
@@ -482,20 +510,27 @@ class ErrorOverlay extends HTMLElement { this.root.innerHTML = overlayTemplate; // theme toggle logic - const themeToggleButton = this.root.querySelector('#theme-toggle'); + const themeToggleLabel = this.root.querySelector('.theme-toggle-label'); + const themeToggle = this.root.querySelector('.theme-toggle-checkbox'); if ( localStorage.astroErrorOverlayTheme === 'dark' || (!('astroErrorOverlayTheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) ) { this?.classList.add('astro-dark'); + themeToggle && (themeToggle.checked = true); } else { this?.classList.remove('astro-dark'); + themeToggle?.checked && (themeToggle.checked = false); } - themeToggleButton?.addEventListener('click', () => { - const isDark = localStorage.astroErrorOverlayTheme === 'dark'; - this?.classList.toggle('astro-dark', !isDark); - localStorage.astroErrorOverlayTheme = isDark ? 'light' : 'dark'; + themeToggleLabel?.addEventListener('click', () => { + if (localStorage.astroErrorOverlayTheme === 'dark') { + this?.classList.remove('astro-dark'); + localStorage.astroErrorOverlayTheme = 'light'; + } else { + this?.classList.add('astro-dark'); + localStorage.astroErrorOverlayTheme = 'dark'; + } }); this.text('#name', err.name); From 635b08a8a5f43ecea2e75d31ffea7763d3794902 Mon Sep 17 00:00:00 2001 From: Moustapha HappyDev Date: Wed, 18 Jan 2023 00:32:43 +0000 Subject: [PATCH 5/8] code figma design --- packages/astro/src/core/errors/overlay.ts | 98 ++++++++++++++--------- 1 file changed, 61 insertions(+), 37 deletions(-) diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts index 1e20d12b0681..5ba21e786561 100644 --- a/packages/astro/src/core/errors/overlay.ts +++ b/packages/astro/src/core/errors/overlay.ts @@ -63,8 +63,10 @@ const style = /* css */ ` /* Theme toggle */ --toggle-ball-color: var(--accent); + --toggle-tabel-background: var(--background); --sun-icon-color: #ffffff; - --moon-icon-color: var(--hint-text); + --moon-icon-color: #a3acc8; + --toggle-border-color: #C3CADB; /* Syntax Highlighting */ --shiki-color-text: #000000; @@ -114,6 +116,11 @@ const style = /* css */ ` #090b11 89.84% ); + /* Theme toggle */ + --sun-icon-color: #505D84; + --moon-icon-color: #090B11; + --toggle-border-color: #3D4663; + /* Syntax Highlighting */ --shiki-color-text: #ffffff; --shiki-token-constant: #90f4e3; @@ -126,42 +133,55 @@ const style = /* css */ ` --shiki-token-punctuation: #ffffff; --shiki-token-link: #ee0000; } + +#theme-toggle-wrapper{ + position: relative; + display: inline-block +} +#theme-toggle-wrapper > div{ + position: absolute; + right: 3px; + margin-top: 3px; +} + .theme-toggle-checkbox { opacity: 0; position: absolute; } -.theme-toggle-label { - background-color: #111; +#theme-toggle-label { + background-color: var(--toggle-tabel-background); border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; - padding: 5px; + padding: 7.5px; position: relative; - height: 26px; - width: 65px; + width: 66px; + height: 30px; transform: scale(1.2); + box-shadow: 0 0 0 1px var(--toggle-border-color); } -.theme-toggle-label .theme-toggle-ball { +#theme-toggle-label #theme-toggle-ball { background-color: var(--accent); border-radius: 50%; position: absolute; - top: 2px; - left: 2px; - height: 22px; - width: 22px; - transform: translateX(0px); - transform: scale(1.3); - transform-origin: center; - transition: transform 0.2s linear; + height: 30px; + width: 30px; + transform: translateX(-7.5px); + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; } -.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-ball { - transform: translateX(24px); +.theme-toggle-checkbox:checked + #theme-toggle-label #theme-toggle-ball { + transform: translateX(28.5px); +} + +.icon-tabler{ + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; + z-index: 10; } .icon-tabler-moon { @@ -186,6 +206,7 @@ const style = /* css */ ` #layout { max-width: min(100%, 1280px); + position: relative; width: 1280px; margin: 0 auto; padding: 40px; @@ -199,6 +220,12 @@ const style = /* css */ ` padding: 12px; margin-top: 12px; } + + #theme-toggle-wrapper > div{ + position: absolute; + right: 22px; + margin-top: 47px; + } #layout { padding: 0; @@ -439,23 +466,25 @@ ${style.trim()}
-