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 787d182444..79155e14bf 100644 --- a/site/src/components/head/Stylesheet.astro +++ b/site/src/components/head/Stylesheet.astro @@ -12,4 +12,4 @@ const { direction } = Astro.props - + diff --git a/site/src/components/header/Navigation.astro b/site/src/components/header/Navigation.astro index f5313d9b71..3151e7cca8 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 0a440870c0..d518fbbe15 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 34f67faa24..1e056be983 100644 --- a/site/src/components/shortcodes/Example.astro +++ b/site/src/components/shortcodes/Example.astro @@ -69,13 +69,13 @@ 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 4a294f7bd6..16479ad643 100644 --- a/site/src/content/docs/components/alerts.mdx +++ b/site/src/content/docs/components/alerts.mdx @@ -10,7 +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). - ` 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 9877f72177..e1e44b4d75 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -394,9 +394,10 @@ .highlight-toolbar { background-color: var(--bd-pre-bg); + border-bottom: 1px solid var(--bs-border-color); } -.bd-scss-docs { +.bd-file-ref { .highlight-toolbar { @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 7a4aa39cc4..9c8d12da65 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/_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/_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";