@broxus/react-uikit 0.3.1 → 0.4.1

package/dist/esm/styles/mixins.scss

@@ -296,7 +296,7 @@
     // Focus
     //
 
-    :focus { outline-color: var(--inverse-base-focus-outline); }
+    :focus,
     :focus-visible { outline-color: var(--inverse-base-focus-outline); }
 }
 
@@ -656,6 +656,19 @@
     }
 }
 
+@mixin hook-checkbox-control() {}
+@mixin hook-checkbox-wrapper() {}
+@mixin hook-checkbox-checkbox() {}
+@mixin hook-checkbox-input() {}
+@mixin hook-checkbox-inner() {}
+@mixin hook-checkbox-label() {}
+@mixin hook-checkbox-hover() {}
+@mixin hook-checkbox-checked() {}
+@mixin hook-checkbox-disabled() {}
+@mixin hook-checkbox-indeterminate() {}
+@mixin hook-checkbox-group() {}
+@mixin hook-checkbox-group-stack() {}
+
 @mixin hook-close() {}
 @mixin hook-close-hover() {}
 @mixin hook-close-misc() {}
@@ -699,6 +712,111 @@
 
 @mixin hook-container-misc() {}
 
+@mixin hook-control() {}
+@mixin hook-control-hover() {}
+@mixin hook-control-focus() {}
+@mixin hook-control-disabled() {}
+@mixin hook-control-small() {}
+@mixin hook-control-medium() {}
+@mixin hook-control-large() {}
+@mixin hook-control-success() {}
+@mixin hook-control-warning() {}
+@mixin hook-control-danger() {}
+@mixin hook-control-blank() {}
+@mixin hook-control-blank-focus() {}
+@mixin hook-control-input() {}
+@mixin hook-control-prefix() {}
+@mixin hook-control-suffix() {}
+@mixin hook-inverse-control() {}
+@mixin hook-inverse-control-hover() {}
+@mixin hook-inverse-control-focus() {}
+@mixin hook-inverse-control-disabled() {}
+@mixin hook-inverse-control-success() {}
+@mixin hook-inverse-control-warning() {}
+@mixin hook-inverse-control-danger() {}
+@mixin hook-inverse-control-blank-focus() {}
+@mixin hook-inverse-component-control() {
+    .uk-control {
+        background-color: var(--inverse-control-background);
+        border-color: var(--inverse-control-border);
+        color: var(--inverse-control-color);
+        @if mixin-exists(hook-inverse-control) {
+            @include hook-inverse-control;
+        }
+    }
+
+    // Hover state (unused for disabled state)
+    .uk-control:hover {
+        background-color: var(--inverse-control-hover-background);
+        border-color: var(--inverse-control-hover-border);
+        color: var(--inverse-control-hover-color);
+        @if mixin-exists(hook-inverse-control-hover) {
+            @include hook-inverse-control-hover;
+        }
+    }
+
+    // Focus state (unused for disabled state)
+    .uk-control:focus-within {
+        background-color: var(--inverse-control-focus-background);
+        border-color: var(--inverse-control-focus-border);
+        color: var(--inverse-control-focus-color);
+        @if mixin-exists(hook-inverse-control-focus) {
+            @include hook-inverse-control-focus;
+        }
+    }
+
+    // Disabled state
+    .uk-control.uk-disabled {
+        background-color: var(--inverse-ontrol-disabled-background);
+        border-color: var(--inverse-control-disabled-border);
+        color: var(--inverse-control-disabled-color);
+        @if mixin-exists(hook-inverse-control-disabled) {
+            @include hook-inverse-control-disabled;
+        }
+    }
+
+    // Success
+    .uk-control-success,
+    .uk-control-success:hover,
+    .uk-control-success:focus-within {
+        border-color: var(--control-success-border);
+        color: var(--control-success-color);
+        @if mixin-exists(hook-inverse-control-success) {
+            @include hook-inverse-control-success;
+        }
+    }
+
+    // Warning
+    .uk-control-warning,
+    .uk-control-warning:hover,
+    .uk-control-warning:focus-within {
+        border-color: var(--control-warning-border);
+        color: var(--control-warning-color);
+        @if mixin-exists(hook-inverse-control-warning) {
+            @include hook-inverse-control-warning;
+        }
+    }
+
+    // Danger
+    .uk-control-danger,
+    .uk-control-danger:hover,
+    .uk-control-danger:focus-within {
+        border-color: var(--control-danger-border);
+        color: var(--control-danger-color);
+        @if mixin-exists(hook-inverse-control-danger) {
+            @include hook-inverse-control-danger;
+        }
+    }
+
+    // Blank
+    .uk-control-blank:focus-within {
+        border-color: var(--control-blank-focus-border);
+        @if mixin-exists(hook-inverse-control-blank-focus) {
+            @include hook-inverse-control-blank-focus;
+        }
+    }
+}
+
 @mixin hook-cover-misc() {}
 
 @mixin hook-description-list-term() {}
