default storm

Author: motdotla

_data/footer.yml

@@ -48,3 +48,5 @@ links:
     external: true
   - label: Log In
     href: /login
+  - label: Theme
+    theme_toggle: true

_includes/components/footer.html

@@ -3,7 +3,7 @@
     <p class="design-list-title">{{ site.data.footer.title }}</p>
     <p class="footer-cloud">
       {%- for link in site.data.footer.links %}
-      <span class="footer-item"><a class="design-link" href="{{ link.href }}"{% if link.external %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ link.label }}</a>{% unless forloop.last %}<span class="footer-sep" aria-hidden="true">&nbsp;·</span>{% endunless %}</span>
+      <span class="footer-item">{% if link.theme_toggle %}<button type="button" class="design-link" data-radar-theme-toggle>{{ link.label }}</button>{% else %}<a class="design-link" href="{{ link.href }}"{% if link.external %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ link.label }}</a>{% endif %}{% unless forloop.last %}<span class="footer-sep" aria-hidden="true">&nbsp;·</span>{% endunless %}</span>
       {%- endfor %}
     </p>
   </div>

_includes/layouts/radar-theme.html

@@ -4,7 +4,7 @@
 
     function resolveThemeMode() {
       var stored = localStorage.getItem('themeMode')
-      var mode = MODES.indexOf(stored) !== -1 ? stored : 'dark'
+      var mode = MODES.indexOf(stored) !== -1 ? stored : 'storm'
       if (!stored) localStorage.setItem('themeMode', mode)
       return mode
     }
@@ -41,8 +41,8 @@
     try {
       applyThemeMode(resolveThemeMode())
     } catch (e) {
-      document.documentElement.classList.add('dark')
+      document.documentElement.classList.add('dark', 'storm')
     }
   })()
 </script>
-<meta name="theme-color" content="#0a0a0a">
+<meta name="theme-color" content="#14171c">

assets/css/main.src.css

@@ -3205,18 +3205,18 @@ html.dark .design-table tbody tr:last-child {
   border-radius: 6px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   color: #fff;
+  /* Hidden tips still expand page scrollWidth (nowrap + translateX(-50%)) */
+  display: none;
   font-family: var(--design-font-sans);
   font-size: var(--design-text-compact);
   left: 50%;
   letter-spacing: 0;
   line-height: 1.25;
-  opacity: 0;
   padding: 0.4rem 0.65rem;
   pointer-events: none;
   position: absolute;
   text-transform: none;
   transform: translateX(-50%);
-  transition: opacity 100ms ease;
   white-space: nowrap;
   z-index: 40;
 }
@@ -3240,11 +3240,12 @@ html.dark .design-table tbody tr:last-child {
 
 .design-tooltip:hover .design-tooltip-tip,
 .design-tooltip:focus-within .design-tooltip-tip {
-  opacity: 1;
+  display: block;
 }
 
 .armor-usage-card {
   background: var(--design-panel);
+  max-width: 100%;
   overflow: visible;
   padding: 1rem 1rem 1.1rem;
   width: 100%;

assets/js/radar-theme.js

@@ -1,6 +1,6 @@
 (function () {
   var MODES = ['light', 'dark', 'storm']
-  var mode = 'dark'
+  var mode = 'storm'
 
   function modes() {
     return (window.__radarThemeMode && window.__radarThemeMode.modes) || MODES
@@ -12,7 +12,7 @@
     }
     var stored = localStorage.getItem('themeMode')
     var list = modes()
-    mode = list.indexOf(stored) !== -1 ? stored : 'dark'
+    mode = list.indexOf(stored) !== -1 ? stored : 'storm'
     if (!stored) localStorage.setItem('themeMode', mode)
     return mode
   }