Update Icons to Bootstrap v5.3.0-alpha1 (#1544)

* Drop usage of large SVG sprite on homepage and in copy buttons, replacing them with the Icons font * partials/icons.html: fix path to SVG file * Attempt to fix line-height discrepancy * Restore styles * Update to v5.3.0-alpha1 * Fix tests * Fix tests again * Broken links Co-authored-by: XhmikosR <[email protected]>
twbs · Dec 27, 2022 · e604ea6 · e604ea6
1 parent 9b8db82
commit e604ea6
Show file tree

Hide file tree

Showing 17 changed files with 412 additions and 167 deletions.
diff --git a/config.yml b/config.yml
@@ -46,8 +46,8 @@ module:
       target:           static/assets/font
     - source:           node_modules/bootstrap/scss
       target:           assets/scss/bootstrap
-    - source:           node_modules/bootstrap/dist/js/bootstrap.min.js
-      target:           assets/js/vendor/bootstrap.min.js
+    - source:           node_modules/bootstrap/dist/js/bootstrap.bundle.min.js
+      target:           assets/js/vendor/bootstrap.bundle.min.js
     - source:           node_modules/clipboard/dist/clipboard.min.js
       target:           assets/js/vendor/clipboard.min.js
     - source:           node_modules/list.js/dist/list.min.js
@@ -58,13 +58,15 @@ params:
   social_image_path:    /assets/img/bootstrap-icons-social.png
 
   version:              "1.10.2"
-  docs_version:         "5.2"
+  docs_version:         "5.3"
 
   main:                 "https://getbootstrap.com"
   github_org:           "https://github.com/twbs"
-  repo:                 "https://github.com/twbs/icons"
+  repo:                 "https://github.com/twbs/bootstrap"
   twitter:              "getbootstrap"
-  blog:                 "https://blog.getbootstrap.com"
-  themes:               "https://themes.getbootstrap.com"
   opencollective:       "https://opencollective.com/bootstrap"
+  blog:                 "https://blog.getbootstrap.com/"
+  themes:               "https://themes.getbootstrap.com/"
+  icons:                "https://icons.getbootstrap.com/"
+  swag:                 "https://cottonbureau.com/people/bootstrap"
   icons_figma:          "https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons"
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
@@ -5,7 +5,7 @@
     "node": false
   },
   "parserOptions": {
-    "ecmaVersion": 5,
+    "ecmaVersion": 6,
     "sourceType": "script"
   },
   "extends": [

diff --git a/docs/assets/js/color-modes.js b/docs/assets/js/color-modes.js
@@ -0,0 +1,62 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(function () {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
@@ -5,7 +5,7 @@
   margin-right: auto;
   margin-left: auto;
   overflow: auto;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);
   border-radius: .25rem;
 
   @media (min-width: 992px) {
@@ -30,11 +30,11 @@
 .carbon-text,
 .carbon-poweredby {
   display: block;
-  color: #6c757d;
+  color: var(--bs-body-color);
 
   &:hover,
   &:focus {
-    color: #343a40;
+    color: var(--bs-body-color);
     text-decoration: none;
   }
 }

diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
@@ -24,12 +24,12 @@
   display: block;
   padding: .5em .75em .625em;
   line-height: 1;
-  color: var(--bs-gray-900);
-  background-color: var(--bs-gray-100);
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
   border: 0;
   border-radius: .25rem;
 
   &:hover {
-    color: var(--bs-primary);
+    color: var(--bs-link-hover-color);
   }
 }
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
@@ -3,33 +3,14 @@
 //
 
 .bd-footer {
-  font-size: .875rem;
-  color: var(--bs-gray-600);
-
   a {
-    font-weight: 600;
-    color: var(--bs-gray-700);
+    color: var(--bs-body-color);
+    text-decoration: none;
 
     &:hover,
     &:focus {
-      color: var(--bs-primary);
-    }
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
+      color: var(--bs-link-hover-color);
+      text-decoration: underline;
     }
   }
 }
diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
@@ -4,6 +4,11 @@
   background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 
+  .bi {
+    width: 1em;
+    height: 1em;
+  }
+
   .navbar-toggler {
     padding: 0;
     margin-right: -.5rem;
@@ -61,4 +66,44 @@
       box-shadow: $box-shadow-lg;
     }
   }
+
+  .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;
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .active {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+}
+
+@include color-mode(dark) {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+  }
 }