New design tokens (#169)

* add new tokens as css vars

* theme toggle and more updates

* fix docsearch background blur

* more margin

* replace all cdn dependencies, move toggle back to header

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

* fix build

* try fixing docsearch styles

* setTheme in head scripts improved

* move docsearch styles to vendor folder

* preserve css vars in build

* Trigger Build

* small docsearch styles

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,9 +42,11 @@ module.exports = (src, dest, preview) => () => {
       }),
     postcssUrl([
       {
-        filter: (asset) => new RegExp('^[~][^/]*(?:font|typeface)[^/]*/.*/files/.+[.](?:ttf|woff2?)$').test(asset.url),
+        filter: (asset) => new RegExp('.+[.](?:ttf|woff2?)(?:\\?[^\\s]*)?$').test(asset.url),
         url: (asset) => {
-          const relpath = asset.pathname.substr(1)
+          let relpath = asset.pathname
+          if (relpath.includes('lucide')) relpath = `lucide-static/font/${relpath}`
+          if (relpath.includes('~@fontsource')) relpath = relpath.replace('~', '')
           const abspath = require.resolve(relpath)
           const basename = ospath.basename(abspath)
           const destpath = ospath.join(dest, 'font', basename)
@@ -57,9 +59,7 @@ module.exports = (src, dest, preview) => () => {
     // only run tailwindcss in preview, datastax-docs-site repo has it's own tailwind cli step
     preview ? tailwindcss(tailwindconfig) : () => {},
     postcssAdvancedVars,
-    postcssVar({ preserve: preview }),
-    // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one
-    //postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
+    postcssVar({ preserve: true }),
     preview ? postcssCalc : () => {}, // cssnano already applies postcssCalc
     autoprefixer,
     preview