From 88fbaa907375f416a0e3ed3aeec5b50f0fb1905e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 2 Apr 2025 10:03:10 -0700 Subject: [PATCH] Revamp some docs layout --- .browserslistrc | 10 +- package.json | 12 -- scss/layout/_grid.scss | 5 + site/src/components/DocsSidebar.astro | 6 +- site/src/components/footer/Footer.astro | 16 +-- site/src/components/head/Stylesheet.astro | 5 +- site/src/components/header/Navigation.astro | 1 - site/src/components/shortcodes/Code.astro | 9 +- site/src/components/shortcodes/Example.astro | 2 +- site/src/components/shortcodes/ScssDocs.astro | 4 +- site/src/content/docs/components/alerts.mdx | 16 +-- site/src/content/docs/layout/breakpoints.mdx | 12 +- site/src/layouts/DocsLayout.astro | 124 ++++++++++++++---- site/src/layouts/partials/Icons.astro | 3 + site/src/libs/utils.ts | 4 +- site/src/scss/_ads.scss | 2 +- site/src/scss/_callouts.scss | 62 ++++----- site/src/scss/_clipboard-js.scss | 62 ++++----- site/src/scss/_color-contrast.scss | 51 +++++++ site/src/scss/_component-examples.scss | 9 +- site/src/scss/_masthead.scss | 4 +- site/src/scss/_navbar.scss | 31 ----- site/src/scss/_sidebar.scss | 15 ++- site/src/scss/_syntax.scss | 1 + site/src/scss/_variables.scss | 8 +- site/src/scss/docs.scss | 2 + 26 files changed, 276 insertions(+), 200 deletions(-) create mode 100644 site/src/scss/_color-contrast.scss diff --git a/.browserslistrc b/.browserslistrc index cddd230052..dcce24143c 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -3,10 +3,10 @@ >= 0.5% last 2 major versions not dead -Chrome >= 60 -Firefox >= 60 -Firefox ESR -iOS >= 12 -Safari >= 12 +Chrome >= 120 +Firefox >= 121 +iOS >= 15.6 +Safari >= 15.6 not Explorer <= 11 +Samsung >= 23 not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533) diff --git a/package.json b/package.json index 39e2fb039d..38592bad77 100644 --- a/package.json +++ b/package.json @@ -188,18 +188,6 @@ "scss/**/*.scss", "!scss/tests/**" ], - "browserslist": [ - ">= 0.5%", - "last 2 major versions", - "not dead", - "Chrome >= 120", - "Firefox >= 121", - "iOS >= 15.6", - "Safari >= 15.6", - "not Explorer <= 11", - "Samsung >= 23", - "not kaios <= 2.5" - ], "jspm": { "registry": "npm", "main": "js/bootstrap", diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 17fac456c7..89a5e1ff5a 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -29,6 +29,7 @@ @each $breakpoint in map.keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); + $infix: if($infix == "", "", "-" + $infix); @include media-breakpoint-up($breakpoint, $breakpoints) { @if $grid-columns > 0 { @@ -79,7 +80,11 @@ .grid-cols-4 { --#{$prefix}columns: 4; } + .grid-cols-5 { + --#{$prefix}columns: 5; + } .grid-cols-6 { --#{$prefix}columns: 6; } + } diff --git a/site/src/components/DocsSidebar.astro b/site/src/components/DocsSidebar.astro index 1282ed7026..c36ea79bc8 100644 --- a/site/src/components/DocsSidebar.astro +++ b/site/src/components/DocsSidebar.astro @@ -17,7 +17,7 @@ const sidebar = getData('sidebar') return (
  • - {group.icon && ( + {/* {group.icon && ( - )} + )} */} {group.title} -
    +
    Links
    -
    +
    Guides
    -
    +
    Projects
    • @@ -70,7 +70,7 @@ import { getVersionedDocsPath } from '@libs/path'
    -
    +
    Community
    • diff --git a/site/src/components/head/Stylesheet.astro b/site/src/components/head/Stylesheet.astro index d0203893a4..0a64de1f06 100644 --- a/site/src/components/head/Stylesheet.astro +++ b/site/src/components/head/Stylesheet.astro @@ -1,5 +1,5 @@ --- -import { getVersionedBsCssProps } from '@libs/bootstrap' +// import { getVersionedBsCssProps } from '@libs/bootstrap' import type { Layout } from '@libs/layout' interface Props { @@ -10,4 +10,5 @@ interface Props { const { direction } = Astro.props --- - + + diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro index e33c30069c..43d8fb7521 100644 --- a/site/src/components/header/Navigation.astro +++ b/site/src/components/header/Navigation.astro @@ -85,7 +85,6 @@ const { addedIn, layout, title } = Astro.props Examples Icons - Themes Blog
    diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro index 231002a50b..0d75c52fe1 100644 --- a/site/src/components/shortcodes/Code.astro +++ b/site/src/components/shortcodes/Code.astro @@ -33,9 +33,14 @@ interface Props { * This takes precedence over the `code` prop. */ filePath?: string + /** + * The theme to use for the code block. + * @see https://getbootstrap.com/docs/6.0/customize/color-scheme/ + */ + theme?: string } -const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props +const { class: className, code, containerClass, fileMatch, filePath, lang, theme } = Astro.props let codeToDisplay = filePath ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8') @@ -144,7 +149,7 @@ if (filePath && fileMatch && codeToDisplay) {
    ) } -
    +
    { codeToDisplay && lang ? ( diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro index 7bfd41417c..34d4b511c1 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -80,7 +80,7 @@ const simplifiedMarkup = markup showMarkup && ( <> {showPreview && ( -
    +
    {lang}
    diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx index a173cfa895..3503eddb46 100644 --- a/site/src/content/docs/components/alerts.mdx +++ b/site/src/content/docs/components/alerts.mdx @@ -10,11 +10,7 @@ import { getData } from '@libs/data' Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). - -**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). - - - ` diff --git a/site/src/layouts/partials/Icons.astro b/site/src/layouts/partials/Icons.astro index 408ac4a181..679256882e 100644 --- a/site/src/layouts/partials/Icons.astro +++ b/site/src/layouts/partials/Icons.astro @@ -7,6 +7,9 @@ + + + :last-child { + margin-bottom: 0; + } + + + .bd-callout { + margin-top: -.25rem; + } + + .highlight { + background-color: rgba($black, .05); + } } - > :last-child { - margin-bottom: 0; - } - - + .bd-callout { - margin-top: -.25rem; - } - - .highlight { - background-color: rgba($black, .05); - } -} - -// Variations -@each $variant in $bd-callout-variants { - .bd-callout-#{$variant} { - --bd-callout-color: var(--bs-#{$variant}-text); - --bd-callout-bg: var(--bs-#{$variant}-bg-subtle); - --bd-callout-border: var(--bs-#{$variant}-border); + // Variations + @each $variant in $bd-callout-variants { + .bd-callout-#{$variant} { + --bd-callout-color: var(--bs-#{$variant}-text); + --bd-callout-bg: var(--bs-#{$variant}-bg-subtle); + --bd-callout-border: var(--bs-#{$variant}-border); + } } } diff --git a/site/src/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss index a4c71c8ccf..8bee4426be 100644 --- a/site/src/scss/_clipboard-js.scss +++ b/site/src/scss/_clipboard-js.scss @@ -5,43 +5,45 @@ // // JS-based `Copy` buttons for code snippets. -.bd-clipboard, -.bd-edit { - position: relative; - display: none; - float: right; +@layer custom { + .bd-clipboard, + .bd-edit { + position: relative; + display: none; + float: right; - + .highlight { - margin-top: 0; + + .highlight { + margin-top: 0; + } + + @include media-breakpoint-up(md) { + display: block; + } } - @include media-breakpoint-up(md) { + .btn-clipboard, + .btn-edit { display: block; - } -} + padding: .5em; + line-height: 1; + color: var(--bs-body-color); + background-color: var(--bd-pre-bg); + border: 0; + @include border-radius(.25rem); -.btn-clipboard, -.btn-edit { - display: block; - padding: .5em; - line-height: 1; - color: var(--bs-body-color); - background-color: var(--bd-pre-bg); - border: 0; - @include border-radius(.25rem); + &:hover { + color: var(--bs-link-hover-color); + } - &:hover { - color: var(--bs-link-hover-color); + &:focus { + z-index: 3; + } } - &:focus { - z-index: 3; + .btn-clipboard { + position: relative; + z-index: 2; + margin-top: 1.25rem; + margin-right: .75rem; } } - -.btn-clipboard { - position: relative; - z-index: 2; - margin-top: 1.25rem; - margin-right: .75rem; -} diff --git a/site/src/scss/_color-contrast.scss b/site/src/scss/_color-contrast.scss new file mode 100644 index 0000000000..ce242a7df5 --- /dev/null +++ b/site/src/scss/_color-contrast.scss @@ -0,0 +1,51 @@ +// Color contrast +// See https://github.com/twbs/bootstrap/pull/30168 + +// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255) +// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern +$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; + +@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) { + $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000; + $max-ratio: 0; + $max-ratio-color: null; + + @each $color in $foregrounds { + $contrast-ratio: contrast-ratio($background, $color); + @if $contrast-ratio > $min-contrast-ratio { + @return $color; + } @else if $contrast-ratio > $max-ratio { + $max-ratio: $contrast-ratio; + $max-ratio-color: $color; + } + } + + @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; + + @return $max-ratio-color; +} + +@function contrast-ratio($background, $foreground: $color-contrast-light) { + $l1: luminance($background); + $l2: luminance(opaque($background, $foreground)); + + @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05)); +} + +// Return WCAG2.2 relative luminance +// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance +// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio +@function luminance($color) { + $rgb: ( + "r": red($color), + "g": green($color), + "b": blue($color) + ); + + @each $name, $value in $rgb { + $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1)); + $rgb: map-merge($rgb, ($name: $value)); + } + + @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722); +} diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 63b69142c1..eed4c5e185 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -380,17 +380,12 @@ .highlight-toolbar { background-color: var(--bd-pre-bg); - - + .highlight { - @include border-top-radius(0); - } + border-bottom: 1px solid var(--bs-border-color); } .bd-file-ref { .highlight-toolbar { - @include media-breakpoint-up(md) { - @include border-top-radius(calc(var(--bs-border-radius) - 1px)); - } + @include border-top-radius(calc(var(--bs-border-radius) + 1px)); } } diff --git a/site/src/scss/_masthead.scss b/site/src/scss/_masthead.scss index 314080cb19..b009486f26 100644 --- a/site/src/scss/_masthead.scss +++ b/site/src/scss/_masthead.scss @@ -10,13 +10,11 @@ .bd-masthead { // --bd-pink: #{$pink}; padding: 3rem 0; - // stylelint-disable // background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)), // radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary), transparent)), // radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent), transparent)), // radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet), transparent)), - // radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent)); - // stylelint-enable + // radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink), transparent)); h1 { --bs-heading-color: var(--bs-emphasis-color); diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss index 7c6ed299b2..fb4882a939 100644 --- a/site/src/scss/_navbar.scss +++ b/site/src/scss/_navbar.scss @@ -71,41 +71,10 @@ color: $white; } -<<<<<<< HEAD - .offcanvas-lg { - background-color: var(--bd-violet-bg); - border-left: 0; - - @include media-breakpoint-down(lg) { - box-shadow: var(--bs-box-shadow-lg); - } - } - - .dropdown-toggle { - &:focus:not(:focus-visible) { - outline: 0; - } - } - - .dropdown-menu { - --bs-dropdown-min-width: 12rem; - --bs-dropdown-padding-x: .25rem; - --bs-dropdown-padding-y: .25rem; - --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); - --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1); - @include rfs(.875rem, --bs-dropdown-font-size); - @include font-size(.875rem); - @include border-radius(.5rem); - box-shadow: $dropdown-box-shadow; - - li + li { - margin-top: .125rem; -======= &.active { font-weight: 600; color: $white; } ->>>>>>> 9c2140328 (fix some docs Sass) } .navbar-nav-svg { diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss index b92e706370..c38d4ccafd 100644 --- a/site/src/scss/_sidebar.scss +++ b/site/src/scss/_sidebar.scss @@ -25,7 +25,8 @@ } .bd-links-heading { - color: var(--bs-emphasis-color); + padding-inline-start: .5rem; + color: var(--bs-fg-0); } .bd-links-nav { @@ -48,21 +49,21 @@ } .bd-links-link { - padding: .1875rem .5rem; + padding: .375rem .5rem; margin-top: .125rem; - margin-left: 1.125rem; - color: var(--bs-body-color); + line-height: 20px; + color: var(--bs-fg-1); text-decoration: if($link-decoration == none, null, none); &:hover, &:focus, &.active { - color: var(--bs-emphasis-color); + color: var(--bs-fg-0); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: var(--bd-sidebar-link-bg); + background-color: var(--bs-bg-1); } &.active { - font-weight: 600; + font-weight: 500; } } diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss index d1bf33a0b2..16857588d6 100644 --- a/site/src/scss/_syntax.scss +++ b/site/src/scss/_syntax.scss @@ -1,3 +1,4 @@ +@use "../../../scss/variables" as *; @use "../../../scss/config" as *; @use "../../../scss/colors" as *; @use "../../../scss/mixins/color-mode" as *; diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss index 370ea492ee..73b67ba0db 100644 --- a/site/src/scss/_variables.scss +++ b/site/src/scss/_variables.scss @@ -13,8 +13,7 @@ $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; @layer custom { - :root, - [data-bs-theme="light"] { + :root { --bd-purple: #{$bd-purple}; --bd-violet: #{$bd-violet}; --bd-accent: #{$bd-accent}; @@ -23,11 +22,12 @@ $bd-callout-variants: info, warning, danger !default; // --bd-pink-rgb: #{to-rgb($pink-500)}; // --bd-teal-rgb: #{to-rgb($teal-500)}; --bd-violet-bg: var(--bd-violet); - --bd-toc-color: var(--bd-violet); + --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300)); --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%); --bd-callout-link: #{$blue-600}; - --bd-callout-code-color: #{$pink-600}; + --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300)); --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%)); + --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1)); } // @include color-mode(dark, true) { diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss index 9758ad40a9..72ba90217f 100644 --- a/site/src/scss/docs.scss +++ b/site/src/scss/docs.scss @@ -22,6 +22,8 @@ // // Happy Bootstrapping! +@use "../../../scss/bootstrap" as *; + // Load docs components @use "variables"; @use "navbar";