uikit 3.8.0 → 3.9.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -34,26 +34,27 @@
   },
   "homepage": "https://getuikit.com",
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.5",
+    "@rollup/plugin-alias": "^3.1.8",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-replace": "^2.4.2",
-    "archiver": "5.3.0",
+    "@rollup/plugin-replace": "^3.0.0",
+    "archiver": "^5.3.0",
     "camelcase": "^6.2.0",
-    "clean-css": "^5.1.5",
-    "dateformat": "^4.6.3",
-    "eslint": "8.0.1",
+    "clean-css": "^5.2.2",
+    "dateformat": "^5.0.2",
+    "eslint": "^8.2.0",
+    "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
-    "inquirer": "8.2.0",
-    "less": "^2.7.2",
+    "inquirer": "^8.2.0",
+    "less": "^4.1.2",
     "minimist": "^1.2.5",
     "npm-watch": "github:dasdeck/npm-watch#46a8a36c61cfd998ed53d27f62eaf79e11c395b4",
-    "postcss": "8.3.9",
-    "rollup": "^2.57.0",
+    "postcss": "^8.3.11",
+    "rollup": "^2.59.0",
     "rollup-plugin-html": "^0.2.1",
-    "rtlcss": "^3.3.0",
+    "rtlcss": "^3.5.0",
     "semver": "^7.3.2",
