diff --git a/.gitignore b/.gitignore index dbe2a2b5961..f1fee6a299c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /node_modules +/docs/node_modules test.js coverage/ build/ @@ -26,3 +27,6 @@ versions.json yarn.lock package-lock.json pnpm-lock.yaml + +# Docs site output +_site diff --git a/Makefile.js b/Makefile.js index 4ef251b1415..e0a19541468 100644 --- a/Makefile.js +++ b/Makefile.js @@ -622,10 +622,18 @@ target.gensite = function(prereleaseVersion) { // 3. Copy docs folder to a temporary directory echo("> Copying the docs folder (Step 3)"); - cp("-rf", "docs/src/*", TEMP_DIR); + docFiles.forEach(filePath => { + const pathToCopy = path.join("docs/src", filePath, "*"), + tempPath = path.join(TEMP_DIR, filePath); + + if (!test("-d", tempPath)) { + mkdir(tempPath); + } + + cp("-rf", pathToCopy, tempPath); + }); // special case (for now) - cp("-f", "docs/src/pages/index.md", path.join(TEMP_DIR, "index.md")); rm("-rf", path.join(TEMP_DIR, "pages")); let versions = test("-f", "./versions.json") ? JSON.parse(cat("./versions.json")) : {}; diff --git a/docs/.eleventy.js b/docs/.eleventy.js new file mode 100644 index 00000000000..56ce2de99f1 --- /dev/null +++ b/docs/.eleventy.js @@ -0,0 +1,360 @@ +const eleventyNavigationPlugin = require("@11ty/eleventy-navigation"); +const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); +const pluginRss = require("@11ty/eleventy-plugin-rss"); +const pluginTOC = require('eleventy-plugin-nesting-toc'); +const slugify = require("slugify"); +const markdownIt = require("markdown-it"); +const markdownItAnchor = require('markdown-it-anchor'); +const Image = require("@11ty/eleventy-img"); +const metascraper = require('metascraper')([ + require('metascraper-image')(), + require('metascraper-logo')(), + require('metascraper-logo-favicon')(), + require('metascraper-publisher')(), + require('metascraper-title')(), + require('metascraper-description')(), + require('metascraper-url')() +]); +const got = require('got'); +const path = require('path'); + +const { + DateTime +} = require("luxon"); + +module.exports = function(eleventyConfig) { + let now = new Date(); + + /***************************************************************************************** + * Filters + * ***************************************************************************************/ + eleventyConfig.addFilter("limitTo", function(arr, limit) { + return arr.slice(0, limit); + }); + + eleventyConfig.addFilter('jsonify', function(variable) { + return JSON.stringify(variable); + }); + + eleventyConfig.addFilter('slugify', function(str) { + if (!str) { + return; + } + + return slugify(str, { + lower: true, + strict: true, + remove: /["]/g, + }); + }); + + eleventyConfig.addFilter('URIencode', function(str) { + if (!str) { + return; + } + return encodeURI(str); + }); + + /* order collection by the order specified in the front matter */ + eleventyConfig.addFilter("sortByPageOrder", function(values) { + return values.slice().sort((a, b) => a.data.order - b.data.order); + }); + + eleventyConfig.addFilter("readableDate", (dateObj) => { + //turn it into a JS Date string + date = new Date(dateObj); + //pass it to luxon for formatting + return DateTime.fromJSDate(date).toFormat('dd MMM, yyyy'); + }); + + eleventyConfig.addFilter("blogPermalinkDate", (dateObj) => { + //turn it into a JS Date string + date = new Date(dateObj); + //pass it to luxon for formatting + return DateTime.fromJSDate(dateObj).toFormat('yyyy/MM'); + }); + + eleventyConfig.addFilter("readableDateFromISO", (ISODate) => { + return DateTime.fromISO(ISODate).toUTC().toLocaleString(DateTime.DATE_FULL); + }); + + eleventyConfig.addFilter('dollars', value => { + return new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD" + }).format(value); + }); + + // parse markdown from includes, used for author bios + // Source: https://github.com/11ty/eleventy/issues/658 + eleventyConfig.addFilter('markdown', function(value) { + let markdown = require('markdown-it')({ + html: true + }); + return markdown.render(value); + }); + + /***************************************************************************************** + * Plugins + * ***************************************************************************************/ + eleventyConfig.addPlugin(eleventyNavigationPlugin); + eleventyConfig.addPlugin(syntaxHighlight, { + alwaysWrapLineHighlights: true, + }); + eleventyConfig.addPlugin(pluginRss); + eleventyConfig.addPlugin(pluginTOC, { + tags: ['h2', 'h3', 'h4'], + wrapper: 'nav', // Element to put around the root `ol` + wrapperClass: 'c-toc', // Class for the element around the root `ol` + headingText: '', // Optional text to show in heading above the wrapper element + headingTag: 'h2' // Heading tag when showing heading above the wrapper element + }); + // add IDs to the headers + const markdownIt = require('markdown-it'); + eleventyConfig.setLibrary("md", + markdownIt({ + html: true, + linkify: true, + typographer: true, + + }).use(markdownItAnchor, {}).disable('code') + ); + + /********************************************************************** + * Shortcodes + * ********************************************************************/ + eleventyConfig.addNunjucksAsyncShortcode("link", async function(link) { + const { body: html, url } = await got(link); + const metadata = await metascraper({ html, url }); + + const encodedURL = encodeURIComponent(link); + const the_url = (new URL(link)); // same as url + const domain = the_url.hostname; + + return ` +
+
+ Avatar image for ${domain} +
+
+ ${metadata.title}
+ ${domain} +
+ + + +
`; + }); + + eleventyConfig.addShortcode("fixable", function() { + return ` +
+ 🛠 +

+ if some problems reported by the rule are automatically fixable by the --fix command line option +

+
`; + }); + + eleventyConfig.addShortcode("recommended", function() { + return ` +
+ ✅ +

+ if the "extends": "eslint:recommended" property in a configuration file enables the rule. +

+
`; + }); + + eleventyConfig.addShortcode("hasSuggestions", function() { + return ` +
+ 💡 +

+ if some problems reported by the rule are manually fixable by editor suggestions +

+
`; + }); + + eleventyConfig.addShortcode("related_rules", function(arr) { + let rules = arr, + items = ""; + + rules.forEach(function(rule) { + let list_item = `
  • + + ${rule} + + +
    • `; + items += list_item; + }) + + return ` + `; + }); + + eleventyConfig.addShortcode("important", function(text, url) { + return ` +
    + +
    + Important +
    ${text}
    + Learn more +
    +
    `; + }); + + eleventyConfig.addShortcode("warning", function(text, url) { + return ` +
    + +
    + Warning +
    ${text}
    + Learn more +
    +
    `; + }); + + eleventyConfig.addShortcode("tip", function(text, url) { + return ` +
    + +
    + Tip +
    ${text}
    + Learn more +
    +
    `; + }); + + + eleventyConfig.addWatchTarget("./src/assets/"); + + + + /***************************************************************************************** + * File PassThroughs + * ***************************************************************************************/ + + eleventyConfig.addPassthroughCopy({ + "./src/static": "/" + }); + + eleventyConfig.addPassthroughCopy('./src/assets/'); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.png': "/assets/images" + }); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.jpg': "/assets/images" + }); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.jpeg': "/assets/images" + }); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.svg': "/assets/images" + }); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.mp4': "/assets/videos" + }); + + eleventyConfig.addPassthroughCopy({ + './src/content/**/*.pdf': "/assets/documents" + }); + + eleventyConfig.addPassthroughCopy({ + './node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js': "/assets/js/algoliasearch.js" + }); + + /***************************************************************************************** + * Collections + * ***************************************************************************************/ + + eleventyConfig.addCollection("docs", function(collection) { + return collection.getFilteredByGlob("./src/**/**/*.md"); + }); + + eleventyConfig.addCollection("library", function(collection) { + return collection.getFilteredByGlob("./src/library/**/*.md"); + }); + + + // START, eleventy-img + function imageShortcode(src, alt, cls, sizes = "(max-width: 768px) 100vw, 50vw") { + const source = src; + // console.log(`Generating image(s) from: ${src}`) + let options = { + widths: [600, 900, 1500], + formats: ["webp", "jpeg"], + urlPath: "/assets/images/", + outputDir: "./_site/assets/images/", + filenameFormat: function(id, src, width, format, options) { + const extension = path.extname(src) + const name = path.basename(src, extension) + return `${name}-${width}w.${format}` + } + } + + function getSRC() { + if (source.indexOf("http://") == 0 || source.indexOf("https://") == 0) { + return source; + } else { + // for convenience, you only need to use the image's name in the shortcode, + // and this will handle appending the full path to it + src = path.join('./src/assets/images/', source); + return src; + } + } + + var fullSrc = getSRC(); + // generate images + Image(fullSrc, options) + + let imageAttributes = { + alt, + class: cls, + sizes, + loading: "lazy", + decoding: "async", + } + // get metadata + metadata = Image.statsSync(fullSrc, options) + return Image.generateHTML(metadata, imageAttributes) + } + eleventyConfig.addShortcode("image", imageShortcode) + // END, eleventy-img + + + return { + passthroughFileCopy: true, + + markdownTemplateEngine: 'njk', + dataTemplateEngine: 'njk', + htmlTemplateEngine: 'njk', + + dir: { + input: "src", + includes: "_includes", + layouts: "_includes/layouts", + data: "_data", + output: "_site" + } + }; +}; diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 00000000000..da93197437c --- /dev/null +++ b/docs/package.json @@ -0,0 +1,50 @@ +{ + "name": "foundation", + "version": "1.0.0", + "description": "", + "main": "index.js", + "keywords": [], + "author": "", + "license": "ISC", + "scripts": { + "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", + "watch:sass": "node-sass --watch src/assets/scss -o src/assets/css", + "watch:eleventy": "eleventy --serve --port=2023", + "build:sass": "node-sass src/assets/scss -o src/assets/css", + "build:eleventy": "npx @11ty/eleventy", + "start": "npm-run-all build:sass --parallel watch:* --parallel images", + "build": "npm-run-all build:sass --parallel build:* --parallel images" + }, + "devDependencies": { + "@11ty/eleventy": "^1.0.1", + "@11ty/eleventy-img": "^1.0.0", + "@11ty/eleventy-navigation": "^0.3.2", + "@11ty/eleventy-plugin-rss": "^1.1.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2", + "algoliasearch": "^4.12.1", + "dom-parser": "^0.1.6", + "eleventy-plugin-nesting-toc": "^1.3.0", + "eleventy-plugin-page-assets": "^0.3.0", + "eleventy-plugin-reading-time": "^0.0.1", + "imagemin": "^8.0.1", + "imagemin-cli": "^7.0.0", + "markdown-it": "^12.2.0", + "markdown-it-anchor": "^8.1.2", + "node-sass": "^6.0.1", + "npm-run-all": "^4.1.5", + "rimraf": "^3.0.2", + "sass": "^1.38.0", + "slugify": "^1.6.3" + }, + "dependencies": { + "got": "^11.8.3", + "metascraper": "^5.25.7", + "metascraper-description": "^5.25.7", + "metascraper-image": "^5.25.7", + "metascraper-logo": "^5.25.7", + "metascraper-logo-favicon": "^5.25.7", + "metascraper-publisher": "^5.25.7", + "metascraper-title": "^5.25.7", + "metascraper-url": "^5.25.7" + } +} diff --git a/docs/src/_data/config.json b/docs/src/_data/config.json new file mode 100644 index 00000000000..4acb4820247 --- /dev/null +++ b/docs/src/_data/config.json @@ -0,0 +1,4 @@ +{ + "lang": "en", + "version": "7.26.0" +} diff --git a/docs/src/_data/eslintVersion.js b/docs/src/_data/eslintVersion.js new file mode 100644 index 00000000000..cd60276b37a --- /dev/null +++ b/docs/src/_data/eslintVersion.js @@ -0,0 +1,34 @@ +/** + * @fileoverview Data file for package information + * @author Nicholas C. Zakas + */ + +//----------------------------------------------------------------------------- +// Requirements +//----------------------------------------------------------------------------- + +const fs = require("fs"); +const path = require("path"); + +//----------------------------------------------------------------------------- +// Initialization +//----------------------------------------------------------------------------- + +const pkgPath = path.resolve(__dirname, "../../../package.json"); +const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8")); +const { ESLINT_VERSION } = process.env; + +//----------------------------------------------------------------------------- +// Exports +//----------------------------------------------------------------------------- + +/* + * Because we want to differentiate between the development branch and the + * most recent release, we need a way to override the version. The + * ESLINT_VERSION environment variable allows us to set this to override + * the value displayed on the website. The most common case is we will set + * this equal to "HEAD" for the version that is currently in development on + * GitHub. Otherwise, we will use the version from package.json. + */ + +module.exports = ESLINT_VERSION ?? pkg.version; diff --git a/docs/src/_data/helpers.js b/docs/src/_data/helpers.js new file mode 100644 index 00000000000..a7c4ef6fab7 --- /dev/null +++ b/docs/src/_data/helpers.js @@ -0,0 +1,31 @@ +module.exports = { + /** + * Returns some attributes based on whether the link is active or + * a parent of an active item + * + * @param {String} itemUrl is the link in question + * @param {String} pageUrl is the page context + * @returns {String} is the attributes or empty + */ + getLinkActiveState: function(itemUrl, pageUrl) { + let response = ''; + + if (itemUrl === pageUrl) { + response = ' aria-current="page" '; + } + + if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) { + response += ' data-current="true" '; + } + + return response; + }, + excludeThis: function(arr, pageUrl) { + var newArray = []; + arr.forEach(item => { + if(item.url !== pageUrl) newArray.push(item); + }); + return newArray; + } + +}; diff --git a/docs/src/_data/languages.json b/docs/src/_data/languages.json new file mode 100644 index 00000000000..17221f1526c --- /dev/null +++ b/docs/src/_data/languages.json @@ -0,0 +1,27 @@ +{ + "items": [{ + "flag": "🇺🇸", + "code": "en", + "name": "English (US)", + "url": "https://eslint.org" + }, + { + "flag": "🇯🇵", + "code": "jp", + "name": "Japenese – 日本語", + "url": "https://jp.eslint.org" + }, + { + "flag": "🇫🇷", + "code": "fr", + "name": "Français", + "url": "https://fr.eslint.org" + }, + { + "flag": "🇨🇳", + "code": "cn", + "name": "Chinese - 中文", + "url": "https://cn.eslint.org" + } + ] +} diff --git a/docs/src/_data/navigation.json b/docs/src/_data/navigation.json new file mode 100644 index 00000000000..bc831667e91 --- /dev/null +++ b/docs/src/_data/navigation.json @@ -0,0 +1,24 @@ +{ + "items": [ + { + "text": "Team", + "url": "https://eslint.org/team/" + }, + { + "text": "Blog", + "url": "https://eslint.org/blog/" + }, + { + "text": "Docs", + "url": "https://eslint.org/docs/" + }, + { + "text": "Store", + "url": "https://eslint.threadless.com" + }, + { + "text": "Playground", + "url": "https://eslint.org/play" + } + ] +} diff --git a/docs/src/_data/rules.json b/docs/src/_data/rules.json new file mode 100644 index 00000000000..ce800095f3e --- /dev/null +++ b/docs/src/_data/rules.json @@ -0,0 +1,2098 @@ +{ + "deprecated": { + "description": "These rules have been deprecated in accordance with the deprecation policy, and replaced by newer rules:", + "name": "Deprecated", + "rules": [ + { + "name": "callback-return", + "replacedBy": [] + }, + { + "name": "global-require", + "replacedBy": [] + }, + { + "name": "handle-callback-err", + "replacedBy": [] + }, + { + "name": "id-blacklist", + "replacedBy": [ + "id-denylist" + ] + }, + { + "name": "indent-legacy", + "replacedBy": [ + "indent" + ] + }, + { + "name": "lines-around-directive", + "replacedBy": [ + "padding-line-between-statements" + ] + }, + { + "name": "newline-after-var", + "replacedBy": [ + "padding-line-between-statements" + ] + }, + { + "name": "newline-before-return", + "replacedBy": [ + "padding-line-between-statements" + ] + }, + { + "name": "no-buffer-constructor", + "replacedBy": [] + }, + { + "name": "no-catch-shadow", + "replacedBy": [ + "no-shadow" + ] + }, + { + "name": "no-mixed-requires", + "replacedBy": [] + }, + { + "name": "no-native-reassign", + "replacedBy": [ + "no-global-assign" + ] + }, + { + "name": "no-negated-in-lhs", + "replacedBy": [ + "no-unsafe-negation" + ] + }, + { + "name": "no-new-require", + "replacedBy": [] + }, + { + "name": "no-path-concat", + "replacedBy": [] + }, + { + "name": "no-process-env", + "replacedBy": [] + }, + { + "name": "no-process-exit", + "replacedBy": [] + }, + { + "name": "no-restricted-modules", + "replacedBy": [] + }, + { + "name": "no-spaced-func", + "replacedBy": [ + "func-call-spacing" + ] + }, + { + "name": "no-sync", + "replacedBy": [] + }, + { + "name": "prefer-reflect", + "replacedBy": [] + }, + { + "name": "require-jsdoc", + "replacedBy": [] + }, + { + "name": "valid-jsdoc", + "replacedBy": [] + } + ] + }, + "removed": { + "description": "These rules from older versions of ESLint (before the deprecation policy existed) have been replaced by newer rules:", + "name": "Removed", + "rules": [ + { + "removed": "generator-star", + "replacedBy": [ + "generator-star-spacing" + ] + }, + { + "removed": "global-strict", + "replacedBy": [ + "strict" + ] + }, + { + "removed": "no-arrow-condition", + "replacedBy": [ + "no-confusing-arrow", + "no-constant-condition" + ] + }, + { + "removed": "no-comma-dangle", + "replacedBy": [ + "comma-dangle" + ] + }, + { + "removed": "no-empty-class", + "replacedBy": [ + "no-empty-character-class" + ] + }, + { + "removed": "no-empty-label", + "replacedBy": [ + "no-labels" + ] + }, + { + "removed": "no-extra-strict", + "replacedBy": [ + "strict" + ] + }, + { + "removed": "no-reserved-keys", + "replacedBy": [ + "quote-props" + ] + }, + { + "removed": "no-space-before-semi", + "replacedBy": [ + "semi-spacing" + ] + }, + { + "removed": "no-wrap-func", + "replacedBy": [ + "no-extra-parens" + ] + }, + { + "removed": "space-after-function-name", + "replacedBy": [ + "space-before-function-paren" + ] + }, + { + "removed": "space-after-keywords", + "replacedBy": [ + "keyword-spacing" + ] + }, + { + "removed": "space-before-function-parentheses", + "replacedBy": [ + "space-before-function-paren" + ] + }, + { + "removed": "space-before-keywords", + "replacedBy": [ + "keyword-spacing" + ] + }, + { + "removed": "space-in-brackets", + "replacedBy": [ + "object-curly-spacing", + "array-bracket-spacing" + ] + }, + { + "removed": "space-return-throw-case", + "replacedBy": [ + "keyword-spacing" + ] + }, + { + "removed": "space-unary-word-ops", + "replacedBy": [ + "space-unary-ops" + ] + }, + { + "removed": "spaced-line-comment", + "replacedBy": [ + "spaced-comment" + ] + } + ] + }, + "types": [ + { + "description": "These rules relate to possible logic errors in code:", + "displayName": "Possible Problems", + "name": "problem", + "rules": [ + { + "description": "enforce `return` statements in callbacks of array methods", + "fixable": false, + "hasSuggestions": false, + "name": "array-callback-return", + "recommended": false + }, + { + "description": "require `super()` calls in constructors", + "fixable": false, + "hasSuggestions": false, + "name": "constructor-super", + "recommended": true + }, + { + "description": "enforce \"for\" loop update clause moving the counter in the right direction.", + "fixable": false, + "hasSuggestions": false, + "name": "for-direction", + "recommended": true + }, + { + "description": "enforce `return` statements in getters", + "fixable": false, + "hasSuggestions": false, + "name": "getter-return", + "recommended": true + }, + { + "description": "disallow using an async function as a Promise executor", + "fixable": false, + "hasSuggestions": false, + "name": "no-async-promise-executor", + "recommended": true + }, + { + "description": "disallow `await` inside of loops", + "fixable": false, + "hasSuggestions": false, + "name": "no-await-in-loop", + "recommended": false + }, + { + "description": "disallow reassigning class members", + "fixable": false, + "hasSuggestions": false, + "name": "no-class-assign", + "recommended": true + }, + { + "description": "disallow comparing against -0", + "fixable": false, + "hasSuggestions": false, + "name": "no-compare-neg-zero", + "recommended": true + }, + { + "description": "disallow assignment operators in conditional expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-cond-assign", + "recommended": true + }, + { + "description": "disallow reassigning `const` variables", + "fixable": false, + "hasSuggestions": false, + "name": "no-const-assign", + "recommended": true + }, + { + "description": "disallow constant expressions in conditions", + "fixable": false, + "hasSuggestions": false, + "name": "no-constant-condition", + "recommended": true + }, + { + "description": "disallow returning value from constructor", + "fixable": false, + "hasSuggestions": false, + "name": "no-constructor-return", + "recommended": false + }, + { + "description": "disallow control characters in regular expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-control-regex", + "recommended": true + }, + { + "description": "disallow the use of `debugger`", + "fixable": false, + "hasSuggestions": false, + "name": "no-debugger", + "recommended": true + }, + { + "description": "disallow duplicate arguments in `function` definitions", + "fixable": false, + "hasSuggestions": false, + "name": "no-dupe-args", + "recommended": true + }, + { + "description": "disallow duplicate class members", + "fixable": false, + "hasSuggestions": false, + "name": "no-dupe-class-members", + "recommended": true + }, + { + "description": "disallow duplicate conditions in if-else-if chains", + "fixable": false, + "hasSuggestions": false, + "name": "no-dupe-else-if", + "recommended": true + }, + { + "description": "disallow duplicate keys in object literals", + "fixable": false, + "hasSuggestions": false, + "name": "no-dupe-keys", + "recommended": true + }, + { + "description": "disallow duplicate case labels", + "fixable": false, + "hasSuggestions": false, + "name": "no-duplicate-case", + "recommended": true + }, + { + "description": "disallow duplicate module imports", + "fixable": false, + "hasSuggestions": false, + "name": "no-duplicate-imports", + "recommended": false + }, + { + "description": "disallow empty character classes in regular expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-empty-character-class", + "recommended": true + }, + { + "description": "disallow empty destructuring patterns", + "fixable": false, + "hasSuggestions": false, + "name": "no-empty-pattern", + "recommended": true + }, + { + "description": "disallow reassigning exceptions in `catch` clauses", + "fixable": false, + "hasSuggestions": false, + "name": "no-ex-assign", + "recommended": true + }, + { + "description": "disallow fallthrough of `case` statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-fallthrough", + "recommended": true + }, + { + "description": "disallow reassigning `function` declarations", + "fixable": false, + "hasSuggestions": false, + "name": "no-func-assign", + "recommended": true + }, + { + "description": "disallow assigning to imported bindings", + "fixable": false, + "hasSuggestions": false, + "name": "no-import-assign", + "recommended": true + }, + { + "description": "disallow variable or `function` declarations in nested blocks", + "fixable": false, + "hasSuggestions": false, + "name": "no-inner-declarations", + "recommended": true + }, + { + "description": "disallow invalid regular expression strings in `RegExp` constructors", + "fixable": false, + "hasSuggestions": false, + "name": "no-invalid-regexp", + "recommended": true + }, + { + "description": "disallow irregular whitespace", + "fixable": false, + "hasSuggestions": false, + "name": "no-irregular-whitespace", + "recommended": true + }, + { + "description": "disallow literal numbers that lose precision", + "fixable": false, + "hasSuggestions": false, + "name": "no-loss-of-precision", + "recommended": true + }, + { + "description": "disallow characters which are made with multiple code points in character class syntax", + "fixable": false, + "hasSuggestions": false, + "name": "no-misleading-character-class", + "recommended": true + }, + { + "description": "disallow `new` operators with the `Symbol` object", + "fixable": false, + "hasSuggestions": false, + "name": "no-new-symbol", + "recommended": true + }, + { + "description": "disallow calling global object properties as functions", + "fixable": false, + "hasSuggestions": false, + "name": "no-obj-calls", + "recommended": true + }, + { + "description": "disallow returning values from Promise executor functions", + "fixable": false, + "hasSuggestions": false, + "name": "no-promise-executor-return", + "recommended": false + }, + { + "description": "disallow calling some `Object.prototype` methods directly on objects", + "fixable": false, + "hasSuggestions": false, + "name": "no-prototype-builtins", + "recommended": true + }, + { + "description": "disallow assignments where both sides are exactly the same", + "fixable": false, + "hasSuggestions": false, + "name": "no-self-assign", + "recommended": true + }, + { + "description": "disallow comparisons where both sides are exactly the same", + "fixable": false, + "hasSuggestions": false, + "name": "no-self-compare", + "recommended": false + }, + { + "description": "disallow returning values from setters", + "fixable": false, + "hasSuggestions": false, + "name": "no-setter-return", + "recommended": true + }, + { + "description": "disallow sparse arrays", + "fixable": false, + "hasSuggestions": false, + "name": "no-sparse-arrays", + "recommended": true + }, + { + "description": "disallow template literal placeholder syntax in regular strings", + "fixable": false, + "hasSuggestions": false, + "name": "no-template-curly-in-string", + "recommended": false + }, + { + "description": "disallow `this`/`super` before calling `super()` in constructors", + "fixable": false, + "hasSuggestions": false, + "name": "no-this-before-super", + "recommended": true + }, + { + "description": "disallow the use of undeclared variables unless mentioned in `/*global */` comments", + "fixable": false, + "hasSuggestions": false, + "name": "no-undef", + "recommended": true + }, + { + "description": "disallow confusing multiline expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-unexpected-multiline", + "recommended": true + }, + { + "description": "disallow unmodified loop conditions", + "fixable": false, + "hasSuggestions": false, + "name": "no-unmodified-loop-condition", + "recommended": false + }, + { + "description": "disallow unreachable code after `return`, `throw`, `continue`, and `break` statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-unreachable", + "recommended": true + }, + { + "description": "disallow loops with a body that allows only one iteration", + "fixable": false, + "hasSuggestions": false, + "name": "no-unreachable-loop", + "recommended": false + }, + { + "description": "disallow control flow statements in `finally` blocks", + "fixable": false, + "hasSuggestions": false, + "name": "no-unsafe-finally", + "recommended": true + }, + { + "description": "disallow negating the left operand of relational operators", + "fixable": false, + "hasSuggestions": true, + "name": "no-unsafe-negation", + "recommended": true + }, + { + "description": "disallow use of optional chaining in contexts where the `undefined` value is not allowed", + "fixable": false, + "hasSuggestions": false, + "name": "no-unsafe-optional-chaining", + "recommended": true + }, + { + "description": "disallow unused private class members", + "fixable": false, + "hasSuggestions": false, + "name": "no-unused-private-class-members", + "recommended": false + }, + { + "description": "disallow unused variables", + "fixable": false, + "hasSuggestions": false, + "name": "no-unused-vars", + "recommended": true + }, + { + "description": "disallow the use of variables before they are defined", + "fixable": false, + "hasSuggestions": false, + "name": "no-use-before-define", + "recommended": false + }, + { + "description": "disallow useless backreferences in regular expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-useless-backreference", + "recommended": true + }, + { + "description": "disallow assignments that can lead to race conditions due to usage of `await` or `yield`", + "fixable": false, + "hasSuggestions": false, + "name": "require-atomic-updates", + "recommended": false + }, + { + "description": "require calls to `isNaN()` when checking for `NaN`", + "fixable": false, + "hasSuggestions": false, + "name": "use-isnan", + "recommended": true + }, + { + "description": "enforce comparing `typeof` expressions against valid strings", + "fixable": false, + "hasSuggestions": false, + "name": "valid-typeof", + "recommended": true + } + ] + }, + { + "description": "These rules suggest alternate ways of doing things:", + "displayName": "Suggestions", + "name": "suggestion", + "rules": [ + { + "description": "enforce getter and setter pairs in objects and classes", + "fixable": false, + "hasSuggestions": false, + "name": "accessor-pairs", + "recommended": false + }, + { + "description": "require braces around arrow function bodies", + "fixable": true, + "hasSuggestions": false, + "name": "arrow-body-style", + "recommended": false + }, + { + "description": "enforce the use of variables within the scope they are defined", + "fixable": false, + "hasSuggestions": false, + "name": "block-scoped-var", + "recommended": false + }, + { + "description": "enforce camelcase naming convention", + "fixable": false, + "hasSuggestions": false, + "name": "camelcase", + "recommended": false + }, + { + "description": "enforce or disallow capitalization of the first letter of a comment", + "fixable": true, + "hasSuggestions": false, + "name": "capitalized-comments", + "recommended": false + }, + { + "description": "enforce that class methods utilize `this`", + "fixable": false, + "hasSuggestions": false, + "name": "class-methods-use-this", + "recommended": false + }, + { + "description": "enforce a maximum cyclomatic complexity allowed in a program", + "fixable": false, + "hasSuggestions": false, + "name": "complexity", + "recommended": false + }, + { + "description": "require `return` statements to either always or never specify values", + "fixable": false, + "hasSuggestions": false, + "name": "consistent-return", + "recommended": false + }, + { + "description": "enforce consistent naming when capturing the current execution context", + "fixable": false, + "hasSuggestions": false, + "name": "consistent-this", + "recommended": false + }, + { + "description": "enforce consistent brace style for all control statements", + "fixable": true, + "hasSuggestions": false, + "name": "curly", + "recommended": false + }, + { + "description": "require `default` cases in `switch` statements", + "fixable": false, + "hasSuggestions": false, + "name": "default-case", + "recommended": false + }, + { + "description": "enforce default clauses in switch statements to be last", + "fixable": false, + "hasSuggestions": false, + "name": "default-case-last", + "recommended": false + }, + { + "description": "enforce default parameters to be last", + "fixable": false, + "hasSuggestions": false, + "name": "default-param-last", + "recommended": false + }, + { + "description": "enforce dot notation whenever possible", + "fixable": true, + "hasSuggestions": false, + "name": "dot-notation", + "recommended": false + }, + { + "description": "require the use of `===` and `!==`", + "fixable": true, + "hasSuggestions": false, + "name": "eqeqeq", + "recommended": false + }, + { + "description": "require function names to match the name of the variable or property to which they are assigned", + "fixable": false, + "hasSuggestions": false, + "name": "func-name-matching", + "recommended": false + }, + { + "description": "require or disallow named `function` expressions", + "fixable": false, + "hasSuggestions": false, + "name": "func-names", + "recommended": false + }, + { + "description": "enforce the consistent use of either `function` declarations or expressions", + "fixable": false, + "hasSuggestions": false, + "name": "func-style", + "recommended": false + }, + { + "description": "require grouped accessor pairs in object literals and classes", + "fixable": false, + "hasSuggestions": false, + "name": "grouped-accessor-pairs", + "recommended": false + }, + { + "description": "require `for-in` loops to include an `if` statement", + "fixable": false, + "hasSuggestions": false, + "name": "guard-for-in", + "recommended": false + }, + { + "description": "disallow specified identifiers", + "fixable": false, + "hasSuggestions": false, + "name": "id-denylist", + "recommended": false + }, + { + "description": "enforce minimum and maximum identifier lengths", + "fixable": false, + "hasSuggestions": false, + "name": "id-length", + "recommended": false + }, + { + "description": "require identifiers to match a specified regular expression", + "fixable": false, + "hasSuggestions": false, + "name": "id-match", + "recommended": false + }, + { + "description": "require or disallow initialization in variable declarations", + "fixable": false, + "hasSuggestions": false, + "name": "init-declarations", + "recommended": false + }, + { + "description": "enforce a maximum number of classes per file", + "fixable": false, + "hasSuggestions": false, + "name": "max-classes-per-file", + "recommended": false + }, + { + "description": "enforce a maximum depth that blocks can be nested", + "fixable": false, + "hasSuggestions": false, + "name": "max-depth", + "recommended": false + }, + { + "description": "enforce a maximum number of lines per file", + "fixable": false, + "hasSuggestions": false, + "name": "max-lines", + "recommended": false + }, + { + "description": "enforce a maximum number of lines of code in a function", + "fixable": false, + "hasSuggestions": false, + "name": "max-lines-per-function", + "recommended": false + }, + { + "description": "enforce a maximum depth that callbacks can be nested", + "fixable": false, + "hasSuggestions": false, + "name": "max-nested-callbacks", + "recommended": false + }, + { + "description": "enforce a maximum number of parameters in function definitions", + "fixable": false, + "hasSuggestions": false, + "name": "max-params", + "recommended": false + }, + { + "description": "enforce a maximum number of statements allowed in function blocks", + "fixable": false, + "hasSuggestions": false, + "name": "max-statements", + "recommended": false + }, + { + "description": "enforce a particular style for multiline comments", + "fixable": true, + "hasSuggestions": false, + "name": "multiline-comment-style", + "recommended": false + }, + { + "description": "require constructor names to begin with a capital letter", + "fixable": false, + "hasSuggestions": false, + "name": "new-cap", + "recommended": false + }, + { + "description": "disallow the use of `alert`, `confirm`, and `prompt`", + "fixable": false, + "hasSuggestions": false, + "name": "no-alert", + "recommended": false + }, + { + "description": "disallow `Array` constructors", + "fixable": false, + "hasSuggestions": false, + "name": "no-array-constructor", + "recommended": false + }, + { + "description": "disallow bitwise operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-bitwise", + "recommended": false + }, + { + "description": "disallow the use of `arguments.caller` or `arguments.callee`", + "fixable": false, + "hasSuggestions": false, + "name": "no-caller", + "recommended": false + }, + { + "description": "disallow lexical declarations in case clauses", + "fixable": false, + "hasSuggestions": false, + "name": "no-case-declarations", + "recommended": true + }, + { + "description": "disallow arrow functions where they could be confused with comparisons", + "fixable": true, + "hasSuggestions": false, + "name": "no-confusing-arrow", + "recommended": false + }, + { + "description": "disallow the use of `console`", + "fixable": false, + "hasSuggestions": false, + "name": "no-console", + "recommended": false + }, + { + "description": "disallow `continue` statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-continue", + "recommended": false + }, + { + "description": "disallow deleting variables", + "fixable": false, + "hasSuggestions": false, + "name": "no-delete-var", + "recommended": true + }, + { + "description": "disallow division operators explicitly at the beginning of regular expressions", + "fixable": true, + "hasSuggestions": false, + "name": "no-div-regex", + "recommended": false + }, + { + "description": "disallow `else` blocks after `return` statements in `if` statements", + "fixable": true, + "hasSuggestions": false, + "name": "no-else-return", + "recommended": false + }, + { + "description": "disallow empty block statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-empty", + "recommended": true + }, + { + "description": "disallow empty functions", + "fixable": false, + "hasSuggestions": false, + "name": "no-empty-function", + "recommended": false + }, + { + "description": "disallow `null` comparisons without type-checking operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-eq-null", + "recommended": false + }, + { + "description": "disallow the use of `eval()`", + "fixable": false, + "hasSuggestions": false, + "name": "no-eval", + "recommended": false + }, + { + "description": "disallow extending native types", + "fixable": false, + "hasSuggestions": false, + "name": "no-extend-native", + "recommended": false + }, + { + "description": "disallow unnecessary calls to `.bind()`", + "fixable": true, + "hasSuggestions": false, + "name": "no-extra-bind", + "recommended": false + }, + { + "description": "disallow unnecessary boolean casts", + "fixable": true, + "hasSuggestions": false, + "name": "no-extra-boolean-cast", + "recommended": true + }, + { + "description": "disallow unnecessary labels", + "fixable": true, + "hasSuggestions": false, + "name": "no-extra-label", + "recommended": false + }, + { + "description": "disallow unnecessary semicolons", + "fixable": true, + "hasSuggestions": false, + "name": "no-extra-semi", + "recommended": true + }, + { + "description": "disallow leading or trailing decimal points in numeric literals", + "fixable": true, + "hasSuggestions": false, + "name": "no-floating-decimal", + "recommended": false + }, + { + "description": "disallow assignments to native objects or read-only global variables", + "fixable": false, + "hasSuggestions": false, + "name": "no-global-assign", + "recommended": true + }, + { + "description": "disallow shorthand type conversions", + "fixable": true, + "hasSuggestions": false, + "name": "no-implicit-coercion", + "recommended": false + }, + { + "description": "disallow declarations in the global scope", + "fixable": false, + "hasSuggestions": false, + "name": "no-implicit-globals", + "recommended": false + }, + { + "description": "disallow the use of `eval()`-like methods", + "fixable": false, + "hasSuggestions": false, + "name": "no-implied-eval", + "recommended": false + }, + { + "description": "disallow inline comments after code", + "fixable": false, + "hasSuggestions": false, + "name": "no-inline-comments", + "recommended": false + }, + { + "description": "disallow `this` keywords outside of classes or class-like objects", + "fixable": false, + "hasSuggestions": false, + "name": "no-invalid-this", + "recommended": false + }, + { + "description": "disallow the use of the `__iterator__` property", + "fixable": false, + "hasSuggestions": false, + "name": "no-iterator", + "recommended": false + }, + { + "description": "disallow labels that share a name with a variable", + "fixable": false, + "hasSuggestions": false, + "name": "no-label-var", + "recommended": false + }, + { + "description": "disallow labeled statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-labels", + "recommended": false + }, + { + "description": "disallow unnecessary nested blocks", + "fixable": false, + "hasSuggestions": false, + "name": "no-lone-blocks", + "recommended": false + }, + { + "description": "disallow `if` statements as the only statement in `else` blocks", + "fixable": true, + "hasSuggestions": false, + "name": "no-lonely-if", + "recommended": false + }, + { + "description": "disallow function declarations that contain unsafe references inside loop statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-loop-func", + "recommended": false + }, + { + "description": "disallow magic numbers", + "fixable": false, + "hasSuggestions": false, + "name": "no-magic-numbers", + "recommended": false + }, + { + "description": "disallow mixed binary operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-mixed-operators", + "recommended": false + }, + { + "description": "disallow use of chained assignment expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-multi-assign", + "recommended": false + }, + { + "description": "disallow multiline strings", + "fixable": false, + "hasSuggestions": false, + "name": "no-multi-str", + "recommended": false + }, + { + "description": "disallow negated conditions", + "fixable": false, + "hasSuggestions": false, + "name": "no-negated-condition", + "recommended": false + }, + { + "description": "disallow nested ternary expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-nested-ternary", + "recommended": false + }, + { + "description": "disallow `new` operators outside of assignments or comparisons", + "fixable": false, + "hasSuggestions": false, + "name": "no-new", + "recommended": false + }, + { + "description": "disallow `new` operators with the `Function` object", + "fixable": false, + "hasSuggestions": false, + "name": "no-new-func", + "recommended": false + }, + { + "description": "disallow `Object` constructors", + "fixable": false, + "hasSuggestions": false, + "name": "no-new-object", + "recommended": false + }, + { + "description": "disallow `new` operators with the `String`, `Number`, and `Boolean` objects", + "fixable": false, + "hasSuggestions": false, + "name": "no-new-wrappers", + "recommended": false + }, + { + "description": "disallow `\\8` and `\\9` escape sequences in string literals", + "fixable": false, + "hasSuggestions": true, + "name": "no-nonoctal-decimal-escape", + "recommended": true + }, + { + "description": "disallow octal literals", + "fixable": false, + "hasSuggestions": false, + "name": "no-octal", + "recommended": true + }, + { + "description": "disallow octal escape sequences in string literals", + "fixable": false, + "hasSuggestions": false, + "name": "no-octal-escape", + "recommended": false + }, + { + "description": "disallow reassigning `function` parameters", + "fixable": false, + "hasSuggestions": false, + "name": "no-param-reassign", + "recommended": false + }, + { + "description": "disallow the unary operators `++` and `--`", + "fixable": false, + "hasSuggestions": false, + "name": "no-plusplus", + "recommended": false + }, + { + "description": "disallow the use of the `__proto__` property", + "fixable": false, + "hasSuggestions": false, + "name": "no-proto", + "recommended": false + }, + { + "description": "disallow variable redeclaration", + "fixable": false, + "hasSuggestions": false, + "name": "no-redeclare", + "recommended": true + }, + { + "description": "disallow multiple spaces in regular expressions", + "fixable": true, + "hasSuggestions": false, + "name": "no-regex-spaces", + "recommended": true + }, + { + "description": "disallow specified names in exports", + "fixable": false, + "hasSuggestions": false, + "name": "no-restricted-exports", + "recommended": false + }, + { + "description": "disallow specified global variables", + "fixable": false, + "hasSuggestions": false, + "name": "no-restricted-globals", + "recommended": false + }, + { + "description": "disallow specified modules when loaded by `import`", + "fixable": false, + "hasSuggestions": false, + "name": "no-restricted-imports", + "recommended": false + }, + { + "description": "disallow certain properties on certain objects", + "fixable": false, + "hasSuggestions": false, + "name": "no-restricted-properties", + "recommended": false + }, + { + "description": "disallow specified syntax", + "fixable": false, + "hasSuggestions": false, + "name": "no-restricted-syntax", + "recommended": false + }, + { + "description": "disallow assignment operators in `return` statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-return-assign", + "recommended": false + }, + { + "description": "disallow unnecessary `return await`", + "fixable": false, + "hasSuggestions": false, + "name": "no-return-await", + "recommended": false + }, + { + "description": "disallow `javascript:` urls", + "fixable": false, + "hasSuggestions": false, + "name": "no-script-url", + "recommended": false + }, + { + "description": "disallow comma operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-sequences", + "recommended": false + }, + { + "description": "disallow variable declarations from shadowing variables declared in the outer scope", + "fixable": false, + "hasSuggestions": false, + "name": "no-shadow", + "recommended": false + }, + { + "description": "disallow identifiers from shadowing restricted names", + "fixable": false, + "hasSuggestions": false, + "name": "no-shadow-restricted-names", + "recommended": true + }, + { + "description": "disallow ternary operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-ternary", + "recommended": false + }, + { + "description": "disallow throwing literals as exceptions", + "fixable": false, + "hasSuggestions": false, + "name": "no-throw-literal", + "recommended": false + }, + { + "description": "disallow initializing variables to `undefined`", + "fixable": true, + "hasSuggestions": false, + "name": "no-undef-init", + "recommended": false + }, + { + "description": "disallow the use of `undefined` as an identifier", + "fixable": false, + "hasSuggestions": false, + "name": "no-undefined", + "recommended": false + }, + { + "description": "disallow dangling underscores in identifiers", + "fixable": false, + "hasSuggestions": false, + "name": "no-underscore-dangle", + "recommended": false + }, + { + "description": "disallow ternary operators when simpler alternatives exist", + "fixable": true, + "hasSuggestions": false, + "name": "no-unneeded-ternary", + "recommended": false + }, + { + "description": "disallow unused expressions", + "fixable": false, + "hasSuggestions": false, + "name": "no-unused-expressions", + "recommended": false + }, + { + "description": "disallow unused labels", + "fixable": true, + "hasSuggestions": false, + "name": "no-unused-labels", + "recommended": true + }, + { + "description": "disallow unnecessary calls to `.call()` and `.apply()`", + "fixable": false, + "hasSuggestions": false, + "name": "no-useless-call", + "recommended": false + }, + { + "description": "disallow unnecessary `catch` clauses", + "fixable": false, + "hasSuggestions": false, + "name": "no-useless-catch", + "recommended": true + }, + { + "description": "disallow unnecessary computed property keys in objects and classes", + "fixable": true, + "hasSuggestions": false, + "name": "no-useless-computed-key", + "recommended": false + }, + { + "description": "disallow unnecessary concatenation of literals or template literals", + "fixable": false, + "hasSuggestions": false, + "name": "no-useless-concat", + "recommended": false + }, + { + "description": "disallow unnecessary constructors", + "fixable": false, + "hasSuggestions": false, + "name": "no-useless-constructor", + "recommended": false + }, + { + "description": "disallow unnecessary escape characters", + "fixable": false, + "hasSuggestions": true, + "name": "no-useless-escape", + "recommended": true + }, + { + "description": "disallow renaming import, export, and destructured assignments to the same name", + "fixable": true, + "hasSuggestions": false, + "name": "no-useless-rename", + "recommended": false + }, + { + "description": "disallow redundant return statements", + "fixable": true, + "hasSuggestions": false, + "name": "no-useless-return", + "recommended": false + }, + { + "description": "require `let` or `const` instead of `var`", + "fixable": true, + "hasSuggestions": false, + "name": "no-var", + "recommended": false + }, + { + "description": "disallow `void` operators", + "fixable": false, + "hasSuggestions": false, + "name": "no-void", + "recommended": false + }, + { + "description": "disallow specified warning terms in comments", + "fixable": false, + "hasSuggestions": false, + "name": "no-warning-comments", + "recommended": false + }, + { + "description": "disallow `with` statements", + "fixable": false, + "hasSuggestions": false, + "name": "no-with", + "recommended": true + }, + { + "description": "require or disallow method and property shorthand syntax for object literals", + "fixable": true, + "hasSuggestions": false, + "name": "object-shorthand", + "recommended": false + }, + { + "description": "enforce variables to be declared either together or separately in functions", + "fixable": true, + "hasSuggestions": false, + "name": "one-var", + "recommended": false + }, + { + "description": "require or disallow newlines around variable declarations", + "fixable": true, + "hasSuggestions": false, + "name": "one-var-declaration-per-line", + "recommended": false + }, + { + "description": "require or disallow assignment operator shorthand where possible", + "fixable": true, + "hasSuggestions": false, + "name": "operator-assignment", + "recommended": false + }, + { + "description": "require using arrow functions for callbacks", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-arrow-callback", + "recommended": false + }, + { + "description": "require `const` declarations for variables that are never reassigned after declared", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-const", + "recommended": false + }, + { + "description": "require destructuring from arrays and/or objects", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-destructuring", + "recommended": false + }, + { + "description": "disallow the use of `Math.pow` in favor of the `**` operator", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-exponentiation-operator", + "recommended": false + }, + { + "description": "enforce using named capture group in regular expression", + "fixable": false, + "hasSuggestions": false, + "name": "prefer-named-capture-group", + "recommended": false + }, + { + "description": "disallow `parseInt()` and `Number.parseInt()` in favor of binary, octal, and hexadecimal literals", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-numeric-literals", + "recommended": false + }, + { + "description": "disallow use of `Object.prototype.hasOwnProperty.call()` and prefer use of `Object.hasOwn()`", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-object-has-own", + "recommended": false + }, + { + "description": "disallow using Object.assign with an object literal as the first argument and prefer the use of object spread instead.", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-object-spread", + "recommended": false + }, + { + "description": "require using Error objects as Promise rejection reasons", + "fixable": false, + "hasSuggestions": false, + "name": "prefer-promise-reject-errors", + "recommended": false + }, + { + "description": "disallow use of the `RegExp` constructor in favor of regular expression literals", + "fixable": false, + "hasSuggestions": true, + "name": "prefer-regex-literals", + "recommended": false + }, + { + "description": "require rest parameters instead of `arguments`", + "fixable": false, + "hasSuggestions": false, + "name": "prefer-rest-params", + "recommended": false + }, + { + "description": "require spread operators instead of `.apply()`", + "fixable": false, + "hasSuggestions": false, + "name": "prefer-spread", + "recommended": false + }, + { + "description": "require template literals instead of string concatenation", + "fixable": true, + "hasSuggestions": false, + "name": "prefer-template", + "recommended": false + }, + { + "description": "require quotes around object literal property names", + "fixable": true, + "hasSuggestions": false, + "name": "quote-props", + "recommended": false + }, + { + "description": "enforce the consistent use of the radix argument when using `parseInt()`", + "fixable": false, + "hasSuggestions": true, + "name": "radix", + "recommended": false + }, + { + "description": "disallow async functions which have no `await` expression", + "fixable": false, + "hasSuggestions": false, + "name": "require-await", + "recommended": false + }, + { + "description": "enforce the use of `u` flag on RegExp", + "fixable": false, + "hasSuggestions": false, + "name": "require-unicode-regexp", + "recommended": false + }, + { + "description": "require generator functions to contain `yield`", + "fixable": false, + "hasSuggestions": false, + "name": "require-yield", + "recommended": true + }, + { + "description": "enforce sorted import declarations within modules", + "fixable": true, + "hasSuggestions": false, + "name": "sort-imports", + "recommended": false + }, + { + "description": "require object keys to be sorted", + "fixable": false, + "hasSuggestions": false, + "name": "sort-keys", + "recommended": false + }, + { + "description": "require variables within the same declaration block to be sorted", + "fixable": true, + "hasSuggestions": false, + "name": "sort-vars", + "recommended": false + }, + { + "description": "enforce consistent spacing after the `//` or `/*` in a comment", + "fixable": true, + "hasSuggestions": false, + "name": "spaced-comment", + "recommended": false + }, + { + "description": "require or disallow strict mode directives", + "fixable": true, + "hasSuggestions": false, + "name": "strict", + "recommended": false + }, + { + "description": "require symbol descriptions", + "fixable": false, + "hasSuggestions": false, + "name": "symbol-description", + "recommended": false + }, + { + "description": "require `var` declarations be placed at the top of their containing scope", + "fixable": false, + "hasSuggestions": false, + "name": "vars-on-top", + "recommended": false + }, + { + "description": "require or disallow \"Yoda\" conditions", + "fixable": true, + "hasSuggestions": false, + "name": "yoda", + "recommended": false + } + ] + }, + { + "description": "These rules care about how the code looks rather than how it executes:", + "displayName": "Layout & Formatting", + "name": "layout", + "rules": [ + { + "description": "enforce linebreaks after opening and before closing array brackets", + "fixable": true, + "hasSuggestions": false, + "name": "array-bracket-newline", + "recommended": false + }, + { + "description": "enforce consistent spacing inside array brackets", + "fixable": true, + "hasSuggestions": false, + "name": "array-bracket-spacing", + "recommended": false + }, + { + "description": "enforce line breaks after each array element", + "fixable": true, + "hasSuggestions": false, + "name": "array-element-newline", + "recommended": false + }, + { + "description": "require parentheses around arrow function arguments", + "fixable": true, + "hasSuggestions": false, + "name": "arrow-parens", + "recommended": false + }, + { + "description": "enforce consistent spacing before and after the arrow in arrow functions", + "fixable": true, + "hasSuggestions": false, + "name": "arrow-spacing", + "recommended": false + }, + { + "description": "disallow or enforce spaces inside of blocks after opening block and before closing block", + "fixable": true, + "hasSuggestions": false, + "name": "block-spacing", + "recommended": false + }, + { + "description": "enforce consistent brace style for blocks", + "fixable": true, + "hasSuggestions": false, + "name": "brace-style", + "recommended": false + }, + { + "description": "require or disallow trailing commas", + "fixable": true, + "hasSuggestions": false, + "name": "comma-dangle", + "recommended": false + }, + { + "description": "enforce consistent spacing before and after commas", + "fixable": true, + "hasSuggestions": false, + "name": "comma-spacing", + "recommended": false + }, + { + "description": "enforce consistent comma style", + "fixable": true, + "hasSuggestions": false, + "name": "comma-style", + "recommended": false + }, + { + "description": "enforce consistent spacing inside computed property brackets", + "fixable": true, + "hasSuggestions": false, + "name": "computed-property-spacing", + "recommended": false + }, + { + "description": "enforce consistent newlines before and after dots", + "fixable": true, + "hasSuggestions": false, + "name": "dot-location", + "recommended": false + }, + { + "description": "require or disallow newline at the end of files", + "fixable": true, + "hasSuggestions": false, + "name": "eol-last", + "recommended": false + }, + { + "description": "require or disallow spacing between function identifiers and their invocations", + "fixable": true, + "hasSuggestions": false, + "name": "func-call-spacing", + "recommended": false + }, + { + "description": "enforce line breaks between arguments of a function call", + "fixable": true, + "hasSuggestions": false, + "name": "function-call-argument-newline", + "recommended": false + }, + { + "description": "enforce consistent line breaks inside function parentheses", + "fixable": true, + "hasSuggestions": false, + "name": "function-paren-newline", + "recommended": false + }, + { + "description": "enforce consistent spacing around `*` operators in generator functions", + "fixable": true, + "hasSuggestions": false, + "name": "generator-star-spacing", + "recommended": false + }, + { + "description": "enforce the location of arrow function bodies", + "fixable": true, + "hasSuggestions": false, + "name": "implicit-arrow-linebreak", + "recommended": false + }, + { + "description": "enforce consistent indentation", + "fixable": true, + "hasSuggestions": false, + "name": "indent", + "recommended": false + }, + { + "description": "enforce the consistent use of either double or single quotes in JSX attributes", + "fixable": true, + "hasSuggestions": false, + "name": "jsx-quotes", + "recommended": false + }, + { + "description": "enforce consistent spacing between keys and values in object literal properties", + "fixable": true, + "hasSuggestions": false, + "name": "key-spacing", + "recommended": false + }, + { + "description": "enforce consistent spacing before and after keywords", + "fixable": true, + "hasSuggestions": false, + "name": "keyword-spacing", + "recommended": false + }, + { + "description": "enforce position of line comments", + "fixable": false, + "hasSuggestions": false, + "name": "line-comment-position", + "recommended": false + }, + { + "description": "enforce consistent linebreak style", + "fixable": true, + "hasSuggestions": false, + "name": "linebreak-style", + "recommended": false + }, + { + "description": "require empty lines around comments", + "fixable": true, + "hasSuggestions": false, + "name": "lines-around-comment", + "recommended": false + }, + { + "description": "require or disallow an empty line between class members", + "fixable": true, + "hasSuggestions": false, + "name": "lines-between-class-members", + "recommended": false + }, + { + "description": "enforce a maximum line length", + "fixable": false, + "hasSuggestions": false, + "name": "max-len", + "recommended": false + }, + { + "description": "enforce a maximum number of statements allowed per line", + "fixable": false, + "hasSuggestions": false, + "name": "max-statements-per-line", + "recommended": false + }, + { + "description": "enforce newlines between operands of ternary expressions", + "fixable": true, + "hasSuggestions": false, + "name": "multiline-ternary", + "recommended": false + }, + { + "description": "enforce or disallow parentheses when invoking a constructor with no arguments", + "fixable": true, + "hasSuggestions": false, + "name": "new-parens", + "recommended": false + }, + { + "description": "require a newline after each call in a method chain", + "fixable": true, + "hasSuggestions": false, + "name": "newline-per-chained-call", + "recommended": false + }, + { + "description": "disallow unnecessary parentheses", + "fixable": true, + "hasSuggestions": false, + "name": "no-extra-parens", + "recommended": false + }, + { + "description": "disallow mixed spaces and tabs for indentation", + "fixable": false, + "hasSuggestions": false, + "name": "no-mixed-spaces-and-tabs", + "recommended": true + }, + { + "description": "disallow multiple spaces", + "fixable": true, + "hasSuggestions": false, + "name": "no-multi-spaces", + "recommended": false + }, + { + "description": "disallow multiple empty lines", + "fixable": true, + "hasSuggestions": false, + "name": "no-multiple-empty-lines", + "recommended": false + }, + { + "description": "disallow all tabs", + "fixable": false, + "hasSuggestions": false, + "name": "no-tabs", + "recommended": false + }, + { + "description": "disallow trailing whitespace at the end of lines", + "fixable": true, + "hasSuggestions": false, + "name": "no-trailing-spaces", + "recommended": false + }, + { + "description": "disallow whitespace before properties", + "fixable": true, + "hasSuggestions": false, + "name": "no-whitespace-before-property", + "recommended": false + }, + { + "description": "enforce the location of single-line statements", + "fixable": true, + "hasSuggestions": false, + "name": "nonblock-statement-body-position", + "recommended": false + }, + { + "description": "enforce consistent line breaks after opening and before closing braces", + "fixable": true, + "hasSuggestions": false, + "name": "object-curly-newline", + "recommended": false + }, + { + "description": "enforce consistent spacing inside braces", + "fixable": true, + "hasSuggestions": false, + "name": "object-curly-spacing", + "recommended": false + }, + { + "description": "enforce placing object properties on separate lines", + "fixable": true, + "hasSuggestions": false, + "name": "object-property-newline", + "recommended": false + }, + { + "description": "enforce consistent linebreak style for operators", + "fixable": true, + "hasSuggestions": false, + "name": "operator-linebreak", + "recommended": false + }, + { + "description": "require or disallow padding within blocks", + "fixable": true, + "hasSuggestions": false, + "name": "padded-blocks", + "recommended": false + }, + { + "description": "require or disallow padding lines between statements", + "fixable": true, + "hasSuggestions": false, + "name": "padding-line-between-statements", + "recommended": false + }, + { + "description": "enforce the consistent use of either backticks, double, or single quotes", + "fixable": true, + "hasSuggestions": false, + "name": "quotes", + "recommended": false + }, + { + "description": "enforce spacing between rest and spread operators and their expressions", + "fixable": true, + "hasSuggestions": false, + "name": "rest-spread-spacing", + "recommended": false + }, + { + "description": "require or disallow semicolons instead of ASI", + "fixable": true, + "hasSuggestions": false, + "name": "semi", + "recommended": false + }, + { + "description": "enforce consistent spacing before and after semicolons", + "fixable": true, + "hasSuggestions": false, + "name": "semi-spacing", + "recommended": false + }, + { + "description": "enforce location of semicolons", + "fixable": true, + "hasSuggestions": false, + "name": "semi-style", + "recommended": false + }, + { + "description": "enforce consistent spacing before blocks", + "fixable": true, + "hasSuggestions": false, + "name": "space-before-blocks", + "recommended": false + }, + { + "description": "enforce consistent spacing before `function` definition opening parenthesis", + "fixable": true, + "hasSuggestions": false, + "name": "space-before-function-paren", + "recommended": false + }, + { + "description": "enforce consistent spacing inside parentheses", + "fixable": true, + "hasSuggestions": false, + "name": "space-in-parens", + "recommended": false + }, + { + "description": "require spacing around infix operators", + "fixable": true, + "hasSuggestions": false, + "name": "space-infix-ops", + "recommended": false + }, + { + "description": "enforce consistent spacing before or after unary operators", + "fixable": true, + "hasSuggestions": false, + "name": "space-unary-ops", + "recommended": false + }, + { + "description": "enforce spacing around colons of switch statements", + "fixable": true, + "hasSuggestions": false, + "name": "switch-colon-spacing", + "recommended": false + }, + { + "description": "require or disallow spacing around embedded expressions of template strings", + "fixable": true, + "hasSuggestions": false, + "name": "template-curly-spacing", + "recommended": false + }, + { + "description": "require or disallow spacing between template tags and their literals", + "fixable": true, + "hasSuggestions": false, + "name": "template-tag-spacing", + "recommended": false + }, + { + "description": "require or disallow Unicode byte order mark (BOM)", + "fixable": true, + "hasSuggestions": false, + "name": "unicode-bom", + "recommended": false + }, + { + "description": "require parentheses around immediate `function` invocations", + "fixable": true, + "hasSuggestions": false, + "name": "wrap-iife", + "recommended": false + }, + { + "description": "require parenthesis around regex literals", + "fixable": true, + "hasSuggestions": false, + "name": "wrap-regex", + "recommended": false + }, + { + "description": "require or disallow spacing around the `*` in `yield*` expressions", + "fixable": true, + "hasSuggestions": false, + "name": "yield-star-spacing", + "recommended": false + } + ] + } + ] +} diff --git a/docs/src/_includes/components/_component.njk b/docs/src/_includes/components/_component.njk new file mode 100644 index 00000000000..f36f898aaf0 --- /dev/null +++ b/docs/src/_includes/components/_component.njk @@ -0,0 +1,3 @@ +{% macro component(name, params) %} + {% include './' + name + '.macro.html' ignore missing %} +{% endmacro %} diff --git a/docs/src/_includes/components/alert.macro.html b/docs/src/_includes/components/alert.macro.html new file mode 100644 index 00000000000..f07195a812f --- /dev/null +++ b/docs/src/_includes/components/alert.macro.html @@ -0,0 +1,59 @@ +{%- macro warning(params) -%} +
    + +
    + Warning +
    {{ params.text }}
    + Learn more +
    + + +
    +{%- endmacro -%} + +{%- macro important(params) -%} +
    + +
    + Important +
    {{ params.text }}
    + Learn more +
    + + +
    +{%- endmacro -%} + +{%- macro tip(params) -%} +
    + +
    + Tip +
    {{ params.text }}
    + Learn more +
    + + +
    +{%- endmacro -%} diff --git a/docs/src/_includes/components/button.macro.html b/docs/src/_includes/components/button.macro.html new file mode 100644 index 00000000000..1881d957a26 --- /dev/null +++ b/docs/src/_includes/components/button.macro.html @@ -0,0 +1,26 @@ +{%- macro button(behavior="link", params) -%} + {%- if params.behavior == "action" -%} + + {%- else -%} + + {%- if params.text -%} + {{ params.text }} + {%- else -%} + This is a link styled like a button + {%- endif -%} + + {%- endif -%} +{%- endmacro -%} diff --git a/docs/src/_includes/components/code-tabs.html b/docs/src/_includes/components/code-tabs.html new file mode 100644 index 00000000000..8f1524b7df7 --- /dev/null +++ b/docs/src/_includes/components/code-tabs.html @@ -0,0 +1,21 @@ +
    + +
    +

    npm

    + +```shell + npm install --save-dev +``` + +
    +
    +

    yarn

    + +```shell +yarn install +``` +
    +
    diff --git a/docs/src/_includes/components/docs-index.html b/docs/src/_includes/components/docs-index.html new file mode 100644 index 00000000000..90425816582 --- /dev/null +++ b/docs/src/_includes/components/docs-index.html @@ -0,0 +1,25 @@ +{% set navPages = collections.docs | eleventyNavigation %} +{% macro renderNavListItem(entry) -%} +
  • + {{ entry.title }} + {%- if entry.children.length -%} + + {%- endif -%} +
    • +{%- endmacro %} + + diff --git a/docs/src/_includes/components/docs-toc.html b/docs/src/_includes/components/docs-toc.html new file mode 100644 index 00000000000..94e9a6672fe --- /dev/null +++ b/docs/src/_includes/components/docs-toc.html @@ -0,0 +1,8 @@ + diff --git a/docs/src/_includes/components/hero.macro.html b/docs/src/_includes/components/hero.macro.html new file mode 100644 index 00000000000..3ff0c9c6f80 --- /dev/null +++ b/docs/src/_includes/components/hero.macro.html @@ -0,0 +1,29 @@ +{%- macro hero(params) -%} +
    +
    +
    + {%- if params.post -%} +

    Published {{ params.post.date }} under {{ params.post.category }}

    + {%- endif -%} +

    {{ params.title }}

    +

    + {{ params.supporting_text | safe }} +

    + {% if params.buttons %} +
    + {% if params.buttons.primary %} + {{ params.buttons.primary.primaryText }} + {% endif %} + {% if params.buttons.secondary %} + {{ params.buttons.secondary.secondaryText }} + {% endif %} +
    + + {% endif %} +
    +
    + {% include "partials/carbon-ad.html" %} +
    +
    +
    +{%- endmacro -%} diff --git a/docs/src/_includes/components/language-switcher.html b/docs/src/_includes/components/language-switcher.html new file mode 100644 index 00000000000..0c945201d41 --- /dev/null +++ b/docs/src/_includes/components/language-switcher.html @@ -0,0 +1,24 @@ +
    + Change language + +
    diff --git a/docs/src/_includes/components/logo.html b/docs/src/_includes/components/logo.html new file mode 100644 index 00000000000..1b874feb223 --- /dev/null +++ b/docs/src/_includes/components/logo.html @@ -0,0 +1,21 @@ + diff --git a/docs/src/_includes/components/nav-search.html b/docs/src/_includes/components/nav-search.html new file mode 100644 index 00000000000..531e8197957 --- /dev/null +++ b/docs/src/_includes/components/nav-search.html @@ -0,0 +1,11 @@ +
    + +
    diff --git a/docs/src/_includes/components/nav-version-switcher.html b/docs/src/_includes/components/nav-version-switcher.html new file mode 100644 index 00000000000..da572d5099d --- /dev/null +++ b/docs/src/_includes/components/nav-version-switcher.html @@ -0,0 +1,23 @@ +
    + Versions + + +
    diff --git a/docs/src/_includes/components/navigation.html b/docs/src/_includes/components/navigation.html new file mode 100644 index 00000000000..2aedb4bf664 --- /dev/null +++ b/docs/src/_includes/components/navigation.html @@ -0,0 +1,25 @@ + diff --git a/docs/src/_includes/components/related-rules.macro.html b/docs/src/_includes/components/related-rules.macro.html new file mode 100644 index 00000000000..913872aae7e --- /dev/null +++ b/docs/src/_includes/components/related-rules.macro.html @@ -0,0 +1,14 @@ +{%- macro related_rules(params) -%} + +{%- endmacro -%} diff --git a/docs/src/_includes/components/rule-categories.macro.html b/docs/src/_includes/components/rule-categories.macro.html new file mode 100644 index 00000000000..bdccc0fe40e --- /dev/null +++ b/docs/src/_includes/components/rule-categories.macro.html @@ -0,0 +1,56 @@ + +{%- macro ruleCategories(params) -%} +
    + {%- if params.recommended == true -%} +
    + ✅ +

    + if the "extends": "eslint:recommended" property in a configuration file enables the rule +

    +
    + {%- endif -%} + {%- if params.fixable == true -%} +
    + 🛠 +

    + if some problems reported by the rule are automatically fixable by the --fix command line option +

    +
    + {%- endif -%} + {%- if params.hasSuggestions == true -%} +
    + 💡 +

    + if some problems reported by the rule are manually fixable by editor suggestions +

    +
    + {%- endif -%} +
    +{%- endmacro -%} + +{%- macro recommended() -%} +
    + ✅ +

    + if the "extends": "eslint:recommended" property in a configuration file enables the rule. +

    +
    +{%- endmacro -%} + +{%- macro fixable() -%} +
    + 🛠 +

    + if some problems reported by the rule are automatically fixable by the --fix command line option +

    +
    +{%- endmacro -%} + +{%- macro hasSuggestions() -%} +
    + 💡 +

    + if some problems reported by the rule are manually fixable by editor suggestions +

    +
    +{%- endmacro -%} diff --git a/docs/src/_includes/components/rule.macro.html b/docs/src/_includes/components/rule.macro.html new file mode 100644 index 00000000000..b459cd64548 --- /dev/null +++ b/docs/src/_includes/components/rule.macro.html @@ -0,0 +1,49 @@ +{%- macro rule(params) -%} +
    +
    + {%- if params.deprecated == true -%} +

    + {{ params.name }} + deprecated +

    + {%- if params.replacedBy|length -%} +

    Replaced by {{ params.replacedBy }}

    + {%- else -%}

    {{ params.description }}

    + {%- endif -%} + {%- elseif params.removed == true -%} +

    + {{ params.name }} + removed +

    + {%- if params.replacedBy -%} +

    Replaced by {{ params.replacedBy }}

    + {%- else -%}

    {{ params.description }}

    + {%- endif -%} + {%- else -%} + {{ params.name }} +

    {{ params.description }}

    + {%- endif -%} +
    +
    + + {%- if (params.deprecated) or (params.removed) -%} +

    + +

    + {%- else -%} +

    + ✅ +

    + {%- endif -%} + +

    + 🛠 +

    +

    + 💡 +

    +
    +
    +{%- endmacro -%} diff --git a/docs/src/_includes/components/search.html b/docs/src/_includes/components/search.html new file mode 100644 index 00000000000..6f86571b740 --- /dev/null +++ b/docs/src/_includes/components/search.html @@ -0,0 +1,12 @@ +
    + +
    +
    diff --git a/docs/src/_includes/components/social-icons.html b/docs/src/_includes/components/social-icons.html new file mode 100644 index 00000000000..619c6de7d4e --- /dev/null +++ b/docs/src/_includes/components/social-icons.html @@ -0,0 +1,43 @@ + diff --git a/docs/src/_includes/components/theme-switcher.html b/docs/src/_includes/components/theme-switcher.html new file mode 100644 index 00000000000..7604dc5f705 --- /dev/null +++ b/docs/src/_includes/components/theme-switcher.html @@ -0,0 +1,13 @@ + diff --git a/docs/src/_includes/components/version-switcher.html b/docs/src/_includes/components/version-switcher.html new file mode 100644 index 00000000000..0d28ba7dc3a --- /dev/null +++ b/docs/src/_includes/components/version-switcher.html @@ -0,0 +1,25 @@ +
    + Versions + + +
    diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk new file mode 100644 index 00000000000..36d84377997 --- /dev/null +++ b/docs/src/_includes/layouts/base.njk @@ -0,0 +1,126 @@ + + + + + + + + + + {{ title }} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ content | safe }} + + + + + + + {%- if hook == "component-library" -%} + + {%- endif -%} + + + + + diff --git a/docs/src/_includes/layouts/components.html b/docs/src/_includes/layouts/components.html new file mode 100644 index 00000000000..208186cb07d --- /dev/null +++ b/docs/src/_includes/layouts/components.html @@ -0,0 +1,46 @@ +--- +layout: base.njk +hook: "component-library" +--- + +{% include "partials/docs-header.html" %} + +{% from 'components/hero.macro.html' import hero %} + +{{ hero({ + title: "ESLint Docs Components", + supporting_text: "Components used across this site." + }) +}} + +
    +
    + +
    + +
    +
    +

    {{ title }}

    + {{ content | safe }} +
    +
    +
    + +{% include "partials/site-footer.html" %} diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html new file mode 100644 index 00000000000..b3f301f76ed --- /dev/null +++ b/docs/src/_includes/layouts/doc.html @@ -0,0 +1,37 @@ +--- +layout: base.njk +--- + +{% include "partials/docs-header.html" %} + +
    +
    +
    + {% include 'components/version-switcher.html' %} + {% include 'components/search.html' %} +
    + {% include 'components/docs-index.html' %} +
    + +
    +
    +

    {{ title }}

    + {% include 'components/docs-toc.html' %} + + {{ content | safe }} + +
    + Edit this page +
    +
    + +
    + + {% include "partials/docs-footer.html" %} +
    +
    +
    + + diff --git a/docs/src/_includes/layouts/main.html b/docs/src/_includes/layouts/main.html new file mode 100644 index 00000000000..fce08458293 --- /dev/null +++ b/docs/src/_includes/layouts/main.html @@ -0,0 +1,12 @@ +--- +layout: base.njk +--- + +{% include "partials/docs-header.html" %} + + +
    + {{ content | safe }} +
    + +{% include "partials/site-footer.html" %} diff --git a/docs/src/_includes/partials/carbon-ad.html b/docs/src/_includes/partials/carbon-ad.html new file mode 100644 index 00000000000..0e21248fd91 --- /dev/null +++ b/docs/src/_includes/partials/carbon-ad.html @@ -0,0 +1,11 @@ + + diff --git a/docs/src/_includes/partials/docs-footer.html b/docs/src/_includes/partials/docs-footer.html new file mode 100644 index 00000000000..6bf1f9d684b --- /dev/null +++ b/docs/src/_includes/partials/docs-footer.html @@ -0,0 +1,14 @@ + diff --git a/docs/src/_includes/partials/docs-header.html b/docs/src/_includes/partials/docs-header.html new file mode 100644 index 00000000000..f7abc754879 --- /dev/null +++ b/docs/src/_includes/partials/docs-header.html @@ -0,0 +1,8 @@ +
    +
    + + {% include "components/logo.html" %} + + {% include "components/navigation.html" %} +
    +
    diff --git a/docs/src/_includes/partials/docs-left-sidebar.html b/docs/src/_includes/partials/docs-left-sidebar.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/docs/src/_includes/partials/languages-list.html b/docs/src/_includes/partials/languages-list.html new file mode 100644 index 00000000000..5d22b8a925a --- /dev/null +++ b/docs/src/_includes/partials/languages-list.html @@ -0,0 +1,5 @@ + diff --git a/docs/src/_includes/partials/site-footer.html b/docs/src/_includes/partials/site-footer.html new file mode 100644 index 00000000000..024718769a1 --- /dev/null +++ b/docs/src/_includes/partials/site-footer.html @@ -0,0 +1,24 @@ + diff --git a/docs/src/_includes/partials/versions-list.html b/docs/src/_includes/partials/versions-list.html new file mode 100644 index 00000000000..4c01b52d81f --- /dev/null +++ b/docs/src/_includes/partials/versions-list.html @@ -0,0 +1,5 @@ + diff --git a/docs/src/assets/css/components/accordion.css b/docs/src/assets/css/components/accordion.css new file mode 100644 index 00000000000..3b1c0758113 --- /dev/null +++ b/docs/src/assets/css/components/accordion.css @@ -0,0 +1,70 @@ +.c-accordion__heading { + font-size: var(--step-1); + font-size: 1.125rem; + font-weight: 600; + font-family: var(--text-font); + color: var(--headings-color); } + .accordion-js .c-accordion__heading { + margin: 0; } + .c-accordion__heading > button { + color: inherit; + cursor: pointer; + display: flex; + align-items: baseline; + justify-content: space-between; + font: inherit; + font-size: inherit; + font-weight: 500; + width: 100%; + height: 100%; + text-align: left; + line-height: 1.5; + padding: 0; + border-radius: 0; + position: relative; + border: none; + transition: outline 0.1s linear; + margin-bottom: 2rem; + margin-block-end: 2rem; } + .c-accordion__heading > button[aria-expanded="true"] { + margin-bottom: 0; + margin-block-end: 0; } + .c-accordion__heading > button svg { + flex: none; } + +.c-accordion__panel { + margin-bottom: 4rem; + margin-block-end: 4rem; } + .accordion-js .c-accordion__panel { + margin-bottom: 0; + margin-block-end: 0; + padding: .5rem 0; + padding-right: 3rem; + padding-inline-end: 3rem; } + .accordion-js .c-accordion__panel[aria-hidden="true"] { + margin-bottom: 0; + margin-block-end: 0; } + .accordion-js .c-accordion__panel[aria-hidden="false"] { + margin-bottom: 2rem; + margin-block-end: 2rem; } + +/* Styles for the accordion icon */ +.c-accordion .accordion-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + margin-left: 3rem; + margin-inline-start: 3rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); } + +.c-accordion [aria-expanded="true"] .accordion-icon { + -ms-transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); } + +.c-accordion [aria-hidden="true"] { + display: none; } + +.c-accordion [aria-hidden="false"] { + display: block !important; } diff --git a/docs/src/assets/css/components/alert.css b/docs/src/assets/css/components/alert.css new file mode 100644 index 00000000000..0fdff876347 --- /dev/null +++ b/docs/src/assets/css/components/alert.css @@ -0,0 +1,90 @@ +.alert { + position: relative; + display: grid; + grid-template-columns: auto 1fr; + padding: 1rem; + gap: .75rem; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + align-items: start; + font-size: .875rem; + background-color: var(--body-background-color); + border-radius: var(--border-radius); } + .alert.alert--warning { + border: 1px solid var(--color-rose-300); } + .alert.alert--important { + border: 1px solid var(--color-warning-300); } + .alert.alert--tip { + border: 1px solid var(--color-success-300); } + +[data-theme="dark"] .alert.alert--warning { + border: 1px solid var(--color-rose-300); } + +[data-theme="dark"] .alert.alert--important { + border: 1px solid var(--color-warning-300); } + +[data-theme="dark"] .alert.alert--tip { + border: 1px solid var(--color-success-300); } + +.alert__icon { + color: inherit; + position: relative; + top: 2px; + offset-block-start: 2px; } + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; + margin-block-end: .25rem; } + +.alert--warning { + color: var(--color-rose-600); } + +.alert--important { + color: var(--color-warning-600); } + +.alert--tip { + color: var(--color-success-600); } + +[data-theme="dark"] .alert--warning { + color: var(--color-rose-400); } + +[data-theme="dark"] .alert--important { + color: var(--color-warning-400); } + +[data-theme="dark"] .alert--tip { + color: var(--color-success-400); } + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; } + .alert--warning .alert__type { + color: var(--color-rose-700); } + [data-theme="dark"] .alert--warning .alert__type { + color: var(--color-rose-300); } + .alert--important .alert__type { + color: var(--color-warning-700); } + [data-theme="dark"] .alert--important .alert__type { + color: var(--color-warning-300); } + .alert--tip .alert__type { + color: var(--color-success-700); } + [data-theme="dark"] .alert--tip .alert__type { + color: var(--color-success-300); } + +.alert__learn-more { + display: block; + font-weight: 500; + margin-top: .75rem; + margin-block-start: .75rem; } + .alert--warning .alert__learn-more { + color: var(--color-rose-700); } + [data-theme="dark"] .alert--warning .alert__learn-more { + color: var(--color-rose-300); } + .alert--important .alert__learn-more { + color: var(--color-warning-700); } + [data-theme="dark"] .alert--important .alert__learn-more { + color: var(--color-warning-300); } + .alert--tip .alert__learn-more { + color: var(--color-success-700); } + [data-theme="dark"] .alert--tip .alert__learn-more { + color: var(--color-success-300); } diff --git a/docs/src/assets/css/components/breadcrumbs-min.css b/docs/src/assets/css/components/breadcrumbs-min.css new file mode 100644 index 00000000000..3cb0a60a70c --- /dev/null +++ b/docs/src/assets/css/components/breadcrumbs-min.css @@ -0,0 +1,24 @@ +nav.c-breadcrumbs ol { + list-style: none; + margin: 0; + padding: 0; } + +nav.c-breadcrumbs li { + display: inline-block; + padding: 0.5em 0.25em; + position: relative; } + nav.c-breadcrumbs li::after { + content: "/"; + color: inherit; + display: inline-block; + -webkit-margin-start: .5em; + margin-inline-start: .5em; } + nav.c-breadcrumbs li:last-of-type::after { + display: none; } + nav.c-breadcrumbs li a { + font-weight: bold; } + nav.c-breadcrumbs li a[aria-current] { + color: inherit; + text-decoration: none; + background: none; + font-weight: normal; } diff --git a/docs/src/assets/css/components/breadcrumbs.css b/docs/src/assets/css/components/breadcrumbs.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/docs/src/assets/css/components/buttons.css b/docs/src/assets/css/components/buttons.css new file mode 100644 index 00000000000..5292111f095 --- /dev/null +++ b/docs/src/assets/css/components/buttons.css @@ -0,0 +1,61 @@ +button { + border: none; + background: none; + font: inherit; + cursor: pointer; + line-height: inherit; + display: inline-flex; + align-items: center; + justify-content: center; } + +.c-btn { + background: none; + border: none; + font: inherit; + font-family: var(--text-font); + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75em 1.125em; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + transition: background-color .2s linear, border-color .2s linear; } + .c-btn svg { + color: inherit; } + +.c-btn--large { + font-size: 1.125rem; + padding: .88em 1.5em; } + +.c-btn--block { + display: flex; + width: 100%; } + +a.c-btn { + text-decoration: none; + display: inline-flex; + flex-wrap: wrap; + gap: .5rem; + align-items: center; } + +.c-btn--primary { + background-color: var(--primary-button-background-color); + color: var(--primary-button-text-color); } + .c-btn--primary:hover { + background-color: var(--primary-button-hover-color); } + +.c-btn--secondary { + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .c-btn--secondary:hover { + background-color: var(--secondary-button-hover-color); } + +.c-btn--ghost { + color: var(--body-text-color); + border: 1px solid var(--border-color); } + .c-btn--ghost:hover { + border-color: var(--link-color); } diff --git a/docs/src/assets/css/components/card.css b/docs/src/assets/css/components/card.css new file mode 100644 index 00000000000..40f0a6503a2 --- /dev/null +++ b/docs/src/assets/css/components/card.css @@ -0,0 +1,98 @@ +.card { + text-align: left; + align-self: stretch; + display: inline-flex; + flex-direction: column; + gap: 2rem; + flex: none; } + +.blog-page .card:first-of-type, +.card--featured { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + flex-wrap: wrap; } + @media all and (min-width: 1023px) { + .blog-page .card:first-of-type, + .card--featured { + margin-bottom: var(--space-xl-2xl); + margin-block-end: var(--space-xl-2xl); } } + .blog-page .card:first-of-type .card__cover, + .card--featured .card__cover { + flex: 3 1 450px; } + .blog-page .card:first-of-type .card__content, + .card--featured .card__content { + flex: 3 1 225px; } + +.card__cover { + display: block; } + .card__cover img { + display: block; + width: 100%; + height: 100%; + border-radius: var(--border-radius); + object-fit: cover; + aspect-ratio: 7 / 4; } + +.card__content { + flex: 1; + display: flex; + flex-direction: column; } + +.card .card__title { + margin-top: 0; + margin-bottom: .5rem; + margin-block-start: 0; + margin-block-end: .5rem; } + .card .card__title a { + color: inherit; + text-decoration: none; } + .card .card__title a:hover { + color: var(--link-color); } + +.card__teaser { + margin-bottom: 2rem; + margin-block-end: 2rem; + font-size: var(--step-0); } + +.card__footer { + justify-self: flex-end; + display: grid; + grid-template-columns: auto 1fr; + grid-gap: .75rem; } + +.blog-post__author-photo { + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; } + +.blog-post__author-name { + font-size: var(--step--1); + line-height: 1.5; + font-weight: 500; + color: var(--headings-color); } + +.blog-post__publish-date { + font-size: var(--step--1); + line-height: 1.5; } + +.blog-post__category { + background-color: var(--body-background-color); + border-radius: 1rem; } + +.card .badge-group { + margin-bottom: 1rem; + margin-block-end: 1rem; } + +.badge-group { + background-color: var(--lightest-background-color); + color: var(--link-color); + border-radius: 1rem; + display: inline-flex; + padding: .25rem; + font-size: var(--step--1); + flex: none; + align-self: flex-start; } + .badge-group span { + display: inline-flex; + padding: 0.125rem .5rem; } diff --git a/docs/src/assets/css/components/docs-index.css b/docs/src/assets/css/components/docs-index.css new file mode 100644 index 00000000000..58fa7007634 --- /dev/null +++ b/docs/src/assets/css/components/docs-index.css @@ -0,0 +1,103 @@ +.docs-index a { + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: .5rem .75rem; + margin-left: -.75rem; + margin-inline-start: -.75rem; + color: var(--headings-color); } + .docs-index a:hover, .docs-index a[aria-current="true"] { + background-color: var(--docs-lightest-background-color); + color: var(--link-color); } + +.docs-index__item { + margin: 0; } + .docs-index__item ul ul { + padding-left: .75rem; } + .docs-index__item[data-has-children] { + margin-bottom: .5rem; } + +.docs-index > ul > .docs-index__item { + margin-top: 1.5rem; + margin-block-start: 1.5rem; } + .docs-index > ul > .docs-index__item > a { + color: var(--icon-color); + text-transform: uppercase; + letter-spacing: 1px; + font-size: .875rem; + font-weight: 500; } + +/* Styles for the accordion icon */ +.index-js .index-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + transition: all 0.1s linear; + color: inherit; } + +.index-js [aria-expanded="true"] .index-icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.index-js [aria-hidden="true"] { + display: none; } + +.index-js [aria-hidden="false"] { + display: block; } + +.docs-index__list[data-open="false"] { + display: none; } + @media all and (min-width: 1023px) { + .docs-index__list[data-open="false"] { + display: block; } } + +.docs-index__list[data-open="true"] { + display: block; } + @media all and (min-width: 1023px) { + .docs-index__list[data-open="true"] { + display: block; } } + +.docs-index-toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .docs-index-toggle:hover { + background-color: var(--secondary-button-hover-color); } + @media all and (min-width: 1023px) { + .docs-index-toggle { + display: none; } } + .docs-index-toggle svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .docs-index-toggle #ham-top, + .docs-index-toggle #ham-middle, + .docs-index-toggle #ham-bottom { + transition: all .2s linear; } + .docs-index-toggle #ham-top { + transform-origin: 30px 37px; } + .docs-index-toggle #ham-bottom { + transform-origin: 30px 63px; } + .docs-index-toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .docs-index-toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .docs-index-toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } diff --git a/docs/src/assets/css/components/docs-navigation.css b/docs/src/assets/css/components/docs-navigation.css new file mode 100644 index 00000000000..f32aa044b2f --- /dev/null +++ b/docs/src/assets/css/components/docs-navigation.css @@ -0,0 +1,102 @@ +.docs-site-nav { + display: flex; + flex-direction: column; + flex: 1; + grid-column: 1 / -1; + grid-row: 1; } + .docs-site-nav ul { + list-style: none; + font-size: var(--step-1); + margin-top: 1rem; + margin-block-start: 1rem; + margin-bottom: 2rem; + margin-block-end: 2rem; } + @media all and (min-width: 1023px) { + .docs-site-nav ul { + font-size: var(--step-0); + margin-top: 0; + margin-block-start: 0; + margin-bottom: 0; + margin-block-end: 0; + align-items: center; + display: flex; } } + .docs-site-nav .flexer { + display: flex; + justify-self: flex-end; + align-self: flex-end; } + .docs-site-nav a:not(.c-btn) { + text-decoration: none; + color: inherit; + transition: color .2s linear; } + .docs-site-nav a:not(.c-btn):hover { + color: var(--link-color); } + .docs-site-nav a:not(.c-btn)[aria-current="page"], + .docs-site-nav a:not(.c-btn)[aria-current="true"] { + color: var(--link-color); + text-decoration: none; + font-weight: 500; } + +@media all and (min-width: 1023px) { + .docs-nav-panel { + display: flex; + flex-direction: row; + justify-content: center; } } + +.docs-nav-panel[data-open="false"] { + display: none; } + +@media all and (min-width: 1023px) { + .docs-nav-panel[data-open="true"] { + display: flex; + flex-direction: row; + justify-content: center; } } + +@media all and (min-width: 1023px) { + .docs-nav-panel .mobile-only { + display: none; } } + +.docs-site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: .5rem; + margin-right: -10px; + margin-inline-start: .5rem; + margin-inline-end: -10px; } + .docs-site-nav-toggle svg { + width: 40px; + height: 40px; + color: var(--headings-color); + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .docs-site-nav-toggle #ham-top, + .docs-site-nav-toggle #ham-middle, + .docs-site-nav-toggle #ham-bottom { + transition: all .2s linear; } + .docs-site-nav-toggle #ham-top { + transform-origin: 30px 37px; } + .docs-site-nav-toggle #ham-bottom { + transform-origin: 30px 63px; } + .docs-site-nav-toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .docs-site-nav-toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +@media all and (min-width: 1023px) { + .docs-site-nav { + flex-direction: row; + grid-column: auto; + gap: 2rem; } + .docs-site-nav ul { + display: flex; + gap: 2rem; + font-size: var(--step-0); } + .docs-site-nav ul li { + margin-bottom: 0; + margin-block-end: 0; } + .docs-site-nav .flexer { + order: 1; } } diff --git a/docs/src/assets/css/components/docs-resources.css b/docs/src/assets/css/components/docs-resources.css new file mode 100644 index 00000000000..dd8f8a41c0f --- /dev/null +++ b/docs/src/assets/css/components/docs-resources.css @@ -0,0 +1,55 @@ +.resource { + display: flex; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); + align-items: stretch; + overflow: hidden; + margin-bottom: .5rem; + margin-block-end: .5rem; + position: relative; + transition: all .2s linear; } + .resource:hover { + background-color: var(--lighter-background-color); } + +.resource__image { + flex: 1 0 5.5rem; + max-width: 5.5rem; + overflow: hidden; + padding: .25rem; } + .resource__image img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; } + +.resource__content { + flex: 4; + padding: .75rem; + align-self: center; } + +.resource__title { + text-decoration: none; + color: var(--headings-color); + font-weight: 500; + margin-bottom: .125rem; } + .resource__title::after { + content: ""; + position: absolute; + left: 0; + offset-inline-start: 0; + top: 0; + block-inline-start: 0; + width: 100%; + height: 100%; } + +.resource__domain, +.resource__domain a { + text-decoration: none; + color: var(--body-text-color); + font-size: .875rem; } + +.resource__icon { + color: var(--headings-color); + margin: 1rem; + align-self: center; } diff --git a/docs/src/assets/css/components/donations.css b/docs/src/assets/css/components/donations.css new file mode 100644 index 00000000000..6273c1c97c1 --- /dev/null +++ b/docs/src/assets/css/components/donations.css @@ -0,0 +1,198 @@ +.donations-title { + font-size: inherit; + color: inherit; + font: inherit; + text-align: center; + margin-top: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); } + +ul.donations-list { + margin-top: var(--space-l-2xl); + display: grid; + grid-gap: 0 2rem; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + margin-bottom: 0; + margin-block-end: 0; + align-items: stretch; } + ul.donations-list .donations-item { + display: flex; + margin-bottom: 2rem; + margin-block-end: 2rem; } + +.donation { + width: 100%; + height: 100%; + font-size: var(--step--1); + flex: none; + border-radius: var(--border-radius); + padding: 1rem; + background-color: var(--lightest-background-color); + display: grid; + grid-gap: 1.5rem 2rem; + grid-template-columns: auto 1fr 0; + grid-template-rows: auto 1fr 0; + align-items: end; } + @media all and (min-width: 1023px) { + .donation { + align-items: center; + grid-template-columns: auto 1fr auto; } } + +.donation__sponsor-name { + color: var(--headings-color); + font-weight: 500; } + +.donation__content { + grid-column: 1 / -1; } + +.donation__amount { + grid-column: 3 / 4; + grid-row: 1; + justify-self: end; + white-space: nowrap; } + +.donation__sponsor-name, +.donation__date { + margin-bottom: 0; + margin-block-end: 0; } + +.donation__sponsor-logo { + width: 2.5rem; + height: 2.5rem; + object-fit: cover; + border-radius: var(--border-radius); } + +.donation-plan { + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); + margin-bottom: 2rem; + box-shadow: var(--shadow-lg); } + +.donation-plan__header { + display: grid; + grid-template-columns: auto 1fr; + align-items: start; + grid-gap: 1.5rem; + padding: 2rem 2rem 1.5rem; } + @media all and (max-width: 640px) { + .donation-plan__header img { + width: 3rem; } } + +ul.donation-plan__features li { + margin-bottom: 1rem; + margin-block-start: 1rem; + display: flex; + align-items: start; } + ul.donation-plan__features li .c-icon { + width: 1.5rem; + height: 1.5rem; + margin-right: .75rem; + margin-inline-end: .75rem; } + +.donation-plan__platform-name { + margin-bottom: .25rem; + margin-block-end: .25rem; + font-size: var(--step-2); } + +.donation-plan__description { + margin-bottom: 0; + margin-block-end: 0; } + +.donation-plan__footer .c-btn { + align-items: c; } + .donation-plan__footer .c-btn svg { + margin-top: -.1rem; + margin-block-start: -.1rem; } + +ul.donation-plan__features, +.donation-plan__footer { + padding: 2rem; } + +.donation-plan__header { + padding: 2rem 2rem 1.5rem; } + +@media all and (max-width: 640px) { + ul.donation-plan__features, + .donation-plan__footer { + padding: 2rem 1rem; } + .donation-plan__header { + padding: 2rem 1rem 1.5rem; } } + +.donation-tiers { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 2rem; + margin: 0; + padding: 0; } + +.donation-tiers__item { + display: grid; + grid-template-rows: auto 1fr auto; + grid-gap: 2rem; + padding: 2rem; + margin-bottom: 2rem; + margin-block-end: 2rem; + box-shadow: var(--shadow-lg); + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); } + @media all and (max-width: 640px) { + .donation-tiers__item { + padding: 2rem 1rem; } } + .donation-tiers__item .c-btn { + text-align: center; + font-size: .875rem; } + .donation-tiers__item .c-btn--block:not(:last-of-type) { + margin-bottom: 1rem; + margin-block-end: 1rem; } + .donation-tiers__item.all-others { + all: inherit; + display: block; + grid-column: -1 / 1; + text-align: center; } + +.donation-tiers__title { + margin: 0; + color: var(--link-color); + font-size: var(--step-0); + text-align: center; + font-family: var(--text-font); + font-weight: normal; } + .donation-tiers__title span { + display: block; + margin-bottom: .5rem; + margin-block-end: .5rem; } + .all-others .donation-tiers__title { + margin-bottom: .5rem; + margin-block-end: .5rem; } + .all-others .donation-tiers__title span { + font-weight: 500; + display: inline; } + +.donation-tiers__title__value { + color: var(--headings-color); + font-size: var(--step-3); + font-family: var(--display-font); } + .all-others .donation-tiers__title__value { + all: inherit; } + +.donation-tiers__title__freq { + color: var(--body-text-color); + font-weight: 400; } + .all-others .donation-tiers__title__freq { + all: inherit; } + +.donation-tiers__item__description { + justify-self: baseline; + margin-bottom: 2rem; + margin-block-end: 2rem; } + +.donation-tiers--others { + text-align: center; + margin-top: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); } + .donation-tiers--others p { + margin-bottom: .5rem; + margin-block-end: .5rem; } + .donation-tiers--others .c-btn { + margin-top: 1rem; + margin-block-start: 1rem; } diff --git a/docs/src/assets/css/components/hero.css b/docs/src/assets/css/components/hero.css new file mode 100644 index 00000000000..ecb27abf059 --- /dev/null +++ b/docs/src/assets/css/components/hero.css @@ -0,0 +1,43 @@ +@media all and (min-width: 800px) { + .hero .grid { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 2rem; + align-items: center; } } + +.hero .grid .span-1-7 { + grid-column: 1 / 2; } + +.hero .grid .span-10-12 { + grid-column: 2 / 3; + justify-self: end; } + +.hero { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); + background-color: var(--hero-background-color); } + @media all and (min-width: 800px) { + .hero { + min-height: calc(285px + var(--space-xl-4xl)); } } + .hero .content-container { + padding: var(--space-xl-4xl) 0; + margin: 0; } + .hero > .content-container { + margin: 0 auto; + padding: 0 calc(1rem + 1vw); + padding-bottom: 0; + align-items: center; } + +.hero--homepage .section-title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +.hero--homepage .section-supporting-text { + margin: 0; + font-size: var(--step-1); + text-align: left; } + +.hero--homepage .eslint-actions { + font-size: var(--step-1); + margin-top: 3rem; + margin-block-start: 3rem; } diff --git a/docs/src/assets/css/components/homepage-hero.css b/docs/src/assets/css/components/homepage-hero.css new file mode 100644 index 00000000000..815fd9e9f3c --- /dev/null +++ b/docs/src/assets/css/components/homepage-hero.css @@ -0,0 +1,174 @@ +.problems { + display: inline-block; + position: relative; } + +.eslint-actions { + display: inline-flex; + flex-wrap: wrap; + flex-direction: column; + width: 100%; + gap: 1rem; } + @media all and (min-width: 640px) { + .eslint-actions { + flex-direction: row; } } + +.eslint-install-code-wrapper { + position: relative; } + +.eslint-install-code { + display: inline-flex; + align-items: center; + gap: 1rem; + background-color: var(--lightest-background-color); + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + padding: .75rem 1.25rem .75rem 1rem; + white-space: nowrap; + margin-top: 1.5rem; + margin-block-start: 1.5rem; + overflow-x: auto; + max-width: 100%; + color: var(--headings-color); } + [data-theme="dark"] .eslint-install-code { + background-color: var(--color-neutral-700); } + .eslint-install-code code { + color: var(--headings-color); } + .eslint-install-code input { + all: unset; + min-width: 30ch; + color: inherit; + font-family: var(--mono-font); } + .eslint-install-code input::selection { + background-color: #fff; + color: var(--body-text-color); } + +.eslint-install-code__btn .c-icon { + color: var(--body-text-color); } + +.eslint-install-code__btn:hover .c-icon, .eslint-install-code__btn:focus .c-icon, .eslint-install-code__btn:active .c-icon { + color: var(--link-color); } + +.eslint-install-code__btn[data-copied="true"] .c-icon { + color: var(--link-color); } + +.eslint-install-code__announcement { + font-size: .875rem; + padding: .25rem .75rem; + font-size: var(--step--1); + border-radius: var(--border-radius); + display: block; + position: absolute; + top: calc(100% + .5rem); + offset-block-start: calc(100% + .5rem); + transition: opacity 1s linear 3s; } + .eslint-install-code__announcement[data-fades-out] { + opacity: 0; } + +.eslint-versions-col { + display: flex; + flex-direction: column; } + @media all and (min-width: 1023px) { + .eslint-versions-col { + align-items: flex-end; } } + +.eslint-versions { + margin-top: 3rem; + margin-block-start: 3rem; + display: inline-flex; + flex-direction: column; } + .eslint-versions dt { + border-bottom: 1px solid var(--divider-color); + padding: .25em 0; + margin-bottom: .5em; + padding-right: 1rem; + border-block-end: 1px solid var(--divider-color); + padding: .25em 0; + margin-block-end: .5em; + padding-inline-end: 1rem; } + .eslint-versions dd { + margin-left: 0; + margin-bottom: 1rem; + padding-right: 1rem; + margin-inline-start: 0; + margin-block-end: 1rem; + padding-inline-end: 1rem; } + .eslint-versions .c-icon { + margin-right: .5rem; + margin-inline-end: .5rem; } + +/* homepage metrics section */ +.metrics { + background-color: var(--lightest-background-color); + color: var(--link-color); + font-size: 1.125rem; + border-radius: var(--border-radius); + padding: var(--space-l-2xl); } + @media all and (min-width: 768px) { + .metrics { + display: flex; } } + +.metrics__item { + flex: 1; + display: block; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 1rem; } + +.metrics__value { + display: block; + font-size: var(--step-6); + line-height: 1; + font-family: var(--mono-font); + flex: 9999; + margin-bottom: .75rem; + margin-block-end: .75rem; } + +/* Homepage Features Section */ +.features-wrapper.grid { + align-items: center; } + +.features { + border-left: 4px solid var(--lighter-background-color); + padding-left: 1.5rem; + border-inline-start: 4px solid var(--lighter-background-color); + padding-inline-start: 1.5rem; } + +.feature { + padding: 2rem 0; } + .feature:not(:last-of-type) { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .donate-page .feature { + border-bottom: none; + border-block-end: none; } + +.feature__title { + font-size: var(--step-1); + font-family: var(--text-font); + margin-bottom: .5rem; + margin-block-end: .5rem; } + +.feature__description { + margin-bottom: 1.25rem; + margin-block-end: 1.25rem; } + +.feature__details-link { + display: flex; + gap: .5rem; + align-items: center; + text-decoration: none; } + .feature__details-link:hover { + text-decoration: underline; } + +.features-image { + display: none; } + .features-image img { + margin: 2rem auto; } + .donate-page .features-image img { + overflow: hidden; + display: block; + border-radius: var(--border-radius); } + @media all and (min-width: 1023px) { + .features-image { + display: block; } } diff --git a/docs/src/assets/css/components/homepage.css b/docs/src/assets/css/components/homepage.css new file mode 100644 index 00000000000..815fd9e9f3c --- /dev/null +++ b/docs/src/assets/css/components/homepage.css @@ -0,0 +1,174 @@ +.problems { + display: inline-block; + position: relative; } + +.eslint-actions { + display: inline-flex; + flex-wrap: wrap; + flex-direction: column; + width: 100%; + gap: 1rem; } + @media all and (min-width: 640px) { + .eslint-actions { + flex-direction: row; } } + +.eslint-install-code-wrapper { + position: relative; } + +.eslint-install-code { + display: inline-flex; + align-items: center; + gap: 1rem; + background-color: var(--lightest-background-color); + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + padding: .75rem 1.25rem .75rem 1rem; + white-space: nowrap; + margin-top: 1.5rem; + margin-block-start: 1.5rem; + overflow-x: auto; + max-width: 100%; + color: var(--headings-color); } + [data-theme="dark"] .eslint-install-code { + background-color: var(--color-neutral-700); } + .eslint-install-code code { + color: var(--headings-color); } + .eslint-install-code input { + all: unset; + min-width: 30ch; + color: inherit; + font-family: var(--mono-font); } + .eslint-install-code input::selection { + background-color: #fff; + color: var(--body-text-color); } + +.eslint-install-code__btn .c-icon { + color: var(--body-text-color); } + +.eslint-install-code__btn:hover .c-icon, .eslint-install-code__btn:focus .c-icon, .eslint-install-code__btn:active .c-icon { + color: var(--link-color); } + +.eslint-install-code__btn[data-copied="true"] .c-icon { + color: var(--link-color); } + +.eslint-install-code__announcement { + font-size: .875rem; + padding: .25rem .75rem; + font-size: var(--step--1); + border-radius: var(--border-radius); + display: block; + position: absolute; + top: calc(100% + .5rem); + offset-block-start: calc(100% + .5rem); + transition: opacity 1s linear 3s; } + .eslint-install-code__announcement[data-fades-out] { + opacity: 0; } + +.eslint-versions-col { + display: flex; + flex-direction: column; } + @media all and (min-width: 1023px) { + .eslint-versions-col { + align-items: flex-end; } } + +.eslint-versions { + margin-top: 3rem; + margin-block-start: 3rem; + display: inline-flex; + flex-direction: column; } + .eslint-versions dt { + border-bottom: 1px solid var(--divider-color); + padding: .25em 0; + margin-bottom: .5em; + padding-right: 1rem; + border-block-end: 1px solid var(--divider-color); + padding: .25em 0; + margin-block-end: .5em; + padding-inline-end: 1rem; } + .eslint-versions dd { + margin-left: 0; + margin-bottom: 1rem; + padding-right: 1rem; + margin-inline-start: 0; + margin-block-end: 1rem; + padding-inline-end: 1rem; } + .eslint-versions .c-icon { + margin-right: .5rem; + margin-inline-end: .5rem; } + +/* homepage metrics section */ +.metrics { + background-color: var(--lightest-background-color); + color: var(--link-color); + font-size: 1.125rem; + border-radius: var(--border-radius); + padding: var(--space-l-2xl); } + @media all and (min-width: 768px) { + .metrics { + display: flex; } } + +.metrics__item { + flex: 1; + display: block; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 1rem; } + +.metrics__value { + display: block; + font-size: var(--step-6); + line-height: 1; + font-family: var(--mono-font); + flex: 9999; + margin-bottom: .75rem; + margin-block-end: .75rem; } + +/* Homepage Features Section */ +.features-wrapper.grid { + align-items: center; } + +.features { + border-left: 4px solid var(--lighter-background-color); + padding-left: 1.5rem; + border-inline-start: 4px solid var(--lighter-background-color); + padding-inline-start: 1.5rem; } + +.feature { + padding: 2rem 0; } + .feature:not(:last-of-type) { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .donate-page .feature { + border-bottom: none; + border-block-end: none; } + +.feature__title { + font-size: var(--step-1); + font-family: var(--text-font); + margin-bottom: .5rem; + margin-block-end: .5rem; } + +.feature__description { + margin-bottom: 1.25rem; + margin-block-end: 1.25rem; } + +.feature__details-link { + display: flex; + gap: .5rem; + align-items: center; + text-decoration: none; } + .feature__details-link:hover { + text-decoration: underline; } + +.features-image { + display: none; } + .features-image img { + margin: 2rem auto; } + .donate-page .features-image img { + overflow: hidden; + display: block; + border-radius: var(--border-radius); } + @media all and (min-width: 1023px) { + .features-image { + display: block; } } diff --git a/docs/src/assets/css/components/index.css b/docs/src/assets/css/components/index.css new file mode 100644 index 00000000000..6c913882142 --- /dev/null +++ b/docs/src/assets/css/components/index.css @@ -0,0 +1,74 @@ +.index { + margin-bottom: 4rem; + margin-block-end: 4rem; } + +.index__item { + margin: 0; } + .index__item a { + display: block; + color: inherit; + text-decoration: none; + padding: .625rem .875rem; + font-size: var(--step-0); + border-radius: var(--border-radius); } + .index__item a:hover { + color: var(--link-color); } + .index__item a[aria-current="page"] { + color: var(--link-color); + background-color: var(--lightest-background-color); + font-weight: 500; } + +.index__toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .index__toggle:hover { + background-color: var(--secondary-button-hover-color); } + @media all and (min-width: 1023px) { + .index__toggle { + display: none; } } + .index__toggle svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .index__toggle #ham-top, + .index__toggle #ham-middle, + .index__toggle #ham-bottom { + transition: all .2s linear; } + .index__toggle #ham-top { + transform-origin: 30px 37px; } + .index__toggle #ham-bottom { + transform-origin: 30px 63px; } + .index__toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .index__toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .index__toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +.index__list { + display: block; } + .index__list[data-open="false"] { + display: none; } + @media all and (min-width: 1023px) { + .index__list[data-open="false"] { + display: block; } } + .index__list[data-open="true"] { + display: block; } + @media all and (min-width: 1023px) { + .index__list[data-open="true"] { + display: block; } } diff --git a/docs/src/assets/css/components/language-switcher.css b/docs/src/assets/css/components/language-switcher.css new file mode 100644 index 00000000000..0edff38e349 --- /dev/null +++ b/docs/src/assets/css/components/language-switcher.css @@ -0,0 +1,18 @@ +.switcher--language { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem .5rem; + position: relative; + min-width: 15rem; + padding: 0; } + +.switcher--language .label__text { + flex: 1 0 10ch; } + +.switcher--language .switcher__select { + min-width: 15rem; + flex: 1 0 15rem; } + +.language-switcher { + display: inline-flex; } diff --git a/docs/src/assets/css/components/languages.css b/docs/src/assets/css/components/languages.css new file mode 100644 index 00000000000..6ab22050a85 --- /dev/null +++ b/docs/src/assets/css/components/languages.css @@ -0,0 +1,38 @@ +@charset "UTF-8"; +.languages-list { + margin: 0; + padding: 0; + font-size: var(--step-0); } + .languages-list li { + margin: 0; } + .languages-list li:last-of-type a { + border-bottom: 0; } + .languages-list a { + color: inherit; + display: block; + width: 100%; + padding: .75rem .1rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .languages-list a[aria-current="true"] { + font-weight: 500; + color: var(--link-color); } + .languages-list a[aria-current="true"]::after { + content: "✔️"; } + .languages-list a:hover { + color: var(--link-color); } + +.languages-section .flag { + font-size: 2em; + margin-right: .5rem; + margin-inline-end: .5rem; } + +.languages-section .languages-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; } diff --git a/docs/src/assets/css/components/navigation-min.css b/docs/src/assets/css/components/navigation-min.css new file mode 100644 index 00000000000..98e6312736a --- /dev/null +++ b/docs/src/assets/css/components/navigation-min.css @@ -0,0 +1,5 @@ +.site-nav ul { + display: -webkit-flex; + display: flex; + gap: 1em; + list-style: none; } diff --git a/docs/src/assets/css/components/navigation.css b/docs/src/assets/css/components/navigation.css new file mode 100644 index 00000000000..8d24c73d952 --- /dev/null +++ b/docs/src/assets/css/components/navigation.css @@ -0,0 +1,84 @@ +.site-nav { + display: flex; + flex-direction: column; + flex: 1; + grid-column: 1 / -1; + grid-row: 1; } + .site-nav ul { + list-style: none; + font-size: var(--step-1); + margin-top: 1rem; + margin-block-start: 1rem; } + @media all and (min-width: 680px) { + .site-nav ul { + font-size: var(--step-0); + margin-top: 0; + margin-block-start: 0; + align-items: center; + display: flex; } } + .site-nav ul[data-open="false"] { + display: none; } + @media all and (min-width: 680px) { + .site-nav ul[data-open="true"] { + display: flex; } } + .site-nav .flexer { + display: flex; + justify-self: flex-end; + align-self: flex-end; } + .site-nav a:not(.c-btn) { + text-decoration: none; + color: inherit; + transition: color .2s linear; } + .site-nav a:not(.c-btn):hover { + color: var(--link-color); } + .site-nav a:not(.c-btn)[data-current="page"], + .site-nav a:not(.c-btn)[data-current="true"] { + color: var(--link-color); + text-decoration: none; + font-weight: 500; } + +.site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: .5rem; + margin-right: -10px; + margin-inline-start: .5rem; + margin-inline-end: -10px; } + .site-nav-toggle svg { + width: 40px; + height: 40px; + color: var(--headings-color); + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .site-nav-toggle #ham-top, + .site-nav-toggle #ham-middle, + .site-nav-toggle #ham-bottom { + transition: all .2s linear; } + .site-nav-toggle #ham-top { + transform-origin: 30px 37px; } + .site-nav-toggle #ham-bottom { + transform-origin: 30px 63px; } + .site-nav-toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .site-nav-toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .site-nav-toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +@media all and (min-width: 680px) { + .site-nav { + flex-direction: row; + grid-column: auto; + gap: 2rem; } + .site-nav ul { + display: flex; + gap: 2rem; + font-size: var(--step-0); } + .site-nav ul li { + margin-bottom: 0; + margin-block-end: 0; } + .site-nav .flexer { + order: 1; } } diff --git a/docs/src/assets/css/components/pagination-min.css b/docs/src/assets/css/components/pagination-min.css new file mode 100644 index 00000000000..7a083d8a54a --- /dev/null +++ b/docs/src/assets/css/components/pagination-min.css @@ -0,0 +1,23 @@ +/* Pagination within (and between) individual posts */ +.c-post-pagination ul { + list-style: none; + width: 100%; + outline: 1px solid yellow; + display: -webkit-flex; + display: flex; + -webkit-align-items: flex-start; + align-items: flex-start; } + +.c-post-pagination li { + -webkit-flex: 1; + flex: 1; + display: -webkit-flex; + display: flex; } + +.c-post-pagination a { + display: block; + padding: .5em; } + +/* Pagination on collection pages */ +.c-collection-pagination { + outline: 1px solid yellow; } diff --git a/docs/src/assets/css/components/pagination.css b/docs/src/assets/css/components/pagination.css new file mode 100644 index 00000000000..981803e3a53 --- /dev/null +++ b/docs/src/assets/css/components/pagination.css @@ -0,0 +1,57 @@ +nav.c-pagination { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; } + nav.c-pagination svg { + color: inherit; } + nav.c-pagination a { + color: var(--headings-color); + text-decoration: none; } + +.c-pagination__item { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: .5rem .875rem; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + gap: .5rem; + transition: all .1s linear; } + .c-pagination__item:hover { + border-color: var(--link-color); } + .c-pagination__item[aria-disabled] { + color: var(--body-text-color); + border-color: var(--divider-color); } + .c-pagination__item[aria-disabled]:hover { + border-color: var(--divider-color); } + +.c-pagination__prev { + order: 1; + display: flex; + gap: .5rem; } + +.c-pagination__next { + order: 3; + display: flex; + gap: .5rem; } + +.c-pagination__current { + border: none; + order: 2; + margin: auto; } + @media all and (max-width: 480px) { + .c-pagination__current { + display: none; } } + +@media all and (max-width: 640px) { + .c-pagination__item__text { + /* visually-hide */ + clip: rect(0 0 0 0); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + white-space: nowrap; } } diff --git a/docs/src/assets/css/components/person.css b/docs/src/assets/css/components/person.css new file mode 100644 index 00000000000..4d3dd7247e7 --- /dev/null +++ b/docs/src/assets/css/components/person.css @@ -0,0 +1,98 @@ +/* PERSON */ +.person { + position: relative; } + +.person--contributor { + display: grid; + grid-template-columns: auto 1fr; + align-items: start; + gap: .75rem; } + +.person--author { + margin-bottom: 3rem; + margin-block-end: 3rem; } + @media all and (min-width: 680px) { + .person--author { + display: grid; + grid-template-columns: 1fr 2fr; + grid-gap: 3rem; } } + +.person--author__details { + display: grid; + grid-template-columns: auto 1fr; + align-items: start; + gap: .75rem; } + +.person__photo { + display: block; + border-radius: 50%; + object-fit: cover; + flex: none; + max-width: initial; + margin-bottom: .875rem; + margin-block-end: .875rem; + /* contributor in the post sidebar */ } + .person__photo.person__photo--large { + width: 5rem; + height: 5rem; + margin-bottom: 1.25rem; + margin-block-end: 1.25rem; } + .person__photo.person__photo--medium { + width: 3.5rem; + height: 3.5rem; } + .person__photo.person__photo--small { + width: 3rem; + height: 3rem; } + .post__sidebar-module .person__photo { + width: 3rem; + height: 3rem; } + +.person__bio a:hover { + color: var(--link-color); } + +.person__name { + font-weight: 500; + color: var(--headings-color); + font-size: 1.125rem; } + .post .person__name { + font-size: var(--step-0); } + +.person__handle { + text-decoration: none; + color: var(--link-color); + display: block; + margin-bottom: .5rem; + margin-block-end: .5rem; } + .post .person__handle { + color: inherit; } + .post .person__handle:hover { + color: var(--link-color); } + .post__sidebar-module .person__handle::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + offset-block-start: 0; + offset-block-end: 0; + offset-inline-start: 0; + offset-inline-end: 0; } + +.person__title { + display: block; + margin-bottom: .5rem; + margin-block-end: .5rem; } + +.person__social-links ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + gap: 1rem; } + +/* team page */ +.people-list { + display: grid; + grid-gap: 3rem 2rem; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } diff --git a/docs/src/assets/css/components/post-share.css b/docs/src/assets/css/components/post-share.css new file mode 100644 index 00000000000..ee40eccea8f --- /dev/null +++ b/docs/src/assets/css/components/post-share.css @@ -0,0 +1,37 @@ +.c-share { + display: flex; + flex-wrap: wrap; + gap: .75rem; + position: relative; } + +.c-share__btn { + border-radius: var(--border-radius); + box-shadow: var(--shadow-xs); + border: 1px solid var(--border-color); + padding: .75rem; + display: inline-flex; + align-items: center; + color: var(--icon-color); } + .c-share__btn:hover, .c-share__btn:focus { + color: var(--headings-color); } + .c-share__btn svg { + color: inherit; } + +button.c-share__btn { + color: var(--dark-icon-color); } + button.c-share__btn[data-copied="true"] { + color: var(--link-color); } + +.ctc-announcement { + flex: 1 1 999px; + font-size: .875rem; + font-size: var(--step--1); + padding: .25rem; + border-radius: var(--border-radius); + display: block; + position: absolute; + top: 100%; + offset-block-start: 100%; + transition: opacity 1s linear 3s; } + .ctc-announcement[data-fades-out] { + opacity: 0; } diff --git a/docs/src/assets/css/components/rules.css b/docs/src/assets/css/components/rules.css new file mode 100644 index 00000000000..73b8c3097b7 --- /dev/null +++ b/docs/src/assets/css/components/rules.css @@ -0,0 +1,121 @@ +.rule-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem 1rem; + margin-bottom: 3rem; } + .rule-categories .rule-category { + margin: 0; + padding: 0; + background: none; + border: none; } + .rule-categories .rule-category__description { + flex: 1 1 45ch; } + +.rule-category { + font-size: var(--step--1); + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 1rem; + padding: 1rem; + margin: 1.5rem 0; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); } + .rule-category p { + margin: 0; } + .rule-category .rule-category__description { + flex: 1 1 30ch; } + +.rule { + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 1rem; + padding: 1rem; + margin: .5rem 0; + position: relative; } + .rule p:last-of-type { + margin: 0; } + +.rule__content { + flex: 1 1 35ch; } + +.rule__name { + font-weight: 500; + font-size: .875rem; + margin-bottom: .25rem; + margin-block-end: .25rem; } + .rule__name::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + offset-block-start: 0; + left: 0; + offset-inline-start: 0; } + +a.rule__name { + text-decoration: none; } + a.rule__name:hover { + text-decoration: underline; } + +.rule__description { + font-size: var(--step--1); } + +.rule__categories { + font-size: .875rem; + display: flex; + align-items: center; + gap: 1rem; + border-radius: var(--border-radius); + padding: 2px 4px; } + .rule__categories p { + display: inline-flex; + margin: 0; + align-items: center; } + [data-theme="dark"] .rule__categories { + background: var(--body-background-color); } + +.rule__status { + color: var(--color-rose-500); + background: var(--color-rose-50); + border-radius: var(--border-radius); + display: inline-block; + font-weight: normal; + margin-left: .5rem; + margin-inline-start: .5rem; + font-size: var(--step--1); + padding: 0 .5rem; } + [data-theme="dark"] .rule__status { + background: var(--body-background-color); } + +.rule__categories__type[aria-hidden="true"] { + opacity: .25; } + +/* related rules */ +.related-rules__list { + display: flex; + gap: .5rem; + flex-wrap: wrap; + justify-content: start; } + +.related-rules__list__item svg { + color: inherit; } + +.related-rules__list__item a { + text-decoration: none; + color: var(--headings-color); + padding: .625rem; + display: inline-flex; + gap: .5rem; + align-items: center; + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); } + .related-rules__list__item a:hover { + color: var(--link-color); + background-color: var(--lighter-background-color); } diff --git a/docs/src/assets/css/components/search-ui.css b/docs/src/assets/css/components/search-ui.css new file mode 100644 index 00000000000..4b699ee5b70 --- /dev/null +++ b/docs/src/assets/css/components/search-ui.css @@ -0,0 +1,16 @@ +.search__input-wrapper { + position: relative; } + +.search__input { + padding-left: 2.5rem; + padding-inline-start: 2.5rem; + outline-offset: 1px; } + +.search__icon { + color: var(--body-text-color); + position: absolute; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: .75rem; + offset-inline-start: .75rem; } diff --git a/docs/src/assets/css/components/search.css b/docs/src/assets/css/components/search.css new file mode 100644 index 00000000000..72e52a3a73f --- /dev/null +++ b/docs/src/assets/css/components/search.css @@ -0,0 +1,23 @@ +.search { + margin-bottom: 1.5rem; } + +.search__input-wrapper { + position: relative; } + +.search__input { + padding-left: 2.5rem; + padding-inline-start: 2.5rem; + outline-offset: 1px; + width: 100%; } + +.search__icon { + color: var(--body-text-color); + position: absolute; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: .75rem; + offset-inline-start: .75rem; } + +.algolia-docsearch-suggestion--highlight { + background-color: var(--color-warning-300); } diff --git a/docs/src/assets/css/components/slider.css b/docs/src/assets/css/components/slider.css new file mode 100644 index 00000000000..8c7233eb67d --- /dev/null +++ b/docs/src/assets/css/components/slider.css @@ -0,0 +1,146 @@ +.c-slider[data-slider] { + position: relative; + padding: 0; } + +@media all and (min-width: 1023px) { + .c-slider__paddleNav { + margin-top: -4rem; + margin-block-start: -4rem; + position: relative; + z-index: 2; } } + +.c-slider__paddleNav .c-slider__paddleNav__prev, +.c-slider__paddleNav .c-slider__paddleNav__next { + width: 3.5rem; + height: 3.5rem; + border: 2px solid transparent; + border-radius: 50%; + border-color: var(--divider-color); + line-height: 0; + background-color: var(--lighter-background-color); } + .c-slider__paddleNav .c-slider__paddleNav__prev svg, + .c-slider__paddleNav .c-slider__paddleNav__next svg { + display: block; + width: 100%; + transition: color .1s linear; + color: var(--dark-icon-color); } + .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"] svg, + .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"] svg { + color: var(--color-neutral-400); } + .c-slider__paddleNav .c-slider__paddleNav__prev:hover svg, + .c-slider__paddleNav .c-slider__paddleNav__next:hover svg { + color: var(--link-color); } + .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:hover svg, + .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:hover svg { + color: var(--color-neutral-400); } + .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:hover:focus, + .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:hover:focus { + border-color: transparent; } + .c-slider__paddleNav .c-slider__paddleNav__prev:focus, .c-slider__paddleNav .c-slider__paddleNav__prev:active, + .c-slider__paddleNav .c-slider__paddleNav__next:focus, + .c-slider__paddleNav .c-slider__paddleNav__next:active { + border-color: var(--link-color); } + .c-slider__paddleNav .c-slider__paddleNav__prev[aria-disabled="true"]:focus, + .c-slider__paddleNav .c-slider__paddleNav__next[aria-disabled="true"]:focus { + border-color: transparent; } + .c-slider__paddleNav .c-slider__paddleNav__prev:focus:not(:focus-visible), + .c-slider__paddleNav .c-slider__paddleNav__next:focus:not(:focus-visible) { + border-color: transparent; } + .js-focus-visible .c-slider__paddleNav .c-slider__paddleNav__prev:focus:not(.focus-visible), .js-focus-visible + .c-slider__paddleNav .c-slider__paddleNav__next:focus:not(.focus-visible) { + border-color: transparent; } + +.c-slider__slides-container { + display: flex; } + +@media all and (min-width: 1023px) { + .c-slider__slides-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0 2rem; } } + +.c-slider__slide { + width: 100%; + color: var(--headings-color); + flex-shrink: 0; + margin-bottom: 4rem; + margin-block-end: 4rem; + transition: opacity 0.5s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 1s cubic-bezier(0.39, 0.03, 0.56, 0.57); } + .c-slider__slide[data-hidden="true"] { + visibility: hidden; + opacity: 0; } + .c-slider__slide[data-hidden="false"] { + visibility: visible; + opacity: 1; + transition: opacity 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57), visibility 0.2s cubic-bezier(0.39, 0.03, 0.56, 0.57); } + +.c-slider--testimonials .c-slider__testimonial { + margin: 0; } + +.c-slider--testimonials .c-slider__testimonial__img { + display: none; } + +.c-slider--testimonials .c-slider__testimonial__content { + font-size: var(--step-1); + margin: 0 auto; } + .c-slider--testimonials .c-slider__testimonial__content p:last-of-type { + margin-bottom: 0; + margin-block-end: 0; } + +.c-slider--testimonials .c-slider__testimonial__footer { + margin-top: var(--space-l-xl); + margin-bottom: 3rem; + margin-block-start: var(--space-l-xl); + margin-block-end: 3rem; } + +.c-slider--testimonials .c-slider__testimonial__footer cite { + font-style: normal; + font-size: 1.125rem; } + +.c-slider--testimonials .c-slider__testimonial__author { + font-weight: 500; } + +.c-slider--testimonials .c-slider__testimonial__author-role { + color: var(--body-text-color); } + +.c-slider--testimonials .c-slider__testimonial__author, +.c-slider--testimonials .c-slider__testimonial__author-role { + display: block; + margin-bottom: 0; + margin-block-end: 0; } + +.js-slider .c-slider__slides-container { + overflow: hidden; } + +@media all and (min-width: 1023px) { + .js-slider .person__photo { + display: none; } } + +.js-slider .c-slider__slides-wrapper { + width: 100%; + grid-gap: 0; + display: flex; + align-items: center; + transition: transform 0.4s cubic-bezier(0.39, 0.03, 0.56, 0.57); } + +.js-slider .c-slider__slide { + margin: 0; + flex-shrink: 0; + width: 100%; } + @media all and (min-width: 1023px) { + .js-slider .c-slider__slide { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 2rem; + align-items: center; } } + +.js-slider .c-slider__testimonial__img { + display: block; + border-radius: var(--border-radius); + max-height: 550px; + overflow: hidden; } + @media all and (max-width: 1023px) { + .js-slider .c-slider__testimonial__img { + display: none; } } + .js-slider .c-slider__testimonial__img img { + object-fit: cover; } diff --git a/docs/src/assets/css/components/social-icons.css b/docs/src/assets/css/components/social-icons.css new file mode 100644 index 00000000000..6003c73e13e --- /dev/null +++ b/docs/src/assets/css/components/social-icons.css @@ -0,0 +1,16 @@ +.eslint-social-icons { + margin-bottom: -1rem; + margin-block-end: -1rem; } + .eslint-social-icons ul { + margin: 0; + padding: 0; + margin-left: -1rem; + margin-inline-start: -1rem; + display: inline-flex; } + .eslint-social-icons ul li { + margin: 0; + display: inline-flex; + align-items: center; } + .eslint-social-icons ul li a { + display: flex; + padding: 1rem; } diff --git a/docs/src/assets/css/components/sponsors.css b/docs/src/assets/css/components/sponsors.css new file mode 100644 index 00000000000..23d4881898a --- /dev/null +++ b/docs/src/assets/css/components/sponsors.css @@ -0,0 +1,38 @@ +/* sponsors lists */ +.sponsors.sponsors { + text-align: center; + margin-bottom: var(--space-m-l); + margin-block-end: var(--space-m-l); + display: flex; + flex-wrap: wrap; + justify-content: center; } + @media all and (max-width: 1023px) { + .sponsors.sponsors { + margin-top: 2.5rem; + margin-block-start: 2.5rem; } } + .sponsors.sponsors li { + display: inline-block; + margin: 0 .75rem 1.5rem; } + .sponsors.sponsors li a { + display: block; } + .sponsors.sponsors picture, .sponsors.sponsors img { + display: block; + height: auto; + max-height: 3rem; } + +.sponsors.sponsors--backers picture, .sponsors.sponsors--backers img { + border-radius: 50%; } + +.sponsors.sponsors--platinum picture, .sponsors.sponsors--platinum img { + max-height: 8rem; } + +.sponsors.sponsors--gold picture, .sponsors.sponsors--gold img { + max-height: 6rem; } + +.sponsors.sponsors--silver picture, .sponsors.sponsors--silver img { + max-height: 8rem; } + +.sponsors.sponsors--bronze picture, .sponsors.sponsors--bronze img, +.sponsors.sponsors--technology picture, +.sponsors.sponsors--technology img { + max-height: 3rem; } diff --git a/docs/src/assets/css/components/swatches.css b/docs/src/assets/css/components/swatches.css new file mode 100644 index 00000000000..55731f7235b --- /dev/null +++ b/docs/src/assets/css/components/swatches.css @@ -0,0 +1,40 @@ +.swatches { + margin: 0; + padding: 0; + margin-top: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); + list-style: none; + display: flex; + flex-wrap: wrap; } + @media all and (min-width: 1023px) { + .swatches { + display: grid; + margin: 0; + overflow: initial; + grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); + grid-gap: 2rem .5rem; } } + +.swatch { + min-width: 105px; + margin: 0; + border-radius: var(--border-radius); + box-shadow: var(--shadow-lg); + display: inline-flex; + flex-direction: column-reverse; + margin-right: 1rem; + margin-inline-end: 1rem; + overflow: hidden; } + .swatch svg { + display: block; + max-width: 100%; + width: 124px; + height: 80px; } + .swatch figcaption { + display: block; + padding: .75rem; } + .swatch figcaption span { + display: block; } + +.swatch__description { + color: var(--headings-color); + font-weight: 500; } diff --git a/docs/src/assets/css/components/tabs.css b/docs/src/assets/css/components/tabs.css new file mode 100644 index 00000000000..0830a08ce10 --- /dev/null +++ b/docs/src/assets/css/components/tabs.css @@ -0,0 +1,45 @@ +.c-tabs pre { + margin-top: 0; + margin-block-start: 0; } + +.js-tabs .c-tabs__tablist { + display: flex; + justify-content: start; } + +.c-tabs__tab { + background: none; + border: none; + margin: 0; + color: inherit; + font: inherit; + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75rem 1.125rem; + align-items: center; + justify-content: center; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: background-color .2s linear, border-color .2s linear; } + .c-tabs__tab:hover { + color: var(--link-color); } + .c-tabs__tab[aria-selected="true"] { + color: var(--link-color); + background-color: var(--lightest-background-color); } + +.c-tabs__tabpanel { + margin-bottom: 2rem; + margin-block-end: 2rem; + background-color: var(--lightest-background-color); + border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); } + .js-tabs .c-tabs__tabpanel { + margin-bottom: 0; + margin-block-end: 0; } + +.c-tabs__tabpanel__title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +.js-tabs .c-tabs__tabpanel__title { + display: none; } diff --git a/docs/src/assets/css/components/theme-switcher.css b/docs/src/assets/css/components/theme-switcher.css new file mode 100644 index 00000000000..5f3fb3ba097 --- /dev/null +++ b/docs/src/assets/css/components/theme-switcher.css @@ -0,0 +1,53 @@ +.theme-switcher { + display: inline-flex; + align-items: center; + gap: .5rem; + position: relative; } + +.theme-switcher-label.theme-switcher-label { + font-size: inherit; + color: inherit; + font: inherit; + font-family: var(--text-font); + margin: 0; } + +.theme-switcher__buttons { + display: flex; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--body-background-color); } + +.theme-switcher__button { + flex: 0; + box-shadow: var(--shadow-xs); + padding: .625rem .875rem; + display: inline-flex; + align-items: center; + margin: 0; + width: 40px; + height: 40px; } + .theme-switcher__button:first-of-type { + border-right: 0.5px solid var(--border-color); + border-inline-end: 0.5px solid var(--border-color); } + .theme-switcher__button:last-of-type { + border-left: 0.5px solid var(--border-color); + border-inline-start: 0.5px solid var(--border-color); } + .theme-switcher__button .theme-switcher__icon { + color: var(--icon-color); } + .theme-switcher__button:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="true"] .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="true"]:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="false"] .theme-switcher__icon { + color: var(--icon-color); } + +.theme-switcher__button[aria-pressed="false"]:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button:hover .theme-switcher__icon { + color: var(--link-color); } diff --git a/docs/src/assets/css/components/toc-min.css b/docs/src/assets/css/components/toc-min.css new file mode 100644 index 00000000000..2d96bb862d5 --- /dev/null +++ b/docs/src/assets/css/components/toc-min.css @@ -0,0 +1,6 @@ +.c-toc ol { + list-style: decimal-leading-zero; } + +.c-toc--main a { + font-weight: 500; + font-size: 1.5rem; } diff --git a/docs/src/assets/css/components/toc.css b/docs/src/assets/css/components/toc.css new file mode 100644 index 00000000000..7c842456d58 --- /dev/null +++ b/docs/src/assets/css/components/toc.css @@ -0,0 +1,76 @@ +@charset "UTF-8"; +.docs-toc { + margin: 2rem 0; } + +.c-toc ol { + margin: 0; } + .c-toc ol li { + position: relative; + margin-bottom: .25rem; + margin-block-end: .25rem; + padding-left: 1rem; + padding-inline-start: 1rem; } + .c-toc ol li > ol { + margin-top: .25rem; } + .c-toc ol li::before { + content: "└"; + color: var(--icon-color); + position: absolute; + left: -.4rem; + offset-inline-start: -.4rem; } + +.c-toc a { + text-decoration: none; + color: var(--headings-color); } + .c-toc a:hover { + color: var(--link-color); } + +.c-toc__label.c-toc__label { + font-size: var(--step-0); + color: var(--body-text-color); + font-family: var(--text-font); + margin-bottom: .5rem; + margin-block-end: .5rem; } + +.c-toc__label { + width: fit-content; } + .c-toc__label button { + color: var(--link-color); + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + font: inherit; + font-size: inherit; + font-weight: 500; + width: 100%; + height: 100%; + text-align: left; + line-height: 1.5; + padding: 0; + border-radius: 0; + position: relative; + border: none; + transition: outline 0.1s linear; } + .c-toc__label button svg { + flex: none; } + +/* Styles for the accordion icon */ +.toc-trigger-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + margin-left: 3rem; + margin-inline-start: 3rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); } + [aria-expanded="true"] .toc-trigger-icon { + -ms-transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); } + +.c-toc__panel[data-open="false"] { + display: none; } + +.c-toc__panel[data-open="true"] { + display: block; } diff --git a/docs/src/assets/css/components/tweet-min.css b/docs/src/assets/css/components/tweet-min.css new file mode 100644 index 00000000000..b9516e2a629 --- /dev/null +++ b/docs/src/assets/css/components/tweet-min.css @@ -0,0 +1,14 @@ +blockquote.tweet { + padding: 1em 1em 1em 4em; + margin: 2rem 0; + position: relative; + font-size: 1.1rem; } + blockquote.tweet cite { + font-size: 1rem; } + +.tweet__icon { + width: 2.5em; + height: 2.5em; + position: absolute; + left: .5em; + top: .5em; } diff --git a/docs/src/assets/css/components/tweet.css b/docs/src/assets/css/components/tweet.css new file mode 100644 index 00000000000..b9516e2a629 --- /dev/null +++ b/docs/src/assets/css/components/tweet.css @@ -0,0 +1,14 @@ +blockquote.tweet { + padding: 1em 1em 1em 4em; + margin: 2rem 0; + position: relative; + font-size: 1.1rem; } + blockquote.tweet cite { + font-size: 1rem; } + +.tweet__icon { + width: 2.5em; + height: 2.5em; + position: absolute; + left: .5em; + top: .5em; } diff --git a/docs/src/assets/css/components/version-switcher.css b/docs/src/assets/css/components/version-switcher.css new file mode 100644 index 00000000000..a1984328c02 --- /dev/null +++ b/docs/src/assets/css/components/version-switcher.css @@ -0,0 +1,3 @@ +.version-switcher { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } diff --git a/docs/src/assets/css/components/versions.css b/docs/src/assets/css/components/versions.css new file mode 100644 index 00000000000..6a9d607b8ac --- /dev/null +++ b/docs/src/assets/css/components/versions.css @@ -0,0 +1,34 @@ +@charset "UTF-8"; +.versions-list { + margin: 0; + padding: 0; + font-size: var(--step-1); } + .versions-list li { + margin: 0; } + .versions-list li:last-of-type a { + border-bottom: 0; + border-block-end: 0; } + .versions-list a { + color: var(--link-color); + display: block; + width: 100%; + padding: 1rem .5rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .versions-list a[data-current="true"] { + font-weight: 500; + color: var(--link-color); } + .versions-list a[data-current="true"]::after { + content: "✔️"; } + .versions-list a:hover { + background-color: var(--lightest-background-color); } + +.versions-section .versions-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; } diff --git a/docs/src/assets/css/print.css b/docs/src/assets/css/print.css new file mode 100644 index 00000000000..40e8d3dcc49 --- /dev/null +++ b/docs/src/assets/css/print.css @@ -0,0 +1,161 @@ +*, +*:before, +*:after, +*:first-letter, +p:first-line, +div:first-line, +blockquote:first-line, +li:first-line { + background: transparent !important; + color: #000 !important; + box-shadow: none !important; + text-shadow: none !important; } + +body { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1.45; + font-family: Helvetica, sans-serif; + color: #000; + background: none; + font-size: 14pt; } + +.grid { + display: block; } + +main, +.docs-content, +.docs-wrapper { + display: block; + width: 100%; + max-width: 75ch; + margin: 1cm auto; } + +/* Headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + page-break-after: avoid; } + +h1 { + font-size: 19pt; } + +h2 { + font-size: 17pt; } + +h3 { + font-size: 15pt; } + +h4, +h5, +h6 { + font-size: 14pt; } + +p, +h2, +h3 { + orphans: 3; + widows: 3; } + +code { + font: 12pt Courier, monospace; } + +blockquote { + margin: 1.2em; + padding: 1em; + font-size: 12pt; } + +hr { + background-color: #ccc; } + +/* Images */ +img { + max-width: 100% !important; } + +a img { + border: none; } + +/* Links */ +a:link, +a:visited { + background: transparent; + font-weight: 700; + text-decoration: underline; + color: #333; } + +abbr[title]:after { + content: " (" attr(title) ")"; } + +/* Don't show linked images */ +a[href^="http://"] { + color: #000; } + +a[href$=".jpg"]:after, +a[href$=".jpeg"]:after, +a[href$=".gif"]:after, +a[href$=".png"]:after { + content: " (" attr(href) ") "; + display: none; } + +/* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol .. taken from html5boilerplate */ +a[href^="#"]:after, +a[href^="javascript:"]:after { + content: ""; } + +/* Table */ +table { + margin: 1px; + text-align: left; } + +th { + border-bottom: 1px solid #333; + font-weight: bold; } + +td { + border-bottom: 1px solid #333; } + +th, +td { + padding: 4px 10px 4px 0; } + +tfoot { + font-style: italic; } + +caption { + background: #fff; + margin-bottom: 2em; + text-align: left; } + +thead { + display: table-header-group; } + +img, +tr { + page-break-inside: avoid; } + +body > *:not(main), +aside, +*[class*="sidebar"] { + display: none; } + +button, +.c-btn.c-btn--playground, +.docs-edit-link { + display: none; } + +a[href^='http']:not([href*='mywebsite.com'])::after { + content: " (" attr(href) ")"; } + +.resource a::after { + display: none; } + +ul { + page-break-inside: avoid; } + +@media print { + @page { + margin: 1cm; } } diff --git a/docs/src/assets/css/styles-min.css b/docs/src/assets/css/styles-min.css new file mode 100644 index 00000000000..e9697082773 --- /dev/null +++ b/docs/src/assets/css/styles-min.css @@ -0,0 +1,376 @@ +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color: var(--bg-color); + color: var(--text-color); + height: 100%; } + +body { + background-color: inherit; + margin: 0; + line-height: 1.5; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + min-height: 100%; } + body.wall { + background-image: url(../../assets/images/patterns/ignasi_pattern_s.png); } + +main { + -webkit-flex: 1; + flex: 1; + margin: 0 auto; + width: 90%; + max-width: 70ch; } + +.theatre { + background-color: #111; + color: #eee; } + +html { + --color-brand: hsl(258, 50%, 57%); + --grey: #888; + --color-highlight: #F8D204; + --color-accent: var(--color-brand); + --bg-color: #fff; + --text-color: #111; + --link-color: var(--color-brand); + --font-family: "Atkinson Hyperlegible"; } + +/* Visually hide text while keeping it accessible */ +/* Support includes IE9+ */ +.visually-hidden { + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + white-space: nowrap; + /* Why we need this rule: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ } + +[hidden] { + display: none; } + +/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1400,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ +:root { + --fluid-min-width: 320; + --fluid-max-width: 1400; + --fluid-screen: 100vw; + --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); } + +@media screen and (min-width: 1400px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); } } + +:root { + --f--2-min: 12.64; + --f--2-max: 13.89; + --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); + --f--1-min: 14.22; + --f--1-max: 16.67; + --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp)); + --f-0-min: 16.00; + --f-0-max: 20.00; + --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp)); + --f-1-min: 18.00; + --f-1-max: 24.00; + --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp)); + --f-2-min: 20.25; + --f-2-max: 28.80; + --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp)); + --f-3-min: 22.78; + --f-3-max: 34.56; + --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp)); + --f-4-min: 25.63; + --f-4-max: 41.47; + --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp)); + --f-5-min: 28.83; + --f-5-max: 49.77; + --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp)); + --f-6-min: 32.44; + --f-6-max: 59.72; + --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); } + +body { + font-size: var(--step-0); + line-height: 1.5; } + +h5, +.h5 { + font-size: var(--step-1); } + +h4, +.h4 { + font-size: var(--step-2); } + +h3, +.h3 { + font-size: var(--step-3); + line-height: 1.2; } + +h2, +.h2 { + font-size: var(--step-4); + letter-spacing: -.5px; + line-height: 1.2; } + +h1, +.h1 { + font-size: var(--step-5); + letter-spacing: -.5px; + line-height: 1.2; } + +.h0 { + font-size: var(--step-6); + letter-spacing: -.5px; + line-height: 1.2; } + +small, caption, cite, figcaption { + font-size: var(--step--1); } + +::marker { + color: var(--color-accent); } + +::-moz-selection { + background-color: var(--color-highlight); + color: #000; } + +::selection { + background-color: var(--color-highlight); + color: #000; } + +*, *::before, *::after { + box-sizing: border-box; } + +html { + accent-color: var(--color-accent); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } + +#skip-link { + position: fixed; + top: -30em; + left: 0; + right: auto; + z-index: 999; + background-color: var(--color-highlight); + color: #000; + padding: 1em 1.5em; + font-size: 1em; + text-align: center; + transition: top .1s linear; + text-decoration: none; } + #skip-link:focus, #skip-link:focus-visible { + outline: 2px solid transparent; + top: 2px; + color: #000; + box-shadow: inset 0 0 0 2px, inset 0 0 0 3px currentColor; } + +#back-to-top { + display: -webkit-inline-flex; + display: inline-flex; + color: var(--color-brand); + transition: all .2s linear; } + #back-to-top:hover, #back-to-top:focus { + color: var(--color-accent); } + #back-to-top svg { + color: inherit; } + +a { + color: var(--link-color); } + :where(.site-header, .site-footer) a { + color: inherit; + text-decoration: none; } + +a[aria-current="true"] { + font-weight: bold; } + +p { + margin: 0 0 1.5em; } + :matches(nav, .posts-collection) p { + margin-bottom: .75em; } + +ul, +ol { + margin-top: 0; } + ul li, + ol li { + margin: 0 0 .75em; } + +figure { + margin-bottom: 4rem; } + figure img { + margin-bottom: 1rem; } + figure figcaption { + color: var(--grey); } + +img { + display: block; + position: relative; + max-width: 100%; } + +img:after { + content: "Broken image:" " " attr(alt); + font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + text-align: center; + color: #777; + position: absolute; + left: 0; + z-index: 2; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + visibility: visible; + width: 100%; + padding: .6em .3em; + background-color: #fff; + border: 1px dashed currentColor; + border-radius: 4px; + background-color: #eee; } + +nav { + /* rarely do we display bullets for lists in navigation */ } + nav ol, + nav ul { + list-style: none; + margin: 0; + padding: 0; } + nav.c-toc ul, nav.c-toc ol { + padding-left: 2rem; } + +ol { + list-style: decimal-leading-zero; + font-feature-settings: "tnum"; } + +.video { + width: 90%; + max-width: 1400px; + margin: 2em auto; } + .video iframe { + aspect-ratio: 16 / 9; + width: 100%; + height: auto; } + +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; } + *:focus { + transition: outline-offset .15s linear; + outline-offset: 4px; } } + +.chapter .main-wrapper { + display: grid; + grid-template-columns: 25% 1fr; + grid-template-areas: "toc content"; + grid-gap: 2rem; } + .chapter .main-wrapper main { + grid-area: content; } + .chapter .main-wrapper aside { + grid-area: toc; } + +.site-header { + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + align-items: center; + padding: 2em 0; } + +.logo-link { + display: block; + width: 150px; } + +.logo { + display: block; + width: 100%; + height: auto; } + +.site-nav ul { + display: -webkit-flex; + display: flex; + gap: 1em; + list-style: none; } + +.site-footer { + background-color: #dedfe3; } + +.c-toc ol { + list-style: decimal-leading-zero; } + +.c-toc--main a { + font-weight: 500; + font-size: 1.5rem; } + +nav.c-breadcrumbs ol { + list-style: none; + margin: 0; + padding: 0; } + +nav.c-breadcrumbs li { + display: inline-block; + padding: 0.5em 0.25em; + position: relative; } + nav.c-breadcrumbs li::after { + content: "/"; + color: inherit; + display: inline-block; + -webkit-margin-start: .5em; + margin-inline-start: .5em; } + nav.c-breadcrumbs li:last-of-type::after { + display: none; } + nav.c-breadcrumbs li a { + font-weight: bold; } + nav.c-breadcrumbs li a[aria-current] { + color: inherit; + text-decoration: none; + background: none; + font-weight: normal; } + +/* Pagination within (and between) individual posts */ +.c-post-pagination ul { + list-style: none; + width: 100%; + outline: 1px solid yellow; + display: -webkit-flex; + display: flex; + -webkit-align-items: flex-start; + align-items: flex-start; } + +.c-post-pagination li { + -webkit-flex: 1; + flex: 1; + display: -webkit-flex; + display: flex; } + +.c-post-pagination a { + display: block; + padding: .5em; } + +/* Pagination on collection pages */ +.c-collection-pagination { + outline: 1px solid yellow; } + +blockquote.tweet { + padding: 1em 1em 1em 4em; + margin: 2rem 0; + position: relative; + font-size: 1.1rem; } + blockquote.tweet cite { + font-size: 1rem; } + +.tweet__icon { + width: 2.5em; + height: 2.5em; + position: absolute; + left: .5em; + top: .5em; } + +input, textarea { + font: inherit; + line-height: 1.3; + padding: .25em .75em; + border-radius: 4px; + border: 1px solid #777; } diff --git a/docs/src/assets/css/styles.css b/docs/src/assets/css/styles.css new file mode 100644 index 00000000000..ff3d95c282e --- /dev/null +++ b/docs/src/assets/css/styles.css @@ -0,0 +1,2203 @@ +@charset "UTF-8"; +:root { + /* Tier 1 variables */ + --color-neutral-25: #FCFCFD; + --color-neutral-50: #F9FAFB; + --color-neutral-100: #F2F4F7; + --color-neutral-200: #E4E7EC; + --color-neutral-300: #D0D5DD; + --color-neutral-400: #98A2B3; + --color-neutral-500: #667085; + --color-neutral-600: #475467; + --color-neutral-700: #344054; + --color-neutral-800: #1D2939; + --color-neutral-900: #101828; + --color-primary-25: #FBFBFF; + --color-primary-50: #F6F6FE; + --color-primary-100: #ECECFD; + --color-primary-200: #DEDEFF; + --color-primary-300: #CCCCFA; + --color-primary-400: #B7B7FF; + --color-primary-500: #A0A0F5; + --color-primary-600: #8080F2; + --color-primary-700: #6358D4; + --color-primary-800: #4B32C3; + --color-primary-900: #341BAB; + --color-warning-25: #FFFCF5; + --color-warning-50: #FFFAEB; + --color-warning-100: #FEF0C7; + --color-warning-200: #FEDF89; + --color-warning-300: #FEC84B; + --color-warning-400: #FDB022; + --color-warning-500: #F79009; + --color-warning-600: #DC6803; + --color-warning-700: #B54708; + --color-warning-800: #93370D; + --color-warning-900: #7A2E0E; + --color-success-25: #F6FEF9; + --color-success-50: #ECFDF3; + --color-success-100: #D1FADF; + --color-success-200: #A6F4C5; + --color-success-300: #6CE9A6; + --color-success-400: #32D583; + --color-success-500: #12B76A; + --color-success-600: #039855; + --color-success-700: #027A48; + --color-success-800: #05603A; + --color-success-900: #054F31; + --color-rose-25: #FFF5F6; + --color-rose-50: #FFF1F3; + --color-rose-100: #FFE4E8; + --color-rose-200: #FECDD6; + --color-rose-300: #FEA3B4; + --color-rose-400: #FD6F8E; + --color-rose-500: #F63D68; + --color-rose-600: #E31B54; + --color-rose-700: #C01048; + --color-rose-800: #A11043; + --color-rose-900: #89123E; + /* Tier 2 variables */ + --primary-button-background-color: var(--color-primary-800); + --primary-button-hover-color: var(--color-primary-900); + --primary-button-text-color: #fff; + --secondary-button-background-color: var(--color-primary-50); + --secondary-button-hover-color: var(--color-primary-100); + --secondary-button-text-color: var(--color-brand); + --ghost-button-background-color: var(--color-primary-50); + --ghost-button-text-color: var(--color-brand); + --color-brand: var(--color-primary-800); + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); } + +@media (prefers-color-scheme: dark) { + --secondary-button-background-color: var(--color-neutral-700); + --secondary-button-hover-color: var(--color-neutral-800); + --secondary-button-text-color: var(--body-text-color); + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; } + +html[data-theme="light"] { + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); } + +html[data-theme="dark"] { + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --docs-lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; } + +/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */ +:root { + --fc-3xs-min: (var(--fc-s-min) * 0.25); + --fc-3xs-max: (var(--fc-s-max) * 0.25); + --fc-2xs-min: (var(--fc-s-min) * 0.5); + --fc-2xs-max: (var(--fc-s-max) * 0.5); + --fc-xs-min: (var(--fc-s-min) * 0.75); + --fc-xs-max: (var(--fc-s-max) * 0.75); + --fc-s-min: (var(--f-0-min)); + --fc-s-max: (var(--f-0-max)); + --fc-m-min: (var(--fc-s-min) * 1.5); + --fc-m-max: (var(--fc-s-max) * 1.5); + --fc-l-min: (var(--fc-s-min) * 2); + --fc-l-max: (var(--fc-s-max) * 2); + --fc-xl-min: (var(--fc-s-min) * 3); + --fc-xl-max: (var(--fc-s-max) * 3); + --fc-2xl-min: (var(--fc-s-min) * 4); + --fc-2xl-max: (var(--fc-s-max) * 4); + --fc-3xl-min: (var(--fc-s-min) * 6); + --fc-3xl-max: (var(--fc-s-max) * 6); + --fc-4xl-min: (var(--fc-s-min) * 8); + --fc-4xl-max: (var(--fc-s-max) * 8); + /* T-shirt sizes */ + --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp)); + /* One-up pairs */ + --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + /* Custom pairs */ + --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --spacer-2x: 2rem; + --spacer-3x: 3rem; + --spacer-4x: 4rem; + --spacer-6x: 6rem; + --spacer-8x: 8rem; } + +/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ +:root { + --fluid-min-width: 320; + --fluid-max-width: 1280; + --fluid-screen: 100vw; + --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); } + +@media screen and (min-width: 1280px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); } } + +:root { + --f--2-min: 12.64; + --f--2-max: 10.24; + --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); + --f--1-min: 14.22; + --f--1-max: 12.80; + --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp)); + --f-0-min: 16.00; + --f-0-max: 16.00; + --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp)); + --f-1-min: 18.00; + --f-1-max: 20.00; + --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp)); + --f-2-min: 20.25; + --f-2-max: 25.00; + --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp)); + --f-3-min: 22.78; + --f-3-max: 31.25; + --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp)); + --f-4-min: 25.63; + --f-4-max: 39.06; + --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp)); + --f-5-min: 28.83; + --f-5-max: 48.83; + --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp)); + --f-6-min: 32.44; + --f-6-max: 61.04; + --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); } + +:root { + --mono-font: "Space Mono", monospace; + --text-font: "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; + --display-font: "Space Grotesk", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; } + +:root { + --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), + 0px 4px 6px -2px rgba(16, 24, 40, 0.05); + --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05); + --border-radius: .5rem; } + +body { + font-size: var(--step-0); + line-height: 1.5; } + +.eyebrow { + color: var(--link-color); + font-size: 1rem; + font-weight: 500; + display: block; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--display-font); + color: var(--headings-color); + font-weight: 500; + margin-top: 0; + margin-block-start: 0; } + +.post-main h2, +.docs-main h2, +.components-main h2, .post-main +h3, +.docs-main +h3, +.components-main +h3, .post-main +h4, +.docs-main +h4, +.components-main +h4, .post-main +h5, +.docs-main +h5, +.components-main +h5, .post-main +h6, +.docs-main +h6, +.components-main +h6 { + margin-top: 3rem; + margin-bottom: 1.5rem; + margin-block-start: 3rem; + margin-block-end: 1.5rem; } + .post-main h2:first-child, + .docs-main h2:first-child, + .components-main h2:first-child, .post-main + h3:first-child, + .docs-main + h3:first-child, + .components-main + h3:first-child, .post-main + h4:first-child, + .docs-main + h4:first-child, + .components-main + h4:first-child, .post-main + h5:first-child, + .docs-main + h5:first-child, + .components-main + h5:first-child, .post-main + h6:first-child, + .docs-main + h6:first-child, + .components-main + h6:first-child { + margin-top: 0; + margin-block-start: 0; } + +h6, +.h6 { + font-size: var(--step-0); } + +h5, +.h5 { + font-size: var(--step-1); } + +h4, +.h4 { + font-size: var(--step-2); } + +h3, +.h3 { + font-size: var(--step-3); + line-height: 1.2; } + +h2, +.h2 { + font-size: var(--step-4); + line-height: 1.2; } + +h1, +.h1 { + font-size: var(--step-5); + line-height: 1.2; } + +.h0 { + font-size: var(--step-6); + line-height: 1.2; } + +small, +caption, +cite, +figcaption { + font-size: var(--step--1); } + +.docs-main h6, +.docs-main .h6 { + font-size: var(--step-0); } + +.docs-main h5, +.docs-main .h5 { + font-size: var(--step-0); } + +.docs-main h4, +.docs-main .h4 { + font-size: var(--step-1); } + +.docs-main h3, +.docs-main .h3 { + font-size: var(--step-2); + line-height: 1.2; } + +.docs-main h2, +.docs-main .h2 { + font-size: var(--step-3); + line-height: 1.2; } + +.docs-main h1, +.docs-main .h1 { + font-size: var(--step-4); + line-height: 1.2; } + +::selection { + background-color: var(--color-brand); + color: #fff; } + +h1:target, +h2:target, +h3:target, +h4:target, +h5:target, +h6:target { + background-color: var(--lighter-background-color); } + +*:focus { + outline: none; } + +*:focus-visible { + outline: 2px solid var(--outline-color); + outline-offset: 3px; } + +*.focus-visible { + outline: 2px solid var(--outline-color); + outline-offset: 3px; } + +*:focus:not(:focus-visible) { + outline: 1px solid transparent; + box-shadow: none; } + +.js-focus-visible *:focus:not(.focus-visible) { + outline: 1px solid transparent; + box-shadow: none; } + +*, +*::before, +*::after { + box-sizing: border-box; } + +html { + accent-color: var(--link-color); + background-color: var(--body-background-color); + height: 100%; + font-family: var(--text-font); + overflow-x: hidden; + caret-color: var(--link-color); } + +body { + position: relative; + margin: 0 auto; + line-height: 1.5; + display: flex; + flex-direction: column; + min-height: 100%; + background-color: var(--body-background-color); + color: var(--body-text-color); } + +#skip-link { + position: fixed; + top: -30em; + left: 0; + right: auto; + offset-block-start: -30em; + offset-inline-start: 0; + offset-inline-end: auto; + z-index: 999; + transition: top .1s linear; } + #skip-link:focus { + outline: 2px solid transparent; + top: 2px; + offset-block-start: 2px; } + #skip-link:focus-visible { + outline: 2px solid transparent; + top: 2px; + offset-block-start: 2px; } + +main { + flex: 1; } + main:focus { + outline: none; } + main:target { + outline: none; } + +hr { + border: none; + border-top: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); + background: none; + height: 0; + margin: 2rem 0; } + +.content-container { + width: 100%; + margin: 0 auto; + padding: var(--space-xl-3xl) calc(1rem + 1vw); } + +.section-head .section-supporting-text { + text-align: center; + max-width: 768px; + margin: 0 auto var(--space-l-2xl); } + +.section-foot { + margin-top: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); } + .section-foot .section-supporting-text { + text-align: center; + font-size: var(--step--1); + max-width: 768px; + margin: 0 auto; } + +.section-title { + margin-bottom: 1rem; + margin-block-end: 1rem; } + +.section-supporting-text { + font-size: var(--step-1); } + +code, +pre { + font-family: var(--mono-font); } + +code { + color: var(--link-color); } + pre code { + color: unset; } + +p:empty { + display: none; + margin: 0; } + +.c-icon { + color: var(--icon-color); + flex: none; + transition: all .2s linear; } + @media (-ms-high-contrast: active) { + .c-icon { + color: windowText; } } + @media (forced-colors: active) { + .c-icon { + color: canvasText; } } + +table { + width: 100%; + margin: 2.5rem 0; + border-collapse: collapse; + border: 1px solid var(--divider-color); } + table td { + padding: .25rem .5rem; + border: 1px solid var(--divider-color); } + table th { + background-color: var(--lightest-background-color); + padding: .25rem .5rem; } + +.c-btn .c-icon:hover, +button .c-icon:hover, +a .c-icon:hover { + color: var(--link-color); } + +a { + color: var(--link-color); + transition: color .1s linear; } + .side-header a { + color: inherit; + text-decoration: none; } + +svg { + flex: none; + transition: color .1s linear; } + +p { + margin: 0 0 1.5em; } + :matches(nav, .posts-collection) p { + margin-bottom: .75em; + margin-block-end: .75em; } + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; } + +ul, +ol { + margin-top: 0; + margin-block-start: 0; } + ul li, + ol li { + margin: 0 0 .75em; } + .person__bio ul, .person__bio + ol { + padding-left: 1.5rem; + padding-inline-start: 1.5rem; } + +.docs-main ul, +.post-main ul, +.docs-main ol, +.post-main ol { + margin: 1rem 0; } + +ul[role="list"] { + list-style: none; + margin: 0; + padding: 0; } + ul[role="list"] li { + margin: 0; } + +ol { + list-style: decimal; } + ol li::marker { + color: var(--link-color); } + +p:empty { + margin: 0; + display: none; } + +figure { + margin-bottom: 4rem; + margin-block-end: 4rem; } + figure img { + margin-bottom: 1rem; + margin-block-end: 1rem; } + figure figcaption { + color: var(--grey); } + +img { + display: block; + position: relative; + max-width: 100%; + height: auto; } + +nav { + /* rarely do we display bullets for lists in navigation */ } + nav ol, + nav ul { + list-style: none; + margin: 0; + padding: 0; } + +.video { + width: 90%; + max-width: 1400px; + margin: 2em auto; } + .video iframe { + aspect-ratio: 16 / 9; + width: 100%; + height: auto; } + +@media (prefers-reduced-motion: no-preference) { + *:focus-visible, + *.focus-visible { + transition: outline-offset .15s linear; + outline-offset: 3px; } } + +code[class*="language-"], +pre[class*="language-"] { + font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; } } + +/* Code blocks */ +pre[class*="language-"] { + padding: 1.5rem; + margin: 1.5rem 0; + overflow: auto; + background-color: var(--color-neutral-50); + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); + color: var(--color-neutral-900); } + [data-theme="dark"] pre[class*="language-"] { + color: var(--color-neutral-100); } + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background-color: var(--lightest-background-color); } + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; } + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6E7F8E; } + [data-theme="dark"] .token.comment, [data-theme="dark"] + .token.prolog, [data-theme="dark"] + .token.doctype, [data-theme="dark"] + .token.cdata { + color: #8E9FAE; } + +.token.namespace { + opacity: .7; } + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: var(--link-color); } + +.token.atrule, +.token.attr-value, +.token.keyword { + color: var(--link-color); } + +.token.important, +.token.bold { + font-weight: bold; } + +.token.italic { + font-style: italic; } + +.token.entity { + cursor: help; } + +pre { + counter-reset: lineNumber; } + +code .highlight-line:before { + -webkit-user-select: none; + color: var(--icon-color); + content: counter(lineNumber); + counter-increment: lineNumber; + display: inline-block; + font-variant-numeric: tabular-nums; + margin-right: 1.2em; + padding-right: 1.2em; + margin-inline-end: 1.2em; + padding-inline-end: 1.2em; + text-align: right; + width: 2.4em; } + +.site-header { + padding: .75rem 0; + border-top: 4px solid var(--link-color); + border-bottom: 1px solid var(--divider-color); + border-block-start: 4px solid var(--link-color); + border-block-end: 1px solid var(--divider-color); } + .site-header .docs-wrapper { + display: grid; + align-items: start; + padding-top: 0; + padding-bottom: 0; + padding-block-start: 0; + padding-block-end: 0; } + @media all and (min-width: 1024px) { + .site-header .docs-wrapper { + justify-content: space-between; } } + +.logo-link { + display: inline-flex; + justify-self: start; + flex: none; + place-content: center; + grid-column: 1 / -1; + grid-row: 1; + padding: .5rem 0; } + +.logo svg { + display: inline-block; + margin-bottom: -4px; + margin-block-end: -4px; + width: 100%; + max-width: 100px; + height: auto; } + +.docs-footer { + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: space-between; + align-items: baseline; } + @media all and (max-width: 800px) { + .docs-footer { + padding: 1.5rem 0 4rem; } } + +.copyright p { + margin: 0; } + +.docs-socials-and-legal { + display: flex; + flex-direction: column; + gap: 1rem; } + @media all and (max-width: 800px) { + .docs-socials-and-legal { + text-align: center; } } + +.docs-switchers { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; } + .docs-switchers .theme-switcher, + .docs-switchers .language-switcher { + flex: 1 1 240px; } + @media all and (max-width: 800px) { + .docs-switchers .theme-switcher { + justify-content: center; } } + @media all and (max-width: 800px) { + .docs-switchers .language-switcher { + justify-content: center; } } + +.site-footer { + text-align: center; + background-color: var(--footer-background-color); + border-top: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); } + +.footer-cta .logo { + margin-bottom: 2.5rem; + margin-block-end: 2.5rem; } + +.footer-cta .section-supporting-text { + margin-bottom: 2.5rem; + margin-block-end: 2.5rem; } + +.footer-cta .eslint-actions { + justify-content: center; } + +.footer-legal-links ul li { + display: inline-block; + margin-right: .5rem; + margin-inline-end: .5rem; } + .footer-legal-links ul li:not(:last-of-type)::after { + content: "|"; + margin-left: .5rem; + margin-inline-start: .5rem; } + +.footer-legal-section { + font-size: var(--step--1); + padding: 2rem 1rem; } + +.copyright { + max-width: 1100px; + margin: 0 auto; } + +.footer-middle { + padding-top: 2rem; + padding-bottom: 2rem; + padding-block-start: 2rem; + padding-block-end: 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; } + @media all and (min-width: 768px) { + .footer-middle { + flex-direction: row; + justify-content: space-between; } } + +.c-custom-select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + min-width: 0px; + padding: .625rem .875rem; + padding-right: calc(.875rem * 3); + padding-inline-end: calc(.875rem * 3); + font: inherit; + color: var(--body-text-color); + color: inherit; + line-height: 1.3; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + box-shadow: var(--shadow-xs); + background-color: var(--body-background-color); + background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%); + background-repeat: no-repeat, repeat; + background-position: right calc(.875rem * 1.5) top 50%, 0 0; + background-size: 1em auto, 100%; } + +.label__text.label__text { + display: block; + display: flex; + font-size: .875rem; + color: inherit; + align-items: center; + gap: .5rem; + font-size: .875rem; + font-family: var(--text-font); + color: inherit; + font-weight: 400; + line-height: 1.5; + margin-bottom: .25rem; + margin-block-end: .25rem; } + +input { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: .625rem .875rem; + font: inherit; + font-size: 1rem; + display: block; + min-width: 0; + max-width: 100%; + background-color: var(--body-background-color); + color: inherit; } + +.docs { + max-width: 1700px; + margin: 0 auto; } + +.docs-ad { + flex: 1; } + +.docs-wrapper { + padding: 0 calc(1rem + 1vw); + flex: 1; } + @media all and (min-width: 1023px) { + .docs-wrapper { + display: grid; + grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); + grid-gap: 0rem; + align-items: stretch; } } + +.docs-left-sidebar { + grid-column: 1 / 2; + grid-row: 1 / 2; + padding: calc(1rem + 1vw) 0; + font-size: .875rem; + display: grid; + grid-auto-rows: max-content; + align-items: start; } + @media all and (min-width: 1023px) { + .docs-left-sidebar { + border-right: 1px solid var(--divider-color); + border-right: 1px solid var(--divider-color); + padding-right: calc(1rem + 1vw); + padding-inline-end: calc(1rem + 1vw); } } + +.docs-content { + grid-column: 2 / 3; } + @media all and (min-width: 800px) { + .docs-content { + display: grid; + grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); + grid-gap: 2rem; } } + @media all and (min-width: 1023px) { + .docs-content { + padding: calc(2rem + 1vw) 0; } } + +.docs-main { + flex: 1 1 65ch; } + @media all and (min-width: 1023px) { + .docs-main { + padding: 0 2rem; } } + +.docs-right-sidebar { + grid-column: 2 / 3; + display: flex; + flex-direction: column; + flex: 1 1 200px; } + +.docs-toc { + flex: 1; + align-self: center; } + +.docs-edit-link { + border-top: 1px solid var(--divider-color); + padding-top: 1.5rem; + padding-block-start: 1.5rem; + margin: 3rem 0; } + +div[data-correct-code], +div[data-incorrect-code] { + position: relative; } + div[data-correct-code]::after, + div[data-incorrect-code]::after { + position: absolute; + top: -22px; + right: -22px; + offset-inline-end: -22px; + offset-block-start: -22px; } + +div[data-correct-code]::after { + content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); } + +div[data-incorrect-code]::after { + content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); } + +pre[class*="language-"] { + position: relative; } + +.c-btn.c-btn--playground { + position: absolute; + font-size: var(--step--1); + bottom: .5rem; + right: .5rem; + offset-block-end: .5rem; + offset-inline-end: .5rem; } + @media all and (max-width: 768px) { + .c-btn.c-btn--playground { + display: none; } } + +button { + border: none; + background: none; + font: inherit; + cursor: pointer; + line-height: inherit; + display: inline-flex; + align-items: center; + justify-content: center; } + +.c-btn { + background: none; + border: none; + font: inherit; + font-family: var(--text-font); + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75em 1.125em; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + transition: background-color .2s linear, border-color .2s linear; } + .c-btn svg { + color: inherit; } + +.c-btn--large { + font-size: 1.125rem; + padding: .88em 1.5em; } + +.c-btn--block { + display: flex; + width: 100%; } + +a.c-btn { + text-decoration: none; + display: inline-flex; + flex-wrap: wrap; + gap: .5rem; + align-items: center; } + +.c-btn--primary { + background-color: var(--primary-button-background-color); + color: var(--primary-button-text-color); } + .c-btn--primary:hover { + background-color: var(--primary-button-hover-color); } + +.c-btn--secondary { + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .c-btn--secondary:hover { + background-color: var(--secondary-button-hover-color); } + +.c-btn--ghost { + color: var(--body-text-color); + border: 1px solid var(--border-color); } + .c-btn--ghost:hover { + border-color: var(--link-color); } + +.docs-site-nav { + display: flex; + flex-direction: column; + flex: 1; + grid-column: 1 / -1; + grid-row: 1; } + .docs-site-nav ul { + list-style: none; + font-size: var(--step-1); + margin-top: 1rem; + margin-block-start: 1rem; + margin-bottom: 2rem; + margin-block-end: 2rem; } + @media all and (min-width: 1023px) { + .docs-site-nav ul { + font-size: var(--step-0); + margin-top: 0; + margin-block-start: 0; + margin-bottom: 0; + margin-block-end: 0; + align-items: center; + display: flex; } } + .docs-site-nav .flexer { + display: flex; + justify-self: flex-end; + align-self: flex-end; } + .docs-site-nav a:not(.c-btn) { + text-decoration: none; + color: inherit; + transition: color .2s linear; } + .docs-site-nav a:not(.c-btn):hover { + color: var(--link-color); } + .docs-site-nav a:not(.c-btn)[aria-current="page"], + .docs-site-nav a:not(.c-btn)[aria-current="true"] { + color: var(--link-color); + text-decoration: none; + font-weight: 500; } + +@media all and (min-width: 1023px) { + .docs-nav-panel { + display: flex; + flex-direction: row; + justify-content: center; } } + +.docs-nav-panel[data-open="false"] { + display: none; } + +@media all and (min-width: 1023px) { + .docs-nav-panel[data-open="true"] { + display: flex; + flex-direction: row; + justify-content: center; } } + +@media all and (min-width: 1023px) { + .docs-nav-panel .mobile-only { + display: none; } } + +.docs-site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: .5rem; + margin-right: -10px; + margin-inline-start: .5rem; + margin-inline-end: -10px; } + .docs-site-nav-toggle svg { + width: 40px; + height: 40px; + color: var(--headings-color); + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .docs-site-nav-toggle #ham-top, + .docs-site-nav-toggle #ham-middle, + .docs-site-nav-toggle #ham-bottom { + transition: all .2s linear; } + .docs-site-nav-toggle #ham-top { + transform-origin: 30px 37px; } + .docs-site-nav-toggle #ham-bottom { + transform-origin: 30px 63px; } + .docs-site-nav-toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .docs-site-nav-toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .docs-site-nav-toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +@media all and (min-width: 1023px) { + .docs-site-nav { + flex-direction: row; + grid-column: auto; + gap: 2rem; } + .docs-site-nav ul { + display: flex; + gap: 2rem; + font-size: var(--step-0); } + .docs-site-nav ul li { + margin-bottom: 0; + margin-block-end: 0; } + .docs-site-nav .flexer { + order: 1; } } + +.docs-toc { + margin: 2rem 0; } + +.c-toc ol { + margin: 0; } + .c-toc ol li { + position: relative; + margin-bottom: .25rem; + margin-block-end: .25rem; + padding-left: 1rem; + padding-inline-start: 1rem; } + .c-toc ol li > ol { + margin-top: .25rem; } + .c-toc ol li::before { + content: "└"; + color: var(--icon-color); + position: absolute; + left: -.4rem; + offset-inline-start: -.4rem; } + +.c-toc a { + text-decoration: none; + color: var(--headings-color); } + .c-toc a:hover { + color: var(--link-color); } + +.c-toc__label.c-toc__label { + font-size: var(--step-0); + color: var(--body-text-color); + font-family: var(--text-font); + margin-bottom: .5rem; + margin-block-end: .5rem; } + +.c-toc__label { + width: fit-content; } + .c-toc__label button { + color: var(--link-color); + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + font: inherit; + font-size: inherit; + font-weight: 500; + width: 100%; + height: 100%; + text-align: left; + line-height: 1.5; + padding: 0; + border-radius: 0; + position: relative; + border: none; + transition: outline 0.1s linear; } + .c-toc__label button svg { + flex: none; } + +/* Styles for the accordion icon */ +.toc-trigger-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + margin-left: 3rem; + margin-inline-start: 3rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); } + [aria-expanded="true"] .toc-trigger-icon { + -ms-transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); } + +.c-toc__panel[data-open="false"] { + display: none; } + +.c-toc__panel[data-open="true"] { + display: block; } + +.search { + margin-bottom: 1.5rem; } + +.search__input-wrapper { + position: relative; } + +.search__input { + padding-left: 2.5rem; + padding-inline-start: 2.5rem; + outline-offset: 1px; + width: 100%; } + +.search__icon { + color: var(--body-text-color); + position: absolute; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: .75rem; + offset-inline-start: .75rem; } + +.algolia-docsearch-suggestion--highlight { + background-color: var(--color-warning-300); } + +.alert { + position: relative; + display: grid; + grid-template-columns: auto 1fr; + padding: 1rem; + gap: .75rem; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + align-items: start; + font-size: .875rem; + background-color: var(--body-background-color); + border-radius: var(--border-radius); } + .alert.alert--warning { + border: 1px solid var(--color-rose-300); } + .alert.alert--important { + border: 1px solid var(--color-warning-300); } + .alert.alert--tip { + border: 1px solid var(--color-success-300); } + +[data-theme="dark"] .alert.alert--warning { + border: 1px solid var(--color-rose-300); } + +[data-theme="dark"] .alert.alert--important { + border: 1px solid var(--color-warning-300); } + +[data-theme="dark"] .alert.alert--tip { + border: 1px solid var(--color-success-300); } + +.alert__icon { + color: inherit; + position: relative; + top: 2px; + offset-block-start: 2px; } + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; + margin-block-end: .25rem; } + +.alert--warning { + color: var(--color-rose-600); } + +.alert--important { + color: var(--color-warning-600); } + +.alert--tip { + color: var(--color-success-600); } + +[data-theme="dark"] .alert--warning { + color: var(--color-rose-400); } + +[data-theme="dark"] .alert--important { + color: var(--color-warning-400); } + +[data-theme="dark"] .alert--tip { + color: var(--color-success-400); } + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; } + .alert--warning .alert__type { + color: var(--color-rose-700); } + [data-theme="dark"] .alert--warning .alert__type { + color: var(--color-rose-300); } + .alert--important .alert__type { + color: var(--color-warning-700); } + [data-theme="dark"] .alert--important .alert__type { + color: var(--color-warning-300); } + .alert--tip .alert__type { + color: var(--color-success-700); } + [data-theme="dark"] .alert--tip .alert__type { + color: var(--color-success-300); } + +.alert__learn-more { + display: block; + font-weight: 500; + margin-top: .75rem; + margin-block-start: .75rem; } + .alert--warning .alert__learn-more { + color: var(--color-rose-700); } + [data-theme="dark"] .alert--warning .alert__learn-more { + color: var(--color-rose-300); } + .alert--important .alert__learn-more { + color: var(--color-warning-700); } + [data-theme="dark"] .alert--important .alert__learn-more { + color: var(--color-warning-300); } + .alert--tip .alert__learn-more { + color: var(--color-success-700); } + [data-theme="dark"] .alert--tip .alert__learn-more { + color: var(--color-success-300); } + +.rule-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem 1rem; + margin-bottom: 3rem; } + .rule-categories .rule-category { + margin: 0; + padding: 0; + background: none; + border: none; } + .rule-categories .rule-category__description { + flex: 1 1 45ch; } + +.rule-category { + font-size: var(--step--1); + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 1rem; + padding: 1rem; + margin: 1.5rem 0; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); } + .rule-category p { + margin: 0; } + .rule-category .rule-category__description { + flex: 1 1 30ch; } + +.rule { + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 1rem; + padding: 1rem; + margin: .5rem 0; + position: relative; } + .rule p:last-of-type { + margin: 0; } + +.rule__content { + flex: 1 1 35ch; } + +.rule__name { + font-weight: 500; + font-size: .875rem; + margin-bottom: .25rem; + margin-block-end: .25rem; } + .rule__name::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + offset-block-start: 0; + left: 0; + offset-inline-start: 0; } + +a.rule__name { + text-decoration: none; } + a.rule__name:hover { + text-decoration: underline; } + +.rule__description { + font-size: var(--step--1); } + +.rule__categories { + font-size: .875rem; + display: flex; + align-items: center; + gap: 1rem; + border-radius: var(--border-radius); + padding: 2px 4px; } + .rule__categories p { + display: inline-flex; + margin: 0; + align-items: center; } + [data-theme="dark"] .rule__categories { + background: var(--body-background-color); } + +.rule__status { + color: var(--color-rose-500); + background: var(--color-rose-50); + border-radius: var(--border-radius); + display: inline-block; + font-weight: normal; + margin-left: .5rem; + margin-inline-start: .5rem; + font-size: var(--step--1); + padding: 0 .5rem; } + [data-theme="dark"] .rule__status { + background: var(--body-background-color); } + +.rule__categories__type[aria-hidden="true"] { + opacity: .25; } + +/* related rules */ +.related-rules__list { + display: flex; + gap: .5rem; + flex-wrap: wrap; + justify-content: start; } + +.related-rules__list__item svg { + color: inherit; } + +.related-rules__list__item a { + text-decoration: none; + color: var(--headings-color); + padding: .625rem; + display: inline-flex; + gap: .5rem; + align-items: center; + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); } + .related-rules__list__item a:hover { + color: var(--link-color); + background-color: var(--lighter-background-color); } + +.languages-list { + margin: 0; + padding: 0; + font-size: var(--step-0); } + .languages-list li { + margin: 0; } + .languages-list li:last-of-type a { + border-bottom: 0; } + .languages-list a { + color: inherit; + display: block; + width: 100%; + padding: .75rem .1rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .languages-list a[aria-current="true"] { + font-weight: 500; + color: var(--link-color); } + .languages-list a[aria-current="true"]::after { + content: "✔️"; } + .languages-list a:hover { + color: var(--link-color); } + +.languages-section .flag { + font-size: 2em; + margin-right: .5rem; + margin-inline-end: .5rem; } + +.languages-section .languages-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; } + +.versions-list { + margin: 0; + padding: 0; + font-size: var(--step-1); } + .versions-list li { + margin: 0; } + .versions-list li:last-of-type a { + border-bottom: 0; + border-block-end: 0; } + .versions-list a { + color: var(--link-color); + display: block; + width: 100%; + padding: 1rem .5rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + .versions-list a[data-current="true"] { + font-weight: 500; + color: var(--link-color); } + .versions-list a[data-current="true"]::after { + content: "✔️"; } + .versions-list a:hover { + background-color: var(--lightest-background-color); } + +.versions-section .versions-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; } + +.eslint-social-icons { + margin-bottom: -1rem; + margin-block-end: -1rem; } + .eslint-social-icons ul { + margin: 0; + padding: 0; + margin-left: -1rem; + margin-inline-start: -1rem; + display: inline-flex; } + .eslint-social-icons ul li { + margin: 0; + display: inline-flex; + align-items: center; } + .eslint-social-icons ul li a { + display: flex; + padding: 1rem; } + +@media all and (min-width: 800px) { + .hero .grid { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 2rem; + align-items: center; } } + +.hero .grid .span-1-7 { + grid-column: 1 / 2; } + +.hero .grid .span-10-12 { + grid-column: 2 / 3; + justify-self: end; } + +.hero { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); + background-color: var(--hero-background-color); } + @media all and (min-width: 800px) { + .hero { + min-height: calc(285px + var(--space-xl-4xl)); } } + .hero .content-container { + padding: var(--space-xl-4xl) 0; + margin: 0; } + .hero > .content-container { + margin: 0 auto; + padding: 0 calc(1rem + 1vw); + padding-bottom: 0; + align-items: center; } + +.hero--homepage .section-title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +.hero--homepage .section-supporting-text { + margin: 0; + font-size: var(--step-1); + text-align: left; } + +.hero--homepage .eslint-actions { + font-size: var(--step-1); + margin-top: 3rem; + margin-block-start: 3rem; } + +.theme-switcher { + display: inline-flex; + align-items: center; + gap: .5rem; + position: relative; } + +.theme-switcher-label.theme-switcher-label { + font-size: inherit; + color: inherit; + font: inherit; + font-family: var(--text-font); + margin: 0; } + +.theme-switcher__buttons { + display: flex; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--body-background-color); } + +.theme-switcher__button { + flex: 0; + box-shadow: var(--shadow-xs); + padding: .625rem .875rem; + display: inline-flex; + align-items: center; + margin: 0; + width: 40px; + height: 40px; } + .theme-switcher__button:first-of-type { + border-right: 0.5px solid var(--border-color); + border-inline-end: 0.5px solid var(--border-color); } + .theme-switcher__button:last-of-type { + border-left: 0.5px solid var(--border-color); + border-inline-start: 0.5px solid var(--border-color); } + .theme-switcher__button .theme-switcher__icon { + color: var(--icon-color); } + .theme-switcher__button:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="true"] .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="true"]:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button[aria-pressed="false"] .theme-switcher__icon { + color: var(--icon-color); } + +.theme-switcher__button[aria-pressed="false"]:hover .theme-switcher__icon { + color: var(--link-color); } + +.theme-switcher__button:hover .theme-switcher__icon { + color: var(--link-color); } + +.version-switcher { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +.switcher--language { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem .5rem; + position: relative; + min-width: 15rem; + padding: 0; } + +.switcher--language .label__text { + flex: 1 0 10ch; } + +.switcher--language .switcher__select { + min-width: 15rem; + flex: 1 0 15rem; } + +.language-switcher { + display: inline-flex; } + +.docs-index a { + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: .5rem .75rem; + margin-left: -.75rem; + margin-inline-start: -.75rem; + color: var(--headings-color); } + .docs-index a:hover, .docs-index a[aria-current="true"] { + background-color: var(--docs-lightest-background-color); + color: var(--link-color); } + +.docs-index__item { + margin: 0; } + .docs-index__item ul ul { + padding-left: .75rem; } + .docs-index__item[data-has-children] { + margin-bottom: .5rem; } + +.docs-index > ul > .docs-index__item { + margin-top: 1.5rem; + margin-block-start: 1.5rem; } + .docs-index > ul > .docs-index__item > a { + color: var(--icon-color); + text-transform: uppercase; + letter-spacing: 1px; + font-size: .875rem; + font-weight: 500; } + +/* Styles for the accordion icon */ +.index-js .index-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + transition: all 0.1s linear; + color: inherit; } + +.index-js [aria-expanded="true"] .index-icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.index-js [aria-hidden="true"] { + display: none; } + +.index-js [aria-hidden="false"] { + display: block; } + +.docs-index__list[data-open="false"] { + display: none; } + @media all and (min-width: 1023px) { + .docs-index__list[data-open="false"] { + display: block; } } + +.docs-index__list[data-open="true"] { + display: block; } + @media all and (min-width: 1023px) { + .docs-index__list[data-open="true"] { + display: block; } } + +.docs-index-toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .docs-index-toggle:hover { + background-color: var(--secondary-button-hover-color); } + @media all and (min-width: 1023px) { + .docs-index-toggle { + display: none; } } + .docs-index-toggle svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .docs-index-toggle #ham-top, + .docs-index-toggle #ham-middle, + .docs-index-toggle #ham-bottom { + transition: all .2s linear; } + .docs-index-toggle #ham-top { + transform-origin: 30px 37px; } + .docs-index-toggle #ham-bottom { + transform-origin: 30px 63px; } + .docs-index-toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .docs-index-toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .docs-index-toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +.c-tabs pre { + margin-top: 0; + margin-block-start: 0; } + +.js-tabs .c-tabs__tablist { + display: flex; + justify-content: start; } + +.c-tabs__tab { + background: none; + border: none; + margin: 0; + color: inherit; + font: inherit; + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75rem 1.125rem; + align-items: center; + justify-content: center; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: background-color .2s linear, border-color .2s linear; } + .c-tabs__tab:hover { + color: var(--link-color); } + .c-tabs__tab[aria-selected="true"] { + color: var(--link-color); + background-color: var(--lightest-background-color); } + +.c-tabs__tabpanel { + margin-bottom: 2rem; + margin-block-end: 2rem; + background-color: var(--lightest-background-color); + border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); } + .js-tabs .c-tabs__tabpanel { + margin-bottom: 0; + margin-block-end: 0; } + +.c-tabs__tabpanel__title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } + +.js-tabs .c-tabs__tabpanel__title { + display: none; } + +.resource { + display: flex; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); + align-items: stretch; + overflow: hidden; + margin-bottom: .5rem; + margin-block-end: .5rem; + position: relative; + transition: all .2s linear; } + .resource:hover { + background-color: var(--lighter-background-color); } + +.resource__image { + flex: 1 0 5.5rem; + max-width: 5.5rem; + overflow: hidden; + padding: .25rem; } + .resource__image img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; } + +.resource__content { + flex: 4; + padding: .75rem; + align-self: center; } + +.resource__title { + text-decoration: none; + color: var(--headings-color); + font-weight: 500; + margin-bottom: .125rem; } + .resource__title::after { + content: ""; + position: absolute; + left: 0; + offset-inline-start: 0; + top: 0; + block-inline-start: 0; + width: 100%; + height: 100%; } + +.resource__domain, +.resource__domain a { + text-decoration: none; + color: var(--body-text-color); + font-size: .875rem; } + +.resource__icon { + color: var(--headings-color); + margin: 1rem; + align-self: center; } + +.index { + margin-bottom: 4rem; + margin-block-end: 4rem; } + +.index__item { + margin: 0; } + .index__item a { + display: block; + color: inherit; + text-decoration: none; + padding: .625rem .875rem; + font-size: var(--step-0); + border-radius: var(--border-radius); } + .index__item a:hover { + color: var(--link-color); } + .index__item a[aria-current="page"] { + color: var(--link-color); + background-color: var(--lightest-background-color); + font-weight: 500; } + +.index__toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); } + .index__toggle:hover { + background-color: var(--secondary-button-hover-color); } + @media all and (min-width: 1023px) { + .index__toggle { + display: none; } } + .index__toggle svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; } + .index__toggle #ham-top, + .index__toggle #ham-middle, + .index__toggle #ham-bottom { + transition: all .2s linear; } + .index__toggle #ham-top { + transform-origin: 30px 37px; } + .index__toggle #ham-bottom { + transform-origin: 30px 63px; } + .index__toggle[aria-expanded="true"] #ham-middle { + opacity: 0; } + .index__toggle[aria-expanded="true"] #ham-top { + transform: rotate(41deg); } + .index__toggle[aria-expanded="true"] #ham-bottom { + transform: rotate(-41deg); } + +.index__list { + display: block; } + .index__list[data-open="false"] { + display: none; } + @media all and (min-width: 1023px) { + .index__list[data-open="false"] { + display: block; } } + .index__list[data-open="true"] { + display: block; } + @media all and (min-width: 1023px) { + .index__list[data-open="true"] { + display: block; } } + +@media all and (max-width: 800px) { + .hero-ad { + display: none; } } + +#carbonads * { + margin: initial; + padding: initial; } + +#carbonads { + display: inline-block; + margin: 2rem 0; + padding: .6em; + font-size: 16px; + line-height: 1.35; + overflow: hidden; + border-radius: 4px; + background-color: var(--body-background-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1); } + .docs-main #carbonads { + margin: 0 0 2rem; } + @media all and (max-width: 800px) { + #carbonads { + display: none !important; } } + +.jumbotron #carbonads { + border: solid 1px rgba(111, 102, 153, 0.6); + background-color: rgba(179, 179, 179, 0.15); } + +#carbonads a { + font-weight: 500; + color: inherit; } + +#carbonads a:hover { + text-decoration: none; + color: inherit; } + +.jumbotron #carbonads a { + color: #eee; } + +.jumbotron #carbonads a:hover { + color: #ccc; } + +#carbonads span { + display: block; + position: relative; + overflow: hidden; } + +#carbonads .carbon-wrap { + display: flex; + flex-direction: column; + max-width: 130px; } + +#carbonads .carbon-img img { + display: block; } + +#carbonads .carbon-text { + margin-top: 10px; + font-size: 14px; + text-align: left; } + +#carbonads .carbon-poweredby { + display: block; + margin-top: 10px; + font-size: 10px; + line-height: 1; + letter-spacing: 1px; + text-transform: uppercase; } + +@media only screen and (min-width: 320px) and (max-width: 759px) { + #carbonads { + margin-top: 0; + font-size: 12px; } + #carbonads .carbon-wrap { + display: flex; + flex-direction: row; + max-width: 330px; } + #carbonads .carbon-text { + margin: 0 0 14px 10px; + font-size: 14px; + text-align: left; } + #carbonads .carbon-poweredby { + position: absolute; + bottom: 0; + left: 142px; + font-size: 8px; } } + +@media all and (min-width: 1023px) { + .grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 2rem; + align-items: start; } } + +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + white-space: nowrap; } + +[hidden] { + display: none !important; } + +@media all and (min-width: 1023px) { + .mobile-only { + display: none; } } + +@media all and (max-width: 1023px) { + .desktop-only { + display: none; } } + +.text.text { + font-size: inherit; + color: inherit; + font: inherit; + font-family: var(--text-font); + margin: 0; } + +.color-brand { + color: var(--link-color); } + +.font-weight-medium { + font-weight: 500; } + +.center-text { + text-align: center; + grid-column: 1 / -1; } + +.text-dark { + color: var(--headings-color); } + +.divider { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } + +.fs-step--1 { + font-size: .875rem; } + +.fs-step-0 { + font-size: var(--step-0); } + +.fs-step-1 { + font-size: var(--step-1); } + +.fs-step-2 { + font-size: var(--step-2); } + +.fs-step-3 { + font-size: var(--step-3); } + +.fs-step-4 { + font-size: var(--step-4); } + +.fs-step-5 { + font-size: var(--step-5); } + +.fs-step-6 { + font-size: var(--step-6); } + +.grid--center-items { + align-items: center; } + +.span-1-3 { + grid-column: 1 / 4; } + +.span-1-4 { + grid-column: 1 / 5; } + +.span-1-5 { + grid-column: 1 / 6; } + +.span-1-6 { + grid-column: 1 / 7; } + +.span-1-7 { + grid-column: 1 / 8; } + +.span-1-12 { + grid-column: 1 / -1; } + +.span-4-12 { + grid-column: 4 / 13; } + +.span-6-12 { + grid-column: 6 / 13; } + +.span-7-12 { + grid-column: 7 / 13; } + +.span-8-12 { + grid-column: 8 / 13; } + +.span-10-12 { + grid-column: 10 / 13; } + +.span-11-12 { + grid-column: 11 / 13; } + +.span-4-9 { + grid-column: 4 / 10; } + +.span-4-11 { + grid-column: 4 / 11; } + +.span-5-12 { + grid-column: 5 / 12; } + +.span-3-10 { + grid-column: 3 / 11; } + +.span-6-7 { + grid-column: 6 / 8; } + +.span-5-8 { + grid-column: 5 / 9; } diff --git a/docs/src/assets/css/tokens/spacing.css b/docs/src/assets/css/tokens/spacing.css new file mode 100644 index 00000000000..f15a0705ef6 --- /dev/null +++ b/docs/src/assets/css/tokens/spacing.css @@ -0,0 +1,52 @@ +/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */ +:root { + --fc-3xs-min: (var(--fc-s-min) * 0.25); + --fc-3xs-max: (var(--fc-s-max) * 0.25); + --fc-2xs-min: (var(--fc-s-min) * 0.5); + --fc-2xs-max: (var(--fc-s-max) * 0.5); + --fc-xs-min: (var(--fc-s-min) * 0.75); + --fc-xs-max: (var(--fc-s-max) * 0.75); + --fc-s-min: (var(--f-0-min)); + --fc-s-max: (var(--f-0-max)); + --fc-m-min: (var(--fc-s-min) * 1.5); + --fc-m-max: (var(--fc-s-max) * 1.5); + --fc-l-min: (var(--fc-s-min) * 2); + --fc-l-max: (var(--fc-s-max) * 2); + --fc-xl-min: (var(--fc-s-min) * 3); + --fc-xl-max: (var(--fc-s-max) * 3); + --fc-2xl-min: (var(--fc-s-min) * 4); + --fc-2xl-max: (var(--fc-s-max) * 4); + --fc-3xl-min: (var(--fc-s-min) * 6); + --fc-3xl-max: (var(--fc-s-max) * 6); + --fc-4xl-min: (var(--fc-s-min) * 8); + --fc-4xl-max: (var(--fc-s-max) * 8); + /* T-shirt sizes */ + --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp)); + /* One-up pairs */ + --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + /* Custom pairs */ + --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --spacer-2x: 2rem; + --spacer-3x: 3rem; + --spacer-4x: 4rem; + --spacer-6x: 6rem; + --spacer-8x: 8rem; } diff --git a/docs/src/assets/css/tokens/themes.css b/docs/src/assets/css/tokens/themes.css new file mode 100644 index 00000000000..a0967bd75f1 --- /dev/null +++ b/docs/src/assets/css/tokens/themes.css @@ -0,0 +1,131 @@ +:root { + /* Tier 1 variables */ + --color-neutral-25: #FCFCFD; + --color-neutral-50: #F9FAFB; + --color-neutral-100: #F2F4F7; + --color-neutral-200: #E4E7EC; + --color-neutral-300: #D0D5DD; + --color-neutral-400: #98A2B3; + --color-neutral-500: #667085; + --color-neutral-600: #475467; + --color-neutral-700: #344054; + --color-neutral-800: #1D2939; + --color-neutral-900: #101828; + --color-primary-25: #FBFBFF; + --color-primary-50: #F6F6FE; + --color-primary-100: #ECECFD; + --color-primary-200: #DEDEFF; + --color-primary-300: #CCCCFA; + --color-primary-400: #B7B7FF; + --color-primary-500: #A0A0F5; + --color-primary-600: #8080F2; + --color-primary-700: #6358D4; + --color-primary-800: #4B32C3; + --color-primary-900: #341BAB; + --color-warning-25: #FFFCF5; + --color-warning-50: #FFFAEB; + --color-warning-100: #FEF0C7; + --color-warning-200: #FEDF89; + --color-warning-300: #FEC84B; + --color-warning-400: #FDB022; + --color-warning-500: #F79009; + --color-warning-600: #DC6803; + --color-warning-700: #B54708; + --color-warning-800: #93370D; + --color-warning-900: #7A2E0E; + --color-success-25: #F6FEF9; + --color-success-50: #ECFDF3; + --color-success-100: #D1FADF; + --color-success-200: #A6F4C5; + --color-success-300: #6CE9A6; + --color-success-400: #32D583; + --color-success-500: #12B76A; + --color-success-600: #039855; + --color-success-700: #027A48; + --color-success-800: #05603A; + --color-success-900: #054F31; + --color-rose-25: #FFF5F6; + --color-rose-50: #FFF1F3; + --color-rose-100: #FFE4E8; + --color-rose-200: #FECDD6; + --color-rose-300: #FEA3B4; + --color-rose-400: #FD6F8E; + --color-rose-500: #F63D68; + --color-rose-600: #E31B54; + --color-rose-700: #C01048; + --color-rose-800: #A11043; + --color-rose-900: #89123E; + /* Tier 2 variables */ + --primary-button-background-color: var(--color-primary-800); + --primary-button-hover-color: var(--color-primary-900); + --primary-button-text-color: #fff; + --secondary-button-background-color: var(--color-primary-50); + --secondary-button-hover-color: var(--color-primary-100); + --secondary-button-text-color: var(--color-brand); + --ghost-button-background-color: var(--color-primary-50); + --ghost-button-text-color: var(--color-brand); + --color-brand: var(--color-primary-800); + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); } + +@media (prefers-color-scheme: dark) { + --secondary-button-background-color: var(--color-neutral-700); + --secondary-button-hover-color: var(--color-neutral-800); + --secondary-button-text-color: var(--body-text-color); + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; } + +html[data-theme="light"] { + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); } + +html[data-theme="dark"] { + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --docs-lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; } diff --git a/docs/src/assets/css/tokens/typography.css b/docs/src/assets/css/tokens/typography.css new file mode 100644 index 00000000000..2dcc9f89ccb --- /dev/null +++ b/docs/src/assets/css/tokens/typography.css @@ -0,0 +1,64 @@ +/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ +:root { + --fluid-min-width: 320; + --fluid-max-width: 1280; + --fluid-screen: 100vw; + --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); } + +@media screen and (min-width: 1280px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); } } + +:root { + --f--2-min: 12.64; + --f--2-max: 10.24; + --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); + --f--1-min: 14.22; + --f--1-max: 12.80; + --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp)); + --f-0-min: 16.00; + --f-0-max: 16.00; + --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp)); + --f-1-min: 18.00; + --f-1-max: 20.00; + --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp)); + --f-2-min: 20.25; + --f-2-max: 25.00; + --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp)); + --f-3-min: 22.78; + --f-3-max: 31.25; + --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp)); + --f-4-min: 25.63; + --f-4-max: 39.06; + --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp)); + --f-5-min: 28.83; + --f-5-max: 48.83; + --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp)); + --f-6-min: 32.44; + --f-6-max: 61.04; + --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); } + +:root { + --mono-font: "Space Mono", monospace; + --text-font: "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; + --display-font: "Space Grotesk", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; } diff --git a/docs/src/assets/css/tokens/ui.css b/docs/src/assets/css/tokens/ui.css new file mode 100644 index 00000000000..175480d1cee --- /dev/null +++ b/docs/src/assets/css/tokens/ui.css @@ -0,0 +1,5 @@ +:root { + --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), + 0px 4px 6px -2px rgba(16, 24, 40, 0.05); + --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05); + --border-radius: .5rem; } diff --git a/docs/src/assets/fonts/Inter-Regular-subset.woff2 b/docs/src/assets/fonts/Inter-Regular-subset.woff2 new file mode 100644 index 00000000000..de0e6016b2d Binary files /dev/null and b/docs/src/assets/fonts/Inter-Regular-subset.woff2 differ diff --git a/docs/src/assets/fonts/Inter-Regular-subset.zopfli.woff b/docs/src/assets/fonts/Inter-Regular-subset.zopfli.woff new file mode 100644 index 00000000000..dd5418f4f36 Binary files /dev/null and b/docs/src/assets/fonts/Inter-Regular-subset.zopfli.woff differ diff --git a/docs/src/assets/fonts/Inter-SemiBold-subset.woff2 b/docs/src/assets/fonts/Inter-SemiBold-subset.woff2 new file mode 100644 index 00000000000..1fee6c700ff Binary files /dev/null and b/docs/src/assets/fonts/Inter-SemiBold-subset.woff2 differ diff --git a/docs/src/assets/fonts/Inter-SemiBold-subset.zopfli.woff b/docs/src/assets/fonts/Inter-SemiBold-subset.zopfli.woff new file mode 100644 index 00000000000..619bca17027 Binary files /dev/null and b/docs/src/assets/fonts/Inter-SemiBold-subset.zopfli.woff differ diff --git a/docs/src/assets/fonts/Inter/Inter-VariableFont_slnt,wght.ttf b/docs/src/assets/fonts/Inter/Inter-VariableFont_slnt,wght.ttf new file mode 100644 index 00000000000..32a79990a55 Binary files /dev/null and b/docs/src/assets/fonts/Inter/Inter-VariableFont_slnt,wght.ttf differ diff --git a/docs/src/assets/fonts/Inter/OFL.txt b/docs/src/assets/fonts/Inter/OFL.txt new file mode 100644 index 00000000000..ce049adca3e --- /dev/null +++ b/docs/src/assets/fonts/Inter/OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2016-2019 The Inter Project Authors (me@rsms.me) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/src/assets/fonts/Inter/README.txt b/docs/src/assets/fonts/Inter/README.txt new file mode 100644 index 00000000000..9f35f6cf69f --- /dev/null +++ b/docs/src/assets/fonts/Inter/README.txt @@ -0,0 +1,72 @@ +Inter Variable Font +=================== + +This download contains Inter as both a variable font and static fonts. + +Inter is a variable font with these axes: + slnt + wght + +This means all the styles are contained in a single file: + Inter-VariableFont_slnt,wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Inter: + static/Inter-Thin.ttf + static/Inter-ExtraLight.ttf + static/Inter-Light.ttf + static/Inter-Regular.ttf + static/Inter-Medium.ttf + static/Inter-SemiBold.ttf + static/Inter-Bold.ttf + static/Inter-ExtraBold.ttf + static/Inter-Black.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them freely in your products & projects - print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/docs/src/assets/fonts/Inter/static/Inter-Black.ttf b/docs/src/assets/fonts/Inter/static/Inter-Black.ttf new file mode 100644 index 00000000000..56537577352 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Black.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Bold.ttf b/docs/src/assets/fonts/Inter/static/Inter-Bold.ttf new file mode 100644 index 00000000000..e98b84ce87f Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Bold.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-ExtraBold.ttf b/docs/src/assets/fonts/Inter/static/Inter-ExtraBold.ttf new file mode 100644 index 00000000000..7f16a0f0f59 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-ExtraBold.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-ExtraLight.ttf b/docs/src/assets/fonts/Inter/static/Inter-ExtraLight.ttf new file mode 100644 index 00000000000..69426a3eb56 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-ExtraLight.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Light.ttf b/docs/src/assets/fonts/Inter/static/Inter-Light.ttf new file mode 100644 index 00000000000..a5f073690d3 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Light.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Medium.ttf b/docs/src/assets/fonts/Inter/static/Inter-Medium.ttf new file mode 100644 index 00000000000..721147d8311 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Medium.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Regular-subset.ttf b/docs/src/assets/fonts/Inter/static/Inter-Regular-subset.ttf new file mode 100644 index 00000000000..71c56ff75a2 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Regular-subset.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Regular.ttf b/docs/src/assets/fonts/Inter/static/Inter-Regular.ttf new file mode 100644 index 00000000000..96fd6a12d0e Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Regular.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-SemiBold-subset.ttf b/docs/src/assets/fonts/Inter/static/Inter-SemiBold-subset.ttf new file mode 100644 index 00000000000..97c3b862716 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-SemiBold-subset.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-SemiBold.ttf b/docs/src/assets/fonts/Inter/static/Inter-SemiBold.ttf new file mode 100644 index 00000000000..ddb279290ba Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-SemiBold.ttf differ diff --git a/docs/src/assets/fonts/Inter/static/Inter-Thin.ttf b/docs/src/assets/fonts/Inter/static/Inter-Thin.ttf new file mode 100644 index 00000000000..76be6252b91 Binary files /dev/null and b/docs/src/assets/fonts/Inter/static/Inter-Thin.ttf differ diff --git a/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.woff2 b/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.woff2 new file mode 100644 index 00000000000..0d2e1313ea8 Binary files /dev/null and b/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.woff2 differ diff --git a/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff b/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff new file mode 100644 index 00000000000..8f8bb5ec311 Binary files /dev/null and b/docs/src/assets/fonts/SpaceGrotesk-Medium-subset.zopfli.woff differ diff --git a/docs/src/assets/fonts/SpaceMono-Regular-subset.woff2 b/docs/src/assets/fonts/SpaceMono-Regular-subset.woff2 new file mode 100644 index 00000000000..e7d58774157 Binary files /dev/null and b/docs/src/assets/fonts/SpaceMono-Regular-subset.woff2 differ diff --git a/docs/src/assets/fonts/SpaceMono-Regular-subset.zopfli.woff b/docs/src/assets/fonts/SpaceMono-Regular-subset.zopfli.woff new file mode 100644 index 00000000000..31832cfee03 Binary files /dev/null and b/docs/src/assets/fonts/SpaceMono-Regular-subset.zopfli.woff differ diff --git a/docs/src/assets/fonts/Space_Grotesk/OFL.txt b/docs/src/assets/fonts/Space_Grotesk/OFL.txt new file mode 100644 index 00000000000..f831dbc69f0 --- /dev/null +++ b/docs/src/assets/fonts/Space_Grotesk/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/src/assets/fonts/Space_Grotesk/README.txt b/docs/src/assets/fonts/Space_Grotesk/README.txt new file mode 100644 index 00000000000..a5761741fda --- /dev/null +++ b/docs/src/assets/fonts/Space_Grotesk/README.txt @@ -0,0 +1,67 @@ +Space Grotesk Variable Font +=========================== + +This download contains Space Grotesk as both a variable font and static fonts. + +Space Grotesk is a variable font with this axis: + wght + +This means all the styles are contained in a single file: + SpaceGrotesk-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Space Grotesk: + static/SpaceGrotesk-Light.ttf + static/SpaceGrotesk-Regular.ttf + static/SpaceGrotesk-Medium.ttf + static/SpaceGrotesk-SemiBold.ttf + static/SpaceGrotesk-Bold.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them freely in your products & projects - print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/docs/src/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf b/docs/src/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf new file mode 100644 index 00000000000..1e79375f7b4 Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Bold.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Bold.ttf new file mode 100644 index 00000000000..869a60f04eb Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Bold.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Light.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Light.ttf new file mode 100644 index 00000000000..76a195f12bc Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Light.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium-subset.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium-subset.ttf new file mode 100644 index 00000000000..721d8ae00c9 Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium-subset.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium.ttf new file mode 100644 index 00000000000..667905f405a Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Medium.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Regular.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Regular.ttf new file mode 100644 index 00000000000..792fe1b396d Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-Regular.ttf differ diff --git a/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf new file mode 100644 index 00000000000..2171d9d301a Binary files /dev/null and b/docs/src/assets/fonts/Space_Grotesk/static/SpaceGrotesk-SemiBold.ttf differ diff --git a/docs/src/assets/fonts/Space_Mono/OFL.txt b/docs/src/assets/fonts/Space_Mono/OFL.txt new file mode 100644 index 00000000000..5bb7346e6a5 --- /dev/null +++ b/docs/src/assets/fonts/Space_Mono/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2016 Google Inc. All Rights Reserved. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/src/assets/fonts/Space_Mono/SpaceMono-Bold.ttf b/docs/src/assets/fonts/Space_Mono/SpaceMono-Bold.ttf new file mode 100644 index 00000000000..18b8aea3b73 Binary files /dev/null and b/docs/src/assets/fonts/Space_Mono/SpaceMono-Bold.ttf differ diff --git a/docs/src/assets/fonts/Space_Mono/SpaceMono-BoldItalic.ttf b/docs/src/assets/fonts/Space_Mono/SpaceMono-BoldItalic.ttf new file mode 100644 index 00000000000..51fcc39906b Binary files /dev/null and b/docs/src/assets/fonts/Space_Mono/SpaceMono-BoldItalic.ttf differ diff --git a/docs/src/assets/fonts/Space_Mono/SpaceMono-Italic.ttf b/docs/src/assets/fonts/Space_Mono/SpaceMono-Italic.ttf new file mode 100644 index 00000000000..119c545edec Binary files /dev/null and b/docs/src/assets/fonts/Space_Mono/SpaceMono-Italic.ttf differ diff --git a/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular-subset.ttf b/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular-subset.ttf new file mode 100644 index 00000000000..5cf59572e27 Binary files /dev/null and b/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular-subset.ttf differ diff --git a/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular.ttf b/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular.ttf new file mode 100644 index 00000000000..3374aca0305 Binary files /dev/null and b/docs/src/assets/fonts/Space_Mono/SpaceMono-Regular.ttf differ diff --git a/docs/src/assets/images/404.png b/docs/src/assets/images/404.png new file mode 100644 index 00000000000..347d16086ef Binary files /dev/null and b/docs/src/assets/images/404.png differ diff --git a/docs/src/assets/images/icons/arrow-left.svg b/docs/src/assets/images/icons/arrow-left.svg new file mode 100644 index 00000000000..26dc029137b --- /dev/null +++ b/docs/src/assets/images/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/arrow-right.svg b/docs/src/assets/images/icons/arrow-right.svg new file mode 100644 index 00000000000..2d71ef09d38 --- /dev/null +++ b/docs/src/assets/images/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/arrow-top-right.svg b/docs/src/assets/images/icons/arrow-top-right.svg new file mode 100644 index 00000000000..511f454600c --- /dev/null +++ b/docs/src/assets/images/icons/arrow-top-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/chevron-down.svg b/docs/src/assets/images/icons/chevron-down.svg new file mode 100644 index 00000000000..8a83c957d17 --- /dev/null +++ b/docs/src/assets/images/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/copy.svg b/docs/src/assets/images/icons/copy.svg new file mode 100644 index 00000000000..2d67ceb5a9e --- /dev/null +++ b/docs/src/assets/images/icons/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/correct.svg b/docs/src/assets/images/icons/correct.svg new file mode 100644 index 00000000000..eb95b879c02 --- /dev/null +++ b/docs/src/assets/images/icons/correct.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/src/assets/images/icons/discord.svg b/docs/src/assets/images/icons/discord.svg new file mode 100644 index 00000000000..ed238b18e51 --- /dev/null +++ b/docs/src/assets/images/icons/discord.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/src/assets/images/icons/facebook.svg b/docs/src/assets/images/icons/facebook.svg new file mode 100644 index 00000000000..685449eedbb --- /dev/null +++ b/docs/src/assets/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/features-list-icon.svg b/docs/src/assets/images/icons/features-list-icon.svg new file mode 100644 index 00000000000..f86c388b41c --- /dev/null +++ b/docs/src/assets/images/icons/features-list-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/src/assets/images/icons/github-icon-mono.svg b/docs/src/assets/images/icons/github-icon-mono.svg new file mode 100644 index 00000000000..6a945577bf2 --- /dev/null +++ b/docs/src/assets/images/icons/github-icon-mono.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/github-img.svg b/docs/src/assets/images/icons/github-img.svg new file mode 100644 index 00000000000..9912529161c --- /dev/null +++ b/docs/src/assets/images/icons/github-img.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/github-large.svg b/docs/src/assets/images/icons/github-large.svg new file mode 100644 index 00000000000..50c1fd015aa --- /dev/null +++ b/docs/src/assets/images/icons/github-large.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/github-small.svg b/docs/src/assets/images/icons/github-small.svg new file mode 100644 index 00000000000..199cd41bd97 --- /dev/null +++ b/docs/src/assets/images/icons/github-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/github.svg b/docs/src/assets/images/icons/github.svg new file mode 100644 index 00000000000..eb3e9d70769 --- /dev/null +++ b/docs/src/assets/images/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/google.svg b/docs/src/assets/images/icons/google.svg new file mode 100644 index 00000000000..a45c2a3d94b --- /dev/null +++ b/docs/src/assets/images/icons/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/src/assets/images/icons/incorrect.svg b/docs/src/assets/images/icons/incorrect.svg new file mode 100644 index 00000000000..b226bdddff4 --- /dev/null +++ b/docs/src/assets/images/icons/incorrect.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/src/assets/images/icons/languages.svg b/docs/src/assets/images/icons/languages.svg new file mode 100644 index 00000000000..fc10dc90559 --- /dev/null +++ b/docs/src/assets/images/icons/languages.svg @@ -0,0 +1 @@ +language, translate, translation, translator \ No newline at end of file diff --git a/docs/src/assets/images/icons/learn-more-arrow.svg b/docs/src/assets/images/icons/learn-more-arrow.svg new file mode 100644 index 00000000000..a3a66802d5e --- /dev/null +++ b/docs/src/assets/images/icons/learn-more-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/link.svg b/docs/src/assets/images/icons/link.svg new file mode 100644 index 00000000000..856e3ae7cf9 --- /dev/null +++ b/docs/src/assets/images/icons/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/linkedin.svg b/docs/src/assets/images/icons/linkedin.svg new file mode 100644 index 00000000000..804d62205f5 --- /dev/null +++ b/docs/src/assets/images/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/menu.svg b/docs/src/assets/images/icons/menu.svg new file mode 100644 index 00000000000..c3db936136b --- /dev/null +++ b/docs/src/assets/images/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/minus-circle.svg b/docs/src/assets/images/icons/minus-circle.svg new file mode 100644 index 00000000000..49b35593aef --- /dev/null +++ b/docs/src/assets/images/icons/minus-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/npm.svg b/docs/src/assets/images/icons/npm.svg new file mode 100644 index 00000000000..34e9597cbd2 --- /dev/null +++ b/docs/src/assets/images/icons/npm.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/src/assets/images/icons/open-collectione-mono.svg b/docs/src/assets/images/icons/open-collectione-mono.svg new file mode 100644 index 00000000000..2ac85b4e1b2 --- /dev/null +++ b/docs/src/assets/images/icons/open-collectione-mono.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/src/assets/images/icons/opencollective-img.svg b/docs/src/assets/images/icons/opencollective-img.svg new file mode 100644 index 00000000000..5ecb1f71758 --- /dev/null +++ b/docs/src/assets/images/icons/opencollective-img.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/src/assets/images/icons/plus-circle.svg b/docs/src/assets/images/icons/plus-circle.svg new file mode 100644 index 00000000000..e65aae3b596 --- /dev/null +++ b/docs/src/assets/images/icons/plus-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/search.svg b/docs/src/assets/images/icons/search.svg new file mode 100644 index 00000000000..2cd46bff5c4 --- /dev/null +++ b/docs/src/assets/images/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/icons/twitter.svg b/docs/src/assets/images/icons/twitter.svg new file mode 100644 index 00000000000..54e9463107b --- /dev/null +++ b/docs/src/assets/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/assets/images/logo/brand-colors.svg b/docs/src/assets/images/logo/brand-colors.svg new file mode 100644 index 00000000000..99017ddf9e1 --- /dev/null +++ b/docs/src/assets/images/logo/brand-colors.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/src/assets/images/logo/eslint-logo-color.png b/docs/src/assets/images/logo/eslint-logo-color.png new file mode 100644 index 00000000000..efa54ec778d Binary files /dev/null and b/docs/src/assets/images/logo/eslint-logo-color.png differ diff --git a/docs/src/assets/images/logo/eslint-logo-color.svg b/docs/src/assets/images/logo/eslint-logo-color.svg new file mode 100644 index 00000000000..86f7ef5635b --- /dev/null +++ b/docs/src/assets/images/logo/eslint-logo-color.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/src/assets/images/logo/eslint-logo-white.svg b/docs/src/assets/images/logo/eslint-logo-white.svg new file mode 100644 index 00000000000..250ab8d7327 --- /dev/null +++ b/docs/src/assets/images/logo/eslint-logo-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/src/assets/js/components-index.js b/docs/src/assets/js/components-index.js new file mode 100644 index 00000000000..87eb53ef901 --- /dev/null +++ b/docs/src/assets/js/components-index.js @@ -0,0 +1,35 @@ +(function() { + var index_trigger = document.getElementById("js-index-toggle"), + index = document.getElementById("js-index-list"), + body = document.getElementsByTagName("body")[0], + open = false; + + if (matchMedia) { + const mq = window.matchMedia("(max-width: 1023px)"); + mq.addListener(WidthChange); + WidthChange(mq); + } + + function WidthChange(mq) { + initIndex(); + } + + function toggleindex(e) { + if (!open) { + this.setAttribute("aria-expanded", "true"); + index.setAttribute("data-open", "true"); + open = true; + } else { + this.setAttribute("aria-expanded", "false"); + index.setAttribute("data-open", "false"); + open = false; + } + } + + function initIndex() { + index_trigger.removeAttribute("hidden"); + index_trigger.setAttribute("aria-expanded", "false"); + index.setAttribute("data-open", "false"); + index_trigger.addEventListener("click", toggleindex, false); + } +})(); diff --git a/docs/src/assets/js/css-vars-ponyfill@2.js b/docs/src/assets/js/css-vars-ponyfill@2.js new file mode 100644 index 00000000000..3285a577a2a --- /dev/null +++ b/docs/src/assets/js/css-vars-ponyfill@2.js @@ -0,0 +1,47 @@ +/*! + * css-vars-ponyfill + * v2.1.2 + * https://jhildenbiddle.github.io/css-vars-ponyfill/ + * (c) 2018-2019 John Hildenbiddle + * MIT license + */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).cssVars=t()}(this,function(){"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{},r={mimeType:t.mimeType||null,onBeforeSend:t.onBeforeSend||Function.prototype,onSuccess:t.onSuccess||Function.prototype,onError:t.onError||Function.prototype,onComplete:t.onComplete||Function.prototype},n=Array.isArray(e)?e:[e],o=Array.apply(null,Array(n.length)).map(function(e){return null});function s(){return!("<"===(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").trim().charAt(0))}function a(e,t){r.onError(e,n[t],t)}function c(e,t){var s=r.onSuccess(e,n[t],t);e=!1===s?"":s||e,o[t]=e,-1===o.indexOf(null)&&r.onComplete(o)}var i=document.createElement("a");n.forEach(function(e,t){if(i.setAttribute("href",e),i.href=String(i.href),Boolean(document.all&&!window.atob)&&i.host.split(":")[0]!==location.host.split(":")[0]){if(i.protocol===location.protocol){var n=new XDomainRequest;n.open("GET",e),n.timeout=0,n.onprogress=Function.prototype,n.ontimeout=Function.prototype,n.onload=function(){s(n.responseText)?c(n.responseText,t):a(n,t)},n.onerror=function(e){a(n,t)},setTimeout(function(){n.send()},0)}else console.warn("Internet Explorer 9 Cross-Origin (CORS) requests must use the same protocol (".concat(e,")")),a(null,t)}else{var o=new XMLHttpRequest;o.open("GET",e),r.mimeType&&o.overrideMimeType&&o.overrideMimeType(r.mimeType),r.onBeforeSend(o,e,t),o.onreadystatechange=function(){4===o.readyState&&(200===o.status&&s(o.responseText)?c(o.responseText,t):a(o,t))},o.send()}})}function n(e){var t={cssComments:/\/\*[\s\S]+?\*\//g,cssImports:/(?:@import\s*)(?:url\(\s*)?(?:['"])([^'"]*)(?:['"])(?:\s*\))?(?:[^;]*;)/g},n={rootElement:e.rootElement||document,include:e.include||'style,link[rel="stylesheet"]',exclude:e.exclude||null,filter:e.filter||null,useCSSOM:e.useCSSOM||!1,onBeforeSend:e.onBeforeSend||Function.prototype,onSuccess:e.onSuccess||Function.prototype,onError:e.onError||Function.prototype,onComplete:e.onComplete||Function.prototype},s=Array.apply(null,n.rootElement.querySelectorAll(n.include)).filter(function(e){return t=e,r=n.exclude,!(t.matches||t.matchesSelector||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector).call(t,r);var t,r}),a=Array.apply(null,Array(s.length)).map(function(e){return null});function c(){if(-1===a.indexOf(null)){var e=a.join("");n.onComplete(e,a,s)}}function i(e,t,o,s){var i=n.onSuccess(e,o,s);(function e(t,o,s,a){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[];var i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[];var l=u(t,s,i);l.rules.length?r(l.absoluteUrls,{onBeforeSend:function(e,t,r){n.onBeforeSend(e,o,t)},onSuccess:function(e,t,r){var s=n.onSuccess(e,o,t),a=u(e=!1===s?"":s||e,t,i);return a.rules.forEach(function(t,r){e=e.replace(t,a.absoluteRules[r])}),e},onError:function(r,n,u){c.push({xhr:r,url:n}),i.push(l.rules[u]),e(t,o,s,a,c,i)},onComplete:function(r){r.forEach(function(e,r){t=t.replace(l.rules[r],e)}),e(t,o,s,a,c,i)}}):a(t,c)})(e=void 0!==i&&!1===Boolean(i)?"":i||e,o,s,function(e,r){null===a[t]&&(r.forEach(function(e){return n.onError(e.xhr,o,e.url)}),!n.filter||n.filter.test(e)?a[t]=e:a[t]="",c())})}function u(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],s={};return s.rules=(e.replace(t.cssComments,"").match(t.cssImports)||[]).filter(function(e){return-1===n.indexOf(e)}),s.urls=s.rules.map(function(e){return e.replace(t.cssImports,"$1")}),s.absoluteUrls=s.urls.map(function(e){return o(e,r)}),s.absoluteRules=s.rules.map(function(e,t){var n=s.urls[t],a=o(s.absoluteUrls[t],r);return e.replace(n,a)}),s}s.length?s.forEach(function(e,t){var s=e.getAttribute("href"),u=e.getAttribute("rel"),l="LINK"===e.nodeName&&s&&u&&"stylesheet"===u.toLowerCase(),f="STYLE"===e.nodeName;if(l)r(s,{mimeType:"text/css",onBeforeSend:function(t,r,o){n.onBeforeSend(t,e,r)},onSuccess:function(r,n,a){var c=o(s,location.href);i(r,t,e,c)},onError:function(r,o,s){a[t]="",n.onError(r,e,o),c()}});else if(f){var d=e.textContent;n.useCSSOM&&(d=Array.apply(null,e.sheet.cssRules).map(function(e){return e.cssText}).join("")),i(d,t,e,location.href)}else a[t]="",c()}):n.onComplete("",[])}function o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),n=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(o),n.href=t,o.href=e,o.href}var s=a;function a(e,t,r){e instanceof RegExp&&(e=c(e,r)),t instanceof RegExp&&(t=c(t,r));var n=i(e,t,r);return n&&{start:n[0],end:n[1],pre:r.slice(0,n[0]),body:r.slice(n[0]+e.length,n[1]),post:r.slice(n[1]+t.length)}}function c(e,t){var r=t.match(e);return r?r[0]:null}function i(e,t,r){var n,o,s,a,c,i=r.indexOf(e),u=r.indexOf(t,i+1),l=i;if(i>=0&&u>0){for(n=[],s=r.length;l>=0&&!c;)l==i?(n.push(l),i=r.indexOf(e,l+1)):1==n.length?c=[n.pop(),u]:((o=n.pop())=0?i:u;n.length&&(c=[s,a])}return c}function u(t){var r=e({},{preserveStatic:!0,removeComments:!1},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});function n(e){throw new Error("CSS parse error: ".concat(e))}function o(e){var r=e.exec(t);if(r)return t=t.slice(r[0].length),r}function a(){return o(/^{\s*/)}function c(){return o(/^}/)}function i(){o(/^\s*/)}function u(){if(i(),"/"===t[0]&&"*"===t[1]){for(var e=2;t[e]&&("*"!==t[e]||"/"!==t[e+1]);)e++;if(!t[e])return n("end of comment is missing");var r=t.slice(2,e);return t=t.slice(e+2),{type:"comment",comment:r}}}function l(){for(var e,t=[];e=u();)t.push(e);return r.removeComments?[]:t}function f(){for(i();"}"===t[0];)n("extra closing bracket");var e=o(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);if(e)return e[0].trim().replace(/\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*\/+/g,"").replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g,function(e){return e.replace(/,/g,"‌")}).split(/\s*(?![^(]*\)),\s*/).map(function(e){return e.replace(/\u200C/g,",")})}function d(){o(/^([;\s]*)+/);var e=/\/\*[^*]*\*+([^\/*][^*]*\*+)*\//g,t=o(/^(\*?[-#\/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);if(t){if(t=t[0].trim(),!o(/^:\s*/))return n("property missing ':'");var r=o(/^((?:\/\*.*?\*\/|'(?:\\'|.)*?'|"(?:\\"|.)*?"|\((\s*'(?:\\'|.)*?'|"(?:\\"|.)*?"|[^)]*?)\s*\)|[^};])+)/),s={type:"declaration",property:t.replace(e,""),value:r?r[0].replace(e,"").trim():""};return o(/^[;\s]*/),s}}function p(){if(!a())return n("missing '{'");for(var e,t=l();e=d();)t.push(e),t=t.concat(l());return c()?t:n("missing '}'")}function m(){i();for(var e,t=[];e=o(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/);)t.push(e[1]),o(/^,\s*/);if(t.length)return{type:"keyframe",values:t,declarations:p()}}function v(){if(i(),"@"===t[0]){var e=function(){var e=o(/^@([-\w]+)?keyframes\s*/);if(e){var t=e[1];if(!(e=o(/^([-\w]+)\s*/)))return n("@keyframes missing name");var r,s=e[1];if(!a())return n("@keyframes missing '{'");for(var i=l();r=m();)i.push(r),i=i.concat(l());return c()?{type:"keyframes",name:s,vendor:t,keyframes:i}:n("@keyframes missing '}'")}}()||function(){var e=o(/^@supports *([^{]+)/);if(e)return{type:"supports",supports:e[1].trim(),rules:y()}}()||function(){if(o(/^@host\s*/))return{type:"host",rules:y()}}()||function(){var e=o(/^@media([^{]+)*/);if(e)return{type:"media",media:(e[1]||"").trim(),rules:y()}}()||function(){var e=o(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);if(e)return{type:"custom-media",name:e[1].trim(),media:e[2].trim()}}()||function(){if(o(/^@page */))return{type:"page",selectors:f()||[],declarations:p()}}()||function(){var e=o(/^@([-\w]+)?document *([^{]+)/);if(e)return{type:"document",document:e[2].trim(),vendor:e[1]?e[1].trim():null,rules:y()}}()||function(){if(o(/^@font-face\s*/))return{type:"font-face",declarations:p()}}()||function(){var e=o(/^@(import|charset|namespace)\s*([^;]+);/);if(e)return{type:e[1],name:e[2].trim()}}();if(e&&!r.preserveStatic){var s=!1;if(e.declarations)s=e.declarations.some(function(e){return/var\(/.test(e.value)});else s=(e.keyframes||e.rules||[]).some(function(e){return(e.declarations||[]).some(function(e){return/var\(/.test(e.value)})});return s?e:{}}return e}}function h(){if(!r.preserveStatic){var e=s("{","}",t);if(e){var o=/:(?:root|host)(?![.:#(])/.test(e.pre)&&/--\S*\s*:/.test(e.body),a=/var\(/.test(e.body);if(!o&&!a)return t=t.slice(e.end+1),{}}}var c=f()||[],i=r.preserveStatic?p():p().filter(function(e){var t=c.some(function(e){return/:(?:root|host)(?![.:#(])/.test(e)})&&/^--\S/.test(e.property),r=/var\(/.test(e.value);return t||r});return c.length||n("selector missing"),{type:"rule",selectors:c,declarations:i}}function y(e){if(!e&&!a())return n("missing '{'");for(var r,o=l();t.length&&(e||"}"!==t[0])&&(r=v()||h());)r.type&&o.push(r),o=o.concat(l());return e||c()?o:n("missing '}'")}return{type:"stylesheet",stylesheet:{rules:y(!0),errors:[]}}}function l(t){var r=e({},{parseHost:!1,store:{},onWarning:function(){}},arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),n=new RegExp(":".concat(r.parseHost?"host":"root","(?![.:#(])"));return"string"==typeof t&&(t=u(t,r)),t.stylesheet.rules.forEach(function(e){"rule"===e.type&&e.selectors.some(function(e){return n.test(e)})&&e.declarations.forEach(function(e,t){var n=e.property,o=e.value;n&&0===n.indexOf("--")&&(r.store[n]=o)})}),r.store}function f(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r=arguments.length>2?arguments[2]:void 0,n={charset:function(e){return"@charset "+e.name+";"},comment:function(e){return 0===e.comment.indexOf("__CSSVARSPONYFILL")?"/*"+e.comment+"*/":""},"custom-media":function(e){return"@custom-media "+e.name+" "+e.media+";"},declaration:function(e){return e.property+":"+e.value+";"},document:function(e){return"@"+(e.vendor||"")+"document "+e.document+"{"+o(e.rules)+"}"},"font-face":function(e){return"@font-face{"+o(e.declarations)+"}"},host:function(e){return"@host{"+o(e.rules)+"}"},import:function(e){return"@import "+e.name+";"},keyframe:function(e){return e.values.join(",")+"{"+o(e.declarations)+"}"},keyframes:function(e){return"@"+(e.vendor||"")+"keyframes "+e.name+"{"+o(e.keyframes)+"}"},media:function(e){return"@media "+e.media+"{"+o(e.rules)+"}"},namespace:function(e){return"@namespace "+e.name+";"},page:function(e){return"@page "+(e.selectors.length?e.selectors.join(", "):"")+"{"+o(e.declarations)+"}"},rule:function(e){var t=e.declarations;if(t.length)return e.selectors.join(",")+"{"+o(t)+"}"},supports:function(e){return"@supports "+e.supports+"{"+o(e.rules)+"}"}};function o(e){for(var o="",s=0;s1&&void 0!==arguments[1]?arguments[1]:{});return"string"==typeof t&&(t=u(t,r)),function e(t,r){t.rules.forEach(function(n){n.rules?e(n,r):n.keyframes?n.keyframes.forEach(function(e){"keyframe"===e.type&&r(e.declarations,n)}):n.declarations&&r(n.declarations,t)})}(t.stylesheet,function(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2?arguments[2]:void 0;if(-1===e.indexOf("var("))return e;var n=s("(",")",e);return n?"var"===n.pre.slice(-3)?0===n.body.trim().length?(t.onWarning("var() must contain a non-whitespace string"),e):n.pre.slice(0,-3)+function(e){var n=e.split(",")[0].replace(/[\s\n\t]/g,""),o=(e.match(/(?:\s*,\s*){1}(.*)?/)||[])[1],s=Object.prototype.hasOwnProperty.call(t.variables,n)?String(t.variables[n]):void 0,a=s||(o?String(o):void 0),c=r||e;return s||t.onWarning('variable "'.concat(n,'" is undefined')),a&&"undefined"!==a&&a.length>0?h(a,t,c):"var(".concat(c,")")}(n.body)+h(n.post,t):n.pre+"(".concat(h(n.body,t),")")+h(n.post,t):(-1!==e.indexOf("var(")&&t.onWarning('missing closing ")" in the value "'.concat(e,'"')),e)}var y="undefined"!=typeof window,g=y&&window.CSS&&window.CSS.supports&&window.CSS.supports("(--a: 0)"),S={group:0,job:0},b={rootElement:y?document:null,shadowDOM:!1,include:"style,link[rel=stylesheet]",exclude:"",variables:{},onlyLegacy:!0,preserveStatic:!0,preserveVars:!1,silent:!1,updateDOM:!0,updateURLs:!0,watch:null,onBeforeSend:function(){},onWarning:function(){},onError:function(){},onSuccess:function(){},onComplete:function(){}},E={cssComments:/\/\*[\s\S]+?\*\//g,cssKeyframes:/@(?:-\w*-)?keyframes/,cssMediaQueries:/@media[^{]+\{([\s\S]+?})\s*}/g,cssUrls:/url\((?!['"]?(?:data|http|\/\/):)['"]?([^'")]*)['"]?\)/g,cssVarDeclRules:/(?::(?:root|host)(?![.:#(])[\s,]*[^{]*{\s*[^}]*})/g,cssVarDecls:/(?:[\s;]*)(-{2}\w[\w-]*)(?:\s*:\s*)([^;]*);/g,cssVarFunc:/var\(\s*--[\w-]/,cssVars:/(?:(?::(?:root|host)(?![.:#(])[\s,]*[^{]*{\s*[^;]*;*\s*)|(?:var\(\s*))(--[^:)]+)(?:\s*[:)])/},w={dom:{},job:{},user:{}},C=!1,O=null,A=0,x=null,j=!1;function k(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o="cssVars(): ",s=e({},b,r);function a(e,t,r,n){!s.silent&&window.console&&console.error("".concat(o).concat(e,"\n"),t),s.onError(e,t,r,n)}function c(e){!s.silent&&window.console&&console.warn("".concat(o).concat(e)),s.onWarning(e)}if(y){if(s.watch)return s.watch=b.watch,function(e){function t(e){return"LINK"===e.tagName&&-1!==(e.getAttribute("rel")||"").indexOf("stylesheet")&&!e.disabled}if(!window.MutationObserver)return;O&&(O.disconnect(),O=null);(O=new MutationObserver(function(r){r.some(function(r){var n,o=!1;return"attributes"===r.type?o=t(r.target):"childList"===r.type&&(n=r.addedNodes,o=Array.apply(null,n).some(function(e){var r=1===e.nodeType&&e.hasAttribute("data-cssvars"),n=function(e){return"STYLE"===e.tagName&&!e.disabled}(e)&&E.cssVars.test(e.textContent);return!r&&(t(e)||n)})||function(t){return Array.apply(null,t).some(function(t){var r=1===t.nodeType,n=r&&"out"===t.getAttribute("data-cssvars"),o=r&&"src"===t.getAttribute("data-cssvars"),s=o;if(o||n){var a=t.getAttribute("data-cssvars-group"),c=e.rootElement.querySelector('[data-cssvars-group="'.concat(a,'"]'));o&&(L(e.rootElement),w.dom={}),c&&c.parentNode.removeChild(c)}return s})}(r.removedNodes)),o})&&k(e)})).observe(document.documentElement,{attributes:!0,attributeFilter:["disabled","href"],childList:!0,subtree:!0})}(s),void k(s);if(!1===s.watch&&O&&(O.disconnect(),O=null),!s.__benchmark){if(C===s.rootElement)return void function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100;clearTimeout(x),x=setTimeout(function(){e.__benchmark=null,k(e)},t)}(r);if(s.__benchmark=T(),s.exclude=[O?'[data-cssvars]:not([data-cssvars=""])':'[data-cssvars="out"]',s.exclude].filter(function(e){return e}).join(","),s.variables=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=/^-{2}/;return Object.keys(e).reduce(function(r,n){return r[t.test(n)?n:"--".concat(n.replace(/^-+/,""))]=e[n],r},{})}(s.variables),!O)if(Array.apply(null,s.rootElement.querySelectorAll('[data-cssvars="out"]')).forEach(function(e){var t=e.getAttribute("data-cssvars-group");(t?s.rootElement.querySelector('[data-cssvars="src"][data-cssvars-group="'.concat(t,'"]')):null)||e.parentNode.removeChild(e)}),A){var i=s.rootElement.querySelectorAll('[data-cssvars]:not([data-cssvars="out"])');i.length2&&void 0!==arguments[2]?arguments[2]:[],i={},d=s.updateDOM?w.dom:Object.keys(w.job).length?w.job:w.job=JSON.parse(JSON.stringify(w.dom)),p=!1;if(o.forEach(function(e,t){if(E.cssVars.test(n[t]))try{var r=u(n[t],{preserveStatic:s.preserveStatic,removeComments:!0});l(r,{parseHost:Boolean(s.rootElement.host),store:i,onWarning:c}),e.__cssVars={tree:r}}catch(t){a(t.message,e)}}),s.updateDOM&&e(w.user,s.variables),e(i,s.variables),p=Boolean((document.querySelector("[data-cssvars]")||Object.keys(w.dom).length)&&Object.keys(i).some(function(e){return i[e]!==d[e]})),e(d,w.user,i),p)L(s.rootElement),k(s);else{var v=[],h=[],y=!1;if(w.job={},s.updateDOM&&S.job++,o.forEach(function(t){var r=!t.__cssVars;if(t.__cssVars)try{m(t.__cssVars.tree,e({},s,{variables:d,onWarning:c}));var n=f(t.__cssVars.tree);if(s.updateDOM){if(t.getAttribute("data-cssvars")||t.setAttribute("data-cssvars","src"),n.length){var o=t.getAttribute("data-cssvars-group")||++S.group,i=n.replace(/\s/g,""),u=s.rootElement.querySelector('[data-cssvars="out"][data-cssvars-group="'.concat(o,'"]'))||document.createElement("style");y=y||E.cssKeyframes.test(n),u.hasAttribute("data-cssvars")||u.setAttribute("data-cssvars","out"),i===t.textContent.replace(/\s/g,"")?(r=!0,u&&u.parentNode&&(t.removeAttribute("data-cssvars-group"),u.parentNode.removeChild(u))):i!==u.textContent.replace(/\s/g,"")&&([t,u].forEach(function(e){e.setAttribute("data-cssvars-job",S.job),e.setAttribute("data-cssvars-group",o)}),u.textContent=n,v.push(n),h.push(u),u.parentNode||t.parentNode.insertBefore(u,t.nextSibling))}}else t.textContent.replace(/\s/g,"")!==n&&v.push(n)}catch(e){a(e.message,t)}r&&t.setAttribute("data-cssvars","skip"),t.hasAttribute("data-cssvars-job")||t.setAttribute("data-cssvars-job",S.job)}),A=s.rootElement.querySelectorAll('[data-cssvars]:not([data-cssvars="out"])').length,s.shadowDOM)for(var g,b=[s.rootElement].concat(t(s.rootElement.querySelectorAll("*"))),O=0;g=b[O];++O)if(g.shadowRoot&&g.shadowRoot.querySelector("style")){var x=e({},s,{rootElement:g.shadowRoot});k(x)}s.updateDOM&&y&&M(s.rootElement),C=!1,s.onComplete(v.join(""),h,JSON.parse(JSON.stringify(d)),T()-s.__benchmark)}}}));else document.addEventListener("DOMContentLoaded",function e(t){k(r),document.removeEventListener("DOMContentLoaded",e)})}}function M(e){var t=["animation-name","-moz-animation-name","-webkit-animation-name"].filter(function(e){return getComputedStyle(document.body)[e]})[0];if(t){for(var r=e.getElementsByTagName("*"),n=[],o=0,s=r.length;o1&&void 0!==arguments[1]?arguments[1]:location.href,r=document.implementation.createHTMLDocument(""),n=r.createElement("base"),o=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(o),n.href=t,o.href=e,o.href}function T(){return y&&(window.performance||{}).now?window.performance.now():(new Date).getTime()}function L(e){Array.apply(null,e.querySelectorAll('[data-cssvars="skip"],[data-cssvars="src"]')).forEach(function(e){return e.setAttribute("data-cssvars","")})}return k.reset=function(){for(var e in C=!1,O&&(O.disconnect(),O=null),A=0,x=null,j=!1,w)w[e]={}},k}); + + +// Default values +cssVars({ + // Targets + rootElement: document, + shadowDOM: false, + + // Sources + include: 'link[rel=stylesheet],style', + exclude: '', + variables: {}, + + // Options + onlyLegacy: true, + preserveStatic: true, + preserveVars: false, + silent: false, + updateDOM: true, + updateURLs: true, + watch: false, + + // Callbacks + onBeforeSend(xhr, elm, url) { + // ... + }, + onWarning(message) { + // ... + }, + onError(message, elm, xhr, url) { + // ... + }, + onSuccess(cssText, elm, url) { + // ... + }, + onComplete(cssText, styleElms, cssVariables, benchmark) { + // ... + } +}); diff --git a/docs/src/assets/js/focus-visible.js b/docs/src/assets/js/focus-visible.js new file mode 100644 index 00000000000..2ffed420f81 --- /dev/null +++ b/docs/src/assets/js/focus-visible.js @@ -0,0 +1,305 @@ + +/** + * Applies the :focus-visible polyfill at the given scope. + * A scope in this case is either the top-level Document or a Shadow Root. + * + * @param {(Document|ShadowRoot)} scope + * @see https://github.com/WICG/focus-visible + */ +function applyFocusVisiblePolyfill(scope) { + var hadKeyboardEvent = true; + var hadFocusVisibleRecently = false; + var hadFocusVisibleRecentlyTimeout = null; + + var inputTypesWhitelist = { + text: true, + search: true, + url: true, + tel: true, + email: true, + password: true, + number: true, + date: true, + month: true, + week: true, + time: true, + datetime: true, + 'datetime-local': true + }; + + /** + * Helper function for legacy browsers and iframes which sometimes focus + * elements like document, body, and non-interactive SVG. + * @param {Element} el + */ + function isValidFocusTarget(el) { + if ( + el && + el !== document && + el.nodeName !== 'HTML' && + el.nodeName !== 'BODY' && + 'classList' in el && + 'contains' in el.classList + ) { + return true; + } + return false; + } + + /** + * Computes whether the given element should automatically trigger the + * `focus-visible` class being added, i.e. whether it should always match + * `:focus-visible` when focused. + * @param {Element} el + * @return {boolean} + */ + function focusTriggersKeyboardModality(el) { + var type = el.type; + var tagName = el.tagName; + + if (tagName === 'INPUT' && inputTypesWhitelist[type] && !el.readOnly) { + return true; + } + + if (tagName === 'TEXTAREA' && !el.readOnly) { + return true; + } + + if (el.isContentEditable) { + return true; + } + + return false; + } + + /** + * Add the `focus-visible` class to the given element if it was not added by + * the author. + * @param {Element} el + */ + function addFocusVisibleClass(el) { + if (el.classList.contains('focus-visible')) { + return; + } + el.classList.add('focus-visible'); + el.setAttribute('data-focus-visible-added', ''); + } + + /** + * Remove the `focus-visible` class from the given element if it was not + * originally added by the author. + * @param {Element} el + */ + function removeFocusVisibleClass(el) { + if (!el.hasAttribute('data-focus-visible-added')) { + return; + } + el.classList.remove('focus-visible'); + el.removeAttribute('data-focus-visible-added'); + } + + /** + * If the most recent user interaction was via the keyboard; + * and the key press did not include a meta, alt/option, or control key; + * then the modality is keyboard. Otherwise, the modality is not keyboard. + * Apply `focus-visible` to any current active element and keep track + * of our keyboard modality state with `hadKeyboardEvent`. + * @param {KeyboardEvent} e + */ + function onKeyDown(e) { + if (e.metaKey || e.altKey || e.ctrlKey) { + return; + } + + if (isValidFocusTarget(scope.activeElement)) { + addFocusVisibleClass(scope.activeElement); + } + + hadKeyboardEvent = true; + } + + /** + * If at any point a user clicks with a pointing device, ensure that we change + * the modality away from keyboard. + * This avoids the situation where a user presses a key on an already focused + * element, and then clicks on a different element, focusing it with a + * pointing device, while we still think we're in keyboard modality. + * @param {Event} e + */ + function onPointerDown(e) { + hadKeyboardEvent = false; + } + + /** + * On `focus`, add the `focus-visible` class to the target if: + * - the target received focus as a result of keyboard navigation, or + * - the event target is an element that will likely require interaction + * via the keyboard (e.g. a text box) + * @param {Event} e + */ + function onFocus(e) { + // Prevent IE from focusing the document or HTML element. + if (!isValidFocusTarget(e.target)) { + return; + } + + if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) { + addFocusVisibleClass(e.target); + } + } + + /** + * On `blur`, remove the `focus-visible` class from the target. + * @param {Event} e + */ + function onBlur(e) { + if (!isValidFocusTarget(e.target)) { + return; + } + + if ( + e.target.classList.contains('focus-visible') || + e.target.hasAttribute('data-focus-visible-added') + ) { + // To detect a tab/window switch, we look for a blur event followed + // rapidly by a visibility change. + // If we don't see a visibility change within 100ms, it's probably a + // regular focus change. + hadFocusVisibleRecently = true; + window.clearTimeout(hadFocusVisibleRecentlyTimeout); + hadFocusVisibleRecentlyTimeout = window.setTimeout(function() { + hadFocusVisibleRecently = false; + window.clearTimeout(hadFocusVisibleRecentlyTimeout); + }, 100); + removeFocusVisibleClass(e.target); + } + } + + /** + * If the user changes tabs, keep track of whether or not the previously + * focused element had .focus-visible. + * @param {Event} e + */ + function onVisibilityChange(e) { + if (document.visibilityState === 'hidden') { + // If the tab becomes active again, the browser will handle calling focus + // on the element (Safari actually calls it twice). + // If this tab change caused a blur on an element with focus-visible, + // re-apply the class when the user switches back to the tab. + if (hadFocusVisibleRecently) { + hadKeyboardEvent = true; + } + addInitialPointerMoveListeners(); + } + } + + /** + * Add a group of listeners to detect usage of any pointing devices. + * These listeners will be added when the polyfill first loads, and anytime + * the window is blurred, so that they are active when the window regains + * focus. + */ + function addInitialPointerMoveListeners() { + document.addEventListener('mousemove', onInitialPointerMove); + document.addEventListener('mousedown', onInitialPointerMove); + document.addEventListener('mouseup', onInitialPointerMove); + document.addEventListener('pointermove', onInitialPointerMove); + document.addEventListener('pointerdown', onInitialPointerMove); + document.addEventListener('pointerup', onInitialPointerMove); + document.addEventListener('touchmove', onInitialPointerMove); + document.addEventListener('touchstart', onInitialPointerMove); + document.addEventListener('touchend', onInitialPointerMove); + } + + function removeInitialPointerMoveListeners() { + document.removeEventListener('mousemove', onInitialPointerMove); + document.removeEventListener('mousedown', onInitialPointerMove); + document.removeEventListener('mouseup', onInitialPointerMove); + document.removeEventListener('pointermove', onInitialPointerMove); + document.removeEventListener('pointerdown', onInitialPointerMove); + document.removeEventListener('pointerup', onInitialPointerMove); + document.removeEventListener('touchmove', onInitialPointerMove); + document.removeEventListener('touchstart', onInitialPointerMove); + document.removeEventListener('touchend', onInitialPointerMove); + } + + /** + * When the polfyill first loads, assume the user is in keyboard modality. + * If any event is received from a pointing device (e.g. mouse, pointer, + * touch), turn off keyboard modality. + * This accounts for situations where focus enters the page from the URL bar. + * @param {Event} e + */ + function onInitialPointerMove(e) { + // Work around a Safari quirk that fires a mousemove on whenever the + // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯ + if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') { + return; + } + + hadKeyboardEvent = false; + removeInitialPointerMoveListeners(); + } + + // For some kinds of state, we are interested in changes at the global scope + // only. For example, global pointer input, global key presses and global + // visibility change should affect the state at every scope: + document.addEventListener('keydown', onKeyDown, true); + document.addEventListener('mousedown', onPointerDown, true); + document.addEventListener('pointerdown', onPointerDown, true); + document.addEventListener('touchstart', onPointerDown, true); + document.addEventListener('visibilitychange', onVisibilityChange, true); + + addInitialPointerMoveListeners(); + + // For focus and blur, we specifically care about state changes in the local + // scope. This is because focus / blur events that originate from within a + // shadow root are not re-dispatched from the host element if it was already + // the active element in its own scope: + scope.addEventListener('focus', onFocus, true); + scope.addEventListener('blur', onBlur, true); + + // We detect that a node is a ShadowRoot by ensuring that it is a + // DocumentFragment and also has a host property. This check covers native + // implementation and polyfill implementation transparently. If we only cared + // about the native implementation, we could just check if the scope was + // an instance of a ShadowRoot. + if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) { + // Since a ShadowRoot is a special kind of DocumentFragment, it does not + // have a root element to add a class to. So, we add this attribute to the + // host element instead: + scope.host.setAttribute('data-js-focus-visible', ''); + } else if (scope.nodeType === Node.DOCUMENT_NODE) { + document.documentElement.classList.add('js-focus-visible'); + } +} + +// It is important to wrap all references to global window and document in +// these checks to support server-side rendering use cases +// @see https://github.com/WICG/focus-visible/issues/199 +if (typeof window !== 'undefined' && typeof document !== 'undefined') { + // Make the polyfill helper globally available. This can be used as a signal + // to interested libraries that wish to coordinate with the polyfill for e.g., + // applying the polyfill to a shadow root: + window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill; + + // Notify interested libraries of the polyfill's presence, in case the + // polyfill was loaded lazily: + var event; + + try { + event = new CustomEvent('focus-visible-polyfill-ready'); + } catch (error) { + // IE11 does not support using CustomEvent as a constructor directly: + event = document.createEvent('CustomEvent'); + event.initCustomEvent('focus-visible-polyfill-ready', false, false, {}); + } + + window.dispatchEvent(event); +} + +if (typeof document !== 'undefined') { + // Apply the polyfill to the global document, so that no JavaScript + // coordination is required to use the polyfill in the top-level document: + applyFocusVisiblePolyfill(document); +} diff --git a/docs/src/assets/js/inert-polyfill.js b/docs/src/assets/js/inert-polyfill.js new file mode 100644 index 00000000000..11ae095ccf6 --- /dev/null +++ b/docs/src/assets/js/inert-polyfill.js @@ -0,0 +1,23 @@ +/* inert polyfill + * source: https://cdn.rawgit.com/GoogleChrome/inert-polyfill/v0.1.0/inert-polyfill.min.js + */ +window.addEventListener("load", function () { + function h(a, b, c) { if (0 > b) { if (a.previousElementSibling) { for (a = a.previousElementSibling; a.lastElementChild;)a = a.lastElementChild; return a } return a.parentElement } if (a != c && a.firstElementChild) return a.firstElementChild; for (; null != a;) { if (a.nextElementSibling) return a.nextElementSibling; a = a.parentElement } return null } function g(a) { for (; a && a !== document.documentElement;) { if (a.hasAttribute("inert")) return a; a = a.parentElement } return null } (function (a) { + var b = document.createElement("style"); + b.type = "text/css"; b.styleSheet ? b.styleSheet.cssText = a : b.appendChild(document.createTextNode(a)); document.body.appendChild(b) + })("/*[inert]*/[inert]{position:relative!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}[inert]::before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0}"); var c = 0; document.addEventListener("keydown", function (a) { c = 9 === a.keyCode ? a.shiftKey ? -1 : 1 : 0 }); document.addEventListener("mousedown", + function () { c = 0 }); document.body.addEventListener("focus", function (a) { + var b = a.target, f = g(b); if (f) { + if (document.hasFocus() && 0 !== c) { + var d = document.activeElement, e = new KeyboardEvent("keydown", { keyCode: 9, which: 9, key: "Tab", code: "Tab", keyIdentifier: "U+0009", shiftKey: !!(0 > c), bubbles: !0 }); Object.defineProperty(e, "keyCode", { value: 9 }); document.activeElement.dispatchEvent(e); if (d != document.activeElement) return; for (d = f; ;) { + d = h(d, c, f); if (!d) break; a: { + e = b; if (!(0 > d.tabIndex) && (d.focus(), document.activeElement !== e)) { + e = + !0; break a + } e = !1 + } if (e) return + } + } b.blur(); a.preventDefault(); a.stopPropagation() + } + }, !0); document.addEventListener("click", function (a) { g(a.target) && (a.preventDefault(), a.stopPropagation()) }, !0) +}); \ No newline at end of file diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js new file mode 100644 index 00000000000..1122d78bc9d --- /dev/null +++ b/docs/src/assets/js/main.js @@ -0,0 +1,278 @@ +(function() { + var toc_trigger = document.getElementById("js-toc-label"), + toc = document.getElementById("js-toc-panel"), + body = document.getElementsByTagName("body")[0], + open = true; + + if (toc && matchMedia) { + const mq = window.matchMedia("(max-width: 1023px)"); + mq.addListener(WidthChange); + WidthChange(mq); + } + + // media query change + function WidthChange(mq) { + if (mq.matches && toc_trigger) { + let text = toc_trigger.innerText; + let headingButton = document.createElement("button"); + headingButton.setAttribute("aria-expanded", "false"); + headingButton.innerText = text; + toc_trigger.innerHTML = ""; + + toc_trigger.appendChild(headingButton); + headingButton.innerHTML += ``; + + toc.setAttribute("data-open", "false"); + toc_trigger.setAttribute("aria-expanded", "false"); + headingButton.addEventListener("click", toggleTOC, false); + } else { + toc_trigger.innerHTML = 'Table of Contents'; + toc.setAttribute("data-open", "true"); + } + + } + + function toggleTOC(e) { + if (!open) { + this.setAttribute("aria-expanded", "true"); + toc.setAttribute("data-open", "true"); + open = true; + } else { + this.setAttribute("aria-expanded", "false"); + toc.setAttribute("data-open", "false"); + open = false; + } + } +})(); + +(function() { + var nav_trigger = document.getElementById("nav-toggle"), + nav = document.getElementById("nav-panel"), + body = document.getElementsByTagName("body")[0], + open = false; + + if (matchMedia) { + const mq = window.matchMedia("(max-width: 1023px)"); + mq.addListener(WidthChange); + WidthChange(mq); + } + + // media query change + function WidthChange(mq) { + if (mq.matches) { + nav.setAttribute("data-open", "false"); + nav_trigger.removeAttribute("hidden"); + nav_trigger.setAttribute("aria-expanded", "false"); + nav_trigger.addEventListener("click", togglenav, false); + } else { + nav.setAttribute("data-open", "true"); + nav_trigger.setAttribute("hidden", ""); + nav_trigger.setAttribute("aria-expanded", "true"); + } + + } + + function togglenav(e) { + if (!open) { + this.setAttribute("aria-expanded", "true"); + nav.setAttribute("data-open", "true"); + open = true; + } else { + this.setAttribute("aria-expanded", "false"); + nav.setAttribute("data-open", "false"); + open = false; + } + } +})(); + +(function() { + var index_trigger = document.getElementById("js-docs-index-toggle"), + index = document.getElementById("js-docs-index-list"), + body = document.getElementsByTagName("body")[0], + open = false; + + if (matchMedia) { + const mq = window.matchMedia("(max-width: 1023px)"); + mq.addListener(WidthChange); + WidthChange(mq); + } + + function WidthChange(mq) { + initIndex(); + } + + function toggleindex(e) { + if (!open) { + this.setAttribute("aria-expanded", "true"); + index.setAttribute("data-open", "true"); + open = true; + } else { + this.setAttribute("aria-expanded", "false"); + index.setAttribute("data-open", "false"); + open = false; + } + } + + function initIndex() { + if(index_trigger) { + + index_trigger.removeAttribute("hidden"); + index_trigger.setAttribute("aria-expanded", "false"); + index.setAttribute("data-open", "false"); + + index.setAttribute("data-open", "false"); + index_trigger.addEventListener("click", toggleindex, false); + } + } +})(); + + + +(function() { + var switchers = document.querySelectorAll('.switcher'), + fallbacks = document.querySelectorAll('.switcher-fallback'); + + if (fallbacks != null) { + fallbacks.forEach(el => { + el.setAttribute('hidden', ''); + }); + } + + if (switchers != null) { + switchers.forEach(element => { + element.removeAttribute('hidden'); + const select = element.querySelector('select'); + + select.addEventListener('change', function() { + var selected = this.options[this.selectedIndex]; + url = selected.getAttribute('data-url'); + + window.location.href = url; + }) + }); + } +})(); + +// add "Open in Playground" button to code blocks +(function() { + let blocks = document.querySelectorAll('pre[class*="language-"]'); + if (blocks) { + blocks.forEach(function(block) { + let button = document.createElement("a"); + button.classList.add('c-btn--playground'); + button.classList.add('c-btn'); + button.classList.add('c-btn--secondary'); + button.setAttribute("href", "#"); + button.innerText = "Open in Playground"; + block.appendChild(button); + }); + } +})(); + + + +// add utilities +var util = { + keyCodes: { + UP: 38, + DOWN: 40, + LEFT: 37, + RIGHT: 39, + HOME: 36, + END: 35, + ENTER: 13, + SPACE: 32, + DELETE: 46, + TAB: 9, + }, + + generateID: function(base) { + return base + Math.floor(Math.random() * 999); + }, + + getDirectChildren: function(elm, selector) { + return Array.prototype.filter.call(elm.children, function(child) { + return child.matches(selector); + }); + }, +}; + +(function(w, doc, undefined) { + var CollapsibleIndexOptions = { + allCollapsed: false, + icon: '', + }; + var CollapsibleIndex = function(inst, options) { + var _options = Object.assign(CollapsibleIndexOptions, options); + var el = inst; + var indexToggles = el.querySelectorAll(".docs-index > ul > .docs-index__item[data-has-children] > a"); // only top-most level + var indexPanels = el.querySelectorAll(".docs-index > ul > .docs-index__item>[data-child-list]"); // the list + var accID = util.generateID("c-index-"); + + var init = function() { + el.classList.add("index-js"); + + setupindexToggles(indexToggles); + setupindexPanels(indexPanels); + }; + + + var setupindexToggles = function(indexToggles) { + Array.from(indexToggles).forEach(function(item, index) { + var $this = item; + + $this.setAttribute('role', 'button'); + $this.setAttribute("id", accID + "__item-" + index); + $this.innerHTML += _options.icon; + + if (_options.allCollapsed) $this.setAttribute("aria-expanded", "false"); + else $this.setAttribute("aria-expanded", "true"); + + $this.addEventListener("click", function(e) { + e.preventDefault(); + togglePanel($this); + }); + }); + }; + + var setupindexPanels = function(indexPanels) { + Array.from(indexPanels).forEach(function(item, index) { + let $this = item; + + $this.setAttribute("id", accID + "__list-" + index); + $this.setAttribute( + "aria-labelledby", + accID + "__item-" + index + ); + if (_options.allCollapsed) $this.setAttribute("aria-hidden", "true"); + else $this.setAttribute("aria-hidden", "false"); + }); + }; + + var togglePanel = function(toggleButton) { + var thepanel = toggleButton.nextElementSibling; + + if (toggleButton.getAttribute("aria-expanded") == "true") { + toggleButton.setAttribute("aria-expanded", "false"); + thepanel.setAttribute("aria-hidden", "true"); + } else { + toggleButton.setAttribute("aria-expanded", "true"); + thepanel.setAttribute("aria-hidden", "false"); + } + }; + + + init.call(this); + return this; + }; // CollapsibleIndex() + + w.CollapsibleIndex = CollapsibleIndex; +})(window, document); + +// init +var index = document.getElementById('docs-index'); +if (index) { + index = new CollapsibleIndex(index, { + allCollapsed: false + }); +} diff --git a/docs/src/assets/js/search.js b/docs/src/assets/js/search.js new file mode 100644 index 00000000000..e9f3a5e58f7 --- /dev/null +++ b/docs/src/assets/js/search.js @@ -0,0 +1,122 @@ +/** + * @fileoverview Search functionality + * @author Nicholas C. Zakas + */ + +//----------------------------------------------------------------------------- +// Imports +//----------------------------------------------------------------------------- + +import algoliasearch from "./algoliasearch.js"; + +//----------------------------------------------------------------------------- +// Initialization +//----------------------------------------------------------------------------- + +// search +const client = algoliasearch('L633P0C2IR', 'bb6bbd2940351f3afc18844a6b06a6e8'); +const index = client.initIndex('eslint'); + +// page +const resultsElement = document.querySelector('#search-results'); +const searchInput = document.querySelector('#search'); + +//----------------------------------------------------------------------------- +// Helpers +//----------------------------------------------------------------------------- + +/** + * Executes a search against the Algolia index. + * @param {string} query The search query to execute. + * @returns {Promise>} The search results. + */ +function fetchSearchResults(query) { + return index.search(query, { + facetFilters: ["tags:docs"] + }).then(({ hits }) => hits); +} + +/** + * Removes any current search results from the display. + * @returns {void} + */ +function clearSearchResults() { + while (resultsElement.firstChild) { + resultsElement.removeChild(resultsElement.firstChild); + } +} + +/** + * Displays the given search results in the page. + * @param {Array} results The search results to display. + * @returns {void} + */ +function displaySearchResults(results) { + + clearSearchResults(); + + if (results.length) { + + const list = document.createElement("ul"); + resultsElement.append(list); + + for (const result of results) { + const listItem = document.createElement('li'); + listItem.innerHTML = ` + ${result.hierarchy.lvl0}
    + ${result._highlightResult.hierarchy.lvl0.value} + `.trim(); + list.append(listItem); + } + } else { + resultsElement.innerHTML = "No results found."; + } + +} + +//----------------------------------------------------------------------------- +// Event Handlers +//----------------------------------------------------------------------------- + + + + +// listen for input changes +searchInput.addEventListener('keyup', function (event) { + const query = searchInput.value; + + if (query.length > 2) { + fetchSearchResults(query) + .then(displaySearchResults) + .catch(clearSearchResults); + } else { + clearSearchResults(); + } +}); + + // add an event listenrer for a click on the search link + // btnHandler('#search-link', function(){ + + // // get the data + // fetch('/search.json').then(function(response) { + // return response.json(); + // }).then(function(response) { + + // searchIndex = response.search; + + // }); + + // searchUI.toggleAttribute('hidden'); + // searchInput.focus(); + + // // listen for input changes + // searchInput.addEventListener('keyup', function(event) { + // const str = searchInput.value; + // if(str.length > 2) { + // find(str); + // } else { + // clearResults(); + // } + // }); + + // }); diff --git a/docs/src/assets/js/tabs.js b/docs/src/assets/js/tabs.js new file mode 100644 index 00000000000..a2215938538 --- /dev/null +++ b/docs/src/assets/js/tabs.js @@ -0,0 +1,337 @@ +"use strict"; +if (typeof Object.assign != "function") { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { + // .length of function is 2 + + if (target == null) { + // TypeError if undefined or null + throw new TypeError( + "Cannot convert undefined or null to object" + ); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { + // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if ( + Object.prototype.hasOwnProperty.call( + nextSource, + nextKey + ) + ) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +// add utilities; borrowed from: https://scottaohara.github.io/a11y_tab_widget/ +var util = { + keyCodes: { + UP: 38, + DOWN: 40, + LEFT: 37, + RIGHT: 39, + HOME: 36, + END: 35, + ENTER: 13, + SPACE: 32, + DELETE: 46, + TAB: 9 + }, + + generateID: function (base) { + return base + Math.floor(Math.random() * 999); + }, + + + getUrlHash: function () { + return window.location.hash.replace('#', ''); + }, + + /** + * Use history.replaceState so clicking through Tabs + * does not create dozens of new history entries. + * Browser back should navigate to the previous page + * regardless of how many Tabs were activated. + * + * @param {string} hash + */ + setUrlHash: function (hash) { + if (history.replaceState) { + history.replaceState(null, '', '#' + hash); + } else { + location.hash = hash; + } + } +}; + + + + +(function (w, doc, undefined) { + + var ARIAaccOptions = { + manual: true, + open: 0 + } + + var ARIAtabs = function (inst, options) { + var _options = Object.assign(ARIAaccOptions, options); + var el = inst; + var tablist = el.querySelector("[data-tablist]"); + var tabs = Array.from(el.querySelectorAll("[data-tab]")); + var tabpanels = Array.from(el.querySelectorAll("[data-tabpanel]")); + var tabsID = util.generateID('ps__tabs-'); + var orientation = el.getAttribute('data-tabs-orientation'); + var currentIndex = _options.open; + var selectedTab = currentIndex; + var manual = _options.manual; + + el.setAttribute('id', tabsID); + + var init = function () { + el.classList.add('js-tabs'); + tablist.removeAttribute('hidden'); + setupTabList(); + setupTabs(); + setupTabPanels(); + }; + + var setupTabList = function () { + tablist.setAttribute("role", "tablist"); + if (orientation == 'vertical') tablist.setAttribute("aria-orientation", "vertical"); + } + + var setupTabs = function () { + + tabs.forEach((tab, index) => { + tab.setAttribute('role', 'tab'); + // each tab needs an ID that will be used to label its corresponding panel + tab.setAttribute('id', tabsID + '__tab-' + index); + tab.setAttribute('data-controls', tabpanels[index].getAttribute('id')); + + // first tab is initially active + if (index === currentIndex) { + selectTab(tab); + // updateUrlHash(); + } + + if (tab.getAttribute('data-controls') === util.getUrlHash()) { + currentIndex = index; + selectedTab = index; + selectTab(tab); + } + + tab.addEventListener('click', (e) => { + e.preventDefault(); + currentIndex = index; + selectedTab = index; + focusCurrentTab(); + selectTab(tab); + // updateUrlHash(); + }, false); + + tab.addEventListener('keydown', (e) => { + tabKeyboardRespond(e, tab); + }, false); + }); + } + + var focusCurrentTab = function () { + tabs[currentIndex].focus(); + } + + var updateUrlHash = function () { + var active = tabs[selectedTab]; + util.setUrlHash(active.getAttribute('data-controls')); + }; + + var selectTab = function (tab) { + // unactivate all other tabs + tabs.forEach(tab => { + tab.setAttribute('aria-selected', 'false'); + tab.setAttribute('tabindex', '-1'); + }); + //activate current tab + tab.setAttribute('aria-selected', 'true'); + tab.setAttribute('tabindex', '0'); + + // activate corresponding panel + showTabpanel(tab); + } + + var setupTabPanels = function () { + tabpanels.forEach((tabpanel, index) => { + tabpanel.setAttribute('role', 'tabpanel'); + tabpanel.setAttribute('tabindex', '-1'); + tabpanel.setAttribute('hidden', ''); + + if (index == currentIndex) { + tabpanel.removeAttribute('hidden'); + } + + tabpanel.addEventListener('keydown', (e) => { + panelKeyboardRespond(e); + }, false); + + tabpanel.addEventListener("blur", () => { + tabpanel.setAttribute('tabindex', '-1'); + }, false); + }); + } + + + var panelKeyboardRespond = function (e) { + var keyCode = e.keyCode || e.which; + + switch (keyCode) { + case util.keyCodes.TAB: + tabpanels[currentIndex].setAttribute('tabindex', '-1'); + break; + + default: + break; + } + } + + + var showTabpanel = function (tab) { + tabpanels.forEach((tabpanel, index) => { + tabpanel.setAttribute('hidden', ''); + tabpanel.removeAttribute('tabindex'); + + if (index == currentIndex) { + tabpanel.removeAttribute('hidden'); + tabpanel.setAttribute('aria-labelledby', tabs[currentIndex].getAttribute('id')); + tabpanel.setAttribute('tabindex', '0'); + } + }); + } + + var incrementcurrentIndex = function () { + if (currentIndex < tabs.length - 1) { + return ++currentIndex; + } + else { + currentIndex = 0; + return currentIndex; + } + }; + + + var decrementcurrentIndex = function () { + if (currentIndex > 0) { + return --currentIndex; + } + else { + currentIndex = tabs.length - 1; + return currentIndex; + } + }; + + + + var tabKeyboardRespond = function (e, tab) { + var firstTab = tabs[0]; + var lastTab = tabs[tabs.length - 1]; + + var keyCode = e.keyCode || e.which; + + switch (keyCode) { + case util.keyCodes.UP: + case util.keyCodes.LEFT: + e.preventDefault(); + decrementcurrentIndex(); + focusCurrentTab(); + + if (!manual) { + selectedTab = currentIndex; + selectTab(tabs[selectedTab]); + // updateUrlHash(); + } + + break; + + + case util.keyCodes.DOWN: + case util.keyCodes.RIGHT: + e.preventDefault(); + incrementcurrentIndex(); + focusCurrentTab(); + + if (!manual) { + selectedTab = currentIndex; + selectTab(tabs[selectedTab]); + // updateUrlHash(); + } + + break; + + + case util.keyCodes.ENTER: + case util.keyCodes.SPACE: + e.preventDefault(); + selectedTab = currentIndex; + selectTab(tabs[selectedTab]); + // updateUrlHash(); + + break; + + + case util.keyCodes.TAB: + tabpanels[selectedTab].setAttribute('tabindex', '0'); + currentIndex = selectedTab; + + break; + + + case util.keyCodes.HOME: + e.preventDefault(); + firstTab.focus(); + // updateUrlHash(); + + break; + + + case util.keyCodes.END: + e.preventDefault(); + lastTab.focus(); + // updateUrlHash(); + + break; + } + + } + + init.call(this); + return this; + }; // ARIAtabs() + + w.ARIAtabs = ARIAtabs; + +})(window, document); + + +var tabsInstance = "[data-tabs]"; +var els = document.querySelectorAll(tabsInstance); +var allTabs = []; + +// Generate all tabs instances +for (var i = 0; i < els.length; i++) { + var nTabs = new ARIAtabs(els[i], { manual: true }); // if manual is set to false, the tabs open on focus without needing an ENTER or SPACE press + allTabs.push(nTabs); +} diff --git a/docs/src/assets/js/themes.js b/docs/src/assets/js/themes.js new file mode 100644 index 00000000000..f080adcc9e6 --- /dev/null +++ b/docs/src/assets/js/themes.js @@ -0,0 +1,57 @@ +/* theme toggle buttons */ +(function() { + var enableToggle = function(btn) { + btn.setAttribute("aria-pressed", "true"); + } + + var disableToggle = function(btn) { + btn.setAttribute("aria-pressed", "false"); + } + + + let theme = window.localStorage.getItem("theme"); + document.documentElement.setAttribute('data-theme', theme); + if (!theme) document.documentElement.setAttribute('data-theme', 'light'); + + document.addEventListener('DOMContentLoaded', function() { + var switcher = document.getElementById('js-theme-switcher'); + switcher.removeAttribute('hidden'); + + var light_theme_toggle = document.getElementById('light-theme-toggle'), + dark_theme_toggle = document.getElementById('dark-theme-toggle'); + + // get any previously-chosen themes + var theme = window.localStorage.getItem("theme"); + if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-theme', 'dark'); + } + else if (theme) document.documentElement.setAttribute('data-theme', theme); + + if (theme == "light") { + enableToggle(light_theme_toggle); + disableToggle(dark_theme_toggle); + } else if (theme == "dark") { + enableToggle(dark_theme_toggle); + disableToggle(light_theme_toggle); + } + + light_theme_toggle.addEventListener("click", function() { + enableToggle(light_theme_toggle); + theme = this.getAttribute('data-theme'); + document.documentElement.setAttribute('data-theme', theme); + window.localStorage.setItem("theme", theme); + + disableToggle(dark_theme_toggle); + }, false); + + dark_theme_toggle.addEventListener("click", function() { + enableToggle(dark_theme_toggle); + theme = this.getAttribute('data-theme'); + document.documentElement.setAttribute('data-theme', theme); + window.localStorage.setItem("theme", theme); + + disableToggle(light_theme_toggle); + }, false); + }, false); + +})(); diff --git a/docs/src/assets/scss/_carbon-ads.scss b/docs/src/assets/scss/_carbon-ads.scss new file mode 100644 index 00000000000..b5812dc0ee8 --- /dev/null +++ b/docs/src/assets/scss/_carbon-ads.scss @@ -0,0 +1,120 @@ +.hero-ad { + @media all and (max-width: 800px) { + display: none; + } +} + +#carbonads * { + margin: initial; + padding: initial; +} + +#carbonads { + display: inline-block; + margin: 2rem 0;; + padding: .6em; + + font-size: 16px; + line-height: 1.35; + overflow: hidden; + border-radius: 4px; + background-color: var(--body-background-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1); + + .docs-main & { + margin: 0 0 2rem; + } + + @media all and (max-width: 800px) { + display: none !important; + } +} + +.jumbotron #carbonads { + border: solid 1px hsla(250, 20%, 50%, .6); + background-color: hsla(0, 0%, 70%, .15); +} + +#carbonads a { + font-weight: 500; + color: inherit; +} + +#carbonads a:hover { + text-decoration: none; + color: inherit; +} + +.jumbotron #carbonads a { + color: #eee; +} + +.jumbotron #carbonads a:hover { + color: #ccc; +} + +#carbonads span { + display: block; + position: relative; + + overflow: hidden; +} + +#carbonads .carbon-wrap { + display: flex; + + flex-direction: column; + max-width: 130px; +} + +#carbonads .carbon-img img { + display: block; +} + +#carbonads .carbon-text { + margin-top: 10px; + + font-size: 14px; + text-align: left; +} + +#carbonads .carbon-poweredby { + display: block; + margin-top: 10px; + font-size: 10px; + line-height: 1; + letter-spacing: 1px; + text-transform: uppercase; +} + +@media only screen and (min-width: 320px) and (max-width: 759px) { + #carbonads { + margin-top: 0; + + font-size: 12px; + } + + #carbonads .carbon-wrap { + display: flex; + + flex-direction: row; + max-width: 330px; + } + + #carbonads .carbon-text { + margin: 0 0 14px 10px; + + font-size: 14px; + text-align: left; + } + + #carbonads .carbon-poweredby { + position: absolute; + bottom: 0; + left: 142px; + + font-size: 8px; + } +} diff --git a/docs/src/assets/scss/_docs-footer.scss b/docs/src/assets/scss/_docs-footer.scss new file mode 100644 index 00000000000..950aa51834e --- /dev/null +++ b/docs/src/assets/scss/_docs-footer.scss @@ -0,0 +1,48 @@ +.docs-footer { + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: space-between; + align-items: baseline; + + @media all and (max-width: 800px) { + padding: 1.5rem 0 4rem; + } +} + +.copyright p { + margin: 0; +} + +.docs-socials-and-legal { + display: flex; + flex-direction: column; + gap: 1rem; + + @media all and (max-width: 800px) { + text-align: center; + } +} + +.docs-switchers { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + + .theme-switcher, + .language-switcher { + flex: 1 1 240px; + } + + .theme-switcher { + @media all and (max-width: 800px) { + justify-content: center; + } + } + + .language-switcher { + @media all and (max-width: 800px) { + justify-content: center; + } + } +} diff --git a/docs/src/assets/scss/_docs-header.scss b/docs/src/assets/scss/_docs-header.scss new file mode 100644 index 00000000000..6ba51cec00f --- /dev/null +++ b/docs/src/assets/scss/_docs-header.scss @@ -0,0 +1,40 @@ +.site-header { + padding: .75rem 0; + border-top: 4px solid var(--link-color); + border-bottom: 1px solid var(--divider-color); + border-block-start: 4px solid var(--link-color); + border-block-end: 1px solid var(--divider-color); + + .docs-wrapper { + display: grid; + align-items: start; + padding-top: 0; + padding-bottom: 0; + + padding-block-start: 0; + padding-block-end: 0; + + @media all and (min-width: 1024px) { + justify-content: space-between; + } + } +} + +.logo-link { + display: inline-flex; + justify-self: start; + flex: none; + place-content: center; + grid-column: 1 / -1; + grid-row: 1; + padding: .5rem 0; +} + +.logo svg { + display: inline-block; + margin-bottom: -4px; + margin-block-end: -4px; + width: 100%; + max-width: 100px; + height: auto; +} diff --git a/docs/src/assets/scss/_docs-typography.scss b/docs/src/assets/scss/_docs-typography.scss new file mode 100644 index 00000000000..d704721c282 --- /dev/null +++ b/docs/src/assets/scss/_docs-typography.scss @@ -0,0 +1,35 @@ +.docs-main { + + h6, + .h6 { + font-size: var(--step-0); + } + + h5, + .h5 { + font-size: var(--step-0); // 20 + } + + h4, + .h4 { + font-size: var(--step-1); // 24 + } + + h3, + .h3 { + font-size: var(--step-2); + line-height: 1.2; + } + + h2, + .h2 { + font-size: var(--step-3); + line-height: 1.2; + } + + h1, + .h1 { + font-size: var(--step-4); + line-height: 1.2; + } +} diff --git a/docs/src/assets/scss/_docs.scss b/docs/src/assets/scss/_docs.scss new file mode 100644 index 00000000000..fc48d66e8fc --- /dev/null +++ b/docs/src/assets/scss/_docs.scss @@ -0,0 +1,127 @@ +.docs { + max-width: 1700px; + margin: 0 auto; +} + +.docs-ad { + flex: 1; +} + +.docs-wrapper { + padding: 0 calc(1rem + 1vw); + flex: 1; + + @media all and (min-width: 1023px) { + display: grid; + grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); + grid-gap: 0rem; + align-items: stretch; + } +} + +.docs-left-sidebar { + grid-column: 1 / 2; + grid-row: 1 / 2; + padding: calc(1rem + 1vw) 0; + font-size: .875rem; + + @media all and (min-width: 1023px) { + border-right: 1px solid var(--divider-color); + border-right: 1px solid var(--divider-color); + padding-right: calc(1rem + 1vw); + padding-inline-end: calc(1rem + 1vw); + } + + + + display: grid; + grid-auto-rows: max-content; + align-items: start; +} + +.docs-content { + grid-column: 2 / 3; + + @media all and (min-width: 800px) { + display: grid; + grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); + grid-gap: 2rem; + } + + @media all and (min-width: 1023px) { + padding: calc(2rem + 1vw) 0; + } + +} + +.docs-main { + flex: 1 1 65ch; + + @media all and (min-width: 1023px) { + padding: 0 2rem; + } +} + + +.docs-right-sidebar { + grid-column: 2 / 3; + + display: flex; + flex-direction: column; + + flex: 1 1 200px; +} + +.docs-toc { + flex: 1; + align-self: center; +} + +.docs-edit-link { + border-top: 1px solid var(--divider-color); + padding-top: 1.5rem; + padding-block-start: 1.5rem; + margin: 3rem 0; +} + +div[data-correct-code], +div[data-incorrect-code] { + position: relative; + + &::after { + position: absolute; + top: -22px; + right: -22px; + offset-inline-end: -22px; + offset-block-start: -22px; + } +} + +div[data-correct-code] { + &::after { + content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); + } +} + +div[data-incorrect-code] { + &::after { + content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); + } +} + +pre[class*="language-"] { + position: relative; +} + +.c-btn.c-btn--playground { + position: absolute; + font-size: var(--step--1); + bottom: .5rem; + right: .5rem; + offset-block-end: .5rem; + offset-inline-end: .5rem; + + @media all and (max-width: 768px) { + display: none; + } +} diff --git a/docs/src/assets/scss/_forms.scss b/docs/src/assets/scss/_forms.scss new file mode 100644 index 00000000000..a6527d08593 --- /dev/null +++ b/docs/src/assets/scss/_forms.scss @@ -0,0 +1,55 @@ +.c-custom-select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + min-width: 0px; + padding: .625rem .875rem; + padding-right: calc(.875rem * 3); + padding-inline-end: calc(.875rem * 3); + font: inherit; + color: var(--body-text-color); + color: inherit; + line-height: 1.3; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + box-shadow: var(--shadow-xs); + background-color: var(--body-background-color); + background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.60938L10 12.6094L15 7.60938' stroke='%23667085' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"), linear-gradient(to bottom, var(--body-background-color) 0%, var(--body-background-color) 100%); + background-repeat: no-repeat, repeat; + background-position: right calc(.875rem * 1.5) top 50%, 0 0; + background-size: 1em auto, 100%; +} + +.label__text.label__text { + display: block; + display: flex; + font-size: .875rem; + color: inherit; + align-items: center; + gap: .5rem; + font-size: .875rem; + font-family: var(--text-font); + color: inherit; + font-weight: 400; + line-height: 1.5; + margin-bottom: .25rem; + margin-block-end: .25rem; +} + +input { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: .625rem .875rem; + font: inherit; + font-size: 1rem; + display: block; + min-width: 0; + // width: 100%; + max-width: 100%; + background-color: var(--body-background-color); + color: inherit; +} diff --git a/docs/src/assets/scss/_foundations.scss b/docs/src/assets/scss/_foundations.scss new file mode 100644 index 00000000000..4551eea116f --- /dev/null +++ b/docs/src/assets/scss/_foundations.scss @@ -0,0 +1,336 @@ +::selection { + background-color: var(--color-brand); + color: #fff; +} + +h1:target, +h2:target, +h3:target, +h4:target, +h5:target, +h6:target { + background-color: var(--lighter-background-color); +} + +*:focus { + outline: none; +} + +*:focus-visible { + outline: 2px solid var(--outline-color); + outline-offset: 3px; +} + +*.focus-visible { + outline: 2px solid var(--outline-color); + outline-offset: 3px; +} + +*:focus:not(:focus-visible) { + outline: 1px solid transparent; + box-shadow: none; +} + +.js-focus-visible *:focus:not(.focus-visible) { + outline: 1px solid transparent; + box-shadow: none; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + accent-color: var(--link-color); + background-color: var(--body-background-color); + height: 100%; + font-family: var(--text-font); + overflow-x: hidden; + caret-color: var(--link-color); +} + +body { + position: relative; + margin: 0 auto; + line-height: 1.5; + display: flex; + flex-direction: column; + min-height: 100%; + background-color: var(--body-background-color); + color: var(--body-text-color); +} + +#skip-link { + position: fixed; + top: -30em; + left: 0; + right: auto; + offset-block-start: -30em; + offset-inline-start: 0; + offset-inline-end: auto; + + z-index: 999; + transition: top .1s linear; + + &:focus { + outline: 2px solid transparent; + top: 2px; + offset-block-start: 2px; + } + + &:focus-visible { + outline: 2px solid transparent; + top: 2px; + offset-block-start: 2px; + } +} + +main { + flex: 1; + + &:focus { + outline: none; + } + + &:target { + outline: none; + } +} + +hr { + border: none; + border-top: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); + background: none; + height: 0; + margin: 2rem 0; +} + +.content-container { + width: 100%; + margin: 0 auto; + padding: var(--space-xl-3xl) calc(1rem + 1vw); +} + + +.section-head { + .section-supporting-text { + text-align: center; + max-width: 768px; + margin: 0 auto var(--space-l-2xl); + } +} + +.section-foot { + margin-top: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); + + .section-supporting-text { + text-align: center; + font-size: var(--step--1); + max-width: 768px; + margin: 0 auto; + } +} + +.section-title { + margin-bottom: 1rem; + margin-block-end: 1rem; +} + +.section-supporting-text { + font-size: var(--step-1); +} + + +code, +pre { + font-family: var(--mono-font); +} + +code { + color: var(--link-color); + + pre & { + color: unset; + } +} + +p:empty { + display: none; + margin: 0; +} + +.c-icon { + color: var(--icon-color); + flex: none; + transition: all .2s linear; + + @media (-ms-high-contrast: active) { + color: windowText; + } + + @media (forced-colors: active) { + color: canvasText; + } +} + +table { + width: 100%; + margin: 2.5rem 0; + border-collapse: collapse; + border: 1px solid var(--divider-color); + + td { + padding: .25rem .5rem; + border: 1px solid var(--divider-color); + } + + th { + background-color: var(--lightest-background-color); + padding: .25rem .5rem; + } +} + +.c-btn, +button, +a { + .c-icon:hover { + color: var(--link-color); + } +} + + +a { + color: var(--link-color); + transition: color .1s linear; + + .side-header & { + color: inherit; + text-decoration: none; + } +} + +svg { + flex: none; + transition: color .1s linear; +} + +p { + margin: 0 0 1.5em; + + :matches(nav, .posts-collection) & { + margin-bottom: .75em; + margin-block-end: .75em; + } +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + + +ul, +ol { + margin-top: 0; + margin-block-start: 0; + + li { + margin: 0 0 .75em; + } + + .person__bio & { + padding-left: 1.5rem; + padding-inline-start: 1.5rem; + } +} + +.docs-main ul, +.post-main ul, +.docs-main ol, +.post-main ol { + margin: 1rem 0; +} + +ul[role="list"] { + list-style: none; + margin: 0; + padding: 0; + + li { + margin: 0; + } +} + +ol { + list-style: decimal; + + li::marker { + color: var(--link-color); + } +} + +p:empty { + margin: 0; + display: none; +} + +figure { + margin-bottom: 4rem; + margin-block-end: 4rem; + + img { + margin-bottom: 1rem; + margin-block-end: 1rem; + } + + figcaption { + color: var(--grey); + } +} + +img { + display: block; + position: relative; + max-width: 100%; + height: auto; +} + +nav { + /* rarely do we display bullets for lists in navigation */ + ol, + ul { + list-style: none; + margin: 0; + padding: 0; + } +} + + +.video { + width: 90%; + max-width: 1400px; + margin: 2em auto; + + iframe { + aspect-ratio: 16 / 9; + width: 100%; + height: auto; + } +} + +@media (prefers-reduced-motion: no-preference) { + *:focus-visible, + *.focus-visible { + transition: outline-offset .15s linear; + outline-offset: 3px; + } +} diff --git a/docs/src/assets/scss/_header.scss b/docs/src/assets/scss/_header.scss new file mode 100644 index 00000000000..199c42bc2a4 --- /dev/null +++ b/docs/src/assets/scss/_header.scss @@ -0,0 +1,40 @@ +.site-header { + padding: .75rem 0; + border-top: 4px solid var(--link-color); + border-bottom: 1px solid var(--divider-color); + border-block-start: 4px solid var(--link-color); + border-block-end: 1px solid var(--divider-color); + + .content-container { + display: grid; + align-items: start; + padding-top: 0; + padding-bottom: 0; + + padding-block-start: 0; + padding-block-end: 0; + + @media all and (min-width: 680px) { + justify-content: space-between; + } + } +} + +.logo-link { + display: inline-flex; + justify-self: start; + flex: none; + place-content: center; + grid-column: 1 / -1; + grid-row: 1; + padding: .5rem 0; +} + +.logo svg { + display: inline-block; + margin-bottom: -4px; + margin-block-end: -4px; + width: 100%; + max-width: 100px; + height: auto; +} diff --git a/docs/src/assets/scss/_prism-syntax-highlighter.scss b/docs/src/assets/scss/_prism-syntax-highlighter.scss new file mode 100644 index 00000000000..e4c51087d16 --- /dev/null +++ b/docs/src/assets/scss/_prism-syntax-highlighter.scss @@ -0,0 +1,125 @@ +code[class*="language-"], +pre[class*="language-"] { + font-family: var(--mono-font), Consolas, + Monaco, + 'Andale Mono', + 'Ubuntu Mono', + monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1.5rem; + margin: 1.5rem 0; + overflow: auto; + background-color: var(--color-neutral-50); + border-radius: var(--border-radius); + + background-color: var(--lightest-background-color); + color: var(--color-neutral-900); + + [data-theme="dark"] & { + color: var(--color-neutral-100); + } +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background-color: var(--lightest-background-color); +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6E7F8E; + + [data-theme="dark"] & { + color: #8E9FAE; + } +} + + +.token.namespace { + opacity: .7; +} + + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: var(--link-color); +} + + +.token.atrule, +.token.attr-value, +.token.keyword { + color: var(--link-color); +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +pre { + counter-reset: lineNumber; +} + +code .highlight-line:before { + -webkit-user-select: none; + color: var(--icon-color); + content: counter(lineNumber); + counter-increment: lineNumber; + display: inline-block; + font-variant-numeric: tabular-nums; + margin-right: 1.2em; + padding-right: 1.2em; + margin-inline-end: 1.2em; + padding-inline-end: 1.2em; + text-align: right; + width: 2.4em; +} diff --git a/docs/src/assets/scss/_site-footer.scss b/docs/src/assets/scss/_site-footer.scss new file mode 100644 index 00000000000..4a1e2cdc281 --- /dev/null +++ b/docs/src/assets/scss/_site-footer.scss @@ -0,0 +1,65 @@ +.site-footer { + text-align: center; + background-color: var(--footer-background-color); + border-top: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); +} + +.footer-cta { + .logo { + margin-bottom: 2.5rem; + margin-block-end: 2.5rem; + } + + .section-supporting-text { + margin-bottom: 2.5rem; + margin-block-end: 2.5rem; + } + + .eslint-actions { + justify-content: center; + } +} + +.footer-legal-links { + ul { + li { + display: inline-block; + margin-right: .5rem; + margin-inline-end: .5rem; + + &:not(:last-of-type)::after { + content: "|"; + margin-left: .5rem; + margin-inline-start: .5rem; + } + } + } +} + +.footer-legal-section { + font-size: var(--step--1); + padding: 2rem 1rem; +} + +.copyright { + max-width: 1100px; + margin: 0 auto; +} + +.footer-middle { + padding-top: 2rem; + padding-bottom: 2rem; + padding-block-start: 2rem; + padding-block-end: 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + + @media all and (min-width: 768px) { + flex-direction: row; + justify-content: space-between; + } + +} diff --git a/docs/src/assets/scss/_typography.scss b/docs/src/assets/scss/_typography.scss new file mode 100644 index 00000000000..cd75ed3de3c --- /dev/null +++ b/docs/src/assets/scss/_typography.scss @@ -0,0 +1,93 @@ +body { + font-size: var(--step-0); + line-height: 1.5; +} + +.eyebrow { + color: var(--link-color); + font-size: 1rem; + font-weight: 500; + display: block; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--display-font); + color: var(--headings-color); + font-weight: 500; + margin-top: 0; + margin-block-start: 0; + +} + +h2, +h3, +h4, +h5, +h6 { + .post-main &, + .docs-main &, + .components-main & { + margin-top: 3rem; + margin-bottom: 1.5rem; + margin-block-start: 3rem; + margin-block-end: 1.5rem; + + &:first-child { + margin-top: 0; + margin-block-start: 0; + } + } +} + + +h6, +.h6 { + font-size: var(--step-0); +} + +h5, +.h5 { + font-size: var(--step-1); +} + +h4, +.h4 { + font-size: var(--step-2); +} + +h3, +.h3 { + font-size: var(--step-3); + line-height: 1.2; +} + +h2, +.h2 { + font-size: var(--step-4); + line-height: 1.2; +} + +h1, +.h1 { + font-size: var(--step-5); + line-height: 1.2; +} + +.h0 { + font-size: var(--step-6); + line-height: 1.2; +} + +small, +caption, +cite, +figcaption { + font-size: var(--step--1); +} diff --git a/docs/src/assets/scss/_utilities.scss b/docs/src/assets/scss/_utilities.scss new file mode 100644 index 00000000000..ede62ca53a9 --- /dev/null +++ b/docs/src/assets/scss/_utilities.scss @@ -0,0 +1,174 @@ +.grid { + @media all and (min-width: 1023px) { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 2rem; + align-items: start; + } +} + +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(100%); + height: 1px; + overflow: + hidden; + position: absolute; + width: 1px; + white-space: nowrap; +} + +[hidden] { + display: none !important; +} + +.mobile-only { + @media all and (min-width: 1023px) { + display: none; + } +} + +.desktop-only { + @media all and (max-width: 1023px) { + display: none; + } +} + +.text.text { + font-size: inherit; + color: inherit; + font: inherit; + font-family: var(--text-font); + margin: 0; +} + +.color-brand { + color: var(--link-color); +} + +.font-weight-medium { + font-weight: 500; +} + +.center-text { + text-align: center; + grid-column: 1 / -1; +} + +.text-dark { + color: var(--headings-color); +} + +.divider { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); +} + +.fs-step--1 { + font-size: .875rem; +} + +.fs-step-0 { + font-size: var(--step-0); +} + +.fs-step-1 { + font-size: var(--step-1); +} + +.fs-step-2 { + font-size: var(--step-2); +} + +.fs-step-3 { + font-size: var(--step-3); +} + +.fs-step-4 { + font-size: var(--step-4); +} + +.fs-step-5 { + font-size: var(--step-5); +} + +.fs-step-6 { + font-size: var(--step-6); +} + +.grid--center-items { + align-items: center; +} + +.span-1-3 { + grid-column: 1 / 4; +} + +.span-1-4 { + grid-column: 1 / 5; +} + +.span-1-5 { + grid-column: 1 / 6; +} + +.span-1-6 { + grid-column: 1 / 7; +} + +.span-1-7 { + grid-column: 1 / 8; +} + + +.span-1-12 { + grid-column: 1 / -1; +} + +.span-4-12 { + grid-column: 4 / 13; +} + +.span-6-12 { + grid-column: 6 / 13; +} + +.span-7-12 { + grid-column: 7 / 13; +} + +.span-8-12 { + grid-column: 8 / 13; +} + +.span-10-12 { + grid-column: 10 / 13; +} + +.span-11-12 { + grid-column: 11 / 13; +} + +.span-4-9 { + grid-column: 4 / 10; +} + +.span-4-11 { + grid-column: 4 / 11; +} + +.span-5-12 { + grid-column: 5 / 12; +} + +.span-3-10 { + grid-column: 3 / 11; +} + +.span-6-7 { + grid-column: 6 / 8; +} + +.span-5-8 { + grid-column: 5 / 9; +} diff --git a/docs/src/assets/scss/components/alert.scss b/docs/src/assets/scss/components/alert.scss new file mode 100644 index 00000000000..b6ec304b730 --- /dev/null +++ b/docs/src/assets/scss/components/alert.scss @@ -0,0 +1,159 @@ +.alert { + position: relative; + display: grid; + grid-template-columns: auto 1fr; + padding: 1rem; + gap: .75rem; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + align-items: start; + font-size: .875rem; + background-color: var(--body-background-color); + border-radius: var(--border-radius); + + &.alert--warning { + border: 1px solid var(--color-rose-300); + } + + &.alert--important { + border: 1px solid var(--color-warning-300); + } + + &.alert--tip { + border: 1px solid var(--color-success-300); + } +} + +[data-theme="dark"] { + .alert { + &.alert--warning { + border: 1px solid var(--color-rose-300); + } + + &.alert--important { + border: 1px solid var(--color-warning-300); + } + + &.alert--tip { + border: 1px solid var(--color-success-300); + } + } +} + +.alert__icon { + color: inherit; + position: relative; + top: 2px; + offset-block-start: 2px; +} + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; + margin-block-end: .25rem; +} + +.alert--warning { + color: var(--color-rose-600); +} + +.alert--important { + color: var(--color-warning-600); +} + +.alert--tip { + color: var(--color-success-600); +} + +[data-theme="dark"] { + .alert--warning { + color: var(--color-rose-400); + } + + .alert--important { + color: var(--color-warning-400); + } + + .alert--tip { + color: var(--color-success-400); + } +} + +.alert__type { + font-weight: 500; + margin-bottom: .25rem; + + .alert--warning & { + color: var(--color-rose-700); + + [data-theme="dark"] & { + color: var(--color-rose-300); + } + } + + .alert--important & { + color: var(--color-warning-700); + + [data-theme="dark"] & { + color: var(--color-warning-300); + } + } + + .alert--tip & { + color: var(--color-success-700); + + [data-theme="dark"] & { + color: var(--color-success-300); + } + } +} + + +.alert__learn-more { + display: block; + font-weight: 500; + margin-top: .75rem; + margin-block-start: .75rem; + + .alert--warning & { + color: var(--color-rose-700); + + [data-theme="dark"] & { + color: var(--color-rose-300); + } + } + + .alert--important & { + color: var(--color-warning-700); + + [data-theme="dark"] & { + color: var(--color-warning-300); + } + } + + .alert--tip & { + color: var(--color-success-700); + + [data-theme="dark"] & { + color: var(--color-success-300); + } + } +} + +// .alert__remove-btn { +// position: absolute; +// right: 1rem; +// top: 1rem; + +// .alert--warning & svg { +// color: var(--color-rose-700); +// } + +// .alert--important & svg { +// color: var(--color-warning-700); +// } + +// .alert--tip & svg { +// color: var(--color-success-700); +// } +// } diff --git a/docs/src/assets/scss/components/buttons.scss b/docs/src/assets/scss/components/buttons.scss new file mode 100644 index 00000000000..bbe6451a616 --- /dev/null +++ b/docs/src/assets/scss/components/buttons.scss @@ -0,0 +1,79 @@ +button { + border: none; + background: none; + font: inherit; + cursor: pointer; + line-height: inherit; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.c-btn { + background: none; + border: none; + font: inherit; + font-family: var(--text-font); + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75em 1.125em; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + + transition: background-color .2s linear, + border-color .2s linear; + + svg { + color: inherit; + } +} + +.c-btn--large { + font-size: 1.125rem; + padding: .88em 1.5em; +} + +.c-btn--block { + display: flex; + width: 100%; +} + +a.c-btn { + text-decoration: none; + display: inline-flex; + flex-wrap: wrap; + gap: .5rem; + align-items: center; +} + +.c-btn--primary { + background-color: var(--primary-button-background-color); + color: var(--primary-button-text-color); + + &:hover { + background-color: var(--primary-button-hover-color); + } +} + +.c-btn--secondary { + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); + + &:hover { + background-color: var(--secondary-button-hover-color); + } +} + +.c-btn--ghost { + color: var(--body-text-color); + border: 1px solid var(--border-color); + + &:hover { + border-color: var(--link-color); + } +} diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss new file mode 100644 index 00000000000..6f2a85478c7 --- /dev/null +++ b/docs/src/assets/scss/components/docs-index.scss @@ -0,0 +1,151 @@ +.docs-index { + a { + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: .5rem .75rem; + margin-left: -.75rem; + margin-inline-start: -.75rem; + color: var(--headings-color); + + &:hover, + &[aria-current="true"] { + background-color: var(--docs-lightest-background-color); + color: var(--link-color); + } + } +} + +.docs-index__item { + margin: 0; + + ul ul { + padding-left: .75rem; + } + + &[data-has-children] { + margin-bottom: .5rem; + } +} + +.docs-index>ul>.docs-index__item { + margin-top: 1.5rem; + margin-block-start: 1.5rem; + + >a { + color: var(--icon-color); + text-transform: uppercase; + letter-spacing: 1px; + font-size: .875rem; + font-weight: 500; + } +} + +/* Styles for the accordion icon */ +.index-js .index-icon { + display: block !important; + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + transition: all 0.1s linear; + color: inherit; +} + +.index-js [aria-expanded="true"] .index-icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.index-js [aria-hidden="true"] { + display: none; +} + +.index-js [aria-hidden="false"] { + display: block; +} + +.docs-index__list { + &[data-open="false"] { + display: none; + + @media all and (min-width: 1023px) { + display: block; + } + } + + &[data-open="true"] { + display: block; + + @media all and (min-width: 1023px) { + display: block; + } + } +} + +.docs-index-toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + // background-color: var(--lightest-background-color); + // color: inherit; + + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); + + &:hover { + background-color: var(--secondary-button-hover-color); + } + + @media all and (min-width: 1023px) { + display: none; + } + + svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; + } + + #ham-top, + #ham-middle, + #ham-bottom { + transition: all .2s linear; + } + + #ham-top { + transform-origin: 30px 37px; + } + + #ham-bottom { + transform-origin: 30px 63px; + } + + &[aria-expanded="true"] { + #ham-middle { + opacity: 0; + } + + #ham-top { + + transform: rotate(41deg); + } + + #ham-bottom { + transform: rotate(-41deg); + } + } +} diff --git a/docs/src/assets/scss/components/docs-navigation.scss b/docs/src/assets/scss/components/docs-navigation.scss new file mode 100644 index 00000000000..56409288e6c --- /dev/null +++ b/docs/src/assets/scss/components/docs-navigation.scss @@ -0,0 +1,154 @@ +.docs-site-nav { + display: flex; + flex-direction: column; + flex: 1; + grid-column: 1 / -1; + grid-row: 1; + + ul { + list-style: none; + font-size: var(--step-1); + margin-top: 1rem; + margin-block-start: 1rem; + margin-bottom: 2rem; + margin-block-end: 2rem; + + + @media all and (min-width: 1023px) { + font-size: var(--step-0); + margin-top: 0; + margin-block-start: 0; + margin-bottom: 0; + margin-block-end: 0; + align-items: center; + display: flex; + } + } + + .flexer { + display: flex; + justify-self: flex-end; + align-self: flex-end; + } + + a:not(.c-btn) { + text-decoration: none; + color: inherit; + transition: color .2s linear; + + &:hover { + color: var(--link-color); + } + } + + a:not(.c-btn)[aria-current="page"], + a:not(.c-btn)[aria-current="true"] { + color: var(--link-color); + text-decoration: none; + font-weight: 500; + } +} + + +.docs-nav-panel { + @media all and (min-width: 1023px) { + display: flex; + flex-direction: row; + justify-content: center; + } + + &[data-open="false"] { + display: none; + } + + &[data-open="true"] { + @media all and (min-width: 1023px) { + display: flex; + flex-direction: row; + justify-content: center; + } + } +} + +.docs-nav-panel .mobile-only { + @media all and (min-width: 1023px) { + display: none; + } +} + +.docs-site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: .5rem; + margin-right: -10px; + + margin-inline-start: .5rem; + margin-inline-end: -10px; + + + svg { + width: 40px; + height: 40px; + color: var(--headings-color); + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; + } + + #ham-top, + #ham-middle, + #ham-bottom { + transition: all .2s linear; + } + + #ham-top { + transform-origin: 30px 37px; + } + + #ham-bottom { + transform-origin: 30px 63px; + } + + &[aria-expanded="true"] { + #ham-middle { + opacity: 0; + } + + #ham-top { + + transform: rotate(41deg); + } + + #ham-bottom { + transform: rotate(-41deg); + } + } +} + + + +@media all and (min-width: 1023px) { + .docs-site-nav { + flex-direction: row; + grid-column: auto; + gap: 2rem; + + ul { + display: flex; + gap: 2rem; + font-size: var(--step-0); + + li { + margin-bottom: 0; + margin-block-end: 0; + } + } + + .flexer { + order: 1; + } + } + +} diff --git a/docs/src/assets/scss/components/docs-resources.scss b/docs/src/assets/scss/components/docs-resources.scss new file mode 100644 index 00000000000..cf483cd0173 --- /dev/null +++ b/docs/src/assets/scss/components/docs-resources.scss @@ -0,0 +1,71 @@ +.resource { + display: flex; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); + align-items: stretch; + overflow: hidden; + margin-bottom: .5rem; + margin-block-end: .5rem; + + position: relative; + transition: all .2s linear; + + &:hover { + background-color: var(--lighter-background-color); + } + +} + +.resource__image { + flex: 1 0 5.5rem; + max-width: 5.5rem; + overflow: hidden; + padding: .25rem; + + img { + display: block; + height: 100%; + width: 100%; + // object-fit: cover; + object-fit: contain; + } +} + +.resource__content { + flex: 4; + padding: .75rem; + align-self: center; +} + + +.resource__title { // a + text-decoration: none; + color: var(--headings-color); + font-weight: 500; + margin-bottom: .125rem; + + &::after { + content: ""; + position: absolute; + left: 0; + offset-inline-start: 0; + top: 0; + block-inline-start: 0; + width: 100%; + height: 100%; + } +} + +.resource__domain, +.resource__domain a { + text-decoration: none; + color: var(--body-text-color); + font-size: .875rem; +} + +.resource__icon { + color: var(--headings-color); + margin: 1rem; + align-self: center; +} diff --git a/docs/src/assets/scss/components/hero.scss b/docs/src/assets/scss/components/hero.scss new file mode 100644 index 00000000000..54c303e2216 --- /dev/null +++ b/docs/src/assets/scss/components/hero.scss @@ -0,0 +1,60 @@ +.hero .grid { + @media all and (min-width: 800px) { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 2rem; + align-items: center; + } + + .span-1-7 { + grid-column: 1 / 2; + } + + .span-10-12 { + grid-column: 2 / 3; + justify-self: end; + } +} + +.hero { + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); + background-color: var(--hero-background-color); + + @media all and (min-width: 800px) { + // when the ad is displayed + min-height: calc(285px + var(--space-xl-4xl)); + } + + .content-container { + padding: var(--space-xl-4xl) 0; + margin: 0; + } + + >.content-container { + margin: 0 auto; + padding: 0 calc(1rem + 1vw); + padding-bottom: 0; + align-items: center; + } +} + +.hero--homepage { + + .section-title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + } + + .section-supporting-text { + margin: 0; + font-size: var(--step-1); + text-align: left; + } + + .eslint-actions { + font-size: var(--step-1); + margin-top: 3rem; + margin-block-start: 3rem; + } +} diff --git a/docs/src/assets/scss/components/index.scss b/docs/src/assets/scss/components/index.scss new file mode 100644 index 00000000000..a1b79a733f9 --- /dev/null +++ b/docs/src/assets/scss/components/index.scss @@ -0,0 +1,110 @@ +.index { + margin-bottom: 4rem; + margin-block-end: 4rem; +} + +.index__item { + margin: 0; + + a { + display: block; + color: inherit; + text-decoration: none; + padding: .625rem .875rem; + font-size: var(--step-0); + border-radius: var(--border-radius); + + &:hover { + color: var(--link-color); + } + } + + a[aria-current="page"] { + color: var(--link-color); + background-color: var(--lightest-background-color); + font-weight: 500; + } +} + +.index__toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: .75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: .5rem; + font-weight: 500; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--secondary-button-background-color); + color: var(--secondary-button-text-color); + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); + + &:hover { + background-color: var(--secondary-button-hover-color); + } + + @media all and (min-width: 1023px) { + display: none; + } + + svg { + width: 1.5em; + height: 1.5em; + color: inherit; + fill: none; + stroke-width: 4; + stroke-linecap: round; + stroke-linejoin: round; + } + + #ham-top, + #ham-middle, + #ham-bottom { + transition: all .2s linear; + } + + #ham-top { + transform-origin: 30px 37px; + } + + #ham-bottom { + transform-origin: 30px 63px; + } + + &[aria-expanded="true"] { + #ham-middle { + opacity: 0; + } + + #ham-top { + + transform: rotate(41deg); + } + + #ham-bottom { + transform: rotate(-41deg); + } + } +} + +.index__list { + display: block; + + &[data-open="false"] { + display: none; + + @media all and (min-width: 1023px) { + display: block; + } + } + + &[data-open="true"] { + display: block; + + @media all and (min-width: 1023px) { + display: block; + } + } +} diff --git a/docs/src/assets/scss/components/language-switcher.scss b/docs/src/assets/scss/components/language-switcher.scss new file mode 100644 index 00000000000..f4d79b5fb3b --- /dev/null +++ b/docs/src/assets/scss/components/language-switcher.scss @@ -0,0 +1,23 @@ +.switcher--language { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem .5rem; + position: relative; + min-width: 15rem; + padding: 0; +} + +.switcher--language .label__text { + flex: 1 0 10ch; +} + + +.switcher--language .switcher__select { + min-width: 15rem; + flex: 1 0 15rem; +} + +.language-switcher { + display: inline-flex; +} diff --git a/docs/src/assets/scss/components/languages.scss b/docs/src/assets/scss/components/languages.scss new file mode 100644 index 00000000000..b3872e4cce1 --- /dev/null +++ b/docs/src/assets/scss/components/languages.scss @@ -0,0 +1,52 @@ +.languages-list { + margin: 0; + padding: 0; + font-size: var(--step-0); + + li { + margin: 0; + + &:last-of-type a { + border-bottom: 0; + } + } + + a { + color: inherit; + display: block; + width: 100%; + padding: .75rem .1rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); + + &[aria-current="true"] { + font-weight: 500; + color: var(--link-color); + + &::after { + content: "✔️"; + } + } + + &:hover { + color: var(--link-color); + } + } +} + +.languages-section .flag { + font-size: 2em; + margin-right: .5rem; + margin-inline-end: .5rem; +} + +.languages-section .languages-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; +} diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss new file mode 100644 index 00000000000..27b1e492ad3 --- /dev/null +++ b/docs/src/assets/scss/components/rules.scss @@ -0,0 +1,168 @@ +.rule-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem 1rem; + margin-bottom: 3rem; + + .rule-category { + margin: 0; + padding: 0; + background: none; + border: none; + } + + .rule-category__description { + flex: 1 1 45ch; + } +} + +.rule-category { + font-size: var(--step--1); + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 1rem; + padding: 1rem; + margin: 1.5rem 0; + border-radius: var(--border-radius); + border: 1px solid var(--divider-color); + background-color: var(--lightest-background-color); + + p { + margin: 0; + } + + .rule-category__description { + flex: 1 1 30ch; + } +} + +.rule { + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 1rem; + padding: 1rem; + margin: .5rem 0; + position: relative; + + p:last-of-type { + margin: 0; + } +} + +.rule--deprecated, +.rule--removed { + // opacity: .5; +} + +.rule__content { + flex: 1 1 35ch; +} + +.rule__name { + font-weight: 500; + font-size: .875rem; + margin-bottom: .25rem; + margin-block-end: .25rem; + + &::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + offset-block-start: 0; + left: 0; + offset-inline-start: 0; + } +} + +a.rule__name { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +.rule__description { + font-size: var(--step--1); +} + +.rule__categories { + font-size: .875rem; + display: flex; + align-items: center; + gap: 1rem; + border-radius: var(--border-radius); + padding: 2px 4px; + + p { + display: inline-flex; + margin: 0; + align-items: center; + } + + [data-theme="dark"] & { + background: var(--body-background-color); + } +} + +.rule__status { + color: var(--color-rose-500); + background: var(--color-rose-50); + border-radius: var(--border-radius); + display: inline-block; + font-weight: normal; + margin-left: .5rem; + margin-inline-start: .5rem; + font-size: var(--step--1); + padding: 0 .5rem; + + [data-theme="dark"] & { + background: var(--body-background-color); + } +} + +.rule__categories__type { + &[aria-hidden="true"] { + opacity: .25; + } +} + + +/* related rules */ + +.related-rules__list { + display: flex; + gap: .5rem; + flex-wrap: wrap; + justify-content: start; +} + +.related-rules__list__item { + + svg { + color: inherit; + } + + a { + text-decoration: none; + color: var(--headings-color); + padding: .625rem; + display: inline-flex; + gap: .5rem; + align-items: center; + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); + background-color: var(--lightest-background-color); + + &:hover { + color: var(--link-color); + background-color: var(--lighter-background-color); + } + } +} diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss new file mode 100644 index 00000000000..60e01826315 --- /dev/null +++ b/docs/src/assets/scss/components/search.scss @@ -0,0 +1,28 @@ +.search { + margin-bottom: 1.5rem; +} + +.search__input-wrapper { + position: relative; +} + +.search__input { + padding-left: 2.5rem; + padding-inline-start: 2.5rem; + outline-offset: 1px; + width: 100%; +} + +.search__icon { + color: var(--body-text-color); + position: absolute; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: .75rem; + offset-inline-start: .75rem; +} + +.algolia-docsearch-suggestion--highlight { + background-color: var(--color-warning-300); +} diff --git a/docs/src/assets/scss/components/social-icons.scss b/docs/src/assets/scss/components/social-icons.scss new file mode 100644 index 00000000000..207c2b60e58 --- /dev/null +++ b/docs/src/assets/scss/components/social-icons.scss @@ -0,0 +1,23 @@ +.eslint-social-icons { + margin-bottom: -1rem; + margin-block-end: -1rem; + + ul { + margin: 0; + padding: 0; + margin-left: -1rem; + margin-inline-start: -1rem; + display: inline-flex; + + li { + margin: 0; + display: inline-flex; + align-items: center; + + a { + display: flex; + padding: 1rem; + } + } + } +} diff --git a/docs/src/assets/scss/components/tabs.scss b/docs/src/assets/scss/components/tabs.scss new file mode 100644 index 00000000000..f2672a1601a --- /dev/null +++ b/docs/src/assets/scss/components/tabs.scss @@ -0,0 +1,68 @@ +.c-tabs { + pre { + margin-top: 0; + margin-block-start: 0; + } +} + +.c-tabs__tablist { + .js-tabs & { + display: flex; + justify-content: start; + } +} + +.c-tabs__tab { + background: none; + border: none; + margin: 0; + color: inherit; + font: inherit; + cursor: pointer; + line-height: inherit; + font-weight: 500; + font-size: var(--step-0); + display: inline-flex; + padding: .75rem 1.125rem; + align-items: center; + justify-content: center; + border-radius: var(--border-radius) var(--border-radius) 0 0; + + transition: background-color .2s linear, + border-color .2s linear; + + + + &:hover { + color: var(--link-color); + } + + &[aria-selected="true"] { + color: var(--link-color); + background-color: var(--lightest-background-color); + } +} + +.c-tabs__tabpanel { + margin-bottom: 2rem; + margin-block-end: 2rem; + background-color: var(--lightest-background-color); + border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius); + + .js-tabs & { + margin-bottom: 0; + margin-block-end: 0; + } +} + + +.c-tabs__tabpanel__title { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; +} + +// when the js is enabled, the tabpanels are labelled by their tabs +// you may choose to hide or keep the headings inside of them visible +.js-tabs .c-tabs__tabpanel__title { + display: none; +} diff --git a/docs/src/assets/scss/components/theme-switcher.scss b/docs/src/assets/scss/components/theme-switcher.scss new file mode 100644 index 00000000000..47b7cf3ff24 --- /dev/null +++ b/docs/src/assets/scss/components/theme-switcher.scss @@ -0,0 +1,82 @@ +.theme-switcher { + display: inline-flex; + align-items: center; + gap: .5rem; + position: relative; +} + +.theme-switcher-label.theme-switcher-label { + font-size: inherit; + color: inherit; + font: inherit; + font-family: var(--text-font); + margin: 0; +} + +.theme-switcher__buttons { + display: flex; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--body-background-color); +} + +.theme-switcher__button { + flex: 0; + box-shadow: var(--shadow-xs); + padding: .625rem .875rem; + display: inline-flex; + align-items: center; + margin: 0; + width: 40px; + height: 40px; + + &:first-of-type { + border-right: .5px solid var(--border-color); + border-inline-end: .5px solid var(--border-color); + } + + &:last-of-type { + border-left: .5px solid var(--border-color); + border-inline-start: .5px solid var(--border-color); + } + + .theme-switcher__icon { + color: var(--icon-color); + } + + &:hover { + .theme-switcher__icon { + color: var(--link-color); + } + } +} + +.theme-switcher__button[aria-pressed="true"] { + .theme-switcher__icon { + color: var(--link-color); + } + + &:hover { + .theme-switcher__icon { + color: var(--link-color); + } + } +} + +.theme-switcher__button[aria-pressed="false"] { + .theme-switcher__icon { + color: var(--icon-color); + } + + &:hover { + .theme-switcher__icon { + color: var(--link-color); + } + } +} + +.theme-switcher__button:hover { + .theme-switcher__icon { + color: var(--link-color); + } +} diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss new file mode 100644 index 00000000000..d906cda0604 --- /dev/null +++ b/docs/src/assets/scss/components/toc.scss @@ -0,0 +1,102 @@ +.docs-toc { + margin: 2rem 0; +} + +.c-toc { + ol { + margin: 0; + + li { + position: relative; + margin-bottom: .25rem; + margin-block-end: .25rem; + padding-left: 1rem; + padding-inline-start: 1rem; + + > ol { + margin-top: .25rem; + } + } + + li::before { + content: "└"; + color: var(--icon-color); + position: absolute; + left: -.4rem; + offset-inline-start: -.4rem; + } + } + + a { + text-decoration: none; + color: var(--headings-color); + + &:hover { + color: var(--link-color); + } + } +} + +.c-toc__label.c-toc__label { + font-size: var(--step-0); + color: var(--body-text-color); + font-family: var(--text-font); + margin-bottom: .5rem; + margin-block-end: .5rem; +} + +.c-toc__label { + width: fit-content; + + button { + color: var(--link-color); + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + font: inherit; + font-size: inherit; + font-weight: 500; + width: 100%; + height: 100%; + text-align: left; + line-height: 1.5; + padding: 0; + border-radius: 0; + position: relative; + border: none; + transition: outline 0.1s linear; + + svg { + flex: none; + } + } +} + +/* Styles for the accordion icon */ +.toc-trigger-icon { + display: block !important; // to override aria-hidden + width: 0.75rem; + height: 0.5rem; + transform-origin: 50% 50%; + margin-left: 3rem; + margin-inline-start: 3rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); + + [aria-expanded="true"] & { + -ms-transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); + } +} + + + +.c-toc__panel { + &[data-open="false"] { + display: none; + } + &[data-open="true"] { + display: block; + } +} diff --git a/docs/src/assets/scss/components/version-switcher.scss b/docs/src/assets/scss/components/version-switcher.scss new file mode 100644 index 00000000000..dfbf9ac82c4 --- /dev/null +++ b/docs/src/assets/scss/components/version-switcher.scss @@ -0,0 +1,4 @@ +.version-switcher { + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; +} diff --git a/docs/src/assets/scss/components/versions.scss b/docs/src/assets/scss/components/versions.scss new file mode 100644 index 00000000000..2a5ba4fe055 --- /dev/null +++ b/docs/src/assets/scss/components/versions.scss @@ -0,0 +1,47 @@ +.versions-list { + margin: 0; + padding: 0; + font-size: var(--step-1); + + li { + margin: 0; + + &:last-of-type a { + border-bottom: 0; + border-block-end: 0; + } + } + + a { + color: var(--link-color); + display: block; + width: 100%; + padding: 1rem .5rem; + text-decoration: none; + display: flex; + align-items: center; + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); + + &[data-current="true"] { + font-weight: 500; + color: var(--link-color); + + &::after { + content: "✔️"; + } + } + + &:hover { + background-color: var(--lightest-background-color); + } + } +} + +.versions-section .versions-list { + font-size: var(--step-1); + border-left: 4px solid var(--tab-border-color); + padding-left: 1rem; + border-inline-start: 4px solid var(--tab-border-color); + padding-inline-start: 1rem; +} diff --git a/docs/src/assets/scss/print.scss b/docs/src/assets/scss/print.scss new file mode 100644 index 00000000000..04868a5966c --- /dev/null +++ b/docs/src/assets/scss/print.scss @@ -0,0 +1,204 @@ +*, +*:before, +*:after, +*:first-letter, +p:first-line, +div:first-line, +blockquote:first-line, +li:first-line { + background: transparent !important; + color: #000 !important; + box-shadow: none !important; + text-shadow: none !important; +} + +body { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1.45; + font-family: Helvetica, sans-serif; + color: #000; + background: none; + font-size: 14pt; +} + +.grid { + display: block; +} + +main, +.docs-content, +.docs-wrapper { + display: block; + width: 100%; + max-width: 75ch; + margin: 1cm auto; +} + +/* Headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + page-break-after: avoid; +} + +h1 { + font-size: 19pt; +} + +h2 { + font-size: 17pt; +} + +h3 { + font-size: 15pt; +} + +h4, +h5, +h6 { + font-size: 14pt; +} + + +p, +h2, +h3 { + orphans: 3; + widows: 3; +} + +code { + font: 12pt Courier, monospace; +} + +blockquote { + margin: 1.2em; + padding: 1em; + font-size: 12pt; +} + +hr { + background-color: #ccc; +} + +/* Images */ +img { + max-width: 100% !important; +} + +a img { + border: none; +} + +/* Links */ +a:link, +a:visited { + background: transparent; + font-weight: 700; + text-decoration: underline; + color: #333; +} + +// a:link[href^="http://"]:after, +// a[href^="http://"]:visited:after { +// content: " ("attr(href) ") "; +// font-size: 90%; +// } + +abbr[title]:after { + content: " ("attr(title) ")"; +} + +/* Don't show linked images */ +a[href^="http://"] { + color: #000; +} + +a[href$=".jpg"]:after, +a[href$=".jpeg"]:after, +a[href$=".gif"]:after, +a[href$=".png"]:after { + content: " ("attr(href) ") "; + display: none; +} + +/* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol .. taken from html5boilerplate */ +a[href^="#"]:after, +a[href^="javascript:"]:after { + content: ""; +} + +/* Table */ +table { + margin: 1px; + text-align: left; +} + +th { + border-bottom: 1px solid #333; + font-weight: bold; +} + +td { + border-bottom: 1px solid #333; +} + +th, +td { + padding: 4px 10px 4px 0; +} + +tfoot { + font-style: italic; +} + +caption { + background: #fff; + margin-bottom: 2em; + text-align: left; +} + +thead { + display: table-header-group; +} + +img, +tr { + page-break-inside: avoid; +} + +body>*:not(main), +aside, +*[class*="sidebar"] { + display: none; +} + +button, +.c-btn.c-btn--playground, +.docs-edit-link { + display: none; +} + +a[href^='http']:not([href*='mywebsite.com'])::after { + content: ' ('attr(href) ')'; +} + +.resource a::after { + display: none; +} + +ul { + page-break-inside: avoid; +} + + +@media print { + @page { + margin: 1cm; + } +} diff --git a/docs/src/assets/scss/styles.scss b/docs/src/assets/scss/styles.scss new file mode 100644 index 00000000000..435da5d5c35 --- /dev/null +++ b/docs/src/assets/scss/styles.scss @@ -0,0 +1,37 @@ + +@import "tokens/themes.scss"; +@import "tokens/spacing.scss"; +@import "tokens/typography.scss"; +@import "tokens/ui.scss"; + +@import "_typography.scss"; +@import "_docs-typography.scss"; +@import "_foundations.scss"; +@import "_prism-syntax-highlighter.scss"; +@import "_docs-header.scss"; +@import "_docs-footer.scss"; +@import "_site-footer.scss"; +@import "_forms.scss"; +@import "_docs.scss"; + +@import "components/buttons.scss"; +@import "components/docs-navigation.scss"; +@import "components/toc.scss"; +@import "components/search.scss"; +@import "components/alert.scss"; +@import "components/rules.scss"; +@import "components/languages.scss"; +@import "components/versions.scss"; +@import "components/social-icons.scss"; +@import "components/hero.scss"; +@import "components/theme-switcher.scss"; +@import "components/version-switcher.scss"; +@import "components/language-switcher.scss"; +@import "components/docs-index.scss"; +@import "components/tabs.scss"; +@import "components/docs-resources.scss"; +@import "components/index.scss"; + +@import "_carbon-ads.scss"; + +@import "_utilities.scss"; diff --git a/docs/src/assets/scss/tokens/spacing.scss b/docs/src/assets/scss/tokens/spacing.scss new file mode 100644 index 00000000000..3525195276b --- /dev/null +++ b/docs/src/assets/scss/tokens/spacing.scss @@ -0,0 +1,69 @@ +/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1440,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,l-2xl|xl-3xl|xl-4xl */ + +:root { + --fc-3xs-min: (var(--fc-s-min) * 0.25); + --fc-3xs-max: (var(--fc-s-max) * 0.25); + + --fc-2xs-min: (var(--fc-s-min) * 0.5); + --fc-2xs-max: (var(--fc-s-max) * 0.5); + + --fc-xs-min: (var(--fc-s-min) * 0.75); + --fc-xs-max: (var(--fc-s-max) * 0.75); + + --fc-s-min: (var(--f-0-min)); + --fc-s-max: (var(--f-0-max)); + + --fc-m-min: (var(--fc-s-min) * 1.5); + --fc-m-max: (var(--fc-s-max) * 1.5); + + --fc-l-min: (var(--fc-s-min) * 2); + --fc-l-max: (var(--fc-s-max) * 2); + + --fc-xl-min: (var(--fc-s-min) * 3); + --fc-xl-max: (var(--fc-s-max) * 3); + + --fc-2xl-min: (var(--fc-s-min) * 4); + --fc-2xl-max: (var(--fc-s-max) * 4); + + --fc-3xl-min: (var(--fc-s-min) * 6); + --fc-3xl-max: (var(--fc-s-max) * 6); + + --fc-4xl-min: (var(--fc-s-min) * 8); + --fc-4xl-max: (var(--fc-s-max) * 8); + + /* T-shirt sizes */ + --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + --space-4xl: calc(((var(--fc-4xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-4xl-min)) * var(--fluid-bp)); + + /* One-up pairs */ + --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp)); + --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp)); + --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp)); + --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp)); + --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp)); + --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp)); + --space-3xl-4xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-3xl-min)) * var(--fluid-bp)); + + /* Custom pairs */ + --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-xl-3xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + --space-xl-4xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-4xl-max) - var(--fc-xl-min)) * var(--fluid-bp)); + + + // spacing + --spacer-2x: 2rem; // 32px + --spacer-3x: 3rem; // 48px + --spacer-4x: 4rem; // 64px + --spacer-6x: 6rem; // 96px + --spacer-8x: 8rem; // 128px +} diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss new file mode 100644 index 00000000000..1a262e020c0 --- /dev/null +++ b/docs/src/assets/scss/tokens/themes.scss @@ -0,0 +1,159 @@ +:root { + /* Tier 1 variables */ + // colors + --color-neutral-25: #FCFCFD; + --color-neutral-50: #F9FAFB; + --color-neutral-100: #F2F4F7; + --color-neutral-200: #E4E7EC; + --color-neutral-300: #D0D5DD; + --color-neutral-400: #98A2B3; + --color-neutral-500: #667085; + --color-neutral-600: #475467; + --color-neutral-700: #344054; + --color-neutral-800: #1D2939; + --color-neutral-900: #101828; + + --color-primary-25: #FBFBFF; + --color-primary-50: #F6F6FE; + --color-primary-100: #ECECFD; + --color-primary-200: #DEDEFF; + --color-primary-300: #CCCCFA; + --color-primary-400: #B7B7FF; + --color-primary-500: #A0A0F5; + --color-primary-600: #8080F2; + --color-primary-700: #6358D4; + --color-primary-800: #4B32C3; + --color-primary-900: #341BAB; + + --color-warning-25: #FFFCF5; + --color-warning-50: #FFFAEB; + --color-warning-100: #FEF0C7; + --color-warning-200: #FEDF89; + --color-warning-300: #FEC84B; + --color-warning-400: #FDB022; + --color-warning-500: #F79009; + --color-warning-600: #DC6803; + --color-warning-700: #B54708; + --color-warning-800: #93370D; + --color-warning-900: #7A2E0E; + + --color-success-25: #F6FEF9; + --color-success-50: #ECFDF3; + --color-success-100: #D1FADF; + --color-success-200: #A6F4C5; + --color-success-300: #6CE9A6; + --color-success-400: #32D583; + --color-success-500: #12B76A; + --color-success-600: #039855; + --color-success-700: #027A48; + --color-success-800: #05603A; + --color-success-900: #054F31; + + --color-rose-25: #FFF5F6; + --color-rose-50: #FFF1F3; + --color-rose-100: #FFE4E8; + --color-rose-200: #FECDD6; + --color-rose-300: #FEA3B4; + --color-rose-400: #FD6F8E; + --color-rose-500: #F63D68; + --color-rose-600: #E31B54; + --color-rose-700: #C01048; + --color-rose-800: #A11043; + --color-rose-900: #89123E; + + /* Tier 2 variables */ + --primary-button-background-color: var(--color-primary-800); + --primary-button-hover-color: var(--color-primary-900); + --primary-button-text-color: #fff; + --secondary-button-background-color: var(--color-primary-50); + --secondary-button-hover-color: var(--color-primary-100); + --secondary-button-text-color: var(--color-brand); + --ghost-button-background-color: var(--color-primary-50); + --ghost-button-text-color: var(--color-brand); + + --color-brand: var(--color-primary-800); + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + + + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); +} + +@media (prefers-color-scheme: dark) { + --secondary-button-background-color: var(--color-neutral-700); + --secondary-button-hover-color: var(--color-neutral-800); + --secondary-button-text-color: var(--body-text-color); + + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; +} + + + +html[data-theme="light"] { + --body-background-color: #fff; + --body-text-color: var(--color-neutral-500); + --headings-color: var(--color-neutral-900); + + --border-color: var(--color-neutral-300); + --divider-color: var(--color-neutral-200); + + + --icon-color: var(--color-neutral-400); + --dark-icon-color: var(--color-neutral-500); + --link-color: var(--color-primary-800); + + --lighter-background-color: var(--color-neutral-100); + --lightest-background-color: var(--color-neutral-50); + --docs-lightest-background-color: var(--color-primary-50); + --hero-background-color: var(--color-neutral-25); + --footer-background-color: var(--color-neutral-25); + --outline-color: var(--color-brand); +} + +html[data-theme="dark"] { + --body-background-color: var(--color-neutral-900); + --body-text-color: var(--color-neutral-300); + --headings-color: #fff; + + --divider-color: var(--color-neutral-600); + --border-color: var(--color-neutral-500); + + --icon-color: var(--body-text-color); + --dark-icon-color: #fff; + --link-color: var(--color-primary-400); + + --lighter-background-color: var(--color-neutral-800); + --lightest-background-color: var(--color-neutral-800); + --docs-lightest-background-color: var(--color-neutral-800); + --hero-background-color: var(--color-neutral-800); + --footer-background-color: var(--color-neutral-800); + --outline-color: #fff; +} diff --git a/docs/src/assets/scss/tokens/typography.scss b/docs/src/assets/scss/tokens/typography.scss new file mode 100644 index 00000000000..e9c24ef7978 --- /dev/null +++ b/docs/src/assets/scss/tokens/typography.scss @@ -0,0 +1,79 @@ +/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ + +:root { + --fluid-min-width: 320; + --fluid-max-width: 1280; + + --fluid-screen: 100vw; + --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); +} + +@media screen and (min-width: 1280px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); + } +} + +:root { + --f--2-min: 12.64; + --f--2-max: 10.24; + --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp)); + + --f--1-min: 14.22; + --f--1-max: 12.80; + --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp)); + + --f-0-min: 16.00; + --f-0-max: 16.00; + --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp)); + + --f-1-min: 18.00; + --f-1-max: 20.00; + --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp)); + + --f-2-min: 20.25; + --f-2-max: 25.00; + --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp)); + + --f-3-min: 22.78; + --f-3-max: 31.25; + --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp)); + + --f-4-min: 25.63; + --f-4-max: 39.06; + --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp)); + + --f-5-min: 28.83; + --f-5-max: 48.83; + --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp)); + + --f-6-min: 32.44; + --f-6-max: 61.04; + --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp)); +} + +:root { + --mono-font: "Space Mono", monospace; + --text-font: "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; + --display-font: "Space Grotesk", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; +} diff --git a/docs/src/assets/scss/tokens/ui.scss b/docs/src/assets/scss/tokens/ui.scss new file mode 100644 index 00000000000..08759dba396 --- /dev/null +++ b/docs/src/assets/scss/tokens/ui.scss @@ -0,0 +1,8 @@ +:root { + // elevations + --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), + 0px 4px 6px -2px rgba(16, 24, 40, 0.05); + --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05); + + --border-radius: .5rem; +} diff --git a/docs/src/developer-guide/code-path-analysis/README.md b/docs/src/developer-guide/code-path-analysis/README.md deleted file mode 100644 index 6f48c809722..00000000000 --- a/docs/src/developer-guide/code-path-analysis/README.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Code Path Analysis Details -layout: doc -edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/code-path-analysis/README.md - ---- - -[Code Path Analysis Details](../code-path-analysis) diff --git a/docs/src/developer-guide/contributing/README.md b/docs/src/developer-guide/contributing/index.md similarity index 94% rename from docs/src/developer-guide/contributing/README.md rename to docs/src/developer-guide/contributing/index.md index 84ef50e9458..fdf9e2818a4 100644 --- a/docs/src/developer-guide/contributing/README.md +++ b/docs/src/developer-guide/contributing/index.md @@ -1,7 +1,12 @@ --- title: Contributing layout: doc -edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/contributing/README.md +edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/contributing/index.md +eleventyNavigation: + key: contributing + parent: developer guide + title: Contributing + order: 10 --- diff --git a/docs/src/developer-guide/contributing/pull-requests.md b/docs/src/developer-guide/contributing/pull-requests.md index 8c9ede4d003..e320f32e545 100644 --- a/docs/src/developer-guide/contributing/pull-requests.md +++ b/docs/src/developer-guide/contributing/pull-requests.md @@ -53,7 +53,7 @@ git commit All ESLint projects follow [Conventional Commits](https://www.conventionalcommits.org/) for our commit messages. Here's an example commit message: -```pt +```txt tag: Short description of what you did Longer description here if necessary @@ -83,7 +83,7 @@ The message summary should be a one-sentence description of the change, and it m Here are some good commit message summary examples: -```pt +```txt build: Update Travis to only test Node 0.10 fix: Semi rule incorrectly flagging extra semicolon chore: Upgrade Esprima to 1.2, switch to using comment attachment diff --git a/docs/src/developer-guide/development-environment.md b/docs/src/developer-guide/development-environment.md index cd5f40febda..0b4b45be1a6 100644 --- a/docs/src/developer-guide/development-environment.md +++ b/docs/src/developer-guide/development-environment.md @@ -2,6 +2,11 @@ title: Development Environment layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/development-environment.md +eleventyNavigation: + key: set up a development environment + parent: developer guide + title: Set Up a Development Environment + order: 2 --- diff --git a/docs/src/developer-guide/README.md b/docs/src/developer-guide/index.md similarity index 95% rename from docs/src/developer-guide/README.md rename to docs/src/developer-guide/index.md index ea1bc20bd8e..0b8f2e1cb1f 100644 --- a/docs/src/developer-guide/README.md +++ b/docs/src/developer-guide/index.md @@ -1,7 +1,11 @@ --- title: Developer Guide layout: doc -edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/README.md +edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/index.md +eleventyNavigation: + key: developer guide + title: Developer Guide + order: 2 --- diff --git a/docs/src/developer-guide/nodejs-api.md b/docs/src/developer-guide/nodejs-api.md index 8622326aa56..105996ab87e 100644 --- a/docs/src/developer-guide/nodejs-api.md +++ b/docs/src/developer-guide/nodejs-api.md @@ -2,6 +2,11 @@ title: Node.js API layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/nodejs-api.md +eleventyNavigation: + key: node.js api + parent: developer guide + title: Node.js API + order: 9 --- diff --git a/docs/src/developer-guide/shareable-configs.md b/docs/src/developer-guide/shareable-configs.md index bdee9e10ca4..0378a6e6152 100644 --- a/docs/src/developer-guide/shareable-configs.md +++ b/docs/src/developer-guide/shareable-configs.md @@ -2,6 +2,11 @@ title: Shareable Configs layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/shareable-configs.md +eleventyNavigation: + key: shareable configs + parent: developer guide + title: Shareable Configs + order: 8 --- diff --git a/docs/src/developer-guide/source-code.md b/docs/src/developer-guide/source-code.md index 5ee58ffeb25..d95f8a643d5 100644 --- a/docs/src/developer-guide/source-code.md +++ b/docs/src/developer-guide/source-code.md @@ -2,6 +2,11 @@ title: Source Code layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/source-code.md +eleventyNavigation: + key: getting the source code + parent: developer guide + title: Getting the Source Code + order: 1 --- diff --git a/docs/src/developer-guide/unit-tests.md b/docs/src/developer-guide/unit-tests.md index 0d318495fb4..e2c2d1155d1 100644 --- a/docs/src/developer-guide/unit-tests.md +++ b/docs/src/developer-guide/unit-tests.md @@ -2,6 +2,11 @@ title: Unit Tests layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/unit-tests.md +eleventyNavigation: + key: run the tests + parent: developer guide + title: Run the Tests + order: 3 --- diff --git a/docs/src/developer-guide/working-with-custom-formatters.md b/docs/src/developer-guide/working-with-custom-formatters.md index d9fd89356c2..87bd728bd83 100644 --- a/docs/src/developer-guide/working-with-custom-formatters.md +++ b/docs/src/developer-guide/working-with-custom-formatters.md @@ -2,6 +2,11 @@ title: Working with Custom Formatters layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/working-with-custom-formatters.md +eleventyNavigation: + key: working with custom formatters + parent: developer guide + title: Working with Custom Formatters + order: 6 --- diff --git a/docs/src/developer-guide/working-with-custom-parsers.md b/docs/src/developer-guide/working-with-custom-parsers.md index 71a67eb0ede..0ae2c1c90b0 100644 --- a/docs/src/developer-guide/working-with-custom-parsers.md +++ b/docs/src/developer-guide/working-with-custom-parsers.md @@ -2,6 +2,11 @@ title: Working with Custom Parsers layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/working-with-custom-parsers.md +eleventyNavigation: + key: working with custom parsers + parent: developer guide + title: Working with Custom Parsers + order: 7 --- diff --git a/docs/src/developer-guide/working-with-plugins.md b/docs/src/developer-guide/working-with-plugins.md index 68519d28b46..f03ba1a3ceb 100644 --- a/docs/src/developer-guide/working-with-plugins.md +++ b/docs/src/developer-guide/working-with-plugins.md @@ -2,6 +2,11 @@ title: Working with Plugins layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/working-with-plugins.md +eleventyNavigation: + key: working with plugings + parent: developer guide + title: Working with Plugins + order: 5 --- diff --git a/docs/src/developer-guide/working-with-rules.md b/docs/src/developer-guide/working-with-rules.md index e8d5a22bfda..d13e921daa8 100644 --- a/docs/src/developer-guide/working-with-rules.md +++ b/docs/src/developer-guide/working-with-rules.md @@ -2,6 +2,11 @@ title: Working with Rules layout: doc edit_link: https://github.com/eslint/eslint/edit/main/docs/src/developer-guide/working-with-rules.md +eleventyNavigation: + key: working with rules + parent: developer guide + title: Working with Rules + order: 4 --- diff --git a/docs/src/library/alert.md b/docs/src/library/alert.md new file mode 100644 index 00000000000..cefd830407c --- /dev/null +++ b/docs/src/library/alert.md @@ -0,0 +1,23 @@ +--- +title: alert +--- + +The alert message comes in three different types: a warning, a tip, and an important note. + +## Usage + +There is a shortcode for each type of alert. The shortcode expects you to provide the text and URL for the “Learn more” link. + +```html +{ % warning "This rule has been removed in version x.xx", "/link/to/learn/more" % } + +{ % tip "Kind reminder to do something maybe", "/link/to/learn/more" % } + +{ % important "This rule has been deprecated in version x.xx", "/link/to/learn/more" % } +``` + +## Examples + +{% warning "warning text", "/" %} +{% tip "tip text", "/" %} +{% important "text", "/" %} diff --git a/docs/src/library/buttons.md b/docs/src/library/buttons.md new file mode 100644 index 00000000000..45bf205f546 --- /dev/null +++ b/docs/src/library/buttons.md @@ -0,0 +1,36 @@ +--- +title: Buttons +--- + +{% from 'components/button.macro.html' import button %} + +There are three types of buttons: primary, secondary, and "ghost". The button styles can be applied to buttons and/or links that look like buttons. + +To render the proper semantic element, provide the kind of behavior that is expected: `action` or `link` value. If the button performs an action, it is rendered as a `button`. If the button links somewhere, it renders as a ``. + +The button macro will default to `link`, which will render an <a> tag that looks like a button. If you provide `action` as a value for `behavior`, it indicates that it is a button _that performs an action_ and is therefore rendered as a `