uikit 3.25.27-dev.9e97c1f → 3.25.27

package/src/scss/components/utility.scss

@@ -16,6 +16,9 @@
 //                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
+//                  `uk-box-shadow-bottom`
+//                  `uk-dropcap`
+//                  `uk-logo`
 //                  `uk-blend-*`
 //                  `uk-transform-*`
 //                  `uk-transform-origin-*`
@@ -37,6 +40,9 @@
 
 
 
+
+
+
 /* ========================================================================
    Component: Utility
  ========================================================================== */
@@ -341,6 +347,114 @@
 .uk-box-shadow-hover-xlarge:hover { box-shadow: $global-xlarge-box-shadow; }
 
 
+/* Box-shadow bottom
+ ========================================================================== */
+
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+
+@supports (filter: blur(0)) {
+
+    .uk-box-shadow-bottom {
+        display: inline-block;
+        position: relative;
+        z-index: 0;
+        max-width: 100%;
+        vertical-align: middle;
+    }
+
+    .uk-box-shadow-bottom::after {
+        content: "";
+        /* 1 */
+        position: absolute;
+        bottom: $box-shadow-bottom-bottom;
+        left: 0;
+        right: 0;
+        z-index: -1;
+        /* 2 */
+        height: $box-shadow-bottom-height;
+        border-radius: $box-shadow-bottom-border-radius;
+        background: $box-shadow-bottom-background;
+        filter: blur($box-shadow-bottom-blur);
+        /* 3 */
+        will-change: filter;
+        @if(meta.mixin-exists(hook-box-shadow-bottom)) {@include hook-box-shadow-bottom();}
+    }
+
+}
+
+
+/* Drop cap
+ ========================================================================== */
+
+/*
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+ */
+
+.uk-dropcap::first-letter,
+/* 1 */
+.uk-dropcap > p:first-of-type::first-letter {
+    display: block;
+    margin-right: $dropcap-margin-right;
+    float: left;
+    font-size: $dropcap-font-size;
+    line-height: $dropcap-line-height;
+    @if(meta.mixin-exists(hook-dropcap)) {@include hook-dropcap();}
+}
+
+/* 2 */
+@-moz-document url-prefix() {
+
+  .uk-dropcap::first-letter,
+  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
+
+}
+
+
+/* Logo
+ ========================================================================== */
+
+/*
+ * 1. Style
+ * 2. Required for `a`
+ * 3. Behave like image but can be overridden through flex utility classes
+ */
+
+.uk-logo {
+    /* 1 */
+    font-size: $logo-font-size;
+    font-family: $logo-font-family;
+    color: $logo-color;
+    /* 2 */
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-logo)) {@include hook-logo();}
+}
+
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+/* Hover */
+.uk-logo:hover {
+    color: $logo-hover-color;
+    /* 1 */
+    text-decoration: none;
+    @if(meta.mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
+}
+
+.uk-logo :where(img, svg, video) { display: block; }
+
+.uk-logo-inverse { display: none; }
+
+
 /* Disabled State
  ========================================================================== */
 
@@ -418,4 +532,19 @@
 @if(meta.mixin-exists(hook-utility-misc)) {@include hook-utility-misc();}
 
 // @mixin hook-panel-scrollable(){}
+// @mixin hook-box-shadow-bottom(){}
+// @mixin hook-dropcap(){}
+// @mixin hook-logo(){}
+// @mixin hook-logo-hover(){}
 // @mixin hook-utility-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+
+// @mixin hook-inverse-dropcap(){}
+// @mixin hook-inverse-logo(){}
+// @mixin hook-inverse-logo-hover(){}

package/src/scss/components/visibility.scss

@@ -116,10 +116,10 @@
  *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
  */
 
-.uk-hidden-visually:not(:focus, :active, :focus-within),
-.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-visible, :has(:focus-visible)),
+.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)),
 // Fallback for Safari 18.3 `:not(:has(...)) invalidation` bug. Remove when fixed.
-.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
     /* 1 */
     position: absolute !important;
     /* 2 */
