@broxus/react-uikit 0.3.0 → 0.4.0

package/dist/cjs/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,239 +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;
         }
     }
 
@@ -1435,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() {}
@@ -1757,10 +1758,197 @@
     }
 }
 
+@mixin hook-overlay() {}
+@mixin hook-overlay-icon() {}
+@mixin hook-overlay-default() {}
+@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-progress() {}
+@mixin hook-progress-bar() {}
+@mixin hook-progress-misc() {}
+
+@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-search-input:-ms-input-placeholder {
+        color: var(--inverse-search-placeholder-color) !important;
+    }
+
+    .uk-search-input::placeholder {
+        color: var(--inverse-search-placeholder-color);
+    }
+
+
+    //
+    // Icon
+    //
+
+    .uk-search .uk-search-icon {
+        color: var(--inverse-search-icon-color);
+    }
+
+    .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-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-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-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;
+        }
+    }
+
+    //
+    // Toggle
+    //
+
+    .uk-search-toggle {
+        color: var(--inverse-search-toggle-color);
+        @if mixin-exists(hook-inverse-search-toggle) {
+            @include hook-inverse-search-toggle;
+        }
+    }
+
+    .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-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-section() {}
 @mixin hook-section-default() {}
 @mixin hook-section-muted() {}
@@ -1770,6 +1958,245 @@
 @mixin hook-section-overlap() {}
 @mixin hook-section-misc() {}
 
