rework theme mechanism so toggle buttons are styled right away, add docs for lucide icons

Author: colegoldsmith

gulp.d/tasks/build-preview-pages.js

@@ -14,6 +14,12 @@ const yaml = require('js-yaml')
 
 const ASCIIDOC_ATTRIBUTES = { experimental: '', icons: 'font', sectanchors: '', 'source-highlighter': 'highlight.js' }
 
+const algoliaTestKeys = {
+  algoliaAppId: 'R2IYF7ETH7',
+  algoliaIndexName: 'docsearch',
+  algoliaApiKey: '599cec31baffa4868cae4e79f180729b',
+}
+
 module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
   Promise.all([
     loadSampleUiModel(previewSrc),
@@ -37,7 +43,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
       for (const component of baseUiModel.site.components) {
         for (const version of component.versions || []) version.asciidoc = asciidoc
       }
-      baseUiModel = { ...baseUiModel, env: process.env }
+      baseUiModel = { ...baseUiModel, env: process.env, site: { ...baseUiModel.site, keys: algoliaTestKeys } }
       delete baseUiModel.asciidoc
       return [baseUiModel, layouts]
     })

gulp.d/tasks/build.js

@@ -42,13 +42,11 @@ module.exports = (src, dest, preview) => () => {
       }),
     postcssUrl([
       {
-        filter: (asset) => new RegExp('.+[.](?:ttf|woff2?)$').test(asset.url),
+        filter: (asset) => new RegExp('.+[.](?:ttf|woff2?)(?:\\?[^\\s]*)?$').test(asset.url),
         url: (asset) => {
-          const relpath = asset.pathname.substr(1)
-          const abspath = require.resolve(relpath)
-          const basename = ospath.basename(abspath)
+          const basename = ospath.basename(asset.absolutePath)
           const destpath = ospath.join(dest, 'font', basename)
-          if (!fs.pathExistsSync(destpath)) fs.copySync(abspath, destpath)
+          if (!fs.pathExistsSync(destpath)) fs.copySync(asset.absolutePath, destpath)
           return path.join('..', 'font', basename)
         },
       },

preview-src/asciidoc/images.adoc

@@ -112,7 +112,7 @@ Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vec
 
 [NOTE]
 ======
-You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] or an svg file using the customized `icon` macro or the `material-icons` role.
+You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] and https://lucide.dev/icons/[Lucide Icons,window=_blank]. You can also apply an svg file using the customized `icon` macro.
 
 Method 1: Inline icon macro with an svg file::
 The customized inline icon macro accepts a file path as it's target source. The file must be an svg file.
@@ -127,6 +127,8 @@ icon:ROOT:ui/icons/vector.svg[]
 Method 2: Inline icon macro with a material-icons target::
 The customized inline icon macro supports material icon names as it's target source prefixed with `material-icons:`. Ensure the name is lower case with underscores instead of spaces.
 +
+This macro does not yet support Lucide icons.
++
 This method supports light and dark mode automatically.
 +
 [source]
@@ -151,12 +153,31 @@ thumb_up
 ----
 Inline material icons [.material-icons]#thumb_up#
 ----
-======
++ 
+[.material-icons]#thumb_up# [.material-icons]#rocket_launch#
 
-[.material-icons]
-add_reaction
+Method 4: Lucide icons with HTML passthrough::
+Use block or inline HTML passthrough to create an icon element `<i class="icon-{icon-name}"></i>`.
++
+This method supports light and dark mode automatically.
++
+.Block passthrough
+[source]
+----
+++++
+<i class="icon-boom-box"></i>
+++++
+----
++
+.Inline passthrough
+[source]
+----
+Inline lucide icons +++<i class="icon-boom-box"></i>+++
+----
++
++++<i class="icon-boom-box"></i>+++ +++<i class="icon-atom"></i>+++ +++<i class="icon-moon"></i>+++
+======
 
-Inline material icons [.material-icons]#thumb_up# [.material-icons]#support# [.material-icons]#code# [.material-icons]#rocket_launch# [.material-icons.text-2xl]#rocket_launch# [.material-icons.text-3xl]#rocket_launch#
 
 == Video
 

src/css/asciidoc/admonition-block.css

@@ -59,12 +59,12 @@
   }
 
   .doc .admonitionblock.note .icon::before {
-    color: var(--ds-success-500);
+    color: var(--ds-success-soft-color);
     content: "\e88e";
   }
 
   .doc .admonitionblock.tip .icon::before {
-    color: var(--ds-success-500);
+    color: var(--ds-success-soft-color);
     content: "\e0f0";
   }
 
@@ -79,7 +79,7 @@
   }
 
   .doc .admonitionblock.caution .icon::before {
-    color: var(--ds-warning-500);
+    color: var(--ds-warning-soft-color);
     content: "\e88e";
   }
 
