Styling

Author: josevalim

assets/css/autocomplete.css

@@ -10,7 +10,7 @@
   height: 0;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
-  border-bottom: 12px solid var(--autocompleBackground);
+  border-bottom: 12px solid var(--autocompleteBackground);
   position: absolute;
   top: 8px;
   left: 26px;
@@ -23,11 +23,10 @@
   width: 100%;
   margin: 0;
   height: 65vh;
+  background-color: var(--background);
   font-family: var(--sansFontFamily);
   border: 4px solid var(--autocompleteBorder);
-  font-weight: 300;
-  flex-grow: 12;
-  font-size: 0.9rem;
+  padding: 12px 16px;
 }
 
 .autocomplete-preview iframe {
@@ -65,7 +64,7 @@
 }
 
 .autocomplete-suggestions {
-  background-color: var(--autocompleBackground);
+  background-color: var(--autocompleteBackground);
   border-radius: 8px;
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto;
@@ -94,10 +93,6 @@
   display: none;
 }
 
-.autocomplete-preview {
-  width: 100%
-}
-
 .autocomplete-suggestion {
   color: inherit;
   display: block;
@@ -121,27 +116,48 @@
   background-color: var(--autocompleteHover);
 }
 
-.autocomplete-suggestion:not(.selected) .autocomplete-suggestion-preview-indicator {
+.autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator {
   display: none;
 }
 
-.autocomplete-suggestion:hover .autocomplete-suggestion-preview-indicator {
-  display: block;
+.autocomplete-preview-indicator {
+  float: right;
 }
 
-.autocomplete-suggestion-preview-indicator {
-  float: right;
-  border-radius: 100%;
+.autocomplete-preview-indicator button {
+  color: var(--iconAction);
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  border: 1px solid var(--suggestionBorder);
+  border-radius: 8px;
+  transition: color .3s ease-in-out;
+  background-color: var(--autocompletePreview);
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+
+.autocomplete-preview-indicator button:hover {
+  color: var(--iconActionHover);
+  background-color: var(--autocompleteHover);
 }
 
-.autocomplete-suggestions.previewing .autocomplete-suggestion-preview-indicator-closed {
+.autocomplete-preview-indicator button i {
+  margin-right: 4px;
+}
+
+.autocomplete-suggestions.previewing .autocomplete-preview-indicator-closed {
   display: none;
 }
 
-.autocomplete-suggestions:not(.previewing) .autocomplete-suggestion-preview-indicator-open {
+.autocomplete-suggestions:not(.previewing) .autocomplete-preview-indicator-open {
   display: none;
 }
 
+.autocomplete-suggestion:hover:not(.selected) .autocomplete-preview-indicator-closed {
+  display: block;
+}
 
 .autocomplete-suggestion em {
   font-style: normal;

assets/css/custom-props/theme-dark.css

@@ -91,9 +91,10 @@ body.dark {
   --searchBarBorder:             var(--gray500);
   --searchAccentMain:            var(--gray300);
   --searchSearch:                var(--gray900);
-  --autocompleteBorder:          rgba(0,0,0,.25);
+  --autocompleteBorder:          rgba(28,42,60,.75);
+  --autocompletePreview:         var(--gray750);
   --autocompleteHover:           var(--gray700);
-  --autocompleBackground:        var(--gray800);
+  --autocompleteBackground:      var(--gray800);
   --suggestionBorder:            var(--gray600);
   --autocompleteResults:         var(--gray200);
   --autocompleteResultsBold:     var(--gray100);

assets/css/custom-props/theme-light.css

@@ -93,8 +93,9 @@
   --searchLanguageAccentBar:     var(--main);
   --searchSearch:                var(--white);
   --autocompleteBorder:          rgba(3, 9, 19, 0.10);
+  --autocompletePreview:         var(--gray25);
   --autocompleteHover:           var(--grey50, #F0F5F9);
-  --autocompleBackground:        var(--white); 
+  --autocompleteBackground:      var(--white);
   --suggestionBorder:            var(--gray200);
   --autocompleteResults:         var(--gray600);
   --autocompleteResultsBold:     var(--gray800);

assets/js/autocomplete/autocomplete-list.js

@@ -1,5 +1,6 @@
 import { getSuggestions } from './suggestions'
 import { isBlank, qs } from '../helpers'
+import { currentTheme } from '../theme'
 
 export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
 export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions'
@@ -99,7 +100,7 @@ export function setAutocompleteSelection (index) {
       const newContainer = document.createElement('div')
       newContainer.classList.add('autocomplete-preview')
       const iframe = document.createElement('iframe')
-      const previewHref = elementToSelect.href.replace('.html', '.html?preview=true')
+      const previewHref = elementToSelect.href.replace('.html', `.html?preview=true&theme=${currentTheme()}`)
       // The minimum permissions necessary for the iframe to run JavaScript and communicate with the parent window.
       iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups')
       iframe.setAttribute('src', previewHref)
@@ -117,11 +118,11 @@ export function setAutocompleteSelection (index) {
 /**
  * Toggles the preview state of the autocomplete list
  */
-export function togglePreview (elementToSelect) {
+export function togglePreview () {
   if (state.previewOpen) {
     hidePreview()
   } else {
-    showPreview(elementToSelect)
+    showPreview()
   }
 }
 
@@ -138,7 +139,7 @@ export function hidePreview () {
 /**
  * Shows the preview state of the autocomplete list
  */
-function showPreview (elementToSelect) {
+export function showPreview (elementToSelect) {
   state.previewOpen = true
 
   if (elementToSelect) {

assets/js/entry/html.js

@@ -25,7 +25,7 @@ onDocumentReady(() => {
   const params = new URLSearchParams(window.location.search)
   const isPreview = params.has('preview')
 
-  initTheme()
+  initTheme(params.get('theme'))
   initContent(isPreview)
   initMakeup()
   initTooltips()

assets/js/handlebars/templates/autocomplete-suggestions.handlebars

@@ -22,14 +22,14 @@
           {{#each labels}}
           <span class="label">{{this}}</span>
           {{/each}}
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open">
-            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Close preveiw" tabindex="-1">
+          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-open">
+            <button onclick="onTogglePreviewClick(event, false)" title="Close preview" tabindex="-1">
               <i class="ri-close-line" aria-hidden="true"></i>
               Close preview
             </button>
           </div>
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed">
-            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Open preview" tabindex="-1">
+          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-closed">
+            <button onclick="onTogglePreviewClick(event, true)" title="Open preview" tabindex="-1">
               <i class="ri-search-2-line" aria-hidden="true"></i>
               Open preview
             </button>

assets/js/search-bar.js

@@ -4,6 +4,7 @@ import {
   moveAutocompleteSelection,
   selectedAutocompleteSuggestion,
   togglePreview,
+  showPreview,
   hidePreview,
   updateAutocompleteList,
   AUTOCOMPLETE_CONTAINER_SELECTOR,
@@ -20,14 +21,15 @@ const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
 export function initialize () {
   addEventListeners()
 
-  window.onTogglePreviewClick = function onTogglePreviewClick (event) {
+  window.onTogglePreviewClick = function (event, open) {
     event.preventDefault()
     event.stopImmediatePropagation()
 
-    // Keep the focus on the input instead of the button when the user clicked to open the preview
+    // Keep the focus on the input instead of the button
+    // when the user clicked to open the preview.
     // Maintains consistent keyboard navigation and look
     focusSearchInput()
-    togglePreview(event.target)
+    if (open) { showPreview(event.target) } else { hidePreview() }
   }
 }
 

assets/js/theme.js

@@ -7,9 +7,9 @@ const THEMES = ['system', 'dark', 'light']
 /**
  * Sets initial night mode state and registers to settings updates.
  */
-export function initialize () {
+export function initialize (theme) {
   settingsStore.getAndSubscribe(settings => {
-    document.body.classList.toggle(DARK_MODE_CLASS, shouldUseDarkMode(settings))
+    document.body.classList.toggle(DARK_MODE_CLASS, shouldUseDarkMode(theme || settings.theme))
   })
   listenToDarkMode()
 }
@@ -18,18 +18,20 @@ export function initialize () {
  * Cycles through themes and saves the preference.
  */
 export function cycleTheme () {
-  const settings = settingsStore.get()
-  const currentTheme = settings.theme || 'system'
-  const nextTheme = THEMES[THEMES.indexOf(currentTheme) + 1] || THEMES[0]
+  const nextTheme = THEMES[THEMES.indexOf(currentTheme()) + 1] || THEMES[0]
   settingsStore.update({ theme: nextTheme })
   showToast(`Set theme to "${nextTheme}"`)
 }
 
-function shouldUseDarkMode (settings) {
+export function currentTheme () {
+  return settingsStore.get().theme || 'system'
+}
+
+function shouldUseDarkMode (theme) {
   // nightMode used to be true|false|null
   // Now it's 'dark'|'light'|'system'|null with null treated as 'system'
-  return (settings.theme === 'dark') ||
-         (prefersDarkColorScheme() && (settings.theme == null || settings.theme === 'system'))
+  return (theme === 'dark') ||
+         (prefersDarkColorScheme() && (theme == null || theme === 'system'))
 }
 
 function prefersDarkColorScheme () {
@@ -38,9 +40,9 @@ function prefersDarkColorScheme () {
 
 function listenToDarkMode () {
   window.matchMedia('(prefers-color-scheme: dark)').addListener(_e => {
-    const settings = settingsStore.get()
-    const isNight = shouldUseDarkMode(settings)
-    if (settings.theme == null || settings.theme === 'system') {
+    const theme = settingsStore.get().theme
+    const isNight = shouldUseDarkMode(theme)
+    if (theme == null || theme === 'system') {
       document.body.classList.toggle(DARK_MODE_CLASS, isNight)
       showToast(`Browser changed theme to "${isNight ? 'dark' : 'light'}"`)
     }