+@mixin hook-spinner() {}
+@mixin hook-spinner-misc() {}
+
+@mixin hook-subnav() {}
+@mixin hook-subnav-item() {}
+@mixin hook-subnav-item-hover() {}
+@mixin hook-subnav-item-active() {}
+@mixin hook-subnav-divider() {}
+@mixin hook-subnav-pill-item() {}
+@mixin hook-subnav-pill-item-hover() {}
+@mixin hook-subnav-pill-item-onclick() {}
+@mixin hook-subnav-pill-item-active() {}
+@mixin hook-subnav-item-disabled() {}
+@mixin hook-subnav-misc() {}
+@mixin hook-inverse-subnav-item() {}
+@mixin hook-inverse-subnav-item-hover() {}
+@mixin hook-inverse-subnav-item-active() {}
+@mixin hook-inverse-subnav-divider() {}
+@mixin hook-inverse-subnav-pill-item() {}
+@mixin hook-inverse-subnav-pill-item-hover() {}
+@mixin hook-inverse-subnav-pill-item-onclick() {}
+@mixin hook-inverse-subnav-pill-item-active() {}
+@mixin hook-inverse-subnav-item-disabled() {}
+@mixin hook-inverse-component-subnav() {
+    .uk-subnav > * > :first-child {
+        color: var(--inverse-subnav-item-color);
+        @if mixin-exists(hook-inverse-subnav-item) {
+            @include hook-inverse-subnav-item;
+        }
+    }
+
+    .uk-subnav > * > a:hover,
+    .uk-subnav > * > a:focus {
+        color: var(--inverse-subnav-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-item-hover) {
+            @include hook-inverse-subnav-item-hover;
+        }
+    }
+
+    .uk-subnav > .uk-active > a {
+        color: var(--inverse-subnav-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-item-active) {
+            @include hook-inverse-subnav-item-active;
+        }
+    }
+
+    //
+    // Divider
+    //
+
+    .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
+        border-left-color: var(--inverse-subnav-divider-border);
+        @if mixin-exists(hook-inverse-subnav-divider) {
+            @include hook-inverse-subnav-divider;
+        }
+    }
+
+    //
+    // Pill
+    //
+
+    .uk-subnav-pill > * > :first-child {
+        background-color: var(--inverse-subnav-pill-item-background);
+        color: var(--inverse-subnav-pill-item-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item) {
+            @include hook-inverse-subnav-pill-item;
+        }
+    }
+
+    .uk-subnav-pill > * > a:hover,
+    .uk-subnav-pill > * > a:focus {
+        background-color: var(--inverse-subnav-pill-item-hover-background);
+        color: var(--inverse-subnav-pill-item-hover-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-hover) {
+            @include hook-inverse-subnav-pill-item-hover;
+        }
+    }
+
+    .uk-subnav-pill > * > a:active {
+        background-color: var(--inverse-subnav-pill-item-onclick-background);
+        color: var(--inverse-subnav-pill-item-onclick-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-onclick) {
+            @include hook-inverse-subnav-pill-item-onclick;
+        }
+    }
+
+    .uk-subnav-pill > .uk-active > a {
+        background-color: var(--inverse-subnav-pill-item-active-background);
+        color: var(--inverse-subnav-pill-item-active-color);
+        @if mixin-exists(hook-inverse-subnav-pill-item-active) {
+            @include hook-inverse-subnav-pill-item-active;
+        }
+    }
+
+    //
+    // Disabled
+    //
+
+    .uk-subnav > .uk-disabled > a {
+        color: var(--inverse-subnav-item-disabled-color);
+        @if mixin-exists(hook-inverse-subnav-item-disabled) {
+            @include hook-inverse-subnav-item-disabled;
+        }
+    }
+}
+
+@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() {}
+@mixin hook-tabs-tab-active() {}
+@mixin hook-tabs-tab-disabled() {}
+@mixin hook-tabs-top() {}
+@mixin hook-tabs-top-tab() {}
+@mixin hook-tabs-bottom() {}
+@mixin hook-tabs-bottom-tab() {}
+@mixin hook-tabs-left() {}
+@mixin hook-tabs-left-tab() {}
+@mixin hook-tabs-right() {}
+@mixin hook-tabs-right-tab() {}
+@mixin hook-tabs-dropdown-menu() {}
+@mixin hook-tabs-misc() {}
+@mixin hook-inverse-tabs() {}
+@mixin hook-inverse-tabs-tab() {}
+@mixin hook-inverse-tabs-tab-hover() {}
+@mixin hook-inverse-tabs-tab-active() {}
+@mixin hook-inverse-tabs-tab-disabled() {}
+@mixin hook-inverse-component-tabs() {
+    .uk-tabs {
+        @if mixin-exists(hook-inverse-tabs) {
+            @include hook-inverse-tabs;
+        }
+    }
+
+    .uk-tabs > * > a {
+        color: var(--inverse-tabs-tab-color);
+        @if mixin-exists(hook-inverse-tabs-tab) {
+            @include hook-inverse-tabs-tab;
+        }
+    }
+
+    .uk-tabs > * > a:hover,
+    .uk-tabs > * > a:focus {
+        color: var(--inverse-tabs-tab-hover-color);
+        @if mixin-exists(hook-inverse-tabs-tab-hover) {
+            @include hook-inverse-tabs-tab-hover;
+        }
+    }
+
+    .uk-tabs > .uk-active > a {
+        color: var(--inverse-tabs-tab-active-color);
+        @if mixin-exists(hook-inverse-tabs-tab-active) {
+            @include hook-inverse-tabs-tab-active;
+        }
+    }
+
+    .uk-tabs > .uk-disabled > a {
+        color: var(--inverse-tabs-tab-disabled-color);
+        @if mixin-exists(hook-inverse-tabs-tab-disabled) {
+            @include hook-inverse-tabs-tab-disabled;
+        }
+    }
+}
+
+@mixin hook-table() {}
+@mixin hook-table-header-cell() {}
+@mixin hook-table-cell() {}
+@mixin hook-table-footer() {}
+@mixin hook-table-caption() {}
+@mixin hook-table-row-active() {}
+@mixin hook-table-divider() {}
+@mixin hook-table-striped() {}
+@mixin hook-table-hover() {}
+@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-hover() {}
+@mixin hook-inverse-component-table() {
+    .uk-table th {
+        color: var(--inverse-table-header-cell-color);
+        @if mixin-exists(hook-inverse-table-header-cell) {
+            @include hook-inverse-table-header-cell;
+        }
+    }
+
+    .uk-table caption {
+        color: var(--inverse-table-caption-color);
+        @if mixin-exists(hook-inverse-table-caption) {
+            @include hook-inverse-table-caption;
+        }
+    }
+
+    .uk-table > tr.uk-active,
+    .uk-table tbody tr.uk-active {
+        background: var(--inverse-table-row-active-background);
+        @if mixin-exists(hook-inverse-table-row-active) {
+            @include hook-inverse-table-row-active;
+        }
+    }
+
+    .uk-table-divider > tr:not(:first-child),
+    .uk-table-divider > :not(:first-child) > tr,
+    .uk-table-divider > :first-child > tr:not(:first-child) {
+        border-top-color: var(--inverse-table-divider-border);
+        @if mixin-exists(hook-inverse-table-divider) {
+            @include hook-inverse-table-divider;
+        }
+    }
+
+    .uk-table-striped > tr:nth-of-type(odd),
+    .uk-table-striped tbody tr:nth-of-type(odd) {
+        background: var(--inverse-table-striped-row-background);
+        @if mixin-exists(hook-inverse-table-striped) {
+            @include hook-inverse-table-striped;
+        }
+    }
+
+    .uk-table-hover > tr:hover,
+    .uk-table-hover tbody tr:hover {
+        background: var(--inverse-table-hover-row-background);
+        @if mixin-exists(hook-inverse-table-hover) {
+            @include hook-inverse-table-hover;
+        }
+    }
+}
+
 @mixin hook-text-lead() {}
 @mixin hook-text-meta() {}
 @mixin hook-text-small() {}
