@coreui/coreui 4.0.4 → 4.1.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@coreui/coreui",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team",
-  "version": "4.0.4",
+  "version": "4.1.1",
   "config": {
-    "version_short": "4.0"
+    "version_short": "4.1"
   },
   "keywords": [
     "css",
@@ -19,53 +19,51 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.0.4",
+    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.1.1",
     "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
-    "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
+    "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-lint-vars": "fusv scss/ docs/assets/scss/",
-    "css-minify": "npm-run-all --parallel css-minify-*",
+    "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
-    "css-prefix": "npm-run-all --parallel css-prefix-*",
+    "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
     "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "js": "npm-run-all js-compile js-minify",
-    "js-compile": "npm-run-all --parallel js-compile-*",
+    "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
     "js-compile-plugins": "node build/build-plugins.js",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
-    "js-minify": "npm-run-all --parallel js-minify-*",
-    "js-minify-standalone": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",
-    "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.esm.js.map,includeSources,url=coreui.esm.min.js.map\" --output dist/js/coreui.esm.min.js dist/js/coreui.esm.js",
-    "js-minify-bundle": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.bundle.js.map,includeSources,url=coreui.bundle.min.js.map\" --output dist/js/coreui.bundle.min.js dist/js/coreui.bundle.js",
-    "js-test": "npm-run-all --parallel js-test-karma js-test-jquery js-test-integration-*",
+    "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
+    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",
+    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.esm.js.map,includeSources,url=coreui.esm.min.js.map\" --output dist/js/coreui.esm.min.js dist/js/coreui.esm.js",
+    "js-minify-bundle": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.bundle.js.map,includeSources,url=coreui.bundle.min.js.map\" --output dist/js/coreui.bundle.min.js dist/js/coreui.bundle.js",
+    "js-test": "npm-run-all --aggregate-output --parallel js-test-karma js-test-jquery js-test-integration-*",
     "js-debug": "cross-env DEBUG=true npm run js-test-karma",
     "js-test-karma": "karma start js/tests/karma.conf.js",
     "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js",
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
-    "lint": "npm-run-all --parallel js-lint css-lint lockfile-lint",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "hugo --cleanDestinationDir --enableGitInfo",
     "docs-compile": "npm run docs-build",
-    "docs-linkinator": "linkinator _gh_pages --recurse --skip \"^(?!http://localhost)\" --verbosity error",
     "docs-vnu": "node build/vnu-jar.js",
-    "docs-lint": "npm-run-all --parallel docs-vnu docs-linkinator",
-    "docs-serve": "hugo server --port 9001 --disableFastRender --enableGitInfo",
+    "docs-lint": "npm run docs-vnu",
+    "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x karma-browserstack-launcher,terser && npm update && echo Manually update docs/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher && npm update && echo Manually update docs/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
     "release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist && cp -r dist/ coreui-$npm_package_version-dist && zip -r9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
-    "dist": "npm-run-all --parallel css js",
+    "dist": "npm-run-all --aggregate-output --parallel css js",
     "test": "npm-run-all lint dist js-test docs-build docs-lint",
-    "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
     "watch-css-docs": "nodemon --watch docs/assets/scss/ --ext scss --exec \"npm run css-lint\"",
@@ -85,57 +83,58 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@popperjs/core": "^2.10.1"
+    "@popperjs/core": "^2.11.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@popperjs/core": "^2.10.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-replace": "^3.0.0",
-    "auto-changelog": "^2.3.0",
-    "autoprefixer": "^10.3.4",
-    "bundlewatch": "^0.3.2",
-    "clean-css-cli": "^5.3.3",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@popperjs/core": "^2.11.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^4.0.0",
+    "auto-changelog": "^2.4.0",
+    "autoprefixer": "^10.4.2",
+    "bundlewatch": "^0.3.3",
+    "clean-css-cli": "^5.5.2",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-xo": "^0.36.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-unicorn": "^31.0.0",
-    "find-unused-sass-variables": "^3.1.0",
-    "glob": "^7.1.7",
+    "eslint": "^8.10.0",
+    "eslint-config-xo": "^0.40.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-unicorn": "^41.0.0",
+    "find-unused-sass-variables": "^4.0.3",
+    "glob": "^7.2.0",
     "globby": "^11.0.4",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.76.1",
+    "hugo-bin": "^0.81.1",
     "ip": "^1.1.5",
     "jquery": "^3.6.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.17",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
-    "karma-firefox-launcher": "^2.1.1",
-    "karma-jasmine": "^4.0.4",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "karma-rollup-preprocessor": "^7.0.7",
-    "linkinator": "^2.14.0",
+    "karma-rollup-preprocessor": "^7.0.8",
+    "linkinator": "^3.0.3",
     "lockfile-lint": "^4.6.2",
-    "nodemon": "^2.0.12",
+    "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.7",
+    "postcss-cli": "^9.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^2.56.3",
+    "rollup": "^2.69.0",
     "rollup-plugin-istanbul": "^3.0.0",
-    "sass": "^1.39.2",
-    "shelljs": "^0.8.4",
-    "stylelint": "^13.13.1",
-    "stylelint-config-twbs-bootstrap": "^2.2.1",
-    "terser": "5.8.0",
-    "vnu-jar": "21.9.2"
+    "rtlcss": "^3.5.0",
+    "sass": "^1.49.9",
+    "shelljs": "^0.8.5",
+    "stylelint": "^14.5.3",
+    "stylelint-config-twbs-bootstrap": "^3.0.1",
+    "terser": "^5.12.0",
+    "vnu-jar": "21.10.12"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
@@ -160,7 +159,7 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "@popperjs/core": "^2.10.1"
+      "@popperjs/core": "^2.11.2"
     }
   }
 }