@@ -137,7 +137,7 @@
  * Note: `clip-path` doesn't work with hover for elements outside of the toggle box.
  */
 
-.uk-visible-toggle:not(:hover, :focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/scss/mixins-theme.scss

@@ -81,6 +81,11 @@
         text-decoration: underline;
     }
 
+    .uk-alert a:not([class]):hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+
 }
 @mixin hook-align-misc(){}
 @mixin hook-animation-misc(){}
@@ -819,20 +824,6 @@
 @mixin hook-dropbar-left(){ box-shadow: $dropbar-left-box-shadow; }
 @mixin hook-dropbar-right(){ box-shadow: $dropbar-right-box-shadow; }
 @mixin hook-dropbar-misc(){}
-@mixin hook-dropcap(){
-    // Prevent line wrap
-    margin-bottom: -2px;
-}
-@mixin hook-dropcap-misc(){}
-@mixin hook-inverse-dropcap(){}
-@mixin hook-inverse-component-dropcap(){
-
-    .uk-dropcap::first-letter,
-    .uk-dropcap p:first-of-type::first-letter {
-        @if(meta.mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();}
-    }
-
-}
 @mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; }
 @mixin hook-dropdown-dropbar(){ box-shadow: none; }
 @mixin hook-dropdown-dropbar-large(){}
@@ -845,8 +836,6 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-dropnav-misc(){}
 @mixin hook-flex-misc(){}
-@mixin hook-floating-shadow(){}
-@mixin hook-floating-shadow-misc(){}
 @mixin hook-form-range(){}
 @mixin hook-form-range-track(){ border-radius: $form-range-track-border-radius; }
 @mixin hook-form-range-track-focus(){}
@@ -964,7 +953,7 @@
     // Select
     //
 
-    .uk-select:not([multiple], [size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); }
+    .uk-select:not([multiple]):not([size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); }
 
     //
     // Datalist
@@ -1036,7 +1025,7 @@
         @if(meta.mixin-exists(hook-inverse-grid-divider-horizontal)) {@include hook-inverse-grid-divider-horizontal();}
     }
 
-    .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
         border-top-color: $inverse-grid-divider-border;
         @if(meta.mixin-exists(hook-inverse-grid-divider-vertical)) {@include hook-inverse-grid-divider-vertical();}
     }
@@ -1336,27 +1325,6 @@
 
     .uk-list-striped > :nth-of-type(odd) { background-color: $inverse-list-striped-background; }
 
-}
-@mixin hook-logo(){}
-@mixin hook-logo-hover(){}
-@mixin hook-logo-misc(){}
-@mixin hook-inverse-logo(){}
-@mixin hook-inverse-logo-hover(){}
-@mixin hook-inverse-component-logo(){
-
-    .uk-logo {
-        color: $inverse-logo-color;
-        @if(meta.mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();}
-    }
-
-    .uk-logo:hover {
-        color: $inverse-logo-hover-color;
-        @if(meta.mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
-    }
-
-    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse:not([uk-svg])), .uk-logo-inverse, [uk-svg]) { display: none; }
-    .uk-logo-inverse:not([uk-svg]) { display: block; }
-
 }
 @mixin hook-margin-misc(){}
 @mixin hook-marker(){
@@ -1380,8 +1348,6 @@
     }
 
 }
-@mixin hook-marquee(){}
-@mixin hook-marquee-misc(){}
 @mixin hook-modal(){}
 @mixin hook-modal-dialog(){}
 @mixin hook-modal-full(){}
@@ -2200,7 +2166,10 @@
     &::after {
         content: "";
         position: absolute;
-        inset: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         background-image: $thumbnav-item-gradient;
         transition: opacity 0.1s ease-in-out;
     }
@@ -2272,7 +2241,38 @@
 }
 @mixin hook-transition-misc(){}
 @mixin hook-panel-scrollable(){}
+@mixin hook-box-shadow-bottom(){}
+@mixin hook-dropcap(){
+    // Prevent line wrap
+    margin-bottom: -2px;
+}
+@mixin hook-logo(){}
+@mixin hook-logo-hover(){}
 @mixin hook-utility-misc(){}
