@broxus/react-uikit 0.14.0 → 0.15.0

package/dist/esm/components/Tile/index.scss

@@ -124,6 +124,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: #{$tile-default-color-mode};
     background: var(--tile-default-background);
     @if mixin-exists(hook-tile-default) {
         @include hook-tile-default;
@@ -136,11 +137,25 @@
     }
 }
 
+// Color Mode
+@if $tile-default-color-mode == light {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-default-color-mode == dark {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Muted
  */
 
 .uk-tile-muted {
+    --uk-inverse: #{$tile-muted-color-mode};
     background: var(--tile-muted-background);
     @if mixin-exists(hook-tile-muted) {
         @include hook-tile-muted;
@@ -153,11 +168,25 @@
     }
 }
 
+// Color Mode
+@if $tile-default-color-mode == light {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-default-color-mode == dark {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
 /*
  * Primary
  */
 
 .uk-tile-primary {
+    --uk-inverse: #{$tile-primary-color-mode};
     background: var(--tile-primary-background);
     @if mixin-exists(hook-tile-primary) {
         @include hook-tile-primary;
@@ -188,6 +217,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: #{$tile-secondary-color-mode};
     background: var(--tile-secondary-background);
     @if mixin-exists(hook-tile-secondary) {
         @include hook-tile-secondary;
@@ -218,6 +248,7 @@
  */
 
 .uk-tile-tertiary {
+    --uk-inverse: #{$tile-tertiary-color-mode};
     background: var(--tile-tertiary-background);
     @if mixin-exists(hook-tile-tertiary) {
         @include hook-tile-tertiary;

package/dist/esm/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/Spinner';
 export * from './components/Alert';
 export * from './components/Badge';
 export * from './components/Label';
+export * from './components/Overlay';
 export * from './components/Article';
 export * from './components/Section';
 export * from './components/Container';
@@ -34,6 +35,7 @@ export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
 export * from './components/ConfigProvider';
+export * from './components/Inverse';
 export * from './components/Width';
 export * from './components/Text';
 export * from './components/Cover';

package/dist/esm/index.js

@@ -14,6 +14,7 @@ export * from './components/Spinner';
 export * from './components/Alert';
 export * from './components/Badge';
 export * from './components/Label';
+export * from './components/Overlay';
 export * from './components/Article';
 export * from './components/Section';
 export * from './components/Container';
@@ -34,6 +35,7 @@ export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
 export * from './components/ConfigProvider';
+export * from './components/Inverse';
 export * from './components/Width';
 export * from './components/Text';
 export * from './components/Cover';

package/dist/esm/styles/_import.scss

@@ -34,7 +34,7 @@
 @import 'badge.scss';
 @import 'label.scss';
 
-// @import 'overlay.scss'; // After: Icon
+@import 'overlay.scss'; // After: Icon
 @import 'article.scss'; // After: Subnav
 // @import 'comment.scss';
 // @import 'search.scss'; // After: Icon

package/dist/esm/styles/inverse.scss

@@ -39,6 +39,14 @@
     }
 }
 
+* { --uk-inverse: initial; }
+
+.uk-light { --uk-inverse: light; }
+.uk-dark { --uk-inverse: dark; }
+
+.uk-inverse-light { --uk-inverse: light !important; }
+.uk-inverse-dark { --uk-inverse: dark !important; }
+
 
 // Vars
 // ========================================================================

package/dist/esm/styles/mixins.scss

@@ -357,22 +357,27 @@
 @mixin hook-button-hover() {}
 @mixin hook-button-focus() {}
 @mixin hook-button-active() {}
+@mixin hook-button-disabled() {}
 @mixin hook-button-default() {}
 @mixin hook-button-default-hover() {}
 @mixin hook-button-default-active() {}
+@mixin hook-button-default-disabled() {}
 @mixin hook-button-primary() {}
 @mixin hook-button-primary-hover() {}
 @mixin hook-button-primary-active() {}
+@mixin hook-button-primary-disabled() {}
 @mixin hook-button-secondary() {}
 @mixin hook-button-secondary-hover() {}
 @mixin hook-button-secondary-active() {}
+@mixin hook-button-secondary-disabled() {}
 @mixin hook-button-tertiary() {}
 @mixin hook-button-tertiary-hover() {}
 @mixin hook-button-tertiary-active() {}
+@mixin hook-button-tertiary-disabled() {}
 @mixin hook-button-danger() {}
 @mixin hook-button-danger-hover() {}
 @mixin hook-button-danger-active() {}
-@mixin hook-button-disabled() {}
+@mixin hook-button-danger-disabled() {}
 @mixin hook-button-xsmall() {}
 @mixin hook-button-small() {}
 @mixin hook-button-medium() {}
@@ -847,7 +852,7 @@
 @mixin hook-inverse-component-divider() {
     .uk-divider-icon {
         @if mixin-exists(svg-fill) {
-            @include svg-fill($divider-icon-image-path, '#000', $inverse-divider-icon-color);
+            @include svg-fill($internal-divider-icon-image, '#000', $inverse-divider-icon-color);
         }
         @if mixin-exists(hook-inverse-divider-icon) {
             @include hook-inverse-divider-icon;
@@ -2072,9 +2077,12 @@
 @mixin hook-switch-checked-handle() {}
 @mixin hook-switch-disabled() {}
 @mixin hook-switch-misc() {}
-
-@mixin hook-switcher-misc() {}
-@mixin hook-inverse-component-switcher() {}
+@mixin hook-inverse-switch() {}
+@mixin hook-inverse-switch-handle() {}
+@mixin hook-inverse-switch-checked() {}
+@mixin hook-inverse-switch-checked-handle() {}
+@mixin hook-inverse-switch-disabled() {}
+@mixin hook-inverse-component-switch() {}
 
 @mixin hook-tabs() {}
 @mixin hook-tabs-tab() {}
@@ -2359,6 +2367,7 @@
     }
 }
 
+@mixin hook-inverse-misc() {}
 
 @mixin hook-inverse() {
     @include hook-inverse-component-base;
@@ -2391,7 +2400,7 @@
     @include hook-inverse-component-breadcrumb;
 
     @include hook-inverse-component-pagination;
-    @include hook-inverse-component-switcher;
+    @include hook-inverse-component-switch;
     @include hook-inverse-component-tabs;
     @include hook-inverse-component-table;
 
@@ -2402,4 +2411,6 @@
     @include hook-inverse-component-column;
     @include hook-inverse-component-utility;
     @include hook-inverse-component-marker;
+
+    @include hook-inverse-misc;
 }

package/dist/esm/styles/overlay.scss

@@ -1,105 +1 @@
-// Name:            Overlay
-// Description:     Component to create content areas overlaying an image
-//
-// Component:       `uk-overlay`
-//
-// Adopted:         `uk-overlay-icon`
-//
-// Modifier:        `uk-overlay-default`
-//                  `uk-overlay-primary`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import 'variables.scss';
-
-
-/* ========================================================================
-   Component: Overlay
- ========================================================================== */
-
-.uk-overlay {
-    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
-    @if mixin-exists(hook-overlay) {
-        @include hook-overlay;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-overlay > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Icon
- ========================================================================== */
-
-.uk-overlay-icon {
-    @if mixin-exists(hook-overlay-icon) {
-        @include hook-overlay-icon;
-    }
-}
-
-
-/* Style modifiers
- ========================================================================== */
-
-/*
- * Default
- */
-
-.uk-overlay-default {
-    background: var(--overlay-default-background);
-    @if mixin-exists(hook-overlay-default) {
-        @include hook-overlay-default;
-    }
-}
-
-/*
- * Primary
- */
-
-.uk-overlay-primary {
-    background: var(--overlay-primary-background);
-    @if mixin-exists(hook-overlay-primary) {
-        @include hook-overlay-primary;
-    }
-}
-
-// Color Mode
-@if $overlay-primary-color-mode == light {
-    .uk-overlay-primary {
-        @extend .uk-light !optional;
-    }
-}
-
-@if $overlay-primary-color-mode == dark {
-    .uk-overlay-primary {
-        @extend .uk-dark !optional;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-overlay-misc) {
-    @include hook-overlay-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --overlay-padding-horizontal: var(--global-gutter);
-    --overlay-padding-vertical: var(--global-gutter);
-    --overlay-default-background: #{$overlay-default-background};
-    --overlay-primary-background: #{$overlay-primary-background};
-}
+@import '../components/Overlay/index.scss';

package/dist/esm/styles/variables.scss

@@ -521,6 +521,7 @@ $card-default-background:                                       $global-muted-ba
 $card-default-color:                                            $global-color !default;
 $card-default-title-color:                                      $global-emphasis-color !default;
 $card-default-hover-background:                                 darken($card-default-background, 5%) !default;
+$card-default-color-mode:                                       dark !default;
 $card-primary-background:                                       $global-primary-background !default;
 $card-primary-color:                                            $global-inverse-color !default;
 $card-primary-title-color:                                      $card-primary-color !default;
@@ -643,13 +644,13 @@ $divider-icon-line-top:                                         50% !default;
 $divider-icon-line-width:                                       100% !default;
 $divider-icon-line-border-width:                                $global-border-width !default;
 $divider-icon-line-border:                                      $global-border !default;
-$divider-icon-image-path:                                       'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
 $divider-small-width:                                           100px !default;
 $divider-small-border-width:                                    $global-border-width !default;
 $divider-small-border:                                          $global-border !default;
 $divider-vertical-height:                                       100px !default;
 $divider-vertical-border-width:                                 $global-border-width !default;
 $divider-vertical-border:                                       $global-border !default;
+$internal-divider-icon-image:                                   'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
 
 // Inverse
 $inverse-divider-icon-color:                                    $inverse-global-border !default;
@@ -1489,7 +1490,9 @@ $section-large-padding-vertical-m:                              $global-xlarge-m
 $section-xlarge-padding-vertical:                               $global-xlarge-margin !default;
 $section-xlarge-padding-vertical-m:                             ($global-large-margin + $global-xlarge-margin) !default;
 $section-default-background:                                    $global-background !default;
+$section-default-color-mode:                                    dark !default;
 $section-muted-background:                                      $global-muted-background !default;
+$section-muted-color-mode:                                      dark !default;
 $section-primary-background:                                    $global-primary-background !default;
 $section-primary-color-mode:                                    light !default;
 $section-secondary-background:                                  $global-secondary-background !default;
@@ -1746,7 +1749,9 @@ $tile-large-padding-vertical-m:                                 $global-xlarge-m
 $tile-xlarge-padding-vertical:                                  $global-xlarge-margin !default;
 $tile-xlarge-padding-vertical-m:                                ($global-large-margin + $global-xlarge-margin) !default;
 $tile-default-background:                                       $global-background !default;
+$tile-default-color-mode:                                       dark !default;
 $tile-muted-background:                                         $global-muted-background !default;
+$tile-muted-color-mode:                                         dark !default;
 $tile-primary-background:                                       $global-primary-background !default;
 $tile-primary-color-mode:                                       light !default;
 $tile-secondary-background:                                     $global-secondary-background !default;