package/scss/_buttons.scss

@@ -14,9 +14,8 @@
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  @include gradient-bg(var(--#{$variable-prefix}btn-bg, transparent));
+  background-color: var(--#{$variable-prefix}btn-bg, transparent);
   border: $btn-border-width solid var(--#{$variable-prefix}btn-border-color, transparent);
-  @include box-shadow(var(--#{$variable-prefix}btn-box-shadow, $btn-box-shadow));
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
 

package/scss/_card.scss

@@ -13,6 +13,7 @@
   background-clip: border-box;
   border: $card-border-width solid var(--#{$variable-prefix}card-border-color, $card-border-color);
   @include border-radius($card-border-radius);
+  @include box-shadow($card-box-shadow);
 
   > hr {
     margin-right: 0;
@@ -65,7 +66,7 @@
 
 .card-link {
   &:hover {
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   + .card-link {

package/scss/_dropdown.scss

@@ -39,7 +39,7 @@
 }
 
 // scss-docs-start responsive-breakpoints
-// We deliberately hardcode the `bs-` prefix because we check
+// We deliberately hardcode the `cui-` prefix because we check
 // this custom property in JS to determine Popper's positioning
 
 @each $breakpoint in map-keys($grid-breakpoints) {

package/scss/_functions.scss

@@ -32,6 +32,47 @@
   }
 }
 
+// Colors
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == "body" and $target == "bg" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @if $identifier == "body" and $target == "text" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  }
+}
+
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+    }
+
+    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+  }
+
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -55,6 +96,16 @@
   @return $result;
 }
 
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map-merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
@@ -274,14 +325,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1 + $value2;
   }
 
-  @if type-of($value1) != number {
-    $value1: unquote("(") + $value1 + unquote(")");
-  }
-
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
-  }
-
   @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
 }
 
@@ -302,10 +345,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1 - $value2;
   }
 
-  @if type-of($value1) != number {
-    $value1: unquote("(") + $value1 + unquote(")");
-  }
-
   @if type-of($value2) != number {
     $value2: unquote("(") + $value2 + unquote(")");
   }

package/scss/_grid.scss