@@ -803,8 +921,6 @@
 @mixin hook-drawer() {}
 @mixin hook-drawer-content-wrapper() {}
 @mixin hook-drawer-content() {}
-@mixin hook-drawer-body-wrapper() {}
-@mixin hook-drawer-body() {}
 @mixin hook-drawer-mask() {}
 @mixin hook-drawer-mask-open() {}
 
@@ -959,237 +1075,83 @@
     }
 }
 
-@mixin hook-control() {}
-@mixin hook-control-hover() {}
-@mixin hook-control-focus() {}
-@mixin hook-control-disabled() {}
-@mixin hook-control-small() {}
-@mixin hook-control-medium() {}
-@mixin hook-control-large() {}
-@mixin hook-control-success() {}
-@mixin hook-control-warning() {}
-@mixin hook-control-danger() {}
-@mixin hook-control-blank() {}
-@mixin hook-control-blank-focus() {}
-@mixin hook-control-input() {}
-@mixin hook-control-prefix() {}
-@mixin hook-control-suffix() {}
-@mixin hook-inverse-control() {}
-@mixin hook-inverse-control-hover() {}
-@mixin hook-inverse-control-focus() {}
-@mixin hook-inverse-control-disabled() {}
-@mixin hook-inverse-control-success() {}
-@mixin hook-inverse-control-warning() {}
-@mixin hook-inverse-control-danger() {}
-@mixin hook-inverse-control-blank-focus() {}
-@mixin hook-inverse-component-control() {
-    .uk-control {
-        background-color: var(--inverse-control-background);
-        border-color: var(--inverse-control-border);
-        color: var(--inverse-control-color);
-        @if mixin-exists(hook-inverse-control) {
-            @include hook-inverse-control;
+@mixin hook-grid-divider-horizontal() {}
+@mixin hook-grid-divider-vertical() {}
+@mixin hook-grid-misc() {}
+@mixin hook-inverse-grid-divider-horizontal() {}
+@mixin hook-inverse-grid-divider-vertical() {}
+@mixin hook-inverse-component-grid() {
+    .uk-grid-divider > :not(.uk-first-column)::before {
+        border-left-color: var(--inverse-grid-divider-border);
+        @if mixin-exists(hook-inverse-grid-divider-horizontal) {
+            @include hook-inverse-grid-divider-horizontal;
         }
     }
 
-    // Hover state (unused for disabled state)
-    .uk-control:hover {
-        background-color: var(--inverse-control-hover-background);
-        border-color: var(--inverse-control-hover-border);
-        color: var(--inverse-control-hover-color);
-        @if mixin-exists(hook-inverse-control-hover) {
-            @include hook-inverse-control-hover;
+    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+        border-top-color: var(--inverse-grid-divider-border);
+        @if mixin-exists(hook-inverse-grid-divider-vertical) {
+            @include hook-inverse-grid-divider-vertical;
         }
     }
+}
 
-    // Focus state (unused for disabled state)
-    .uk-control:focus-within {
-        background-color: var(--inverse-control-focus-background);
-        border-color: var(--inverse-control-focus-border);
-        color: var(--inverse-control-focus-color);
-        @if mixin-exists(hook-inverse-control-focus) {
-            @include hook-inverse-control-focus;
+@mixin hook-heading-small() {}
+@mixin hook-heading-medium() {}
+@mixin hook-heading-large() {}
+@mixin hook-heading-xlarge() {}
+@mixin hook-heading-2xlarge() {}
+@mixin hook-heading-primary() {}
+@mixin hook-heading-hero() {}
+@mixin hook-heading-divider() {}
+@mixin hook-heading-bullet() {}
+@mixin hook-heading-line() {}
+@mixin hook-heading-misc() {}
+@mixin hook-inverse-heading-small() {}
+@mixin hook-inverse-heading-medium() {}
+@mixin hook-inverse-heading-large() {}
+@mixin hook-inverse-heading-xlarge() {}
+@mixin hook-inverse-heading-2xlarge() {}
+@mixin hook-inverse-heading-primary() {}
+@mixin hook-inverse-heading-hero() {}
+@mixin hook-inverse-heading-divider() {}
+@mixin hook-inverse-heading-bullet() {}
+@mixin hook-inverse-heading-line() {}
+@mixin hook-inverse-component-heading() {
+    .uk-heading-small {
+        @if mixin-exists(hook-inverse-heading-small) {
+            @include hook-inverse-heading-small;
         }
     }
 
-    // Disabled state
-    .uk-control.uk-disabled {
-        background-color: var(--inverse-ontrol-disabled-background);
-        border-color: var(--inverse-control-disabled-border);
-        color: var(--inverse-control-disabled-color);
-        @if mixin-exists(hook-inverse-control-disabled) {
-            @include hook-inverse-control-disabled;
+    .uk-heading-medium {
+        @if mixin-exists(hook-inverse-heading-medium) {
+            @include hook-inverse-heading-medium;
         }
     }
 
-    // Success
-    .uk-control-success,
-    .uk-control-success:hover,
-    .uk-control-success:focus-within {
-        border-color: var(--control-success-border);
-        color: var(--control-success-color);
-        @if mixin-exists(hook-inverse-control-success) {
-            @include hook-inverse-control-success;
+    .uk-heading-large {
+        @if mixin-exists(hook-inverse-heading-large) {
+            @include hook-inverse-heading-large;
         }
     }
 
-    // Warning
-    .uk-control-warning,
-    .uk-control-warning:hover,
-    .uk-control-warning:focus-within {
-        border-color: var(--control-warning-border);
-        color: var(--control-warning-color);
-        @if mixin-exists(hook-inverse-control-warning) {
-            @include hook-inverse-control-warning;
+    .uk-heading-xlarge {
+        @if mixin-exists(hook-inverse-heading-xlarge) {
+            @include hook-inverse-heading-xlarge;
         }
     }
 
-    // Danger
-    .uk-control-danger,
-    .uk-control-danger:hover,
-    .uk-control-danger:focus-within {
-        border-color: var(--control-danger-border);
-        color: var(--control-danger-color);
-        @if mixin-exists(hook-inverse-control-danger) {
-            @include hook-inverse-control-danger;
+    .uk-heading-2xlarge {
+        @if mixin-exists(hook-inverse-heading-2xlarge) {
+            @include hook-inverse-heading-2xlarge;
         }
     }
 
-    // Blank
-    .uk-control-blank:focus-within {
-        border-color: var(--control-blank-focus-border);
-        @if mixin-exists(hook-inverse-control-blank-focus) {
-            @include hook-inverse-control-blank-focus;
-        }
-    }
-}
-
-@mixin hook-checkbox-wrapper() {}
-@mixin hook-checkbox-checkbox() {}
-@mixin hook-checkbox-input() {}
-@mixin hook-checkbox-inner() {}
-@mixin hook-checkbox-label() {}
-@mixin hook-checkbox-hover() {}
-@mixin hook-checkbox-checked() {}
-@mixin hook-checkbox-disabled() {}
-@mixin hook-checkbox-indeterminate() {}
-@mixin hook-checkbox-group() {}
-@mixin hook-checkbox-group-stack() {}
-@mixin hook-checkbox-control() {}
-
-@mixin hook-radio-wrapper() {}
-@mixin hook-radio-radio() {}
-@mixin hook-radio-input() {}
-@mixin hook-radio-inner() {}
-@mixin hook-radio-label() {}
-@mixin hook-radio-hover() {}
-@mixin hook-radio-checked() {}
-@mixin hook-radio-disabled() {}
-@mixin hook-radio-indeterminate() {}
-@mixin hook-radio-group() {}
-@mixin hook-radio-group-stack() {}
-@mixin hook-radio-control() {}
-
-@mixin hook-select() {}
-@mixin hook-select-selector() {}
-@mixin hook-select-selection-search-input() {}
-@mixin hook-select-selection-placeholder() {}
-@mixin hook-select-single-selector() {}
-@mixin hook-select-single-selection-search() {}
-@mixin hook-select-single-selection-search-input() {}
-@mixin hook-select-single-selection-item() {}
-@mixin hook-select-single-open-selection-item() {}
-@mixin hook-select-multiple-selector() {}
-@mixin hook-select-multiple-selection-placeholder() {}
-@mixin hook-select-multiple-selection-item() {}
-@mixin hook-select-multiple-selection-item-remove() {}
-@mixin hook-select-multiple-selection-search() {}
-@mixin hook-select-multiple-selection-search-input() {}
-@mixin hook-select-arrow() {}
-@mixin hook-select-clear() {}
-@mixin hook-select-dropdown() {}
-
-@mixin hook-control-textarea() {}
-@mixin hook-control-textarea-counter() {}
-@mixin hook-control-textarea-input() {}
-
-@mixin hook-grid-divider-horizontal() {}
-@mixin hook-grid-divider-vertical() {}
-@mixin hook-grid-misc() {}
-@mixin hook-inverse-grid-divider-horizontal() {}
-@mixin hook-inverse-grid-divider-vertical() {}
-@mixin hook-inverse-component-grid() {
-    .uk-grid-divider > :not(.uk-first-column)::before {
-        border-left-color: var(--inverse-grid-divider-border);
-        @if mixin-exists(hook-inverse-grid-divider-horizontal) {
-            @include hook-inverse-grid-divider-horizontal;
-        }
-    }
-
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
-        border-top-color: var(--inverse-grid-divider-border);
-        @if mixin-exists(hook-inverse-grid-divider-vertical) {
-            @include hook-inverse-grid-divider-vertical;
-        }
-    }
-}
-
-@mixin hook-heading-small() {}
-@mixin hook-heading-medium() {}
-@mixin hook-heading-large() {}
-@mixin hook-heading-xlarge() {}
-@mixin hook-heading-2xlarge() {}
-@mixin hook-heading-primary() {}
-@mixin hook-heading-hero() {}
-@mixin hook-heading-divider() {}
-@mixin hook-heading-bullet() {}
-@mixin hook-heading-line() {}
-@mixin hook-heading-misc() {}
-@mixin hook-inverse-heading-small() {}
-@mixin hook-inverse-heading-medium() {}
-@mixin hook-inverse-heading-large() {}
-@mixin hook-inverse-heading-xlarge() {}
-@mixin hook-inverse-heading-2xlarge() {}
-@mixin hook-inverse-heading-primary() {}
-@mixin hook-inverse-heading-hero() {}
-@mixin hook-inverse-heading-divider() {}
-@mixin hook-inverse-heading-bullet() {}
-@mixin hook-inverse-heading-line() {}
-@mixin hook-inverse-component-heading() {
-    .uk-heading-small {
-        @if mixin-exists(hook-inverse-heading-small) {
-            @include hook-inverse-heading-small;
-        }
-    }
-
-    .uk-heading-medium {
-        @if mixin-exists(hook-inverse-heading-medium) {
-            @include hook-inverse-heading-medium;
-        }
-    }
-
-    .uk-heading-large {
-        @if mixin-exists(hook-inverse-heading-large) {
-            @include hook-inverse-heading-large;
-        }
-    }
-
-    .uk-heading-xlarge {
-        @if mixin-exists(hook-inverse-heading-xlarge) {
-            @include hook-inverse-heading-xlarge;
-        }
-    }
-
-    .uk-heading-2xlarge {
-        @if mixin-exists(hook-inverse-heading-2xlarge) {
-            @include hook-inverse-heading-2xlarge;
-        }
-    }
-
-    .uk-heading-divider {
-        border-bottom-color: var(--inverse-heading-divider-border);
-        @if mixin-exists(hook-inverse-heading-divider) {
-            @include hook-inverse-heading-divider;
+    .uk-heading-divider {
+        border-bottom-color: var(--inverse-heading-divider-border);
+        @if mixin-exists(hook-inverse-heading-divider) {
+            @include hook-inverse-heading-divider;
         }
     }
 
@@ -1433,6 +1395,47 @@
     }
 }
 
+@mixin hook-marker() {}
+@mixin hook-marker-hover() {}
+@mixin hook-marker-misc() {}
+@mixin hook-inverse-marker() {}
+@mixin hook-inverse-marker-hover() {}
+@mixin hook-inverse-component-marker() {
+    .uk-marker {
+        background: var(--inverse-marker-background);
+        color: var(--inverse-marker-color);
+        @if mixin-exists(hook-inverse-marker) {
+            @include hook-inverse-marker;
+        }
+    }
+
+    .uk-marker:hover,
+    .uk-marker:focus {
+        color: var(--inverse-marker-hover-color);
+        @if mixin-exists(hook-inverse-marker-hover) {
+            @include hook-inverse-marker-hover;
+        }
+    }
+}
+
+@mixin hook-modal() {}
+@mixin hook-modal-content() {}
+@mixin hook-modal-mask() {}
+@mixin hook-modal-full() {}
+@mixin hook-modal-header() {}
+@mixin hook-modal-body() {}
+@mixin hook-modal-footer() {}
+@mixin hook-modal-title() {}
+@mixin hook-modal-close() {}
+@mixin hook-modal-close-hover() {}
+@mixin hook-modal-close-default() {}
+@mixin hook-modal-close-default-hover() {}
+@mixin hook-modal-close-outside() {}
+@mixin hook-modal-close-outside-hover() {}
+@mixin hook-modal-close-full() {}
+@mixin hook-modal-close-full-hover() {}
+@mixin hook-modal-misc() {}
+
 @mixin hook-nav-sub() {}
 @mixin hook-nav-header() {}
 @mixin hook-nav-divider() {}
@@ -1761,145 +1764,199 @@
 @mixin hook-overlay-primary() {}
 @mixin hook-overlay-misc() {}
 
+@mixin hook-pagination() {}
+@mixin hook-pagination-item() {}
+@mixin hook-pagination-item-hover() {}
+@mixin hook-pagination-item-active() {}
+@mixin hook-pagination-item-disabled() {}
+@mixin hook-pagination-misc() {}
+@mixin hook-inverse-pagination-item() {}
+@mixin hook-inverse-pagination-item-hover() {}
+@mixin hook-inverse-pagination-item-active() {}
+@mixin hook-inverse-pagination-item-disabled() {}
+@mixin hook-inverse-component-pagination() {
+    .uk-pagination > * > * {
+        color: var(--inverse-pagination-item-color);
+        @if mixin-exists(hook-inverse-pagination-item) {
+            @include hook-inverse-pagination-item;
+        }
+    }
+
+    .uk-pagination > * > :hover,
+    .uk-pagination > * > :focus {
+        color: var(--inverse-pagination-item-hover-color);
+        @if mixin-exists(hook-inverse-pagination-item-hover) {
+            @include hook-inverse-pagination-item-hover;
+        }
+    }
+
+    .uk-pagination > .uk-active > * {
+        color: var(--inverse-pagination-item-active-color);
+        @if mixin-exists(hook-inverse-pagination-item-active) {
+            @include hook-inverse-pagination-item-active;
+        }
+    }
+
+    .uk-pagination > .uk-disabled > * {
+        color: var(--inverse-pagination-item-disabled-color);
+        @if mixin-exists(hook-inverse-pagination-item-disabled) {
+            @include hook-inverse-pagination-item-disabled;
+        }
+    }
+}
+
+@mixin hook-placeholder() {}
+@mixin hook-placeholder-misc() {}
+
 @mixin hook-position-misc() {}
 
 @mixin hook-print() {}
 
-@mixin hook-section() {}
-@mixin hook-section-default() {}
-@mixin hook-section-muted() {}
-@mixin hook-section-primary() {}
-@mixin hook-section-secondary() {}
-@mixin hook-section-tertiary() {}
-@mixin hook-section-overlap() {}
-@mixin hook-section-misc() {}
+@mixin hook-progress() {}
+@mixin hook-progress-bar() {}
+@mixin hook-progress-misc() {}
 
-@mixin hook-text-lead() {}
-@mixin hook-text-meta() {}
-@mixin hook-text-small() {}
-@mixin hook-text-large() {}
-@mixin hook-text-background() {}
-@mixin hook-text-misc() {}
-@mixin hook-inverse-text-lead() {}
-@mixin hook-inverse-text-meta() {}
-@mixin hook-inverse-component-text() {
-    .uk-text-lead {
-        color: var(--inverse-text-lead-color);
-        @if mixin-exists(hook-inverse-text-lead) {
-            @include hook-inverse-text-lead;
-        }
+@mixin hook-radio-control() {}
+@mixin hook-radio-wrapper() {}
+@mixin hook-radio-radio() {}
+@mixin hook-radio-input() {}
+@mixin hook-radio-inner() {}
+@mixin hook-radio-label() {}
+@mixin hook-radio-hover() {}
+@mixin hook-radio-checked() {}
+@mixin hook-radio-disabled() {}
+@mixin hook-radio-indeterminate() {}
+@mixin hook-radio-group() {}
+@mixin hook-radio-group-stack() {}
+
+@mixin hook-search-input() {}
+@mixin hook-search-icon() {}
+@mixin hook-search-default-input() {}
+@mixin hook-search-default-input-focus() {}
+@mixin hook-search-navbar-input() {}
+@mixin hook-search-navbar-input-focus() {}
+@mixin hook-search-large-input() {}
+@mixin hook-search-large-input-focus() {}
+@mixin hook-search-toggle() {}
+@mixin hook-search-toggle-hover() {}
+@mixin hook-search-misc() {}
+@mixin hook-inverse-search-default-input() {}
+@mixin hook-inverse-search-default-input-focus() {}
+@mixin hook-inverse-search-navbar-input() {}
+@mixin hook-inverse-search-navbar-input-focus() {}
+@mixin hook-inverse-search-large-input() {}
+@mixin hook-inverse-search-large-input-focus() {}
+@mixin hook-inverse-search-toggle() {}
+@mixin hook-inverse-search-toggle-hover() {}
+@mixin hook-inverse-component-search() {
+    //
+    // Input
+    //
+
+    .uk-search-input {
+        color: var(--inverse-search-color);
     }
 
-    .uk-text-meta {
-        color: var(--inverse-text-meta-color);
-        @if mixin-exists(hook-inverse-text-meta) {
-            @include hook-inverse-text-meta;
-        }
+    .uk-search-input:-ms-input-placeholder {
+        color: var(--inverse-search-placeholder-color) !important;
     }
 
-    .uk-text-muted { color: var(--inverse-text-muted-color) !important; }
-    .uk-text-emphasis { color: var(--inverse-text-emphasis-color) !important; }
-    .uk-text-primary { color: var(--inverse-text-primary-color) !important; }
-    .uk-text-secondary { color: var(--inverse-text-secondary-color) !important; }
-    .uk-text-tertiary { color: var(--inverse-text-tertiary-color) !important; }
-}
+    .uk-search-input::placeholder {
+        color: var(--inverse-search-placeholder-color);
+    }
 
-@mixin hook-tile() {}
-@mixin hook-tile-default() {}
-@mixin hook-tile-default-hover() {}
-@mixin hook-tile-muted() {}
-@mixin hook-tile-muted-hover() {}
-@mixin hook-tile-primary() {}
-@mixin hook-tile-primary-hover() {}
-@mixin hook-tile-secondary() {}
-@mixin hook-tile-secondary-hover() {}
-@mixin hook-tile-tertiary() {}
-@mixin hook-tile-tertiary-hover() {}
-@mixin hook-tile-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 mixin-exists(hook-inverse-dropcap) {
-            @include hook-inverse-dropcap;
-        }
+    //
+    // Icon
+    //
+
+    .uk-search .uk-search-icon {
+        color: var(--inverse-search-icon-color);
     }
 
-    .uk-logo {
-        color: var(--inverse-logo-color);
-        @if mixin-exists(hook-inverse-logo) {
-            @include hook-inverse-logo;
+    .uk-search .uk-search-icon:hover {
+        color: var(--inverse-search-icon-color);
+    }
+
+    //
+    // Style modifier
+    //
+
+    .uk-search-default .uk-search-input {
+        background-color: var(--inverse-search-default-background);
+        @if mixin-exists(hook-inverse-search-default-input) {
+            @include hook-inverse-search-default-input;
         }
     }
 
-    .uk-logo:hover,
-    .uk-logo:focus {
-        color: var(--inverse-logo-hover-color);
-        @if mixin-exists(hook-inverse-logo-hover) {
-            @include hook-inverse-logo-hover;
+    .uk-search-default .uk-search-input:focus {
+        background-color: var(--inverse-search-default-focus-background);
+        @if mixin-exists(hook-inverse-search-default-input-focus) {
+            @include hook-inverse-search-default-input-focus;
         }
     }
 
-    .uk-logo > :not(.uk-logo-inverse, :only-of-type) {
-        display: none;
+    .uk-search-navbar .uk-search-input {
+        background-color: var(--inverse-search-navbar-background);
+        @if mixin-exists(hook-inverse-search-navbar-input) {
+            @include hook-inverse-search-navbar-input;
+        }
     }
 
-    .uk-logo-inverse {
-        display: inline;
+    .uk-search-large .uk-search-input {
+        background-color: var(--inverse-search-large-background);
+        @if mixin-exists(hook-inverse-search-large-input) {
+            @include hook-inverse-search-large-input;
+        }
     }
-}
 
-@mixin hook-marker() {}
-@mixin hook-marker-hover() {}
-@mixin hook-marker-misc() {}
-@mixin hook-inverse-marker() {}
-@mixin hook-inverse-marker-hover() {}
-@mixin hook-inverse-component-marker() {
-    .uk-marker {
-        background: var(--inverse-marker-background);
-        color: var(--inverse-marker-color);
-        @if mixin-exists(hook-inverse-marker) {
-            @include hook-inverse-marker;
+    //
+    // Toggle
+    //
+
+    .uk-search-toggle {
+        color: var(--inverse-search-toggle-color);
+        @if mixin-exists(hook-inverse-search-toggle) {
+            @include hook-inverse-search-toggle;
         }
     }
 
-    .uk-marker:hover,
-    .uk-marker:focus {
-        color: var(--inverse-marker-hover-color);
-        @if mixin-exists(hook-inverse-marker-hover) {
-            @include hook-inverse-marker-hover;
+    .uk-search-toggle:hover,
+    .uk-search-toggle:focus {
+        color: var(--inverse-search-toggle-hover-color);
+        @if mixin-exists(hook-inverse-search-toggle-hover) {
+            @include hook-inverse-search-toggle-hover;
         }
     }
 }
 
-@mixin hook-modal() {}
-@mixin hook-modal-content() {}
-@mixin hook-modal-mask() {}
-@mixin hook-modal-full() {}
-@mixin hook-modal-header() {}
-@mixin hook-modal-body() {}
-@mixin hook-modal-footer() {}
-@mixin hook-modal-title() {}
-@mixin hook-modal-close() {}
-@mixin hook-modal-close-hover() {}
-@mixin hook-modal-close-default() {}
-@mixin hook-modal-close-default-hover() {}
-@mixin hook-modal-close-outside() {}
-@mixin hook-modal-close-outside-hover() {}
-@mixin hook-modal-close-full() {}
-@mixin hook-modal-close-full-hover() {}
-@mixin hook-modal-misc() {}
+@mixin hook-select() {}
+@mixin hook-select-selector() {}
+@mixin hook-select-selection-search-input() {}
+@mixin hook-select-selection-placeholder() {}
+@mixin hook-select-single-selector() {}
+@mixin hook-select-single-selection-search() {}
+@mixin hook-select-single-selection-search-input() {}
+@mixin hook-select-single-selection-item() {}
+@mixin hook-select-single-open-selection-item() {}
+@mixin hook-select-multiple-selector() {}
+@mixin hook-select-multiple-selection-placeholder() {}
+@mixin hook-select-multiple-selection-item() {}
+@mixin hook-select-multiple-selection-item-remove() {}
+@mixin hook-select-multiple-selection-search() {}
+@mixin hook-select-multiple-selection-search-input() {}
+@mixin hook-select-arrow() {}
+@mixin hook-select-clear() {}
+@mixin hook-select-dropdown() {}
 
-@mixin hook-width-misc() {}
+@mixin hook-section() {}
+@mixin hook-section-default() {}
+@mixin hook-section-muted() {}
+@mixin hook-section-primary() {}
+@mixin hook-section-secondary() {}
+@mixin hook-section-tertiary() {}
+@mixin hook-section-overlap() {}
+@mixin hook-section-misc() {}
 
 @mixin hook-spinner() {}
 @mixin hook-spinner-misc() {}
@@ -2007,6 +2064,15 @@
     }
 }
 
+@mixin hook-switch() {}
+@mixin hook-switch-handle() {}
+@mixin hook-switch-checked() {}
+@mixin hook-switch-checked-handle() {}
+@mixin hook-switch-disabled() {}
+@mixin hook-switch-misc() {}
+
+@mixin hook-switcher-misc() {}
+
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
 @mixin hook-tabs-tab-hover() {}
@@ -2076,11 +2142,11 @@
 @mixin hook-table-small() {}
 @mixin hook-table-large() {}
 @mixin hook-table-misc() {}
-@mixin hook-inverse-table-header-cell() {  }
-@mixin hook-inverse-table-caption() {  }
-@mixin hook-inverse-table-row-active() {  }
-@mixin hook-inverse-table-divider() {  }
-@mixin hook-inverse-table-striped() {  }
+@mixin hook-inverse-table-header-cell() {}
+@mixin hook-inverse-table-caption() {}
+@mixin hook-inverse-table-row-active() {}
+@mixin hook-inverse-table-divider() {}
+@mixin hook-inverse-table-striped() {}
 @mixin hook-inverse-table-hover() {}
 @mixin hook-inverse-component-table() {
     .uk-table th {
@@ -2131,6 +2197,130 @@
     }
 }
 
+@mixin hook-text-lead() {}
+@mixin hook-text-meta() {}
+@mixin hook-text-small() {}
+@mixin hook-text-large() {}
+@mixin hook-text-background() {}
+@mixin hook-text-misc() {}
+@mixin hook-inverse-text-lead() {}
+@mixin hook-inverse-text-meta() {}
+@mixin hook-inverse-component-text() {
+    .uk-text-lead {
+        color: var(--inverse-text-lead-color);
+        @if mixin-exists(hook-inverse-text-lead) {
+            @include hook-inverse-text-lead;
+        }
+    }
+
+    .uk-text-meta {
+        color: var(--inverse-text-meta-color);
+        @if mixin-exists(hook-inverse-text-meta) {
+            @include hook-inverse-text-meta;
+        }
+    }
+
+    .uk-text-muted { color: var(--inverse-text-muted-color) !important; }
+    .uk-text-emphasis { color: var(--inverse-text-emphasis-color) !important; }
+    .uk-text-primary { color: var(--inverse-text-primary-color) !important; }
+    .uk-text-secondary { color: var(--inverse-text-secondary-color) !important; }
+    .uk-text-tertiary { color: var(--inverse-text-tertiary-color) !important; }
+}
+
+@mixin hook-textarea-control() {}
+@mixin hook-textarea-counter() {}
+@mixin hook-textarea() {}
+
+@mixin hook-thumbnav() {}
+@mixin hook-thumbnav-item() {}
+@mixin hook-thumbnav-item-hover() {}
+@mixin hook-thumbnav-item-active() {}
+@mixin hook-thumbnav-misc() {}
+@mixin hook-inverse-thumbnav-item() {}
+@mixin hook-inverse-thumbnav-item-hover() {}
+@mixin hook-inverse-thumbnav-item-active() {}
+@mixin hook-inverse-component-thumbnav() {
+    .uk-thumbnav > * > * {
+        @if mixin-exists(hook-inverse-thumbnav-item) {
+            @include hook-inverse-thumbnav-item;
+        }
+    }
+
+    .uk-thumbnav > * > :hover,
+    .uk-thumbnav > * > :focus {
+        @if mixin-exists(hook-inverse-thumbnav-item-hover) {
+            @include hook-inverse-thumbnav-item-hover;
+        }
+    }
+
+    .uk-thumbnav > .uk-active > * {
+        @if mixin-exists(hook-inverse-thumbnav-item-active) {
+            @include hook-inverse-thumbnav-item-active;
+        }
+    }
+}
+
+@mixin hook-tile() {}
+@mixin hook-tile-default() {}
+@mixin hook-tile-default-hover() {}
+@mixin hook-tile-muted() {}
+@mixin hook-tile-muted-hover() {}
+@mixin hook-tile-primary() {}
+@mixin hook-tile-primary-hover() {}
+@mixin hook-tile-secondary() {}
+@mixin hook-tile-secondary-hover() {}
+@mixin hook-tile-tertiary() {}
+@mixin hook-tile-tertiary-hover() {}
+@mixin hook-tile-misc() {}
+
+@mixin hook-tooltip() {}
+@mixin hook-tooltip-misc() {}
+
+@mixin hook-transition-misc() {}
+
+@mixin hook-width-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 mixin-exists(hook-inverse-dropcap) {
+            @include hook-inverse-dropcap;
+        }
+    }
+
+    .uk-logo {
+        color: var(--inverse-logo-color);
+        @if mixin-exists(hook-inverse-logo) {
+            @include hook-inverse-logo;
+        }
+    }
+
+    .uk-logo:hover,
+    .uk-logo:focus {
+        color: var(--inverse-logo-hover-color);
+        @if mixin-exists(hook-inverse-logo-hover) {
+            @include hook-inverse-logo-hover;
+        }
+    }
+
+    .uk-logo > :not(.uk-logo-inverse, :only-of-type) {
+        display: none;
+    }
+
+    .uk-logo-inverse {
+        display: inline;
+    }
+}
+
 
 @mixin hook-inverse() {
     @include hook-inverse-component-base;
@@ -2153,7 +2343,7 @@
     @include hook-inverse-component-leader;
     @include hook-inverse-component-article;
 
-    // @include hook-inverse-component-search;
+    @include hook-inverse-component-search;
     @include hook-inverse-component-accordion;
     @include hook-inverse-component-dropdown;
     @include hook-inverse-component-nav;
@@ -2162,7 +2352,7 @@
     @include hook-inverse-component-subnav;
     @include hook-inverse-component-breadcrumb;
 
-    // @include hook-inverse-component-pagination;
+    @include hook-inverse-component-pagination;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;