+@mixin hook-inverse-dropcap(){}
+@mixin hook-inverse-logo(){}
+@mixin hook-inverse-logo-hover(){}
+@mixin hook-inverse-component-utility(){
+
+    .uk-dropcap::first-letter,
+    .uk-dropcap p:first-of-type::first-letter {
+        @if(meta.mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();}
+    }
+
+    .uk-logo {
+        color: $inverse-logo-color;
+        @if(meta.mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();}
+    }
+
+    .uk-logo:hover {
+        color: $inverse-logo-hover-color;
+        @if(meta.mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
+    }
+
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
+    .uk-logo-inverse { display: block; }
+
+}
 @mixin hook-visibility-misc(){}
 @mixin hook-width-misc(){}
 @mixin hook-inverse() {
@@ -2288,7 +2288,6 @@
     @include hook-inverse-component-countdown();
     @include hook-inverse-component-divider();
     @include hook-inverse-component-dotnav();
-    @include hook-inverse-component-dropcap();
     @include hook-inverse-component-form-range();
     @include hook-inverse-component-form();
     @include hook-inverse-component-grid();
@@ -2299,7 +2298,6 @@
     @include hook-inverse-component-leader();
     @include hook-inverse-component-link();
     @include hook-inverse-component-list();
-    @include hook-inverse-component-logo();
     @include hook-inverse-component-marker();
     @include hook-inverse-component-nav();
     @include hook-inverse-component-navbar();
@@ -2312,4 +2310,5 @@
     @include hook-inverse-component-text();
     @include hook-inverse-component-thumbnav();
     @include hook-inverse-component-totop();
+    @include hook-inverse-component-utility();
 }

package/src/scss/mixins.scss

@@ -604,17 +604,6 @@
 @mixin hook-dropbar-left(){}
 @mixin hook-dropbar-right(){}
 @mixin hook-dropbar-misc(){}
-@mixin hook-dropcap(){}
-@mixin hook-dropcap-misc(){}
-@mixin hook-inverse-dropcap(){}
-@mixin hook-inverse-component-dropcap(){
-
-    .uk-dropcap::first-letter,
-    .uk-dropcap p:first-of-type::first-letter {
-        @if(meta.mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();}
-    }
-
-}
 @mixin hook-dropdown(){}
 @mixin hook-dropdown-dropbar(){}
 @mixin hook-dropdown-dropbar-large(){}
@@ -627,8 +616,6 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-dropnav-misc(){}
 @mixin hook-flex-misc(){}
-@mixin hook-floating-shadow(){}
-@mixin hook-floating-shadow-misc(){}
 @mixin hook-form-range(){}
 @mixin hook-form-range-track(){}
 @mixin hook-form-range-track-focus(){}
@@ -732,7 +719,7 @@
     // Select
     //
 
-    .uk-select:not([multiple], [size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); }
+    .uk-select:not([multiple]):not([size]) { @include svg-fill($internal-form-select-image, "#000", $inverse-form-select-icon-color); }
 
     //
     // Datalist
@@ -804,7 +791,7 @@
         @if(meta.mixin-exists(hook-inverse-grid-divider-horizontal)) {@include hook-inverse-grid-divider-horizontal();}
     }
 
-    .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
         border-top-color: $inverse-grid-divider-border;
         @if(meta.mixin-exists(hook-inverse-grid-divider-vertical)) {@include hook-inverse-grid-divider-vertical();}
     }
@@ -1077,27 +1064,6 @@
 
     .uk-list-striped > :nth-of-type(odd) { background-color: $inverse-list-striped-background; }
 
