uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/src/less/components/navbar.less

@@ -36,7 +36,7 @@
 
 @navbar-background:                             @global-muted-background;
 @navbar-gap:                                    0px; // Must have a unit because of `calc`
-@navbar-color-mode:                             none;
+@navbar-color-mode:                             dark;
 
 @navbar-nav-gap:                                0px; // Must have a unit because of `calc`
 
@@ -66,7 +66,7 @@
 @navbar-dropdown-padding:                       15px;
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
-@navbar-dropdown-color-mode:                    none;
+@navbar-dropdown-color-mode:                    dark;
 @navbar-dropdown-focus-outline:                 @base-focus-outline;
 @navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
 @navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;
@@ -97,8 +97,6 @@
 @navbar-dropdown-nav-sublist-item-hover-color:  @global-color;
 @navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
 
-@navbar-dropbar-behind-color-mode:              dark;
-
 
 /* ========================================================================
    Component: Navbar
@@ -106,18 +104,16 @@
 
 /*
  * 1. Create position context to center navbar group
- * 2. Pass dropbar behind color to JS
  */
 
 .uk-navbar {
     display: flex;
     /* 1 */
     position: relative;
-    /* 2 */
-    --uk-navbar-dropbar-behind-color: @navbar-dropbar-behind-color-mode;
     .hook-navbar();
 }
 
+
 /* Container
  ========================================================================== */
 
@@ -140,7 +136,7 @@
 
 .uk-navbar-left,
 .uk-navbar-right,
-[class*='uk-navbar-center'] {
+[class*="uk-navbar-center"] {
     display: flex;
     gap: @navbar-gap;
     /* 1 */
@@ -169,7 +165,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     /* 2 */
     width: max-content;
     box-sizing: border-box;
@@ -184,10 +180,10 @@
    top: 0;
 }
 
-.uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap})'; }
+.uk-navbar-center-left { right: ~'calc(100% + @{navbar-gap})'; }
 .uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap})'; }
 
-[class*='uk-navbar-center-'] {
+[class*="uk-navbar-center-"] {
     width: max-content;
     box-sizing: border-box;
 }

package/src/less/components/overlay.less

@@ -18,6 +18,7 @@
 @overlay-padding-vertical:                      @global-gutter;
 
 @overlay-default-background:                    fade(@global-background, 80%);
+@overlay-default-color-mode:                    dark;
 
 @overlay-primary-background:                    fade(@global-secondary-background, 80%);
 @overlay-primary-color-mode:                    light;
@@ -59,6 +60,10 @@
     .hook-overlay-default();
 }
 
+// Color Mode
+.uk-overlay-default:extend(.uk-light all) when (@overlay-default-color-mode = light) {}
+.uk-overlay-default:extend(.uk-dark all) when (@overlay-default-color-mode = dark) {}
+
 /*
  * Primary
  */

package/src/less/components/position.less

@@ -49,11 +49,11 @@
  * 1. Prevent content overflow.
  */
 
-[class*='uk-position-top'],
-[class*='uk-position-bottom'],
-[class*='uk-position-left'],
-[class*='uk-position-right'],
-[class*='uk-position-center'] {
+[class*="uk-position-top"],
+[class*="uk-position-bottom"],
+[class*="uk-position-left"],
+[class*="uk-position-right"],
+[class*="uk-position-center"] {
     position: absolute !important;
     /* 1 */
     max-width: ~'calc(100% - (var(--uk-position-margin-offset) * 2))';
@@ -130,8 +130,8 @@
 }
 
 /* Vertical */
-[class*='uk-position-center-left'],
-[class*='uk-position-center-right'] {
+[class*="uk-position-center-left"],
+[class*="uk-position-center-right"] {
     top: ~'calc(50% - var(--uk-position-margin-offset))';
     --uk-position-translate-y: -50%;
     transform: translate(0, var(--uk-position-translate-y));

package/src/less/components/section.less

@@ -120,7 +120,6 @@
 
 }
 
-
 /*
  * XLarge
  */
@@ -150,27 +149,30 @@
 
 .uk-section-default {
     background: @section-default-background;
-    --uk-navbar-color: @section-default-color-mode;
     .hook-section-default();
 }
 
+.uk-section-default:not(.uk-preserve-color):extend(.uk-light all) when (@section-default-color-mode = light) {}
+.uk-section-default:not(.uk-preserve-color):extend(.uk-dark all) when (@section-default-color-mode = dark) {}
+
 /*
  * Muted
  */
 
 .uk-section-muted {
     background: @section-muted-background;
-    --uk-navbar-color: @section-muted-color-mode;
     .hook-section-muted();
 }
 
+.uk-section-muted:not(.uk-preserve-color):extend(.uk-light all) when (@section-muted-color-mode = light) {}
+.uk-section-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@section-muted-color-mode = dark) {}
+
 /*
  * Primary
  */
 
 .uk-section-primary {
     background: @section-primary-background;
-    --uk-navbar-color: @section-primary-color-mode;
     .hook-section-primary();
 }
 
@@ -183,7 +185,6 @@
 
 .uk-section-secondary {
     background: @section-secondary-background;
-    --uk-navbar-color: @section-secondary-color-mode;
     .hook-section-secondary();
 }
 

package/src/less/components/sticky.less

@@ -54,7 +54,7 @@
  * Faster animations
  */
 
-.uk-sticky[class*='uk-animation-'] { animation-duration: @sticky-animation-duration; }
+.uk-sticky[class*="uk-animation-"] { animation-duration: @sticky-animation-duration; }
 
 .uk-sticky.uk-animation-reverse { animation-duration: @sticky-reverse-animation-duration; }
 

package/src/less/components/svg.less

@@ -18,14 +18,14 @@
 /* 1 */
 .uk-svg,
 /* 2 */
-.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-svg { transform: translate(0,0); }
+.uk-svg { transform: translate(0, 0); }
 
 
 // Hooks

package/src/less/components/tile.less

@@ -37,8 +37,10 @@
 @tile-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);
 
 @tile-default-background:                      @global-background;