@@ -12,29 +12,6 @@
   }
 }
 
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          .g-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}
-
 @if $enable-cssgrid {
   .grid {
     display: grid;

package/scss/_helpers.scss

@@ -2,6 +2,8 @@
 @import "helpers/colored-links";
 @import "helpers/ratio";
 @import "helpers/position";
+@import "helpers/stacks";
 @import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
+@import "helpers/vr";

package/scss/_mixins.scss

@@ -26,6 +26,7 @@
 // Components
 @import "mixins/alert";
 @import "mixins/avatar";
+@import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/caret";
 @import "mixins/pagination";

package/scss/_modal.scss

@@ -85,17 +85,7 @@
 
 // Modal background
 .modal-backdrop {
-  position: fixed;
-  top: 0;
-  @include ltr-rtl("left", 0);
-  z-index: $zindex-modal-backdrop;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--#{$variable-prefix}modal-backdrop-bg, $modal-backdrop-bg);
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: $modal-backdrop-opacity; }
+  @include overlay-backdrop($zindex-modal-backdrop, var(--#{$variable-prefix}modal-backdrop-bg, $modal-backdrop-bg), $modal-backdrop-opacity);
 }
 
 // Modal header
@@ -134,8 +124,8 @@
 // Footer (for actions)
 .modal-footer {
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding - $modal-footer-margin-between * .5;

package/scss/_nav.scss

@@ -49,10 +49,9 @@
 
     &:hover,
     &:focus {
-      border-color: var(--#{$variable-prefix}nav-tabs-link-hover-border-color, $nav-tabs-link-hover-border-color);
-
       // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
       isolation: isolate;
+      border-color: var(--#{$variable-prefix}nav-tabs-link-hover-border-color, $nav-tabs-link-hover-border-color);
     }
 
     &.disabled {

package/scss/_navbar.scss

@@ -218,13 +218,42 @@
         .navbar-toggler {
           display: none;
         }
+
+        .offcanvas-header {
+          display: none;
+        }
+
+        .offcanvas {
+          position: inherit;
+          bottom: 0;
+          z-index: 1000;
+          flex-grow: 1;
+          visibility: visible !important; // stylelint-disable-line declaration-no-important
+          background-color: transparent;
+          border-right: 0;
+          border-left: 0;
+          @include transition(none);
+          transform: none;
+        }
+        .offcanvas-top,
+        .offcanvas-bottom {
+          height: auto;
+          border-top: 0;
+          border-bottom: 0;
+        }
+
+        .offcanvas-body {
+          display: flex;
+          flex-grow: 0;
+          padding: 0;
+          overflow-y: visible;
+        }
       }
     }
   }
 }
 // scss-docs-end navbar-expand-loop
 
-
 // Navbar themes
 //
 // Styles for switching between navbars with light or dark background.

package/scss/_offcanvas.scss

@@ -14,6 +14,10 @@
   @include transition(transform $offcanvas-transition-duration ease-in-out);
 }
 
+.offcanvas-backdrop {
+  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
 .offcanvas-header {
   display: flex;
   align-items: center;
@@ -44,7 +48,7 @@
   @include ltr-rtl("left", 0);
   width: $offcanvas-horizontal-width;
   @include ltr-rtl("border-right", $offcanvas-border-width solid $offcanvas-border-color);
-  transform: translateX(-100%);
+  @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
 }
 
 .offcanvas-end {
@@ -52,7 +56,7 @@
   @include ltr-rtl("right", 0);
   width: $offcanvas-horizontal-width;
   @include ltr-rtl("border-left", $offcanvas-border-width solid $offcanvas-border-color);
-  transform: translateX(100%);
+  @include ltr-rtl-value-only("transform", translateX(100%), translateX(-100%));
 }
 
 .offcanvas-top {

package/scss/_placeholders.scss

@@ -0,0 +1,51 @@
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentColor;
+  opacity: $placeholder-opacity-max;
+
+  &.btn::before {
+    display: inline-block;
+    content: "";
+  }
+}
+
+// Sizing
+.placeholder-xs {
+  min-height: .6em;
+}
+
+.placeholder-sm {
+  min-height: .8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+// Animation
+.placeholder-glow {
+  .placeholder {
+    animation: placeholder-glow 2s ease-in-out infinite;
+  }
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: $placeholder-opacity-min;
+  }
+}
+
+.placeholder-wave {
+  mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}

package/scss/_reboot.scss

@@ -26,7 +26,9 @@
 // null by default, thus nothing is generated.
 
 :root {
-  font-size: $font-size-root;
+  @if $font-size-root != null {
+    font-size: var(--#{$variable-prefix}root-font-size);
+  }
 
   @if $enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
@@ -43,18 +45,20 @@
 // 3. Prevent adjustments of font size after orientation changes in iOS.
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
+// scss-docs-start reboot-body-rules
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size(var(--#{$variable-prefix}font-size-base, $font-size-base));
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: var(--#{$variable-prefix}body-color, $body-color);
-  text-align: $body-text-align;
-  background-color: var(--#{$variable-prefix}body-bg, $body-bg); // 2
+  font-family: var(--#{$variable-prefix}body-font-family);
+  @include font-size(var(--#{$variable-prefix}body-font-size));
+  font-weight: var(--#{$variable-prefix}body-font-weight);
+  line-height: var(--#{$variable-prefix}body-line-height);
+  color: var(--#{$variable-prefix}body-color);
+  text-align: var(--#{$variable-prefix}body-text-align);
+  background-color: var(--#{$variable-prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
+// scss-docs-end reboot-body-rules
 
 
 // Content grouping

package/scss/_root.scss

@@ -1,25 +1,54 @@
 :root {
-  // Custom variable values only support SassScript inside `#{}`.
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
   @each $color, $value in $colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $grays {
+    --#{$variable-prefix}gray-#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
-  // breakpoints custom properties
-  @each $bp, $value in $grid-breakpoints {
-    --#{$variable-prefix}breakpoint-#{$bp}: #{$value};
+  @each $color, $value in $theme-colors-rgb {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
   }
 
-  // mobile breakpoint custom property
-  --#{$variable-prefix}mobile-breakpoint: #{$mobile-breakpoint};
+  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
+  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
-  // Use `inspect` for lists so that quoted items keep the quotes.
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
   --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$variable-prefix}gradient: #{$gradient};
+
+  // Root and body
+  // stylelint-disable custom-property-empty-line-before
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$variable-prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$variable-prefix}body-font-family: #{$font-family-base};
+  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
+  --#{$variable-prefix}body-line-height: #{$line-height-base};
   --#{$variable-prefix}body-color: #{$body-color};
+  @if $body-text-align != null {
+    --#{$variable-prefix}body-text-align: #{$body-text-align};
+  }
+  --#{$variable-prefix}body-bg: #{$body-bg};
+  // scss-docs-end root-body-variables
+  // stylelint-enable custom-property-empty-line-before
 }