@broxus/react-uikit 0.14.1 → 0.15.0

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;

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

@@ -644,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;
@@ -1490,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;
@@ -1747,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;