@@ -96,16 +96,12 @@
   }
 
   .doc .admonitionblock.warning .icon::before {
-    color: var(--ds-failure-500);
+    color: var(--ds-failure-soft-color);
     content: "\f083";
   }
 
   .doc .admonitionblock.important .icon::before {
-    color: var(--ds-failure-500);
+    color: var(--ds-failure-soft-color);
     content: "\e160";
   }
-
-  html[data-theme="dark"] .doc .admonitionblock .icon::before {
-    color: var(--ds-primary-text);
-  }
 }

src/css/asciidoc/doc.css

@@ -430,39 +430,17 @@
     border-radius: var(--ds-space-1);
     transform: translate(-0.25rem, -50%);
   }
-
-  .doc .admonitionblock.caution .icon {
-    background-color: var(--ds-primary-main);
-    color: var(--ds-text-inverse);
-  }
-
-  .doc .admonitionblock.important .icon {
-    background-color: var(--ds-failure-man);
-    color: var(--ds-text-inverse);
-  }
-
-  .doc .admonitionblock.note .icon {
-    background-color: var(--ds-cyan-main);
-    color: var(--ds-text-inverse);
-  }
-
-  .doc .admonitionblock.tip .icon {
-    background-color: var(--ds-success-main);
-    color: var(--ds-text-inverse);
-  }
-
-  .doc .admonitionblock.warning .icon {
-    background-color: var(--ds-warning-main);
-    color: var(--ds-text-inverse);
-  }
-
+  
   .doc .admonitionblock .icon i {
     display: inline-flex;
     align-items: center;
     height: 100%;
   }
 
   .doc .admonitionblock .icon i::after {
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: "Roboto Flex", sans-serif;
     content: attr(title);
   }
 

src/css/docsearch.css

@@ -15,7 +15,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
 .DocSearch .DocSearch-Commands-Key,
 .DocSearch .DocSearch-Button-Key {
   border-radius: 4px;
-  color: var(--ds-text-tertiary);
+  color: var(--ds-text-secondary);
 }
 
 .DocSearch .DocSearch-LoadingIndicator svg,
@@ -128,7 +128,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
   --docsearch-hit-shadow: none;
 
   /* key */
-  --docsearch-key-gradient: var(--ds-background-level1);
+  --docsearch-key-gradient: var(--ds-background-level2);
   --docsearch-key-shadow: none;
 
   /* footer */
@@ -149,7 +149,7 @@ html[data-theme="dark"] .DocSearch {
   --docsearch-hit-color: var(--ds-text-primary);
   --docsearch-hit-shadow: none;
   --docsearch-hit-background: var(--ds-background-body);
-  --docsearch-key-gradient: var(--ds-background-level1);
+  --docsearch-key-gradient: var(--ds-background-level2);
   --docsearch-key-shadow: none;
   --docsearch-footer-background: var(--ds-background-body);
   --docsearch-footer-shadow: none;

src/css/site.css

@@ -3,6 +3,7 @@
 @import "vars/dark.css";
 @import "color.css";
 @import "base.css";
+@import "theme-toggle.css";
 @import "utilities.css";
 @import "typography.css";
 @import "components/btn.css";

src/css/theme-toggle.css

@@ -0,0 +1,32 @@
+html[data-theme="light"]:not([data-theme-system="true"]) {
+  & #theme-toggle .thumb {
+    transform: translateX(0);
+    background-color: theme(colors.amber.300);
+  }
+  & #theme-toggle .toggle-button.light:hover {
+    background-color: transparent;
+  }
+}
+
+html[data-theme="dark"]:not([data-theme-system="true"]) {
+  & #theme-toggle .thumb {
+    transform: translateX(1.6125rem);
+    background-color: theme(colors.purple.500);
+  }
+  & #theme-toggle .toggle-button.dark:hover {
+    background-color: transparent;
+  }
+}
+
+html[data-theme-system="true"] {
+  & #theme-toggle .thumb {
+    transform: translateX(3.25rem);
+    background-color: var(--ds-neutral-solid-bg);
+  }
+  & #theme-toggle .toggle-button.system {
+    color: var(--ds-neutral-solid-color);
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}

src/css/typeface/typeface-lucide-icons.css

@@ -1,8 +1 @@
 @import "lucide-static/font/lucide.css";
-
-@font-face {
-  font-family: "lucide";
-  font-style: normal;
-  font-weight: 400;
-  src: url(~lucide-static/font/lucide.woff2) format("woff2");
-}

src/css/utilities.css

@@ -7,4 +7,20 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.3;
+    }
+  }
+
+  .animate-fade-in-out {
+    animation: fadeInOut 3s infinite;
+  }
 }