-}
-@mixin hook-logo(){}
-@mixin hook-logo-hover(){}
-@mixin hook-logo-misc(){}
-@mixin hook-inverse-logo(){}
-@mixin hook-inverse-logo-hover(){}
-@mixin hook-inverse-component-logo(){
-
-    .uk-logo {
-        color: $inverse-logo-color;
-        @if(meta.mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();}
-    }
-
-    .uk-logo:hover {
-        color: $inverse-logo-hover-color;
-        @if(meta.mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
-    }
-
-    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse:not([uk-svg])), .uk-logo-inverse, [uk-svg]) { display: none; }
-    .uk-logo-inverse:not([uk-svg]) { display: block; }
-
 }
 @mixin hook-margin-misc(){}
 @mixin hook-marker(){}
@@ -1119,8 +1085,6 @@
     }
 
 }
-@mixin hook-marquee(){}
-@mixin hook-marquee-misc(){}
 @mixin hook-modal(){}
 @mixin hook-modal-dialog(){}
 @mixin hook-modal-full(){}
@@ -1885,7 +1849,35 @@
 }
 @mixin hook-transition-misc(){}
 @mixin hook-panel-scrollable(){}
+@mixin hook-box-shadow-bottom(){}
+@mixin hook-dropcap(){}
+@mixin hook-logo(){}
+@mixin hook-logo-hover(){}
 @mixin hook-utility-misc(){}