-    "svgo": "^1.3.2",
-    "uglify-js": "^3.14.2"
+    "svgo": "^2.8.0",
+    "uglify-js": "^3.14.3"
   },
   "watch": {
     "compile-js": "src/js/**/*.js",

package/src/js/util/event.js

@@ -57,7 +57,7 @@ export function once(...args) {
 
 export function trigger(targets, event, detail) {
     return toEventTargets(targets).reduce((notCanceled, target) =>
-        notCanceled && target.dispatchEvent(createEvent(event, true, true, detail))
+            notCanceled && target.dispatchEvent(createEvent(event, true, true, detail))
         , true);
 }
 
@@ -121,12 +121,12 @@ function toEventTarget(target) {
 
 export function toEventTargets(target) {
     return isArray(target)
-            ? target.map(toEventTarget).filter(Boolean)
-            : isString(target)
-                ? findAll(target)
-                : isEventTarget(target)
-                    ? [target]
-                    : toNodes(target);
+        ? target.map(toEventTarget).filter(Boolean)
+        : isString(target)
+            ? findAll(target)
+            : isEventTarget(target)
+                ? [target]
+                : toNodes(target);
 }
 
 export function isTouch(e) {

package/src/js/util/viewport.js

@@ -37,25 +37,31 @@ export function scrollTop(element, top) {
 export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
 
     const parents = isVisible(element) ? scrollParents(element) : [];
-    let diff = 0;
     return parents.reduce((fn, scrollElement, i) => {
 
-        const {scrollTop, scrollHeight} = scrollElement;
+        const {scrollTop, scrollHeight, offsetHeight} = scrollElement;
         const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
+        const {height: elHeight, top: elTop} = offset(parents[i - 1] || element);
 
         let top = Math.ceil(
-            offset(parents[i - 1] || element).top
+            elTop
             - offset(getViewport(scrollElement)).top
             - offsetBy
-            + diff
             + scrollTop
         );
 
+        if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
+            top += offsetBy;
+        } else {
+            offsetBy = 0;
+        }
+
         if (top > maxScroll) {
-            diff = top - maxScroll;
+            offsetBy -= top - maxScroll;
             top = maxScroll;
-        } else {
-            diff = 0;
+        } else if (top < 0) {
+            offsetBy -= top;
+            top = 0;
         }
 
         return () => scrollTo(scrollElement, top - scrollTop).then(fn);

package/src/less/components/base.less

@@ -76,7 +76,10 @@
 @base-pre-font-family:                          @base-code-font-family;
 @base-pre-color:                                @global-color;
 
-@base-focus-outline:                            @global-emphasis-color;     
+@base-focus-outline-width:                      2px;
+@base-focus-outline-style:                      dotted;
+@base-focus-outline:                            @global-emphasis-color;
+@base-focus-outline-offset:                     1px;
 
 @base-selection-background:                     #39f;
 @base-selection-color:                          @global-inverse-color;
@@ -532,15 +535,15 @@ pre code { font-family: @base-pre-font-family; }
 
 /* 2 */
 :focus:not([tabindex^='-']) {
-    outline: 2px dotted @base-focus-outline;
-    outline-offset: 1px;
+    outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline;
+    outline-offset: @base-focus-outline-offset;
 }
 
 /* 3 */
 :focus:not(:focus-visible) { outline: none; }
 
 /* 4 */
-:focus-visible { outline: 2px dotted @base-focus-outline; }
+:focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
 
 
 /* Selection pseudo-element

package/src/less/components/card.less

@@ -32,16 +32,16 @@
 @card-body-padding-vertical-l:                 @global-medium-gutter;
 
 @card-header-padding-horizontal:               @global-gutter;
-@card-header-padding-vertical:                 round(@global-gutter / 2);
+@card-header-padding-vertical:                 round((@global-gutter / 2));
 
 @card-header-padding-horizontal-l:             @global-medium-gutter;
-@card-header-padding-vertical-l:               round(@global-medium-gutter / 2);
+@card-header-padding-vertical-l:               round((@global-medium-gutter / 2));
 
 @card-footer-padding-horizontal:               @global-gutter;
 @card-footer-padding-vertical:                 (@global-gutter / 2);
 
 @card-footer-padding-horizontal-l:             @global-medium-gutter;
-@card-footer-padding-vertical-l:               round(@global-medium-gutter / 2);
+@card-footer-padding-vertical-l:               round((@global-medium-gutter / 2));
 
 @card-title-font-size:                         @global-large-font-size;
 @card-title-line-height:                       1.4;
@@ -76,16 +76,16 @@
 @card-small-body-padding-horizontal:           @global-margin;
 @card-small-body-padding-vertical:             @global-margin;
 @card-small-header-padding-horizontal:         @global-margin;
-@card-small-header-padding-vertical:           round(@global-margin / 1.5);
+@card-small-header-padding-vertical:           round((@global-margin / 1.5));
 @card-small-footer-padding-horizontal:         @global-margin;
-@card-small-footer-padding-vertical:           round(@global-margin / 1.5);
+@card-small-footer-padding-vertical:           round((@global-margin / 1.5));
 
 @card-large-body-padding-horizontal-l:         @global-large-gutter;
 @card-large-body-padding-vertical-l:           @global-large-gutter;
 @card-large-header-padding-horizontal-l:       @global-large-gutter;
-@card-large-header-padding-vertical-l:         round(@global-large-gutter / 2);
+@card-large-header-padding-vertical-l:         round((@global-large-gutter / 2));
 @card-large-footer-padding-horizontal-l:       @global-large-gutter;
-@card-large-footer-padding-vertical-l:         round(@global-large-gutter / 2);
+@card-large-footer-padding-vertical-l:         round((@global-large-gutter / 2));
 
 
 /* ========================================================================

package/src/less/components/form-range.less

@@ -83,7 +83,7 @@
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
-    margin-top: (floor(@form-range-thumb-height / 2) * -1);
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
     /* 2 */
     height: @form-range-thumb-height;
     width: @form-range-thumb-width;

package/src/less/components/notification.less

@@ -77,7 +77,7 @@
 .uk-notification-top-center,
 .uk-notification-bottom-center {
     left: 50%;
-    margin-left: (@notification-width / -2);
+    margin-left: ((@notification-width / -2));
 }
 
 .uk-notification-bottom-left,

package/src/less/components/padding.less

@@ -16,7 +16,7 @@
 
 @padding-small-padding:                                 @global-small-gutter;
 
-@padding-large-padding:                                 @global-gutter;
+@padding-large-padding:                                 @global-medium-gutter;
 @padding-large-padding-l:                               @global-large-gutter;
 
 

package/src/less/components/spinner.less

@@ -11,7 +11,7 @@
 
 @spinner-size:                                  30px;
 @spinner-stroke-width:                          1;
-@spinner-radius:                                floor((@spinner-size - @spinner-stroke-width) / 2); // Minus stroke width to prevent overflow clipping
+@spinner-radius:                                floor(((@spinner-size - @spinner-stroke-width) / 2)); // Minus stroke width to prevent overflow clipping
 @spinner-circumference:                         round(2 * 3.141 * @spinner-radius);
 @spinner-duration:                              1.4s;
 
@@ -55,7 +55,7 @@
 @keyframes uk-spinner-dash {
     0% { stroke-dashoffset: @spinner-circumference; }
     50% {
-        stroke-dashoffset: @spinner-circumference/4;
+        stroke-dashoffset: (@spinner-circumference / 4);
         transform:rotate(135deg);
     }
     100% {

package/src/less/components/table.less

@@ -261,11 +261,11 @@
 
     .uk-table-responsive th:not(:first-child):not(.uk-table-link),
     .uk-table-responsive td:not(:first-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(@table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round((@table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-responsive th:not(:last-child):not(.uk-table-link),
     .uk-table-responsive td:not(:last-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(@table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round((@table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-justify.uk-table-responsive th,
     .uk-table-justify.uk-table-responsive td {
@@ -349,4 +349,4 @@
 .hook-inverse-table-row-active() {}
 .hook-inverse-table-divider() {}
 .hook-inverse-table-striped() {}
-.hook-inverse-table-hover() {}
+.hook-inverse-table-hover() {}

package/src/less/components/transition.less

@@ -124,14 +124,14 @@
 .uk-transition-slide-left { --uk-translate-x: -100%; }
 .uk-transition-slide-right { --uk-translate-x: 100%; }
 
-.uk-transition-slide-top-small { --uk-translate-y: -@transition-slide-small-translate; }
+.uk-transition-slide-top-small { --uk-translate-y: ~'calc(-1 * @{transition-slide-small-translate})'; }
 .uk-transition-slide-bottom-small { --uk-translate-y: @transition-slide-small-translate; }
-.uk-transition-slide-left-small { --uk-translate-x: -@transition-slide-small-translate; }
+.uk-transition-slide-left-small { --uk-translate-x: ~'calc(-1 * @{transition-slide-small-translate})'; }
 .uk-transition-slide-right-small { --uk-translate-x: @transition-slide-small-translate; }
 
-.uk-transition-slide-top-medium { --uk-translate-y: -@transition-slide-medium-translate; }
+.uk-transition-slide-top-medium { --uk-translate-y: ~'calc(-1 * @{transition-slide-medium-translate})'; }
 .uk-transition-slide-bottom-medium { --uk-translate-y: @transition-slide-medium-translate; }
-.uk-transition-slide-left-medium { --uk-translate-x: -@transition-slide-medium-translate; }
+.uk-transition-slide-left-medium { --uk-translate-x: ~'calc(-1 * @{transition-slide-medium-translate})'; }
 .uk-transition-slide-right-medium { --uk-translate-x: @transition-slide-medium-translate; }
 
 /* Show */

package/src/less/components/utility.less

@@ -49,8 +49,8 @@
 
 @logo-font-size:                                @global-large-font-size;
 @logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-color;
-@logo-hover-color:                              @global-color;
+@logo-color:                                    @global-emphasis-color;
+@logo-hover-color:                              @global-emphasis-color;
 
 @dragover-box-shadow:                           0 0 20px rgba(100,100,100,0.3);
 
@@ -470,8 +470,8 @@
 // Inverse
 // ========================================================================
 
-@inverse-logo-color:                           @inverse-global-color;
-@inverse-logo-hover-color:                     @inverse-global-color;
+@inverse-logo-color:                           @inverse-global-emphasis-color;
+@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
 
 .hook-inverse() {
 

package/src/scss/components/base.scss

@@ -76,7 +76,10 @@ $base-pre-line-height:                           1.5 !default;
 $base-pre-font-family:                           $base-code-font-family !default;
 $base-pre-color:                                 $global-color !default;
 
-$base-focus-outline:                             $global-emphasis-color !default;     
+$base-focus-outline-width:                       2px !default;
+$base-focus-outline-style:                       dotted !default;
+$base-focus-outline:                             $global-emphasis-color !default;
+$base-focus-outline-offset:                      1px !default;
 
 $base-selection-background:                      #39f !default;
 $base-selection-color:                           $global-inverse-color !default;
@@ -532,15 +535,15 @@ pre code { font-family: $base-pre-font-family; }
 
 /* 2 */
 :focus:not([tabindex^='-']) {
-    outline: 2px dotted $base-focus-outline;
-    outline-offset: 1px;
+    outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline;
+    outline-offset: $base-focus-outline-offset;
 }
 
 /* 3 */
 :focus:not(:focus-visible) { outline: none; }
 
 /* 4 */
-:focus-visible { outline: 2px dotted $base-focus-outline; }
+:focus-visible { outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline; }
 
 
 /* Selection pseudo-element

package/src/scss/components/card.scss

@@ -32,16 +32,16 @@ $card-body-padding-horizontal-l:                $global-medium-gutter !default;
 $card-body-padding-vertical-l:                  $global-medium-gutter !default;
 
 $card-header-padding-horizontal:                $global-gutter !default;
-$card-header-padding-vertical:                  round($global-gutter / 2) !default;
+$card-header-padding-vertical:                  round(($global-gutter / 2)) !default;
 
 $card-header-padding-horizontal-l:              $global-medium-gutter !default;
-$card-header-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+$card-header-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
 
 $card-footer-padding-horizontal:                $global-gutter !default;
 $card-footer-padding-vertical:                  ($global-gutter / 2) !default;
 
 $card-footer-padding-horizontal-l:              $global-medium-gutter !default;
-$card-footer-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+$card-footer-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
 
 $card-title-font-size:                          $global-large-font-size !default;
 $card-title-line-height:                        1.4 !default;
@@ -76,16 +76,16 @@ $card-secondary-color-mode:                     light !default;
 $card-small-body-padding-horizontal:            $global-margin !default;
 $card-small-body-padding-vertical:              $global-margin !default;
 $card-small-header-padding-horizontal:          $global-margin !default;
-$card-small-header-padding-vertical:            round($global-margin / 1.5) !default;
+$card-small-header-padding-vertical:            round(($global-margin / 1.5)) !default;
 $card-small-footer-padding-horizontal:          $global-margin !default;
-$card-small-footer-padding-vertical:            round($global-margin / 1.5) !default;
+$card-small-footer-padding-vertical:            round(($global-margin / 1.5)) !default;
 
 $card-large-body-padding-horizontal-l:          $global-large-gutter !default;
 $card-large-body-padding-vertical-l:            $global-large-gutter !default;
 $card-large-header-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-header-padding-vertical-l:          round($global-large-gutter / 2) !default;
+$card-large-header-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
 $card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-footer-padding-vertical-l:          round($global-large-gutter / 2) !default;
+$card-large-footer-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
 
 
 /* ========================================================================

package/src/scss/components/form-range.scss

@@ -83,7 +83,7 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
-    margin-top: (floor($form-range-thumb-height / 2) * -1);
+    margin-top: (floor(($form-range-thumb-height / 2)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;

package/src/scss/components/notification.scss

@@ -77,7 +77,7 @@ $notification-message-danger-color:                    $global-danger-background
 .uk-notification-top-center,
 .uk-notification-bottom-center {
     left: 50%;
-    margin-left: ($notification-width / -2);
+    margin-left: (($notification-width / -2));
 }
 
 .uk-notification-bottom-left,

package/src/scss/components/padding.scss

@@ -16,7 +16,7 @@ $padding-padding-l:                                      $global-medium-gutter !
 
 $padding-small-padding:                                  $global-small-gutter !default;
 
-$padding-large-padding:                                  $global-gutter !default;
+$padding-large-padding:                                  $global-medium-gutter !default;
 $padding-large-padding-l:                                $global-large-gutter !default;
 
 

package/src/scss/components/spinner.scss

@@ -11,7 +11,7 @@
 
 $spinner-size:                                   30px !default;
 $spinner-stroke-width:                           1 !default;
-$spinner-radius:                                 floor(($spinner-size - $spinner-stroke-width) / 2) !default; // Minus stroke width to prevent overflow clipping
+$spinner-radius:                                 floor((($spinner-size - $spinner-stroke-width) / 2)) !default; // Minus stroke width to prevent overflow clipping
 $spinner-circumference:                          round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration:                               1.4s !default;
 
@@ -55,7 +55,7 @@ $spinner-duration:                               1.4s !default;
 @keyframes uk-spinner-dash {
     0% { stroke-dashoffset: $spinner-circumference; }
     50% {
-        stroke-dashoffset: $spinner-circumference/4;
+        stroke-dashoffset: ($spinner-circumference / 4);
         transform:rotate(135deg);
     }
     100% {

package/src/scss/components/table.scss

@@ -261,11 +261,11 @@ $table-expand-min-width:                         150px !default;
 
     .uk-table-responsive th:not(:first-child):not(.uk-table-link),
     .uk-table-responsive td:not(:first-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round($table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(($table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-responsive th:not(:last-child):not(.uk-table-link),
     .uk-table-responsive td:not(:last-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round($table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(($table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-justify.uk-table-responsive th,
     .uk-table-justify.uk-table-responsive td {
@@ -312,4 +312,4 @@ $inverse-table-hover-row-background:                     $inverse-table-row-acti
 // @mixin hook-inverse-table-row-active(){}
 // @mixin hook-inverse-table-divider(){}
 // @mixin hook-inverse-table-striped(){}
-// @mixin hook-inverse-table-hover(){}
+// @mixin hook-inverse-table-hover(){}

package/src/scss/components/transition.scss

@@ -124,14 +124,14 @@ $transition-slow-duration:                       0.7s !default;
 .uk-transition-slide-left { --uk-translate-x: -100%; }
 .uk-transition-slide-right { --uk-translate-x: 100%; }
 
-.uk-transition-slide-top-small { --uk-translate-y: (-$transition-slide-small-translate); }
+.uk-transition-slide-top-small { --uk-translate-y: calc(-1 * #{$transition-slide-small-translate}); }
 .uk-transition-slide-bottom-small { --uk-translate-y: #{$transition-slide-small-translate}; }
-.uk-transition-slide-left-small { --uk-translate-x: (-$transition-slide-small-translate); }
+.uk-transition-slide-left-small { --uk-translate-x: calc(-1 * #{$transition-slide-small-translate}); }
 .uk-transition-slide-right-small { --uk-translate-x: #{$transition-slide-small-translate}; }
 
-.uk-transition-slide-top-medium { --uk-translate-y: (-$transition-slide-medium-translate); }
+.uk-transition-slide-top-medium { --uk-translate-y: calc(-1 * #{$transition-slide-medium-translate}); }
 .uk-transition-slide-bottom-medium { --uk-translate-y: #{$transition-slide-medium-translate}; }
-.uk-transition-slide-left-medium { --uk-translate-x: (-$transition-slide-medium-translate); }
+.uk-transition-slide-left-medium { --uk-translate-x: calc(-1 * #{$transition-slide-medium-translate}); }
 .uk-transition-slide-right-medium { --uk-translate-x: #{$transition-slide-medium-translate}; }
 
 /* Show */

package/src/scss/components/utility.scss

@@ -49,8 +49,8 @@ $dropcap-font-size:                              (($global-line-height * 3) * 1e
 
 $logo-font-size:                                 $global-large-font-size !default;
 $logo-font-family:                               $global-font-family !default;
-$logo-color:                                     $global-color !default;
-$logo-hover-color:                               $global-color !default;
+$logo-color:                                     $global-emphasis-color !default;
+$logo-hover-color:                               $global-emphasis-color !default;
 
 $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3) !default;
 
@@ -470,8 +470,8 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 // Inverse
 // ========================================================================
 
-$inverse-logo-color:                            $inverse-global-color !default;
-$inverse-logo-hover-color:                      $inverse-global-color !default;
+$inverse-logo-color:                            $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color:                      $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/variables-theme.scss

@@ -142,7 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
 $base-pre-line-height: 1.5 !default;
 $base-pre-font-family: $base-code-font-family !default;
 $base-pre-color: $global-color !default;
+$base-focus-outline-width: 2px !default;
+$base-focus-outline-style: dotted !default;
 $base-focus-outline: $global-emphasis-color !default;
+$base-focus-outline-offset: 1px !default;
 $base-selection-background: #39f !default;
 $base-selection-color: $global-inverse-color !default;
 $inverse-base-color: $inverse-global-color !default;
@@ -244,13 +247,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $card-body-padding-horizontal-l: $global-medium-gutter !default;
 $card-body-padding-vertical-l: $global-medium-gutter !default;
 $card-header-padding-horizontal: $global-gutter !default;
-$card-header-padding-vertical: round($global-gutter / 2) !default;
+$card-header-padding-vertical: round(($global-gutter / 2)) !default;
 $card-header-padding-horizontal-l: $global-medium-gutter !default;
-$card-header-padding-vertical-l: round($global-medium-gutter / 2) !default;
+$card-header-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
 $card-footer-padding-horizontal: $global-gutter !default;
 $card-footer-padding-vertical: ($global-gutter / 2) !default;
 $card-footer-padding-horizontal-l: $global-medium-gutter !default;
-$card-footer-padding-vertical-l: round($global-medium-gutter / 2) !default;
+$card-footer-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
 $card-title-font-size: $global-large-font-size !default;
 $card-title-line-height: 1.4 !default;
 $card-badge-top: 15px !default;
@@ -278,16 +281,16 @@ $card-secondary-color-mode: light !default;
 $card-small-body-padding-horizontal: $global-margin !default;
 $card-small-body-padding-vertical: $global-margin !default;
 $card-small-header-padding-horizontal: $global-margin !default;
-$card-small-header-padding-vertical: round($global-margin / 1.5) !default;
+$card-small-header-padding-vertical: round(($global-margin / 1.5)) !default;
 $card-small-footer-padding-horizontal: $global-margin !default;
-$card-small-footer-padding-vertical: round($global-margin / 1.5) !default;
+$card-small-footer-padding-vertical: round(($global-margin / 1.5)) !default;
 $global-large-gutter: 70px !default;
 $card-large-body-padding-horizontal-l: $global-large-gutter !default;
 $card-large-body-padding-vertical-l: $global-large-gutter !default;
 $card-large-header-padding-horizontal-l: $global-large-gutter !default;
-$card-large-header-padding-vertical-l: round($global-large-gutter / 2) !default;
+$card-large-header-padding-vertical-l: round(($global-large-gutter / 2)) !default;
 $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
-$card-large-footer-padding-vertical-l: round($global-large-gutter / 2) !default;
+$card-large-footer-padding-vertical-l: round(($global-large-gutter / 2)) !default;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -798,7 +801,7 @@ $overlay-primary-color-mode: light !default;
 $padding-padding: $global-gutter !default;
 $padding-padding-l: $global-medium-gutter !default;
 $padding-small-padding: $global-small-gutter !default;
-$padding-large-padding: $global-gutter !default;
+$padding-large-padding: $global-medium-gutter !default;
 $padding-large-padding-l: $global-large-gutter !default;
 $pagination-margin-horizontal: 0 !default;
 $pagination-item-padding-vertical: 5px !default;
@@ -887,7 +890,7 @@ $sortable-placeholder-opacity: 0 !default;
 $sortable-empty-height: 50px !default;
 $spinner-size: 30px !default;
 $spinner-stroke-width: 1 !default;
-$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default;
+$spinner-radius: floor((($spinner-size - $spinner-stroke-width) / 2)) !default;
 $spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration: 1.4s !default;
 $sticky-z-index: $global-z-index - 20 !default;
@@ -1041,11 +1044,11 @@ $dropcap-margin-right: 10px !default;
 $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
 $logo-font-size: $global-large-font-size !default;
 $logo-font-family: $global-font-family !default;
-$logo-color: $global-color !default;
-$logo-hover-color: $global-color !default;
+$logo-color: $global-emphasis-color !default;
+$logo-hover-color: $global-emphasis-color !default;
 $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3) !default;
-$inverse-logo-color: $inverse-global-color !default;
-$inverse-logo-hover-color: $inverse-global-color !default;
+$inverse-logo-color: $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;