+@tile-default-color-mode:                      dark;
 
 @tile-muted-background:                        @global-muted-background;
+@tile-muted-color-mode:                        dark;
 
 @tile-primary-background:                      @global-primary-background;
 @tile-primary-color-mode:                      light;
@@ -168,6 +170,10 @@
     .hook-tile-default-hover();
 }
 
+// Color Mode
+.uk-tile-default:not(.uk-preserve-color):extend(.uk-light all) when (@tile-default-color-mode = light) {}
+.uk-tile-default:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-default-color-mode = dark) {}
+
 /*
  * Muted
  */
@@ -181,6 +187,10 @@
     .hook-tile-muted-hover();
 }
 
+// Color Mode
+.uk-tile-muted:not(.uk-preserve-color):extend(.uk-light all) when (@tile-muted-color-mode = light) {}
+.uk-tile-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@tile-muted-color-mode = dark) {}
+
 /*
  * Primary
  */

package/src/less/components/transition.less

@@ -50,15 +50,15 @@
  */
 
 :where(.uk-transition-fade),
-:where([class*='uk-transition-scale']),
-:where([class*='uk-transition-slide']) {
+:where([class*="uk-transition-scale"]),
+:where([class*="uk-transition-slide"]) {
     --uk-position-translate-x: 0;
     --uk-position-translate-y: 0;
 }
 
 .uk-transition-fade,
-[class*='uk-transition-scale'],
-[class*='uk-transition-slide'] {
+[class*="uk-transition-scale"],
+[class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     --uk-scale-x: 1;
@@ -86,7 +86,7 @@
  */
 
 /* 1 */
-[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
+[class*="uk-transition-scale"] { -webkit-backface-visibility: hidden; }
 
 .uk-transition-scale-up {
     --uk-scale-x: 1;
@@ -136,10 +136,10 @@
 .uk-transition-slide-right-medium { --uk-translate-x: @transition-slide-medium-translate; }
 
 /* Show */
-.uk-transition-toggle:hover [class*='uk-transition-slide'],
-.uk-transition-toggle:focus [class*='uk-transition-slide'],
-.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
-.uk-transition-active.uk-active [class*='uk-transition-slide'] {
+.uk-transition-toggle:hover [class*="uk-transition-slide"],
+.uk-transition-toggle:focus [class*="uk-transition-slide"],
+.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-active.uk-active [class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     opacity: 1;

package/src/less/components/utility.less

@@ -126,7 +126,7 @@
 .uk-float-right { float: right; }
 
 /* 1 */
-[class*='uk-float-'] { max-width: 100%; }
+[class*="uk-float-"] { max-width: 100%; }
 
 
 /* Overfow
@@ -179,7 +179,7 @@
  * 6. Clip child elements
  */
 
-[class*='uk-inline'] {
+[class*="uk-inline"] {
     /* 1 */
     display: inline-block;
     /* 2 */
@@ -290,7 +290,7 @@
  * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
  */
 
-.uk-inline-clip[class*='uk-border-'] { -webkit-transform: translateZ(0); }
+.uk-inline-clip[class*="uk-border-"] { -webkit-transform: translateZ(0); }
 
 
 /* Box-shadow
@@ -305,7 +305,7 @@
  * Hover
  */
 
-[class*='uk-box-shadow-hover'] { transition: box-shadow @box-shadow-duration ease-in-out; }
+[class*="uk-box-shadow-hover"] { transition: box-shadow @box-shadow-duration ease-in-out; }
 
 .uk-box-shadow-hover-small:hover { box-shadow: @global-small-box-shadow; }
 .uk-box-shadow-hover-medium:hover { box-shadow: @global-medium-box-shadow; }

package/src/less/components/width.less

@@ -25,7 +25,7 @@
 /* Equal child widths
  ========================================================================== */
 
-[class*='uk-child-width'] > * {
+[class*="uk-child-width"] > * {
     box-sizing: border-box;
     width: 100%;
 }
@@ -45,7 +45,7 @@
  *    if they have zero width and padding and the predecessor is 100% wide.
  */
 
-.uk-child-width-expand > :not([class*='uk-width']) {
+.uk-child-width-expand > :not([class*="uk-width"]) {
     flex: 1;
     /* 1 */
     min-width: 1px;
@@ -62,7 +62,7 @@
     .uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
 
     .uk-child-width-auto\@s > * { width: auto; }
-    .uk-child-width-expand\@s > :not([class*='uk-width']) {
+    .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -80,7 +80,7 @@
     .uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
 
     .uk-child-width-auto\@m > * { width: auto; }
-    .uk-child-width-expand\@m > :not([class*='uk-width']) {
+    .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -98,7 +98,7 @@
     .uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
 
     .uk-child-width-auto\@l > * { width: auto; }
-    .uk-child-width-expand\@l > :not([class*='uk-width']) {
+    .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -116,7 +116,7 @@
     .uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
 
     .uk-child-width-auto\@xl > * { width: auto; }
-    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
+    .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -131,7 +131,7 @@
  * 1. `max-width` is needed for the pixel-based classes
  */
 
-[class*='uk-width'] {
+[class*="uk-width"] {
     box-sizing: border-box;
     width: 100%;
     /* 1 */

package/src/less/theme/alert.less

@@ -73,4 +73,4 @@
         text-decoration: underline;
     }
 
-}
+}

package/src/less/theme/align.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-align-misc() {}
+.hook-align-misc() {}

package/src/less/theme/animation.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-animation-misc() {}
+.hook-animation-misc() {}

package/src/less/theme/article.less

@@ -57,4 +57,4 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse-article-meta() {}
+.hook-inverse-article-meta() {}

package/src/less/theme/background.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-background-misc() {}
+.hook-background-misc() {}

package/src/less/theme/badge.less

@@ -26,4 +26,4 @@
 // ========================================================================
 
 .hook-inverse-badge() {}
-.hook-inverse-badge-hover() {}
+.hook-inverse-badge-hover() {}

package/src/less/theme/base.less

@@ -131,4 +131,4 @@
 .hook-inverse-base-blockquote() { color: @inverse-base-blockquote-color; }
 .hook-inverse-base-blockquote-footer() { color: @inverse-base-blockquote-footer-color; }
 
-.hook-inverse-base-hr() {}
+.hook-inverse-base-hr() {}

package/src/less/theme/breadcrumb.less

@@ -42,4 +42,4 @@
 .hook-inverse-breadcrumb-item-disabled() {}
 .hook-inverse-breadcrumb-item-active() {}
 
-.hook-inverse-breadcrumb-divider() {}
+.hook-inverse-breadcrumb-divider() {}

package/src/less/theme/button.less

@@ -209,4 +209,4 @@
 .hook-inverse-button-text-hover() {}
 .hook-inverse-button-text-disabled() {}
 
-.hook-inverse-button-link() {}
+.hook-inverse-button-link() {}

package/src/less/theme/card.less

@@ -220,4 +220,4 @@
 
     }
 
-}
+}

package/src/less/theme/close.less

@@ -29,4 +29,4 @@
 // ========================================================================
 
 .hook-inverse-close() {}
-.hook-inverse-close-hover() {}
+.hook-inverse-close-hover() {}

package/src/less/theme/column.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-column-misc() {}
+.hook-column-misc() {}

package/src/less/theme/comment.less

@@ -69,4 +69,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-comment-misc() {}
+.hook-comment-misc() {}

package/src/less/theme/container.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-container-misc() {}
+.hook-container-misc() {}

package/src/less/theme/description-list.less

@@ -33,4 +33,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-description-list-misc() {}
+.hook-description-list-misc() {}

package/src/less/theme/divider.less

@@ -46,4 +46,4 @@
 
 .hook-inverse-divider-small() {}
 
-.hook-inverse-divider-vertical() {}
+.hook-inverse-divider-vertical() {}

package/src/less/theme/dotnav.less

@@ -54,4 +54,4 @@
 .hook-inverse-dotnav-item() { border-color: fade(@inverse-global-color, 90%); }
 .hook-inverse-dotnav-item-hover() { border-color: transparent; }
 .hook-inverse-dotnav-item-onclick() { border-color: transparent; }
-.hook-inverse-dotnav-item-active() { border-color: transparent; }
+.hook-inverse-dotnav-item-active() { border-color: transparent; }

package/src/less/theme/drop.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-drop-misc() {}
+.hook-drop-misc() {}

package/src/less/theme/dropbar.less

@@ -41,4 +41,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-dropbar-misc() {}
+.hook-dropbar-misc() {}

package/src/less/theme/dropdown.less

@@ -56,4 +56,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-dropdown-misc() {}
+.hook-dropdown-misc() {}

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

@@ -42,4 +42,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-form-range-misc() {}
+.hook-form-range-misc() {}

package/src/less/theme/height.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-height-misc() {}
+.hook-height-misc() {}

package/src/less/theme/icon.less

@@ -50,4 +50,4 @@
 
 .hook-inverse-icon-button() {}
 .hook-inverse-icon-button-hover() {}
-.hook-inverse-icon-button-active() {}
+.hook-inverse-icon-button-active() {}

package/src/less/theme/iconnav.less

@@ -41,4 +41,4 @@
 
 .hook-inverse-iconnav-item() {}
 .hook-inverse-iconnav-item-hover() {}
-.hook-inverse-iconnav-item-active() {}
+.hook-inverse-iconnav-item-active() {}

package/src/less/theme/inverse.less

@@ -11,4 +11,4 @@
 // Component
 // ========================================================================
 
-.hook-inverse() {}
+.hook-inverse() {}

package/src/less/theme/label.less

@@ -43,4 +43,4 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse-label() {}
+.hook-inverse-label() {}

package/src/less/theme/leader.less

@@ -23,4 +23,4 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse-leader() {}
+.hook-inverse-leader() {}

package/src/less/theme/lightbox.less

@@ -47,4 +47,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-lightbox-misc() {}
+.hook-lightbox-misc() {}

package/src/less/theme/margin.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-margin-misc() {}
+.hook-margin-misc() {}

package/src/less/theme/modal.less

@@ -99,4 +99,4 @@
 
     }
 
-}
+}

package/src/less/theme/nav.less

@@ -139,4 +139,4 @@
 .hook-inverse-nav-secondary-header() {}
 .hook-inverse-nav-secondary-divider() {}
 
-.hook-inverse-nav-dividers() {}
+.hook-inverse-nav-dividers() {}

package/src/less/theme/navbar.less

@@ -148,9 +148,9 @@
 
         .uk-navbar-left,
         .uk-navbar-right,
-        [class*='uk-navbar-center'] { gap: @navbar-gap-m; }
+        [class*="uk-navbar-center"] { gap: @navbar-gap-m; }
 
-        .uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap-m})'; }
+        .uk-navbar-center-left { right: ~'calc(100% + @{navbar-gap-m})'; }
         .uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap-m})'; }
 
     }
@@ -176,4 +176,4 @@
 .hook-inverse-navbar-item() {}
 
 .hook-inverse-navbar-toggle() {}
-.hook-inverse-navbar-toggle-hover() {}
+.hook-inverse-navbar-toggle-hover() {}

package/src/less/theme/notification.less

@@ -41,4 +41,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-notification-misc() {}
+.hook-notification-misc() {}

package/src/less/theme/offcanvas.less

@@ -29,4 +29,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-offcanvas-misc() {}
+.hook-offcanvas-misc() {}

package/src/less/theme/overlay.less

@@ -30,4 +30,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-overlay-misc() {}
+.hook-overlay-misc() {}

package/src/less/theme/padding.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-padding-misc() {}
+.hook-padding-misc() {}

package/src/less/theme/pagination.less

@@ -38,4 +38,4 @@
 .hook-inverse-pagination-item() {}
 .hook-inverse-pagination-item-hover() {}
 .hook-inverse-pagination-item-active() {}
-.hook-inverse-pagination-item-disabled() {}
+.hook-inverse-pagination-item-disabled() {}