@@ -1800,6 +2227,39 @@
     .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() {}
@@ -1813,6 +2273,13 @@
 @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() {}
@@ -1854,86 +2321,6 @@
     }
 }
 
-@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-width-misc() {}
-
-@mixin hook-spinner() {}
-@mixin hook-spinner-misc() {}
-
-@mixin hook-tabs() {}
-@mixin hook-tabs-tab() {}
-@mixin hook-tabs-tab-hover() {}
-@mixin hook-tabs-tab-active() {}
-@mixin hook-tabs-tab-disabled() {}
-@mixin hook-tabs-top() {}
-@mixin hook-tabs-top-tab() {}
-@mixin hook-tabs-bottom() {}
-@mixin hook-tabs-bottom-tab() {}
-@mixin hook-tabs-left() {}
-@mixin hook-tabs-left-tab() {}
-@mixin hook-tabs-right() {}
-@mixin hook-tabs-right-tab() {}
-@mixin hook-tabs-dropdown-menu() {}
-@mixin hook-tabs-misc() {}
-@mixin hook-inverse-tabs() {}
-@mixin hook-inverse-tabs-tab() {}
-@mixin hook-inverse-tabs-tab-hover() {}
-@mixin hook-inverse-tabs-tab-active() {}
-@mixin hook-inverse-tabs-tab-disabled() {}
-@mixin hook-inverse-component-tabs() {
-    .uk-tabs {
-        @if mixin-exists(hook-inverse-tabs) {
-            @include hook-inverse-tabs;
-        }
-    }
-
-    .uk-tabs > * > a {
-        color: var(--inverse-tabs-tab-color);
-        @if mixin-exists(hook-inverse-tabs-tab) {
-            @include hook-inverse-tabs-tab;
-        }
-    }
-
-    .uk-tabs > * > a:hover,
-    .uk-tabs > * > a:focus {
-        color: var(--inverse-tabs-tab-hover-color);
-        @if mixin-exists(hook-inverse-tabs-tab-hover) {
-            @include hook-inverse-tabs-tab-hover;
-        }
-    }
-
-    .uk-tabs > .uk-active > a {
-        color: var(--inverse-tabs-tab-active-color);
-        @if mixin-exists(hook-inverse-tabs-tab-active) {
-            @include hook-inverse-tabs-tab-active;
-        }
-    }
-
-    .uk-tabs > .uk-disabled > a {
-        color: var(--inverse-tabs-tab-disabled-color);
-        @if mixin-exists(hook-inverse-tabs-tab-disabled) {
-            @include hook-inverse-tabs-tab-disabled;
-        }
-    }
-}
-
 
 @mixin hook-inverse() {
     @include hook-inverse-component-base;
@@ -1956,17 +2343,18 @@
     @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;
     @include hook-inverse-component-navbar;
 
-    // @include hook-inverse-component-subnav;
+    @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;
 
     // @include hook-inverse-component-slidenav;
     @include hook-inverse-component-dotnav;
@@ -1974,4 +2362,5 @@
     @include hook-inverse-component-text;
     @include hook-inverse-component-column;
     @include hook-inverse-component-utility;
+    @include hook-inverse-component-marker;
 }