From a9599978625f83d3ca02695da2f886ba76243e7c Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Thu, 7 Nov 2024 22:40:00 -0600 Subject: [PATCH] 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 --- gulp.d/tasks/build-preview-pages.js | 8 +- gulp.d/tasks/build.js | 10 +- package-lock.json | 617 ++++++++++++++++++ package.json | 3 + preview-src/asciidoc/images.adoc | 31 +- src/css/asciidoc/admonition-block.css | 14 +- src/css/asciidoc/doc.css | 30 +- src/css/asciidoc/source-block.css | 4 +- src/css/asciidoc/tabs.css | 4 +- src/css/base.css | 17 +- src/css/components/btn.css | 12 +- src/css/components/dialog.css | 2 +- src/css/docsearch.css | 28 +- src/css/global-nav.css | 4 +- src/css/highlight.css | 12 +- src/css/site.css | 4 +- src/css/theme-toggle.css | 32 + src/css/typeface/typeface-lucide-icons.css | 1 + src/css/utilities.css | 16 + src/css/vars/dark.css | 261 +++----- src/css/vars/light.css | 261 +++----- src/css/vars/vars.css | 110 +--- src/css/vendor/docsearch.css | 1 + src/js/03-theme-toggle.js | 48 +- src/js/{10-collapse.js => 09-collapse.js} | 0 src/js/vendor/docsearch.bundle.js | 1 + .../floatingui.bundle.js} | 2 +- src/partials/body-end-scripts.hbs | 9 +- src/partials/global-nav.hbs | 2 +- src/partials/head-scripts.hbs | 45 +- src/partials/head-styles.hbs | 30 + src/partials/nav-secondary.hbs | 10 +- src/partials/nav-tree.hbs | 2 +- src/partials/nav.hbs | 4 +- src/partials/navbar.hbs | 21 +- src/partials/page-versions.hbs | 2 +- src/partials/support-feedback.hbs | 2 +- src/partials/theme-toggle.hbs | 27 + 38 files changed, 1102 insertions(+), 585 deletions(-) create mode 100644 src/css/theme-toggle.css create mode 100644 src/css/typeface/typeface-lucide-icons.css create mode 100644 src/css/vendor/docsearch.css rename src/js/{10-collapse.js => 09-collapse.js} (100%) create mode 100644 src/js/vendor/docsearch.bundle.js rename src/js/{09-dropdown.js => vendor/floatingui.bundle.js} (97%) create mode 100644 src/partials/theme-toggle.hbs diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js index a3bfa810..f62bd942 100644 --- a/gulp.d/tasks/build-preview-pages.js +++ b/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] }) diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js index 1b89d0e4..92a4a4e2 100644 --- a/gulp.d/tasks/build.js +++ b/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 diff --git a/package-lock.json b/package-lock.json index 168ee832..f78553c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "@antora/logger": "^3.1.4", "@asciidoctor/core": "~2.2", "@asciidoctor/tabs": "1.0.0-beta.6", + "@docsearch/js": "^3.7.0", + "@floating-ui/dom": "^1.6.12", "@fontsource-variable/roboto-flex": "~5.0", "@fontsource-variable/sora": "^5.0.15", "@fontsource/material-icons-outlined": "~5.0", @@ -40,6 +42,7 @@ "highlight.js": "9.18.3", "highlightjs-curl": "^1.3.0", "js-yaml": "~3.13", + "lucide-static": "^0.454.0", "merge-stream": "~2.0", "postcss": "~8.4", "postcss-advanced-variables": "^3.0.1", @@ -69,6 +72,231 @@ "node": ">=0.10.0" } }, + "node_modules/@algolia/autocomplete-core": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.17.6.tgz", + "integrity": "sha512-lkDoW4I7h2kKlIgf3pUt1LqvxyYKkVyiypoGLlUnhPSnCpmeOwudM6rNq6YYsCmdQtnDQoW5lUNNuj6ASg3qeg==", + "dev": true, + "dependencies": { + "@algolia/autocomplete-plugin-algolia-insights": "1.17.6", + "@algolia/autocomplete-shared": "1.17.6" + } + }, + "node_modules/@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.6.tgz", + "integrity": "sha512-17NnaacuFzSWVuZu4NKzVeaFIe9Abpw8w+/gjc7xhZFtqj+GadufzodIdchwiB2eM2cDdiR3icW7gbNTB3K2YA==", + "dev": true, + "dependencies": { + "@algolia/autocomplete-shared": "1.17.6" + }, + "peerDependencies": { + "search-insights": ">= 1 < 3" + } + }, + "node_modules/@algolia/autocomplete-preset-algolia": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.6.tgz", + "integrity": "sha512-Cvg5JENdSCMuClwhJ1ON1/jSuojaYMiUW2KePm18IkdCzPJj/NXojaOxw58RFtQFpJgfVW8h2E8mEoDtLlMdeA==", + "dev": true, + "dependencies": { + "@algolia/autocomplete-shared": "1.17.6" + }, + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/autocomplete-shared": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.6.tgz", + "integrity": "sha512-aq/3V9E00Tw2GC/PqgyPGXtqJUlVc17v4cn1EUhSc+O/4zd04Uwb3UmPm8KDaYQQOrkt1lwvCj2vG2wRE5IKhw==", + "dev": true, + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/client-abtesting": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.12.0.tgz", + "integrity": "sha512-hx4eVydkm3yrFCFxmcBtSzI/ykt0cZ6sDWch+v3JTgKpD2WtosMJU3Upv1AjQ4B6COSHCOWEX3vfFxW6OoH6aA==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-analytics": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.12.0.tgz", + "integrity": "sha512-EpTsSv6IW8maCfXCDIptgT7+mQJj7pImEkcNUnxR8yUKAHzTogTXv9yGm2WXOZFVuwstd2i0sImhQ1Vz8RH/hA==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-common": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.12.0.tgz", + "integrity": "sha512-od3WmO8qxyfNhKc+K3D17tvun3IMs/xMNmxCG9MiElAkYVbPPTRUYMkRneCpmJyQI0hNx2/EA4kZgzVfQjO86Q==", + "dev": true, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-insights": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.12.0.tgz", + "integrity": "sha512-8alajmsYUd+7vfX5lpRNdxqv3Xx9clIHLUItyQK0Z6gwGMbVEFe6YYhgDtwslMAP0y6b0WeJEIZJMLgT7VYpRw==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-personalization": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.12.0.tgz", + "integrity": "sha512-bUV9HtfkTBgpoVhxFrMkmVPG03ZN1Rtn51kiaEtukucdk3ggjR9Qu1YUfRSU2lFgxr9qJc8lTxwfvhjCeJRcqw==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-query-suggestions": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.12.0.tgz", + "integrity": "sha512-Q5CszzGWfxbIDs9DJ/QJsL7bP6h+lJMg27KxieEnI9KGCu0Jt5iFA3GkREkgRZxRdzlHbZKkrIzhtHVbSHw/rg==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-search": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.12.0.tgz", + "integrity": "sha512-R3qzEytgVLHOGNri+bpta6NtTt7YtkvUe/QBcAmMDjW4Jk1P0eBYIPfvnzIPbINRsLxIq9fZs9uAYBgsrts4Zg==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/ingestion": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.12.0.tgz", + "integrity": "sha512-zpHo6qhR22tL8FsdSI4DvEraPDi/019HmMrCFB/TUX98yzh5ooAU7sNW0qPL1I7+S++VbBmNzJOEU9VI8tEC8A==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/monitoring": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.12.0.tgz", + "integrity": "sha512-i2AJZED/zf4uhxezAJUhMKoL5QoepCBp2ynOYol0N76+TSoohaMADdPnWCqOULF4RzOwrG8wWynAwBlXsAI1RQ==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/recommend": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.12.0.tgz", + "integrity": "sha512-0jmZyKvYnB/Bj5c7WKsKedOUjnr0UtXm0LVFUdQrxXfqOqvWv9n6Vpr65UjdYG4Q49kRQxhlwtal9WJYrYymXg==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-browser-xhr": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.12.0.tgz", + "integrity": "sha512-KxwleraFuVoEGCoeW6Y1RAEbgBMS7SavqeyzWdtkJc6mXeCOJXn1iZitb8Tyn2FcpMNUKlSm0adrUTt7G47+Ow==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-fetch": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.12.0.tgz", + "integrity": "sha512-FuDZXUGU1pAg2HCnrt8+q1VGHKChV/LhvjvZlLOT7e56GJie6p+EuLu4/hMKPOVuQQ8XXtrTHKIU3Lw+7O5/bQ==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-node-http": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.12.0.tgz", + "integrity": "sha512-ncDDY7CxZhMs6LIoPl+vHFQceIBhYPY5EfuGF1V7beO0U38xfsCYEyutEFB2kRzf4D9Gqppn3iWX71sNtrKcuw==", + "dev": true, + "dependencies": { + "@algolia/client-common": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -237,6 +465,54 @@ "node": ">=4.0.0" } }, + "node_modules/@docsearch/css": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.7.0.tgz", + "integrity": "sha512-1OorbTwi1eeDmr0v5t+ckSRlt1zM5GHjm92iIl3kUu7im3GHuP+csf6E0WBg8pdXQczTWP9J9+o9n+Vg6DH5cQ==", + "dev": true + }, + "node_modules/@docsearch/js": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.7.0.tgz", + "integrity": "sha512-ScfqOIKrSr8SImbpxVaD59xc/bytbL8QEM2GUpe3aICmoICflWp5DyTRzAdFky16HY+yEOAVZXt3COXQ1NOCWw==", + "dev": true, + "dependencies": { + "@docsearch/react": "3.7.0", + "preact": "^10.0.0" + } + }, + "node_modules/@docsearch/react": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.7.0.tgz", + "integrity": "sha512-8e6tdDfkYoxafEEPuX5eE1h9cTkLvhe4KgoFkO5JCddXSQONnN1FHcDZRI4r8894eMpbYq6rdJF0dVYh8ikwNQ==", + "dev": true, + "dependencies": { + "@algolia/autocomplete-core": "1.17.6", + "@algolia/autocomplete-preset-algolia": "1.17.6", + "@docsearch/css": "3.7.0", + "algoliasearch": "^5.12.0" + }, + "peerDependencies": { + "@types/react": ">= 16.8.0 < 19.0.0", + "react": ">= 16.8.0 < 19.0.0", + "react-dom": ">= 16.8.0 < 19.0.0", + "search-insights": ">= 1 < 3" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "search-insights": { + "optional": true + } + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -425,6 +701,31 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dev": true, + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "dev": true + }, "node_modules/@fontsource-variable/roboto-flex": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.8.tgz", @@ -894,6 +1195,30 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/algoliasearch": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.12.0.tgz", + "integrity": "sha512-psGBRYdGgik8I6m28iAB8xpubvjEt7UQU+w5MAJUA2324WHiGoHap5BPkkjB14rMaXeRts6pmOsrVIglGyOVwg==", + "dev": true, + "dependencies": { + "@algolia/client-abtesting": "5.12.0", + "@algolia/client-analytics": "5.12.0", + "@algolia/client-common": "5.12.0", + "@algolia/client-insights": "5.12.0", + "@algolia/client-personalization": "5.12.0", + "@algolia/client-query-suggestions": "5.12.0", + "@algolia/client-search": "5.12.0", + "@algolia/ingestion": "1.12.0", + "@algolia/monitoring": "1.12.0", + "@algolia/recommend": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, "node_modules/alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", @@ -8839,6 +9164,12 @@ "yallist": "^2.1.2" } }, + "node_modules/lucide-static": { + "version": "0.454.0", + "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.454.0.tgz", + "integrity": "sha512-Jr6Xbn/WOXUy5ULRp191s+JUEqoHxEBIG6tlqEZw7sHnRVIgfIKF8T5VsoOb63p/oODGdEA4BRZ+qtaVFXt/6A==", + "dev": true + }, "node_modules/magic-string": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.23.2.tgz", @@ -11988,6 +12319,16 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/preact": { + "version": "10.24.3", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", + "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -13496,6 +13837,13 @@ "get-assigned-identifiers": "^1.1.0" } }, + "node_modules/search-insights": { + "version": "2.17.2", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz", + "integrity": "sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==", + "dev": true, + "peer": true + }, "node_modules/secure-json-parse": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz", @@ -16704,6 +17052,182 @@ "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", "dev": true }, + "@algolia/autocomplete-core": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.17.6.tgz", + "integrity": "sha512-lkDoW4I7h2kKlIgf3pUt1LqvxyYKkVyiypoGLlUnhPSnCpmeOwudM6rNq6YYsCmdQtnDQoW5lUNNuj6ASg3qeg==", + "dev": true, + "requires": { + "@algolia/autocomplete-plugin-algolia-insights": "1.17.6", + "@algolia/autocomplete-shared": "1.17.6" + } + }, + "@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.6.tgz", + "integrity": "sha512-17NnaacuFzSWVuZu4NKzVeaFIe9Abpw8w+/gjc7xhZFtqj+GadufzodIdchwiB2eM2cDdiR3icW7gbNTB3K2YA==", + "dev": true, + "requires": { + "@algolia/autocomplete-shared": "1.17.6" + } + }, + "@algolia/autocomplete-preset-algolia": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.6.tgz", + "integrity": "sha512-Cvg5JENdSCMuClwhJ1ON1/jSuojaYMiUW2KePm18IkdCzPJj/NXojaOxw58RFtQFpJgfVW8h2E8mEoDtLlMdeA==", + "dev": true, + "requires": { + "@algolia/autocomplete-shared": "1.17.6" + } + }, + "@algolia/autocomplete-shared": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.6.tgz", + "integrity": "sha512-aq/3V9E00Tw2GC/PqgyPGXtqJUlVc17v4cn1EUhSc+O/4zd04Uwb3UmPm8KDaYQQOrkt1lwvCj2vG2wRE5IKhw==", + "dev": true, + "requires": {} + }, + "@algolia/client-abtesting": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.12.0.tgz", + "integrity": "sha512-hx4eVydkm3yrFCFxmcBtSzI/ykt0cZ6sDWch+v3JTgKpD2WtosMJU3Upv1AjQ4B6COSHCOWEX3vfFxW6OoH6aA==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/client-analytics": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.12.0.tgz", + "integrity": "sha512-EpTsSv6IW8maCfXCDIptgT7+mQJj7pImEkcNUnxR8yUKAHzTogTXv9yGm2WXOZFVuwstd2i0sImhQ1Vz8RH/hA==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/client-common": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.12.0.tgz", + "integrity": "sha512-od3WmO8qxyfNhKc+K3D17tvun3IMs/xMNmxCG9MiElAkYVbPPTRUYMkRneCpmJyQI0hNx2/EA4kZgzVfQjO86Q==", + "dev": true + }, + "@algolia/client-insights": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.12.0.tgz", + "integrity": "sha512-8alajmsYUd+7vfX5lpRNdxqv3Xx9clIHLUItyQK0Z6gwGMbVEFe6YYhgDtwslMAP0y6b0WeJEIZJMLgT7VYpRw==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/client-personalization": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.12.0.tgz", + "integrity": "sha512-bUV9HtfkTBgpoVhxFrMkmVPG03ZN1Rtn51kiaEtukucdk3ggjR9Qu1YUfRSU2lFgxr9qJc8lTxwfvhjCeJRcqw==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/client-query-suggestions": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.12.0.tgz", + "integrity": "sha512-Q5CszzGWfxbIDs9DJ/QJsL7bP6h+lJMg27KxieEnI9KGCu0Jt5iFA3GkREkgRZxRdzlHbZKkrIzhtHVbSHw/rg==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/client-search": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.12.0.tgz", + "integrity": "sha512-R3qzEytgVLHOGNri+bpta6NtTt7YtkvUe/QBcAmMDjW4Jk1P0eBYIPfvnzIPbINRsLxIq9fZs9uAYBgsrts4Zg==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/ingestion": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.12.0.tgz", + "integrity": "sha512-zpHo6qhR22tL8FsdSI4DvEraPDi/019HmMrCFB/TUX98yzh5ooAU7sNW0qPL1I7+S++VbBmNzJOEU9VI8tEC8A==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/monitoring": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.12.0.tgz", + "integrity": "sha512-i2AJZED/zf4uhxezAJUhMKoL5QoepCBp2ynOYol0N76+TSoohaMADdPnWCqOULF4RzOwrG8wWynAwBlXsAI1RQ==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/recommend": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.12.0.tgz", + "integrity": "sha512-0jmZyKvYnB/Bj5c7WKsKedOUjnr0UtXm0LVFUdQrxXfqOqvWv9n6Vpr65UjdYG4Q49kRQxhlwtal9WJYrYymXg==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, + "@algolia/requester-browser-xhr": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.12.0.tgz", + "integrity": "sha512-KxwleraFuVoEGCoeW6Y1RAEbgBMS7SavqeyzWdtkJc6mXeCOJXn1iZitb8Tyn2FcpMNUKlSm0adrUTt7G47+Ow==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0" + } + }, + "@algolia/requester-fetch": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.12.0.tgz", + "integrity": "sha512-FuDZXUGU1pAg2HCnrt8+q1VGHKChV/LhvjvZlLOT7e56GJie6p+EuLu4/hMKPOVuQQ8XXtrTHKIU3Lw+7O5/bQ==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0" + } + }, + "@algolia/requester-node-http": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.12.0.tgz", + "integrity": "sha512-ncDDY7CxZhMs6LIoPl+vHFQceIBhYPY5EfuGF1V7beO0U38xfsCYEyutEFB2kRzf4D9Gqppn3iWX71sNtrKcuw==", + "dev": true, + "requires": { + "@algolia/client-common": "5.12.0" + } + }, "@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -16796,6 +17320,34 @@ "integrity": "sha512-pH4KCsbtBLLe7eqUrw8brcuFO8IZlN36JjdKlOublibVdAIPHCzEnpBWOVUXK5sCf+DpBi8ZtuWtjF0srybdeA==", "dev": true }, + "@docsearch/css": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.7.0.tgz", + "integrity": "sha512-1OorbTwi1eeDmr0v5t+ckSRlt1zM5GHjm92iIl3kUu7im3GHuP+csf6E0WBg8pdXQczTWP9J9+o9n+Vg6DH5cQ==", + "dev": true + }, + "@docsearch/js": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.7.0.tgz", + "integrity": "sha512-ScfqOIKrSr8SImbpxVaD59xc/bytbL8QEM2GUpe3aICmoICflWp5DyTRzAdFky16HY+yEOAVZXt3COXQ1NOCWw==", + "dev": true, + "requires": { + "@docsearch/react": "3.7.0", + "preact": "^10.0.0" + } + }, + "@docsearch/react": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.7.0.tgz", + "integrity": "sha512-8e6tdDfkYoxafEEPuX5eE1h9cTkLvhe4KgoFkO5JCddXSQONnN1FHcDZRI4r8894eMpbYq6rdJF0dVYh8ikwNQ==", + "dev": true, + "requires": { + "@algolia/autocomplete-core": "1.17.6", + "@algolia/autocomplete-preset-algolia": "1.17.6", + "@docsearch/css": "3.7.0", + "algoliasearch": "^5.12.0" + } + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -16919,6 +17471,31 @@ "integrity": "sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==", "dev": true }, + "@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dev": true, + "requires": { + "@floating-ui/utils": "^0.2.8" + } + }, + "@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "dev": true, + "requires": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "dev": true + }, "@fontsource-variable/roboto-flex": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-flex/-/roboto-flex-5.0.8.tgz", @@ -17270,6 +17847,27 @@ "uri-js": "^4.2.2" } }, + "algoliasearch": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.12.0.tgz", + "integrity": "sha512-psGBRYdGgik8I6m28iAB8xpubvjEt7UQU+w5MAJUA2324WHiGoHap5BPkkjB14rMaXeRts6pmOsrVIglGyOVwg==", + "dev": true, + "requires": { + "@algolia/client-abtesting": "5.12.0", + "@algolia/client-analytics": "5.12.0", + "@algolia/client-common": "5.12.0", + "@algolia/client-insights": "5.12.0", + "@algolia/client-personalization": "5.12.0", + "@algolia/client-query-suggestions": "5.12.0", + "@algolia/client-search": "5.12.0", + "@algolia/ingestion": "1.12.0", + "@algolia/monitoring": "1.12.0", + "@algolia/recommend": "5.12.0", + "@algolia/requester-browser-xhr": "5.12.0", + "@algolia/requester-fetch": "5.12.0", + "@algolia/requester-node-http": "5.12.0" + } + }, "alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", @@ -23677,6 +24275,12 @@ "yallist": "^2.1.2" } }, + "lucide-static": { + "version": "0.454.0", + "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.454.0.tgz", + "integrity": "sha512-Jr6Xbn/WOXUy5ULRp191s+JUEqoHxEBIG6tlqEZw7sHnRVIgfIKF8T5VsoOb63p/oODGdEA4BRZ+qtaVFXt/6A==", + "dev": true + }, "magic-string": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.23.2.tgz", @@ -26095,6 +26699,12 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "preact": { + "version": "10.24.3", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz", + "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==", + "dev": true + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -27185,6 +27795,13 @@ "get-assigned-identifiers": "^1.1.0" } }, + "search-insights": { + "version": "2.17.2", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz", + "integrity": "sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==", + "dev": true, + "peer": true + }, "secure-json-parse": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz", diff --git a/package.json b/package.json index 11fa33aa..e8ae2962 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@antora/logger": "^3.1.4", "@asciidoctor/core": "~2.2", "@asciidoctor/tabs": "1.0.0-beta.6", + "@docsearch/js": "^3.7.0", + "@floating-ui/dom": "^1.6.12", "@fontsource-variable/roboto-flex": "~5.0", "@fontsource-variable/sora": "^5.0.15", "@fontsource/material-icons-outlined": "~5.0", @@ -48,6 +50,7 @@ "highlight.js": "9.18.3", "highlightjs-curl": "^1.3.0", "js-yaml": "~3.13", + "lucide-static": "^0.454.0", "merge-stream": "~2.0", "postcss": "~8.4", "postcss-advanced-variables": "^3.0.1", diff --git a/preview-src/asciidoc/images.adoc b/preview-src/asciidoc/images.adoc index 293b38c4..8830da3f 100644 --- a/preview-src/asciidoc/images.adoc +++ b/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 ``. ++ +This method supports light and dark mode automatically. ++ +.Block passthrough +[source] +---- +++++ + +++++ +---- ++ +.Inline passthrough +[source] +---- +Inline lucide icons ++++++ +---- ++ +++++++ ++++++ ++++++ +====== -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 diff --git a/src/css/asciidoc/admonition-block.css b/src/css/asciidoc/admonition-block.css index 0bf296e7..0c0577a3 100644 --- a/src/css/asciidoc/admonition-block.css +++ b/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); - } } diff --git a/src/css/asciidoc/doc.css b/src/css/asciidoc/doc.css index 075dac68..5227a188 100644 --- a/src/css/asciidoc/doc.css +++ b/src/css/asciidoc/doc.css @@ -430,32 +430,7 @@ 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; @@ -463,6 +438,9 @@ } .doc .admonitionblock .icon i::after { + font-size: 1rem; + font-weight: 600; + font-family: "Roboto Flex", sans-serif; content: attr(title); } diff --git a/src/css/asciidoc/source-block.css b/src/css/asciidoc/source-block.css index 5474bdf8..9f3afb87 100644 --- a/src/css/asciidoc/source-block.css +++ b/src/css/asciidoc/source-block.css @@ -78,11 +78,11 @@ } html[data-theme="light"] .doc .source-toolbox { - background: linear-gradient(to right, rgba(247, 247, 247, 0), rgb(247, 247, 247), rgb(247, 247, 247) 50%); + background: linear-gradient(to right, rgba(250, 250, 250, 0), rgb(250, 250, 250), rgb(250, 250, 250) 50%); } html[data-theme="dark"] .doc .source-toolbox { - background: linear-gradient(to right, rgba(35, 35, 36, 0), rgb(35, 35, 36), rgb(35, 35, 36) 50%); + background: linear-gradient(to right, rgba(39, 39, 42, 0), rgb(39, 39, 42), rgb(39, 39, 42) 50%); } .doc .source-toolbox .copy-toast { diff --git a/src/css/asciidoc/tabs.css b/src/css/asciidoc/tabs.css index ecc34c68..200fc718 100644 --- a/src/css/asciidoc/tabs.css +++ b/src/css/asciidoc/tabs.css @@ -67,7 +67,7 @@ html[data-theme="light"] .tablist > .scroll-btn-left { } html[data-theme="dark"] .tablist > .scroll-btn-left { - background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } html[data-theme="light"] .tablist > .scroll-btn-right { @@ -75,7 +75,7 @@ html[data-theme="light"] .tablist > .scroll-btn-right { } html[data-theme="dark"] .tablist > .scroll-btn-right { - background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } .tabs .tablist li::after { diff --git a/src/css/base.css b/src/css/base.css index d8ad91c5..19a9f032 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -21,6 +21,15 @@ tab-size: 4; } + html:has(dialog[open]) { + overflow: hidden; + } + + ::backdrop { + background-color: var(--ds-background-backdrop); + backdrop-filter: blur(4px); + } + *, ::before, ::after { @@ -77,12 +86,12 @@ @media (pointer: fine) { @supports (scrollbar-width: thin) { html { - scrollbar-color: var(--ds-neutral-outlined-border) var(--ds-background-body); + scrollbar-color: var(--ds-text-placeholder) var(--ds-background-body); } body * { scrollbar-width: thin; - scrollbar-color: var(--ds-neutral-outlined-border) transparent; + scrollbar-color: var(--ds-text-placeholder) transparent; } } @@ -99,7 +108,7 @@ ::-webkit-scrollbar-thumb { background-clip: padding-box; - background-color: var(--ds-neutral-outlined-border); + background-color: var(--ds-text-placeholder); border: 3px solid transparent; border-radius: 12px; } @@ -110,7 +119,7 @@ } ::-webkit-scrollbar-thumb:hover { - background-color: var(--ds-neutral-outlined-hover-border); + background-color: var(--ds-text-tertiary); } } } diff --git a/src/css/components/btn.css b/src/css/components/btn.css index 58730d69..7ba5a35a 100644 --- a/src/css/components/btn.css +++ b/src/css/components/btn.css @@ -8,27 +8,27 @@ } .btn-primary.btn-outlined { - @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] active:border-[var(--ds-primary-outlined-active-border)] active:bg-[var(--ds-primary-outlined-active-bg)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)]; + @apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)]; } .btn-primary.btn-solid { - @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] active:bg-[var(--ds-primary-solid-active-bg)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)]; + @apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-primary.btn-soft { - @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] active:bg-[var(--ds-primary-soft-active-bg)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)]; + @apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-outlined { - @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] active:border-[var(--ds-neutral-outlined-active-border)] active:bg-[var(--ds-neutral-outlined-active-bg)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)]; + @apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-solid { - @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] active:bg-[var(--ds-neutral-solid-active-bg)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)]; + @apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)]; } .btn-neutral.btn-plain { - @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] active:bg-[var(--ds-neutral-plain-active-bg)] disabled:text-[var(--ds-neutral-plain-disabled-color)]; + @apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-disabled-color)]; } .btn-icon { diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css index 94972b52..ff5b6443 100644 --- a/src/css/components/dialog.css +++ b/src/css/components/dialog.css @@ -1,6 +1,6 @@ @layer components { .dialog { - @apply rounded border; + @apply rounded dark:border dark:shadow-none; overscroll-behavior: contain; box-shadow: 0 6px 16px 0 #0a0a0a1f; diff --git a/src/css/docsearch.css b/src/css/docsearch.css index 3d205da4..7d5c9a58 100644 --- a/src/css/docsearch.css +++ b/src/css/docsearch.css @@ -13,7 +13,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, @@ -76,6 +76,10 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { display: none; } +.DocSearch.DocSearch-Container { + backdrop-filter: blur(4px); +} + .DocSearch .DocSearch-Button-Container::before, .DocSearch .DocSearch-MagnifierLabel::before { font-family: "Material Icons Outlined", sans-serif; @@ -106,9 +110,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { --docsearch-modal-width: 720px; --docsearch-modal-height: 600px; --docsearch-modal-background: var(--ds-background-body); - --docsearch-modal-shadow: - inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), - 0 3px 8px 0 rgba(85, 90, 100, 1); + --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1); /* searchbox */ --docsearch-searchbox-height: var(--ds-space-7); @@ -124,8 +126,9 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { --docsearch-hit-shadow: none; /* key */ - --docsearch-key-gradient: var(--ds-background-level1); + --docsearch-key-gradient: var(--ds-neutral-soft-bg); --docsearch-key-shadow: none; + --docsearch-key-pressed-shadow: none; /* footer */ --docsearch-footer-height: var(--ds-space-6); @@ -134,21 +137,6 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal { } /* Darkmode */ - html[data-theme="dark"] .DocSearch { - --docsearch-text-color: var(--ds-text-primary); - --docsearch-container-background: var(--ds-background-backdrop); - --docsearch-modal-background: var(--ds-background-body); --docsearch-modal-shadow: none; - --docsearch-searchbox-background: none; - --docsearch-searchbox-focus-background: none; - --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-shadow: none; - --docsearch-footer-background: var(--ds-background-body); - --docsearch-footer-shadow: none; - --docsearch-logo-color: var(--ds-text-primary); - --docsearch-muted-color: var(--ds-text-placeholder); } diff --git a/src/css/global-nav.css b/src/css/global-nav.css index b10059be..fe56293f 100644 --- a/src/css/global-nav.css +++ b/src/css/global-nav.css @@ -20,7 +20,7 @@ html[data-theme="light"] .global-nav > .scroll-btn-left { } html[data-theme="dark"] .global-nav > .scroll-btn-left { - background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } html[data-theme="light"] .global-nav > .scroll-btn-right { @@ -28,5 +28,5 @@ html[data-theme="light"] .global-nav > .scroll-btn-right { } html[data-theme="dark"] .global-nav > .scroll-btn-right { - background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%); + background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%); } \ No newline at end of file diff --git a/src/css/highlight.css b/src/css/highlight.css index 7a83b388..035a4d89 100644 --- a/src/css/highlight.css +++ b/src/css/highlight.css @@ -7,23 +7,23 @@ } .hljs-variable { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-template-variable { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-tag { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-name { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-selector-id { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-selector-class { @@ -35,7 +35,7 @@ } .hljs-deletion { - color: var(--ds-error-main); + color: var(--ds-failure-main); } .hljs-number { diff --git a/src/css/site.css b/src/css/site.css index fcdfe489..9776287e 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,8 +1,9 @@ -@import "vars/vars.css"; @import "vars/light.css"; @import "vars/dark.css"; +@import "vars/vars.css"; @import "color.css"; @import "base.css"; +@import "theme-toggle.css"; @import "utilities.css"; @import "typography.css"; @import "components/btn.css"; @@ -15,6 +16,7 @@ @import "typeface/typeface-roboto-flex.css"; @import "typeface/typeface-sora.css"; @import "typeface/typeface-roboto-mono.css"; +@import "typeface/typeface-lucide-icons.css"; @import "asciidoc/ds-card.css"; @import "asciidoc/doc.css"; @import "asciidoc/ds-layout.css"; diff --git a/src/css/theme-toggle.css b/src/css/theme-toggle.css new file mode 100644 index 00000000..f6f14a30 --- /dev/null +++ b/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; + } + } +} diff --git a/src/css/typeface/typeface-lucide-icons.css b/src/css/typeface/typeface-lucide-icons.css new file mode 100644 index 00000000..608ac73d --- /dev/null +++ b/src/css/typeface/typeface-lucide-icons.css @@ -0,0 +1 @@ +@import "lucide-static/font/lucide.css"; diff --git a/src/css/utilities.css b/src/css/utilities.css index ecca0797..ad8c66f7 100644 --- a/src/css/utilities.css +++ b/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; + } } diff --git a/src/css/vars/dark.css b/src/css/vars/dark.css index 2d81d8da..1abf405b 100644 --- a/src/css/vars/dark.css +++ b/src/css/vars/dark.css @@ -1,169 +1,110 @@ @mixin dark-theme { - --ds-divider: var(--ds-neutral-700); - --ds-focus-visible: var(--ds-common-white); - --ds-background-body: var(--ds-neutral-900); - --ds-background-level1: var(--ds-neutral-800); - --ds-background-level2: var(--ds-neutral-700); - --ds-background-level3: var(--ds-neutral-600); - --ds-background-surface: var(--ds-neutral-900); - --ds-background-tooltip: var(--ds-neutral-0); - --ds-background-backdrop: rgba(10, 10, 10, 0.6); - --ds-cyan-main: var(--ds-cyan-400); - --ds-failure-main: var(--ds-failure-400); - --ds-failure-outlined-active-bg: var(--ds-failure-500); - --ds-failure-outlined-border: var(--ds-failure-600); - --ds-failure-outlined-color: var(--ds-common-white); - --ds-failure-outlined-disabled-border: var(--ds-neutral-800); - --ds-failure-outlined-disabled-color: var(--ds-neutral-600); - --ds-failure-outlined-hover-bg: var(--ds-failure-900); - --ds-failure-outlined-hover-border: var(--ds-failure-500); - --ds-failure-plain-active-bg: var(--ds-failure-700); - --ds-failure-plain-color: var(--ds-failure-300); - --ds-failure-plain-disabled-color: var(--ds-failure-800); - --ds-failure-plain-hover-bg: var(--ds-failure-800); - --ds-failure-soft-active-bg: var(--ds-failure-600); - --ds-failure-soft-bg: var(--ds-failure-900); - --ds-failure-soft-color: var(--ds-failure-200); - --ds-failure-soft-disabled-bg: var(--ds-failure-600); - --ds-failure-soft-disabled-color: var(--ds-failure-800); - --ds-failure-soft-hover-bg: var(--ds-failure-700); - --ds-failure-solid-active-bg: var(--ds-failure-800); - --ds-failure-solid-bg: var(--ds-failure-600); - --ds-failure-solid-color: var(--ds-common-white); - --ds-failure-solid-disabled-bg: var(--ds-neutral-600); - --ds-failure-solid-disabled-color: var(--ds-neutral-800); - --ds-failure-solid-hover-bg: var(--ds-failure-700); - --ds-magenta-main: var(--ds-magenta-400); - --ds-neutral-main: var(--ds-common-white); - --ds-neutral-outlined-active-bg: var(--ds-neutral-500); - --ds-neutral-outlined-border: var(--ds-neutral-600); - --ds-neutral-outlined-color: var(--ds-common-white); - --ds-neutral-outlined-disabled-border: var(--ds-neutral-800); - --ds-neutral-outlined-disabled-color: var(--ds-neutral-600); - --ds-neutral-outlined-hover-bg: var(--ds-neutral-800); - --ds-neutral-outlined-hover-border: var(--ds-neutral-500); - --ds-neutral-plain-active-bg: var(--ds-neutral-700); - --ds-neutral-plain-color: var(--ds-common-white); - --ds-neutral-plain-disabled-color: var(--ds-neutral-800); - --ds-neutral-plain-hover-bg: var(--ds-neutral-800); - --ds-neutral-soft-active-bg: var(--ds-neutral-600); - --ds-neutral-soft-bg: var(--ds-neutral-800); - --ds-neutral-soft-color: var(--ds-common-white); - --ds-neutral-soft-disabled-bg: var(--ds-neutral-600); - --ds-neutral-soft-disabled-color: var(--ds-neutral-800); - --ds-neutral-soft-hover-bg: var(--ds-neutral-700); - --ds-neutral-solid-active-bg: var(--ds-neutral-100); - --ds-neutral-solid-bg: var(--ds-common-white); - --ds-neutral-solid-color: var(--ds-neutral-900); - --ds-neutral-solid-disabled-bg: var(--ds-neutral-600); - --ds-neutral-solid-disabled-color: var(--ds-neutral-800); - --ds-neutral-solid-hover-bg: var(--ds-neutral-0); - --ds-orange-main: var(--ds-orange-400); - --ds-primary-main: var(--ds-primary-300); - --ds-primary-outlined-active-bg: var(--ds-primary-500); - --ds-primary-outlined-border: var(--ds-primary-600); - --ds-primary-outlined-color: var(--ds-common-white); - --ds-primary-outlined-disabled-border: var(--ds-neutral-800); - --ds-primary-outlined-disabled-color: var(--ds-neutral-600); - --ds-primary-outlined-hover-bg: var(--ds-primary-900); - --ds-primary-outlined-hover-border: var(--ds-primary-500); - --ds-primary-plain-active-bg: var(--ds-primary-700); - --ds-primary-plain-color: var(--ds-primary-300); - --ds-primary-plain-disabled-color: var(--ds-primary-800); - --ds-primary-plain-hover-bg: var(--ds-primary-800); - --ds-primary-soft-active-bg: var(--ds-primary-600); - --ds-primary-soft-bg: var(--ds-primary-900); - --ds-primary-soft-color: var(--ds-primary-200); - --ds-primary-soft-disabled-bg: var(--ds-primary-600); - --ds-primary-soft-disabled-color: var(--ds-primary-800); - --ds-primary-soft-hover-bg: var(--ds-primary-700); - --ds-primary-solid-active-bg: var(--ds-primary-600); - --ds-primary-solid-bg: var(--ds-primary-600); - --ds-primary-solid-color: var(--ds-common-white); - --ds-primary-solid-disabled-bg: var(--ds-neutral-600); - --ds-primary-solid-disabled-color: var(--ds-neutral-800); - --ds-primary-solid-hover-bg: var(--ds-primary-700); - --ds-success-main: var(--ds-success-400); - --ds-success-outlined-active-bg: var(--ds-success-500); - --ds-success-outlined-border: var(--ds-success-600); - --ds-success-outlined-color: var(--ds-common-white); - --ds-success-outlined-disabled-border: var(--ds-neutral-800); - --ds-success-outlined-disabled-color: var(--ds-neutral-600); - --ds-success-outlined-hover-bg: var(--ds-success-900); - --ds-success-outlined-hover-border: var(--ds-success-500); - --ds-success-plain-active-bg: var(--ds-success-700); - --ds-success-plain-color: var(--ds-success-300); - --ds-success-plain-disabled-color: var(--ds-success-800); - --ds-success-plain-hover-bg: var(--ds-success-800); - --ds-success-soft-active-bg: var(--ds-success-600); - --ds-success-soft-bg: var(--ds-success-900); - --ds-success-soft-color: var(--ds-success-200); - --ds-success-soft-disabled-bg: var(--ds-success-600); - --ds-success-soft-disabled-color: var(--ds-success-800); - --ds-success-soft-hover-bg: var(--ds-success-700); - --ds-success-solid-active-bg: var(--ds-success-800); - --ds-success-solid-bg: var(--ds-success-600); - --ds-success-solid-color: var(--ds-common-white); - --ds-success-solid-disabled-bg: var(--ds-neutral-600); - --ds-success-solid-disabled-color: var(--ds-neutral-800); - --ds-success-solid-hover-bg: var(--ds-success-700); - --ds-teal-main: var(--ds-teal-400); - --ds-text-disabled: var(--ds-neutral-800); - --ds-text-inverse: var(--ds-neutral-900); - --ds-text-placeholder: var(--ds-neutral-700); - --ds-text-primary: var(--ds-common-white); - --ds-text-secondary: var(--ds-neutral-300); - --ds-text-tertiary: var(--ds-neutral-400); - --ds-warning-main: var(--ds-warning-400); - --ds-warning-outlined-active-bg: var(--ds-warning-500); - --ds-warning-outlined-border: var(--ds-warning-600); - --ds-warning-outlined-color: var(--ds-common-white); - --ds-warning-outlined-disabled-border: var(--ds-neutral-800); - --ds-warning-outlined-disabled-color: var(--ds-neutral-600); - --ds-warning-outlined-hover-bg: var(--ds-warning-900); - --ds-warning-outlined-hover-border: var(--ds-warning-500); - --ds-warning-plain-active-bg: var(--ds-warning-700); - --ds-warning-plain-color: var(--ds-warning-300); - --ds-warning-plain-disabled-color: var(--ds-warning-800); - --ds-warning-plain-hover-bg: var(--ds-warning-800); - --ds-warning-soft-active-bg: var(--ds-warning-600); - --ds-warning-soft-bg: var(--ds-warning-900); - --ds-warning-soft-color: var(--ds-warning-200); - --ds-warning-soft-disabled-bg: var(--ds-warning-600); - --ds-warning-soft-disabled-color: var(--ds-warning-800); - --ds-warning-soft-hover-bg: var(--ds-warning-700); - --ds-warning-solid-active-bg: var(--ds-warning-800); - --ds-warning-solid-bg: var(--ds-warning-600); - --ds-warning-solid-color: var(--ds-common-white); - --ds-warning-solid-disabled-bg: var(--ds-neutral-600); - --ds-warning-solid-disabled-color: var(--ds-neutral-800); - --ds-warning-solid-hover-bg: var(--ds-warning-700); -} + /* Background */ + --ds-background-body: theme(colors.zinc.900); + --ds-background-level1: theme(colors.zinc.800); + --ds-background-level2: theme(colors.zinc.700); + --ds-background-level3: theme(colors.zinc.600); + --ds-background-surface: theme(colors.zinc.900); + --ds-background-tooltip: theme(colors.white); + --ds-background-modal: theme(colors.zinc.900); + --ds-background-backdrop: rgba(0, 0, 0, 0.5); -@layer base { - html[data-theme="dark"] { - @include dark-theme; - } + /* Text */ + --ds-text-disabled: theme(colors.zinc.700); + --ds-text-inverse: theme(colors.black); + --ds-text-placeholder: theme(colors.zinc.500); + --ds-text-primary: theme(colors.white); + --ds-text-secondary: theme(colors.zinc.200); + --ds-text-tertiary: theme(colors.zinc.300); - html[data-theme="light"] .inverse-theme { - @include dark-theme; - } + /* Divider */ + --ds-divider: theme(colors.zinc.700); - html[data-theme="dark"] .for-light { - display: none; - } + /* Focus ring */ + --ds-focus-visible: theme(colors.white); - html[data-theme="dark"] ::backdrop { - --ds-background-backdrop: rgba(10, 10, 10, 0.6); - } + /* Disabled */ + --ds-disabled-bg: theme(colors.zinc.800); + --ds-disabled-color: theme(colors.zinc.600); + + /* Data */ + --ds-cyan-main: theme(colors.cyan.500); + --ds-indigo-main: theme(colors.indigo.400); + --ds-lime-main: theme(colors.lime.400); + --ds-orange-main: theme(colors.orange.400); + --ds-fuchsia-main: theme(colors.fuchsia.300); + --ds-pink-main: theme(colors.pink.300); + --ds-teal-main: theme(colors.teal.500); - @media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]):not([data-theme="dark"]) { - @include dark-theme; - } + /* Intents */ + --ds-failure-main: theme(colors.red.500); + --ds-failure-outlined-border: theme(colors.red.600); + --ds-failure-outlined-color: theme(colors.white); + --ds-failure-outlined-hover-bg: theme(colors.red.600); + --ds-failure-outlined-hover-border: theme(colors.red.600); + --ds-failure-soft-bg: theme(colors.red.950); + --ds-failure-soft-color: theme(colors.red.200); + --ds-failure-soft-hover-bg: theme(colors.red.900); + --ds-failure-solid-bg: theme(colors.red.700); + --ds-failure-solid-color: theme(colors.white); + --ds-failure-solid-hover-bg: theme(colors.red.500); - :root:not([data-theme="light"]):not([data-theme="dark"]) .for-light { - display: none; - } + --ds-neutral-main: theme(colors.white); + --ds-neutral-outlined-border: theme(colors.zinc.700); + --ds-neutral-outlined-color: theme(colors.white); + --ds-neutral-outlined-hover-bg: theme(colors.zinc.700); + --ds-neutral-outlined-hover-border: theme(colors.zinc.700); + --ds-neutral-plain-color: theme(colors.white); + --ds-neutral-plain-hover-bg: theme(colors.zinc.700); + --ds-neutral-soft-bg: theme(colors.zinc.800); + --ds-neutral-soft-color: theme(colors.white); + --ds-neutral-soft-hover-bg: theme(colors.zinc.700); + --ds-neutral-solid-bg: theme(colors.white); + --ds-neutral-solid-color: theme(colors.black); + --ds-neutral-solid-hover-bg: theme(colors.zinc.200); + + --ds-primary-main: theme(colors.purple.400); + --ds-primary-outlined-border: theme(colors.purple.600); + --ds-primary-outlined-color: theme(colors.white); + --ds-primary-outlined-hover-bg: theme(colors.purple.600); + --ds-primary-outlined-hover-border: theme(colors.purple.600); + --ds-primary-soft-bg: theme(colors.purple.950); + --ds-primary-soft-color: theme(colors.purple.200); + --ds-primary-soft-hover-bg: theme(colors.purple.900); + --ds-primary-solid-bg: theme(colors.purple.700); + --ds-primary-solid-color: theme(colors.white); + --ds-primary-solid-hover-bg: theme(colors.purple.500); + + --ds-success-main: theme(colors.emerald.500); + --ds-success-outlined-border: theme(colors.emerald.600); + --ds-success-outlined-color: theme(colors.white); + --ds-success-outlined-hover-bg: theme(colors.emerald.600); + --ds-success-outlined-hover-border: theme(colors.emerald.600); + --ds-success-soft-bg: theme(colors.emerald.950); + --ds-success-soft-color: theme(colors.emerald.200); + --ds-success-soft-hover-bg: theme(colors.emerald.900); + --ds-success-solid-bg: theme(colors.emerald.700); + --ds-success-solid-color: theme(colors.white); + --ds-success-solid-hover-bg: theme(colors.emerald.500); + + --ds-warning-main: theme(colors.amber.400); + --ds-warning-outlined-border: theme(colors.amber.600); + --ds-warning-outlined-color: theme(colors.white); + --ds-warning-outlined-hover-bg: theme(colors.amber.600); + --ds-warning-outlined-hover-border: theme(colors.amber.600); + --ds-warning-soft-bg: theme(colors.amber.950); + --ds-warning-soft-color: theme(colors.amber.300); + --ds-warning-soft-hover-bg: theme(colors.amber.900); + --ds-warning-solid-bg: theme(colors.amber.500); + --ds-warning-solid-color: theme(colors.black); + --ds-warning-solid-hover-bg: theme(colors.amber.400); +} + +@mixin dark-inverse { + .inverse-theme { + @include light-theme; + } + .for-light { + display: none; } } diff --git a/src/css/vars/light.css b/src/css/vars/light.css index a1aafa90..b1175326 100644 --- a/src/css/vars/light.css +++ b/src/css/vars/light.css @@ -1,169 +1,110 @@ @mixin light-theme { - --ds-divider: var(--ds-neutral-200); - --ds-focus-visible: var(--ds-neutral-900); - --ds-background-body: var(--ds-common-white); - --ds-background-level1: var(--ds-neutral-0); - --ds-background-level2: var(--ds-neutral-100); - --ds-background-level3: var(--ds-neutral-300); - --ds-background-surface: var(--ds-common-white); - --ds-background-tooltip: var(--ds-neutral-900); - --ds-background-backdrop: rgba(0, 0, 0, 0.6); - --ds-cyan-main: var(--ds-cyan-600); - --ds-failure-main: var(--ds-failure-500); - --ds-failure-outlined-active-bg: var(--ds-failure-100); - --ds-failure-outlined-border: var(--ds-failure-300); - --ds-failure-outlined-color: var(--ds-failure-500); - --ds-failure-outlined-disabled-border: var(--ds-neutral-100); - --ds-failure-outlined-disabled-color: var(--ds-neutral-300); - --ds-failure-outlined-hover-bg: var(--ds-failure-0); - --ds-failure-outlined-hover-border: var(--ds-failure-500); - --ds-failure-plain-active-bg: var(--ds-failure-200); - --ds-failure-plain-color: var(--ds-failure-600); - --ds-failure-plain-disabled-color: var(--ds-failure-200); - --ds-failure-plain-hover-bg: var(--ds-failure-100); - --ds-failure-soft-active-bg: var(--ds-failure-300); - --ds-failure-soft-bg: var(--ds-failure-0); - --ds-failure-soft-color: var(--ds-failure-600); - --ds-failure-soft-disabled-bg: var(--ds-failure-100); - --ds-failure-soft-disabled-color: var(--ds-failure-300); - --ds-failure-soft-hover-bg: var(--ds-failure-200); - --ds-failure-solid-active-bg: var(--ds-failure-700); - --ds-failure-solid-bg: var(--ds-failure-500); - --ds-failure-solid-color: var(--ds-common-white); - --ds-failure-solid-disabled-bg: var(--ds-neutral-100); - --ds-failure-solid-disabled-color: var(--ds-neutral-300); - --ds-failure-solid-hover-bg: var(--ds-failure-600); - --ds-magenta-main: var(--ds-magenta-600); - --ds-neutral-main: var(--ds-neutral-900); - --ds-neutral-outlined-active-bg: var(--ds-neutral-200); - --ds-neutral-outlined-border: var(--ds-neutral-200); - --ds-neutral-outlined-color: var(--ds-neutral-900); - --ds-neutral-outlined-disabled-border: var(--ds-neutral-100); - --ds-neutral-outlined-disabled-color: var(--ds-neutral-300); - --ds-neutral-outlined-hover-bg: var(--ds-neutral-0); - --ds-neutral-outlined-hover-border: var(--ds-neutral-900); - --ds-neutral-plain-active-bg: var(--ds-neutral-100); - --ds-neutral-plain-color: var(--ds-neutral-900); - --ds-neutral-plain-disabled-color: var(--ds-neutral-200); - --ds-neutral-plain-hover-bg: var(--ds-neutral-0); - --ds-neutral-soft-active-bg: var(--ds-neutral-300); - --ds-neutral-soft-bg: var(--ds-neutral-0); - --ds-neutral-soft-color: var(--ds-neutral-900); - --ds-neutral-soft-disabled-bg: var(--ds-neutral-100); - --ds-neutral-soft-disabled-color: var(--ds-neutral-300); - --ds-neutral-soft-hover-bg: var(--ds-neutral-200); - --ds-neutral-solid-active-bg: var(--ds-neutral-600); - --ds-neutral-solid-bg: var(--ds-neutral-900); - --ds-neutral-solid-color: var(--ds-common-white); - --ds-neutral-solid-disabled-bg: var(--ds-neutral-100); - --ds-neutral-solid-disabled-color: var(--ds-neutral-300); - --ds-neutral-solid-hover-bg: var(--ds-neutral-800); - --ds-orange-main: var(--ds-orange-600); - --ds-primary-main: var(--ds-primary-500); - --ds-primary-outlined-active-bg: var(--ds-primary-100); - --ds-primary-outlined-border: var(--ds-primary-300); - --ds-primary-outlined-color: var(--ds-primary-500); - --ds-primary-outlined-disabled-border: var(--ds-neutral-100); - --ds-primary-outlined-disabled-color: var(--ds-neutral-300); - --ds-primary-outlined-hover-bg: var(--ds-primary-0); - --ds-primary-outlined-hover-border: var(--ds-primary-500); - --ds-primary-plain-active-bg: var(--ds-primary-200); - --ds-primary-plain-color: var(--ds-primary-600); - --ds-primary-plain-disabled-color: var(--ds-primary-200); - --ds-primary-plain-hover-bg: var(--ds-primary-100); - --ds-primary-soft-active-bg: var(--ds-primary-200); - --ds-primary-soft-bg: var(--ds-primary-0); - --ds-primary-soft-color: var(--ds-primary-600); - --ds-primary-soft-disabled-bg: var(--ds-primary-100); - --ds-primary-soft-disabled-color: var(--ds-primary-300); - --ds-primary-soft-hover-bg: var(--ds-primary-100); - --ds-primary-solid-active-bg: var(--ds-primary-700); - --ds-primary-solid-bg: var(--ds-primary-500); - --ds-primary-solid-color: var(--ds-common-white); - --ds-primary-solid-disabled-bg: var(--ds-neutral-100); - --ds-primary-solid-disabled-color: var(--ds-neutral-300); - --ds-primary-solid-hover-bg: var(--ds-primary-600); - --ds-success-main: var(--ds-success-500); - --ds-success-outlined-active-bg: var(--ds-success-100); - --ds-success-outlined-border: var(--ds-success-300); - --ds-success-outlined-color: var(--ds-success-500); - --ds-success-outlined-disabled-border: var(--ds-neutral-100); - --ds-success-outlined-disabled-color: var(--ds-neutral-300); - --ds-success-outlined-hover-bg: var(--ds-success-0); - --ds-success-outlined-hover-border: var(--ds-success-500); - --ds-success-plain-active-bg: var(--ds-success-200); - --ds-success-plain-color: var(--ds-success-600); - --ds-success-plain-disabled-color: var(--ds-success-200); - --ds-success-plain-hover-bg: var(--ds-success-100); - --ds-success-soft-active-bg: var(--ds-success-300); - --ds-success-soft-bg: var(--ds-success-0); - --ds-success-soft-color: var(--ds-success-600); - --ds-success-soft-disabled-bg: var(--ds-success-100); - --ds-success-soft-disabled-color: var(--ds-success-300); - --ds-success-soft-hover-bg: var(--ds-success-200); - --ds-success-solid-active-bg: var(--ds-success-700); - --ds-success-solid-bg: var(--ds-success-500); - --ds-success-solid-color: var(--ds-common-white); - --ds-success-solid-disabled-bg: var(--ds-neutral-100); - --ds-success-solid-disabled-color: var(--ds-neutral-300); - --ds-success-solid-hover-bg: var(--ds-success-600); - --ds-teal-main: var(--ds-teal-600); - --ds-text-disabled: var(--ds-neutral-200); - --ds-text-inverse: var(--ds-common-white); - --ds-text-placeholder: var(--ds-neutral-300); - --ds-text-primary: var(--ds-neutral-900); - --ds-text-secondary: var(--ds-neutral-700); - --ds-text-tertiary: var(--ds-neutral-500); - --ds-warning-main: var(--ds-warning-500); - --ds-warning-outlined-active-bg: var(--ds-warning-100); - --ds-warning-outlined-border: var(--ds-warning-300); - --ds-warning-outlined-color: var(--ds-warning-500); - --ds-warning-outlined-disabled-border: var(--ds-neutral-100); - --ds-warning-outlined-disabled-color: var(--ds-neutral-300); - --ds-warning-outlined-hover-bg: var(--ds-warning-0); - --ds-warning-outlined-hover-border: var(--ds-warning-500); - --ds-warning-plain-active-bg: var(--ds-warning-200); - --ds-warning-plain-color: var(--ds-warning-600); - --ds-warning-plain-disabled-color: var(--ds-warning-200); - --ds-warning-plain-hover-bg: var(--ds-warning-100); - --ds-warning-soft-active-bg: var(--ds-warning-300); - --ds-warning-soft-bg: var(--ds-warning-0); - --ds-warning-soft-color: var(--ds-warning-600); - --ds-warning-soft-disabled-bg: var(--ds-warning-100); - --ds-warning-soft-disabled-color: var(--ds-warning-300); - --ds-warning-soft-hover-bg: var(--ds-warning-200); - --ds-warning-solid-active-bg: var(--ds-warning-700); - --ds-warning-solid-bg: var(--ds-warning-500); - --ds-warning-solid-color: var(--ds-common-white); - --ds-warning-solid-disabled-bg: var(--ds-neutral-100); - --ds-warning-solid-disabled-color: var(--ds-neutral-300); - --ds-warning-solid-hover-bg: var(--ds-warning-600); -} + /* Background */ + --ds-background-body: theme(colors.white); + --ds-background-level1: theme(colors.zinc.50); + --ds-background-level2: theme(colors.zinc.100); + --ds-background-level3: theme(colors.zinc.200); + --ds-background-surface: theme(colors.white); + --ds-background-tooltip: theme(colors.black); + --ds-background-modal: theme(colors.white); + --ds-background-backdrop: rgba(0, 0, 0, 0.5); -@layer base { - html[data-theme="light"] { - @include light-theme; - } + /* Text */ + --ds-text-disabled: theme(colors.zinc.200); + --ds-text-inverse: theme(colors.white); + --ds-text-placeholder: theme(colors.zinc.400); + --ds-text-primary: theme(colors.black); + --ds-text-secondary: theme(colors.zinc.700); + --ds-text-tertiary: theme(colors.zinc.500); - html[data-theme="dark"] .inverse-theme { - @include light-theme; - } + /* Divider */ + --ds-divider: theme(colors.zinc.200); - html[data-theme="light"] .for-dark { - display: none; - } + /* Focus ring */ + --ds-focus-visible: theme(colors.black); - html[data-theme="light"] ::backdrop { - --ds-background-backdrop: rgba(0, 0, 0, 0.6); - } + /* Disabled */ + --ds-disabled-bg: theme(colors.zinc.100); + --ds-disabled-color: theme(colors.zinc.300); + + /* Data */ + --ds-cyan-main: theme(colors.cyan.600); + --ds-indigo-main: theme(colors.indigo.700); + --ds-lime-main: theme(colors.lime.700); + --ds-orange-main: theme(colors.orange.600); + --ds-fuchsia-main: theme(colors.fuchsia.600); + --ds-teal-main: theme(colors.teal.700); + --ds-pink-main: theme(colors.pink.600); - @media (prefers-color-scheme: light) { - :root:not([data-theme="light"]):not([data-theme="dark"]) { - @include light-theme; - } + /* Intents */ + --ds-failure-main: theme(colors.red.600); + --ds-failure-outlined-border: theme(colors.red.300); + --ds-failure-outlined-color: theme(colors.black); + --ds-failure-outlined-hover-bg: theme(colors.red.300); + --ds-failure-outlined-hover-border: theme(colors.red.300); + --ds-failure-soft-bg: theme(colors.red.100); + --ds-failure-soft-color: theme(colors.red.800); + --ds-failure-soft-hover-bg: theme(colors.red.200); + --ds-failure-solid-bg: theme(colors.red.600); + --ds-failure-solid-color: theme(colors.white); + --ds-failure-solid-hover-bg: theme(colors.red.800); - :root:not([data-theme="light"]):not([data-theme="dark"]) .for-dark { - display: none; - } + --ds-neutral-main: theme(colors.black); + --ds-neutral-outlined-border: theme(colors.zinc.200); + --ds-neutral-outlined-color: theme(colors.black); + --ds-neutral-outlined-hover-bg: theme(colors.zinc.200); + --ds-neutral-outlined-hover-border: theme(colors.zinc.200); + --ds-neutral-plain-color: theme(colors.black); + --ds-neutral-plain-hover-bg: theme(colors.zinc.200); + --ds-neutral-soft-bg: theme(colors.zinc.100); + --ds-neutral-soft-color: theme(colors.black); + --ds-neutral-soft-hover-bg: theme(colors.zinc.200); + --ds-neutral-solid-bg: theme(colors.black); + --ds-neutral-solid-color: theme(colors.white); + --ds-neutral-solid-hover-bg: theme(colors.zinc.700); + + --ds-primary-main: theme(colors.purple.600); + --ds-primary-outlined-border: theme(colors.purple.300); + --ds-primary-outlined-color: theme(colors.black); + --ds-primary-outlined-hover-bg: theme(colors.purple.300); + --ds-primary-outlined-hover-border: theme(colors.purple.300); + --ds-primary-soft-bg: theme(colors.purple.100); + --ds-primary-soft-color: theme(colors.purple.800); + --ds-primary-soft-hover-bg: theme(colors.purple.200); + --ds-primary-solid-bg: theme(colors.purple.600); + --ds-primary-solid-color: theme(colors.white); + --ds-primary-solid-hover-bg: theme(colors.purple.800); + + --ds-success-main: theme(colors.emerald.600); + --ds-success-outlined-border: theme(colors.emerald.300); + --ds-success-outlined-color: theme(colors.black); + --ds-success-outlined-hover-bg: theme(colors.emerald.300); + --ds-success-outlined-hover-border: theme(colors.emerald.300); + --ds-success-soft-bg: theme(colors.emerald.100); + --ds-success-soft-color: theme(colors.emerald.800); + --ds-success-soft-hover-bg: theme(colors.emerald.200); + --ds-success-solid-bg: theme(colors.emerald.600); + --ds-success-solid-color: theme(colors.white); + --ds-success-solid-hover-bg: theme(colors.emerald.800); + + --ds-warning-main: theme(colors.amber.600); + --ds-warning-outlined-border: theme(colors.amber.300); + --ds-warning-outlined-color: theme(colors.black); + --ds-warning-outlined-hover-bg: theme(colors.amber.300); + --ds-warning-outlined-hover-border: theme(colors.amber.300); + --ds-warning-soft-bg: theme(colors.amber.100); + --ds-warning-soft-color: theme(colors.amber.700); + --ds-warning-soft-hover-bg: theme(colors.amber.200); + --ds-warning-solid-bg: theme(colors.amber.600); + --ds-warning-solid-color: theme(colors.white); + --ds-warning-solid-hover-bg: theme(colors.amber.700); +} + +@mixin light-inverse { + .inverse-theme { + @include dark-theme; + } + .for-dark { + display: none; } } diff --git a/src/css/vars/vars.css b/src/css/vars/vars.css index db294d1c..82f9e24a 100644 --- a/src/css/vars/vars.css +++ b/src/css/vars/vars.css @@ -1,106 +1,6 @@ @layer base { :root { --rem-base: 16; - --ds-common-black: #090909; - --ds-common-white: #fff; - --ds-cyan-0: #d8f1ff; - --ds-cyan-100: #bae6ff; - --ds-cyan-200: #99d9ff; - --ds-cyan-300: #7cf; - --ds-cyan-400: #33b1ff; - --ds-cyan-50: #c9ecff; - --ds-cyan-500: #1a92e1; - --ds-cyan-600: #0072c3; - --ds-cyan-700: #005698; - --ds-cyan-800: #003a6d; - --ds-cyan-900: #07243d; - --ds-failure-0: #ffebee; - --ds-failure-100: #fbcfd4; - --ds-failure-200: #f6b2ba; - --ds-failure-300: #ec7985; - --ds-failure-400: #e34853; - --ds-failure-50: #fddde1; - --ds-failure-500: #d91620; - --ds-failure-600: #b00f16; - --ds-failure-700: #86070b; - --ds-failure-800: #5d0406; - --ds-failure-900: #330001; - --ds-magenta-0: #ffdeed; - --ds-magenta-100: #ffcfe5; - --ds-magenta-200: #ffc0dc; - --ds-magenta-300: #ffaacf; - --ds-magenta-400: #ff7eb6; - --ds-magenta-50: #ffd7e9; - --ds-magenta-500: #e85293; - --ds-magenta-600: #d02670; - --ds-magenta-700: #a21854; - --ds-magenta-800: #740937; - --ds-magenta-900: #480b26; - --ds-neutral-0: #f7f7f7; - --ds-neutral-100: #e3e4e5; - --ds-neutral-200: #ced0d2; - --ds-neutral-300: #a6aaae; - --ds-neutral-400: #898d91; - --ds-neutral-500: #6b6f73; - --ds-neutral-600: #5a5d60; - --ds-neutral-700: #494a4d; - --ds-neutral-800: #232324; - --ds-neutral-900: #090909; - --ds-orange-0: #ffe7d7; - --ds-orange-100: #ffd9be; - --ds-orange-200: #ffc49a; - --ds-orange-300: #ffae75; - --ds-orange-400: #ff832b; - --ds-orange-50: #ffe0cb; - --ds-orange-500: #dd6916; - --ds-orange-600: #ba4e00; - --ds-orange-700: #8c3c00; - --ds-orange-800: #5e2900; - --ds-orange-900: #391800; - --ds-primary-0: #f3e5f5; - --ds-primary-100: #e5c6ea; - --ds-primary-200: #d7a7df; - --ds-primary-300: #ba68c8; - --ds-primary-400: #9946b9; - --ds-primary-50: #ecd6f0; - --ds-primary-500: #7724aa; - --ds-primary-600: #611c9b; - --ds-primary-700: #4a148c; - --ds-primary-800: #350a60; - --ds-primary-900: #200033; - --ds-success-0: #ecffeb; - --ds-success-100: #ace0b0; - --ds-success-200: #8cd092; - --ds-success-300: #6bc074; - --ds-success-400: #42a056; - --ds-success-50: #ccf0ce; - --ds-success-500: #198038; - --ds-success-600: #116d36; - --ds-success-700: #095933; - --ds-success-800: #05462c; - --ds-success-900: #003325; - --ds-teal-0: #d9f9f9; - --ds-teal-100: #bcf5f5; - --ds-teal-200: #9ef0f0; - --ds-teal-300: #53d7d5; - --ds-teal-400: #08bdba; - --ds-teal-50: #cbf7f7; - --ds-teal-500: #049d9a; - --ds-teal-600: #007d79; - --ds-teal-700: #005f5f; - --ds-teal-800: #004144; - --ds-teal-900: #0d2b2c; - --ds-warning-0: #ffefe0; - --ds-warning-100: #fadbb2; - --ds-warning-200: #f5c783; - --ds-warning-300: #ea9f26; - --ds-warning-400: #cc7b1d; - --ds-warning-50: #fde5c9; - --ds-warning-500: #ad5713; - --ds-warning-600: #8f4a0a; - --ds-warning-700: #703c00; - --ds-warning-800: #522b00; - --ds-warning-900: #331900; --ds-space-q: calc(2 / var(--rem-base) * 1rem); /* 2px */ --ds-space-h: calc(4 / var(--rem-base) * 1rem); /* 4px */ --ds-space-1: calc(8 / var(--rem-base) * 1rem); /* 8px */ @@ -118,4 +18,14 @@ --ds-space-11: calc(88 / var(--rem-base) * 1rem); /* 88px */ --ds-space-15: calc(120 / var(--rem-base) * 1rem); /* 120px */ } + + html[data-theme="light"] { + @include light-theme; + @include light-inverse; + } + + html[data-theme="dark"] { + @include dark-theme; + @include dark-inverse; + } } diff --git a/src/css/vendor/docsearch.css b/src/css/vendor/docsearch.css new file mode 100644 index 00000000..875e2a54 --- /dev/null +++ b/src/css/vendor/docsearch.css @@ -0,0 +1 @@ +@import "@docsearch/css"; diff --git a/src/js/03-theme-toggle.js b/src/js/03-theme-toggle.js index 8aa31af9..757f670d 100644 --- a/src/js/03-theme-toggle.js +++ b/src/js/03-theme-toggle.js @@ -2,22 +2,44 @@ ;(function () { 'use strict' - var toggle = document.getElementById('theme-toggle') + const toggleButtons = document.querySelectorAll('#theme-toggle .toggle-button') - var prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - var storedTheme = localStorage.getItem('theme') || prefersTheme + const handleThemeChange = (theme) => { + if (theme === 'system') { + const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + document.documentElement.setAttribute('data-theme', systemPreference) + document.documentElement.setAttribute('data-theme-system', true) + localStorage.removeItem('themePreference') + } else { + document.documentElement.setAttribute('data-theme', theme) + document.documentElement.removeAttribute('data-theme-system') + localStorage.setItem('themePreference', theme) + } + applyButtonAria(theme) + } + + const applyButtonAria = (theme) => { + const newButton = document.querySelector(`#theme-toggle .toggle-button[value="${theme}"]`) + toggleButtons.forEach((btn) => { + btn.setAttribute('aria-pressed', btn === newButton) + }) + } - if (!toggle) return + applyButtonAria(localStorage.getItem('themePreference') || 'system') - toggle.onclick = function () { - var currentTheme = document.documentElement.getAttribute('data-theme') || storedTheme || 'light' - var targetTheme = 'light' + toggleButtons.forEach((button) => { + button.addEventListener('click', () => { + const currentTheme = document.documentElement.getAttribute('data-theme') + const isSystemTheme = document.documentElement.hasAttribute('data-theme-system') + if ((button.value === currentTheme && !isSystemTheme) || (button.value === 'system' && isSystemTheme)) return + handleThemeChange(button.value) + }) + }) - if (currentTheme === 'light') { - targetTheme = 'dark' + // Observe system theme changes + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + if (document.documentElement.hasAttribute('data-theme-system')) { + handleThemeChange('system') } - - document.documentElement.setAttribute('data-theme', targetTheme) - localStorage.setItem('theme', targetTheme) - } + }) })() diff --git a/src/js/10-collapse.js b/src/js/09-collapse.js similarity index 100% rename from src/js/10-collapse.js rename to src/js/09-collapse.js diff --git a/src/js/vendor/docsearch.bundle.js b/src/js/vendor/docsearch.bundle.js new file mode 100644 index 00000000..48ff4d3a --- /dev/null +++ b/src/js/vendor/docsearch.bundle.js @@ -0,0 +1 @@ +window.docsearch = require('@docsearch/js') diff --git a/src/js/09-dropdown.js b/src/js/vendor/floatingui.bundle.js similarity index 97% rename from src/js/09-dropdown.js rename to src/js/vendor/floatingui.bundle.js index 779acced..7def5512 100644 --- a/src/js/09-dropdown.js +++ b/src/js/vendor/floatingui.bundle.js @@ -23,7 +23,7 @@ ;(function () { 'use strict' - const { computePosition, autoPlacement, shift } = window.FloatingUIDOM + const { computePosition, autoPlacement, shift } = require('@floating-ui/dom') const isTouchDevice = window.matchMedia('(pointer: coarse)').matches const hideAllDropdowns = () => { diff --git a/src/partials/body-end-scripts.hbs b/src/partials/body-end-scripts.hbs index b231022a..490df65e 100644 --- a/src/partials/body-end-scripts.hbs +++ b/src/partials/body-end-scripts.hbs @@ -1,12 +1,11 @@ - - - + {{#with site.keys}} - {{#if (and algoliaAppId algoliaIndexName algoliaApiKey)}} +{{#if (and algoliaAppId algoliaIndexName algoliaApiKey)}} + - {{/if}} +{{/if}} {{/with}} {{> intercom}} {{> scarf}} diff --git a/src/partials/global-nav.hbs b/src/partials/global-nav.hbs index bcaa04cb..deab0dc8 100644 --- a/src/partials/global-nav.hbs +++ b/src/partials/global-nav.hbs @@ -21,7 +21,7 @@ {{#each ./items}}
  • diff --git a/src/partials/head-scripts.hbs b/src/partials/head-scripts.hbs index ce82fbdd..9142ae44 100644 --- a/src/partials/head-scripts.hbs +++ b/src/partials/head-scripts.hbs @@ -15,37 +15,18 @@ - - - - + function setTheme() { + var localStorage = window.localStorage.getItem("themePreference"); + var systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; - \ No newline at end of file + if (localStorage !== "dark" && localStorage !== "light") { + document.documentElement.setAttribute("data-theme", systemPreference); + document.documentElement.setAttribute("data-theme-system", true); + window.localStorage.removeItem("themePreference"); + } else { + document.documentElement.setAttribute("data-theme", localStorage); + } + }; + setTheme(); + diff --git a/src/partials/head-styles.hbs b/src/partials/head-styles.hbs index aa26e8f3..3006ff77 100644 --- a/src/partials/head-styles.hbs +++ b/src/partials/head-styles.hbs @@ -1 +1,31 @@ + + + + + + diff --git a/src/partials/nav-secondary.hbs b/src/partials/nav-secondary.hbs index c15c4bbf..85a787cb 100644 --- a/src/partials/nav-secondary.hbs +++ b/src/partials/nav-secondary.hbs @@ -1,7 +1,7 @@ -