From 1566f9bc8e31fb9afc9f8c9429e72ca50a2da534 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:13:32 -0400 Subject: [PATCH 1/9] chore: Compile Sass directly to _site uncompressed --- docs/_site/assets/css/carbon-ads.css | 112 + docs/_site/assets/css/components/alert.css | 108 + docs/_site/assets/css/components/buttons.css | 73 + .../assets/css/components/docs-index.css | 150 + .../assets/css/components/docs-navigation.css | 129 + docs/_site/assets/css/components/hero.css | 51 + docs/_site/assets/css/components/index.css | 97 + .../css/components/language-switcher.css | 33 + .../_site/assets/css/components/resources.css | 64 + docs/_site/assets/css/components/rules.css | 176 + docs/_site/assets/css/components/search.css | 155 + .../assets/css/components/social-icons.css | 20 + docs/_site/assets/css/components/tabs.css | 54 + .../assets/css/components/theme-switcher.css | 66 + docs/_site/assets/css/components/toc.css | 102 + .../css/components/version-switcher.css | 4 + docs/_site/assets/css/docs-footer.css | 49 + docs/_site/assets/css/docs-header.css | 39 + docs/_site/assets/css/docs.css | 155 + docs/_site/assets/css/eslint-site-footer.css | 56 + docs/_site/assets/css/eslint-site-header.css | 40 + docs/_site/assets/css/forms.css | 51 + docs/_site/assets/css/foundations.css | 423 +++ docs/_site/assets/css/languages.css | 47 + docs/_site/assets/css/print.css | 203 ++ docs/_site/assets/css/styles.css | 2883 +++++++++++++++++ docs/_site/assets/css/syntax-highlighter.css | 118 + docs/_site/assets/css/tokens/spacing.css | 62 + docs/_site/assets/css/tokens/themes.css | 134 + docs/_site/assets/css/tokens/typography.css | 70 + docs/_site/assets/css/tokens/ui.css | 7 + docs/_site/assets/css/utilities.css | 171 + docs/_site/assets/css/versions.css | 42 + docs/package.json | 4 +- 34 files changed, 5946 insertions(+), 2 deletions(-) create mode 100644 docs/_site/assets/css/carbon-ads.css create mode 100644 docs/_site/assets/css/components/alert.css create mode 100644 docs/_site/assets/css/components/buttons.css create mode 100644 docs/_site/assets/css/components/docs-index.css create mode 100644 docs/_site/assets/css/components/docs-navigation.css create mode 100644 docs/_site/assets/css/components/hero.css create mode 100644 docs/_site/assets/css/components/index.css create mode 100644 docs/_site/assets/css/components/language-switcher.css create mode 100644 docs/_site/assets/css/components/resources.css create mode 100644 docs/_site/assets/css/components/rules.css create mode 100644 docs/_site/assets/css/components/search.css create mode 100644 docs/_site/assets/css/components/social-icons.css create mode 100644 docs/_site/assets/css/components/tabs.css create mode 100644 docs/_site/assets/css/components/theme-switcher.css create mode 100644 docs/_site/assets/css/components/toc.css create mode 100644 docs/_site/assets/css/components/version-switcher.css create mode 100644 docs/_site/assets/css/docs-footer.css create mode 100644 docs/_site/assets/css/docs-header.css create mode 100644 docs/_site/assets/css/docs.css create mode 100644 docs/_site/assets/css/eslint-site-footer.css create mode 100644 docs/_site/assets/css/eslint-site-header.css create mode 100644 docs/_site/assets/css/forms.css create mode 100644 docs/_site/assets/css/foundations.css create mode 100644 docs/_site/assets/css/languages.css create mode 100644 docs/_site/assets/css/print.css create mode 100644 docs/_site/assets/css/styles.css create mode 100644 docs/_site/assets/css/syntax-highlighter.css create mode 100644 docs/_site/assets/css/tokens/spacing.css create mode 100644 docs/_site/assets/css/tokens/themes.css create mode 100644 docs/_site/assets/css/tokens/typography.css create mode 100644 docs/_site/assets/css/tokens/ui.css create mode 100644 docs/_site/assets/css/utilities.css create mode 100644 docs/_site/assets/css/versions.css diff --git a/docs/_site/assets/css/carbon-ads.css b/docs/_site/assets/css/carbon-ads.css new file mode 100644 index 00000000000..17763f5ca27 --- /dev/null +++ b/docs/_site/assets/css/carbon-ads.css @@ -0,0 +1,112 @@ +@media all and (max-width: 800px) { + .hero-ad { + display: none; + } +} + +#carbonads * { + margin: initial; + padding: initial; +} + +#carbonads { + display: inline-block; + margin: 2rem 0; + padding: 0.6em; + font-size: 1rem; + overflow: hidden; + background-color: var(--body-background-color); + border: 1px solid var(--border-color); + border-radius: 4px; + border-radius: var(--border-radius); + box-shadow: 0 1px 4px 1px hsla(0deg, 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 hsla(250deg, 20%, 50%, 0.6); + background-color: hsla(0deg, 0%, 70%, 0.15); +} + +#carbonads a { + font-weight: 500; + color: inherit; + text-decoration: none; +} + +#carbonads a:hover { + text-decoration: none; + color: var(--link-color); +} + +.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; + line-height: 1rem; + font-size: 0.7em; + font-weight: 500; + text-align: left; +} + +#carbonads .carbon-poweredby { + display: block; + margin-top: 10px; + font-size: 0.5rem; + font-weight: 500; + line-height: 1; + letter-spacing: 0.1ch; + 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/_site/assets/css/components/alert.css b/docs/_site/assets/css/components/alert.css new file mode 100644 index 00000000000..e4714999d44 --- /dev/null +++ b/docs/_site/assets/css/components/alert.css @@ -0,0 +1,108 @@ +.alert { + position: relative; + display: grid; + grid-template-columns: auto 1fr; + padding: 1rem; + gap: 0.75rem; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + align-items: start; + font-size: 0.875rem; + border: 1px solid currentColor; + border-radius: var(--border-radius); +} +.alert.alert--warning { + background-color: var(--color-rose-25); + color: var(--color-rose-600); +} +[data-theme=dark] .alert.alert--warning { + color: var(--color-rose-300); + background-color: var(--color-rose-900); +} +.alert.alert--important { + background-color: var(--color-warning-25); + color: var(--color-warning-600); +} +[data-theme=dark] .alert.alert--important { + color: var(--color-warning-300); + background-color: var(--color-warning-900); +} +.alert.alert--tip { + background-color: var(--color-success-25); + color: var(--color-success-600); +} +[data-theme=dark] .alert.alert--tip { + color: var(--color-success-300); + background-color: var(--color-success-900); +} + +[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__text > p { + margin: 0; +} + +.alert__type { + display: block; + font-weight: 500; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} +.alert--warning .alert__type { + color: var(--color-rose-700); +} +[data-theme=dark] .alert--warning .alert__type { + color: var(--color-rose-200); +} +.alert--important .alert__type { + color: var(--color-warning-700); +} +[data-theme=dark] .alert--important .alert__type { + color: var(--color-warning-200); +} +.alert--tip .alert__type { + color: var(--color-success-700); +} +[data-theme=dark] .alert--tip .alert__type { + color: var(--color-success-200); +} + +.alert__learn-more { + display: block; + font-weight: 500; + margin-top: 0.75rem; + margin-block-start: 0.75rem; +} +.alert--warning .alert__learn-more { + color: var(--color-rose-700); +} +[data-theme=dark] .alert--warning .alert__learn-more { + color: var(--color-rose-200); +} +.alert--important .alert__learn-more { + color: var(--color-warning-700); +} +[data-theme=dark] .alert--important .alert__learn-more { + color: var(--color-warning-200); +} +.alert--tip .alert__learn-more { + color: var(--color-success-700); +} +[data-theme=dark] .alert--tip .alert__learn-more { + color: var(--color-success-200); +} diff --git a/docs/_site/assets/css/components/buttons.css b/docs/_site/assets/css/components/buttons.css new file mode 100644 index 00000000000..843285fe768 --- /dev/null +++ b/docs/_site/assets/css/components/buttons.css @@ -0,0 +1,73 @@ +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: 0.75em 1.125em; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + transition: background-color 0.2s linear, border-color 0.2s linear; +} +.c-btn svg { + color: inherit; +} + +.c-btn--large { + font-size: 1.125rem; + padding: 0.88em 1.5em; +} + +.c-btn--block { + display: flex; + width: 100%; +} + +a.c-btn { + text-decoration: none; + display: inline-flex; + flex-wrap: wrap; + gap: 0.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/_site/assets/css/components/docs-index.css b/docs/_site/assets/css/components/docs-index.css new file mode 100644 index 00000000000..c93060b239c --- /dev/null +++ b/docs/_site/assets/css/components/docs-index.css @@ -0,0 +1,150 @@ +.docs-index .docs-index__list a { + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.75rem; + margin-left: -0.75rem; + margin-inline-start: -0.75rem; + color: var(--headings-color); +} +.docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { + background-color: var(--docs-lightest-background-color); + color: var(--link-color); +} +@media all and (max-width: 1023px) { + .docs-index .docs-index__list a { + padding: 0.5rem 1rem; + margin-left: 0; + margin-inline-start: 0; + } +} + +.docs-index__item { + margin: 0; +} +.docs-index__item ul ul { + padding-left: 0.75rem; +} +.docs-index__item[data-has-children] { + margin-bottom: 0.5rem; +} + +.docs-index__list > .docs-index__item { + margin-top: 1.5rem; + margin-block-start: 1.5rem; +} +.docs-index__list > .docs-index__item > a { + color: var(--icon-color); + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.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 ul[aria-hidden=true] { + display: none; +} + +.index-js ul[aria-hidden=false] { + display: block; +} + +.docs__index__panel[data-open=false] { + display: none; +} +@media all and (min-width: 1024px) { + .docs__index__panel[data-open=false] { + display: block; + } +} +.docs__index__panel[data-open=true] { + display: block; +} +@media all and (min-width: 1024px) { + .docs__index__panel[data-open=true] { + display: block; + } +} + +.docs-index-toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: 0.75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: 0.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: 1024px) { + .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 0.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); +} + +.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; + } +} diff --git a/docs/_site/assets/css/components/docs-navigation.css b/docs/_site/assets/css/components/docs-navigation.css new file mode 100644 index 00000000000..61a71460406 --- /dev/null +++ b/docs/_site/assets/css/components/docs-navigation.css @@ -0,0 +1,129 @@ +.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: 1024px) { + .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 0.2s linear; + display: block; +} +.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: 1024px) { + .docs-nav-panel { + display: flex; + flex-direction: row; + justify-content: center; + } +} +.docs-nav-panel[data-open=false] { + display: none; +} +@media all and (min-width: 1024px) { + .docs-nav-panel[data-open=true] { + display: flex; + flex-direction: row; + justify-content: center; + } +} + +@media all and (min-width: 1024px) { + .docs-nav-panel .mobile-only { + display: none; + } +} + +.docs-site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: 0.5rem; + margin-right: -10px; + margin-inline-start: 0.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 0.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: 1024px) { + .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/_site/assets/css/components/hero.css b/docs/_site/assets/css/components/hero.css new file mode 100644 index 00000000000..acdfbafd3b0 --- /dev/null +++ b/docs/_site/assets/css/components/hero.css @@ -0,0 +1,51 @@ +@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/_site/assets/css/components/index.css b/docs/_site/assets/css/components/index.css new file mode 100644 index 00000000000..f86e464219c --- /dev/null +++ b/docs/_site/assets/css/components/index.css @@ -0,0 +1,97 @@ +.index { + margin-bottom: 4rem; + margin-block-end: 4rem; +} + +.index__item { + margin: 0; +} +.index__item a { + display: block; + color: inherit; + text-decoration: none; + padding: 0.625rem 0.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: 0.75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: 0.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: 1024px) { + .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 0.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: 1024px) { + .index__list[data-open=false] { + display: block; + } +} +.index__list[data-open=true] { + display: block; +} +@media all and (min-width: 1024px) { + .index__list[data-open=true] { + display: block; + } +} diff --git a/docs/_site/assets/css/components/language-switcher.css b/docs/_site/assets/css/components/language-switcher.css new file mode 100644 index 00000000000..ebdb3997c38 --- /dev/null +++ b/docs/_site/assets/css/components/language-switcher.css @@ -0,0 +1,33 @@ +.switcher--language { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.25rem 0.5rem; + position: relative; + width: 100%; + padding: 0; + font-size: inherit; +} +@media all and (min-width: 800px) { + .switcher--language { + justify-content: flex-start; + } +} + +.switcher--language .label__text { + flex: 1 0 10ch; +} + +.switcher--language .switcher__select { + flex: 1 0 12rem; +} +@media all and (max-width: 800px) { + .switcher--language .switcher__select { + max-width: 250px; + } +} + +.language-switcher { + display: inline-flex; +} diff --git a/docs/_site/assets/css/components/resources.css b/docs/_site/assets/css/components/resources.css new file mode 100644 index 00000000000..698d67d1b16 --- /dev/null +++ b/docs/_site/assets/css/components/resources.css @@ -0,0 +1,64 @@ +.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: 0.5rem; + margin-block-end: 0.5rem; + position: relative; + transition: all 0.2s linear; +} +.resource:hover { + background-color: var(--lighter-background-color); +} + +.resource__image { + flex: 1 0 5.5rem; + max-width: 5.5rem; + overflow: hidden; + padding: 0.25rem; +} +.resource__image img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; +} + +.resource__content { + flex: 4; + padding: 0.75rem; + align-self: center; +} + +.resource__title { + text-decoration: none; + color: var(--headings-color); + font-weight: 500; + margin-bottom: 0.125rem; +} +.resource__title::after { + content: ""; + position: absolute; + left: 0; + offset-inline-start: 0; + top: 0; + offset-block-start: 0; + width: 100%; + height: 100%; +} + +.resource__domain, +.resource__domain a { + text-decoration: none; + color: var(--body-text-color); + font-size: 0.875rem; +} + +.resource__icon { + color: var(--headings-color); + margin: 1rem; + align-self: center; +} diff --git a/docs/_site/assets/css/components/rules.css b/docs/_site/assets/css/components/rules.css new file mode 100644 index 00000000000..f7dc19378cd --- /dev/null +++ b/docs/_site/assets/css/components/rules.css @@ -0,0 +1,176 @@ +.rule-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0; + margin-bottom: 3rem; + background-color: var(--lightest-background-color); + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); +} +.rule-categories .rule-category { + margin: 0; + padding: 1rem; + background: none; + border: none; +} +@media screen and (min-width: 768px) { + .rule-categories .rule-category:not(:first-child)::after { + content: ""; + display: block; + padding: 1px; + border-left: 1px solid var(--divider-color); + left: 0; + } +} +@media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) { + .rule-categories .rule-category:not(:first-child)::after { + height: 70%; + position: absolute; + } +} +@media screen and (min-width: 1024px) and (max-width: 1439px) { + .rule-categories .rule-category:nth-child(2)::after { + height: 70%; + position: absolute; + } +} +.rule-categories .rule-category__description { + flex: 1 1 45ch; +} + +.rule-category { + font-size: var(--step--1); + display: flex; + position: relative; + 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: 0.5rem 0; + position: relative; +} +.rule p:last-of-type { + margin: 0; +} + +.rule__content { + flex: 1 1 35ch; +} + +.rule__name { + font-weight: 500; + font-size: 0.875rem; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} + +a.rule__name { + text-decoration: none; +} +a.rule__name:hover { + text-decoration: underline; +} +a.rule__name::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + offset-block-start: 0; + left: 0; + offset-inline-start: 0; +} + +.rule__description { + font-size: var(--step--1); +} + +.rule__categories { + font-size: 0.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: 0.5rem; + margin-inline-start: 0.5rem; + font-size: var(--step--1); + padding: 0 0.5rem; +} +[data-theme=dark] .rule__status { + background: var(--body-background-color); +} + +.rule__categories__type[aria-hidden=true] { + opacity: 0.25; +} + +/* related rules */ +.related-rules__list { + display: flex; + gap: 0.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: 0.625rem; + display: inline-flex; + gap: 0.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); +} + +a.rule-list-item + a.rule-list-item::before { + content: ","; + display: inline-block; + margin-left: 5px; + margin-right: 5px; +} diff --git a/docs/_site/assets/css/components/search.css b/docs/_site/assets/css/components/search.css new file mode 100644 index 00000000000..1732daca3f3 --- /dev/null +++ b/docs/_site/assets/css/components/search.css @@ -0,0 +1,155 @@ +[type=search]::-webkit-search-cancel-button, +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} + +[type=search]::-ms-clear, +[type=search]::-ms-reveal { + display: none; + width: 0; + height: 0; +} + +.search { + margin: 1rem 0; + position: relative; +} + +.search__input-wrapper, +.search__inner-input-wrapper { + position: relative; +} + +.search__clear-btn { + color: var(--body-text-color); + position: absolute; + display: flex; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + right: 1.5rem; + offset-inline-end: 1.5rem; + z-index: 3; + padding: 0; +} +.search__clear-btn svg { + color: inherit; + width: 1rem; + height: 1rem; + border: 1px solid; + border-radius: 50%; +} + +.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; + display: block; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: 0.75rem; + offset-inline-start: 0.75rem; + z-index: 3; +} + +/* search results */ +.search .search-results { + font-size: 0.875rem; + background-color: var(--body-background-color); + z-index: 10; + width: 100%; + border-radius: 0 0 var(--border-radius) var(--border-radius); + border: 1px solid var(--divider-color); + position: relative; + top: 0.25rem; + max-height: 400px; + overflow-y: auto; +} +@media all and (min-width: 1024px) { + .search .search-results { + box-shadow: var(--shadow-lg); + position: absolute; + top: calc(100% + 0.25rem); + } +} +.search .search-results[data-results=true] { + padding: 0; +} +.search .search-results[data-results=false] { + padding: 1rem; +} +.search .search-results:empty { + display: none; +} + +.search-results__list { + list-style: none; + margin: 0; + padding: 0; +} + +.search .search-results__item { + margin: 0; + padding: 0.875rem; + border-bottom: 1px solid var(--lightest-background-color); + border-block-end: 1px solid var(--lightest-background-color); + position: relative; +} +.search .search-results__item:hover { + background-color: var(--lightest-background-color); +} +.search .search-results__item:focus-within { + background-color: var(--lightest-background-color); +} + +.search .search-results__item__title { + font-size: var(--step-0); + font-size: 0.875rem; + margin-bottom: 0; + font-family: var(--text-font); +} +.search .search-results__item__title a { + display: block; + text-decoration: none; + color: var(--link-color); + font: inherit; + padding: 0.25rem 0.75rem; +} +.search .search-results__item__title a:hover { + background-color: inherit; + color: var(--link-color); +} +.search .search-results__item__title a::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; +} + +.search-results__item__context { + margin: 0; + font-size: 0.875rem; + padding-left: 1rem; +} + +.algolia-docsearch-suggestion--highlight { + background-color: var(--color-brand); + color: #fff; + display: inline-block; + padding: 0 2px; + border-radius: 2px; +} +[data-theme=dark] .algolia-docsearch-suggestion--highlight { + background-color: var(--link-color); + color: var(--color-neutral-900); +} diff --git a/docs/_site/assets/css/components/social-icons.css b/docs/_site/assets/css/components/social-icons.css new file mode 100644 index 00000000000..a468f0cd29b --- /dev/null +++ b/docs/_site/assets/css/components/social-icons.css @@ -0,0 +1,20 @@ +.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 0.75rem; +} diff --git a/docs/_site/assets/css/components/tabs.css b/docs/_site/assets/css/components/tabs.css new file mode 100644 index 00000000000..b1ff4281ea2 --- /dev/null +++ b/docs/_site/assets/css/components/tabs.css @@ -0,0 +1,54 @@ +.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: 0.75rem 1.125rem; + align-items: center; + justify-content: center; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: background-color 0.2s linear, border-color 0.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/_site/assets/css/components/theme-switcher.css b/docs/_site/assets/css/components/theme-switcher.css new file mode 100644 index 00000000000..35a51c68c96 --- /dev/null +++ b/docs/_site/assets/css/components/theme-switcher.css @@ -0,0 +1,66 @@ +.theme-switcher { + display: inline-flex; + align-items: center; + gap: 0.5rem; + position: relative; +} + +.theme-switcher-label.theme-switcher-label { + 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: 0.625rem 0.875rem; + display: inline-flex; + align-items: center; + margin: 0; + gap: 0.25rem; + color: inherit; +} +.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] { + 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/_site/assets/css/components/toc.css b/docs/_site/assets/css/components/toc.css new file mode 100644 index 00000000000..90e7d5af556 --- /dev/null +++ b/docs/_site/assets/css/components/toc.css @@ -0,0 +1,102 @@ +@charset "UTF-8"; +.docs-toc { + margin: 2rem 0; +} + +.docs-aside .docs-toc { + display: none; +} +@media all and (min-width: 1400px) { + .docs-toc { + display: none; + } +} +@media all and (min-width: 1400px) { + .docs-aside .docs-toc { + display: block; + } +} + +.c-toc ol { + margin: 0; +} +.c-toc ol li { + position: relative; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; + padding-left: 1rem; + padding-inline-start: 1rem; +} +.c-toc ol li > ol { + margin-top: 0.25rem; +} +.c-toc ol li::before { + content: "└"; + color: var(--icon-color); + position: absolute; + left: -0.4rem; + offset-inline-start: -0.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: 0.5rem; + margin-block-end: 0.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; + 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: 2rem; + margin-inline-start: 2rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); +} +[aria-expanded=true] .toc-trigger-icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.c-toc__panel[data-open=false] { + display: none; +} +.c-toc__panel[data-open=true] { + display: block; +} diff --git a/docs/_site/assets/css/components/version-switcher.css b/docs/_site/assets/css/components/version-switcher.css new file mode 100644 index 00000000000..7881189e549 --- /dev/null +++ b/docs/_site/assets/css/components/version-switcher.css @@ -0,0 +1,4 @@ +.version-switcher { + margin-bottom: 0.5rem; + margin-block-end: 0.5rem; +} diff --git a/docs/_site/assets/css/docs-footer.css b/docs/_site/assets/css/docs-footer.css new file mode 100644 index 00000000000..dd58bb8eb60 --- /dev/null +++ b/docs/_site/assets/css/docs-footer.css @@ -0,0 +1,49 @@ +.docs-footer { + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: space-between; + align-items: baseline; + font-size: 0.875rem; +} +@media all and (max-width: 800px) { + .docs-footer { + padding: 1.5rem 0 4rem; + align-items: center; + } +} + +.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; + } +} diff --git a/docs/_site/assets/css/docs-header.css b/docs/_site/assets/css/docs-header.css new file mode 100644 index 00000000000..1b657cf31c8 --- /dev/null +++ b/docs/_site/assets/css/docs-header.css @@ -0,0 +1,39 @@ +.site-header { + padding: 0.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: 0.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/_site/assets/css/docs.css b/docs/_site/assets/css/docs.css new file mode 100644 index 00000000000..eb75837c99a --- /dev/null +++ b/docs/_site/assets/css/docs.css @@ -0,0 +1,155 @@ +/* docs layout styles */ +html { + scroll-behavior: smooth; +} + +.docs { + max-width: 1700px; + margin: 0 auto; +} + +.docs-aside__content { + flex: 1; +} + +.docs-wrapper { + padding: 0 var(--space-s-l); + flex: 1; + display: flex; + flex-direction: column; +} +@media all and (min-width: 1024px) { + .docs-wrapper { + display: grid; + grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); + align-items: stretch; + } +} + +.docs-nav { + grid-column: 1/2; + grid-row: 1/2; + padding-top: var(--space-l-xl); + padding-block-start: var(--space-l-xl); + font-size: 0.875rem; + display: grid; + grid-auto-rows: max-content; + align-items: start; +} +@media all and (min-width: 1024px) { + .docs-nav { + padding: var(--space-l-xl) 0; + padding-right: var(--space-s-l); + padding-inline-end: var(--space-s-l); + border-right: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); + } +} + +.docs-content { + grid-column: 2/3; + padding: var(--space-l-xl) 0; + flex: 1; +} +@media all and (min-width: 800px) { + .docs-content { + display: grid; + grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr); + grid-gap: 1rem; + } +} +@media all and (min-width: 1024px) { + .docs-content { + padding: 0; + } +} +@media all and (min-width: 1300px) { + .docs-content { + grid-gap: 2rem; + } +} + +.docs-main { + flex: 1 1 68ch; +} +@media all and (min-width: 800px) { + .docs-main { + padding-right: var(--space-s-l); + padding-inline-end: var(--space-s-l); + border-right: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); + } +} +@media all and (min-width: 1024px) { + .docs-main { + padding: var(--space-l-xl) var(--space-l-2xl); + } +} + +.docs-aside { + grid-column: 2/3; + display: flex; + flex-direction: column; +} +@media all and (min-width: 800px) { + .docs-aside { + padding: var(--space-l-xl) 0; + } +} + +.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.correct, +div.incorrect { + position: relative; +} +div.correct::after, +div.incorrect::after { + position: absolute; + top: -22px; + right: -22px; + offset-inline-end: -22px; + offset-block-start: -22px; +} + +div.correct::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.incorrect::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: 0.5rem; + right: 0.5rem; + offset-block-end: 0.5rem; + offset-inline-end: 0.5rem; +} +@media all and (max-width: 768px) { + .c-btn.c-btn--playground { + display: none; + } +} + +@media (hover: none) { + .anchorjs-link { + opacity: 1; + } +} diff --git a/docs/_site/assets/css/eslint-site-footer.css b/docs/_site/assets/css/eslint-site-footer.css new file mode 100644 index 00000000000..bc21a43d961 --- /dev/null +++ b/docs/_site/assets/css/eslint-site-footer.css @@ -0,0 +1,56 @@ +.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: 0.5rem; + margin-inline-end: 0.5rem; +} +.footer-legal-links ul li:not(:last-of-type)::after { + content: "|"; + margin-left: 0.5rem; + margin-inline-start: 0.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; + } +} diff --git a/docs/_site/assets/css/eslint-site-header.css b/docs/_site/assets/css/eslint-site-header.css new file mode 100644 index 00000000000..4d341d3e3a3 --- /dev/null +++ b/docs/_site/assets/css/eslint-site-header.css @@ -0,0 +1,40 @@ +.site-header { + padding: 0.75rem 0; + border-top: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); +} +.site-header .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) { + .site-header .content-container { + 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: 0.5rem 0; + z-index: 2; +} + +.logo svg { + display: inline-block; + margin-bottom: -4px; + margin-block-end: -4px; + width: 100%; + max-width: 100px; + height: auto; +} diff --git a/docs/_site/assets/css/forms.css b/docs/_site/assets/css/forms.css new file mode 100644 index 00000000000..e2c9a4b1ccf --- /dev/null +++ b/docs/_site/assets/css/forms.css @@ -0,0 +1,51 @@ +.c-custom-select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + min-width: 0; + padding: 0.625rem 0.875rem; + padding-right: 2.1875rem; + padding-inline-end: 2.1875rem; + font: inherit; + color: var(--body-text-color); + 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 0.875rem top 50%, 0 0; + background-size: 1em auto, 100%; +} + +.label__text.label__text { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-family: var(--text-font); + color: inherit; + font-weight: 400; + line-height: 1.5; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} + +input { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 0.625rem 0.875rem; + font: inherit; + font-size: 1rem; + display: block; + min-width: 0; + line-height: 1.3; + max-width: 100%; + background-color: var(--body-background-color); + color: inherit; +} diff --git a/docs/_site/assets/css/foundations.css b/docs/_site/assets/css/foundations.css new file mode 100644 index 00000000000..bc6c01508af --- /dev/null +++ b/docs/_site/assets/css/foundations.css @@ -0,0 +1,423 @@ +::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; +} + +input:focus-visible { + outline: 2px solid var(--link-color); + border-color: var(--border-color); +} + +input:focus { + outline: 2px solid transparent; + box-shadow: 0 0 0 2px var(--link-color); +} + +*, +*::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 0.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); + font-variant-ligatures: none; +} + +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 0.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: 0.25rem 0.5rem; + border: 1px solid var(--divider-color); +} +table th { + background-color: var(--lightest-background-color); + padding: 0.25rem 0.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 0.1s linear; +} +.side-header a { + color: inherit; + text-decoration: none; +} + +svg { + flex: none; + transition: color 0.1s linear; +} + +p { + margin: 0 0 1.5em; +} +:matches(nav, .posts-collection) p { + margin-bottom: 0.75em; + margin-block-end: 0.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 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 0.15s linear; + outline-offset: 3px; + } +} +/* typography */ +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; +} + +.docs-main h2, .components-main h2, +.docs-main h3, +.components-main h3, +.docs-main h4, +.components-main h4, +.docs-main h5, +.components-main h5, +.docs-main h6, +.components-main h6 { + margin-top: 3rem; + margin-bottom: 1.5rem; + margin-block-start: 3rem; + margin-block-end: 1.5rem; +} +.docs-main h2:first-child, .components-main h2:first-child, +.docs-main h3:first-child, +.components-main h3:first-child, +.docs-main h4:first-child, +.components-main h4:first-child, +.docs-main h5:first-child, +.components-main h5:first-child, +.docs-main h6:first-child, +.components-main h6:first-child { + margin-top: 0; + margin-block-start: 0; +} + +small, +caption, +cite, +figcaption { + font-size: var(--step--1); +} + +h6, +.h6 { + font-size: var(--step-0); +} + +h5, +.h5 { + font-size: var(--step-0); +} + +h4, +.h4 { + font-size: var(--step-1); +} + +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; +} + +.h0 { + font-size: var(--step-6); + line-height: 1.2; +} diff --git a/docs/_site/assets/css/languages.css b/docs/_site/assets/css/languages.css new file mode 100644 index 00000000000..974dd279359 --- /dev/null +++ b/docs/_site/assets/css/languages.css @@ -0,0 +1,47 @@ +@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; + width: 100%; + padding: 0.75rem 0.1rem; + text-decoration: none; + display: block; + 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: 0.5rem; + margin-inline-end: 0.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/_site/assets/css/print.css b/docs/_site/assets/css/print.css new file mode 100644 index 00000000000..629a5f8322d --- /dev/null +++ b/docs/_site/assets/css/print.css @@ -0,0 +1,203 @@ +*, +*::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*="eslint.org"])::after { + content: " (" attr(href) ")"; +} + +.resource a::after { + display: none; +} + +ul { + page-break-inside: avoid; +} + +.docs-toc, +.docs-index, +.docs-aside, +#skip-link { + display: none; +} + +@media print { + @page { + margin: 1cm; + } +} diff --git a/docs/_site/assets/css/styles.css b/docs/_site/assets/css/styles.css new file mode 100644 index 00000000000..8dbaccf5b59 --- /dev/null +++ b/docs/_site/assets/css/styles.css @@ -0,0 +1,2883 @@ +@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) { + :root { + --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; + } +} +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,1023,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|l-3xl|s-l */ +:root { + --fluid-min-width: 320; + --fluid-max-width: 1023; + --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: 1024px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); + } +} +: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, 16)); + --fc-s-max: (var(--f-0-max, 16)); + --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)); + --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp)); +} + +/* @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: "Mono Punctuators", "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: + 0 12px 16px -4px rgba(16, 24, 40, 0.1), + 0 4px 6px -2px rgba(16, 24, 40, 0.05); + --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); + --border-radius: .5rem; +} + +::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; +} + +input:focus-visible { + outline: 2px solid var(--link-color); + border-color: var(--border-color); +} + +input:focus { + outline: 2px solid transparent; + box-shadow: 0 0 0 2px var(--link-color); +} + +*, +*::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 0.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); + font-variant-ligatures: none; +} + +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 0.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: 0.25rem 0.5rem; + border: 1px solid var(--divider-color); +} +table th { + background-color: var(--lightest-background-color); + padding: 0.25rem 0.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 0.1s linear; +} +.side-header a { + color: inherit; + text-decoration: none; +} + +svg { + flex: none; + transition: color 0.1s linear; +} + +p { + margin: 0 0 1.5em; +} +:matches(nav, .posts-collection) p { + margin-bottom: 0.75em; + margin-block-end: 0.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 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 0.15s linear; + outline-offset: 3px; + } +} +/* typography */ +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; +} + +.docs-main h2, .components-main h2, +.docs-main h3, +.components-main h3, +.docs-main h4, +.components-main h4, +.docs-main h5, +.components-main h5, +.docs-main h6, +.components-main h6 { + margin-top: 3rem; + margin-bottom: 1.5rem; + margin-block-start: 3rem; + margin-block-end: 1.5rem; +} +.docs-main h2:first-child, .components-main h2:first-child, +.docs-main h3:first-child, +.components-main h3:first-child, +.docs-main h4:first-child, +.components-main h4:first-child, +.docs-main h5:first-child, +.components-main h5:first-child, +.docs-main h6:first-child, +.components-main h6:first-child { + margin-top: 0; + margin-block-start: 0; +} + +small, +caption, +cite, +figcaption { + font-size: var(--step--1); +} + +h6, +.h6 { + font-size: var(--step-0); +} + +h5, +.h5 { + font-size: var(--step-0); +} + +h4, +.h4 { + font-size: var(--step-1); +} + +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; +} + +.h0 { + font-size: var(--step-6); + line-height: 1.2; +} + +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; + font-variant-ligatures: none; + -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; + 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: 0.1em; + border-radius: 0.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: 0.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 { + font-variant-ligatures: none; +} + +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: 0.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: 0.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; + font-size: 0.875rem; +} +@media all and (max-width: 800px) { + .docs-footer { + padding: 1.5rem 0 4rem; + align-items: center; + } +} + +.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: 0.5rem; + margin-inline-end: 0.5rem; +} +.footer-legal-links ul li:not(:last-of-type)::after { + content: "|"; + margin-left: 0.5rem; + margin-inline-start: 0.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; + } +} + +.site-header { + padding: 0.75rem 0; + border-top: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); + border-bottom: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); +} +.site-header .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) { + .site-header .content-container { + 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: 0.5rem 0; + z-index: 2; +} + +.logo svg { + display: inline-block; + margin-bottom: -4px; + margin-block-end: -4px; + width: 100%; + max-width: 100px; + height: auto; +} + +.c-custom-select { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + box-sizing: border-box; + display: block; + width: 100%; + max-width: 100%; + min-width: 0; + padding: 0.625rem 0.875rem; + padding-right: 2.1875rem; + padding-inline-end: 2.1875rem; + font: inherit; + color: var(--body-text-color); + 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 0.875rem top 50%, 0 0; + background-size: 1em auto, 100%; +} + +.label__text.label__text { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-family: var(--text-font); + color: inherit; + font-weight: 400; + line-height: 1.5; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} + +input { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 0.625rem 0.875rem; + font: inherit; + font-size: 1rem; + display: block; + min-width: 0; + line-height: 1.3; + max-width: 100%; + background-color: var(--body-background-color); + color: inherit; +} + +/* docs layout styles */ +html { + scroll-behavior: smooth; +} + +.docs { + max-width: 1700px; + margin: 0 auto; +} + +.docs-aside__content { + flex: 1; +} + +.docs-wrapper { + padding: 0 var(--space-s-l); + flex: 1; + display: flex; + flex-direction: column; +} +@media all and (min-width: 1024px) { + .docs-wrapper { + display: grid; + grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); + align-items: stretch; + } +} + +.docs-nav { + grid-column: 1/2; + grid-row: 1/2; + padding-top: var(--space-l-xl); + padding-block-start: var(--space-l-xl); + font-size: 0.875rem; + display: grid; + grid-auto-rows: max-content; + align-items: start; +} +@media all and (min-width: 1024px) { + .docs-nav { + padding: var(--space-l-xl) 0; + padding-right: var(--space-s-l); + padding-inline-end: var(--space-s-l); + border-right: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); + } +} + +.docs-content { + grid-column: 2/3; + padding: var(--space-l-xl) 0; + flex: 1; +} +@media all and (min-width: 800px) { + .docs-content { + display: grid; + grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr); + grid-gap: 1rem; + } +} +@media all and (min-width: 1024px) { + .docs-content { + padding: 0; + } +} +@media all and (min-width: 1300px) { + .docs-content { + grid-gap: 2rem; + } +} + +.docs-main { + flex: 1 1 68ch; +} +@media all and (min-width: 800px) { + .docs-main { + padding-right: var(--space-s-l); + padding-inline-end: var(--space-s-l); + border-right: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); + } +} +@media all and (min-width: 1024px) { + .docs-main { + padding: var(--space-l-xl) var(--space-l-2xl); + } +} + +.docs-aside { + grid-column: 2/3; + display: flex; + flex-direction: column; +} +@media all and (min-width: 800px) { + .docs-aside { + padding: var(--space-l-xl) 0; + } +} + +.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.correct, +div.incorrect { + position: relative; +} +div.correct::after, +div.incorrect::after { + position: absolute; + top: -22px; + right: -22px; + offset-inline-end: -22px; + offset-block-start: -22px; +} + +div.correct::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.incorrect::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: 0.5rem; + right: 0.5rem; + offset-block-end: 0.5rem; + offset-inline-end: 0.5rem; +} +@media all and (max-width: 768px) { + .c-btn.c-btn--playground { + display: none; + } +} + +@media (hover: none) { + .anchorjs-link { + opacity: 1; + } +} +.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); + width: 100%; + padding: 1rem 0.5rem; + text-decoration: none; + display: block; + 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; +} + +.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; + width: 100%; + padding: 0.75rem 0.1rem; + text-decoration: none; + display: block; + 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: 0.5rem; + margin-inline-end: 0.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; +} + +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: 0.75em 1.125em; + align-items: center; + justify-content: center; + border-radius: var(--border-radius); + transition: background-color 0.2s linear, border-color 0.2s linear; +} +.c-btn svg { + color: inherit; +} + +.c-btn--large { + font-size: 1.125rem; + padding: 0.88em 1.5em; +} + +.c-btn--block { + display: flex; + width: 100%; +} + +a.c-btn { + text-decoration: none; + display: inline-flex; + flex-wrap: wrap; + gap: 0.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: 1024px) { + .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 0.2s linear; + display: block; +} +.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: 1024px) { + .docs-nav-panel { + display: flex; + flex-direction: row; + justify-content: center; + } +} +.docs-nav-panel[data-open=false] { + display: none; +} +@media all and (min-width: 1024px) { + .docs-nav-panel[data-open=true] { + display: flex; + flex-direction: row; + justify-content: center; + } +} + +@media all and (min-width: 1024px) { + .docs-nav-panel .mobile-only { + display: none; + } +} + +.docs-site-nav-toggle { + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: 0.5rem; + margin-right: -10px; + margin-inline-start: 0.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 0.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: 1024px) { + .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; +} + +.docs-aside .docs-toc { + display: none; +} +@media all and (min-width: 1400px) { + .docs-toc { + display: none; + } +} +@media all and (min-width: 1400px) { + .docs-aside .docs-toc { + display: block; + } +} + +.c-toc ol { + margin: 0; +} +.c-toc ol li { + position: relative; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; + padding-left: 1rem; + padding-inline-start: 1rem; +} +.c-toc ol li > ol { + margin-top: 0.25rem; +} +.c-toc ol li::before { + content: "└"; + color: var(--icon-color); + position: absolute; + left: -0.4rem; + offset-inline-start: -0.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: 0.5rem; + margin-block-end: 0.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; + 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: 2rem; + margin-inline-start: 2rem; + transition: all 0.1s linear; + color: var(--color-neutral-400); +} +[aria-expanded=true] .toc-trigger-icon { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.c-toc__panel[data-open=false] { + display: none; +} +.c-toc__panel[data-open=true] { + display: block; +} + +[type=search]::-webkit-search-cancel-button, +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} + +[type=search]::-ms-clear, +[type=search]::-ms-reveal { + display: none; + width: 0; + height: 0; +} + +.search { + margin: 1rem 0; + position: relative; +} + +.search__input-wrapper, +.search__inner-input-wrapper { + position: relative; +} + +.search__clear-btn { + color: var(--body-text-color); + position: absolute; + display: flex; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + right: 1.5rem; + offset-inline-end: 1.5rem; + z-index: 3; + padding: 0; +} +.search__clear-btn svg { + color: inherit; + width: 1rem; + height: 1rem; + border: 1px solid; + border-radius: 50%; +} + +.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; + display: block; + top: 50%; + offset-block-start: 50%; + transform: translateY(-50%); + left: 0.75rem; + offset-inline-start: 0.75rem; + z-index: 3; +} + +/* search results */ +.search .search-results { + font-size: 0.875rem; + background-color: var(--body-background-color); + z-index: 10; + width: 100%; + border-radius: 0 0 var(--border-radius) var(--border-radius); + border: 1px solid var(--divider-color); + position: relative; + top: 0.25rem; + max-height: 400px; + overflow-y: auto; +} +@media all and (min-width: 1024px) { + .search .search-results { + box-shadow: var(--shadow-lg); + position: absolute; + top: calc(100% + 0.25rem); + } +} +.search .search-results[data-results=true] { + padding: 0; +} +.search .search-results[data-results=false] { + padding: 1rem; +} +.search .search-results:empty { + display: none; +} + +.search-results__list { + list-style: none; + margin: 0; + padding: 0; +} + +.search .search-results__item { + margin: 0; + padding: 0.875rem; + border-bottom: 1px solid var(--lightest-background-color); + border-block-end: 1px solid var(--lightest-background-color); + position: relative; +} +.search .search-results__item:hover { + background-color: var(--lightest-background-color); +} +.search .search-results__item:focus-within { + background-color: var(--lightest-background-color); +} + +.search .search-results__item__title { + font-size: var(--step-0); + font-size: 0.875rem; + margin-bottom: 0; + font-family: var(--text-font); +} +.search .search-results__item__title a { + display: block; + text-decoration: none; + color: var(--link-color); + font: inherit; + padding: 0.25rem 0.75rem; +} +.search .search-results__item__title a:hover { + background-color: inherit; + color: var(--link-color); +} +.search .search-results__item__title a::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; +} + +.search-results__item__context { + margin: 0; + font-size: 0.875rem; + padding-left: 1rem; +} + +.algolia-docsearch-suggestion--highlight { + background-color: var(--color-brand); + color: #fff; + display: inline-block; + padding: 0 2px; + border-radius: 2px; +} +[data-theme=dark] .algolia-docsearch-suggestion--highlight { + background-color: var(--link-color); + color: var(--color-neutral-900); +} + +.alert { + position: relative; + display: grid; + grid-template-columns: auto 1fr; + padding: 1rem; + gap: 0.75rem; + margin-bottom: 1.5rem; + margin-block-end: 1.5rem; + align-items: start; + font-size: 0.875rem; + border: 1px solid currentColor; + border-radius: var(--border-radius); +} +.alert.alert--warning { + background-color: var(--color-rose-25); + color: var(--color-rose-600); +} +[data-theme=dark] .alert.alert--warning { + color: var(--color-rose-300); + background-color: var(--color-rose-900); +} +.alert.alert--important { + background-color: var(--color-warning-25); + color: var(--color-warning-600); +} +[data-theme=dark] .alert.alert--important { + color: var(--color-warning-300); + background-color: var(--color-warning-900); +} +.alert.alert--tip { + background-color: var(--color-success-25); + color: var(--color-success-600); +} +[data-theme=dark] .alert.alert--tip { + color: var(--color-success-300); + background-color: var(--color-success-900); +} + +[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__text > p { + margin: 0; +} + +.alert__type { + display: block; + font-weight: 500; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} +.alert--warning .alert__type { + color: var(--color-rose-700); +} +[data-theme=dark] .alert--warning .alert__type { + color: var(--color-rose-200); +} +.alert--important .alert__type { + color: var(--color-warning-700); +} +[data-theme=dark] .alert--important .alert__type { + color: var(--color-warning-200); +} +.alert--tip .alert__type { + color: var(--color-success-700); +} +[data-theme=dark] .alert--tip .alert__type { + color: var(--color-success-200); +} + +.alert__learn-more { + display: block; + font-weight: 500; + margin-top: 0.75rem; + margin-block-start: 0.75rem; +} +.alert--warning .alert__learn-more { + color: var(--color-rose-700); +} +[data-theme=dark] .alert--warning .alert__learn-more { + color: var(--color-rose-200); +} +.alert--important .alert__learn-more { + color: var(--color-warning-700); +} +[data-theme=dark] .alert--important .alert__learn-more { + color: var(--color-warning-200); +} +.alert--tip .alert__learn-more { + color: var(--color-success-700); +} +[data-theme=dark] .alert--tip .alert__learn-more { + color: var(--color-success-200); +} + +.rule-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0; + margin-bottom: 3rem; + background-color: var(--lightest-background-color); + border: 1px solid var(--divider-color); + border-radius: var(--border-radius); +} +.rule-categories .rule-category { + margin: 0; + padding: 1rem; + background: none; + border: none; +} +@media screen and (min-width: 768px) { + .rule-categories .rule-category:not(:first-child)::after { + content: ""; + display: block; + padding: 1px; + border-left: 1px solid var(--divider-color); + left: 0; + } +} +@media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) { + .rule-categories .rule-category:not(:first-child)::after { + height: 70%; + position: absolute; + } +} +@media screen and (min-width: 1024px) and (max-width: 1439px) { + .rule-categories .rule-category:nth-child(2)::after { + height: 70%; + position: absolute; + } +} +.rule-categories .rule-category__description { + flex: 1 1 45ch; +} + +.rule-category { + font-size: var(--step--1); + display: flex; + position: relative; + 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: 0.5rem 0; + position: relative; +} +.rule p:last-of-type { + margin: 0; +} + +.rule__content { + flex: 1 1 35ch; +} + +.rule__name { + font-weight: 500; + font-size: 0.875rem; + margin-bottom: 0.25rem; + margin-block-end: 0.25rem; +} + +a.rule__name { + text-decoration: none; +} +a.rule__name:hover { + text-decoration: underline; +} +a.rule__name::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + top: 0; + offset-block-start: 0; + left: 0; + offset-inline-start: 0; +} + +.rule__description { + font-size: var(--step--1); +} + +.rule__categories { + font-size: 0.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: 0.5rem; + margin-inline-start: 0.5rem; + font-size: var(--step--1); + padding: 0 0.5rem; +} +[data-theme=dark] .rule__status { + background: var(--body-background-color); +} + +.rule__categories__type[aria-hidden=true] { + opacity: 0.25; +} + +/* related rules */ +.related-rules__list { + display: flex; + gap: 0.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: 0.625rem; + display: inline-flex; + gap: 0.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); +} + +a.rule-list-item + a.rule-list-item::before { + content: ","; + display: inline-block; + margin-left: 5px; + margin-right: 5px; +} + +.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 0.75rem; +} + +@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: 0.5rem; + position: relative; +} + +.theme-switcher-label.theme-switcher-label { + 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: 0.625rem 0.875rem; + display: inline-flex; + align-items: center; + margin: 0; + gap: 0.25rem; + color: inherit; +} +.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] { + 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: 0.5rem; + margin-block-end: 0.5rem; +} + +.switcher--language { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.25rem 0.5rem; + position: relative; + width: 100%; + padding: 0; + font-size: inherit; +} +@media all and (min-width: 800px) { + .switcher--language { + justify-content: flex-start; + } +} + +.switcher--language .label__text { + flex: 1 0 10ch; +} + +.switcher--language .switcher__select { + flex: 1 0 12rem; +} +@media all and (max-width: 800px) { + .switcher--language .switcher__select { + max-width: 250px; + } +} + +.language-switcher { + display: inline-flex; +} + +.docs-index .docs-index__list a { + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.75rem; + margin-left: -0.75rem; + margin-inline-start: -0.75rem; + color: var(--headings-color); +} +.docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { + background-color: var(--docs-lightest-background-color); + color: var(--link-color); +} +@media all and (max-width: 1023px) { + .docs-index .docs-index__list a { + padding: 0.5rem 1rem; + margin-left: 0; + margin-inline-start: 0; + } +} + +.docs-index__item { + margin: 0; +} +.docs-index__item ul ul { + padding-left: 0.75rem; +} +.docs-index__item[data-has-children] { + margin-bottom: 0.5rem; +} + +.docs-index__list > .docs-index__item { + margin-top: 1.5rem; + margin-block-start: 1.5rem; +} +.docs-index__list > .docs-index__item > a { + color: var(--icon-color); + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.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 ul[aria-hidden=true] { + display: none; +} + +.index-js ul[aria-hidden=false] { + display: block; +} + +.docs__index__panel[data-open=false] { + display: none; +} +@media all and (min-width: 1024px) { + .docs__index__panel[data-open=false] { + display: block; + } +} +.docs__index__panel[data-open=true] { + display: block; +} +@media all and (min-width: 1024px) { + .docs__index__panel[data-open=true] { + display: block; + } +} + +.docs-index-toggle { + cursor: pointer; + display: flex; + width: 100%; + padding: 0.75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: 0.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: 1024px) { + .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 0.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); +} + +.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; + } +} + +.index { + margin-bottom: 4rem; + margin-block-end: 4rem; +} + +.index__item { + margin: 0; +} +.index__item a { + display: block; + color: inherit; + text-decoration: none; + padding: 0.625rem 0.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: 0.75rem 1.125rem; + align-items: center; + justify-content: space-between; + gap: 0.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: 1024px) { + .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 0.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: 1024px) { + .index__list[data-open=false] { + display: block; + } +} +.index__list[data-open=true] { + display: block; +} +@media all and (min-width: 1024px) { + .index__list[data-open=true] { + display: block; + } +} + +.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: 0.75rem 1.125rem; + align-items: center; + justify-content: center; + border-radius: var(--border-radius) var(--border-radius) 0 0; + transition: background-color 0.2s linear, border-color 0.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: 0.5rem; + margin-block-end: 0.5rem; + position: relative; + transition: all 0.2s linear; +} +.resource:hover { + background-color: var(--lighter-background-color); +} + +.resource__image { + flex: 1 0 5.5rem; + max-width: 5.5rem; + overflow: hidden; + padding: 0.25rem; +} +.resource__image img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; +} + +.resource__content { + flex: 4; + padding: 0.75rem; + align-self: center; +} + +.resource__title { + text-decoration: none; + color: var(--headings-color); + font-weight: 500; + margin-bottom: 0.125rem; +} +.resource__title::after { + content: ""; + position: absolute; + left: 0; + offset-inline-start: 0; + top: 0; + offset-block-start: 0; + width: 100%; + height: 100%; +} + +.resource__domain, +.resource__domain a { + text-decoration: none; + color: var(--body-text-color); + font-size: 0.875rem; +} + +.resource__icon { + color: var(--headings-color); + margin: 1rem; + align-self: center; +} + +@media all and (max-width: 800px) { + .hero-ad { + display: none; + } +} + +#carbonads * { + margin: initial; + padding: initial; +} + +#carbonads { + display: inline-block; + margin: 2rem 0; + padding: 0.6em; + font-size: 1rem; + overflow: hidden; + background-color: var(--body-background-color); + border: 1px solid var(--border-color); + border-radius: 4px; + border-radius: var(--border-radius); + box-shadow: 0 1px 4px 1px hsla(0deg, 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 hsla(250deg, 20%, 50%, 0.6); + background-color: hsla(0deg, 0%, 70%, 0.15); +} + +#carbonads a { + font-weight: 500; + color: inherit; + text-decoration: none; +} + +#carbonads a:hover { + text-decoration: none; + color: var(--link-color); +} + +.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; + line-height: 1rem; + font-size: 0.7em; + font-weight: 500; + text-align: left; +} + +#carbonads .carbon-poweredby { + display: block; + margin-top: 10px; + font-size: 0.5rem; + font-weight: 500; + line-height: 1; + letter-spacing: 0.1ch; + 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: 1024px) { + .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: 1024px) { + .mobile-only { + display: none; + } +} + +@media all and (max-width: 1023px) { + .desktop-only { + display: none; + } +} + +.text.text { + 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: 0.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/_site/assets/css/syntax-highlighter.css b/docs/_site/assets/css/syntax-highlighter.css new file mode 100644 index 00000000000..4b457da72a6 --- /dev/null +++ b/docs/_site/assets/css/syntax-highlighter.css @@ -0,0 +1,118 @@ +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; + font-variant-ligatures: none; + -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; + 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: 0.1em; + border-radius: 0.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: 0.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 { + font-variant-ligatures: none; +} + +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/_site/assets/css/tokens/spacing.css b/docs/_site/assets/css/tokens/spacing.css new file mode 100644 index 00000000000..79127b56cbc --- /dev/null +++ b/docs/_site/assets/css/tokens/spacing.css @@ -0,0 +1,62 @@ +/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1023,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|l-3xl|s-l */ +:root { + --fluid-min-width: 320; + --fluid-max-width: 1023; + --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: 1024px) { + :root { + --fluid-screen: calc(var(--fluid-max-width) * 1px); + } +} +: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, 16)); + --fc-s-max: (var(--f-0-max, 16)); + --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)); + --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp)); + --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp)); +} diff --git a/docs/_site/assets/css/tokens/themes.css b/docs/_site/assets/css/tokens/themes.css new file mode 100644 index 00000000000..4b74f944080 --- /dev/null +++ b/docs/_site/assets/css/tokens/themes.css @@ -0,0 +1,134 @@ +: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) { + :root { + --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; + } +} +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/_site/assets/css/tokens/typography.css b/docs/_site/assets/css/tokens/typography.css new file mode 100644 index 00000000000..0226328aa91 --- /dev/null +++ b/docs/_site/assets/css/tokens/typography.css @@ -0,0 +1,70 @@ +/* @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: "Mono Punctuators", "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/_site/assets/css/tokens/ui.css b/docs/_site/assets/css/tokens/ui.css new file mode 100644 index 00000000000..12600058819 --- /dev/null +++ b/docs/_site/assets/css/tokens/ui.css @@ -0,0 +1,7 @@ +:root { + --shadow-lg: + 0 12px 16px -4px rgba(16, 24, 40, 0.1), + 0 4px 6px -2px rgba(16, 24, 40, 0.05); + --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); + --border-radius: .5rem; +} diff --git a/docs/_site/assets/css/utilities.css b/docs/_site/assets/css/utilities.css new file mode 100644 index 00000000000..dab123e8e68 --- /dev/null +++ b/docs/_site/assets/css/utilities.css @@ -0,0 +1,171 @@ +@media all and (min-width: 1024px) { + .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: 1024px) { + .mobile-only { + display: none; + } +} + +@media all and (max-width: 1023px) { + .desktop-only { + display: none; + } +} + +.text.text { + 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: 0.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/_site/assets/css/versions.css b/docs/_site/assets/css/versions.css new file mode 100644 index 00000000000..ebeccc2a72d --- /dev/null +++ b/docs/_site/assets/css/versions.css @@ -0,0 +1,42 @@ +@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); + width: 100%; + padding: 1rem 0.5rem; + text-decoration: none; + display: block; + 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/package.json b/docs/package.json index e0defad6d23..989417f314b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,9 +10,9 @@ "files": [], "scripts": { "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", - "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css", + "watch:sass": "sass --watch --poll src/assets/scss:_site/assets/css", "watch:eleventy": "eleventy --serve --port=2023", - "build:sass": "sass --style=compressed src/assets/scss:src/assets/css --no-source-map", + "build:sass": "sass src/assets/scss:_site/assets/css --no-source-map", "build:eleventy": "npx @11ty/eleventy", "start": "npm-run-all build:sass --parallel watch:*", "build": "npm-run-all build:sass build:eleventy images", From 24fc840ef8edd8a741f52ce9a1886b38618d6b58 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:42:47 -0400 Subject: [PATCH 2/9] docs: use Autoprefixer for current and IE11 --- docs/_site/assets/css/components/alert.css | 9 +- .../assets/css/components/docs-index.css | 10 +- .../assets/css/components/docs-navigation.css | 21 +- docs/_site/assets/css/components/hero.css | 9 +- docs/_site/assets/css/components/index.css | 3 +- .../_site/assets/css/components/resources.css | 6 +- docs/_site/assets/css/components/rules.css | 6 +- docs/_site/assets/css/components/search.css | 6 +- .../assets/css/components/social-icons.css | 6 +- docs/_site/assets/css/components/tabs.css | 12 +- .../assets/css/components/theme-switcher.css | 6 +- docs/_site/assets/css/components/toc.css | 14 +- .../css/components/version-switcher.css | 3 +- docs/_site/assets/css/docs-header.css | 15 +- docs/_site/assets/css/docs.css | 18 +- docs/_site/assets/css/eslint-site-footer.css | 21 +- docs/_site/assets/css/eslint-site-header.css | 15 +- docs/_site/assets/css/forms.css | 6 +- docs/_site/assets/css/foundations.css | 44 ++- docs/_site/assets/css/languages.css | 12 +- docs/_site/assets/css/styles.css | 267 ++++++++++++------ docs/_site/assets/css/syntax-highlighter.css | 7 +- docs/_site/assets/css/utilities.css | 6 +- docs/_site/assets/css/versions.css | 12 +- docs/package.json | 11 +- docs/postcss.config.js | 6 + 26 files changed, 370 insertions(+), 181 deletions(-) create mode 100644 docs/postcss.config.js diff --git a/docs/_site/assets/css/components/alert.css b/docs/_site/assets/css/components/alert.css index e4714999d44..b401f4e5bb3 100644 --- a/docs/_site/assets/css/components/alert.css +++ b/docs/_site/assets/css/components/alert.css @@ -5,7 +5,8 @@ padding: 1rem; gap: 0.75rem; margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; align-items: start; font-size: 0.875rem; border: 1px solid currentColor; @@ -61,7 +62,8 @@ display: block; font-weight: 500; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } .alert--warning .alert__type { color: var(--color-rose-700); @@ -86,7 +88,8 @@ display: block; font-weight: 500; margin-top: 0.75rem; - margin-block-start: 0.75rem; + -webkit-margin-before: 0.75rem; + margin-block-start: 0.75rem; } .alert--warning .alert__learn-more { color: var(--color-rose-700); diff --git a/docs/_site/assets/css/components/docs-index.css b/docs/_site/assets/css/components/docs-index.css index c93060b239c..4d2b6dbac0e 100644 --- a/docs/_site/assets/css/components/docs-index.css +++ b/docs/_site/assets/css/components/docs-index.css @@ -6,7 +6,8 @@ align-items: center; padding: 0.5rem 0.75rem; margin-left: -0.75rem; - margin-inline-start: -0.75rem; + -webkit-margin-start: -0.75rem; + margin-inline-start: -0.75rem; color: var(--headings-color); } .docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { @@ -17,7 +18,8 @@ .docs-index .docs-index__list a { padding: 0.5rem 1rem; margin-left: 0; - margin-inline-start: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; } } @@ -33,7 +35,8 @@ .docs-index__list > .docs-index__item { margin-top: 1.5rem; - margin-block-start: 1.5rem; + -webkit-margin-before: 1.5rem; + margin-block-start: 1.5rem; } .docs-index__list > .docs-index__item > a { color: var(--icon-color); @@ -54,7 +57,6 @@ } .index-js [aria-expanded=true] .index-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } diff --git a/docs/_site/assets/css/components/docs-navigation.css b/docs/_site/assets/css/components/docs-navigation.css index 61a71460406..756e55901db 100644 --- a/docs/_site/assets/css/components/docs-navigation.css +++ b/docs/_site/assets/css/components/docs-navigation.css @@ -9,17 +9,21 @@ list-style: none; font-size: var(--step-1); margin-top: 1rem; - margin-block-start: 1rem; + -webkit-margin-before: 1rem; + margin-block-start: 1rem; margin-bottom: 2rem; - margin-block-end: 2rem; + -webkit-margin-after: 2rem; + margin-block-end: 2rem; } @media all and (min-width: 1024px) { .docs-site-nav ul { font-size: var(--step-0); margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; margin-bottom: 0; - margin-block-end: 0; + -webkit-margin-after: 0; + margin-block-end: 0; align-items: center; display: flex; } @@ -75,8 +79,10 @@ align-items: center; margin-left: 0.5rem; margin-right: -10px; - margin-inline-start: 0.5rem; - margin-inline-end: -10px; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + -webkit-margin-end: -10px; + margin-inline-end: -10px; } .docs-site-nav-toggle svg { width: 40px; @@ -121,7 +127,8 @@ } .docs-site-nav ul li { margin-bottom: 0; - margin-block-end: 0; + -webkit-margin-after: 0; + margin-block-end: 0; } .docs-site-nav .flexer { order: 1; diff --git a/docs/_site/assets/css/components/hero.css b/docs/_site/assets/css/components/hero.css index acdfbafd3b0..e150cefbc53 100644 --- a/docs/_site/assets/css/components/hero.css +++ b/docs/_site/assets/css/components/hero.css @@ -16,7 +16,8 @@ .hero { border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 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) { @@ -37,7 +38,8 @@ .hero--homepage .section-title { margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .hero--homepage .section-supporting-text { margin: 0; @@ -47,5 +49,6 @@ .hero--homepage .eslint-actions { font-size: var(--step-1); margin-top: 3rem; - margin-block-start: 3rem; + -webkit-margin-before: 3rem; + margin-block-start: 3rem; } diff --git a/docs/_site/assets/css/components/index.css b/docs/_site/assets/css/components/index.css index f86e464219c..64566d3e5e8 100644 --- a/docs/_site/assets/css/components/index.css +++ b/docs/_site/assets/css/components/index.css @@ -1,6 +1,7 @@ .index { margin-bottom: 4rem; - margin-block-end: 4rem; + -webkit-margin-after: 4rem; + margin-block-end: 4rem; } .index__item { diff --git a/docs/_site/assets/css/components/resources.css b/docs/_site/assets/css/components/resources.css index 698d67d1b16..03eed049efe 100644 --- a/docs/_site/assets/css/components/resources.css +++ b/docs/_site/assets/css/components/resources.css @@ -6,7 +6,8 @@ align-items: stretch; overflow: hidden; margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; position: relative; transition: all 0.2s linear; } @@ -24,7 +25,8 @@ display: block; height: 100%; width: 100%; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .resource__content { diff --git a/docs/_site/assets/css/components/rules.css b/docs/_site/assets/css/components/rules.css index f7dc19378cd..70529b0bb2a 100644 --- a/docs/_site/assets/css/components/rules.css +++ b/docs/_site/assets/css/components/rules.css @@ -81,7 +81,8 @@ font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } a.rule__name { @@ -129,7 +130,8 @@ a.rule__name::after { display: inline-block; font-weight: normal; margin-left: 0.5rem; - margin-inline-start: 0.5rem; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; font-size: var(--step--1); padding: 0 0.5rem; } diff --git a/docs/_site/assets/css/components/search.css b/docs/_site/assets/css/components/search.css index 1732daca3f3..31b37ba596f 100644 --- a/docs/_site/assets/css/components/search.css +++ b/docs/_site/assets/css/components/search.css @@ -43,7 +43,8 @@ .search__input { padding-left: 2.5rem; - padding-inline-start: 2.5rem; + -webkit-padding-start: 2.5rem; + padding-inline-start: 2.5rem; outline-offset: 1px; width: 100%; } @@ -100,7 +101,8 @@ margin: 0; padding: 0.875rem; border-bottom: 1px solid var(--lightest-background-color); - border-block-end: 1px solid var(--lightest-background-color); + -webkit-border-after: 1px solid var(--lightest-background-color); + border-block-end: 1px solid var(--lightest-background-color); position: relative; } .search .search-results__item:hover { diff --git a/docs/_site/assets/css/components/social-icons.css b/docs/_site/assets/css/components/social-icons.css index a468f0cd29b..6b8f4d1ce32 100644 --- a/docs/_site/assets/css/components/social-icons.css +++ b/docs/_site/assets/css/components/social-icons.css @@ -1,12 +1,14 @@ .eslint-social-icons { margin-bottom: -1rem; - margin-block-end: -1rem; + -webkit-margin-after: -1rem; + margin-block-end: -1rem; } .eslint-social-icons ul { margin: 0; padding: 0; margin-left: -1rem; - margin-inline-start: -1rem; + -webkit-margin-start: -1rem; + margin-inline-start: -1rem; display: inline-flex; } .eslint-social-icons ul li { diff --git a/docs/_site/assets/css/components/tabs.css b/docs/_site/assets/css/components/tabs.css index b1ff4281ea2..49208eea6d9 100644 --- a/docs/_site/assets/css/components/tabs.css +++ b/docs/_site/assets/css/components/tabs.css @@ -1,6 +1,7 @@ .c-tabs pre { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } .js-tabs .c-tabs__tablist { @@ -35,18 +36,21 @@ .c-tabs__tabpanel { margin-bottom: 2rem; - margin-block-end: 2rem; + -webkit-margin-after: 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; + -webkit-margin-after: 0; + margin-block-end: 0; } .c-tabs__tabpanel__title { margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .js-tabs .c-tabs__tabpanel__title { diff --git a/docs/_site/assets/css/components/theme-switcher.css b/docs/_site/assets/css/components/theme-switcher.css index 35a51c68c96..62ed61c1ec1 100644 --- a/docs/_site/assets/css/components/theme-switcher.css +++ b/docs/_site/assets/css/components/theme-switcher.css @@ -31,11 +31,13 @@ } .theme-switcher__button:first-of-type { border-right: 0.5px solid var(--border-color); - border-inline-end: 0.5px solid var(--border-color); + -webkit-border-end: 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); + -webkit-border-start: 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); diff --git a/docs/_site/assets/css/components/toc.css b/docs/_site/assets/css/components/toc.css index 90e7d5af556..59196d66eff 100644 --- a/docs/_site/assets/css/components/toc.css +++ b/docs/_site/assets/css/components/toc.css @@ -23,9 +23,11 @@ .c-toc ol li { position: relative; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; padding-left: 1rem; - padding-inline-start: 1rem; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } .c-toc ol li > ol { margin-top: 0.25rem; @@ -50,10 +52,12 @@ color: var(--body-text-color); font-family: var(--text-font); margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; } .c-toc__label { + width: -moz-fit-content; width: fit-content; } .c-toc__label button { @@ -85,12 +89,12 @@ height: 0.5rem; transform-origin: 50% 50%; margin-left: 2rem; - margin-inline-start: 2rem; + -webkit-margin-start: 2rem; + margin-inline-start: 2rem; transition: all 0.1s linear; color: var(--color-neutral-400); } [aria-expanded=true] .toc-trigger-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } diff --git a/docs/_site/assets/css/components/version-switcher.css b/docs/_site/assets/css/components/version-switcher.css index 7881189e549..ead3d98868c 100644 --- a/docs/_site/assets/css/components/version-switcher.css +++ b/docs/_site/assets/css/components/version-switcher.css @@ -1,4 +1,5 @@ .version-switcher { margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; } diff --git a/docs/_site/assets/css/docs-header.css b/docs/_site/assets/css/docs-header.css index 1b657cf31c8..e3daec2085d 100644 --- a/docs/_site/assets/css/docs-header.css +++ b/docs/_site/assets/css/docs-header.css @@ -2,16 +2,20 @@ padding: 0.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); + -webkit-border-before: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); + -webkit-border-after: 1px solid var(--divider-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; + -webkit-padding-before: 0; + padding-block-start: 0; + -webkit-padding-after: 0; + padding-block-end: 0; } @media all and (min-width: 1024px) { .site-header .docs-wrapper { @@ -32,7 +36,8 @@ .logo svg { display: inline-block; margin-bottom: -4px; - margin-block-end: -4px; + -webkit-margin-after: -4px; + margin-block-end: -4px; width: 100%; max-width: 100px; height: auto; diff --git a/docs/_site/assets/css/docs.css b/docs/_site/assets/css/docs.css index eb75837c99a..c2c4e191153 100644 --- a/docs/_site/assets/css/docs.css +++ b/docs/_site/assets/css/docs.css @@ -30,7 +30,8 @@ html { grid-column: 1/2; grid-row: 1/2; padding-top: var(--space-l-xl); - padding-block-start: var(--space-l-xl); + -webkit-padding-before: var(--space-l-xl); + padding-block-start: var(--space-l-xl); font-size: 0.875rem; display: grid; grid-auto-rows: max-content; @@ -40,9 +41,11 @@ html { .docs-nav { padding: var(--space-l-xl) 0; padding-right: var(--space-s-l); - padding-inline-end: var(--space-s-l); + -webkit-padding-end: var(--space-s-l); + padding-inline-end: var(--space-s-l); border-right: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); + -webkit-border-end: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); } } @@ -75,9 +78,11 @@ html { @media all and (min-width: 800px) { .docs-main { padding-right: var(--space-s-l); - padding-inline-end: var(--space-s-l); + -webkit-padding-end: var(--space-s-l); + padding-inline-end: var(--space-s-l); border-right: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); + -webkit-border-end: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); } } @media all and (min-width: 1024px) { @@ -105,7 +110,8 @@ html { .docs-edit-link { border-top: 1px solid var(--divider-color); padding-top: 1.5rem; - padding-block-start: 1.5rem; + -webkit-padding-before: 1.5rem; + padding-block-start: 1.5rem; margin: 3rem 0; } diff --git a/docs/_site/assets/css/eslint-site-footer.css b/docs/_site/assets/css/eslint-site-footer.css index bc21a43d961..4d430be50a3 100644 --- a/docs/_site/assets/css/eslint-site-footer.css +++ b/docs/_site/assets/css/eslint-site-footer.css @@ -2,16 +2,19 @@ text-align: center; background-color: var(--footer-background-color); border-top: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); + -webkit-border-before: 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; + -webkit-margin-after: 2.5rem; + margin-block-end: 2.5rem; } .footer-cta .section-supporting-text { margin-bottom: 2.5rem; - margin-block-end: 2.5rem; + -webkit-margin-after: 2.5rem; + margin-block-end: 2.5rem; } .footer-cta .eslint-actions { justify-content: center; @@ -20,12 +23,14 @@ .footer-legal-links ul li { display: inline-block; margin-right: 0.5rem; - margin-inline-end: 0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; } .footer-legal-links ul li:not(:last-of-type)::after { content: "|"; margin-left: 0.5rem; - margin-inline-start: 0.5rem; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; } .footer-legal-section { @@ -41,8 +46,10 @@ .footer-middle { padding-top: 2rem; padding-bottom: 2rem; - padding-block-start: 2rem; - padding-block-end: 2rem; + -webkit-padding-before: 2rem; + padding-block-start: 2rem; + -webkit-padding-after: 2rem; + padding-block-end: 2rem; display: flex; flex-direction: column; align-items: center; diff --git a/docs/_site/assets/css/eslint-site-header.css b/docs/_site/assets/css/eslint-site-header.css index 4d341d3e3a3..8b2e5f178f1 100644 --- a/docs/_site/assets/css/eslint-site-header.css +++ b/docs/_site/assets/css/eslint-site-header.css @@ -1,17 +1,21 @@ .site-header { padding: 0.75rem 0; border-top: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); + -webkit-border-before: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .site-header .content-container { display: grid; align-items: start; padding-top: 0; padding-bottom: 0; - padding-block-start: 0; - padding-block-end: 0; + -webkit-padding-before: 0; + padding-block-start: 0; + -webkit-padding-after: 0; + padding-block-end: 0; } @media all and (min-width: 680px) { .site-header .content-container { @@ -33,7 +37,8 @@ .logo svg { display: inline-block; margin-bottom: -4px; - margin-block-end: -4px; + -webkit-margin-after: -4px; + margin-block-end: -4px; width: 100%; max-width: 100px; height: auto; diff --git a/docs/_site/assets/css/forms.css b/docs/_site/assets/css/forms.css index e2c9a4b1ccf..62c83af55e9 100644 --- a/docs/_site/assets/css/forms.css +++ b/docs/_site/assets/css/forms.css @@ -9,7 +9,8 @@ min-width: 0; padding: 0.625rem 0.875rem; padding-right: 2.1875rem; - padding-inline-end: 2.1875rem; + -webkit-padding-end: 2.1875rem; + padding-inline-end: 2.1875rem; font: inherit; color: var(--body-text-color); line-height: 1.3; @@ -33,7 +34,8 @@ font-weight: 400; line-height: 1.5; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } input { diff --git a/docs/_site/assets/css/foundations.css b/docs/_site/assets/css/foundations.css index bc6c01508af..43867b41adc 100644 --- a/docs/_site/assets/css/foundations.css +++ b/docs/_site/assets/css/foundations.css @@ -1,4 +1,7 @@ -::selection { +::-moz-selection { + background-color: var(--color-brand); + color: #fff; +}::selection { background-color: var(--color-brand); color: #fff; } @@ -107,7 +110,8 @@ main:target { hr { border: none; border-top: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); + -webkit-border-before: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); background: none; height: 0; margin: 2rem 0; @@ -127,7 +131,8 @@ hr { .section-foot { margin-top: var(--space-l-2xl); - margin-block-start: var(--space-l-2xl); + -webkit-margin-before: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); } .section-foot .section-supporting-text { text-align: center; @@ -138,7 +143,8 @@ hr { .section-title { margin-bottom: 1rem; - margin-block-end: 1rem; + -webkit-margin-after: 1rem; + margin-block-end: 1rem; } .section-supporting-text { @@ -219,7 +225,8 @@ p { } :matches(nav, .posts-collection) p { margin-bottom: 0.75em; - margin-block-end: 0.75em; + -webkit-margin-after: 0.75em; + margin-block-end: 0.75em; } p, @@ -235,7 +242,8 @@ h6 { ul, ol { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } ul li, ol li { @@ -244,7 +252,8 @@ ol li { .person__bio ul, .person__bio ol { padding-left: 1.5rem; - padding-inline-start: 1.5rem; + -webkit-padding-start: 1.5rem; + padding-inline-start: 1.5rem; } .docs-main ul, @@ -277,11 +286,13 @@ p:empty { figure { margin-bottom: 4rem; - margin-block-end: 4rem; + -webkit-margin-after: 4rem; + margin-block-end: 4rem; } figure img { margin-bottom: 1rem; - margin-block-end: 1rem; + -webkit-margin-after: 1rem; + margin-block-end: 1rem; } figure figcaption { color: var(--grey); @@ -334,7 +345,8 @@ body { font-weight: 500; display: block; margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } h1, @@ -347,7 +359,8 @@ h6 { color: var(--headings-color); font-weight: 500; margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } .docs-main h2, .components-main h2, @@ -361,8 +374,10 @@ h6 { .components-main h6 { margin-top: 3rem; margin-bottom: 1.5rem; - margin-block-start: 3rem; - margin-block-end: 1.5rem; + -webkit-margin-before: 3rem; + margin-block-start: 3rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .docs-main h2:first-child, .components-main h2:first-child, .docs-main h3:first-child, @@ -374,7 +389,8 @@ h6 { .docs-main h6:first-child, .components-main h6:first-child { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } small, diff --git a/docs/_site/assets/css/languages.css b/docs/_site/assets/css/languages.css index 974dd279359..00a7eb64f3c 100644 --- a/docs/_site/assets/css/languages.css +++ b/docs/_site/assets/css/languages.css @@ -19,7 +19,8 @@ display: flex; align-items: center; border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .languages-list a[aria-current=true] { font-weight: 500; @@ -35,13 +36,16 @@ .languages-section .flag { font-size: 2em; margin-right: 0.5rem; - margin-inline-end: 0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.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; + -webkit-border-start: 4px solid var(--tab-border-color); + border-inline-start: 4px solid var(--tab-border-color); + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } diff --git a/docs/_site/assets/css/styles.css b/docs/_site/assets/css/styles.css index 8dbaccf5b59..bdc9f016e8a 100644 --- a/docs/_site/assets/css/styles.css +++ b/docs/_site/assets/css/styles.css @@ -276,6 +276,11 @@ html[data-theme=dark] { --border-radius: .5rem; } +::-moz-selection { + background-color: var(--color-brand); + color: #fff; +} + ::selection { background-color: var(--color-brand); color: #fff; @@ -385,7 +390,8 @@ main:target { hr { border: none; border-top: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); + -webkit-border-before: 1px solid var(--divider-color); + border-block-start: 1px solid var(--divider-color); background: none; height: 0; margin: 2rem 0; @@ -405,7 +411,8 @@ hr { .section-foot { margin-top: var(--space-l-2xl); - margin-block-start: var(--space-l-2xl); + -webkit-margin-before: var(--space-l-2xl); + margin-block-start: var(--space-l-2xl); } .section-foot .section-supporting-text { text-align: center; @@ -416,7 +423,8 @@ hr { .section-title { margin-bottom: 1rem; - margin-block-end: 1rem; + -webkit-margin-after: 1rem; + margin-block-end: 1rem; } .section-supporting-text { @@ -497,7 +505,8 @@ p { } :matches(nav, .posts-collection) p { margin-bottom: 0.75em; - margin-block-end: 0.75em; + -webkit-margin-after: 0.75em; + margin-block-end: 0.75em; } p, @@ -513,7 +522,8 @@ h6 { ul, ol { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } ul li, ol li { @@ -522,7 +532,8 @@ ol li { .person__bio ul, .person__bio ol { padding-left: 1.5rem; - padding-inline-start: 1.5rem; + -webkit-padding-start: 1.5rem; + padding-inline-start: 1.5rem; } .docs-main ul, @@ -555,11 +566,13 @@ p:empty { figure { margin-bottom: 4rem; - margin-block-end: 4rem; + -webkit-margin-after: 4rem; + margin-block-end: 4rem; } figure img { margin-bottom: 1rem; - margin-block-end: 1rem; + -webkit-margin-after: 1rem; + margin-block-end: 1rem; } figure figcaption { color: var(--grey); @@ -612,7 +625,8 @@ body { font-weight: 500; display: block; margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } h1, @@ -625,7 +639,8 @@ h6 { color: var(--headings-color); font-weight: 500; margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } .docs-main h2, .components-main h2, @@ -639,8 +654,10 @@ h6 { .components-main h6 { margin-top: 3rem; margin-bottom: 1.5rem; - margin-block-start: 3rem; - margin-block-end: 1.5rem; + -webkit-margin-before: 3rem; + margin-block-start: 3rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .docs-main h2:first-child, .components-main h2:first-child, .docs-main h3:first-child, @@ -652,7 +669,8 @@ h6 { .docs-main h6:first-child, .components-main h6:first-child { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } small, @@ -715,7 +733,6 @@ pre[class*=language-] { -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; - -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } @@ -813,8 +830,10 @@ code .highlight-line::before { font-variant-numeric: tabular-nums; margin-right: 1.2em; padding-right: 1.2em; - margin-inline-end: 1.2em; - padding-inline-end: 1.2em; + -webkit-margin-end: 1.2em; + margin-inline-end: 1.2em; + -webkit-padding-end: 1.2em; + padding-inline-end: 1.2em; text-align: right; width: 2.4em; } @@ -823,16 +842,20 @@ code .highlight-line::before { padding: 0.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); + -webkit-border-before: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); + -webkit-border-after: 1px solid var(--divider-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; + -webkit-padding-before: 0; + padding-block-start: 0; + -webkit-padding-after: 0; + padding-block-end: 0; } @media all and (min-width: 1024px) { .site-header .docs-wrapper { @@ -853,7 +876,8 @@ code .highlight-line::before { .logo svg { display: inline-block; margin-bottom: -4px; - margin-block-end: -4px; + -webkit-margin-after: -4px; + margin-block-end: -4px; width: 100%; max-width: 100px; height: auto; @@ -913,16 +937,19 @@ code .highlight-line::before { text-align: center; background-color: var(--footer-background-color); border-top: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); + -webkit-border-before: 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; + -webkit-margin-after: 2.5rem; + margin-block-end: 2.5rem; } .footer-cta .section-supporting-text { margin-bottom: 2.5rem; - margin-block-end: 2.5rem; + -webkit-margin-after: 2.5rem; + margin-block-end: 2.5rem; } .footer-cta .eslint-actions { justify-content: center; @@ -931,12 +958,14 @@ code .highlight-line::before { .footer-legal-links ul li { display: inline-block; margin-right: 0.5rem; - margin-inline-end: 0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; } .footer-legal-links ul li:not(:last-of-type)::after { content: "|"; margin-left: 0.5rem; - margin-inline-start: 0.5rem; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; } .footer-legal-section { @@ -952,8 +981,10 @@ code .highlight-line::before { .footer-middle { padding-top: 2rem; padding-bottom: 2rem; - padding-block-start: 2rem; - padding-block-end: 2rem; + -webkit-padding-before: 2rem; + padding-block-start: 2rem; + -webkit-padding-after: 2rem; + padding-block-end: 2rem; display: flex; flex-direction: column; align-items: center; @@ -969,17 +1000,21 @@ code .highlight-line::before { .site-header { padding: 0.75rem 0; border-top: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); + -webkit-border-before: 4px solid var(--link-color); + border-block-start: 4px solid var(--link-color); border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .site-header .content-container { display: grid; align-items: start; padding-top: 0; padding-bottom: 0; - padding-block-start: 0; - padding-block-end: 0; + -webkit-padding-before: 0; + padding-block-start: 0; + -webkit-padding-after: 0; + padding-block-end: 0; } @media all and (min-width: 680px) { .site-header .content-container { @@ -1001,7 +1036,8 @@ code .highlight-line::before { .logo svg { display: inline-block; margin-bottom: -4px; - margin-block-end: -4px; + -webkit-margin-after: -4px; + margin-block-end: -4px; width: 100%; max-width: 100px; height: auto; @@ -1018,7 +1054,8 @@ code .highlight-line::before { min-width: 0; padding: 0.625rem 0.875rem; padding-right: 2.1875rem; - padding-inline-end: 2.1875rem; + -webkit-padding-end: 2.1875rem; + padding-inline-end: 2.1875rem; font: inherit; color: var(--body-text-color); line-height: 1.3; @@ -1042,7 +1079,8 @@ code .highlight-line::before { font-weight: 400; line-height: 1.5; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } input { @@ -1091,7 +1129,8 @@ html { grid-column: 1/2; grid-row: 1/2; padding-top: var(--space-l-xl); - padding-block-start: var(--space-l-xl); + -webkit-padding-before: var(--space-l-xl); + padding-block-start: var(--space-l-xl); font-size: 0.875rem; display: grid; grid-auto-rows: max-content; @@ -1101,9 +1140,11 @@ html { .docs-nav { padding: var(--space-l-xl) 0; padding-right: var(--space-s-l); - padding-inline-end: var(--space-s-l); + -webkit-padding-end: var(--space-s-l); + padding-inline-end: var(--space-s-l); border-right: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); + -webkit-border-end: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); } } @@ -1136,9 +1177,11 @@ html { @media all and (min-width: 800px) { .docs-main { padding-right: var(--space-s-l); - padding-inline-end: var(--space-s-l); + -webkit-padding-end: var(--space-s-l); + padding-inline-end: var(--space-s-l); border-right: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); + -webkit-border-end: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); } } @media all and (min-width: 1024px) { @@ -1166,7 +1209,8 @@ html { .docs-edit-link { border-top: 1px solid var(--divider-color); padding-top: 1.5rem; - padding-block-start: 1.5rem; + -webkit-padding-before: 1.5rem; + padding-block-start: 1.5rem; margin: 3rem 0; } @@ -1224,7 +1268,8 @@ pre[class*=language-] { } .versions-list li:last-of-type a { border-bottom: 0; - border-block-end: 0; + -webkit-border-after: 0; + border-block-end: 0; } .versions-list a { color: var(--link-color); @@ -1235,7 +1280,8 @@ pre[class*=language-] { display: flex; align-items: center; border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .versions-list a[data-current=true] { font-weight: 500; @@ -1252,8 +1298,10 @@ pre[class*=language-] { 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; + -webkit-border-start: 4px solid var(--tab-border-color); + border-inline-start: 4px solid var(--tab-border-color); + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } .languages-list { @@ -1276,7 +1324,8 @@ pre[class*=language-] { display: flex; align-items: center; border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .languages-list a[aria-current=true] { font-weight: 500; @@ -1292,15 +1341,18 @@ pre[class*=language-] { .languages-section .flag { font-size: 2em; margin-right: 0.5rem; - margin-inline-end: 0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.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; + -webkit-border-start: 4px solid var(--tab-border-color); + border-inline-start: 4px solid var(--tab-border-color); + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } button { @@ -1388,17 +1440,21 @@ a.c-btn { list-style: none; font-size: var(--step-1); margin-top: 1rem; - margin-block-start: 1rem; + -webkit-margin-before: 1rem; + margin-block-start: 1rem; margin-bottom: 2rem; - margin-block-end: 2rem; + -webkit-margin-after: 2rem; + margin-block-end: 2rem; } @media all and (min-width: 1024px) { .docs-site-nav ul { font-size: var(--step-0); margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; margin-bottom: 0; - margin-block-end: 0; + -webkit-margin-after: 0; + margin-block-end: 0; align-items: center; display: flex; } @@ -1454,8 +1510,10 @@ a.c-btn { align-items: center; margin-left: 0.5rem; margin-right: -10px; - margin-inline-start: 0.5rem; - margin-inline-end: -10px; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + -webkit-margin-end: -10px; + margin-inline-end: -10px; } .docs-site-nav-toggle svg { width: 40px; @@ -1500,7 +1558,8 @@ a.c-btn { } .docs-site-nav ul li { margin-bottom: 0; - margin-block-end: 0; + -webkit-margin-after: 0; + margin-block-end: 0; } .docs-site-nav .flexer { order: 1; @@ -1530,9 +1589,11 @@ a.c-btn { .c-toc ol li { position: relative; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; padding-left: 1rem; - padding-inline-start: 1rem; + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } .c-toc ol li > ol { margin-top: 0.25rem; @@ -1557,10 +1618,12 @@ a.c-btn { color: var(--body-text-color); font-family: var(--text-font); margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; } .c-toc__label { + width: -moz-fit-content; width: fit-content; } .c-toc__label button { @@ -1592,12 +1655,12 @@ a.c-btn { height: 0.5rem; transform-origin: 50% 50%; margin-left: 2rem; - margin-inline-start: 2rem; + -webkit-margin-start: 2rem; + margin-inline-start: 2rem; transition: all 0.1s linear; color: var(--color-neutral-400); } [aria-expanded=true] .toc-trigger-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } @@ -1653,7 +1716,8 @@ a.c-btn { .search__input { padding-left: 2.5rem; - padding-inline-start: 2.5rem; + -webkit-padding-start: 2.5rem; + padding-inline-start: 2.5rem; outline-offset: 1px; width: 100%; } @@ -1710,7 +1774,8 @@ a.c-btn { margin: 0; padding: 0.875rem; border-bottom: 1px solid var(--lightest-background-color); - border-block-end: 1px solid var(--lightest-background-color); + -webkit-border-after: 1px solid var(--lightest-background-color); + border-block-end: 1px solid var(--lightest-background-color); position: relative; } .search .search-results__item:hover { @@ -1771,7 +1836,8 @@ a.c-btn { padding: 1rem; gap: 0.75rem; margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; align-items: start; font-size: 0.875rem; border: 1px solid currentColor; @@ -1827,7 +1893,8 @@ a.c-btn { display: block; font-weight: 500; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } .alert--warning .alert__type { color: var(--color-rose-700); @@ -1852,7 +1919,8 @@ a.c-btn { display: block; font-weight: 500; margin-top: 0.75rem; - margin-block-start: 0.75rem; + -webkit-margin-before: 0.75rem; + margin-block-start: 0.75rem; } .alert--warning .alert__learn-more { color: var(--color-rose-700); @@ -1956,7 +2024,8 @@ a.c-btn { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.25rem; - margin-block-end: 0.25rem; + -webkit-margin-after: 0.25rem; + margin-block-end: 0.25rem; } a.rule__name { @@ -2004,7 +2073,8 @@ a.rule__name::after { display: inline-block; font-weight: normal; margin-left: 0.5rem; - margin-inline-start: 0.5rem; + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; font-size: var(--step--1); padding: 0 0.5rem; } @@ -2052,13 +2122,15 @@ a.rule-list-item + a.rule-list-item::before { .eslint-social-icons { margin-bottom: -1rem; - margin-block-end: -1rem; + -webkit-margin-after: -1rem; + margin-block-end: -1rem; } .eslint-social-icons ul { margin: 0; padding: 0; margin-left: -1rem; - margin-inline-start: -1rem; + -webkit-margin-start: -1rem; + margin-inline-start: -1rem; display: inline-flex; } .eslint-social-icons ul li { @@ -2089,7 +2161,8 @@ a.rule-list-item + a.rule-list-item::before { .hero { border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 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) { @@ -2110,7 +2183,8 @@ a.rule-list-item + a.rule-list-item::before { .hero--homepage .section-title { margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .hero--homepage .section-supporting-text { margin: 0; @@ -2120,7 +2194,8 @@ a.rule-list-item + a.rule-list-item::before { .hero--homepage .eslint-actions { font-size: var(--step-1); margin-top: 3rem; - margin-block-start: 3rem; + -webkit-margin-before: 3rem; + margin-block-start: 3rem; } .theme-switcher { @@ -2156,11 +2231,13 @@ a.rule-list-item + a.rule-list-item::before { } .theme-switcher__button:first-of-type { border-right: 0.5px solid var(--border-color); - border-inline-end: 0.5px solid var(--border-color); + -webkit-border-end: 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); + -webkit-border-start: 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); @@ -2192,7 +2269,8 @@ a.rule-list-item + a.rule-list-item::before { .version-switcher { margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; } .switcher--language { @@ -2237,7 +2315,8 @@ a.rule-list-item + a.rule-list-item::before { align-items: center; padding: 0.5rem 0.75rem; margin-left: -0.75rem; - margin-inline-start: -0.75rem; + -webkit-margin-start: -0.75rem; + margin-inline-start: -0.75rem; color: var(--headings-color); } .docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { @@ -2248,7 +2327,8 @@ a.rule-list-item + a.rule-list-item::before { .docs-index .docs-index__list a { padding: 0.5rem 1rem; margin-left: 0; - margin-inline-start: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; } } @@ -2264,7 +2344,8 @@ a.rule-list-item + a.rule-list-item::before { .docs-index__list > .docs-index__item { margin-top: 1.5rem; - margin-block-start: 1.5rem; + -webkit-margin-before: 1.5rem; + margin-block-start: 1.5rem; } .docs-index__list > .docs-index__item > a { color: var(--icon-color); @@ -2285,7 +2366,6 @@ a.rule-list-item + a.rule-list-item::before { } .index-js [aria-expanded=true] .index-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } @@ -2382,7 +2462,8 @@ a.rule-list-item + a.rule-list-item::before { .index { margin-bottom: 4rem; - margin-block-end: 4rem; + -webkit-margin-after: 4rem; + margin-block-end: 4rem; } .index__item { @@ -2480,7 +2561,8 @@ a.rule-list-item + a.rule-list-item::before { .c-tabs pre { margin-top: 0; - margin-block-start: 0; + -webkit-margin-before: 0; + margin-block-start: 0; } .js-tabs .c-tabs__tablist { @@ -2515,18 +2597,21 @@ a.rule-list-item + a.rule-list-item::before { .c-tabs__tabpanel { margin-bottom: 2rem; - margin-block-end: 2rem; + -webkit-margin-after: 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; + -webkit-margin-after: 0; + margin-block-end: 0; } .c-tabs__tabpanel__title { margin-bottom: 1.5rem; - margin-block-end: 1.5rem; + -webkit-margin-after: 1.5rem; + margin-block-end: 1.5rem; } .js-tabs .c-tabs__tabpanel__title { @@ -2541,7 +2626,8 @@ a.rule-list-item + a.rule-list-item::before { align-items: stretch; overflow: hidden; margin-bottom: 0.5rem; - margin-block-end: 0.5rem; + -webkit-margin-after: 0.5rem; + margin-block-end: 0.5rem; position: relative; transition: all 0.2s linear; } @@ -2559,7 +2645,8 @@ a.rule-list-item + a.rule-list-item::before { display: block; height: 100%; width: 100%; - object-fit: contain; + -o-object-fit: contain; + object-fit: contain; } .resource__content { @@ -2721,7 +2808,8 @@ a.rule-list-item + a.rule-list-item::before { .visually-hidden { clip: rect(0 0 0 0); - clip-path: inset(100%); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; @@ -2771,7 +2859,8 @@ a.rule-list-item + a.rule-list-item::before { .divider { border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .fs-step--1 { diff --git a/docs/_site/assets/css/syntax-highlighter.css b/docs/_site/assets/css/syntax-highlighter.css index 4b457da72a6..fe1b77e0d88 100644 --- a/docs/_site/assets/css/syntax-highlighter.css +++ b/docs/_site/assets/css/syntax-highlighter.css @@ -13,7 +13,6 @@ pre[class*=language-] { -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; - -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } @@ -111,8 +110,10 @@ code .highlight-line::before { font-variant-numeric: tabular-nums; margin-right: 1.2em; padding-right: 1.2em; - margin-inline-end: 1.2em; - padding-inline-end: 1.2em; + -webkit-margin-end: 1.2em; + margin-inline-end: 1.2em; + -webkit-padding-end: 1.2em; + padding-inline-end: 1.2em; text-align: right; width: 2.4em; } diff --git a/docs/_site/assets/css/utilities.css b/docs/_site/assets/css/utilities.css index dab123e8e68..18bd3e9d594 100644 --- a/docs/_site/assets/css/utilities.css +++ b/docs/_site/assets/css/utilities.css @@ -9,7 +9,8 @@ .visually-hidden { clip: rect(0 0 0 0); - clip-path: inset(100%); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; @@ -59,7 +60,8 @@ .divider { border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .fs-step--1 { diff --git a/docs/_site/assets/css/versions.css b/docs/_site/assets/css/versions.css index ebeccc2a72d..7d1a45c9758 100644 --- a/docs/_site/assets/css/versions.css +++ b/docs/_site/assets/css/versions.css @@ -9,7 +9,8 @@ } .versions-list li:last-of-type a { border-bottom: 0; - border-block-end: 0; + -webkit-border-after: 0; + border-block-end: 0; } .versions-list a { color: var(--link-color); @@ -20,7 +21,8 @@ display: flex; align-items: center; border-bottom: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); + -webkit-border-after: 1px solid var(--divider-color); + border-block-end: 1px solid var(--divider-color); } .versions-list a[data-current=true] { font-weight: 500; @@ -37,6 +39,8 @@ 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; + -webkit-border-start: 4px solid var(--tab-border-color); + border-inline-start: 4px solid var(--tab-border-color); + -webkit-padding-start: 1rem; + padding-inline-start: 1rem; } diff --git a/docs/package.json b/docs/package.json index 989417f314b..2a552332696 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,10 +12,11 @@ "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", "watch:sass": "sass --watch --poll src/assets/scss:_site/assets/css", "watch:eleventy": "eleventy --serve --port=2023", + "build:postcss": "postcss _site/assets/css --replace --verbose", "build:sass": "sass src/assets/scss:_site/assets/css --no-source-map", "build:eleventy": "npx @11ty/eleventy", "start": "npm-run-all build:sass --parallel watch:*", - "build": "npm-run-all build:sass build:eleventy images", + "build": "npm-run-all build:sass build:postcss build:eleventy images", "lint:scss": "stylelint \"**/*.{scss,html}\"", "lint:fix:scss": "npm run lint:scss -- --fix" }, @@ -27,6 +28,7 @@ "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2", "@types/markdown-it": "^12.2.3", "algoliasearch": "^4.12.1", + "autoprefixer": "^10.4.13", "dom-parser": "^0.1.6", "eleventy-plugin-nesting-toc": "^1.3.0", "eleventy-plugin-page-assets": "^0.3.0", @@ -41,6 +43,7 @@ "markdown-it-container": "^3.0.0", "netlify-cli": "^10.3.1", "npm-run-all": "^4.1.5", + "postcss-cli": "^10.0.0", "postcss-html": "^1.5.0", "prismjs": "^1.29.0", "rimraf": "^3.0.2", @@ -52,5 +55,9 @@ }, "engines": { "node": ">=14.0.0" - } + }, + "browserslist": [ + "defaults", + "IE 11" + ] } diff --git a/docs/postcss.config.js b/docs/postcss.config.js new file mode 100644 index 00000000000..8871784fc92 --- /dev/null +++ b/docs/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('autoprefixer') + ], + map: false + } From 896e954f3c020ef71583c524ada2a41be9660158 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:48:00 -0400 Subject: [PATCH 3/9] docs: Stylelint property-no-vendor-prefix Autoprefix will add this during the build --- docs/.stylelintrc.json | 1 - docs/_site/assets/css/components/search.css | 2 +- docs/_site/assets/css/forms.css | 4 ++-- docs/_site/assets/css/styles.css | 17 ++++++++++------- docs/_site/assets/css/syntax-highlighter.css | 11 +++++++---- docs/src/assets/scss/components/docs-index.scss | 1 - docs/src/assets/scss/components/search.scss | 1 - docs/src/assets/scss/components/toc.scss | 1 - docs/src/assets/scss/forms.scss | 2 -- docs/src/assets/scss/syntax-highlighter.scss | 5 ----- 10 files changed, 20 insertions(+), 25 deletions(-) diff --git a/docs/.stylelintrc.json b/docs/.stylelintrc.json index 98c118e79c1..18a2e077b08 100644 --- a/docs/.stylelintrc.json +++ b/docs/.stylelintrc.json @@ -17,7 +17,6 @@ "no-duplicate-selectors": null, "number-leading-zero": null, "number-no-trailing-zeros": null, - "property-no-vendor-prefix": null, "selector-class-pattern": null, "value-keyword-case": null }, diff --git a/docs/_site/assets/css/components/search.css b/docs/_site/assets/css/components/search.css index 31b37ba596f..84a9d218f9a 100644 --- a/docs/_site/assets/css/components/search.css +++ b/docs/_site/assets/css/components/search.css @@ -1,7 +1,7 @@ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; - appearance: none; + appearance: none; } [type=search]::-ms-clear, diff --git a/docs/_site/assets/css/forms.css b/docs/_site/assets/css/forms.css index 62c83af55e9..93659b54db9 100644 --- a/docs/_site/assets/css/forms.css +++ b/docs/_site/assets/css/forms.css @@ -1,7 +1,7 @@ .c-custom-select { - -moz-appearance: none; -webkit-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; box-sizing: border-box; display: block; width: 100%; diff --git a/docs/_site/assets/css/styles.css b/docs/_site/assets/css/styles.css index bdc9f016e8a..d2b8ea244cd 100644 --- a/docs/_site/assets/css/styles.css +++ b/docs/_site/assets/css/styles.css @@ -730,11 +730,11 @@ pre[class*=language-] { line-height: 1.5; font-variant-ligatures: none; -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -o-tab-size: 4; + tab-size: 4; -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -ms-hyphens: none; + hyphens: none; } @media print { @@ -823,6 +823,9 @@ code .highlight-line { code .highlight-line::before { -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; color: var(--icon-color); content: counter(lineNumber); counter-increment: lineNumber; @@ -1044,9 +1047,9 @@ code .highlight-line::before { } .c-custom-select { - -moz-appearance: none; -webkit-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; box-sizing: border-box; display: block; width: 100%; @@ -1674,7 +1677,7 @@ a.c-btn { [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; - appearance: none; + appearance: none; } [type=search]::-ms-clear, diff --git a/docs/_site/assets/css/syntax-highlighter.css b/docs/_site/assets/css/syntax-highlighter.css index fe1b77e0d88..eed1f194be6 100644 --- a/docs/_site/assets/css/syntax-highlighter.css +++ b/docs/_site/assets/css/syntax-highlighter.css @@ -10,11 +10,11 @@ pre[class*=language-] { line-height: 1.5; font-variant-ligatures: none; -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; + -o-tab-size: 4; + tab-size: 4; -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; + -ms-hyphens: none; + hyphens: none; } @media print { @@ -103,6 +103,9 @@ code .highlight-line { code .highlight-line::before { -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; color: var(--icon-color); content: counter(lineNumber); counter-increment: lineNumber; diff --git a/docs/src/assets/scss/components/docs-index.scss b/docs/src/assets/scss/components/docs-index.scss index d524a9b2589..22e156eb39d 100644 --- a/docs/src/assets/scss/components/docs-index.scss +++ b/docs/src/assets/scss/components/docs-index.scss @@ -60,7 +60,6 @@ } .index-js [aria-expanded="true"] .index-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } diff --git a/docs/src/assets/scss/components/search.scss b/docs/src/assets/scss/components/search.scss index 0d9c522e56c..4b90582c4c6 100644 --- a/docs/src/assets/scss/components/search.scss +++ b/docs/src/assets/scss/components/search.scss @@ -1,6 +1,5 @@ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; appearance: none; } diff --git a/docs/src/assets/scss/components/toc.scss b/docs/src/assets/scss/components/toc.scss index 74da310b325..aca19cf99b3 100644 --- a/docs/src/assets/scss/components/toc.scss +++ b/docs/src/assets/scss/components/toc.scss @@ -124,7 +124,6 @@ color: var(--color-neutral-400); [aria-expanded="true"] & { - -ms-transform: rotate(180deg); transform: rotate(180deg); } } diff --git a/docs/src/assets/scss/forms.scss b/docs/src/assets/scss/forms.scss index 0df746c558e..3ca14525734 100644 --- a/docs/src/assets/scss/forms.scss +++ b/docs/src/assets/scss/forms.scss @@ -1,6 +1,4 @@ .c-custom-select { - -moz-appearance: none; - -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss index 2b729e5ea4e..cb744db0e38 100644 --- a/docs/src/assets/scss/syntax-highlighter.scss +++ b/docs/src/assets/scss/syntax-highlighter.scss @@ -15,12 +15,7 @@ pre[class*="language-"] { word-wrap: normal; line-height: 1.5; font-variant-ligatures: none; - -moz-tab-size: 4; - -o-tab-size: 4; tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; hyphens: none; } From 15ef95564db0f96a60d31899f07a9d573a506229 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:51:08 -0400 Subject: [PATCH 4/9] docs: use CSSNano for minification --- docs/_site/assets/css/carbon-ads.css | 113 +- docs/_site/assets/css/components/alert.css | 112 +- docs/_site/assets/css/components/buttons.css | 74 +- .../assets/css/components/docs-index.css | 153 +- .../assets/css/components/docs-navigation.css | 137 +- docs/_site/assets/css/components/hero.css | 55 +- docs/_site/assets/css/components/index.css | 99 +- .../css/components/language-switcher.css | 34 +- .../_site/assets/css/components/resources.css | 67 +- docs/_site/assets/css/components/rules.css | 179 +- docs/_site/assets/css/components/search.css | 158 +- .../assets/css/components/social-icons.css | 23 +- docs/_site/assets/css/components/tabs.css | 59 +- .../assets/css/components/theme-switcher.css | 69 +- docs/_site/assets/css/components/toc.css | 107 +- .../css/components/version-switcher.css | 6 +- docs/_site/assets/css/docs-footer.css | 50 +- docs/_site/assets/css/docs-header.css | 45 +- docs/_site/assets/css/docs.css | 162 +- docs/_site/assets/css/eslint-site-footer.css | 64 +- docs/_site/assets/css/eslint-site-header.css | 46 +- docs/_site/assets/css/forms.css | 54 +- docs/_site/assets/css/foundations.css | 440 +-- docs/_site/assets/css/languages.css | 52 +- docs/_site/assets/css/print.css | 204 +- docs/_site/assets/css/styles.css | 2976 +---------------- docs/_site/assets/css/syntax-highlighter.css | 123 +- docs/_site/assets/css/tokens/spacing.css | 63 +- docs/_site/assets/css/tokens/themes.css | 135 +- docs/_site/assets/css/tokens/typography.css | 71 +- docs/_site/assets/css/tokens/ui.css | 8 +- docs/_site/assets/css/utilities.css | 174 +- docs/_site/assets/css/versions.css | 47 +- docs/package.json | 1 + docs/postcss.config.js | 3 +- 35 files changed, 36 insertions(+), 6127 deletions(-) diff --git a/docs/_site/assets/css/carbon-ads.css b/docs/_site/assets/css/carbon-ads.css index 17763f5ca27..7a4de64b7b8 100644 --- a/docs/_site/assets/css/carbon-ads.css +++ b/docs/_site/assets/css/carbon-ads.css @@ -1,112 +1 @@ -@media all and (max-width: 800px) { - .hero-ad { - display: none; - } -} - -#carbonads * { - margin: initial; - padding: initial; -} - -#carbonads { - display: inline-block; - margin: 2rem 0; - padding: 0.6em; - font-size: 1rem; - overflow: hidden; - background-color: var(--body-background-color); - border: 1px solid var(--border-color); - border-radius: 4px; - border-radius: var(--border-radius); - box-shadow: 0 1px 4px 1px hsla(0deg, 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 hsla(250deg, 20%, 50%, 0.6); - background-color: hsla(0deg, 0%, 70%, 0.15); -} - -#carbonads a { - font-weight: 500; - color: inherit; - text-decoration: none; -} - -#carbonads a:hover { - text-decoration: none; - color: var(--link-color); -} - -.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; - line-height: 1rem; - font-size: 0.7em; - font-weight: 500; - text-align: left; -} - -#carbonads .carbon-poweredby { - display: block; - margin-top: 10px; - font-size: 0.5rem; - font-weight: 500; - line-height: 1; - letter-spacing: 0.1ch; - 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 (max-width:800px){.hero-ad{display:none}}#carbonads *{margin:initial;padding:initial}#carbonads{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:4px;border-radius:var(--border-radius);box-shadow:0 1px 4px 1px rgba(0,0,0,.1);display:inline-block;font-size:1rem;margin:2rem 0;overflow:hidden;padding:.6em}.docs-main #carbonads{margin:0 0 2rem}@media (max-width:800px){#carbonads{display:none!important}}.jumbotron #carbonads{background-color:hsla(0,0%,70%,.15);border:1px solid rgba(110,102,153,.6)}#carbonads a{color:inherit;font-weight:500;text-decoration:none}#carbonads a:hover{color:var(--link-color);text-decoration:none}.jumbotron #carbonads a{color:#eee}.jumbotron #carbonads a:hover{color:#ccc}#carbonads span{display:block;overflow:hidden;position:relative}#carbonads .carbon-wrap{display:flex;flex-direction:column;max-width:130px}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:.7em;font-weight:500;line-height:1rem;margin-top:10px;text-align:left}#carbonads .carbon-poweredby{display:block;font-size:.5rem;font-weight:500;letter-spacing:.1ch;line-height:1;margin-top:10px;text-transform:uppercase}@media only screen and (min-width:320px) and (max-width:759px){#carbonads{font-size:12px;margin-top:0}#carbonads .carbon-wrap{display:flex;flex-direction:row;max-width:330px}#carbonads .carbon-text{font-size:14px;margin:0 0 14px 10px;text-align:left}#carbonads .carbon-poweredby{bottom:0;font-size:8px;left:142px;position:absolute}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/alert.css b/docs/_site/assets/css/components/alert.css index b401f4e5bb3..d40a6362b88 100644 --- a/docs/_site/assets/css/components/alert.css +++ b/docs/_site/assets/css/components/alert.css @@ -1,111 +1 @@ -.alert { - position: relative; - display: grid; - grid-template-columns: auto 1fr; - padding: 1rem; - gap: 0.75rem; - margin-bottom: 1.5rem; - -webkit-margin-after: 1.5rem; - margin-block-end: 1.5rem; - align-items: start; - font-size: 0.875rem; - border: 1px solid currentColor; - border-radius: var(--border-radius); -} -.alert.alert--warning { - background-color: var(--color-rose-25); - color: var(--color-rose-600); -} -[data-theme=dark] .alert.alert--warning { - color: var(--color-rose-300); - background-color: var(--color-rose-900); -} -.alert.alert--important { - background-color: var(--color-warning-25); - color: var(--color-warning-600); -} -[data-theme=dark] .alert.alert--important { - color: var(--color-warning-300); - background-color: var(--color-warning-900); -} -.alert.alert--tip { - background-color: var(--color-success-25); - color: var(--color-success-600); -} -[data-theme=dark] .alert.alert--tip { - color: var(--color-success-300); - background-color: var(--color-success-900); -} - -[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__text > p { - margin: 0; -} - -.alert__type { - display: block; - font-weight: 500; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} -.alert--warning .alert__type { - color: var(--color-rose-700); -} -[data-theme=dark] .alert--warning .alert__type { - color: var(--color-rose-200); -} -.alert--important .alert__type { - color: var(--color-warning-700); -} -[data-theme=dark] .alert--important .alert__type { - color: var(--color-warning-200); -} -.alert--tip .alert__type { - color: var(--color-success-700); -} -[data-theme=dark] .alert--tip .alert__type { - color: var(--color-success-200); -} - -.alert__learn-more { - display: block; - font-weight: 500; - margin-top: 0.75rem; - -webkit-margin-before: 0.75rem; - margin-block-start: 0.75rem; -} -.alert--warning .alert__learn-more { - color: var(--color-rose-700); -} -[data-theme=dark] .alert--warning .alert__learn-more { - color: var(--color-rose-200); -} -.alert--important .alert__learn-more { - color: var(--color-warning-700); -} -[data-theme=dark] .alert--important .alert__learn-more { - color: var(--color-warning-200); -} -.alert--tip .alert__learn-more { - color: var(--color-success-700); -} -[data-theme=dark] .alert--tip .alert__learn-more { - color: var(--color-success-200); -} +.alert{-webkit-margin-after:1.5rem;align-items:start;border:1px solid;border-radius:var(--border-radius);display:grid;font-size:.875rem;gap:.75rem;grid-template-columns:auto 1fr;margin-block-end:1.5rem;margin-bottom:1.5rem;padding:1rem;position:relative}.alert.alert--warning{background-color:var(--color-rose-25);color:var(--color-rose-600)}[data-theme=dark] .alert.alert--warning{background-color:var(--color-rose-900);color:var(--color-rose-300)}.alert.alert--important{background-color:var(--color-warning-25);color:var(--color-warning-600)}[data-theme=dark] .alert.alert--important{background-color:var(--color-warning-900);color:var(--color-warning-300)}.alert.alert--tip{background-color:var(--color-success-25);color:var(--color-success-600)}[data-theme=dark] .alert.alert--tip{background-color:var(--color-success-900);color: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{offset-block-start:2px;color:inherit;position:relative;top:2px}.alert__text>p{margin:0}.alert__type{-webkit-margin-after:.25rem;display:block;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}.alert--warning .alert__type{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__type{color:var(--color-rose-200)}.alert--important .alert__type{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__type{color:var(--color-warning-200)}.alert--tip .alert__type{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__type{color:var(--color-success-200)}.alert__learn-more{-webkit-margin-before:.75rem;display:block;font-weight:500;margin-block-start:.75rem;margin-top:.75rem}.alert--warning .alert__learn-more{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__learn-more{color:var(--color-rose-200)}.alert--important .alert__learn-more{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__learn-more{color:var(--color-warning-200)}.alert--tip .alert__learn-more{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__learn-more{color:var(--color-success-200)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/buttons.css b/docs/_site/assets/css/components/buttons.css index 843285fe768..c9e0376fada 100644 --- a/docs/_site/assets/css/components/buttons.css +++ b/docs/_site/assets/css/components/buttons.css @@ -1,73 +1 @@ -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: 0.75em 1.125em; - align-items: center; - justify-content: center; - border-radius: var(--border-radius); - transition: background-color 0.2s linear, border-color 0.2s linear; -} -.c-btn svg { - color: inherit; -} - -.c-btn--large { - font-size: 1.125rem; - padding: 0.88em 1.5em; -} - -.c-btn--block { - display: flex; - width: 100%; -} - -a.c-btn { - text-decoration: none; - display: inline-flex; - flex-wrap: wrap; - gap: 0.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); -} +.c-btn,button{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;font:inherit;justify-content:center;line-height:inherit}.c-btn{border-radius:var(--border-radius);font-family:var(--text-font);font-size:var(--step-0);font-weight:500;padding:.75em 1.125em;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{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}.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);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color)}.c-btn--secondary:hover{background-color:var(--secondary-button-hover-color)}.c-btn--ghost{border:1px solid var(--border-color);color:var(--body-text-color)}.c-btn--ghost:hover{border-color:var(--link-color)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/docs-index.css b/docs/_site/assets/css/components/docs-index.css index 4d2b6dbac0e..2b9a770cd18 100644 --- a/docs/_site/assets/css/components/docs-index.css +++ b/docs/_site/assets/css/components/docs-index.css @@ -1,152 +1 @@ -.docs-index .docs-index__list a { - border-radius: var(--border-radius); - text-decoration: none; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - margin-left: -0.75rem; - -webkit-margin-start: -0.75rem; - margin-inline-start: -0.75rem; - color: var(--headings-color); -} -.docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { - background-color: var(--docs-lightest-background-color); - color: var(--link-color); -} -@media all and (max-width: 1023px) { - .docs-index .docs-index__list a { - padding: 0.5rem 1rem; - margin-left: 0; - -webkit-margin-start: 0; - margin-inline-start: 0; - } -} - -.docs-index__item { - margin: 0; -} -.docs-index__item ul ul { - padding-left: 0.75rem; -} -.docs-index__item[data-has-children] { - margin-bottom: 0.5rem; -} - -.docs-index__list > .docs-index__item { - margin-top: 1.5rem; - -webkit-margin-before: 1.5rem; - margin-block-start: 1.5rem; -} -.docs-index__list > .docs-index__item > a { - color: var(--icon-color); - text-transform: uppercase; - letter-spacing: 1px; - font-size: 0.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 { - transform: rotate(180deg); -} - -.index-js ul[aria-hidden=true] { - display: none; -} - -.index-js ul[aria-hidden=false] { - display: block; -} - -.docs__index__panel[data-open=false] { - display: none; -} -@media all and (min-width: 1024px) { - .docs__index__panel[data-open=false] { - display: block; - } -} -.docs__index__panel[data-open=true] { - display: block; -} -@media all and (min-width: 1024px) { - .docs__index__panel[data-open=true] { - display: block; - } -} - -.docs-index-toggle { - cursor: pointer; - display: flex; - width: 100%; - padding: 0.75rem 1.125rem; - align-items: center; - justify-content: space-between; - gap: 0.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: 1024px) { - .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 0.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); -} - -.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; - } -} +.docs-index .docs-index__list a{-webkit-margin-start:-.75rem;align-items:center;border-radius:var(--border-radius);color:var(--headings-color);display:flex;justify-content:space-between;margin-left:-.75rem;margin-inline-start:-.75rem;padding:.5rem .75rem;text-decoration:none}.docs-index .docs-index__list a:hover,.docs-index .docs-index__list a[aria-current=true]{background-color:var(--docs-lightest-background-color);color:var(--link-color)}@media (max-width:1023px){.docs-index .docs-index__list a{-webkit-margin-start:0;margin-left:0;margin-inline-start:0;padding:.5rem 1rem}}.docs-index__item{margin:0}.docs-index__item ul ul{padding-left:.75rem}.docs-index__item[data-has-children]{margin-bottom:.5rem}.docs-index__list>.docs-index__item{-webkit-margin-before:1.5rem;margin-block-start:1.5rem;margin-top:1.5rem}.docs-index__list>.docs-index__item>a{color:var(--icon-color);font-size:.875rem;font-weight:500;letter-spacing:1px;text-transform:uppercase}.index-js .index-icon{color:inherit;display:block!important;height:.5rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}.index-js [aria-expanded=true] .index-icon{transform:rotate(180deg)}.index-js ul[aria-hidden=true]{display:none}.index-js ul[aria-hidden=false]{display:block}.docs__index__panel[data-open=false]{display:none}@media (min-width:1024px){.docs__index__panel[data-open=false]{display:block}}.docs__index__panel[data-open=true]{display:block}@media (min-width:1024px){.docs__index__panel[data-open=true]{display:block}}.docs-index-toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.docs-index-toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.docs-index-toggle{display:none}}.docs-index-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.docs-index-toggle #ham-bottom,.docs-index-toggle #ham-middle,.docs-index-toggle #ham-top{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)}.eslint-actions{display:inline-flex;flex-direction:column;flex-wrap:wrap;gap:1rem;width:100%}@media (min-width:640px){.eslint-actions{flex-direction:row}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/docs-navigation.css b/docs/_site/assets/css/components/docs-navigation.css index 756e55901db..189ea724bee 100644 --- a/docs/_site/assets/css/components/docs-navigation.css +++ b/docs/_site/assets/css/components/docs-navigation.css @@ -1,136 +1 @@ -.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; - -webkit-margin-before: 1rem; - margin-block-start: 1rem; - margin-bottom: 2rem; - -webkit-margin-after: 2rem; - margin-block-end: 2rem; -} -@media all and (min-width: 1024px) { - .docs-site-nav ul { - font-size: var(--step-0); - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; - margin-bottom: 0; - -webkit-margin-after: 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 0.2s linear; - display: block; -} -.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: 1024px) { - .docs-nav-panel { - display: flex; - flex-direction: row; - justify-content: center; - } -} -.docs-nav-panel[data-open=false] { - display: none; -} -@media all and (min-width: 1024px) { - .docs-nav-panel[data-open=true] { - display: flex; - flex-direction: row; - justify-content: center; - } -} - -@media all and (min-width: 1024px) { - .docs-nav-panel .mobile-only { - display: none; - } -} - -.docs-site-nav-toggle { - cursor: pointer; - display: inline-flex; - align-items: center; - margin-left: 0.5rem; - margin-right: -10px; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.5rem; - -webkit-margin-end: -10px; - 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 0.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: 1024px) { - .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; - -webkit-margin-after: 0; - margin-block-end: 0; - } - .docs-site-nav .flexer { - order: 1; - } -} +.docs-site-nav{display:flex;flex:1;flex-direction:column;grid-column:1/-1;grid-row:1}.docs-site-nav ul{-webkit-margin-before:1rem;-webkit-margin-after:2rem;font-size:var(--step-1);list-style:none;margin-block-end:2rem;margin-block-start:1rem;margin-bottom:2rem;margin-top:1rem}@media (min-width:1024px){.docs-site-nav ul{-webkit-margin-before:0;-webkit-margin-after:0;align-items:center;display:flex;font-size:var(--step-0);margin-block-end:0;margin-block-start:0;margin-bottom:0;margin-top:0}}.docs-site-nav .flexer{align-self:flex-end;display:flex;justify-self:flex-end}.docs-site-nav a:not(.c-btn){color:inherit;display:block;text-decoration:none;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);font-weight:500;text-decoration:none}@media (min-width:1024px){.docs-nav-panel{display:flex;flex-direction:row;justify-content:center}}.docs-nav-panel[data-open=false]{display:none}@media (min-width:1024px){.docs-nav-panel[data-open=true]{display:flex;flex-direction:row;justify-content:center}.docs-nav-panel .mobile-only{display:none}}.docs-site-nav-toggle{-webkit-margin-start:.5rem;-webkit-margin-end:-10px;align-items:center;cursor:pointer;display:inline-flex;margin-left:.5rem;margin-right:-10px;margin-inline-end:-10px;margin-inline-start:.5rem}.docs-site-nav-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:var(--headings-color);height:40px;width:40px}.docs-site-nav-toggle #ham-bottom,.docs-site-nav-toggle #ham-middle,.docs-site-nav-toggle #ham-top{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 (min-width:1024px){.docs-site-nav{flex-direction:row;gap:2rem;grid-column:auto}.docs-site-nav ul{display:flex;font-size:var(--step-0);gap:2rem}.docs-site-nav ul li{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.docs-site-nav .flexer{order:1}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/hero.css b/docs/_site/assets/css/components/hero.css index e150cefbc53..e5f7cbf10ec 100644 --- a/docs/_site/assets/css/components/hero.css +++ b/docs/_site/assets/css/components/hero.css @@ -1,54 +1 @@ -@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); - -webkit-border-after: 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; - -webkit-margin-after: 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; - -webkit-margin-before: 3rem; - margin-block-start: 3rem; -} +@media (min-width:800px){.hero .grid{grid-gap:2rem;align-items:center;display:grid;grid-template-columns:2fr 1fr}}.hero .grid .span-1-7{grid-column:1/2}.hero .grid .span-10-12{grid-column:2/3;justify-self:end}.hero{-webkit-border-after:1px solid var(--divider-color);background-color:var(--hero-background-color);border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}@media (min-width:800px){.hero{min-height:calc(285px + var(--space-xl-4xl))}}.hero .content-container{margin:0;padding:var(--space-xl-4xl) 0}.hero>.content-container{align-items:center;margin:0 auto;padding:0 calc(1rem + 1vw)}.hero--homepage .section-title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.hero--homepage .section-supporting-text{font-size:var(--step-1);margin:0;text-align:left}.hero--homepage .eslint-actions{-webkit-margin-before:3rem;font-size:var(--step-1);margin-block-start:3rem;margin-top:3rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/index.css b/docs/_site/assets/css/components/index.css index 64566d3e5e8..bf70952cf3b 100644 --- a/docs/_site/assets/css/components/index.css +++ b/docs/_site/assets/css/components/index.css @@ -1,98 +1 @@ -.index { - margin-bottom: 4rem; - -webkit-margin-after: 4rem; - margin-block-end: 4rem; -} - -.index__item { - margin: 0; -} -.index__item a { - display: block; - color: inherit; - text-decoration: none; - padding: 0.625rem 0.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: 0.75rem 1.125rem; - align-items: center; - justify-content: space-between; - gap: 0.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: 1024px) { - .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 0.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: 1024px) { - .index__list[data-open=false] { - display: block; - } -} -.index__list[data-open=true] { - display: block; -} -@media all and (min-width: 1024px) { - .index__list[data-open=true] { - display: block; - } -} +.index{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}.index__item{margin:0}.index__item a{border-radius:var(--border-radius);color:inherit;display:block;font-size:var(--step-0);padding:.625rem .875rem;text-decoration:none}.index__item a:hover{color:var(--link-color)}.index__item a[aria-current=page]{background-color:var(--lightest-background-color);color:var(--link-color);font-weight:500}.index__toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.index__toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.index__toggle{display:none}}.index__toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.index__toggle #ham-bottom,.index__toggle #ham-middle,.index__toggle #ham-top{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 (min-width:1024px){.index__list[data-open=false]{display:block}}.index__list[data-open=true]{display:block}@media (min-width:1024px){.index__list[data-open=true]{display:block}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/language-switcher.css b/docs/_site/assets/css/components/language-switcher.css index ebdb3997c38..347aa88174b 100644 --- a/docs/_site/assets/css/components/language-switcher.css +++ b/docs/_site/assets/css/components/language-switcher.css @@ -1,33 +1 @@ -.switcher--language { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 0.25rem 0.5rem; - position: relative; - width: 100%; - padding: 0; - font-size: inherit; -} -@media all and (min-width: 800px) { - .switcher--language { - justify-content: flex-start; - } -} - -.switcher--language .label__text { - flex: 1 0 10ch; -} - -.switcher--language .switcher__select { - flex: 1 0 12rem; -} -@media all and (max-width: 800px) { - .switcher--language .switcher__select { - max-width: 250px; - } -} - -.language-switcher { - display: inline-flex; -} +.switcher--language{align-items:center;display:flex;flex-wrap:wrap;font-size:inherit;gap:.25rem .5rem;justify-content:center;padding:0;position:relative;width:100%}@media (min-width:800px){.switcher--language{justify-content:flex-start}}.switcher--language .label__text{flex:1 0 10ch}.switcher--language .switcher__select{flex:1 0 12rem}@media (max-width:800px){.switcher--language .switcher__select{max-width:250px}}.language-switcher{display:inline-flex} \ No newline at end of file diff --git a/docs/_site/assets/css/components/resources.css b/docs/_site/assets/css/components/resources.css index 03eed049efe..7d213295671 100644 --- a/docs/_site/assets/css/components/resources.css +++ b/docs/_site/assets/css/components/resources.css @@ -1,66 +1 @@ -.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: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; - position: relative; - transition: all 0.2s linear; -} -.resource:hover { - background-color: var(--lighter-background-color); -} - -.resource__image { - flex: 1 0 5.5rem; - max-width: 5.5rem; - overflow: hidden; - padding: 0.25rem; -} -.resource__image img { - display: block; - height: 100%; - width: 100%; - -o-object-fit: contain; - object-fit: contain; -} - -.resource__content { - flex: 4; - padding: 0.75rem; - align-self: center; -} - -.resource__title { - text-decoration: none; - color: var(--headings-color); - font-weight: 500; - margin-bottom: 0.125rem; -} -.resource__title::after { - content: ""; - position: absolute; - left: 0; - offset-inline-start: 0; - top: 0; - offset-block-start: 0; - width: 100%; - height: 100%; -} - -.resource__domain, -.resource__domain a { - text-decoration: none; - color: var(--body-text-color); - font-size: 0.875rem; -} - -.resource__icon { - color: var(--headings-color); - margin: 1rem; - align-self: center; -} +.resource{-webkit-margin-after:.5rem;align-items:stretch;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;margin-block-end:.5rem;margin-bottom:.5rem;overflow:hidden;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%;-o-object-fit:contain;object-fit:contain;width:100%}.resource__content{align-self:center;flex:4;padding:.75rem}.resource__title{color:var(--headings-color);font-weight:500;margin-bottom:.125rem;text-decoration:none}.resource__title:after{offset-inline-start:0;offset-block-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.resource__domain,.resource__domain a{color:var(--body-text-color);font-size:.875rem;text-decoration:none}.resource__icon{align-self:center;color:var(--headings-color);margin:1rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/rules.css b/docs/_site/assets/css/components/rules.css index 70529b0bb2a..4100eb134bb 100644 --- a/docs/_site/assets/css/components/rules.css +++ b/docs/_site/assets/css/components/rules.css @@ -1,178 +1 @@ -.rule-categories { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0; - margin-bottom: 3rem; - background-color: var(--lightest-background-color); - border: 1px solid var(--divider-color); - border-radius: var(--border-radius); -} -.rule-categories .rule-category { - margin: 0; - padding: 1rem; - background: none; - border: none; -} -@media screen and (min-width: 768px) { - .rule-categories .rule-category:not(:first-child)::after { - content: ""; - display: block; - padding: 1px; - border-left: 1px solid var(--divider-color); - left: 0; - } -} -@media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) { - .rule-categories .rule-category:not(:first-child)::after { - height: 70%; - position: absolute; - } -} -@media screen and (min-width: 1024px) and (max-width: 1439px) { - .rule-categories .rule-category:nth-child(2)::after { - height: 70%; - position: absolute; - } -} -.rule-categories .rule-category__description { - flex: 1 1 45ch; -} - -.rule-category { - font-size: var(--step--1); - display: flex; - position: relative; - 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: 0.5rem 0; - position: relative; -} -.rule p:last-of-type { - margin: 0; -} - -.rule__content { - flex: 1 1 35ch; -} - -.rule__name { - font-weight: 500; - font-size: 0.875rem; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} - -a.rule__name { - text-decoration: none; -} -a.rule__name:hover { - text-decoration: underline; -} -a.rule__name::after { - position: absolute; - content: ""; - width: 100%; - height: 100%; - top: 0; - offset-block-start: 0; - left: 0; - offset-inline-start: 0; -} - -.rule__description { - font-size: var(--step--1); -} - -.rule__categories { - font-size: 0.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: 0.5rem; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.5rem; - font-size: var(--step--1); - padding: 0 0.5rem; -} -[data-theme=dark] .rule__status { - background: var(--body-background-color); -} - -.rule__categories__type[aria-hidden=true] { - opacity: 0.25; -} - -/* related rules */ -.related-rules__list { - display: flex; - gap: 0.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: 0.625rem; - display: inline-flex; - gap: 0.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); -} - -a.rule-list-item + a.rule-list-item::before { - content: ","; - display: inline-block; - margin-left: 5px; - margin-right: 5px; -} +.rule-categories{background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:3rem}.rule-categories .rule-category{background:none;border:none;margin:0;padding:1rem}@media screen and (min-width:768px){.rule-categories .rule-category:not(:first-child):after{border-left:1px solid var(--divider-color);content:"";display:block;left:0;padding:1px}}@media screen and (min-width:1440px),screen and (min-width:768px) and (max-width:1023px){.rule-categories .rule-category:not(:first-child):after{height:70%;position:absolute}}@media screen and (min-width:1024px) and (max-width:1439px){.rule-categories .rule-category:nth-child(2):after{height:70%;position:absolute}}.rule-categories .rule-category__description{flex:1 1 45ch}.rule-category{align-items:flex-start;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--step--1);gap:1rem;margin:1.5rem 0;padding:1rem;position:relative}.rule-category p{margin:0}.rule-category .rule-category__description{flex:1 1 30ch}.rule{align-items:center;background-color:var(--lightest-background-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 0;padding:1rem;position:relative}.rule p:last-of-type{margin:0}.rule__content{flex:1 1 35ch}.rule__name{-webkit-margin-after:.25rem;font-size:.875rem;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}a.rule__name{text-decoration:none}a.rule__name:hover{text-decoration:underline}a.rule__name:after{offset-block-start:0;offset-inline-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.rule__description{font-size:var(--step--1)}.rule__categories{align-items:center;border-radius:var(--border-radius);display:flex;font-size:.875rem;gap:1rem;padding:2px 4px}.rule__categories p{align-items:center;display:inline-flex;margin:0}[data-theme=dark] .rule__categories{background:var(--body-background-color)}.rule__status{-webkit-margin-start:.5rem;background:var(--color-rose-50);border-radius:var(--border-radius);color:var(--color-rose-500);display:inline-block;font-size:var(--step--1);font-weight:400;margin-left:.5rem;margin-inline-start:.5rem;padding:0 .5rem}[data-theme=dark] .rule__status{background:var(--body-background-color)}.rule__categories__type[aria-hidden=true]{opacity:.25}.related-rules__list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:start}.related-rules__list__item svg{color:inherit}.related-rules__list__item a{align-items:center;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);color:var(--headings-color);display:inline-flex;gap:.5rem;padding:.625rem;text-decoration:none}.related-rules__list__item a:hover{background-color:var(--lighter-background-color);color:var(--link-color)}a.rule-list-item+a.rule-list-item:before{content:",";display:inline-block;margin-left:5px;margin-right:5px} \ No newline at end of file diff --git a/docs/_site/assets/css/components/search.css b/docs/_site/assets/css/components/search.css index 84a9d218f9a..fd40c717929 100644 --- a/docs/_site/assets/css/components/search.css +++ b/docs/_site/assets/css/components/search.css @@ -1,157 +1 @@ -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; - appearance: none; -} - -[type=search]::-ms-clear, -[type=search]::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.search { - margin: 1rem 0; - position: relative; -} - -.search__input-wrapper, -.search__inner-input-wrapper { - position: relative; -} - -.search__clear-btn { - color: var(--body-text-color); - position: absolute; - display: flex; - top: 50%; - offset-block-start: 50%; - transform: translateY(-50%); - right: 1.5rem; - offset-inline-end: 1.5rem; - z-index: 3; - padding: 0; -} -.search__clear-btn svg { - color: inherit; - width: 1rem; - height: 1rem; - border: 1px solid; - border-radius: 50%; -} - -.search__input { - padding-left: 2.5rem; - -webkit-padding-start: 2.5rem; - padding-inline-start: 2.5rem; - outline-offset: 1px; - width: 100%; -} - -.search__icon { - color: var(--body-text-color); - position: absolute; - display: block; - top: 50%; - offset-block-start: 50%; - transform: translateY(-50%); - left: 0.75rem; - offset-inline-start: 0.75rem; - z-index: 3; -} - -/* search results */ -.search .search-results { - font-size: 0.875rem; - background-color: var(--body-background-color); - z-index: 10; - width: 100%; - border-radius: 0 0 var(--border-radius) var(--border-radius); - border: 1px solid var(--divider-color); - position: relative; - top: 0.25rem; - max-height: 400px; - overflow-y: auto; -} -@media all and (min-width: 1024px) { - .search .search-results { - box-shadow: var(--shadow-lg); - position: absolute; - top: calc(100% + 0.25rem); - } -} -.search .search-results[data-results=true] { - padding: 0; -} -.search .search-results[data-results=false] { - padding: 1rem; -} -.search .search-results:empty { - display: none; -} - -.search-results__list { - list-style: none; - margin: 0; - padding: 0; -} - -.search .search-results__item { - margin: 0; - padding: 0.875rem; - border-bottom: 1px solid var(--lightest-background-color); - -webkit-border-after: 1px solid var(--lightest-background-color); - border-block-end: 1px solid var(--lightest-background-color); - position: relative; -} -.search .search-results__item:hover { - background-color: var(--lightest-background-color); -} -.search .search-results__item:focus-within { - background-color: var(--lightest-background-color); -} - -.search .search-results__item__title { - font-size: var(--step-0); - font-size: 0.875rem; - margin-bottom: 0; - font-family: var(--text-font); -} -.search .search-results__item__title a { - display: block; - text-decoration: none; - color: var(--link-color); - font: inherit; - padding: 0.25rem 0.75rem; -} -.search .search-results__item__title a:hover { - background-color: inherit; - color: var(--link-color); -} -.search .search-results__item__title a::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - content: ""; -} - -.search-results__item__context { - margin: 0; - font-size: 0.875rem; - padding-left: 1rem; -} - -.algolia-docsearch-suggestion--highlight { - background-color: var(--color-brand); - color: #fff; - display: inline-block; - padding: 0 2px; - border-radius: 2px; -} -[data-theme=dark] .algolia-docsearch-suggestion--highlight { - background-color: var(--link-color); - color: var(--color-neutral-900); -} +[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[type=search]::-ms-clear,[type=search]::-ms-reveal{display:none;height:0;width:0}.search{margin:1rem 0}.search,.search__inner-input-wrapper,.search__input-wrapper{position:relative}.search__clear-btn{offset-block-start:50%;offset-inline-end:1.5rem;color:var(--body-text-color);display:flex;padding:0;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);z-index:3}.search__clear-btn svg{border:1px solid;border-radius:50%;color:inherit;height:1rem;width:1rem}.search__input{-webkit-padding-start:2.5rem;outline-offset:1px;padding-left:2.5rem;padding-inline-start:2.5rem;width:100%}.search__icon{offset-block-start:50%;offset-inline-start:.75rem;color:var(--body-text-color);display:block;left:.75rem;position:absolute;top:50%;transform:translateY(-50%);z-index:3}.search .search-results{background-color:var(--body-background-color);border:1px solid var(--divider-color);border-radius:0 0 var(--border-radius) var(--border-radius);font-size:.875rem;max-height:400px;overflow-y:auto;position:relative;top:.25rem;width:100%;z-index:10}@media (min-width:1024px){.search .search-results{box-shadow:var(--shadow-lg);position:absolute;top:calc(100% + .25rem)}}.search .search-results[data-results=true]{padding:0}.search .search-results[data-results=false]{padding:1rem}.search .search-results:empty{display:none}.search-results__list{list-style:none;margin:0;padding:0}.search .search-results__item{-webkit-border-after:1px solid var(--lightest-background-color);border-block-end:1px solid var(--lightest-background-color);border-bottom:1px solid var(--lightest-background-color);margin:0;padding:.875rem;position:relative}.search .search-results__item:hover{background-color:var(--lightest-background-color)}.search .search-results__item:focus-within{background-color:var(--lightest-background-color)}.search .search-results__item__title{font-family:var(--text-font);font-size:var(--step-0);font-size:.875rem;margin-bottom:0}.search .search-results__item__title a{color:var(--link-color);display:block;font:inherit;padding:.25rem .75rem;text-decoration:none}.search .search-results__item__title a:hover{background-color:inherit;color:var(--link-color)}.search .search-results__item__title a:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.search-results__item__context{font-size:.875rem;margin:0;padding-left:1rem}.algolia-docsearch-suggestion--highlight{background-color:var(--color-brand);border-radius:2px;color:#fff;display:inline-block;padding:0 2px}[data-theme=dark] .algolia-docsearch-suggestion--highlight{background-color:var(--link-color);color:var(--color-neutral-900)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/social-icons.css b/docs/_site/assets/css/components/social-icons.css index 6b8f4d1ce32..4945e282f22 100644 --- a/docs/_site/assets/css/components/social-icons.css +++ b/docs/_site/assets/css/components/social-icons.css @@ -1,22 +1 @@ -.eslint-social-icons { - margin-bottom: -1rem; - -webkit-margin-after: -1rem; - margin-block-end: -1rem; -} -.eslint-social-icons ul { - margin: 0; - padding: 0; - margin-left: -1rem; - -webkit-margin-start: -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 0.75rem; -} +.eslint-social-icons{-webkit-margin-after:-1rem;margin-block-end:-1rem;margin-bottom:-1rem}.eslint-social-icons ul{-webkit-margin-start:-1rem;display:inline-flex;margin:0 0 0 -1rem;margin-inline-start:-1rem;padding:0}.eslint-social-icons ul li{align-items:center;display:inline-flex;margin:0}.eslint-social-icons ul li a{display:flex;padding:1rem .75rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/tabs.css b/docs/_site/assets/css/components/tabs.css index 49208eea6d9..c37edae0d43 100644 --- a/docs/_site/assets/css/components/tabs.css +++ b/docs/_site/assets/css/components/tabs.css @@ -1,58 +1 @@ -.c-tabs pre { - margin-top: 0; - -webkit-margin-before: 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: 0.75rem 1.125rem; - align-items: center; - justify-content: center; - border-radius: var(--border-radius) var(--border-radius) 0 0; - transition: background-color 0.2s linear, border-color 0.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; - -webkit-margin-after: 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; - -webkit-margin-after: 0; - margin-block-end: 0; -} - -.c-tabs__tabpanel__title { - margin-bottom: 1.5rem; - -webkit-margin-after: 1.5rem; - margin-block-end: 1.5rem; -} - -.js-tabs .c-tabs__tabpanel__title { - display: none; -} +.c-tabs pre{-webkit-margin-before:0;margin-block-start:0;margin-top:0}.js-tabs .c-tabs__tablist{display:flex;justify-content:start}.c-tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius) var(--border-radius) 0 0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-size:var(--step-0);font-weight:500;justify-content:center;line-height:inherit;margin:0;padding:.75rem 1.125rem;transition:background-color .2s linear,border-color .2s linear}.c-tabs__tab:hover{color:var(--link-color)}.c-tabs__tab[aria-selected=true]{background-color:var(--lightest-background-color);color:var(--link-color)}.c-tabs__tabpanel{-webkit-margin-after:2rem;background-color:var(--lightest-background-color);border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);margin-block-end:2rem;margin-bottom:2rem}.js-tabs .c-tabs__tabpanel{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.c-tabs__tabpanel__title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.js-tabs .c-tabs__tabpanel__title{display:none} \ No newline at end of file diff --git a/docs/_site/assets/css/components/theme-switcher.css b/docs/_site/assets/css/components/theme-switcher.css index 62ed61c1ec1..fea453533c8 100644 --- a/docs/_site/assets/css/components/theme-switcher.css +++ b/docs/_site/assets/css/components/theme-switcher.css @@ -1,68 +1 @@ -.theme-switcher { - display: inline-flex; - align-items: center; - gap: 0.5rem; - position: relative; -} - -.theme-switcher-label.theme-switcher-label { - 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: 0.625rem 0.875rem; - display: inline-flex; - align-items: center; - margin: 0; - gap: 0.25rem; - color: inherit; -} -.theme-switcher__button:first-of-type { - border-right: 0.5px solid var(--border-color); - -webkit-border-end: 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); - -webkit-border-start: 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] { - 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); -} +.theme-switcher{align-items:center;display:inline-flex;gap:.5rem;position:relative}.theme-switcher-label.theme-switcher-label{color:inherit;font:inherit;font-family:var(--text-font);margin:0}.theme-switcher__buttons{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex}.theme-switcher__button{align-items:center;box-shadow:var(--shadow-xs);color:inherit;display:inline-flex;flex:0;gap:.25rem;margin:0;padding:.625rem .875rem}.theme-switcher__button:first-of-type{-webkit-border-end:.5px solid var(--border-color);border-inline-end:.5px solid var(--border-color);border-right:.5px solid var(--border-color)}.theme-switcher__button:last-of-type{-webkit-border-start:.5px solid var(--border-color);border-inline-start:.5px solid var(--border-color);border-left:.5px solid var(--border-color)}.theme-switcher__button .theme-switcher__icon{color:var(--icon-color)}.theme-switcher__button[aria-pressed=true],.theme-switcher__button[aria-pressed=true] .theme-switcher__icon,.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:hover .theme-switcher__icon,.theme-switcher__button[aria-pressed=false]:hover .theme-switcher__icon{color:var(--link-color)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/toc.css b/docs/_site/assets/css/components/toc.css index 59196d66eff..e57dc370281 100644 --- a/docs/_site/assets/css/components/toc.css +++ b/docs/_site/assets/css/components/toc.css @@ -1,106 +1 @@ -@charset "UTF-8"; -.docs-toc { - margin: 2rem 0; -} - -.docs-aside .docs-toc { - display: none; -} -@media all and (min-width: 1400px) { - .docs-toc { - display: none; - } -} -@media all and (min-width: 1400px) { - .docs-aside .docs-toc { - display: block; - } -} - -.c-toc ol { - margin: 0; -} -.c-toc ol li { - position: relative; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; - padding-left: 1rem; - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} -.c-toc ol li > ol { - margin-top: 0.25rem; -} -.c-toc ol li::before { - content: "└"; - color: var(--icon-color); - position: absolute; - left: -0.4rem; - offset-inline-start: -0.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: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; -} - -.c-toc__label { - width: -moz-fit-content; - 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; - 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: 2rem; - -webkit-margin-start: 2rem; - margin-inline-start: 2rem; - transition: all 0.1s linear; - color: var(--color-neutral-400); -} -[aria-expanded=true] .toc-trigger-icon { - transform: rotate(180deg); -} - -.c-toc__panel[data-open=false] { - display: none; -} -.c-toc__panel[data-open=true] { - display: block; -} +@charset "UTF-8";.docs-toc{margin:2rem 0}.docs-aside .docs-toc{display:none}@media (min-width:1400px){.docs-toc{display:none}.docs-aside .docs-toc{display:block}}.c-toc ol{margin:0}.c-toc ol li{-webkit-margin-after:.25rem;-webkit-padding-start:1rem;margin-block-end:.25rem;margin-bottom:.25rem;padding-left:1rem;padding-inline-start:1rem;position:relative}.c-toc ol li>ol{margin-top:.25rem}.c-toc ol li:before{offset-inline-start:-.4rem;color:var(--icon-color);content:"└";left:-.4rem;position:absolute}.c-toc a{color:var(--headings-color);text-decoration:none}.c-toc a:hover{color:var(--link-color)}.c-toc__label.c-toc__label{-webkit-margin-after:.5rem;color:var(--body-text-color);font-family:var(--text-font);font-size:var(--step-0);margin-block-end:.5rem;margin-bottom:.5rem}.c-toc__label{width:-moz-fit-content;width:fit-content}.c-toc__label button{align-items:center;border-radius:0;color:var(--link-color);cursor:pointer;display:flex;font:inherit;font-size:inherit;font-weight:500;height:100%;justify-content:space-between;line-height:1.5;padding:0;position:relative;text-align:left;transition:outline .1s linear;width:100%}.c-toc__label button svg{flex:none}.toc-trigger-icon{-webkit-margin-start:2rem;color:var(--color-neutral-400);display:block!important;height:.5rem;margin-left:2rem;margin-inline-start:2rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}[aria-expanded=true] .toc-trigger-icon{transform:rotate(180deg)}.c-toc__panel[data-open=false]{display:none}.c-toc__panel[data-open=true]{display:block} \ No newline at end of file diff --git a/docs/_site/assets/css/components/version-switcher.css b/docs/_site/assets/css/components/version-switcher.css index ead3d98868c..8c3e2b995c3 100644 --- a/docs/_site/assets/css/components/version-switcher.css +++ b/docs/_site/assets/css/components/version-switcher.css @@ -1,5 +1 @@ -.version-switcher { - margin-bottom: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; -} +.version-switcher{-webkit-margin-after:.5rem;margin-block-end:.5rem;margin-bottom:.5rem} \ No newline at end of file diff --git a/docs/_site/assets/css/docs-footer.css b/docs/_site/assets/css/docs-footer.css index dd58bb8eb60..e967f26aa59 100644 --- a/docs/_site/assets/css/docs-footer.css +++ b/docs/_site/assets/css/docs-footer.css @@ -1,49 +1 @@ -.docs-footer { - display: flex; - flex-direction: column; - gap: 2rem; - justify-content: space-between; - align-items: baseline; - font-size: 0.875rem; -} -@media all and (max-width: 800px) { - .docs-footer { - padding: 1.5rem 0 4rem; - align-items: center; - } -} - -.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; - } -} +.docs-footer{align-items:baseline;display:flex;flex-direction:column;font-size:.875rem;gap:2rem;justify-content:space-between}@media (max-width:800px){.docs-footer{align-items:center;padding:1.5rem 0 4rem}}.copyright p{margin:0}.docs-socials-and-legal{display:flex;flex-direction:column;gap:1rem}@media (max-width:800px){.docs-socials-and-legal{text-align:center}}.docs-switchers{display:flex;flex-wrap:wrap;gap:1.5rem}.docs-switchers .language-switcher,.docs-switchers .theme-switcher{flex:1 1 240px}@media (max-width:800px){.docs-switchers .language-switcher,.docs-switchers .theme-switcher{justify-content:center}} \ No newline at end of file diff --git a/docs/_site/assets/css/docs-header.css b/docs/_site/assets/css/docs-header.css index e3daec2085d..5c3a56a7643 100644 --- a/docs/_site/assets/css/docs-header.css +++ b/docs/_site/assets/css/docs-header.css @@ -1,44 +1 @@ -.site-header { - padding: 0.75rem 0; - border-top: 4px solid var(--link-color); - border-bottom: 1px solid var(--divider-color); - -webkit-border-before: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} -.site-header .docs-wrapper { - display: grid; - align-items: start; - padding-top: 0; - padding-bottom: 0; - -webkit-padding-before: 0; - padding-block-start: 0; - -webkit-padding-after: 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: 0.5rem 0; -} - -.logo svg { - display: inline-block; - margin-bottom: -4px; - -webkit-margin-after: -4px; - margin-block-end: -4px; - width: 100%; - max-width: 100px; - height: auto; -} +.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .docs-wrapper{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:1024px){.site-header .docs-wrapper{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%} \ No newline at end of file diff --git a/docs/_site/assets/css/docs.css b/docs/_site/assets/css/docs.css index c2c4e191153..3639597a489 100644 --- a/docs/_site/assets/css/docs.css +++ b/docs/_site/assets/css/docs.css @@ -1,161 +1 @@ -/* docs layout styles */ -html { - scroll-behavior: smooth; -} - -.docs { - max-width: 1700px; - margin: 0 auto; -} - -.docs-aside__content { - flex: 1; -} - -.docs-wrapper { - padding: 0 var(--space-s-l); - flex: 1; - display: flex; - flex-direction: column; -} -@media all and (min-width: 1024px) { - .docs-wrapper { - display: grid; - grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); - align-items: stretch; - } -} - -.docs-nav { - grid-column: 1/2; - grid-row: 1/2; - padding-top: var(--space-l-xl); - -webkit-padding-before: var(--space-l-xl); - padding-block-start: var(--space-l-xl); - font-size: 0.875rem; - display: grid; - grid-auto-rows: max-content; - align-items: start; -} -@media all and (min-width: 1024px) { - .docs-nav { - padding: var(--space-l-xl) 0; - padding-right: var(--space-s-l); - -webkit-padding-end: var(--space-s-l); - padding-inline-end: var(--space-s-l); - border-right: 1px solid var(--divider-color); - -webkit-border-end: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); - } -} - -.docs-content { - grid-column: 2/3; - padding: var(--space-l-xl) 0; - flex: 1; -} -@media all and (min-width: 800px) { - .docs-content { - display: grid; - grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr); - grid-gap: 1rem; - } -} -@media all and (min-width: 1024px) { - .docs-content { - padding: 0; - } -} -@media all and (min-width: 1300px) { - .docs-content { - grid-gap: 2rem; - } -} - -.docs-main { - flex: 1 1 68ch; -} -@media all and (min-width: 800px) { - .docs-main { - padding-right: var(--space-s-l); - -webkit-padding-end: var(--space-s-l); - padding-inline-end: var(--space-s-l); - border-right: 1px solid var(--divider-color); - -webkit-border-end: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); - } -} -@media all and (min-width: 1024px) { - .docs-main { - padding: var(--space-l-xl) var(--space-l-2xl); - } -} - -.docs-aside { - grid-column: 2/3; - display: flex; - flex-direction: column; -} -@media all and (min-width: 800px) { - .docs-aside { - padding: var(--space-l-xl) 0; - } -} - -.docs-toc { - flex: 1; - align-self: center; -} - -.docs-edit-link { - border-top: 1px solid var(--divider-color); - padding-top: 1.5rem; - -webkit-padding-before: 1.5rem; - padding-block-start: 1.5rem; - margin: 3rem 0; -} - -div.correct, -div.incorrect { - position: relative; -} -div.correct::after, -div.incorrect::after { - position: absolute; - top: -22px; - right: -22px; - offset-inline-end: -22px; - offset-block-start: -22px; -} - -div.correct::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.incorrect::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: 0.5rem; - right: 0.5rem; - offset-block-end: 0.5rem; - offset-inline-end: 0.5rem; -} -@media all and (max-width: 768px) { - .c-btn.c-btn--playground { - display: none; - } -} - -@media (hover: none) { - .anchorjs-link { - opacity: 1; - } -} +html{scroll-behavior:smooth}.docs{margin:0 auto;max-width:1700px}.docs-aside__content{flex:1}.docs-wrapper{display:flex;flex:1;flex-direction:column;padding:0 var(--space-s-l)}@media (min-width:1024px){.docs-wrapper{align-items:stretch;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,3.5fr)}}.docs-nav{-webkit-padding-before:var(--space-l-xl);align-items:start;display:grid;font-size:.875rem;grid-auto-rows:max-content;grid-column:1/2;grid-row:1/2;padding-top:var(--space-l-xl);padding-block-start:var(--space-l-xl)}@media (min-width:1024px){.docs-nav{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding:var(--space-l-xl) 0;padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}.docs-content{flex:1;grid-column:2/3;padding:var(--space-l-xl) 0}@media (min-width:800px){.docs-content{grid-gap:1rem;display:grid;grid-template-columns:minmax(0,4fr) minmax(160px,1fr)}}@media (min-width:1024px){.docs-content{padding:0}}@media (min-width:1300px){.docs-content{grid-gap:2rem}}.docs-main{flex:1 1 68ch}@media (min-width:800px){.docs-main{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}@media (min-width:1024px){.docs-main{padding:var(--space-l-xl) var(--space-l-2xl)}}.docs-aside{display:flex;flex-direction:column;grid-column:2/3}@media (min-width:800px){.docs-aside{padding:var(--space-l-xl) 0}}.docs-toc{align-self:center;flex:1}.docs-edit-link{-webkit-padding-before:1.5rem;border-top:1px solid var(--divider-color);margin:3rem 0;padding-top:1.5rem;padding-block-start:1.5rem}div.correct,div.incorrect{position:relative}div.correct:after,div.incorrect:after{offset-inline-end:-22px;offset-block-start:-22px;position:absolute;right:-22px;top:-22px}div.correct:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-11 11-5-5' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}div.incorrect:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-12 12m0-12 12 12' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}pre[class*=language-]{position:relative}.c-btn.c-btn--playground{offset-block-end:.5rem;offset-inline-end:.5rem;bottom:.5rem;font-size:var(--step--1);position:absolute;right:.5rem}@media (max-width:768px){.c-btn.c-btn--playground{display:none}}@media (hover:none){.anchorjs-link{opacity:1}} \ No newline at end of file diff --git a/docs/_site/assets/css/eslint-site-footer.css b/docs/_site/assets/css/eslint-site-footer.css index 4d430be50a3..fef1c4e9e6d 100644 --- a/docs/_site/assets/css/eslint-site-footer.css +++ b/docs/_site/assets/css/eslint-site-footer.css @@ -1,63 +1 @@ -.site-footer { - text-align: center; - background-color: var(--footer-background-color); - border-top: 1px solid var(--divider-color); - -webkit-border-before: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); -} - -.footer-cta .logo { - margin-bottom: 2.5rem; - -webkit-margin-after: 2.5rem; - margin-block-end: 2.5rem; -} -.footer-cta .section-supporting-text { - margin-bottom: 2.5rem; - -webkit-margin-after: 2.5rem; - margin-block-end: 2.5rem; -} -.footer-cta .eslint-actions { - justify-content: center; -} - -.footer-legal-links ul li { - display: inline-block; - margin-right: 0.5rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; -} -.footer-legal-links ul li:not(:last-of-type)::after { - content: "|"; - margin-left: 0.5rem; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.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; - -webkit-padding-before: 2rem; - padding-block-start: 2rem; - -webkit-padding-after: 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; - } -} +.site-footer{-webkit-border-before:1px solid var(--divider-color);background-color:var(--footer-background-color);border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);text-align:center}.footer-cta .logo,.footer-cta .section-supporting-text{-webkit-margin-after:2.5rem;margin-block-end:2.5rem;margin-bottom:2.5rem}.footer-cta .eslint-actions{justify-content:center}.footer-legal-links ul li{-webkit-margin-end:.5rem;display:inline-block;margin-right:.5rem;margin-inline-end:.5rem}.footer-legal-links ul li:not(:last-of-type):after{-webkit-margin-start:.5rem;content:"|";margin-left:.5rem;margin-inline-start:.5rem}.footer-legal-section{font-size:var(--step--1);padding:2rem 1rem}.copyright{margin:0 auto;max-width:1100px}.footer-middle{-webkit-padding-before:2rem;-webkit-padding-after:2rem;align-items:center;display:flex;flex-direction:column;gap:2rem;padding-block-end:2rem;padding-block-start:2rem;padding-bottom:2rem;padding-top:2rem}@media (min-width:768px){.footer-middle{flex-direction:row;justify-content:space-between}} \ No newline at end of file diff --git a/docs/_site/assets/css/eslint-site-header.css b/docs/_site/assets/css/eslint-site-header.css index 8b2e5f178f1..7b78af2a373 100644 --- a/docs/_site/assets/css/eslint-site-header.css +++ b/docs/_site/assets/css/eslint-site-header.css @@ -1,45 +1 @@ -.site-header { - padding: 0.75rem 0; - border-top: 4px solid var(--link-color); - -webkit-border-before: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} -.site-header .content-container { - display: grid; - align-items: start; - padding-top: 0; - padding-bottom: 0; - -webkit-padding-before: 0; - padding-block-start: 0; - -webkit-padding-after: 0; - padding-block-end: 0; -} -@media all and (min-width: 680px) { - .site-header .content-container { - 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: 0.5rem 0; - z-index: 2; -} - -.logo svg { - display: inline-block; - margin-bottom: -4px; - -webkit-margin-after: -4px; - margin-block-end: -4px; - width: 100%; - max-width: 100px; - height: auto; -} +.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .content-container{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:680px){.site-header .content-container{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center;z-index:2}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%} \ No newline at end of file diff --git a/docs/_site/assets/css/forms.css b/docs/_site/assets/css/forms.css index 93659b54db9..4f8293b59ce 100644 --- a/docs/_site/assets/css/forms.css +++ b/docs/_site/assets/css/forms.css @@ -1,53 +1 @@ -.c-custom-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - box-sizing: border-box; - display: block; - width: 100%; - max-width: 100%; - min-width: 0; - padding: 0.625rem 0.875rem; - padding-right: 2.1875rem; - -webkit-padding-end: 2.1875rem; - padding-inline-end: 2.1875rem; - font: inherit; - color: var(--body-text-color); - 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 0.875rem top 50%, 0 0; - background-size: 1em auto, 100%; -} - -.label__text.label__text { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - font-family: var(--text-font); - color: inherit; - font-weight: 400; - line-height: 1.5; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} - -input { - border: 1px solid var(--border-color); - border-radius: var(--border-radius); - padding: 0.625rem 0.875rem; - font: inherit; - font-size: 1rem; - display: block; - min-width: 0; - line-height: 1.3; - max-width: 100%; - background-color: var(--body-background-color); - color: inherit; -} +.c-custom-select{-webkit-padding-end:2.1875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--body-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 7.61 5 5 5-5' stroke='%23667085' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--body-background-color) 0,var(--body-background-color) 100%);background-position:right .875rem top 50%,0 0;background-repeat:no-repeat,repeat;background-size:1em auto,100%;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--body-text-color);display:block;font:inherit;line-height:1.3;max-width:100%;min-width:0;padding:.625rem 2.1875rem .625rem .875rem;padding-inline-end:2.1875rem;width:100%}.label__text.label__text{-webkit-margin-after:.25rem;align-items:center;color:inherit;display:flex;font-family:var(--text-font);font-size:.875rem;font-weight:400;gap:.5rem;line-height:1.5;margin-block-end:.25rem;margin-bottom:.25rem}input{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:inherit;display:block;font:inherit;font-size:1rem;line-height:1.3;max-width:100%;min-width:0;padding:.625rem .875rem} \ No newline at end of file diff --git a/docs/_site/assets/css/foundations.css b/docs/_site/assets/css/foundations.css index 43867b41adc..f1731eae62c 100644 --- a/docs/_site/assets/css/foundations.css +++ b/docs/_site/assets/css/foundations.css @@ -1,439 +1 @@ -::-moz-selection { - background-color: var(--color-brand); - color: #fff; -}::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; -} - -input:focus-visible { - outline: 2px solid var(--link-color); - border-color: var(--border-color); -} - -input:focus { - outline: 2px solid transparent; - box-shadow: 0 0 0 2px var(--link-color); -} - -*, -*::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 0.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); - -webkit-border-before: 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); - -webkit-margin-before: 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; - -webkit-margin-after: 1rem; - margin-block-end: 1rem; -} - -.section-supporting-text { - font-size: var(--step-1); -} - -code, -pre { - font-family: var(--mono-font); - font-variant-ligatures: none; -} - -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 0.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: 0.25rem 0.5rem; - border: 1px solid var(--divider-color); -} -table th { - background-color: var(--lightest-background-color); - padding: 0.25rem 0.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 0.1s linear; -} -.side-header a { - color: inherit; - text-decoration: none; -} - -svg { - flex: none; - transition: color 0.1s linear; -} - -p { - margin: 0 0 1.5em; -} -:matches(nav, .posts-collection) p { - margin-bottom: 0.75em; - -webkit-margin-after: 0.75em; - margin-block-end: 0.75em; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} - -ul, -ol { - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; -} -ul li, -ol li { - margin: 0 0 0.75em; -} -.person__bio ul, -.person__bio ol { - padding-left: 1.5rem; - -webkit-padding-start: 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; - -webkit-margin-after: 4rem; - margin-block-end: 4rem; -} -figure img { - margin-bottom: 1rem; - -webkit-margin-after: 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 0.15s linear; - outline-offset: 3px; - } -} -/* typography */ -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; - -webkit-margin-after: 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; - -webkit-margin-before: 0; - margin-block-start: 0; -} - -.docs-main h2, .components-main h2, -.docs-main h3, -.components-main h3, -.docs-main h4, -.components-main h4, -.docs-main h5, -.components-main h5, -.docs-main h6, -.components-main h6 { - margin-top: 3rem; - margin-bottom: 1.5rem; - -webkit-margin-before: 3rem; - margin-block-start: 3rem; - -webkit-margin-after: 1.5rem; - margin-block-end: 1.5rem; -} -.docs-main h2:first-child, .components-main h2:first-child, -.docs-main h3:first-child, -.components-main h3:first-child, -.docs-main h4:first-child, -.components-main h4:first-child, -.docs-main h5:first-child, -.components-main h5:first-child, -.docs-main h6:first-child, -.components-main h6:first-child { - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; -} - -small, -caption, -cite, -figcaption { - font-size: var(--step--1); -} - -h6, -.h6 { - font-size: var(--step-0); -} - -h5, -.h5 { - font-size: var(--step-0); -} - -h4, -.h4 { - font-size: var(--step-1); -} - -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; -} - -.h0 { - font-size: var(--step-6); - line-height: 1.2; -} +::-moz-selection{background-color:var(--color-brand);color:#fff}::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){box-shadow:none;outline:1px solid transparent}.js-focus-visible :focus:not(.focus-visible){box-shadow:none;outline:1px solid transparent}input:focus-visible{border-color:var(--border-color);outline:2px solid var(--link-color)}input:focus{box-shadow:0 0 0 2px var(--link-color);outline:2px solid transparent}*,:after,:before{box-sizing:border-box}html{accent-color:var(--link-color);caret-color:var(--link-color);font-family:var(--text-font);height:100%;overflow-x:hidden}body,html{background-color:var(--body-background-color)}body{color:var(--body-text-color);display:flex;flex-direction:column;margin:0 auto;min-height:100%;position:relative}#skip-link{offset-block-start:-30em;offset-inline-start:0;offset-inline-end:auto;left:0;position:fixed;right:auto;top:-30em;transition:top .1s linear;z-index:999}#skip-link:focus{offset-block-start:2px;outline:2px solid transparent;top:2px}#skip-link:focus-visible{offset-block-start:2px;outline:2px solid transparent;top:2px}main{flex:1}main:focus,main:target{outline:none}hr{-webkit-border-before:1px solid var(--divider-color);background:none;border:none;border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);height:0;margin:2rem 0}.content-container{margin:0 auto;padding:var(--space-xl-3xl) calc(1rem + 1vw);width:100%}.section-head .section-supporting-text{margin:0 auto var(--space-l-2xl);max-width:768px;text-align:center}.section-foot{-webkit-margin-before:var(--space-l-2xl);margin-block-start:var(--space-l-2xl);margin-top:var(--space-l-2xl)}.section-foot .section-supporting-text{font-size:var(--step--1);margin:0 auto;max-width:768px;text-align:center}.section-title{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}.section-supporting-text{font-size:var(--step-1)}code,pre{font-family:var(--mono-font);font-variant-ligatures:none}code{color:var(--link-color)}pre code{color:unset}.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{border-collapse:collapse;margin:2.5rem 0;width:100%}table,table td{border:1px solid var(--divider-color)}table td,table th{padding:.25rem .5rem}table th{background-color:var(--lightest-background-color)}.c-btn .c-icon:hover,a,a .c-icon:hover,button .c-icon:hover{color:var(--link-color)}a{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{-webkit-margin-after:.75em;margin-block-end:.75em;margin-bottom:.75em}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}ol,ul{-webkit-margin-before:0;margin-block-start:0;margin-top:0}ol li,ul li{margin:0 0 .75em}.person__bio ol,.person__bio ul{-webkit-padding-start:1.5rem;padding-left:1.5rem;padding-inline-start:1.5rem}.docs-main ol,.docs-main ul,.post-main ol,.post-main ul{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{display:none;margin:0}figure{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}figure img{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}figure figcaption{color:var(--grey)}img{display:block;height:auto;max-width:100%;position:relative}nav ol,nav ul{list-style:none;margin:0;padding:0}.video{margin:2em auto;max-width:1400px;width:90%}.video iframe{aspect-ratio:16/9;height:auto;width:100%}@media (prefers-reduced-motion:no-preference){.focus-visible,:focus-visible{outline-offset:3px;transition:outline-offset .15s linear}}body{font-size:var(--step-0);line-height:1.5}.eyebrow{-webkit-margin-after:1.5rem;color:var(--link-color);display:block;font-size:1rem;font-weight:500;margin-block-end:1.5rem;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{-webkit-margin-before:0;color:var(--headings-color);font-family:var(--display-font);font-weight:500;margin-block-start:0;margin-top:0}.components-main h2,.components-main h3,.components-main h4,.components-main h5,.components-main h6,.docs-main h2,.docs-main h3,.docs-main h4,.docs-main h5,.docs-main h6{-webkit-margin-before:3rem;-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-block-start:3rem;margin-bottom:1.5rem;margin-top:3rem}.components-main h2:first-child,.components-main h3:first-child,.components-main h4:first-child,.components-main h5:first-child,.components-main h6:first-child,.docs-main h2:first-child,.docs-main h3:first-child,.docs-main h4:first-child,.docs-main h5:first-child,.docs-main h6:first-child{-webkit-margin-before:0;margin-block-start:0;margin-top:0}caption,cite,figcaption,small{font-size:var(--step--1)}.h5,.h6,h5,h6{font-size:var(--step-0)}.h4,h4{font-size:var(--step-1)}.h3,h3{font-size:var(--step-2)}.h2,.h3,h2,h3{line-height:1.2}.h2,h2{font-size:var(--step-3)}.h1,h1{font-size:var(--step-4)}.h0,.h1,h1{line-height:1.2}.h0{font-size:var(--step-6)} \ No newline at end of file diff --git a/docs/_site/assets/css/languages.css b/docs/_site/assets/css/languages.css index 00a7eb64f3c..9b7114e3986 100644 --- a/docs/_site/assets/css/languages.css +++ b/docs/_site/assets/css/languages.css @@ -1,51 +1 @@ -@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; - width: 100%; - padding: 0.75rem 0.1rem; - text-decoration: none; - display: block; - display: flex; - align-items: center; - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 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: 0.5rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; -} - -.languages-section .languages-list { - font-size: var(--step-1); - border-left: 4px solid var(--tab-border-color); - padding-left: 1rem; - -webkit-border-start: 4px solid var(--tab-border-color); - border-inline-start: 4px solid var(--tab-border-color); - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} +@charset "UTF-8";.languages-list{font-size:var(--step-0);margin:0;padding:0}.languages-list li{margin:0}.languages-list li:last-of-type a{border-bottom:0}.languages-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:inherit;display:block;display:flex;padding:.75rem .1rem;text-decoration:none;width:100%}.languages-list a[aria-current=true]{color:var(--link-color);font-weight:500}.languages-list a[aria-current=true]:after{content:"✔️"}.languages-list a:hover{color:var(--link-color)}.languages-section .flag{-webkit-margin-end:.5rem;font-size:2em;margin-right:.5rem;margin-inline-end:.5rem}.languages-section .languages-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem} \ No newline at end of file diff --git a/docs/_site/assets/css/print.css b/docs/_site/assets/css/print.css index 629a5f8322d..330c4c3c801 100644 --- a/docs/_site/assets/css/print.css +++ b/docs/_site/assets/css/print.css @@ -1,203 +1 @@ -*, -*::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*="eslint.org"])::after { - content: " (" attr(href) ")"; -} - -.resource a::after { - display: none; -} - -ul { - page-break-inside: avoid; -} - -.docs-toc, -.docs-index, -.docs-aside, -#skip-link { - display: none; -} - -@media print { - @page { - margin: 1cm; - } -} +*,:after,:before,:first-letter,blockquote:first-line,div:first-line,li:first-line,p:first-line{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}body{background:none;color:#000;font-family:Helvetica,sans-serif;font-size:14pt;line-height:1.45;margin:0!important;padding:0!important;width:100%!important}.grid{display:block}.docs-content,.docs-wrapper,main{display:block;margin:1cm auto;max-width:75ch;width:100%}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}h2,h3,p{orphans:3;widows:3}code{font:12pt Courier,monospace}blockquote{font-size:12pt;margin:1.2em;padding:1em}hr{background-color:#ccc}img{max-width:100%!important}a img{border:none}a:link,a:visited{background:transparent;color:#333;font-weight:700;text-decoration:underline}abbr[title]:after{content:" (" attr(title) ")"}a[href^="http://"]{color:#000}a[href$=".gif"]:after,a[href$=".jpeg"]:after,a[href$=".jpg"]:after,a[href$=".png"]:after{content:" (" attr(href) ") ";display:none}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}table{margin:1px;text-align:left}th{font-weight:700}td,th{border-bottom:1px solid #333}td,th{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}.c-btn.c-btn--playground,.docs-edit-link,[class*=sidebar],aside,body>:not(main),button{display:none}a[href^=http]:not([href*="eslint.org"]):after{content:" (" attr(href) ")"}.resource a:after{display:none}ul{page-break-inside:avoid}#skip-link,.docs-aside,.docs-index,.docs-toc{display:none}@media print{@page{margin:1cm}} \ No newline at end of file diff --git a/docs/_site/assets/css/styles.css b/docs/_site/assets/css/styles.css index d2b8ea244cd..d2b74e8cd07 100644 --- a/docs/_site/assets/css/styles.css +++ b/docs/_site/assets/css/styles.css @@ -1,2975 +1 @@ -@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) { - :root { - --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; - } -} -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,1023,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|l-3xl|s-l */ -:root { - --fluid-min-width: 320; - --fluid-max-width: 1023; - --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: 1024px) { - :root { - --fluid-screen: calc(var(--fluid-max-width) * 1px); - } -} -: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, 16)); - --fc-s-max: (var(--f-0-max, 16)); - --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)); - --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp)); - --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp)); -} - -/* @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: "Mono Punctuators", "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: - 0 12px 16px -4px rgba(16, 24, 40, 0.1), - 0 4px 6px -2px rgba(16, 24, 40, 0.05); - --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); - --border-radius: .5rem; -} - -::-moz-selection { - background-color: var(--color-brand); - color: #fff; -} - -::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; -} - -input:focus-visible { - outline: 2px solid var(--link-color); - border-color: var(--border-color); -} - -input:focus { - outline: 2px solid transparent; - box-shadow: 0 0 0 2px var(--link-color); -} - -*, -*::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 0.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); - -webkit-border-before: 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); - -webkit-margin-before: 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; - -webkit-margin-after: 1rem; - margin-block-end: 1rem; -} - -.section-supporting-text { - font-size: var(--step-1); -} - -code, -pre { - font-family: var(--mono-font); - font-variant-ligatures: none; -} - -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 0.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: 0.25rem 0.5rem; - border: 1px solid var(--divider-color); -} -table th { - background-color: var(--lightest-background-color); - padding: 0.25rem 0.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 0.1s linear; -} -.side-header a { - color: inherit; - text-decoration: none; -} - -svg { - flex: none; - transition: color 0.1s linear; -} - -p { - margin: 0 0 1.5em; -} -:matches(nav, .posts-collection) p { - margin-bottom: 0.75em; - -webkit-margin-after: 0.75em; - margin-block-end: 0.75em; -} - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} - -ul, -ol { - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; -} -ul li, -ol li { - margin: 0 0 0.75em; -} -.person__bio ul, -.person__bio ol { - padding-left: 1.5rem; - -webkit-padding-start: 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; - -webkit-margin-after: 4rem; - margin-block-end: 4rem; -} -figure img { - margin-bottom: 1rem; - -webkit-margin-after: 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 0.15s linear; - outline-offset: 3px; - } -} -/* typography */ -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; - -webkit-margin-after: 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; - -webkit-margin-before: 0; - margin-block-start: 0; -} - -.docs-main h2, .components-main h2, -.docs-main h3, -.components-main h3, -.docs-main h4, -.components-main h4, -.docs-main h5, -.components-main h5, -.docs-main h6, -.components-main h6 { - margin-top: 3rem; - margin-bottom: 1.5rem; - -webkit-margin-before: 3rem; - margin-block-start: 3rem; - -webkit-margin-after: 1.5rem; - margin-block-end: 1.5rem; -} -.docs-main h2:first-child, .components-main h2:first-child, -.docs-main h3:first-child, -.components-main h3:first-child, -.docs-main h4:first-child, -.components-main h4:first-child, -.docs-main h5:first-child, -.components-main h5:first-child, -.docs-main h6:first-child, -.components-main h6:first-child { - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; -} - -small, -caption, -cite, -figcaption { - font-size: var(--step--1); -} - -h6, -.h6 { - font-size: var(--step-0); -} - -h5, -.h5 { - font-size: var(--step-0); -} - -h4, -.h4 { - font-size: var(--step-1); -} - -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; -} - -.h0 { - font-size: var(--step-6); - line-height: 1.2; -} - -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; - font-variant-ligatures: none; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-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; - 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: 0.1em; - border-radius: 0.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: 0.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 { - font-variant-ligatures: none; -} - -code .highlight-line::before { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - 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; - -webkit-margin-end: 1.2em; - margin-inline-end: 1.2em; - -webkit-padding-end: 1.2em; - padding-inline-end: 1.2em; - text-align: right; - width: 2.4em; -} - -.site-header { - padding: 0.75rem 0; - border-top: 4px solid var(--link-color); - border-bottom: 1px solid var(--divider-color); - -webkit-border-before: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} -.site-header .docs-wrapper { - display: grid; - align-items: start; - padding-top: 0; - padding-bottom: 0; - -webkit-padding-before: 0; - padding-block-start: 0; - -webkit-padding-after: 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: 0.5rem 0; -} - -.logo svg { - display: inline-block; - margin-bottom: -4px; - -webkit-margin-after: -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; - font-size: 0.875rem; -} -@media all and (max-width: 800px) { - .docs-footer { - padding: 1.5rem 0 4rem; - align-items: center; - } -} - -.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); - -webkit-border-before: 1px solid var(--divider-color); - border-block-start: 1px solid var(--divider-color); -} - -.footer-cta .logo { - margin-bottom: 2.5rem; - -webkit-margin-after: 2.5rem; - margin-block-end: 2.5rem; -} -.footer-cta .section-supporting-text { - margin-bottom: 2.5rem; - -webkit-margin-after: 2.5rem; - margin-block-end: 2.5rem; -} -.footer-cta .eslint-actions { - justify-content: center; -} - -.footer-legal-links ul li { - display: inline-block; - margin-right: 0.5rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; -} -.footer-legal-links ul li:not(:last-of-type)::after { - content: "|"; - margin-left: 0.5rem; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.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; - -webkit-padding-before: 2rem; - padding-block-start: 2rem; - -webkit-padding-after: 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; - } -} - -.site-header { - padding: 0.75rem 0; - border-top: 4px solid var(--link-color); - -webkit-border-before: 4px solid var(--link-color); - border-block-start: 4px solid var(--link-color); - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} -.site-header .content-container { - display: grid; - align-items: start; - padding-top: 0; - padding-bottom: 0; - -webkit-padding-before: 0; - padding-block-start: 0; - -webkit-padding-after: 0; - padding-block-end: 0; -} -@media all and (min-width: 680px) { - .site-header .content-container { - 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: 0.5rem 0; - z-index: 2; -} - -.logo svg { - display: inline-block; - margin-bottom: -4px; - -webkit-margin-after: -4px; - margin-block-end: -4px; - width: 100%; - max-width: 100px; - height: auto; -} - -.c-custom-select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - box-sizing: border-box; - display: block; - width: 100%; - max-width: 100%; - min-width: 0; - padding: 0.625rem 0.875rem; - padding-right: 2.1875rem; - -webkit-padding-end: 2.1875rem; - padding-inline-end: 2.1875rem; - font: inherit; - color: var(--body-text-color); - 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 0.875rem top 50%, 0 0; - background-size: 1em auto, 100%; -} - -.label__text.label__text { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - font-family: var(--text-font); - color: inherit; - font-weight: 400; - line-height: 1.5; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} - -input { - border: 1px solid var(--border-color); - border-radius: var(--border-radius); - padding: 0.625rem 0.875rem; - font: inherit; - font-size: 1rem; - display: block; - min-width: 0; - line-height: 1.3; - max-width: 100%; - background-color: var(--body-background-color); - color: inherit; -} - -/* docs layout styles */ -html { - scroll-behavior: smooth; -} - -.docs { - max-width: 1700px; - margin: 0 auto; -} - -.docs-aside__content { - flex: 1; -} - -.docs-wrapper { - padding: 0 var(--space-s-l); - flex: 1; - display: flex; - flex-direction: column; -} -@media all and (min-width: 1024px) { - .docs-wrapper { - display: grid; - grid-template-columns: minmax(250px, 1fr) minmax(0, 3.5fr); - align-items: stretch; - } -} - -.docs-nav { - grid-column: 1/2; - grid-row: 1/2; - padding-top: var(--space-l-xl); - -webkit-padding-before: var(--space-l-xl); - padding-block-start: var(--space-l-xl); - font-size: 0.875rem; - display: grid; - grid-auto-rows: max-content; - align-items: start; -} -@media all and (min-width: 1024px) { - .docs-nav { - padding: var(--space-l-xl) 0; - padding-right: var(--space-s-l); - -webkit-padding-end: var(--space-s-l); - padding-inline-end: var(--space-s-l); - border-right: 1px solid var(--divider-color); - -webkit-border-end: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); - } -} - -.docs-content { - grid-column: 2/3; - padding: var(--space-l-xl) 0; - flex: 1; -} -@media all and (min-width: 800px) { - .docs-content { - display: grid; - grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr); - grid-gap: 1rem; - } -} -@media all and (min-width: 1024px) { - .docs-content { - padding: 0; - } -} -@media all and (min-width: 1300px) { - .docs-content { - grid-gap: 2rem; - } -} - -.docs-main { - flex: 1 1 68ch; -} -@media all and (min-width: 800px) { - .docs-main { - padding-right: var(--space-s-l); - -webkit-padding-end: var(--space-s-l); - padding-inline-end: var(--space-s-l); - border-right: 1px solid var(--divider-color); - -webkit-border-end: 1px solid var(--divider-color); - border-inline-end: 1px solid var(--divider-color); - } -} -@media all and (min-width: 1024px) { - .docs-main { - padding: var(--space-l-xl) var(--space-l-2xl); - } -} - -.docs-aside { - grid-column: 2/3; - display: flex; - flex-direction: column; -} -@media all and (min-width: 800px) { - .docs-aside { - padding: var(--space-l-xl) 0; - } -} - -.docs-toc { - flex: 1; - align-self: center; -} - -.docs-edit-link { - border-top: 1px solid var(--divider-color); - padding-top: 1.5rem; - -webkit-padding-before: 1.5rem; - padding-block-start: 1.5rem; - margin: 3rem 0; -} - -div.correct, -div.incorrect { - position: relative; -} -div.correct::after, -div.incorrect::after { - position: absolute; - top: -22px; - right: -22px; - offset-inline-end: -22px; - offset-block-start: -22px; -} - -div.correct::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.incorrect::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: 0.5rem; - right: 0.5rem; - offset-block-end: 0.5rem; - offset-inline-end: 0.5rem; -} -@media all and (max-width: 768px) { - .c-btn.c-btn--playground { - display: none; - } -} - -@media (hover: none) { - .anchorjs-link { - opacity: 1; - } -} -.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; - -webkit-border-after: 0; - border-block-end: 0; -} -.versions-list a { - color: var(--link-color); - width: 100%; - padding: 1rem 0.5rem; - text-decoration: none; - display: block; - display: flex; - align-items: center; - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 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; - -webkit-border-start: 4px solid var(--tab-border-color); - border-inline-start: 4px solid var(--tab-border-color); - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} - -.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; - width: 100%; - padding: 0.75rem 0.1rem; - text-decoration: none; - display: block; - display: flex; - align-items: center; - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 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: 0.5rem; - -webkit-margin-end: 0.5rem; - margin-inline-end: 0.5rem; -} - -.languages-section .languages-list { - font-size: var(--step-1); - border-left: 4px solid var(--tab-border-color); - padding-left: 1rem; - -webkit-border-start: 4px solid var(--tab-border-color); - border-inline-start: 4px solid var(--tab-border-color); - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} - -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: 0.75em 1.125em; - align-items: center; - justify-content: center; - border-radius: var(--border-radius); - transition: background-color 0.2s linear, border-color 0.2s linear; -} -.c-btn svg { - color: inherit; -} - -.c-btn--large { - font-size: 1.125rem; - padding: 0.88em 1.5em; -} - -.c-btn--block { - display: flex; - width: 100%; -} - -a.c-btn { - text-decoration: none; - display: inline-flex; - flex-wrap: wrap; - gap: 0.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; - -webkit-margin-before: 1rem; - margin-block-start: 1rem; - margin-bottom: 2rem; - -webkit-margin-after: 2rem; - margin-block-end: 2rem; -} -@media all and (min-width: 1024px) { - .docs-site-nav ul { - font-size: var(--step-0); - margin-top: 0; - -webkit-margin-before: 0; - margin-block-start: 0; - margin-bottom: 0; - -webkit-margin-after: 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 0.2s linear; - display: block; -} -.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: 1024px) { - .docs-nav-panel { - display: flex; - flex-direction: row; - justify-content: center; - } -} -.docs-nav-panel[data-open=false] { - display: none; -} -@media all and (min-width: 1024px) { - .docs-nav-panel[data-open=true] { - display: flex; - flex-direction: row; - justify-content: center; - } -} - -@media all and (min-width: 1024px) { - .docs-nav-panel .mobile-only { - display: none; - } -} - -.docs-site-nav-toggle { - cursor: pointer; - display: inline-flex; - align-items: center; - margin-left: 0.5rem; - margin-right: -10px; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.5rem; - -webkit-margin-end: -10px; - 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 0.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: 1024px) { - .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; - -webkit-margin-after: 0; - margin-block-end: 0; - } - .docs-site-nav .flexer { - order: 1; - } -} -.docs-toc { - margin: 2rem 0; -} - -.docs-aside .docs-toc { - display: none; -} -@media all and (min-width: 1400px) { - .docs-toc { - display: none; - } -} -@media all and (min-width: 1400px) { - .docs-aside .docs-toc { - display: block; - } -} - -.c-toc ol { - margin: 0; -} -.c-toc ol li { - position: relative; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; - padding-left: 1rem; - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} -.c-toc ol li > ol { - margin-top: 0.25rem; -} -.c-toc ol li::before { - content: "└"; - color: var(--icon-color); - position: absolute; - left: -0.4rem; - offset-inline-start: -0.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: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; -} - -.c-toc__label { - width: -moz-fit-content; - 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; - 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: 2rem; - -webkit-margin-start: 2rem; - margin-inline-start: 2rem; - transition: all 0.1s linear; - color: var(--color-neutral-400); -} -[aria-expanded=true] .toc-trigger-icon { - transform: rotate(180deg); -} - -.c-toc__panel[data-open=false] { - display: none; -} -.c-toc__panel[data-open=true] { - display: block; -} - -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; - appearance: none; -} - -[type=search]::-ms-clear, -[type=search]::-ms-reveal { - display: none; - width: 0; - height: 0; -} - -.search { - margin: 1rem 0; - position: relative; -} - -.search__input-wrapper, -.search__inner-input-wrapper { - position: relative; -} - -.search__clear-btn { - color: var(--body-text-color); - position: absolute; - display: flex; - top: 50%; - offset-block-start: 50%; - transform: translateY(-50%); - right: 1.5rem; - offset-inline-end: 1.5rem; - z-index: 3; - padding: 0; -} -.search__clear-btn svg { - color: inherit; - width: 1rem; - height: 1rem; - border: 1px solid; - border-radius: 50%; -} - -.search__input { - padding-left: 2.5rem; - -webkit-padding-start: 2.5rem; - padding-inline-start: 2.5rem; - outline-offset: 1px; - width: 100%; -} - -.search__icon { - color: var(--body-text-color); - position: absolute; - display: block; - top: 50%; - offset-block-start: 50%; - transform: translateY(-50%); - left: 0.75rem; - offset-inline-start: 0.75rem; - z-index: 3; -} - -/* search results */ -.search .search-results { - font-size: 0.875rem; - background-color: var(--body-background-color); - z-index: 10; - width: 100%; - border-radius: 0 0 var(--border-radius) var(--border-radius); - border: 1px solid var(--divider-color); - position: relative; - top: 0.25rem; - max-height: 400px; - overflow-y: auto; -} -@media all and (min-width: 1024px) { - .search .search-results { - box-shadow: var(--shadow-lg); - position: absolute; - top: calc(100% + 0.25rem); - } -} -.search .search-results[data-results=true] { - padding: 0; -} -.search .search-results[data-results=false] { - padding: 1rem; -} -.search .search-results:empty { - display: none; -} - -.search-results__list { - list-style: none; - margin: 0; - padding: 0; -} - -.search .search-results__item { - margin: 0; - padding: 0.875rem; - border-bottom: 1px solid var(--lightest-background-color); - -webkit-border-after: 1px solid var(--lightest-background-color); - border-block-end: 1px solid var(--lightest-background-color); - position: relative; -} -.search .search-results__item:hover { - background-color: var(--lightest-background-color); -} -.search .search-results__item:focus-within { - background-color: var(--lightest-background-color); -} - -.search .search-results__item__title { - font-size: var(--step-0); - font-size: 0.875rem; - margin-bottom: 0; - font-family: var(--text-font); -} -.search .search-results__item__title a { - display: block; - text-decoration: none; - color: var(--link-color); - font: inherit; - padding: 0.25rem 0.75rem; -} -.search .search-results__item__title a:hover { - background-color: inherit; - color: var(--link-color); -} -.search .search-results__item__title a::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - content: ""; -} - -.search-results__item__context { - margin: 0; - font-size: 0.875rem; - padding-left: 1rem; -} - -.algolia-docsearch-suggestion--highlight { - background-color: var(--color-brand); - color: #fff; - display: inline-block; - padding: 0 2px; - border-radius: 2px; -} -[data-theme=dark] .algolia-docsearch-suggestion--highlight { - background-color: var(--link-color); - color: var(--color-neutral-900); -} - -.alert { - position: relative; - display: grid; - grid-template-columns: auto 1fr; - padding: 1rem; - gap: 0.75rem; - margin-bottom: 1.5rem; - -webkit-margin-after: 1.5rem; - margin-block-end: 1.5rem; - align-items: start; - font-size: 0.875rem; - border: 1px solid currentColor; - border-radius: var(--border-radius); -} -.alert.alert--warning { - background-color: var(--color-rose-25); - color: var(--color-rose-600); -} -[data-theme=dark] .alert.alert--warning { - color: var(--color-rose-300); - background-color: var(--color-rose-900); -} -.alert.alert--important { - background-color: var(--color-warning-25); - color: var(--color-warning-600); -} -[data-theme=dark] .alert.alert--important { - color: var(--color-warning-300); - background-color: var(--color-warning-900); -} -.alert.alert--tip { - background-color: var(--color-success-25); - color: var(--color-success-600); -} -[data-theme=dark] .alert.alert--tip { - color: var(--color-success-300); - background-color: var(--color-success-900); -} - -[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__text > p { - margin: 0; -} - -.alert__type { - display: block; - font-weight: 500; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} -.alert--warning .alert__type { - color: var(--color-rose-700); -} -[data-theme=dark] .alert--warning .alert__type { - color: var(--color-rose-200); -} -.alert--important .alert__type { - color: var(--color-warning-700); -} -[data-theme=dark] .alert--important .alert__type { - color: var(--color-warning-200); -} -.alert--tip .alert__type { - color: var(--color-success-700); -} -[data-theme=dark] .alert--tip .alert__type { - color: var(--color-success-200); -} - -.alert__learn-more { - display: block; - font-weight: 500; - margin-top: 0.75rem; - -webkit-margin-before: 0.75rem; - margin-block-start: 0.75rem; -} -.alert--warning .alert__learn-more { - color: var(--color-rose-700); -} -[data-theme=dark] .alert--warning .alert__learn-more { - color: var(--color-rose-200); -} -.alert--important .alert__learn-more { - color: var(--color-warning-700); -} -[data-theme=dark] .alert--important .alert__learn-more { - color: var(--color-warning-200); -} -.alert--tip .alert__learn-more { - color: var(--color-success-700); -} -[data-theme=dark] .alert--tip .alert__learn-more { - color: var(--color-success-200); -} - -.rule-categories { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0; - margin-bottom: 3rem; - background-color: var(--lightest-background-color); - border: 1px solid var(--divider-color); - border-radius: var(--border-radius); -} -.rule-categories .rule-category { - margin: 0; - padding: 1rem; - background: none; - border: none; -} -@media screen and (min-width: 768px) { - .rule-categories .rule-category:not(:first-child)::after { - content: ""; - display: block; - padding: 1px; - border-left: 1px solid var(--divider-color); - left: 0; - } -} -@media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) { - .rule-categories .rule-category:not(:first-child)::after { - height: 70%; - position: absolute; - } -} -@media screen and (min-width: 1024px) and (max-width: 1439px) { - .rule-categories .rule-category:nth-child(2)::after { - height: 70%; - position: absolute; - } -} -.rule-categories .rule-category__description { - flex: 1 1 45ch; -} - -.rule-category { - font-size: var(--step--1); - display: flex; - position: relative; - 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: 0.5rem 0; - position: relative; -} -.rule p:last-of-type { - margin: 0; -} - -.rule__content { - flex: 1 1 35ch; -} - -.rule__name { - font-weight: 500; - font-size: 0.875rem; - margin-bottom: 0.25rem; - -webkit-margin-after: 0.25rem; - margin-block-end: 0.25rem; -} - -a.rule__name { - text-decoration: none; -} -a.rule__name:hover { - text-decoration: underline; -} -a.rule__name::after { - position: absolute; - content: ""; - width: 100%; - height: 100%; - top: 0; - offset-block-start: 0; - left: 0; - offset-inline-start: 0; -} - -.rule__description { - font-size: var(--step--1); -} - -.rule__categories { - font-size: 0.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: 0.5rem; - -webkit-margin-start: 0.5rem; - margin-inline-start: 0.5rem; - font-size: var(--step--1); - padding: 0 0.5rem; -} -[data-theme=dark] .rule__status { - background: var(--body-background-color); -} - -.rule__categories__type[aria-hidden=true] { - opacity: 0.25; -} - -/* related rules */ -.related-rules__list { - display: flex; - gap: 0.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: 0.625rem; - display: inline-flex; - gap: 0.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); -} - -a.rule-list-item + a.rule-list-item::before { - content: ","; - display: inline-block; - margin-left: 5px; - margin-right: 5px; -} - -.eslint-social-icons { - margin-bottom: -1rem; - -webkit-margin-after: -1rem; - margin-block-end: -1rem; -} -.eslint-social-icons ul { - margin: 0; - padding: 0; - margin-left: -1rem; - -webkit-margin-start: -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 0.75rem; -} - -@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); - -webkit-border-after: 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; - -webkit-margin-after: 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; - -webkit-margin-before: 3rem; - margin-block-start: 3rem; -} - -.theme-switcher { - display: inline-flex; - align-items: center; - gap: 0.5rem; - position: relative; -} - -.theme-switcher-label.theme-switcher-label { - 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: 0.625rem 0.875rem; - display: inline-flex; - align-items: center; - margin: 0; - gap: 0.25rem; - color: inherit; -} -.theme-switcher__button:first-of-type { - border-right: 0.5px solid var(--border-color); - -webkit-border-end: 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); - -webkit-border-start: 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] { - 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: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; -} - -.switcher--language { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 0.25rem 0.5rem; - position: relative; - width: 100%; - padding: 0; - font-size: inherit; -} -@media all and (min-width: 800px) { - .switcher--language { - justify-content: flex-start; - } -} - -.switcher--language .label__text { - flex: 1 0 10ch; -} - -.switcher--language .switcher__select { - flex: 1 0 12rem; -} -@media all and (max-width: 800px) { - .switcher--language .switcher__select { - max-width: 250px; - } -} - -.language-switcher { - display: inline-flex; -} - -.docs-index .docs-index__list a { - border-radius: var(--border-radius); - text-decoration: none; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - margin-left: -0.75rem; - -webkit-margin-start: -0.75rem; - margin-inline-start: -0.75rem; - color: var(--headings-color); -} -.docs-index .docs-index__list a:hover, .docs-index .docs-index__list a[aria-current=true] { - background-color: var(--docs-lightest-background-color); - color: var(--link-color); -} -@media all and (max-width: 1023px) { - .docs-index .docs-index__list a { - padding: 0.5rem 1rem; - margin-left: 0; - -webkit-margin-start: 0; - margin-inline-start: 0; - } -} - -.docs-index__item { - margin: 0; -} -.docs-index__item ul ul { - padding-left: 0.75rem; -} -.docs-index__item[data-has-children] { - margin-bottom: 0.5rem; -} - -.docs-index__list > .docs-index__item { - margin-top: 1.5rem; - -webkit-margin-before: 1.5rem; - margin-block-start: 1.5rem; -} -.docs-index__list > .docs-index__item > a { - color: var(--icon-color); - text-transform: uppercase; - letter-spacing: 1px; - font-size: 0.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 { - transform: rotate(180deg); -} - -.index-js ul[aria-hidden=true] { - display: none; -} - -.index-js ul[aria-hidden=false] { - display: block; -} - -.docs__index__panel[data-open=false] { - display: none; -} -@media all and (min-width: 1024px) { - .docs__index__panel[data-open=false] { - display: block; - } -} -.docs__index__panel[data-open=true] { - display: block; -} -@media all and (min-width: 1024px) { - .docs__index__panel[data-open=true] { - display: block; - } -} - -.docs-index-toggle { - cursor: pointer; - display: flex; - width: 100%; - padding: 0.75rem 1.125rem; - align-items: center; - justify-content: space-between; - gap: 0.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: 1024px) { - .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 0.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); -} - -.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; - } -} - -.index { - margin-bottom: 4rem; - -webkit-margin-after: 4rem; - margin-block-end: 4rem; -} - -.index__item { - margin: 0; -} -.index__item a { - display: block; - color: inherit; - text-decoration: none; - padding: 0.625rem 0.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: 0.75rem 1.125rem; - align-items: center; - justify-content: space-between; - gap: 0.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: 1024px) { - .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 0.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: 1024px) { - .index__list[data-open=false] { - display: block; - } -} -.index__list[data-open=true] { - display: block; -} -@media all and (min-width: 1024px) { - .index__list[data-open=true] { - display: block; - } -} - -.c-tabs pre { - margin-top: 0; - -webkit-margin-before: 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: 0.75rem 1.125rem; - align-items: center; - justify-content: center; - border-radius: var(--border-radius) var(--border-radius) 0 0; - transition: background-color 0.2s linear, border-color 0.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; - -webkit-margin-after: 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; - -webkit-margin-after: 0; - margin-block-end: 0; -} - -.c-tabs__tabpanel__title { - margin-bottom: 1.5rem; - -webkit-margin-after: 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: 0.5rem; - -webkit-margin-after: 0.5rem; - margin-block-end: 0.5rem; - position: relative; - transition: all 0.2s linear; -} -.resource:hover { - background-color: var(--lighter-background-color); -} - -.resource__image { - flex: 1 0 5.5rem; - max-width: 5.5rem; - overflow: hidden; - padding: 0.25rem; -} -.resource__image img { - display: block; - height: 100%; - width: 100%; - -o-object-fit: contain; - object-fit: contain; -} - -.resource__content { - flex: 4; - padding: 0.75rem; - align-self: center; -} - -.resource__title { - text-decoration: none; - color: var(--headings-color); - font-weight: 500; - margin-bottom: 0.125rem; -} -.resource__title::after { - content: ""; - position: absolute; - left: 0; - offset-inline-start: 0; - top: 0; - offset-block-start: 0; - width: 100%; - height: 100%; -} - -.resource__domain, -.resource__domain a { - text-decoration: none; - color: var(--body-text-color); - font-size: 0.875rem; -} - -.resource__icon { - color: var(--headings-color); - margin: 1rem; - align-self: center; -} - -@media all and (max-width: 800px) { - .hero-ad { - display: none; - } -} - -#carbonads * { - margin: initial; - padding: initial; -} - -#carbonads { - display: inline-block; - margin: 2rem 0; - padding: 0.6em; - font-size: 1rem; - overflow: hidden; - background-color: var(--body-background-color); - border: 1px solid var(--border-color); - border-radius: 4px; - border-radius: var(--border-radius); - box-shadow: 0 1px 4px 1px hsla(0deg, 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 hsla(250deg, 20%, 50%, 0.6); - background-color: hsla(0deg, 0%, 70%, 0.15); -} - -#carbonads a { - font-weight: 500; - color: inherit; - text-decoration: none; -} - -#carbonads a:hover { - text-decoration: none; - color: var(--link-color); -} - -.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; - line-height: 1rem; - font-size: 0.7em; - font-weight: 500; - text-align: left; -} - -#carbonads .carbon-poweredby { - display: block; - margin-top: 10px; - font-size: 0.5rem; - font-weight: 500; - line-height: 1; - letter-spacing: 0.1ch; - 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: 1024px) { - .grid { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 2rem; - align-items: start; - } -} - -.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; -} - -[hidden] { - display: none !important; -} - -@media all and (min-width: 1024px) { - .mobile-only { - display: none; - } -} - -@media all and (max-width: 1023px) { - .desktop-only { - display: none; - } -} - -.text.text { - 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); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} - -.fs-step--1 { - font-size: 0.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; -} +@charset "UTF-8";:root{--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;--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){:root{--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}}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}:root{--fluid-max-width:1023}@media screen and (min-width:1024px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}: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,16));--fc-s-max:(var(--f-0-max,16));--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);--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));--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));--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));--space-l-3xl:calc((var(--fc-l-min)/16)*1rem + (var(--fc-3xl-max) - var(--fc-l-min))*var(--fluid-bp));--space-s-l:calc((var(--fc-s-min)/16)*1rem + (var(--fc-l-max) - var(--fc-s-min))*var(--fluid-bp));--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));--mono-font:"Mono Punctuators","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";--shadow-lg:0 12px 16px -4px rgba(16,24,40,.1),0 4px 6px -2px rgba(16,24,40,.05);--shadow-xs:0 1px 2px rgba(16,24,40,.05);--border-radius:.5rem}::-moz-selection{background-color:var(--color-brand);color:#fff}::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){box-shadow:none;outline:1px solid transparent}.js-focus-visible :focus:not(.focus-visible){box-shadow:none;outline:1px solid transparent}input:focus-visible{border-color:var(--border-color);outline:2px solid var(--link-color)}input:focus{box-shadow:0 0 0 2px var(--link-color);outline:2px solid transparent}*,:after,:before{box-sizing:border-box}html{accent-color:var(--link-color);caret-color:var(--link-color);font-family:var(--text-font);height:100%;overflow-x:hidden}body,html{background-color:var(--body-background-color)}body{color:var(--body-text-color);display:flex;flex-direction:column;margin:0 auto;min-height:100%;position:relative}#skip-link{offset-block-start:-30em;offset-inline-start:0;offset-inline-end:auto;left:0;position:fixed;right:auto;top:-30em;transition:top .1s linear;z-index:999}#skip-link:focus{offset-block-start:2px;outline:2px solid transparent;top:2px}#skip-link:focus-visible{offset-block-start:2px;outline:2px solid transparent;top:2px}main{flex:1}main:focus,main:target{outline:none}hr{-webkit-border-before:1px solid var(--divider-color);background:none;border:none;border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);height:0;margin:2rem 0}.content-container{margin:0 auto;padding:var(--space-xl-3xl) calc(1rem + 1vw);width:100%}.section-head .section-supporting-text{margin:0 auto var(--space-l-2xl);max-width:768px;text-align:center}.section-foot{-webkit-margin-before:var(--space-l-2xl);margin-block-start:var(--space-l-2xl);margin-top:var(--space-l-2xl)}.section-foot .section-supporting-text{font-size:var(--step--1);margin:0 auto;max-width:768px;text-align:center}.section-title{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}.section-supporting-text{font-size:var(--step-1)}code,pre{font-family:var(--mono-font);font-variant-ligatures:none}code{color:var(--link-color)}pre code{color:unset}.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{border-collapse:collapse;margin:2.5rem 0;width:100%}table,table td{border:1px solid var(--divider-color)}table td,table th{padding:.25rem .5rem}table th{background-color:var(--lightest-background-color)}.c-btn .c-icon:hover,a,a .c-icon:hover,button .c-icon:hover{color:var(--link-color)}a{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{-webkit-margin-after:.75em;margin-block-end:.75em;margin-bottom:.75em}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}ol,ul{-webkit-margin-before:0;margin-block-start:0;margin-top:0}ol li,ul li{margin:0 0 .75em}.person__bio ol,.person__bio ul{-webkit-padding-start:1.5rem;padding-left:1.5rem;padding-inline-start:1.5rem}.docs-main ol,.docs-main ul,.post-main ol,.post-main ul{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{display:none;margin:0}figure{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}figure img{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}figure figcaption{color:var(--grey)}img{display:block;height:auto;max-width:100%;position:relative}nav ol,nav ul{list-style:none;margin:0;padding:0}.video{margin:2em auto;max-width:1400px;width:90%}.video iframe{aspect-ratio:16/9;height:auto;width:100%}@media (prefers-reduced-motion:no-preference){.focus-visible,:focus-visible{outline-offset:3px;transition:outline-offset .15s linear}}body{font-size:var(--step-0);line-height:1.5}.eyebrow{-webkit-margin-after:1.5rem;color:var(--link-color);display:block;font-size:1rem;font-weight:500;margin-block-end:1.5rem;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{-webkit-margin-before:0;color:var(--headings-color);font-family:var(--display-font);font-weight:500;margin-block-start:0;margin-top:0}.components-main h2,.components-main h3,.components-main h4,.components-main h5,.components-main h6,.docs-main h2,.docs-main h3,.docs-main h4,.docs-main h5,.docs-main h6{-webkit-margin-before:3rem;-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-block-start:3rem;margin-bottom:1.5rem;margin-top:3rem}.components-main h2:first-child,.components-main h3:first-child,.components-main h4:first-child,.components-main h5:first-child,.components-main h6:first-child,.docs-main h2:first-child,.docs-main h3:first-child,.docs-main h4:first-child,.docs-main h5:first-child,.docs-main h6:first-child{-webkit-margin-before:0;margin-block-start:0;margin-top:0}caption,cite,figcaption,small{font-size:var(--step--1)}.h5,.h6,h5,h6{font-size:var(--step-0)}.h4,h4{font-size:var(--step-1)}.h3,h3{font-size:var(--step-2)}.h2,.h3,h2,h3{line-height:1.2}.h2,h2{font-size:var(--step-3)}.h1,h1{font-size:var(--step-4)}.h0,.h1,h1{line-height:1.2}.h0{font-size:var(--step-6)}code[class*=language-],pre[class*=language-]{word-wrap:normal;font-family:var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;font-variant-ligatures:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{background-color:var(--lightest-background-color);border-radius:var(--border-radius);color:var(--color-neutral-900);margin:1.5rem 0;overflow:auto;padding:1.5rem}[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)}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6e7f8e}[data-theme=dark] .token.cdata,[data-theme=dark] .token.comment,[data-theme=dark] .token.doctype,[data-theme=dark] .token.prolog{color:#8e9fae}.token.namespace{opacity:.7}.token.atrule,.token.attr-name,.token.attr-value,.token.builtin,.token.char,.token.inserted,.token.keyword,.token.selector,.token.string{color:var(--link-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre{counter-reset:lineNumber}code .highlight-line{font-variant-ligatures:none}code .highlight-line:before{-webkit-margin-end:1.2em;-webkit-padding-end:1.2em;color:var(--icon-color);content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;margin-inline-end:1.2em;padding-right:1.2em;padding-inline-end:1.2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.4em}.site-header .docs-wrapper{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:1024px){.site-header .docs-wrapper{justify-content:space-between}}.docs-footer{align-items:baseline;display:flex;flex-direction:column;font-size:.875rem;gap:2rem;justify-content:space-between}@media (max-width:800px){.docs-footer{align-items:center;padding:1.5rem 0 4rem}}.copyright p{margin:0}.docs-socials-and-legal{display:flex;flex-direction:column;gap:1rem}@media (max-width:800px){.docs-socials-and-legal{text-align:center}}.docs-switchers{display:flex;flex-wrap:wrap;gap:1.5rem}.docs-switchers .language-switcher,.docs-switchers .theme-switcher{flex:1 1 240px}@media (max-width:800px){.docs-switchers .language-switcher,.docs-switchers .theme-switcher{justify-content:center}}.site-footer{-webkit-border-before:1px solid var(--divider-color);background-color:var(--footer-background-color);border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);text-align:center}.footer-cta .logo,.footer-cta .section-supporting-text{-webkit-margin-after:2.5rem;margin-block-end:2.5rem;margin-bottom:2.5rem}.footer-cta .eslint-actions{justify-content:center}.footer-legal-links ul li{-webkit-margin-end:.5rem;display:inline-block;margin-right:.5rem;margin-inline-end:.5rem}.footer-legal-links ul li:not(:last-of-type):after{-webkit-margin-start:.5rem;content:"|";margin-left:.5rem;margin-inline-start:.5rem}.footer-legal-section{font-size:var(--step--1);padding:2rem 1rem}.copyright{margin:0 auto;max-width:1100px}.footer-middle{-webkit-padding-before:2rem;-webkit-padding-after:2rem;align-items:center;display:flex;flex-direction:column;gap:2rem;padding-block-end:2rem;padding-block-start:2rem;padding-bottom:2rem;padding-top:2rem}@media (min-width:768px){.footer-middle{flex-direction:row;justify-content:space-between}}.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .content-container{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:680px){.site-header .content-container{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center;z-index:2}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%}.c-custom-select{-webkit-padding-end:2.1875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--body-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 7.61 5 5 5-5' stroke='%23667085' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--body-background-color) 0,var(--body-background-color) 100%);background-position:right .875rem top 50%,0 0;background-repeat:no-repeat,repeat;background-size:1em auto,100%;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--body-text-color);display:block;font:inherit;line-height:1.3;max-width:100%;min-width:0;padding:.625rem 2.1875rem .625rem .875rem;padding-inline-end:2.1875rem;width:100%}.label__text.label__text{-webkit-margin-after:.25rem;align-items:center;color:inherit;display:flex;font-family:var(--text-font);font-size:.875rem;font-weight:400;gap:.5rem;line-height:1.5;margin-block-end:.25rem;margin-bottom:.25rem}input{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:inherit;display:block;font:inherit;font-size:1rem;line-height:1.3;max-width:100%;min-width:0;padding:.625rem .875rem}html{scroll-behavior:smooth}.docs{margin:0 auto;max-width:1700px}.docs-aside__content{flex:1}.docs-wrapper{display:flex;flex:1;flex-direction:column;padding:0 var(--space-s-l)}@media (min-width:1024px){.docs-wrapper{align-items:stretch;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,3.5fr)}}.docs-nav{-webkit-padding-before:var(--space-l-xl);align-items:start;display:grid;font-size:.875rem;grid-auto-rows:max-content;grid-column:1/2;grid-row:1/2;padding-top:var(--space-l-xl);padding-block-start:var(--space-l-xl)}@media (min-width:1024px){.docs-nav{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding:var(--space-l-xl) 0;padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}.docs-content{flex:1;grid-column:2/3;padding:var(--space-l-xl) 0}@media (min-width:800px){.docs-content{grid-gap:1rem;display:grid;grid-template-columns:minmax(0,4fr) minmax(160px,1fr)}}@media (min-width:1024px){.docs-content{padding:0}}@media (min-width:1300px){.docs-content{grid-gap:2rem}}.docs-main{flex:1 1 68ch}@media (min-width:800px){.docs-main{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}@media (min-width:1024px){.docs-main{padding:var(--space-l-xl) var(--space-l-2xl)}}.docs-aside{display:flex;flex-direction:column;grid-column:2/3}@media (min-width:800px){.docs-aside{padding:var(--space-l-xl) 0}}.docs-toc{align-self:center;flex:1}.docs-edit-link{-webkit-padding-before:1.5rem;border-top:1px solid var(--divider-color);margin:3rem 0;padding-top:1.5rem;padding-block-start:1.5rem}div.correct,div.incorrect{position:relative}div.correct:after,div.incorrect:after{offset-inline-end:-22px;offset-block-start:-22px;position:absolute;right:-22px;top:-22px}div.correct:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-11 11-5-5' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}div.incorrect:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-12 12m0-12 12 12' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}pre[class*=language-]{position:relative}.c-btn.c-btn--playground{offset-block-end:.5rem;offset-inline-end:.5rem;bottom:.5rem;font-size:var(--step--1);position:absolute;right:.5rem}@media (max-width:768px){.c-btn.c-btn--playground{display:none}}@media (hover:none){.anchorjs-link{opacity:1}}.versions-list{font-size:var(--step-1);margin:0;padding:0}.versions-list li{margin:0}.versions-list li:last-of-type a{-webkit-border-after:0;border-block-end:0;border-bottom:0}.versions-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:var(--link-color);display:block;display:flex;padding:1rem .5rem;text-decoration:none;width:100%}.versions-list a[data-current=true]{color:var(--link-color);font-weight:500}.versions-list a[data-current=true]:after{content:"✔️"}.versions-list a:hover{background-color:var(--lightest-background-color)}.versions-section .versions-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem}.languages-list{font-size:var(--step-0);margin:0;padding:0}.languages-list li{margin:0}.languages-list li:last-of-type a{border-bottom:0}.languages-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:inherit;display:block;display:flex;padding:.75rem .1rem;text-decoration:none;width:100%}.languages-list a[aria-current=true]{color:var(--link-color);font-weight:500}.languages-list a[aria-current=true]:after{content:"✔️"}.languages-list a:hover{color:var(--link-color)}.languages-section .flag{-webkit-margin-end:.5rem;font-size:2em;margin-right:.5rem;margin-inline-end:.5rem}.languages-section .languages-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem}.c-btn,button{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;font:inherit;justify-content:center;line-height:inherit}.c-btn{border-radius:var(--border-radius);font-family:var(--text-font);font-size:var(--step-0);font-weight:500;padding:.75em 1.125em;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{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}.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);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color)}.c-btn--secondary:hover{background-color:var(--secondary-button-hover-color)}.c-btn--ghost{border:1px solid var(--border-color);color:var(--body-text-color)}.c-btn--ghost:hover{border-color:var(--link-color)}.docs-site-nav{display:flex;flex:1;flex-direction:column;grid-column:1/-1;grid-row:1}.docs-site-nav ul{-webkit-margin-before:1rem;-webkit-margin-after:2rem;font-size:var(--step-1);list-style:none;margin-block-end:2rem;margin-block-start:1rem;margin-bottom:2rem;margin-top:1rem}@media (min-width:1024px){.docs-site-nav ul{-webkit-margin-before:0;-webkit-margin-after:0;align-items:center;display:flex;font-size:var(--step-0);margin-block-end:0;margin-block-start:0;margin-bottom:0;margin-top:0}}.docs-site-nav .flexer{align-self:flex-end;display:flex;justify-self:flex-end}.docs-site-nav a:not(.c-btn){color:inherit;display:block;text-decoration:none;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);font-weight:500;text-decoration:none}@media (min-width:1024px){.docs-nav-panel{display:flex;flex-direction:row;justify-content:center}}.docs-nav-panel[data-open=false]{display:none}@media (min-width:1024px){.docs-nav-panel[data-open=true]{display:flex;flex-direction:row;justify-content:center}.docs-nav-panel .mobile-only{display:none}}.docs-site-nav-toggle{-webkit-margin-start:.5rem;-webkit-margin-end:-10px;align-items:center;cursor:pointer;display:inline-flex;margin-left:.5rem;margin-right:-10px;margin-inline-end:-10px;margin-inline-start:.5rem}.docs-site-nav-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:var(--headings-color);height:40px;width:40px}.docs-site-nav-toggle #ham-bottom,.docs-site-nav-toggle #ham-middle,.docs-site-nav-toggle #ham-top{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 (min-width:1024px){.docs-site-nav{flex-direction:row;gap:2rem;grid-column:auto}.docs-site-nav ul{display:flex;font-size:var(--step-0);gap:2rem}.docs-site-nav ul li{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.docs-site-nav .flexer{order:1}}.docs-toc{margin:2rem 0}.docs-aside .docs-toc{display:none}@media (min-width:1400px){.docs-toc{display:none}.docs-aside .docs-toc{display:block}}.c-toc ol{margin:0}.c-toc ol li{-webkit-margin-after:.25rem;-webkit-padding-start:1rem;margin-block-end:.25rem;margin-bottom:.25rem;padding-left:1rem;padding-inline-start:1rem;position:relative}.c-toc ol li>ol{margin-top:.25rem}.c-toc ol li:before{offset-inline-start:-.4rem;color:var(--icon-color);content:"└";left:-.4rem;position:absolute}.c-toc a{color:var(--headings-color);text-decoration:none}.c-toc a:hover{color:var(--link-color)}.c-toc__label.c-toc__label{-webkit-margin-after:.5rem;color:var(--body-text-color);font-family:var(--text-font);font-size:var(--step-0);margin-block-end:.5rem;margin-bottom:.5rem}.c-toc__label{width:-moz-fit-content;width:fit-content}.c-toc__label button{align-items:center;border-radius:0;color:var(--link-color);cursor:pointer;display:flex;font:inherit;font-size:inherit;font-weight:500;height:100%;justify-content:space-between;line-height:1.5;padding:0;position:relative;text-align:left;transition:outline .1s linear;width:100%}.c-toc__label button svg{flex:none}.toc-trigger-icon{-webkit-margin-start:2rem;color:var(--color-neutral-400);display:block!important;height:.5rem;margin-left:2rem;margin-inline-start:2rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}[aria-expanded=true] .toc-trigger-icon{transform:rotate(180deg)}.c-toc__panel[data-open=false]{display:none}.c-toc__panel[data-open=true]{display:block}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[type=search]::-ms-clear,[type=search]::-ms-reveal{display:none;height:0;width:0}.search{margin:1rem 0}.search,.search__inner-input-wrapper,.search__input-wrapper{position:relative}.search__clear-btn{offset-block-start:50%;offset-inline-end:1.5rem;color:var(--body-text-color);display:flex;padding:0;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);z-index:3}.search__clear-btn svg{border:1px solid;border-radius:50%;color:inherit;height:1rem;width:1rem}.search__input{-webkit-padding-start:2.5rem;outline-offset:1px;padding-left:2.5rem;padding-inline-start:2.5rem;width:100%}.search__icon{offset-block-start:50%;offset-inline-start:.75rem;color:var(--body-text-color);display:block;left:.75rem;position:absolute;top:50%;transform:translateY(-50%);z-index:3}.search .search-results{background-color:var(--body-background-color);border:1px solid var(--divider-color);border-radius:0 0 var(--border-radius) var(--border-radius);font-size:.875rem;max-height:400px;overflow-y:auto;position:relative;top:.25rem;width:100%;z-index:10}@media (min-width:1024px){.search .search-results{box-shadow:var(--shadow-lg);position:absolute;top:calc(100% + .25rem)}}.search .search-results[data-results=true]{padding:0}.search .search-results[data-results=false]{padding:1rem}.search .search-results:empty{display:none}.search-results__list{list-style:none;margin:0;padding:0}.search .search-results__item{-webkit-border-after:1px solid var(--lightest-background-color);border-block-end:1px solid var(--lightest-background-color);border-bottom:1px solid var(--lightest-background-color);margin:0;padding:.875rem;position:relative}.search .search-results__item:hover{background-color:var(--lightest-background-color)}.search .search-results__item:focus-within{background-color:var(--lightest-background-color)}.search .search-results__item__title{font-family:var(--text-font);font-size:var(--step-0);font-size:.875rem;margin-bottom:0}.search .search-results__item__title a{color:var(--link-color);display:block;font:inherit;padding:.25rem .75rem;text-decoration:none}.search .search-results__item__title a:hover{background-color:inherit;color:var(--link-color)}.search .search-results__item__title a:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.search-results__item__context{font-size:.875rem;margin:0;padding-left:1rem}.algolia-docsearch-suggestion--highlight{background-color:var(--color-brand);border-radius:2px;color:#fff;display:inline-block;padding:0 2px}[data-theme=dark] .algolia-docsearch-suggestion--highlight{background-color:var(--link-color);color:var(--color-neutral-900)}.alert{-webkit-margin-after:1.5rem;align-items:start;border:1px solid;border-radius:var(--border-radius);display:grid;font-size:.875rem;gap:.75rem;grid-template-columns:auto 1fr;margin-block-end:1.5rem;margin-bottom:1.5rem;padding:1rem;position:relative}.alert.alert--warning{background-color:var(--color-rose-25);color:var(--color-rose-600)}[data-theme=dark] .alert.alert--warning{background-color:var(--color-rose-900);color:var(--color-rose-300)}.alert.alert--important{background-color:var(--color-warning-25);color:var(--color-warning-600)}[data-theme=dark] .alert.alert--important{background-color:var(--color-warning-900);color:var(--color-warning-300)}.alert.alert--tip{background-color:var(--color-success-25);color:var(--color-success-600)}[data-theme=dark] .alert.alert--tip{background-color:var(--color-success-900);color: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{offset-block-start:2px;color:inherit;position:relative;top:2px}.alert__text>p{margin:0}.alert__type{-webkit-margin-after:.25rem;display:block;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}.alert--warning .alert__type{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__type{color:var(--color-rose-200)}.alert--important .alert__type{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__type{color:var(--color-warning-200)}.alert--tip .alert__type{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__type{color:var(--color-success-200)}.alert__learn-more{-webkit-margin-before:.75rem;display:block;font-weight:500;margin-block-start:.75rem;margin-top:.75rem}.alert--warning .alert__learn-more{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__learn-more{color:var(--color-rose-200)}.alert--important .alert__learn-more{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__learn-more{color:var(--color-warning-200)}.alert--tip .alert__learn-more{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__learn-more{color:var(--color-success-200)}.rule-categories{background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:3rem}.rule-categories .rule-category{background:none;border:none;margin:0;padding:1rem}@media screen and (min-width:768px){.rule-categories .rule-category:not(:first-child):after{border-left:1px solid var(--divider-color);content:"";display:block;left:0;padding:1px}}@media screen and (min-width:1440px),screen and (min-width:768px) and (max-width:1023px){.rule-categories .rule-category:not(:first-child):after{height:70%;position:absolute}}@media screen and (min-width:1024px) and (max-width:1439px){.rule-categories .rule-category:nth-child(2):after{height:70%;position:absolute}}.rule-categories .rule-category__description{flex:1 1 45ch}.rule-category{align-items:flex-start;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--step--1);gap:1rem;margin:1.5rem 0;padding:1rem;position:relative}.rule-category p{margin:0}.rule-category .rule-category__description{flex:1 1 30ch}.rule{align-items:center;background-color:var(--lightest-background-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 0;padding:1rem;position:relative}.rule p:last-of-type{margin:0}.rule__content{flex:1 1 35ch}.rule__name{-webkit-margin-after:.25rem;font-size:.875rem;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}a.rule__name{text-decoration:none}a.rule__name:hover{text-decoration:underline}a.rule__name:after{offset-block-start:0;offset-inline-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.rule__description{font-size:var(--step--1)}.rule__categories{align-items:center;border-radius:var(--border-radius);display:flex;font-size:.875rem;gap:1rem;padding:2px 4px}.rule__categories p{align-items:center;display:inline-flex;margin:0}[data-theme=dark] .rule__categories{background:var(--body-background-color)}.rule__status{-webkit-margin-start:.5rem;background:var(--color-rose-50);border-radius:var(--border-radius);color:var(--color-rose-500);display:inline-block;font-size:var(--step--1);font-weight:400;margin-left:.5rem;margin-inline-start:.5rem;padding:0 .5rem}[data-theme=dark] .rule__status{background:var(--body-background-color)}.rule__categories__type[aria-hidden=true]{opacity:.25}.related-rules__list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:start}.related-rules__list__item svg{color:inherit}.related-rules__list__item a{align-items:center;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);color:var(--headings-color);display:inline-flex;gap:.5rem;padding:.625rem;text-decoration:none}.related-rules__list__item a:hover{background-color:var(--lighter-background-color);color:var(--link-color)}a.rule-list-item+a.rule-list-item:before{content:",";display:inline-block;margin-left:5px;margin-right:5px}.eslint-social-icons{-webkit-margin-after:-1rem;margin-block-end:-1rem;margin-bottom:-1rem}.eslint-social-icons ul{-webkit-margin-start:-1rem;display:inline-flex;margin:0 0 0 -1rem;margin-inline-start:-1rem;padding:0}.eslint-social-icons ul li{align-items:center;display:inline-flex;margin:0}.eslint-social-icons ul li a{display:flex;padding:1rem .75rem}@media (min-width:800px){.hero .grid{grid-gap:2rem;align-items:center;display:grid;grid-template-columns:2fr 1fr}}.hero .grid .span-1-7{grid-column:1/2}.hero .grid .span-10-12{grid-column:2/3;justify-self:end}.hero{-webkit-border-after:1px solid var(--divider-color);background-color:var(--hero-background-color);border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}@media (min-width:800px){.hero{min-height:calc(285px + var(--space-xl-4xl))}}.hero .content-container{margin:0;padding:var(--space-xl-4xl) 0}.hero>.content-container{align-items:center;margin:0 auto;padding:0 calc(1rem + 1vw)}.hero--homepage .section-title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.hero--homepage .section-supporting-text{font-size:var(--step-1);margin:0;text-align:left}.hero--homepage .eslint-actions{-webkit-margin-before:3rem;font-size:var(--step-1);margin-block-start:3rem;margin-top:3rem}.theme-switcher{align-items:center;display:inline-flex;gap:.5rem;position:relative}.theme-switcher-label.theme-switcher-label{color:inherit;font:inherit;font-family:var(--text-font);margin:0}.theme-switcher__buttons{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex}.theme-switcher__button{align-items:center;box-shadow:var(--shadow-xs);color:inherit;display:inline-flex;flex:0;gap:.25rem;margin:0;padding:.625rem .875rem}.theme-switcher__button:first-of-type{-webkit-border-end:.5px solid var(--border-color);border-inline-end:.5px solid var(--border-color);border-right:.5px solid var(--border-color)}.theme-switcher__button:last-of-type{-webkit-border-start:.5px solid var(--border-color);border-inline-start:.5px solid var(--border-color);border-left:.5px solid var(--border-color)}.theme-switcher__button .theme-switcher__icon{color:var(--icon-color)}.theme-switcher__button[aria-pressed=true],.theme-switcher__button[aria-pressed=true] .theme-switcher__icon,.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:hover .theme-switcher__icon,.theme-switcher__button[aria-pressed=false]:hover .theme-switcher__icon{color:var(--link-color)}.version-switcher{-webkit-margin-after:.5rem;margin-block-end:.5rem;margin-bottom:.5rem}.switcher--language{align-items:center;display:flex;flex-wrap:wrap;font-size:inherit;gap:.25rem .5rem;justify-content:center;padding:0;position:relative;width:100%}@media (min-width:800px){.switcher--language{justify-content:flex-start}}.switcher--language .label__text{flex:1 0 10ch}.switcher--language .switcher__select{flex:1 0 12rem}@media (max-width:800px){.switcher--language .switcher__select{max-width:250px}}.language-switcher{display:inline-flex}.docs-index .docs-index__list a{-webkit-margin-start:-.75rem;align-items:center;border-radius:var(--border-radius);color:var(--headings-color);display:flex;justify-content:space-between;margin-left:-.75rem;margin-inline-start:-.75rem;padding:.5rem .75rem;text-decoration:none}.docs-index .docs-index__list a:hover,.docs-index .docs-index__list a[aria-current=true]{background-color:var(--docs-lightest-background-color);color:var(--link-color)}@media (max-width:1023px){.docs-index .docs-index__list a{-webkit-margin-start:0;margin-left:0;margin-inline-start:0;padding:.5rem 1rem}}.docs-index__item{margin:0}.docs-index__item ul ul{padding-left:.75rem}.docs-index__item[data-has-children]{margin-bottom:.5rem}.docs-index__list>.docs-index__item{-webkit-margin-before:1.5rem;margin-block-start:1.5rem;margin-top:1.5rem}.docs-index__list>.docs-index__item>a{color:var(--icon-color);font-size:.875rem;font-weight:500;letter-spacing:1px;text-transform:uppercase}.index-js .index-icon{color:inherit;display:block!important;height:.5rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}.index-js [aria-expanded=true] .index-icon{transform:rotate(180deg)}.index-js ul[aria-hidden=true]{display:none}.index-js ul[aria-hidden=false]{display:block}.docs__index__panel[data-open=false]{display:none}@media (min-width:1024px){.docs__index__panel[data-open=false]{display:block}}.docs__index__panel[data-open=true]{display:block}@media (min-width:1024px){.docs__index__panel[data-open=true]{display:block}}.docs-index-toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.docs-index-toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.docs-index-toggle{display:none}}.docs-index-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.docs-index-toggle #ham-bottom,.docs-index-toggle #ham-middle,.docs-index-toggle #ham-top{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)}.eslint-actions{display:inline-flex;flex-direction:column;flex-wrap:wrap;gap:1rem;width:100%}@media (min-width:640px){.eslint-actions{flex-direction:row}}.index{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}.index__item{margin:0}.index__item a{border-radius:var(--border-radius);color:inherit;display:block;font-size:var(--step-0);padding:.625rem .875rem;text-decoration:none}.index__item a:hover{color:var(--link-color)}.index__item a[aria-current=page]{background-color:var(--lightest-background-color);color:var(--link-color);font-weight:500}.index__toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.index__toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.index__toggle{display:none}}.index__toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.index__toggle #ham-bottom,.index__toggle #ham-middle,.index__toggle #ham-top{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 (min-width:1024px){.index__list[data-open=false]{display:block}}.index__list[data-open=true]{display:block}@media (min-width:1024px){.index__list[data-open=true]{display:block}}.c-tabs pre{-webkit-margin-before:0;margin-block-start:0;margin-top:0}.js-tabs .c-tabs__tablist{display:flex;justify-content:start}.c-tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius) var(--border-radius) 0 0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-size:var(--step-0);font-weight:500;justify-content:center;line-height:inherit;margin:0;padding:.75rem 1.125rem;transition:background-color .2s linear,border-color .2s linear}.c-tabs__tab:hover{color:var(--link-color)}.c-tabs__tab[aria-selected=true]{background-color:var(--lightest-background-color);color:var(--link-color)}.c-tabs__tabpanel{-webkit-margin-after:2rem;background-color:var(--lightest-background-color);border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);margin-block-end:2rem;margin-bottom:2rem}.js-tabs .c-tabs__tabpanel{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.c-tabs__tabpanel__title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.js-tabs .c-tabs__tabpanel__title{display:none}.resource{-webkit-margin-after:.5rem;align-items:stretch;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;margin-block-end:.5rem;margin-bottom:.5rem;overflow:hidden;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%;-o-object-fit:contain;object-fit:contain;width:100%}.resource__content{align-self:center;flex:4;padding:.75rem}.resource__title{color:var(--headings-color);font-weight:500;margin-bottom:.125rem;text-decoration:none}.resource__title:after{offset-inline-start:0;offset-block-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.resource__domain,.resource__domain a{color:var(--body-text-color);font-size:.875rem;text-decoration:none}.resource__icon{align-self:center;color:var(--headings-color);margin:1rem}@media (max-width:800px){.hero-ad{display:none}}#carbonads *{margin:initial;padding:initial}#carbonads{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:4px;border-radius:var(--border-radius);box-shadow:0 1px 4px 1px rgba(0,0,0,.1);display:inline-block;font-size:1rem;margin:2rem 0;overflow:hidden;padding:.6em}.docs-main #carbonads{margin:0 0 2rem}@media (max-width:800px){#carbonads{display:none!important}}.jumbotron #carbonads{background-color:hsla(0,0%,70%,.15);border:1px solid rgba(110,102,153,.6)}#carbonads a{color:inherit;font-weight:500;text-decoration:none}#carbonads a:hover{color:var(--link-color);text-decoration:none}.jumbotron #carbonads a{color:#eee}.jumbotron #carbonads a:hover{color:#ccc}#carbonads span{display:block;overflow:hidden;position:relative}#carbonads .carbon-wrap{display:flex;flex-direction:column;max-width:130px}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:.7em;font-weight:500;line-height:1rem;margin-top:10px;text-align:left}#carbonads .carbon-poweredby{display:block;font-size:.5rem;font-weight:500;letter-spacing:.1ch;line-height:1;margin-top:10px;text-transform:uppercase}@media only screen and (min-width:320px) and (max-width:759px){#carbonads{font-size:12px;margin-top:0}#carbonads .carbon-wrap{display:flex;flex-direction:row;max-width:330px}#carbonads .carbon-text{font-size:14px;margin:0 0 14px 10px;text-align:left}#carbonads .carbon-poweredby{bottom:0;font-size:8px;left:142px;position:absolute}}@media (min-width:1024px){.grid{grid-gap:2rem;align-items:start;display:grid;grid-template-columns:repeat(12,1fr)}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}[hidden]{display:none!important}@media (min-width:1024px){.mobile-only{display:none}}@media (max-width:1023px){.desktop-only{display:none}}.text.text{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{grid-column:1/-1;text-align:center}.text-dark{color:var(--headings-color)}.divider{-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-bottom: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} \ No newline at end of file diff --git a/docs/_site/assets/css/syntax-highlighter.css b/docs/_site/assets/css/syntax-highlighter.css index eed1f194be6..ed187ada142 100644 --- a/docs/_site/assets/css/syntax-highlighter.css +++ b/docs/_site/assets/css/syntax-highlighter.css @@ -1,122 +1 @@ -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; - font-variant-ligatures: none; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-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; - 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: 0.1em; - border-radius: 0.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: 0.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 { - font-variant-ligatures: none; -} - -code .highlight-line::before { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - 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; - -webkit-margin-end: 1.2em; - margin-inline-end: 1.2em; - -webkit-padding-end: 1.2em; - padding-inline-end: 1.2em; - text-align: right; - width: 2.4em; -} +code[class*=language-],pre[class*=language-]{word-wrap:normal;font-family:var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;font-variant-ligatures:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{background-color:var(--lightest-background-color);border-radius:var(--border-radius);color:var(--color-neutral-900);margin:1.5rem 0;overflow:auto;padding:1.5rem}[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)}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6e7f8e}[data-theme=dark] .token.cdata,[data-theme=dark] .token.comment,[data-theme=dark] .token.doctype,[data-theme=dark] .token.prolog{color:#8e9fae}.token.namespace{opacity:.7}.token.atrule,.token.attr-name,.token.attr-value,.token.builtin,.token.char,.token.inserted,.token.keyword,.token.selector,.token.string{color:var(--link-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre{counter-reset:lineNumber}code .highlight-line{font-variant-ligatures:none}code .highlight-line:before{-webkit-margin-end:1.2em;-webkit-padding-end:1.2em;color:var(--icon-color);content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;margin-inline-end:1.2em;padding-right:1.2em;padding-inline-end:1.2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.4em} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/spacing.css b/docs/_site/assets/css/tokens/spacing.css index 79127b56cbc..f39eea33a0b 100644 --- a/docs/_site/assets/css/tokens/spacing.css +++ b/docs/_site/assets/css/tokens/spacing.css @@ -1,62 +1 @@ -/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,1023,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|l-3xl|s-l */ -:root { - --fluid-min-width: 320; - --fluid-max-width: 1023; - --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: 1024px) { - :root { - --fluid-screen: calc(var(--fluid-max-width) * 1px); - } -} -: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, 16)); - --fc-s-max: (var(--f-0-max, 16)); - --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)); - --space-l-3xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-l-min)) * var(--fluid-bp)); - --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp)); -} +:root{--fluid-min-width:320;--fluid-max-width:1023;--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:1024px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}: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,16));--fc-s-max:(var(--f-0-max,16));--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);--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));--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));--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));--space-l-3xl:calc((var(--fc-l-min)/16)*1rem + (var(--fc-3xl-max) - var(--fc-l-min))*var(--fluid-bp));--space-s-l:calc((var(--fc-s-min)/16)*1rem + (var(--fc-l-max) - var(--fc-s-min))*var(--fluid-bp))} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/themes.css b/docs/_site/assets/css/tokens/themes.css index 4b74f944080..0614ad9b496 100644 --- a/docs/_site/assets/css/tokens/themes.css +++ b/docs/_site/assets/css/tokens/themes.css @@ -1,134 +1 @@ -: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) { - :root { - --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; - } -} -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; -} +:root{--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;--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){:root{--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}}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} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/typography.css b/docs/_site/assets/css/tokens/typography.css index 0226328aa91..b24a2e3fac4 100644 --- a/docs/_site/assets/css/tokens/typography.css +++ b/docs/_site/assets/css/tokens/typography.css @@ -1,70 +1 @@ -/* @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: "Mono Punctuators", "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{--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));--mono-font:"Mono Punctuators","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"} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/ui.css b/docs/_site/assets/css/tokens/ui.css index 12600058819..0a9ebda3a1d 100644 --- a/docs/_site/assets/css/tokens/ui.css +++ b/docs/_site/assets/css/tokens/ui.css @@ -1,7 +1 @@ -:root { - --shadow-lg: - 0 12px 16px -4px rgba(16, 24, 40, 0.1), - 0 4px 6px -2px rgba(16, 24, 40, 0.05); - --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); - --border-radius: .5rem; -} +:root{--shadow-lg:0 12px 16px -4px rgba(16,24,40,.1),0 4px 6px -2px rgba(16,24,40,.05);--shadow-xs:0 1px 2px rgba(16,24,40,.05);--border-radius:.5rem} \ No newline at end of file diff --git a/docs/_site/assets/css/utilities.css b/docs/_site/assets/css/utilities.css index 18bd3e9d594..f8c3d4aa310 100644 --- a/docs/_site/assets/css/utilities.css +++ b/docs/_site/assets/css/utilities.css @@ -1,173 +1 @@ -@media all and (min-width: 1024px) { - .grid { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 2rem; - align-items: start; - } -} - -.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; -} - -[hidden] { - display: none !important; -} - -@media all and (min-width: 1024px) { - .mobile-only { - display: none; - } -} - -@media all and (max-width: 1023px) { - .desktop-only { - display: none; - } -} - -.text.text { - 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); - -webkit-border-after: 1px solid var(--divider-color); - border-block-end: 1px solid var(--divider-color); -} - -.fs-step--1 { - font-size: 0.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; -} +@media (min-width:1024px){.grid{grid-gap:2rem;align-items:start;display:grid;grid-template-columns:repeat(12,1fr)}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}[hidden]{display:none!important}@media (min-width:1024px){.mobile-only{display:none}}@media (max-width:1023px){.desktop-only{display:none}}.text.text{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{grid-column:1/-1;text-align:center}.text-dark{color:var(--headings-color)}.divider{-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-bottom: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} \ No newline at end of file diff --git a/docs/_site/assets/css/versions.css b/docs/_site/assets/css/versions.css index 7d1a45c9758..f45b8d52b86 100644 --- a/docs/_site/assets/css/versions.css +++ b/docs/_site/assets/css/versions.css @@ -1,46 +1 @@ -@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; - -webkit-border-after: 0; - border-block-end: 0; -} -.versions-list a { - color: var(--link-color); - width: 100%; - padding: 1rem 0.5rem; - text-decoration: none; - display: block; - display: flex; - align-items: center; - border-bottom: 1px solid var(--divider-color); - -webkit-border-after: 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; - -webkit-border-start: 4px solid var(--tab-border-color); - border-inline-start: 4px solid var(--tab-border-color); - -webkit-padding-start: 1rem; - padding-inline-start: 1rem; -} +@charset "UTF-8";.versions-list{font-size:var(--step-1);margin:0;padding:0}.versions-list li{margin:0}.versions-list li:last-of-type a{-webkit-border-after:0;border-block-end:0;border-bottom:0}.versions-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:var(--link-color);display:block;display:flex;padding:1rem .5rem;text-decoration:none;width:100%}.versions-list a[data-current=true]{color:var(--link-color);font-weight:500}.versions-list a[data-current=true]:after{content:"✔️"}.versions-list a:hover{background-color:var(--lightest-background-color)}.versions-section .versions-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem} \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index 2a552332696..81cd0aafc7a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -29,6 +29,7 @@ "@types/markdown-it": "^12.2.3", "algoliasearch": "^4.12.1", "autoprefixer": "^10.4.13", + "cssnano": "^5.1.14", "dom-parser": "^0.1.6", "eleventy-plugin-nesting-toc": "^1.3.0", "eleventy-plugin-page-assets": "^0.3.0", diff --git a/docs/postcss.config.js b/docs/postcss.config.js index 8871784fc92..319fa67a5bc 100644 --- a/docs/postcss.config.js +++ b/docs/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { plugins: [ - require('autoprefixer') + require('autoprefixer'), + require('cssnano') ], map: false } From a4aeb3b3909e3d191e077febd66eacaaef8585b9 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:51:37 -0400 Subject: [PATCH 5/9] chore: remove verbose PostCSS --- docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index 81cd0aafc7a..60b3294520b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", "watch:sass": "sass --watch --poll src/assets/scss:_site/assets/css", "watch:eleventy": "eleventy --serve --port=2023", - "build:postcss": "postcss _site/assets/css --replace --verbose", + "build:postcss": "postcss _site/assets/css --replace", "build:sass": "sass src/assets/scss:_site/assets/css --no-source-map", "build:eleventy": "npx @11ty/eleventy", "start": "npm-run-all build:sass --parallel watch:*", From fab6baec12098740f28574a3950eef36f3884dc4 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 5 Nov 2022 21:52:22 -0400 Subject: [PATCH 6/9] chore: untrack complied CSS --- docs/_site/assets/css/carbon-ads.css | 1 - docs/_site/assets/css/components/alert.css | 1 - docs/_site/assets/css/components/buttons.css | 1 - docs/_site/assets/css/components/docs-index.css | 1 - docs/_site/assets/css/components/docs-navigation.css | 1 - docs/_site/assets/css/components/hero.css | 1 - docs/_site/assets/css/components/index.css | 1 - docs/_site/assets/css/components/language-switcher.css | 1 - docs/_site/assets/css/components/resources.css | 1 - docs/_site/assets/css/components/rules.css | 1 - docs/_site/assets/css/components/search.css | 1 - docs/_site/assets/css/components/social-icons.css | 1 - docs/_site/assets/css/components/tabs.css | 1 - docs/_site/assets/css/components/theme-switcher.css | 1 - docs/_site/assets/css/components/toc.css | 1 - docs/_site/assets/css/components/version-switcher.css | 1 - docs/_site/assets/css/docs-footer.css | 1 - docs/_site/assets/css/docs-header.css | 1 - docs/_site/assets/css/docs.css | 1 - docs/_site/assets/css/eslint-site-footer.css | 1 - docs/_site/assets/css/eslint-site-header.css | 1 - docs/_site/assets/css/forms.css | 1 - docs/_site/assets/css/foundations.css | 1 - docs/_site/assets/css/languages.css | 1 - docs/_site/assets/css/print.css | 1 - docs/_site/assets/css/styles.css | 1 - docs/_site/assets/css/syntax-highlighter.css | 1 - docs/_site/assets/css/tokens/spacing.css | 1 - docs/_site/assets/css/tokens/themes.css | 1 - docs/_site/assets/css/tokens/typography.css | 1 - docs/_site/assets/css/tokens/ui.css | 1 - docs/_site/assets/css/utilities.css | 1 - docs/_site/assets/css/versions.css | 1 - 33 files changed, 33 deletions(-) delete mode 100644 docs/_site/assets/css/carbon-ads.css delete mode 100644 docs/_site/assets/css/components/alert.css delete mode 100644 docs/_site/assets/css/components/buttons.css delete mode 100644 docs/_site/assets/css/components/docs-index.css delete mode 100644 docs/_site/assets/css/components/docs-navigation.css delete mode 100644 docs/_site/assets/css/components/hero.css delete mode 100644 docs/_site/assets/css/components/index.css delete mode 100644 docs/_site/assets/css/components/language-switcher.css delete mode 100644 docs/_site/assets/css/components/resources.css delete mode 100644 docs/_site/assets/css/components/rules.css delete mode 100644 docs/_site/assets/css/components/search.css delete mode 100644 docs/_site/assets/css/components/social-icons.css delete mode 100644 docs/_site/assets/css/components/tabs.css delete mode 100644 docs/_site/assets/css/components/theme-switcher.css delete mode 100644 docs/_site/assets/css/components/toc.css delete mode 100644 docs/_site/assets/css/components/version-switcher.css delete mode 100644 docs/_site/assets/css/docs-footer.css delete mode 100644 docs/_site/assets/css/docs-header.css delete mode 100644 docs/_site/assets/css/docs.css delete mode 100644 docs/_site/assets/css/eslint-site-footer.css delete mode 100644 docs/_site/assets/css/eslint-site-header.css delete mode 100644 docs/_site/assets/css/forms.css delete mode 100644 docs/_site/assets/css/foundations.css delete mode 100644 docs/_site/assets/css/languages.css delete mode 100644 docs/_site/assets/css/print.css delete mode 100644 docs/_site/assets/css/styles.css delete mode 100644 docs/_site/assets/css/syntax-highlighter.css delete mode 100644 docs/_site/assets/css/tokens/spacing.css delete mode 100644 docs/_site/assets/css/tokens/themes.css delete mode 100644 docs/_site/assets/css/tokens/typography.css delete mode 100644 docs/_site/assets/css/tokens/ui.css delete mode 100644 docs/_site/assets/css/utilities.css delete mode 100644 docs/_site/assets/css/versions.css diff --git a/docs/_site/assets/css/carbon-ads.css b/docs/_site/assets/css/carbon-ads.css deleted file mode 100644 index 7a4de64b7b8..00000000000 --- a/docs/_site/assets/css/carbon-ads.css +++ /dev/null @@ -1 +0,0 @@ -@media (max-width:800px){.hero-ad{display:none}}#carbonads *{margin:initial;padding:initial}#carbonads{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:4px;border-radius:var(--border-radius);box-shadow:0 1px 4px 1px rgba(0,0,0,.1);display:inline-block;font-size:1rem;margin:2rem 0;overflow:hidden;padding:.6em}.docs-main #carbonads{margin:0 0 2rem}@media (max-width:800px){#carbonads{display:none!important}}.jumbotron #carbonads{background-color:hsla(0,0%,70%,.15);border:1px solid rgba(110,102,153,.6)}#carbonads a{color:inherit;font-weight:500;text-decoration:none}#carbonads a:hover{color:var(--link-color);text-decoration:none}.jumbotron #carbonads a{color:#eee}.jumbotron #carbonads a:hover{color:#ccc}#carbonads span{display:block;overflow:hidden;position:relative}#carbonads .carbon-wrap{display:flex;flex-direction:column;max-width:130px}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:.7em;font-weight:500;line-height:1rem;margin-top:10px;text-align:left}#carbonads .carbon-poweredby{display:block;font-size:.5rem;font-weight:500;letter-spacing:.1ch;line-height:1;margin-top:10px;text-transform:uppercase}@media only screen and (min-width:320px) and (max-width:759px){#carbonads{font-size:12px;margin-top:0}#carbonads .carbon-wrap{display:flex;flex-direction:row;max-width:330px}#carbonads .carbon-text{font-size:14px;margin:0 0 14px 10px;text-align:left}#carbonads .carbon-poweredby{bottom:0;font-size:8px;left:142px;position:absolute}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/alert.css b/docs/_site/assets/css/components/alert.css deleted file mode 100644 index d40a6362b88..00000000000 --- a/docs/_site/assets/css/components/alert.css +++ /dev/null @@ -1 +0,0 @@ -.alert{-webkit-margin-after:1.5rem;align-items:start;border:1px solid;border-radius:var(--border-radius);display:grid;font-size:.875rem;gap:.75rem;grid-template-columns:auto 1fr;margin-block-end:1.5rem;margin-bottom:1.5rem;padding:1rem;position:relative}.alert.alert--warning{background-color:var(--color-rose-25);color:var(--color-rose-600)}[data-theme=dark] .alert.alert--warning{background-color:var(--color-rose-900);color:var(--color-rose-300)}.alert.alert--important{background-color:var(--color-warning-25);color:var(--color-warning-600)}[data-theme=dark] .alert.alert--important{background-color:var(--color-warning-900);color:var(--color-warning-300)}.alert.alert--tip{background-color:var(--color-success-25);color:var(--color-success-600)}[data-theme=dark] .alert.alert--tip{background-color:var(--color-success-900);color: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{offset-block-start:2px;color:inherit;position:relative;top:2px}.alert__text>p{margin:0}.alert__type{-webkit-margin-after:.25rem;display:block;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}.alert--warning .alert__type{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__type{color:var(--color-rose-200)}.alert--important .alert__type{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__type{color:var(--color-warning-200)}.alert--tip .alert__type{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__type{color:var(--color-success-200)}.alert__learn-more{-webkit-margin-before:.75rem;display:block;font-weight:500;margin-block-start:.75rem;margin-top:.75rem}.alert--warning .alert__learn-more{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__learn-more{color:var(--color-rose-200)}.alert--important .alert__learn-more{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__learn-more{color:var(--color-warning-200)}.alert--tip .alert__learn-more{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__learn-more{color:var(--color-success-200)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/buttons.css b/docs/_site/assets/css/components/buttons.css deleted file mode 100644 index c9e0376fada..00000000000 --- a/docs/_site/assets/css/components/buttons.css +++ /dev/null @@ -1 +0,0 @@ -.c-btn,button{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;font:inherit;justify-content:center;line-height:inherit}.c-btn{border-radius:var(--border-radius);font-family:var(--text-font);font-size:var(--step-0);font-weight:500;padding:.75em 1.125em;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{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}.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);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color)}.c-btn--secondary:hover{background-color:var(--secondary-button-hover-color)}.c-btn--ghost{border:1px solid var(--border-color);color:var(--body-text-color)}.c-btn--ghost:hover{border-color:var(--link-color)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/docs-index.css b/docs/_site/assets/css/components/docs-index.css deleted file mode 100644 index 2b9a770cd18..00000000000 --- a/docs/_site/assets/css/components/docs-index.css +++ /dev/null @@ -1 +0,0 @@ -.docs-index .docs-index__list a{-webkit-margin-start:-.75rem;align-items:center;border-radius:var(--border-radius);color:var(--headings-color);display:flex;justify-content:space-between;margin-left:-.75rem;margin-inline-start:-.75rem;padding:.5rem .75rem;text-decoration:none}.docs-index .docs-index__list a:hover,.docs-index .docs-index__list a[aria-current=true]{background-color:var(--docs-lightest-background-color);color:var(--link-color)}@media (max-width:1023px){.docs-index .docs-index__list a{-webkit-margin-start:0;margin-left:0;margin-inline-start:0;padding:.5rem 1rem}}.docs-index__item{margin:0}.docs-index__item ul ul{padding-left:.75rem}.docs-index__item[data-has-children]{margin-bottom:.5rem}.docs-index__list>.docs-index__item{-webkit-margin-before:1.5rem;margin-block-start:1.5rem;margin-top:1.5rem}.docs-index__list>.docs-index__item>a{color:var(--icon-color);font-size:.875rem;font-weight:500;letter-spacing:1px;text-transform:uppercase}.index-js .index-icon{color:inherit;display:block!important;height:.5rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}.index-js [aria-expanded=true] .index-icon{transform:rotate(180deg)}.index-js ul[aria-hidden=true]{display:none}.index-js ul[aria-hidden=false]{display:block}.docs__index__panel[data-open=false]{display:none}@media (min-width:1024px){.docs__index__panel[data-open=false]{display:block}}.docs__index__panel[data-open=true]{display:block}@media (min-width:1024px){.docs__index__panel[data-open=true]{display:block}}.docs-index-toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.docs-index-toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.docs-index-toggle{display:none}}.docs-index-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.docs-index-toggle #ham-bottom,.docs-index-toggle #ham-middle,.docs-index-toggle #ham-top{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)}.eslint-actions{display:inline-flex;flex-direction:column;flex-wrap:wrap;gap:1rem;width:100%}@media (min-width:640px){.eslint-actions{flex-direction:row}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/docs-navigation.css b/docs/_site/assets/css/components/docs-navigation.css deleted file mode 100644 index 189ea724bee..00000000000 --- a/docs/_site/assets/css/components/docs-navigation.css +++ /dev/null @@ -1 +0,0 @@ -.docs-site-nav{display:flex;flex:1;flex-direction:column;grid-column:1/-1;grid-row:1}.docs-site-nav ul{-webkit-margin-before:1rem;-webkit-margin-after:2rem;font-size:var(--step-1);list-style:none;margin-block-end:2rem;margin-block-start:1rem;margin-bottom:2rem;margin-top:1rem}@media (min-width:1024px){.docs-site-nav ul{-webkit-margin-before:0;-webkit-margin-after:0;align-items:center;display:flex;font-size:var(--step-0);margin-block-end:0;margin-block-start:0;margin-bottom:0;margin-top:0}}.docs-site-nav .flexer{align-self:flex-end;display:flex;justify-self:flex-end}.docs-site-nav a:not(.c-btn){color:inherit;display:block;text-decoration:none;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);font-weight:500;text-decoration:none}@media (min-width:1024px){.docs-nav-panel{display:flex;flex-direction:row;justify-content:center}}.docs-nav-panel[data-open=false]{display:none}@media (min-width:1024px){.docs-nav-panel[data-open=true]{display:flex;flex-direction:row;justify-content:center}.docs-nav-panel .mobile-only{display:none}}.docs-site-nav-toggle{-webkit-margin-start:.5rem;-webkit-margin-end:-10px;align-items:center;cursor:pointer;display:inline-flex;margin-left:.5rem;margin-right:-10px;margin-inline-end:-10px;margin-inline-start:.5rem}.docs-site-nav-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:var(--headings-color);height:40px;width:40px}.docs-site-nav-toggle #ham-bottom,.docs-site-nav-toggle #ham-middle,.docs-site-nav-toggle #ham-top{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 (min-width:1024px){.docs-site-nav{flex-direction:row;gap:2rem;grid-column:auto}.docs-site-nav ul{display:flex;font-size:var(--step-0);gap:2rem}.docs-site-nav ul li{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.docs-site-nav .flexer{order:1}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/hero.css b/docs/_site/assets/css/components/hero.css deleted file mode 100644 index e5f7cbf10ec..00000000000 --- a/docs/_site/assets/css/components/hero.css +++ /dev/null @@ -1 +0,0 @@ -@media (min-width:800px){.hero .grid{grid-gap:2rem;align-items:center;display:grid;grid-template-columns:2fr 1fr}}.hero .grid .span-1-7{grid-column:1/2}.hero .grid .span-10-12{grid-column:2/3;justify-self:end}.hero{-webkit-border-after:1px solid var(--divider-color);background-color:var(--hero-background-color);border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}@media (min-width:800px){.hero{min-height:calc(285px + var(--space-xl-4xl))}}.hero .content-container{margin:0;padding:var(--space-xl-4xl) 0}.hero>.content-container{align-items:center;margin:0 auto;padding:0 calc(1rem + 1vw)}.hero--homepage .section-title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.hero--homepage .section-supporting-text{font-size:var(--step-1);margin:0;text-align:left}.hero--homepage .eslint-actions{-webkit-margin-before:3rem;font-size:var(--step-1);margin-block-start:3rem;margin-top:3rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/index.css b/docs/_site/assets/css/components/index.css deleted file mode 100644 index bf70952cf3b..00000000000 --- a/docs/_site/assets/css/components/index.css +++ /dev/null @@ -1 +0,0 @@ -.index{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}.index__item{margin:0}.index__item a{border-radius:var(--border-radius);color:inherit;display:block;font-size:var(--step-0);padding:.625rem .875rem;text-decoration:none}.index__item a:hover{color:var(--link-color)}.index__item a[aria-current=page]{background-color:var(--lightest-background-color);color:var(--link-color);font-weight:500}.index__toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.index__toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.index__toggle{display:none}}.index__toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.index__toggle #ham-bottom,.index__toggle #ham-middle,.index__toggle #ham-top{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 (min-width:1024px){.index__list[data-open=false]{display:block}}.index__list[data-open=true]{display:block}@media (min-width:1024px){.index__list[data-open=true]{display:block}} \ No newline at end of file diff --git a/docs/_site/assets/css/components/language-switcher.css b/docs/_site/assets/css/components/language-switcher.css deleted file mode 100644 index 347aa88174b..00000000000 --- a/docs/_site/assets/css/components/language-switcher.css +++ /dev/null @@ -1 +0,0 @@ -.switcher--language{align-items:center;display:flex;flex-wrap:wrap;font-size:inherit;gap:.25rem .5rem;justify-content:center;padding:0;position:relative;width:100%}@media (min-width:800px){.switcher--language{justify-content:flex-start}}.switcher--language .label__text{flex:1 0 10ch}.switcher--language .switcher__select{flex:1 0 12rem}@media (max-width:800px){.switcher--language .switcher__select{max-width:250px}}.language-switcher{display:inline-flex} \ No newline at end of file diff --git a/docs/_site/assets/css/components/resources.css b/docs/_site/assets/css/components/resources.css deleted file mode 100644 index 7d213295671..00000000000 --- a/docs/_site/assets/css/components/resources.css +++ /dev/null @@ -1 +0,0 @@ -.resource{-webkit-margin-after:.5rem;align-items:stretch;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;margin-block-end:.5rem;margin-bottom:.5rem;overflow:hidden;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%;-o-object-fit:contain;object-fit:contain;width:100%}.resource__content{align-self:center;flex:4;padding:.75rem}.resource__title{color:var(--headings-color);font-weight:500;margin-bottom:.125rem;text-decoration:none}.resource__title:after{offset-inline-start:0;offset-block-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.resource__domain,.resource__domain a{color:var(--body-text-color);font-size:.875rem;text-decoration:none}.resource__icon{align-self:center;color:var(--headings-color);margin:1rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/rules.css b/docs/_site/assets/css/components/rules.css deleted file mode 100644 index 4100eb134bb..00000000000 --- a/docs/_site/assets/css/components/rules.css +++ /dev/null @@ -1 +0,0 @@ -.rule-categories{background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:3rem}.rule-categories .rule-category{background:none;border:none;margin:0;padding:1rem}@media screen and (min-width:768px){.rule-categories .rule-category:not(:first-child):after{border-left:1px solid var(--divider-color);content:"";display:block;left:0;padding:1px}}@media screen and (min-width:1440px),screen and (min-width:768px) and (max-width:1023px){.rule-categories .rule-category:not(:first-child):after{height:70%;position:absolute}}@media screen and (min-width:1024px) and (max-width:1439px){.rule-categories .rule-category:nth-child(2):after{height:70%;position:absolute}}.rule-categories .rule-category__description{flex:1 1 45ch}.rule-category{align-items:flex-start;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--step--1);gap:1rem;margin:1.5rem 0;padding:1rem;position:relative}.rule-category p{margin:0}.rule-category .rule-category__description{flex:1 1 30ch}.rule{align-items:center;background-color:var(--lightest-background-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 0;padding:1rem;position:relative}.rule p:last-of-type{margin:0}.rule__content{flex:1 1 35ch}.rule__name{-webkit-margin-after:.25rem;font-size:.875rem;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}a.rule__name{text-decoration:none}a.rule__name:hover{text-decoration:underline}a.rule__name:after{offset-block-start:0;offset-inline-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.rule__description{font-size:var(--step--1)}.rule__categories{align-items:center;border-radius:var(--border-radius);display:flex;font-size:.875rem;gap:1rem;padding:2px 4px}.rule__categories p{align-items:center;display:inline-flex;margin:0}[data-theme=dark] .rule__categories{background:var(--body-background-color)}.rule__status{-webkit-margin-start:.5rem;background:var(--color-rose-50);border-radius:var(--border-radius);color:var(--color-rose-500);display:inline-block;font-size:var(--step--1);font-weight:400;margin-left:.5rem;margin-inline-start:.5rem;padding:0 .5rem}[data-theme=dark] .rule__status{background:var(--body-background-color)}.rule__categories__type[aria-hidden=true]{opacity:.25}.related-rules__list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:start}.related-rules__list__item svg{color:inherit}.related-rules__list__item a{align-items:center;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);color:var(--headings-color);display:inline-flex;gap:.5rem;padding:.625rem;text-decoration:none}.related-rules__list__item a:hover{background-color:var(--lighter-background-color);color:var(--link-color)}a.rule-list-item+a.rule-list-item:before{content:",";display:inline-block;margin-left:5px;margin-right:5px} \ No newline at end of file diff --git a/docs/_site/assets/css/components/search.css b/docs/_site/assets/css/components/search.css deleted file mode 100644 index fd40c717929..00000000000 --- a/docs/_site/assets/css/components/search.css +++ /dev/null @@ -1 +0,0 @@ -[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[type=search]::-ms-clear,[type=search]::-ms-reveal{display:none;height:0;width:0}.search{margin:1rem 0}.search,.search__inner-input-wrapper,.search__input-wrapper{position:relative}.search__clear-btn{offset-block-start:50%;offset-inline-end:1.5rem;color:var(--body-text-color);display:flex;padding:0;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);z-index:3}.search__clear-btn svg{border:1px solid;border-radius:50%;color:inherit;height:1rem;width:1rem}.search__input{-webkit-padding-start:2.5rem;outline-offset:1px;padding-left:2.5rem;padding-inline-start:2.5rem;width:100%}.search__icon{offset-block-start:50%;offset-inline-start:.75rem;color:var(--body-text-color);display:block;left:.75rem;position:absolute;top:50%;transform:translateY(-50%);z-index:3}.search .search-results{background-color:var(--body-background-color);border:1px solid var(--divider-color);border-radius:0 0 var(--border-radius) var(--border-radius);font-size:.875rem;max-height:400px;overflow-y:auto;position:relative;top:.25rem;width:100%;z-index:10}@media (min-width:1024px){.search .search-results{box-shadow:var(--shadow-lg);position:absolute;top:calc(100% + .25rem)}}.search .search-results[data-results=true]{padding:0}.search .search-results[data-results=false]{padding:1rem}.search .search-results:empty{display:none}.search-results__list{list-style:none;margin:0;padding:0}.search .search-results__item{-webkit-border-after:1px solid var(--lightest-background-color);border-block-end:1px solid var(--lightest-background-color);border-bottom:1px solid var(--lightest-background-color);margin:0;padding:.875rem;position:relative}.search .search-results__item:hover{background-color:var(--lightest-background-color)}.search .search-results__item:focus-within{background-color:var(--lightest-background-color)}.search .search-results__item__title{font-family:var(--text-font);font-size:var(--step-0);font-size:.875rem;margin-bottom:0}.search .search-results__item__title a{color:var(--link-color);display:block;font:inherit;padding:.25rem .75rem;text-decoration:none}.search .search-results__item__title a:hover{background-color:inherit;color:var(--link-color)}.search .search-results__item__title a:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.search-results__item__context{font-size:.875rem;margin:0;padding-left:1rem}.algolia-docsearch-suggestion--highlight{background-color:var(--color-brand);border-radius:2px;color:#fff;display:inline-block;padding:0 2px}[data-theme=dark] .algolia-docsearch-suggestion--highlight{background-color:var(--link-color);color:var(--color-neutral-900)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/social-icons.css b/docs/_site/assets/css/components/social-icons.css deleted file mode 100644 index 4945e282f22..00000000000 --- a/docs/_site/assets/css/components/social-icons.css +++ /dev/null @@ -1 +0,0 @@ -.eslint-social-icons{-webkit-margin-after:-1rem;margin-block-end:-1rem;margin-bottom:-1rem}.eslint-social-icons ul{-webkit-margin-start:-1rem;display:inline-flex;margin:0 0 0 -1rem;margin-inline-start:-1rem;padding:0}.eslint-social-icons ul li{align-items:center;display:inline-flex;margin:0}.eslint-social-icons ul li a{display:flex;padding:1rem .75rem} \ No newline at end of file diff --git a/docs/_site/assets/css/components/tabs.css b/docs/_site/assets/css/components/tabs.css deleted file mode 100644 index c37edae0d43..00000000000 --- a/docs/_site/assets/css/components/tabs.css +++ /dev/null @@ -1 +0,0 @@ -.c-tabs pre{-webkit-margin-before:0;margin-block-start:0;margin-top:0}.js-tabs .c-tabs__tablist{display:flex;justify-content:start}.c-tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius) var(--border-radius) 0 0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-size:var(--step-0);font-weight:500;justify-content:center;line-height:inherit;margin:0;padding:.75rem 1.125rem;transition:background-color .2s linear,border-color .2s linear}.c-tabs__tab:hover{color:var(--link-color)}.c-tabs__tab[aria-selected=true]{background-color:var(--lightest-background-color);color:var(--link-color)}.c-tabs__tabpanel{-webkit-margin-after:2rem;background-color:var(--lightest-background-color);border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);margin-block-end:2rem;margin-bottom:2rem}.js-tabs .c-tabs__tabpanel{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.c-tabs__tabpanel__title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.js-tabs .c-tabs__tabpanel__title{display:none} \ No newline at end of file diff --git a/docs/_site/assets/css/components/theme-switcher.css b/docs/_site/assets/css/components/theme-switcher.css deleted file mode 100644 index fea453533c8..00000000000 --- a/docs/_site/assets/css/components/theme-switcher.css +++ /dev/null @@ -1 +0,0 @@ -.theme-switcher{align-items:center;display:inline-flex;gap:.5rem;position:relative}.theme-switcher-label.theme-switcher-label{color:inherit;font:inherit;font-family:var(--text-font);margin:0}.theme-switcher__buttons{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex}.theme-switcher__button{align-items:center;box-shadow:var(--shadow-xs);color:inherit;display:inline-flex;flex:0;gap:.25rem;margin:0;padding:.625rem .875rem}.theme-switcher__button:first-of-type{-webkit-border-end:.5px solid var(--border-color);border-inline-end:.5px solid var(--border-color);border-right:.5px solid var(--border-color)}.theme-switcher__button:last-of-type{-webkit-border-start:.5px solid var(--border-color);border-inline-start:.5px solid var(--border-color);border-left:.5px solid var(--border-color)}.theme-switcher__button .theme-switcher__icon{color:var(--icon-color)}.theme-switcher__button[aria-pressed=true],.theme-switcher__button[aria-pressed=true] .theme-switcher__icon,.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:hover .theme-switcher__icon,.theme-switcher__button[aria-pressed=false]:hover .theme-switcher__icon{color:var(--link-color)} \ No newline at end of file diff --git a/docs/_site/assets/css/components/toc.css b/docs/_site/assets/css/components/toc.css deleted file mode 100644 index e57dc370281..00000000000 --- a/docs/_site/assets/css/components/toc.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.docs-toc{margin:2rem 0}.docs-aside .docs-toc{display:none}@media (min-width:1400px){.docs-toc{display:none}.docs-aside .docs-toc{display:block}}.c-toc ol{margin:0}.c-toc ol li{-webkit-margin-after:.25rem;-webkit-padding-start:1rem;margin-block-end:.25rem;margin-bottom:.25rem;padding-left:1rem;padding-inline-start:1rem;position:relative}.c-toc ol li>ol{margin-top:.25rem}.c-toc ol li:before{offset-inline-start:-.4rem;color:var(--icon-color);content:"└";left:-.4rem;position:absolute}.c-toc a{color:var(--headings-color);text-decoration:none}.c-toc a:hover{color:var(--link-color)}.c-toc__label.c-toc__label{-webkit-margin-after:.5rem;color:var(--body-text-color);font-family:var(--text-font);font-size:var(--step-0);margin-block-end:.5rem;margin-bottom:.5rem}.c-toc__label{width:-moz-fit-content;width:fit-content}.c-toc__label button{align-items:center;border-radius:0;color:var(--link-color);cursor:pointer;display:flex;font:inherit;font-size:inherit;font-weight:500;height:100%;justify-content:space-between;line-height:1.5;padding:0;position:relative;text-align:left;transition:outline .1s linear;width:100%}.c-toc__label button svg{flex:none}.toc-trigger-icon{-webkit-margin-start:2rem;color:var(--color-neutral-400);display:block!important;height:.5rem;margin-left:2rem;margin-inline-start:2rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}[aria-expanded=true] .toc-trigger-icon{transform:rotate(180deg)}.c-toc__panel[data-open=false]{display:none}.c-toc__panel[data-open=true]{display:block} \ No newline at end of file diff --git a/docs/_site/assets/css/components/version-switcher.css b/docs/_site/assets/css/components/version-switcher.css deleted file mode 100644 index 8c3e2b995c3..00000000000 --- a/docs/_site/assets/css/components/version-switcher.css +++ /dev/null @@ -1 +0,0 @@ -.version-switcher{-webkit-margin-after:.5rem;margin-block-end:.5rem;margin-bottom:.5rem} \ No newline at end of file diff --git a/docs/_site/assets/css/docs-footer.css b/docs/_site/assets/css/docs-footer.css deleted file mode 100644 index e967f26aa59..00000000000 --- a/docs/_site/assets/css/docs-footer.css +++ /dev/null @@ -1 +0,0 @@ -.docs-footer{align-items:baseline;display:flex;flex-direction:column;font-size:.875rem;gap:2rem;justify-content:space-between}@media (max-width:800px){.docs-footer{align-items:center;padding:1.5rem 0 4rem}}.copyright p{margin:0}.docs-socials-and-legal{display:flex;flex-direction:column;gap:1rem}@media (max-width:800px){.docs-socials-and-legal{text-align:center}}.docs-switchers{display:flex;flex-wrap:wrap;gap:1.5rem}.docs-switchers .language-switcher,.docs-switchers .theme-switcher{flex:1 1 240px}@media (max-width:800px){.docs-switchers .language-switcher,.docs-switchers .theme-switcher{justify-content:center}} \ No newline at end of file diff --git a/docs/_site/assets/css/docs-header.css b/docs/_site/assets/css/docs-header.css deleted file mode 100644 index 5c3a56a7643..00000000000 --- a/docs/_site/assets/css/docs-header.css +++ /dev/null @@ -1 +0,0 @@ -.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .docs-wrapper{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:1024px){.site-header .docs-wrapper{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%} \ No newline at end of file diff --git a/docs/_site/assets/css/docs.css b/docs/_site/assets/css/docs.css deleted file mode 100644 index 3639597a489..00000000000 --- a/docs/_site/assets/css/docs.css +++ /dev/null @@ -1 +0,0 @@ -html{scroll-behavior:smooth}.docs{margin:0 auto;max-width:1700px}.docs-aside__content{flex:1}.docs-wrapper{display:flex;flex:1;flex-direction:column;padding:0 var(--space-s-l)}@media (min-width:1024px){.docs-wrapper{align-items:stretch;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,3.5fr)}}.docs-nav{-webkit-padding-before:var(--space-l-xl);align-items:start;display:grid;font-size:.875rem;grid-auto-rows:max-content;grid-column:1/2;grid-row:1/2;padding-top:var(--space-l-xl);padding-block-start:var(--space-l-xl)}@media (min-width:1024px){.docs-nav{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding:var(--space-l-xl) 0;padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}.docs-content{flex:1;grid-column:2/3;padding:var(--space-l-xl) 0}@media (min-width:800px){.docs-content{grid-gap:1rem;display:grid;grid-template-columns:minmax(0,4fr) minmax(160px,1fr)}}@media (min-width:1024px){.docs-content{padding:0}}@media (min-width:1300px){.docs-content{grid-gap:2rem}}.docs-main{flex:1 1 68ch}@media (min-width:800px){.docs-main{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}@media (min-width:1024px){.docs-main{padding:var(--space-l-xl) var(--space-l-2xl)}}.docs-aside{display:flex;flex-direction:column;grid-column:2/3}@media (min-width:800px){.docs-aside{padding:var(--space-l-xl) 0}}.docs-toc{align-self:center;flex:1}.docs-edit-link{-webkit-padding-before:1.5rem;border-top:1px solid var(--divider-color);margin:3rem 0;padding-top:1.5rem;padding-block-start:1.5rem}div.correct,div.incorrect{position:relative}div.correct:after,div.incorrect:after{offset-inline-end:-22px;offset-block-start:-22px;position:absolute;right:-22px;top:-22px}div.correct:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-11 11-5-5' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}div.incorrect:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-12 12m0-12 12 12' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}pre[class*=language-]{position:relative}.c-btn.c-btn--playground{offset-block-end:.5rem;offset-inline-end:.5rem;bottom:.5rem;font-size:var(--step--1);position:absolute;right:.5rem}@media (max-width:768px){.c-btn.c-btn--playground{display:none}}@media (hover:none){.anchorjs-link{opacity:1}} \ No newline at end of file diff --git a/docs/_site/assets/css/eslint-site-footer.css b/docs/_site/assets/css/eslint-site-footer.css deleted file mode 100644 index fef1c4e9e6d..00000000000 --- a/docs/_site/assets/css/eslint-site-footer.css +++ /dev/null @@ -1 +0,0 @@ -.site-footer{-webkit-border-before:1px solid var(--divider-color);background-color:var(--footer-background-color);border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);text-align:center}.footer-cta .logo,.footer-cta .section-supporting-text{-webkit-margin-after:2.5rem;margin-block-end:2.5rem;margin-bottom:2.5rem}.footer-cta .eslint-actions{justify-content:center}.footer-legal-links ul li{-webkit-margin-end:.5rem;display:inline-block;margin-right:.5rem;margin-inline-end:.5rem}.footer-legal-links ul li:not(:last-of-type):after{-webkit-margin-start:.5rem;content:"|";margin-left:.5rem;margin-inline-start:.5rem}.footer-legal-section{font-size:var(--step--1);padding:2rem 1rem}.copyright{margin:0 auto;max-width:1100px}.footer-middle{-webkit-padding-before:2rem;-webkit-padding-after:2rem;align-items:center;display:flex;flex-direction:column;gap:2rem;padding-block-end:2rem;padding-block-start:2rem;padding-bottom:2rem;padding-top:2rem}@media (min-width:768px){.footer-middle{flex-direction:row;justify-content:space-between}} \ No newline at end of file diff --git a/docs/_site/assets/css/eslint-site-header.css b/docs/_site/assets/css/eslint-site-header.css deleted file mode 100644 index 7b78af2a373..00000000000 --- a/docs/_site/assets/css/eslint-site-header.css +++ /dev/null @@ -1 +0,0 @@ -.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .content-container{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:680px){.site-header .content-container{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center;z-index:2}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%} \ No newline at end of file diff --git a/docs/_site/assets/css/forms.css b/docs/_site/assets/css/forms.css deleted file mode 100644 index 4f8293b59ce..00000000000 --- a/docs/_site/assets/css/forms.css +++ /dev/null @@ -1 +0,0 @@ -.c-custom-select{-webkit-padding-end:2.1875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--body-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 7.61 5 5 5-5' stroke='%23667085' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--body-background-color) 0,var(--body-background-color) 100%);background-position:right .875rem top 50%,0 0;background-repeat:no-repeat,repeat;background-size:1em auto,100%;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--body-text-color);display:block;font:inherit;line-height:1.3;max-width:100%;min-width:0;padding:.625rem 2.1875rem .625rem .875rem;padding-inline-end:2.1875rem;width:100%}.label__text.label__text{-webkit-margin-after:.25rem;align-items:center;color:inherit;display:flex;font-family:var(--text-font);font-size:.875rem;font-weight:400;gap:.5rem;line-height:1.5;margin-block-end:.25rem;margin-bottom:.25rem}input{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:inherit;display:block;font:inherit;font-size:1rem;line-height:1.3;max-width:100%;min-width:0;padding:.625rem .875rem} \ No newline at end of file diff --git a/docs/_site/assets/css/foundations.css b/docs/_site/assets/css/foundations.css deleted file mode 100644 index f1731eae62c..00000000000 --- a/docs/_site/assets/css/foundations.css +++ /dev/null @@ -1 +0,0 @@ -::-moz-selection{background-color:var(--color-brand);color:#fff}::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){box-shadow:none;outline:1px solid transparent}.js-focus-visible :focus:not(.focus-visible){box-shadow:none;outline:1px solid transparent}input:focus-visible{border-color:var(--border-color);outline:2px solid var(--link-color)}input:focus{box-shadow:0 0 0 2px var(--link-color);outline:2px solid transparent}*,:after,:before{box-sizing:border-box}html{accent-color:var(--link-color);caret-color:var(--link-color);font-family:var(--text-font);height:100%;overflow-x:hidden}body,html{background-color:var(--body-background-color)}body{color:var(--body-text-color);display:flex;flex-direction:column;margin:0 auto;min-height:100%;position:relative}#skip-link{offset-block-start:-30em;offset-inline-start:0;offset-inline-end:auto;left:0;position:fixed;right:auto;top:-30em;transition:top .1s linear;z-index:999}#skip-link:focus{offset-block-start:2px;outline:2px solid transparent;top:2px}#skip-link:focus-visible{offset-block-start:2px;outline:2px solid transparent;top:2px}main{flex:1}main:focus,main:target{outline:none}hr{-webkit-border-before:1px solid var(--divider-color);background:none;border:none;border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);height:0;margin:2rem 0}.content-container{margin:0 auto;padding:var(--space-xl-3xl) calc(1rem + 1vw);width:100%}.section-head .section-supporting-text{margin:0 auto var(--space-l-2xl);max-width:768px;text-align:center}.section-foot{-webkit-margin-before:var(--space-l-2xl);margin-block-start:var(--space-l-2xl);margin-top:var(--space-l-2xl)}.section-foot .section-supporting-text{font-size:var(--step--1);margin:0 auto;max-width:768px;text-align:center}.section-title{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}.section-supporting-text{font-size:var(--step-1)}code,pre{font-family:var(--mono-font);font-variant-ligatures:none}code{color:var(--link-color)}pre code{color:unset}.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{border-collapse:collapse;margin:2.5rem 0;width:100%}table,table td{border:1px solid var(--divider-color)}table td,table th{padding:.25rem .5rem}table th{background-color:var(--lightest-background-color)}.c-btn .c-icon:hover,a,a .c-icon:hover,button .c-icon:hover{color:var(--link-color)}a{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{-webkit-margin-after:.75em;margin-block-end:.75em;margin-bottom:.75em}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}ol,ul{-webkit-margin-before:0;margin-block-start:0;margin-top:0}ol li,ul li{margin:0 0 .75em}.person__bio ol,.person__bio ul{-webkit-padding-start:1.5rem;padding-left:1.5rem;padding-inline-start:1.5rem}.docs-main ol,.docs-main ul,.post-main ol,.post-main ul{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{display:none;margin:0}figure{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}figure img{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}figure figcaption{color:var(--grey)}img{display:block;height:auto;max-width:100%;position:relative}nav ol,nav ul{list-style:none;margin:0;padding:0}.video{margin:2em auto;max-width:1400px;width:90%}.video iframe{aspect-ratio:16/9;height:auto;width:100%}@media (prefers-reduced-motion:no-preference){.focus-visible,:focus-visible{outline-offset:3px;transition:outline-offset .15s linear}}body{font-size:var(--step-0);line-height:1.5}.eyebrow{-webkit-margin-after:1.5rem;color:var(--link-color);display:block;font-size:1rem;font-weight:500;margin-block-end:1.5rem;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{-webkit-margin-before:0;color:var(--headings-color);font-family:var(--display-font);font-weight:500;margin-block-start:0;margin-top:0}.components-main h2,.components-main h3,.components-main h4,.components-main h5,.components-main h6,.docs-main h2,.docs-main h3,.docs-main h4,.docs-main h5,.docs-main h6{-webkit-margin-before:3rem;-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-block-start:3rem;margin-bottom:1.5rem;margin-top:3rem}.components-main h2:first-child,.components-main h3:first-child,.components-main h4:first-child,.components-main h5:first-child,.components-main h6:first-child,.docs-main h2:first-child,.docs-main h3:first-child,.docs-main h4:first-child,.docs-main h5:first-child,.docs-main h6:first-child{-webkit-margin-before:0;margin-block-start:0;margin-top:0}caption,cite,figcaption,small{font-size:var(--step--1)}.h5,.h6,h5,h6{font-size:var(--step-0)}.h4,h4{font-size:var(--step-1)}.h3,h3{font-size:var(--step-2)}.h2,.h3,h2,h3{line-height:1.2}.h2,h2{font-size:var(--step-3)}.h1,h1{font-size:var(--step-4)}.h0,.h1,h1{line-height:1.2}.h0{font-size:var(--step-6)} \ No newline at end of file diff --git a/docs/_site/assets/css/languages.css b/docs/_site/assets/css/languages.css deleted file mode 100644 index 9b7114e3986..00000000000 --- a/docs/_site/assets/css/languages.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.languages-list{font-size:var(--step-0);margin:0;padding:0}.languages-list li{margin:0}.languages-list li:last-of-type a{border-bottom:0}.languages-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:inherit;display:block;display:flex;padding:.75rem .1rem;text-decoration:none;width:100%}.languages-list a[aria-current=true]{color:var(--link-color);font-weight:500}.languages-list a[aria-current=true]:after{content:"✔️"}.languages-list a:hover{color:var(--link-color)}.languages-section .flag{-webkit-margin-end:.5rem;font-size:2em;margin-right:.5rem;margin-inline-end:.5rem}.languages-section .languages-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem} \ No newline at end of file diff --git a/docs/_site/assets/css/print.css b/docs/_site/assets/css/print.css deleted file mode 100644 index 330c4c3c801..00000000000 --- a/docs/_site/assets/css/print.css +++ /dev/null @@ -1 +0,0 @@ -*,:after,:before,:first-letter,blockquote:first-line,div:first-line,li:first-line,p:first-line{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}body{background:none;color:#000;font-family:Helvetica,sans-serif;font-size:14pt;line-height:1.45;margin:0!important;padding:0!important;width:100%!important}.grid{display:block}.docs-content,.docs-wrapper,main{display:block;margin:1cm auto;max-width:75ch;width:100%}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}h2,h3,p{orphans:3;widows:3}code{font:12pt Courier,monospace}blockquote{font-size:12pt;margin:1.2em;padding:1em}hr{background-color:#ccc}img{max-width:100%!important}a img{border:none}a:link,a:visited{background:transparent;color:#333;font-weight:700;text-decoration:underline}abbr[title]:after{content:" (" attr(title) ")"}a[href^="http://"]{color:#000}a[href$=".gif"]:after,a[href$=".jpeg"]:after,a[href$=".jpg"]:after,a[href$=".png"]:after{content:" (" attr(href) ") ";display:none}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}table{margin:1px;text-align:left}th{font-weight:700}td,th{border-bottom:1px solid #333}td,th{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}.c-btn.c-btn--playground,.docs-edit-link,[class*=sidebar],aside,body>:not(main),button{display:none}a[href^=http]:not([href*="eslint.org"]):after{content:" (" attr(href) ")"}.resource a:after{display:none}ul{page-break-inside:avoid}#skip-link,.docs-aside,.docs-index,.docs-toc{display:none}@media print{@page{margin:1cm}} \ No newline at end of file diff --git a/docs/_site/assets/css/styles.css b/docs/_site/assets/css/styles.css deleted file mode 100644 index d2b74e8cd07..00000000000 --- a/docs/_site/assets/css/styles.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";:root{--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;--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){:root{--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}}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}:root{--fluid-max-width:1023}@media screen and (min-width:1024px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}: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,16));--fc-s-max:(var(--f-0-max,16));--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);--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));--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));--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));--space-l-3xl:calc((var(--fc-l-min)/16)*1rem + (var(--fc-3xl-max) - var(--fc-l-min))*var(--fluid-bp));--space-s-l:calc((var(--fc-s-min)/16)*1rem + (var(--fc-l-max) - var(--fc-s-min))*var(--fluid-bp));--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));--mono-font:"Mono Punctuators","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";--shadow-lg:0 12px 16px -4px rgba(16,24,40,.1),0 4px 6px -2px rgba(16,24,40,.05);--shadow-xs:0 1px 2px rgba(16,24,40,.05);--border-radius:.5rem}::-moz-selection{background-color:var(--color-brand);color:#fff}::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){box-shadow:none;outline:1px solid transparent}.js-focus-visible :focus:not(.focus-visible){box-shadow:none;outline:1px solid transparent}input:focus-visible{border-color:var(--border-color);outline:2px solid var(--link-color)}input:focus{box-shadow:0 0 0 2px var(--link-color);outline:2px solid transparent}*,:after,:before{box-sizing:border-box}html{accent-color:var(--link-color);caret-color:var(--link-color);font-family:var(--text-font);height:100%;overflow-x:hidden}body,html{background-color:var(--body-background-color)}body{color:var(--body-text-color);display:flex;flex-direction:column;margin:0 auto;min-height:100%;position:relative}#skip-link{offset-block-start:-30em;offset-inline-start:0;offset-inline-end:auto;left:0;position:fixed;right:auto;top:-30em;transition:top .1s linear;z-index:999}#skip-link:focus{offset-block-start:2px;outline:2px solid transparent;top:2px}#skip-link:focus-visible{offset-block-start:2px;outline:2px solid transparent;top:2px}main{flex:1}main:focus,main:target{outline:none}hr{-webkit-border-before:1px solid var(--divider-color);background:none;border:none;border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);height:0;margin:2rem 0}.content-container{margin:0 auto;padding:var(--space-xl-3xl) calc(1rem + 1vw);width:100%}.section-head .section-supporting-text{margin:0 auto var(--space-l-2xl);max-width:768px;text-align:center}.section-foot{-webkit-margin-before:var(--space-l-2xl);margin-block-start:var(--space-l-2xl);margin-top:var(--space-l-2xl)}.section-foot .section-supporting-text{font-size:var(--step--1);margin:0 auto;max-width:768px;text-align:center}.section-title{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}.section-supporting-text{font-size:var(--step-1)}code,pre{font-family:var(--mono-font);font-variant-ligatures:none}code{color:var(--link-color)}pre code{color:unset}.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{border-collapse:collapse;margin:2.5rem 0;width:100%}table,table td{border:1px solid var(--divider-color)}table td,table th{padding:.25rem .5rem}table th{background-color:var(--lightest-background-color)}.c-btn .c-icon:hover,a,a .c-icon:hover,button .c-icon:hover{color:var(--link-color)}a{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{-webkit-margin-after:.75em;margin-block-end:.75em;margin-bottom:.75em}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}ol,ul{-webkit-margin-before:0;margin-block-start:0;margin-top:0}ol li,ul li{margin:0 0 .75em}.person__bio ol,.person__bio ul{-webkit-padding-start:1.5rem;padding-left:1.5rem;padding-inline-start:1.5rem}.docs-main ol,.docs-main ul,.post-main ol,.post-main ul{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{display:none;margin:0}figure{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}figure img{-webkit-margin-after:1rem;margin-block-end:1rem;margin-bottom:1rem}figure figcaption{color:var(--grey)}img{display:block;height:auto;max-width:100%;position:relative}nav ol,nav ul{list-style:none;margin:0;padding:0}.video{margin:2em auto;max-width:1400px;width:90%}.video iframe{aspect-ratio:16/9;height:auto;width:100%}@media (prefers-reduced-motion:no-preference){.focus-visible,:focus-visible{outline-offset:3px;transition:outline-offset .15s linear}}body{font-size:var(--step-0);line-height:1.5}.eyebrow{-webkit-margin-after:1.5rem;color:var(--link-color);display:block;font-size:1rem;font-weight:500;margin-block-end:1.5rem;margin-bottom:1.5rem}h1,h2,h3,h4,h5,h6{-webkit-margin-before:0;color:var(--headings-color);font-family:var(--display-font);font-weight:500;margin-block-start:0;margin-top:0}.components-main h2,.components-main h3,.components-main h4,.components-main h5,.components-main h6,.docs-main h2,.docs-main h3,.docs-main h4,.docs-main h5,.docs-main h6{-webkit-margin-before:3rem;-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-block-start:3rem;margin-bottom:1.5rem;margin-top:3rem}.components-main h2:first-child,.components-main h3:first-child,.components-main h4:first-child,.components-main h5:first-child,.components-main h6:first-child,.docs-main h2:first-child,.docs-main h3:first-child,.docs-main h4:first-child,.docs-main h5:first-child,.docs-main h6:first-child{-webkit-margin-before:0;margin-block-start:0;margin-top:0}caption,cite,figcaption,small{font-size:var(--step--1)}.h5,.h6,h5,h6{font-size:var(--step-0)}.h4,h4{font-size:var(--step-1)}.h3,h3{font-size:var(--step-2)}.h2,.h3,h2,h3{line-height:1.2}.h2,h2{font-size:var(--step-3)}.h1,h1{font-size:var(--step-4)}.h0,.h1,h1{line-height:1.2}.h0{font-size:var(--step-6)}code[class*=language-],pre[class*=language-]{word-wrap:normal;font-family:var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;font-variant-ligatures:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{background-color:var(--lightest-background-color);border-radius:var(--border-radius);color:var(--color-neutral-900);margin:1.5rem 0;overflow:auto;padding:1.5rem}[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)}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6e7f8e}[data-theme=dark] .token.cdata,[data-theme=dark] .token.comment,[data-theme=dark] .token.doctype,[data-theme=dark] .token.prolog{color:#8e9fae}.token.namespace{opacity:.7}.token.atrule,.token.attr-name,.token.attr-value,.token.builtin,.token.char,.token.inserted,.token.keyword,.token.selector,.token.string{color:var(--link-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre{counter-reset:lineNumber}code .highlight-line{font-variant-ligatures:none}code .highlight-line:before{-webkit-margin-end:1.2em;-webkit-padding-end:1.2em;color:var(--icon-color);content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;margin-inline-end:1.2em;padding-right:1.2em;padding-inline-end:1.2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.4em}.site-header .docs-wrapper{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:1024px){.site-header .docs-wrapper{justify-content:space-between}}.docs-footer{align-items:baseline;display:flex;flex-direction:column;font-size:.875rem;gap:2rem;justify-content:space-between}@media (max-width:800px){.docs-footer{align-items:center;padding:1.5rem 0 4rem}}.copyright p{margin:0}.docs-socials-and-legal{display:flex;flex-direction:column;gap:1rem}@media (max-width:800px){.docs-socials-and-legal{text-align:center}}.docs-switchers{display:flex;flex-wrap:wrap;gap:1.5rem}.docs-switchers .language-switcher,.docs-switchers .theme-switcher{flex:1 1 240px}@media (max-width:800px){.docs-switchers .language-switcher,.docs-switchers .theme-switcher{justify-content:center}}.site-footer{-webkit-border-before:1px solid var(--divider-color);background-color:var(--footer-background-color);border-block-start:1px solid var(--divider-color);border-top:1px solid var(--divider-color);text-align:center}.footer-cta .logo,.footer-cta .section-supporting-text{-webkit-margin-after:2.5rem;margin-block-end:2.5rem;margin-bottom:2.5rem}.footer-cta .eslint-actions{justify-content:center}.footer-legal-links ul li{-webkit-margin-end:.5rem;display:inline-block;margin-right:.5rem;margin-inline-end:.5rem}.footer-legal-links ul li:not(:last-of-type):after{-webkit-margin-start:.5rem;content:"|";margin-left:.5rem;margin-inline-start:.5rem}.footer-legal-section{font-size:var(--step--1);padding:2rem 1rem}.copyright{margin:0 auto;max-width:1100px}.footer-middle{-webkit-padding-before:2rem;-webkit-padding-after:2rem;align-items:center;display:flex;flex-direction:column;gap:2rem;padding-block-end:2rem;padding-block-start:2rem;padding-bottom:2rem;padding-top:2rem}@media (min-width:768px){.footer-middle{flex-direction:row;justify-content:space-between}}.site-header{-webkit-border-before:4px solid var(--link-color);-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-block-start:4px solid var(--link-color);border-bottom:1px solid var(--divider-color);border-top:4px solid var(--link-color);padding:.75rem 0}.site-header .content-container{-webkit-padding-before:0;-webkit-padding-after:0;align-items:start;display:grid;padding-bottom:0;padding-block-end:0;padding-top:0;padding-block-start:0}@media (min-width:680px){.site-header .content-container{justify-content:space-between}}.logo-link{display:inline-flex;flex:none;grid-column:1/-1;grid-row:1;justify-self:start;padding:.5rem 0;place-content:center;z-index:2}.logo svg{-webkit-margin-after:-4px;display:inline-block;height:auto;margin-block-end:-4px;margin-bottom:-4px;max-width:100px;width:100%}.c-custom-select{-webkit-padding-end:2.1875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--body-background-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 7.61 5 5 5-5' stroke='%23667085' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to bottom,var(--body-background-color) 0,var(--body-background-color) 100%);background-position:right .875rem top 50%,0 0;background-repeat:no-repeat,repeat;background-size:1em auto,100%;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--body-text-color);display:block;font:inherit;line-height:1.3;max-width:100%;min-width:0;padding:.625rem 2.1875rem .625rem .875rem;padding-inline-end:2.1875rem;width:100%}.label__text.label__text{-webkit-margin-after:.25rem;align-items:center;color:inherit;display:flex;font-family:var(--text-font);font-size:.875rem;font-weight:400;gap:.5rem;line-height:1.5;margin-block-end:.25rem;margin-bottom:.25rem}input{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);color:inherit;display:block;font:inherit;font-size:1rem;line-height:1.3;max-width:100%;min-width:0;padding:.625rem .875rem}html{scroll-behavior:smooth}.docs{margin:0 auto;max-width:1700px}.docs-aside__content{flex:1}.docs-wrapper{display:flex;flex:1;flex-direction:column;padding:0 var(--space-s-l)}@media (min-width:1024px){.docs-wrapper{align-items:stretch;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,3.5fr)}}.docs-nav{-webkit-padding-before:var(--space-l-xl);align-items:start;display:grid;font-size:.875rem;grid-auto-rows:max-content;grid-column:1/2;grid-row:1/2;padding-top:var(--space-l-xl);padding-block-start:var(--space-l-xl)}@media (min-width:1024px){.docs-nav{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding:var(--space-l-xl) 0;padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}.docs-content{flex:1;grid-column:2/3;padding:var(--space-l-xl) 0}@media (min-width:800px){.docs-content{grid-gap:1rem;display:grid;grid-template-columns:minmax(0,4fr) minmax(160px,1fr)}}@media (min-width:1024px){.docs-content{padding:0}}@media (min-width:1300px){.docs-content{grid-gap:2rem}}.docs-main{flex:1 1 68ch}@media (min-width:800px){.docs-main{-webkit-padding-end:var(--space-s-l);-webkit-border-end:1px solid var(--divider-color);border-inline-end:1px solid var(--divider-color);border-right:1px solid var(--divider-color);padding-right:var(--space-s-l);padding-inline-end:var(--space-s-l)}}@media (min-width:1024px){.docs-main{padding:var(--space-l-xl) var(--space-l-2xl)}}.docs-aside{display:flex;flex-direction:column;grid-column:2/3}@media (min-width:800px){.docs-aside{padding:var(--space-l-xl) 0}}.docs-toc{align-self:center;flex:1}.docs-edit-link{-webkit-padding-before:1.5rem;border-top:1px solid var(--divider-color);margin:3rem 0;padding-top:1.5rem;padding-block-start:1.5rem}div.correct,div.incorrect{position:relative}div.correct:after,div.incorrect:after{offset-inline-end:-22px;offset-block-start:-22px;position:absolute;right:-22px;top:-22px}div.correct:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-11 11-5-5' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}div.incorrect:after{content:url("data:image/svg+xml;charset=utf-8,%3Csvg width='45' height='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 16-12 12m0-12 12 12' 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='%23fff' stroke-width='2'/%3E%3C/svg%3E")}pre[class*=language-]{position:relative}.c-btn.c-btn--playground{offset-block-end:.5rem;offset-inline-end:.5rem;bottom:.5rem;font-size:var(--step--1);position:absolute;right:.5rem}@media (max-width:768px){.c-btn.c-btn--playground{display:none}}@media (hover:none){.anchorjs-link{opacity:1}}.versions-list{font-size:var(--step-1);margin:0;padding:0}.versions-list li{margin:0}.versions-list li:last-of-type a{-webkit-border-after:0;border-block-end:0;border-bottom:0}.versions-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:var(--link-color);display:block;display:flex;padding:1rem .5rem;text-decoration:none;width:100%}.versions-list a[data-current=true]{color:var(--link-color);font-weight:500}.versions-list a[data-current=true]:after{content:"✔️"}.versions-list a:hover{background-color:var(--lightest-background-color)}.versions-section .versions-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem}.languages-list{font-size:var(--step-0);margin:0;padding:0}.languages-list li{margin:0}.languages-list li:last-of-type a{border-bottom:0}.languages-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:inherit;display:block;display:flex;padding:.75rem .1rem;text-decoration:none;width:100%}.languages-list a[aria-current=true]{color:var(--link-color);font-weight:500}.languages-list a[aria-current=true]:after{content:"✔️"}.languages-list a:hover{color:var(--link-color)}.languages-section .flag{-webkit-margin-end:.5rem;font-size:2em;margin-right:.5rem;margin-inline-end:.5rem}.languages-section .languages-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem}.c-btn,button{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;font:inherit;justify-content:center;line-height:inherit}.c-btn{border-radius:var(--border-radius);font-family:var(--text-font);font-size:var(--step-0);font-weight:500;padding:.75em 1.125em;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{align-items:center;display:inline-flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}.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);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color)}.c-btn--secondary:hover{background-color:var(--secondary-button-hover-color)}.c-btn--ghost{border:1px solid var(--border-color);color:var(--body-text-color)}.c-btn--ghost:hover{border-color:var(--link-color)}.docs-site-nav{display:flex;flex:1;flex-direction:column;grid-column:1/-1;grid-row:1}.docs-site-nav ul{-webkit-margin-before:1rem;-webkit-margin-after:2rem;font-size:var(--step-1);list-style:none;margin-block-end:2rem;margin-block-start:1rem;margin-bottom:2rem;margin-top:1rem}@media (min-width:1024px){.docs-site-nav ul{-webkit-margin-before:0;-webkit-margin-after:0;align-items:center;display:flex;font-size:var(--step-0);margin-block-end:0;margin-block-start:0;margin-bottom:0;margin-top:0}}.docs-site-nav .flexer{align-self:flex-end;display:flex;justify-self:flex-end}.docs-site-nav a:not(.c-btn){color:inherit;display:block;text-decoration:none;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);font-weight:500;text-decoration:none}@media (min-width:1024px){.docs-nav-panel{display:flex;flex-direction:row;justify-content:center}}.docs-nav-panel[data-open=false]{display:none}@media (min-width:1024px){.docs-nav-panel[data-open=true]{display:flex;flex-direction:row;justify-content:center}.docs-nav-panel .mobile-only{display:none}}.docs-site-nav-toggle{-webkit-margin-start:.5rem;-webkit-margin-end:-10px;align-items:center;cursor:pointer;display:inline-flex;margin-left:.5rem;margin-right:-10px;margin-inline-end:-10px;margin-inline-start:.5rem}.docs-site-nav-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:var(--headings-color);height:40px;width:40px}.docs-site-nav-toggle #ham-bottom,.docs-site-nav-toggle #ham-middle,.docs-site-nav-toggle #ham-top{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 (min-width:1024px){.docs-site-nav{flex-direction:row;gap:2rem;grid-column:auto}.docs-site-nav ul{display:flex;font-size:var(--step-0);gap:2rem}.docs-site-nav ul li{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.docs-site-nav .flexer{order:1}}.docs-toc{margin:2rem 0}.docs-aside .docs-toc{display:none}@media (min-width:1400px){.docs-toc{display:none}.docs-aside .docs-toc{display:block}}.c-toc ol{margin:0}.c-toc ol li{-webkit-margin-after:.25rem;-webkit-padding-start:1rem;margin-block-end:.25rem;margin-bottom:.25rem;padding-left:1rem;padding-inline-start:1rem;position:relative}.c-toc ol li>ol{margin-top:.25rem}.c-toc ol li:before{offset-inline-start:-.4rem;color:var(--icon-color);content:"└";left:-.4rem;position:absolute}.c-toc a{color:var(--headings-color);text-decoration:none}.c-toc a:hover{color:var(--link-color)}.c-toc__label.c-toc__label{-webkit-margin-after:.5rem;color:var(--body-text-color);font-family:var(--text-font);font-size:var(--step-0);margin-block-end:.5rem;margin-bottom:.5rem}.c-toc__label{width:-moz-fit-content;width:fit-content}.c-toc__label button{align-items:center;border-radius:0;color:var(--link-color);cursor:pointer;display:flex;font:inherit;font-size:inherit;font-weight:500;height:100%;justify-content:space-between;line-height:1.5;padding:0;position:relative;text-align:left;transition:outline .1s linear;width:100%}.c-toc__label button svg{flex:none}.toc-trigger-icon{-webkit-margin-start:2rem;color:var(--color-neutral-400);display:block!important;height:.5rem;margin-left:2rem;margin-inline-start:2rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}[aria-expanded=true] .toc-trigger-icon{transform:rotate(180deg)}.c-toc__panel[data-open=false]{display:none}.c-toc__panel[data-open=true]{display:block}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}[type=search]::-ms-clear,[type=search]::-ms-reveal{display:none;height:0;width:0}.search{margin:1rem 0}.search,.search__inner-input-wrapper,.search__input-wrapper{position:relative}.search__clear-btn{offset-block-start:50%;offset-inline-end:1.5rem;color:var(--body-text-color);display:flex;padding:0;position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);z-index:3}.search__clear-btn svg{border:1px solid;border-radius:50%;color:inherit;height:1rem;width:1rem}.search__input{-webkit-padding-start:2.5rem;outline-offset:1px;padding-left:2.5rem;padding-inline-start:2.5rem;width:100%}.search__icon{offset-block-start:50%;offset-inline-start:.75rem;color:var(--body-text-color);display:block;left:.75rem;position:absolute;top:50%;transform:translateY(-50%);z-index:3}.search .search-results{background-color:var(--body-background-color);border:1px solid var(--divider-color);border-radius:0 0 var(--border-radius) var(--border-radius);font-size:.875rem;max-height:400px;overflow-y:auto;position:relative;top:.25rem;width:100%;z-index:10}@media (min-width:1024px){.search .search-results{box-shadow:var(--shadow-lg);position:absolute;top:calc(100% + .25rem)}}.search .search-results[data-results=true]{padding:0}.search .search-results[data-results=false]{padding:1rem}.search .search-results:empty{display:none}.search-results__list{list-style:none;margin:0;padding:0}.search .search-results__item{-webkit-border-after:1px solid var(--lightest-background-color);border-block-end:1px solid var(--lightest-background-color);border-bottom:1px solid var(--lightest-background-color);margin:0;padding:.875rem;position:relative}.search .search-results__item:hover{background-color:var(--lightest-background-color)}.search .search-results__item:focus-within{background-color:var(--lightest-background-color)}.search .search-results__item__title{font-family:var(--text-font);font-size:var(--step-0);font-size:.875rem;margin-bottom:0}.search .search-results__item__title a{color:var(--link-color);display:block;font:inherit;padding:.25rem .75rem;text-decoration:none}.search .search-results__item__title a:hover{background-color:inherit;color:var(--link-color)}.search .search-results__item__title a:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.search-results__item__context{font-size:.875rem;margin:0;padding-left:1rem}.algolia-docsearch-suggestion--highlight{background-color:var(--color-brand);border-radius:2px;color:#fff;display:inline-block;padding:0 2px}[data-theme=dark] .algolia-docsearch-suggestion--highlight{background-color:var(--link-color);color:var(--color-neutral-900)}.alert{-webkit-margin-after:1.5rem;align-items:start;border:1px solid;border-radius:var(--border-radius);display:grid;font-size:.875rem;gap:.75rem;grid-template-columns:auto 1fr;margin-block-end:1.5rem;margin-bottom:1.5rem;padding:1rem;position:relative}.alert.alert--warning{background-color:var(--color-rose-25);color:var(--color-rose-600)}[data-theme=dark] .alert.alert--warning{background-color:var(--color-rose-900);color:var(--color-rose-300)}.alert.alert--important{background-color:var(--color-warning-25);color:var(--color-warning-600)}[data-theme=dark] .alert.alert--important{background-color:var(--color-warning-900);color:var(--color-warning-300)}.alert.alert--tip{background-color:var(--color-success-25);color:var(--color-success-600)}[data-theme=dark] .alert.alert--tip{background-color:var(--color-success-900);color: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{offset-block-start:2px;color:inherit;position:relative;top:2px}.alert__text>p{margin:0}.alert__type{-webkit-margin-after:.25rem;display:block;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}.alert--warning .alert__type{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__type{color:var(--color-rose-200)}.alert--important .alert__type{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__type{color:var(--color-warning-200)}.alert--tip .alert__type{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__type{color:var(--color-success-200)}.alert__learn-more{-webkit-margin-before:.75rem;display:block;font-weight:500;margin-block-start:.75rem;margin-top:.75rem}.alert--warning .alert__learn-more{color:var(--color-rose-700)}[data-theme=dark] .alert--warning .alert__learn-more{color:var(--color-rose-200)}.alert--important .alert__learn-more{color:var(--color-warning-700)}[data-theme=dark] .alert--important .alert__learn-more{color:var(--color-warning-200)}.alert--tip .alert__learn-more{color:var(--color-success-700)}[data-theme=dark] .alert--tip .alert__learn-more{color:var(--color-success-200)}.rule-categories{background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:3rem}.rule-categories .rule-category{background:none;border:none;margin:0;padding:1rem}@media screen and (min-width:768px){.rule-categories .rule-category:not(:first-child):after{border-left:1px solid var(--divider-color);content:"";display:block;left:0;padding:1px}}@media screen and (min-width:1440px),screen and (min-width:768px) and (max-width:1023px){.rule-categories .rule-category:not(:first-child):after{height:70%;position:absolute}}@media screen and (min-width:1024px) and (max-width:1439px){.rule-categories .rule-category:nth-child(2):after{height:70%;position:absolute}}.rule-categories .rule-category__description{flex:1 1 45ch}.rule-category{align-items:flex-start;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--step--1);gap:1rem;margin:1.5rem 0;padding:1rem;position:relative}.rule-category p{margin:0}.rule-category .rule-category__description{flex:1 1 30ch}.rule{align-items:center;background-color:var(--lightest-background-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;gap:1rem;margin:.5rem 0;padding:1rem;position:relative}.rule p:last-of-type{margin:0}.rule__content{flex:1 1 35ch}.rule__name{-webkit-margin-after:.25rem;font-size:.875rem;font-weight:500;margin-block-end:.25rem;margin-bottom:.25rem}a.rule__name{text-decoration:none}a.rule__name:hover{text-decoration:underline}a.rule__name:after{offset-block-start:0;offset-inline-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.rule__description{font-size:var(--step--1)}.rule__categories{align-items:center;border-radius:var(--border-radius);display:flex;font-size:.875rem;gap:1rem;padding:2px 4px}.rule__categories p{align-items:center;display:inline-flex;margin:0}[data-theme=dark] .rule__categories{background:var(--body-background-color)}.rule__status{-webkit-margin-start:.5rem;background:var(--color-rose-50);border-radius:var(--border-radius);color:var(--color-rose-500);display:inline-block;font-size:var(--step--1);font-weight:400;margin-left:.5rem;margin-inline-start:.5rem;padding:0 .5rem}[data-theme=dark] .rule__status{background:var(--body-background-color)}.rule__categories__type[aria-hidden=true]{opacity:.25}.related-rules__list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:start}.related-rules__list__item svg{color:inherit}.related-rules__list__item a{align-items:center;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);color:var(--headings-color);display:inline-flex;gap:.5rem;padding:.625rem;text-decoration:none}.related-rules__list__item a:hover{background-color:var(--lighter-background-color);color:var(--link-color)}a.rule-list-item+a.rule-list-item:before{content:",";display:inline-block;margin-left:5px;margin-right:5px}.eslint-social-icons{-webkit-margin-after:-1rem;margin-block-end:-1rem;margin-bottom:-1rem}.eslint-social-icons ul{-webkit-margin-start:-1rem;display:inline-flex;margin:0 0 0 -1rem;margin-inline-start:-1rem;padding:0}.eslint-social-icons ul li{align-items:center;display:inline-flex;margin:0}.eslint-social-icons ul li a{display:flex;padding:1rem .75rem}@media (min-width:800px){.hero .grid{grid-gap:2rem;align-items:center;display:grid;grid-template-columns:2fr 1fr}}.hero .grid .span-1-7{grid-column:1/2}.hero .grid .span-10-12{grid-column:2/3;justify-self:end}.hero{-webkit-border-after:1px solid var(--divider-color);background-color:var(--hero-background-color);border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color)}@media (min-width:800px){.hero{min-height:calc(285px + var(--space-xl-4xl))}}.hero .content-container{margin:0;padding:var(--space-xl-4xl) 0}.hero>.content-container{align-items:center;margin:0 auto;padding:0 calc(1rem + 1vw)}.hero--homepage .section-title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.hero--homepage .section-supporting-text{font-size:var(--step-1);margin:0;text-align:left}.hero--homepage .eslint-actions{-webkit-margin-before:3rem;font-size:var(--step-1);margin-block-start:3rem;margin-top:3rem}.theme-switcher{align-items:center;display:inline-flex;gap:.5rem;position:relative}.theme-switcher-label.theme-switcher-label{color:inherit;font:inherit;font-family:var(--text-font);margin:0}.theme-switcher__buttons{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex}.theme-switcher__button{align-items:center;box-shadow:var(--shadow-xs);color:inherit;display:inline-flex;flex:0;gap:.25rem;margin:0;padding:.625rem .875rem}.theme-switcher__button:first-of-type{-webkit-border-end:.5px solid var(--border-color);border-inline-end:.5px solid var(--border-color);border-right:.5px solid var(--border-color)}.theme-switcher__button:last-of-type{-webkit-border-start:.5px solid var(--border-color);border-inline-start:.5px solid var(--border-color);border-left:.5px solid var(--border-color)}.theme-switcher__button .theme-switcher__icon{color:var(--icon-color)}.theme-switcher__button[aria-pressed=true],.theme-switcher__button[aria-pressed=true] .theme-switcher__icon,.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:hover .theme-switcher__icon,.theme-switcher__button[aria-pressed=false]:hover .theme-switcher__icon{color:var(--link-color)}.version-switcher{-webkit-margin-after:.5rem;margin-block-end:.5rem;margin-bottom:.5rem}.switcher--language{align-items:center;display:flex;flex-wrap:wrap;font-size:inherit;gap:.25rem .5rem;justify-content:center;padding:0;position:relative;width:100%}@media (min-width:800px){.switcher--language{justify-content:flex-start}}.switcher--language .label__text{flex:1 0 10ch}.switcher--language .switcher__select{flex:1 0 12rem}@media (max-width:800px){.switcher--language .switcher__select{max-width:250px}}.language-switcher{display:inline-flex}.docs-index .docs-index__list a{-webkit-margin-start:-.75rem;align-items:center;border-radius:var(--border-radius);color:var(--headings-color);display:flex;justify-content:space-between;margin-left:-.75rem;margin-inline-start:-.75rem;padding:.5rem .75rem;text-decoration:none}.docs-index .docs-index__list a:hover,.docs-index .docs-index__list a[aria-current=true]{background-color:var(--docs-lightest-background-color);color:var(--link-color)}@media (max-width:1023px){.docs-index .docs-index__list a{-webkit-margin-start:0;margin-left:0;margin-inline-start:0;padding:.5rem 1rem}}.docs-index__item{margin:0}.docs-index__item ul ul{padding-left:.75rem}.docs-index__item[data-has-children]{margin-bottom:.5rem}.docs-index__list>.docs-index__item{-webkit-margin-before:1.5rem;margin-block-start:1.5rem;margin-top:1.5rem}.docs-index__list>.docs-index__item>a{color:var(--icon-color);font-size:.875rem;font-weight:500;letter-spacing:1px;text-transform:uppercase}.index-js .index-icon{color:inherit;display:block!important;height:.5rem;transform-origin:50% 50%;transition:all .1s linear;width:.75rem}.index-js [aria-expanded=true] .index-icon{transform:rotate(180deg)}.index-js ul[aria-hidden=true]{display:none}.index-js ul[aria-hidden=false]{display:block}.docs__index__panel[data-open=false]{display:none}@media (min-width:1024px){.docs__index__panel[data-open=false]{display:block}}.docs__index__panel[data-open=true]{display:block}@media (min-width:1024px){.docs__index__panel[data-open=true]{display:block}}.docs-index-toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.docs-index-toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.docs-index-toggle{display:none}}.docs-index-toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.docs-index-toggle #ham-bottom,.docs-index-toggle #ham-middle,.docs-index-toggle #ham-top{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)}.eslint-actions{display:inline-flex;flex-direction:column;flex-wrap:wrap;gap:1rem;width:100%}@media (min-width:640px){.eslint-actions{flex-direction:row}}.index{-webkit-margin-after:4rem;margin-block-end:4rem;margin-bottom:4rem}.index__item{margin:0}.index__item a{border-radius:var(--border-radius);color:inherit;display:block;font-size:var(--step-0);padding:.625rem .875rem;text-decoration:none}.index__item a:hover{color:var(--link-color)}.index__item a[aria-current=page]{background-color:var(--lightest-background-color);color:var(--link-color);font-weight:500}.index__toggle{align-items:center;background-color:var(--secondary-button-background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 2px rgba(16,24,40,.1);color:var(--secondary-button-text-color);cursor:pointer;display:flex;font-weight:500;gap:.5rem;justify-content:space-between;padding:.75rem 1.125rem;width:100%}.index__toggle:hover{background-color:var(--secondary-button-hover-color)}@media (min-width:1024px){.index__toggle{display:none}}.index__toggle svg{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;color:inherit;height:1.5em;width:1.5em}.index__toggle #ham-bottom,.index__toggle #ham-middle,.index__toggle #ham-top{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 (min-width:1024px){.index__list[data-open=false]{display:block}}.index__list[data-open=true]{display:block}@media (min-width:1024px){.index__list[data-open=true]{display:block}}.c-tabs pre{-webkit-margin-before:0;margin-block-start:0;margin-top:0}.js-tabs .c-tabs__tablist{display:flex;justify-content:start}.c-tabs__tab{align-items:center;background:none;border:none;border-radius:var(--border-radius) var(--border-radius) 0 0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;font-size:var(--step-0);font-weight:500;justify-content:center;line-height:inherit;margin:0;padding:.75rem 1.125rem;transition:background-color .2s linear,border-color .2s linear}.c-tabs__tab:hover{color:var(--link-color)}.c-tabs__tab[aria-selected=true]{background-color:var(--lightest-background-color);color:var(--link-color)}.c-tabs__tabpanel{-webkit-margin-after:2rem;background-color:var(--lightest-background-color);border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);margin-block-end:2rem;margin-bottom:2rem}.js-tabs .c-tabs__tabpanel{-webkit-margin-after:0;margin-block-end:0;margin-bottom:0}.c-tabs__tabpanel__title{-webkit-margin-after:1.5rem;margin-block-end:1.5rem;margin-bottom:1.5rem}.js-tabs .c-tabs__tabpanel__title{display:none}.resource{-webkit-margin-after:.5rem;align-items:stretch;background-color:var(--lightest-background-color);border:1px solid var(--divider-color);border-radius:var(--border-radius);display:flex;margin-block-end:.5rem;margin-bottom:.5rem;overflow:hidden;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%;-o-object-fit:contain;object-fit:contain;width:100%}.resource__content{align-self:center;flex:4;padding:.75rem}.resource__title{color:var(--headings-color);font-weight:500;margin-bottom:.125rem;text-decoration:none}.resource__title:after{offset-inline-start:0;offset-block-start:0;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.resource__domain,.resource__domain a{color:var(--body-text-color);font-size:.875rem;text-decoration:none}.resource__icon{align-self:center;color:var(--headings-color);margin:1rem}@media (max-width:800px){.hero-ad{display:none}}#carbonads *{margin:initial;padding:initial}#carbonads{background-color:var(--body-background-color);border:1px solid var(--border-color);border-radius:4px;border-radius:var(--border-radius);box-shadow:0 1px 4px 1px rgba(0,0,0,.1);display:inline-block;font-size:1rem;margin:2rem 0;overflow:hidden;padding:.6em}.docs-main #carbonads{margin:0 0 2rem}@media (max-width:800px){#carbonads{display:none!important}}.jumbotron #carbonads{background-color:hsla(0,0%,70%,.15);border:1px solid rgba(110,102,153,.6)}#carbonads a{color:inherit;font-weight:500;text-decoration:none}#carbonads a:hover{color:var(--link-color);text-decoration:none}.jumbotron #carbonads a{color:#eee}.jumbotron #carbonads a:hover{color:#ccc}#carbonads span{display:block;overflow:hidden;position:relative}#carbonads .carbon-wrap{display:flex;flex-direction:column;max-width:130px}#carbonads .carbon-img img{display:block}#carbonads .carbon-text{font-size:.7em;font-weight:500;line-height:1rem;margin-top:10px;text-align:left}#carbonads .carbon-poweredby{display:block;font-size:.5rem;font-weight:500;letter-spacing:.1ch;line-height:1;margin-top:10px;text-transform:uppercase}@media only screen and (min-width:320px) and (max-width:759px){#carbonads{font-size:12px;margin-top:0}#carbonads .carbon-wrap{display:flex;flex-direction:row;max-width:330px}#carbonads .carbon-text{font-size:14px;margin:0 0 14px 10px;text-align:left}#carbonads .carbon-poweredby{bottom:0;font-size:8px;left:142px;position:absolute}}@media (min-width:1024px){.grid{grid-gap:2rem;align-items:start;display:grid;grid-template-columns:repeat(12,1fr)}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}[hidden]{display:none!important}@media (min-width:1024px){.mobile-only{display:none}}@media (max-width:1023px){.desktop-only{display:none}}.text.text{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{grid-column:1/-1;text-align:center}.text-dark{color:var(--headings-color)}.divider{-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-bottom: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} \ No newline at end of file diff --git a/docs/_site/assets/css/syntax-highlighter.css b/docs/_site/assets/css/syntax-highlighter.css deleted file mode 100644 index ed187ada142..00000000000 --- a/docs/_site/assets/css/syntax-highlighter.css +++ /dev/null @@ -1 +0,0 @@ -code[class*=language-],pre[class*=language-]{word-wrap:normal;font-family:var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;font-variant-ligatures:none;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{background-color:var(--lightest-background-color);border-radius:var(--border-radius);color:var(--color-neutral-900);margin:1.5rem 0;overflow:auto;padding:1.5rem}[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)}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6e7f8e}[data-theme=dark] .token.cdata,[data-theme=dark] .token.comment,[data-theme=dark] .token.doctype,[data-theme=dark] .token.prolog{color:#8e9fae}.token.namespace{opacity:.7}.token.atrule,.token.attr-name,.token.attr-value,.token.builtin,.token.char,.token.inserted,.token.keyword,.token.selector,.token.string{color:var(--link-color)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre{counter-reset:lineNumber}code .highlight-line{font-variant-ligatures:none}code .highlight-line:before{-webkit-margin-end:1.2em;-webkit-padding-end:1.2em;color:var(--icon-color);content:counter(lineNumber);counter-increment:lineNumber;display:inline-block;font-variant-numeric:tabular-nums;margin-right:1.2em;margin-inline-end:1.2em;padding-right:1.2em;padding-inline-end:1.2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.4em} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/spacing.css b/docs/_site/assets/css/tokens/spacing.css deleted file mode 100644 index f39eea33a0b..00000000000 --- a/docs/_site/assets/css/tokens/spacing.css +++ /dev/null @@ -1 +0,0 @@ -:root{--fluid-min-width:320;--fluid-max-width:1023;--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:1024px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}: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,16));--fc-s-max:(var(--f-0-max,16));--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);--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));--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));--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));--space-l-3xl:calc((var(--fc-l-min)/16)*1rem + (var(--fc-3xl-max) - var(--fc-l-min))*var(--fluid-bp));--space-s-l:calc((var(--fc-s-min)/16)*1rem + (var(--fc-l-max) - var(--fc-s-min))*var(--fluid-bp))} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/themes.css b/docs/_site/assets/css/tokens/themes.css deleted file mode 100644 index 0614ad9b496..00000000000 --- a/docs/_site/assets/css/tokens/themes.css +++ /dev/null @@ -1 +0,0 @@ -:root{--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;--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){:root{--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}}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} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/typography.css b/docs/_site/assets/css/tokens/typography.css deleted file mode 100644 index b24a2e3fac4..00000000000 --- a/docs/_site/assets/css/tokens/typography.css +++ /dev/null @@ -1 +0,0 @@ -: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));--mono-font:"Mono Punctuators","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"} \ No newline at end of file diff --git a/docs/_site/assets/css/tokens/ui.css b/docs/_site/assets/css/tokens/ui.css deleted file mode 100644 index 0a9ebda3a1d..00000000000 --- a/docs/_site/assets/css/tokens/ui.css +++ /dev/null @@ -1 +0,0 @@ -:root{--shadow-lg:0 12px 16px -4px rgba(16,24,40,.1),0 4px 6px -2px rgba(16,24,40,.05);--shadow-xs:0 1px 2px rgba(16,24,40,.05);--border-radius:.5rem} \ No newline at end of file diff --git a/docs/_site/assets/css/utilities.css b/docs/_site/assets/css/utilities.css deleted file mode 100644 index f8c3d4aa310..00000000000 --- a/docs/_site/assets/css/utilities.css +++ /dev/null @@ -1 +0,0 @@ -@media (min-width:1024px){.grid{grid-gap:2rem;align-items:start;display:grid;grid-template-columns:repeat(12,1fr)}}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}[hidden]{display:none!important}@media (min-width:1024px){.mobile-only{display:none}}@media (max-width:1023px){.desktop-only{display:none}}.text.text{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{grid-column:1/-1;text-align:center}.text-dark{color:var(--headings-color)}.divider{-webkit-border-after:1px solid var(--divider-color);border-block-end:1px solid var(--divider-color);border-bottom: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} \ No newline at end of file diff --git a/docs/_site/assets/css/versions.css b/docs/_site/assets/css/versions.css deleted file mode 100644 index f45b8d52b86..00000000000 --- a/docs/_site/assets/css/versions.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.versions-list{font-size:var(--step-1);margin:0;padding:0}.versions-list li{margin:0}.versions-list li:last-of-type a{-webkit-border-after:0;border-block-end:0;border-bottom:0}.versions-list a{-webkit-border-after:1px solid var(--divider-color);align-items:center;border-block-end:1px solid var(--divider-color);border-bottom:1px solid var(--divider-color);color:var(--link-color);display:block;display:flex;padding:1rem .5rem;text-decoration:none;width:100%}.versions-list a[data-current=true]{color:var(--link-color);font-weight:500}.versions-list a[data-current=true]:after{content:"✔️"}.versions-list a:hover{background-color:var(--lightest-background-color)}.versions-section .versions-list{-webkit-border-start:4px solid var(--tab-border-color);-webkit-padding-start:1rem;border-inline-start:4px solid var(--tab-border-color);border-left:4px solid var(--tab-border-color);font-size:var(--step-1);padding-left:1rem;padding-inline-start:1rem} \ No newline at end of file From 120924890e5efa9223d516f77d8634dba7125662 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 12 Nov 2022 17:14:04 -0500 Subject: [PATCH 7/9] docs: don't copy SCSS files to built site --- docs/.eleventy.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 1bd1de1af2f..66ed897adeb 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -325,7 +325,9 @@ module.exports = function(eleventyConfig) { `); - eleventyConfig.addWatchTarget("./src/assets/"); + eleventyConfig.addWatchTarget("./src/assets/fonts/"); + eleventyConfig.addWatchTarget("./src/assets/images/"); + eleventyConfig.addWatchTarget("./src/assets/js/"); //------------------------------------------------------------------------------ // File PassThroughs @@ -335,7 +337,9 @@ module.exports = function(eleventyConfig) { "./src/static": "/" }); - eleventyConfig.addPassthroughCopy("./src/assets/"); + eleventyConfig.addPassthroughCopy("./src/assets/fonts/"); + eleventyConfig.addPassthroughCopy("./src/assets/images/"); + eleventyConfig.addPassthroughCopy("./src/assets/js/"); eleventyConfig.addPassthroughCopy({ "./src/content/**/*.png": "/assets/images" @@ -453,7 +457,8 @@ module.exports = function(eleventyConfig) { req.url += ".html"; } return next(); - } + }, + files: "./_site/css/**/*.css" }); /* From 9fb085288a58c08f6a88ae22ae3531aee92347e3 Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Sat, 12 Nov 2022 17:14:40 -0500 Subject: [PATCH 8/9] docs: add watch target for PostCSS --- docs/package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/package.json b/docs/package.json index 60b3294520b..edc64cdc05e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,12 +10,13 @@ "files": [], "scripts": { "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", - "watch:sass": "sass --watch --poll src/assets/scss:_site/assets/css", + "watch:postcss": "postcss src/assets/css -d _site/assets/css --watch --poll", + "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css --no-source-map", "watch:eleventy": "eleventy --serve --port=2023", - "build:postcss": "postcss _site/assets/css --replace", - "build:sass": "sass src/assets/scss:_site/assets/css --no-source-map", + "build:postcss": "postcss src/assets/css -d _site/assets/css", + "build:sass": "sass src/assets/scss:src/assets/css --no-source-map", "build:eleventy": "npx @11ty/eleventy", - "start": "npm-run-all build:sass --parallel watch:*", + "start": "npm-run-all build:sass build:postcss --parallel watch:*", "build": "npm-run-all build:sass build:postcss build:eleventy images", "lint:scss": "stylelint \"**/*.{scss,html}\"", "lint:fix:scss": "npm run lint:scss -- --fix" From c5bf2fad56f5df02a97aad9ef97650869c0cc38c Mon Sep 17 00:00:00 2001 From: Nick Schonning Date: Wed, 4 Jan 2023 22:38:23 -0500 Subject: [PATCH 9/9] fix: revert to old passthrough --- docs/.eleventy.js | 11 +++-------- docs/package.json | 4 ++-- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 66ed897adeb..1bd1de1af2f 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -325,9 +325,7 @@ module.exports = function(eleventyConfig) { `); - eleventyConfig.addWatchTarget("./src/assets/fonts/"); - eleventyConfig.addWatchTarget("./src/assets/images/"); - eleventyConfig.addWatchTarget("./src/assets/js/"); + eleventyConfig.addWatchTarget("./src/assets/"); //------------------------------------------------------------------------------ // File PassThroughs @@ -337,9 +335,7 @@ module.exports = function(eleventyConfig) { "./src/static": "/" }); - eleventyConfig.addPassthroughCopy("./src/assets/fonts/"); - eleventyConfig.addPassthroughCopy("./src/assets/images/"); - eleventyConfig.addPassthroughCopy("./src/assets/js/"); + eleventyConfig.addPassthroughCopy("./src/assets/"); eleventyConfig.addPassthroughCopy({ "./src/content/**/*.png": "/assets/images" @@ -457,8 +453,7 @@ module.exports = function(eleventyConfig) { req.url += ".html"; } return next(); - }, - files: "./_site/css/**/*.css" + } }); /* diff --git a/docs/package.json b/docs/package.json index edc64cdc05e..decba5ad03b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,10 +10,10 @@ "files": [], "scripts": { "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'", - "watch:postcss": "postcss src/assets/css -d _site/assets/css --watch --poll", + "watch:postcss": "postcss src/assets/css -d src/assets/css --watch --poll", "watch:sass": "sass --watch --poll src/assets/scss:src/assets/css --no-source-map", "watch:eleventy": "eleventy --serve --port=2023", - "build:postcss": "postcss src/assets/css -d _site/assets/css", + "build:postcss": "postcss src/assets/css -d src/assets/css", "build:sass": "sass src/assets/scss:src/assets/css --no-source-map", "build:eleventy": "npx @11ty/eleventy", "start": "npm-run-all build:sass build:postcss --parallel watch:*",