+@mixin hook-inverse-dropcap(){}
+@mixin hook-inverse-logo(){}
+@mixin hook-inverse-logo-hover(){}
+@mixin hook-inverse-component-utility(){
+
+    .uk-dropcap::first-letter,
+    .uk-dropcap p:first-of-type::first-letter {
+        @if(meta.mixin-exists(hook-inverse-dropcap)) {@include hook-inverse-dropcap();}
+    }
+
+    .uk-logo {
+        color: $inverse-logo-color;
+        @if(meta.mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();}
+    }
+
+    .uk-logo:hover {
+        color: $inverse-logo-hover-color;
+        @if(meta.mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
+    }
+
+    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
+    .uk-logo-inverse { display: block; }
+
+}
 @mixin hook-visibility-misc(){}
 @mixin hook-width-misc(){}
 @mixin hook-inverse() {
@@ -1901,7 +1893,6 @@
     @include hook-inverse-component-countdown();
     @include hook-inverse-component-divider();
     @include hook-inverse-component-dotnav();
-    @include hook-inverse-component-dropcap();
     @include hook-inverse-component-form-range();
     @include hook-inverse-component-form();
     @include hook-inverse-component-grid();
@@ -1912,7 +1903,6 @@
     @include hook-inverse-component-leader();
     @include hook-inverse-component-link();
     @include hook-inverse-component-list();
-    @include hook-inverse-component-logo();
     @include hook-inverse-component-marker();
     @include hook-inverse-component-nav();
     @include hook-inverse-component-navbar();
@@ -1925,4 +1915,5 @@
     @include hook-inverse-component-text();
     @include hook-inverse-component-thumbnav();
     @include hook-inverse-component-totop();
+    @include hook-inverse-component-utility();
 }

package/src/scss/variables-theme.scss

@@ -387,9 +387,6 @@ $dropbar-color-mode: dark !default;
 $dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
-$dropcap-margin-right: 10px !default;
-$dropcap-font-size: (($global-line-height * 3) * 1em) !default;
-$dropcap-line-height: 1 !default;
 $dropdown-margin: $global-small-margin !default;
 $dropdown-viewport-margin: 15px !default;
 $dropdown-min-width: 200px !default;
@@ -416,11 +413,6 @@ $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $global-color !default;
 $dropnav-dropbar-z-index: $global-z-index - 20 !default;
-$floating-shadow-height: 30px !default;
-$floating-shadow-bottom: (-$floating-shadow-height) !default;
-$floating-shadow-border-radius: 100% !default;
-$floating-shadow-background: #444 !default;
-$floating-shadow-blur: 20px !default;
 $form-range-track-height: 3px !default;
 $form-range-track-background: color.adjust($global-muted-background, $lightness: -5%) !default;
 $form-range-track-focus-background: color.adjust($form-range-track-background, $lightness: -5%) !default;
@@ -663,12 +655,6 @@ $inverse-list-secondary-color: $inverse-global-primary-background !default;
 $inverse-list-divider-border: $inverse-global-border !default;
 $inverse-list-striped-background: $inverse-global-muted-background !default;
 $inverse-list-bullet-icon-color: $inverse-global-color !default;
-$logo-font-size: $global-large-font-size !default;
-$logo-font-family: $global-font-family !default;
-$logo-color: $global-emphasis-color !default;
-$logo-hover-color: $global-emphasis-color !default;
-$inverse-logo-color: $inverse-global-emphasis-color !default;
-$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $margin-margin: $global-margin !default;
 $margin-xsmall-margin: 5px !default;
 $margin-small-margin: $global-small-margin !default;
@@ -1172,7 +1158,21 @@ $panel-scrollable-border: $global-border !default;
 $overflow-fade-size: 100px !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
+$box-shadow-bottom-height: 30px !default;
+$box-shadow-bottom-bottom: (-$box-shadow-bottom-height) !default;
+$box-shadow-bottom-border-radius: 100% !default;
+$box-shadow-bottom-background: #444 !default;
+$box-shadow-bottom-blur: 20px !default;
+$dropcap-margin-right: 10px !default;
+$dropcap-font-size: (($global-line-height * 3) * 1em) !default;
+$dropcap-line-height: 1 !default;
+$logo-font-size: $global-large-font-size !default;
+$logo-font-family: $global-font-family !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-emphasis-color !default;
+$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;

package/src/scss/variables.scss

@@ -386,9 +386,6 @@ $dropbar-color-mode: dark !default;
 $dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
-$dropcap-margin-right: 10px !default;
-$dropcap-font-size: (($global-line-height * 3) * 1em) !default;
-$dropcap-line-height: 1 !default;
 $dropdown-margin: $global-small-margin !default;
 $dropdown-viewport-margin: 15px !default;
 $dropdown-min-width: 200px !default;
@@ -415,11 +412,6 @@ $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $global-color !default;
 $dropnav-dropbar-z-index: $global-z-index - 20 !default;
-$floating-shadow-height: 30px !default;
-$floating-shadow-bottom: (-$floating-shadow-height) !default;
-$floating-shadow-border-radius: 100% !default;
-$floating-shadow-background: #444 !default;
-$floating-shadow-blur: 20px !default;
 $form-range-track-height: 3px !default;
 $form-range-track-background: color.adjust($global-muted-background, $lightness: -5%) !default;
 $form-range-track-focus-background: color.adjust($form-range-track-background, $lightness: -5%) !default;
@@ -661,12 +653,6 @@ $inverse-list-secondary-color: $inverse-global-primary-background !default;
 $inverse-list-divider-border: $inverse-global-border !default;
 $inverse-list-striped-background: $inverse-global-muted-background !default;
 $inverse-list-bullet-icon-color: $inverse-global-color !default;
-$logo-font-size: $global-large-font-size !default;
-$logo-font-family: $global-font-family !default;
-$logo-color: $global-emphasis-color !default;
-$logo-hover-color: $global-emphasis-color !default;
-$inverse-logo-color: $inverse-global-emphasis-color !default;
-$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $margin-margin: $global-margin !default;
 $margin-xsmall-margin: 5px !default;
 $margin-small-margin: $global-small-margin !default;
@@ -1170,7 +1156,21 @@ $panel-scrollable-border: $global-border !default;
 $overflow-fade-size: 100px !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
+$box-shadow-bottom-height: 30px !default;
+$box-shadow-bottom-bottom: (-$box-shadow-bottom-height) !default;
+$box-shadow-bottom-border-radius: 100% !default;
+$box-shadow-bottom-background: #444 !default;
+$box-shadow-bottom-blur: 20px !default;
+$dropcap-margin-right: 10px !default;
+$dropcap-font-size: (($global-line-height * 3) * 1em) !default;
+$dropcap-line-height: 1 !default;
+$logo-font-size: $global-large-font-size !default;
+$logo-font-family: $global-font-family !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-emphasis-color !default;
+$inverse-logo-hover-color: $inverse-global-emphasis-color !default;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;