@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/esm/components/Tile/index.scss → styles/tile.scss}

@@ -16,10 +16,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
+
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -31,7 +34,7 @@
     display: flow-root;
     padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
     position: relative;
-    @if mixin-exists(hook-tile) {
+    @if meta.mixin-exists('hook-tile') {
         @include hook-tile;
     }
 }
@@ -126,13 +129,13 @@
 .uk-tile-default {
     --uk-inverse: #{$tile-default-color-mode};
     background: var(--tile-default-background);
-    @if mixin-exists(hook-tile-default) {
+    @if meta.mixin-exists('hook-tile-default') {
         @include hook-tile-default;
     }
 }
 
 .uk-tile-default.uk-tile-hover:hover {
-    @if mixin-exists(hook-tile-default-hover) {
+    @if meta.mixin-exists('hook-tile-default-hover') {
         @include hook-tile-default-hover;
     }
 }
@@ -157,13 +160,13 @@
 .uk-tile-muted {
     --uk-inverse: #{$tile-muted-color-mode};
     background: var(--tile-muted-background);
-    @if mixin-exists(hook-tile-muted) {
+    @if meta.mixin-exists('hook-tile-muted') {
         @include hook-tile-muted;
     }
 }
 
 .uk-tile-muted.uk-tile-hover:hover {
-    @if mixin-exists(hook-tile-muted-hover) {
+    @if meta.mixin-exists('hook-tile-muted-hover') {
         @include hook-tile-muted-hover;
     }
 }
@@ -188,13 +191,13 @@
 .uk-tile-primary {
     --uk-inverse: #{$tile-primary-color-mode};
     background: var(--tile-primary-background);
-    @if mixin-exists(hook-tile-primary) {
+    @if meta.mixin-exists('hook-tile-primary') {
         @include hook-tile-primary;
     }
 }
 
 .uk-tile-primary.uk-tile-hover:hover {
-    @if mixin-exists(hook-tile-primary-hover) {
+    @if meta.mixin-exists('hook-tile-primary-hover') {
         @include hook-tile-primary-hover;
     }
 }
@@ -219,13 +222,13 @@
 .uk-tile-secondary {
     --uk-inverse: #{$tile-secondary-color-mode};
     background: var(--tile-secondary-background);
-    @if mixin-exists(hook-tile-secondary) {
+    @if meta.mixin-exists('hook-tile-secondary') {
         @include hook-tile-secondary;
     }
 }
 
 .uk-tile-secondary.uk-tile-hover:hover {
-    @if mixin-exists(hook-tile-secondary-hover) {
+    @if meta.mixin-exists('hook-tile-secondary-hover') {
         @include hook-tile-secondary-hover;
     }
 }
@@ -250,13 +253,13 @@
 .uk-tile-tertiary {
     --uk-inverse: #{$tile-tertiary-color-mode};
     background: var(--tile-tertiary-background);
-    @if mixin-exists(hook-tile-tertiary) {
+    @if meta.mixin-exists('hook-tile-tertiary') {
         @include hook-tile-tertiary;
     }
 }
 
 .uk-tile-tertiary.uk-tile-hover:hover {
-    @if mixin-exists(hook-tile-tertiary-hover) {
+    @if meta.mixin-exists('hook-tile-tertiary-hover') {
         @include hook-tile-tertiary-hover;
     }
 }
@@ -278,7 +281,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-tile-misc) {
+@if meta.mixin-exists('hook-tile-misc') {
     @include hook-tile-misc;
 }
 

package/{dist/esm/styles → styles}/tooltip.scss

@@ -16,11 +16,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -59,7 +61,7 @@
     /* 3 */
     top: 0;
     z-index: var(--tooltip-z-index);
-    @if mixin-exists(hook-tooltip) {
+    @if meta.mixin-exists('hook-tooltip') {
         @include hook-tooltip;
     }
 }
@@ -71,20 +73,16 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-tooltip-misc) {
+@if meta.mixin-exists('hook-tooltip-misc') {
     @include hook-tooltip-misc;
 }
 
-@mixin hook-tooltip() {}
-
-@mixin hook-tooltip-misc() {}
-
 
 // Hooks
 // ========================================================================
 
 :root {
-    --tooltip-z-index: #{$global-z-index + 30};
+    --tooltip-z-index: #{$tooltip-z-index};
     --tooltip-max-width: #{$tooltip-max-width};
     --tooltip-padding-vertical: #{$tooltip-padding-vertical};
     --tooltip-padding-horizontal: #{$tooltip-padding-horizontal};

package/{dist/cjs/styles → styles}/totop.scss

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -23,7 +25,7 @@
 .uk-totop {
     color: var(--totop-color);
     padding: var(--totop-padding);
-    @if mixin-exists(hook-totop) {
+    @if meta.mixin-exists('hook-totop') {
         @include hook-totop;
     }
 }
@@ -33,7 +35,7 @@
 .uk-totop:focus {
     color: var(--totop-hover-color);
     outline: none;
-    @if mixin-exists(hook-totop-hover) {
+    @if meta.mixin-exists('hook-totop-hover') {
         @include hook-totop-hover;
     }
 }
@@ -41,7 +43,7 @@
 /* OnClick */
 .uk-totop:active {
     color: var(--totop-active-color);
-    @if mixin-exists(hook-totop-active) {
+    @if meta.mixin-exists('hook-totop-active') {
         @include hook-totop-active;
     }
 }
@@ -50,52 +52,10 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-totop-misc) {
+@if meta.mixin-exists('hook-totop-misc') {
     @include hook-totop-misc;
 }
 
-.hook-totop() {}
-
-.hook-totop-hover() {}
-
-.hook-totop-active() {}
-
-.hook-totop-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-component-totop() {
-    .uk-totop {
-        color: var(--inverse-totop-color);
-        @if mixin-exists(hook-inverse-totop) {
-            @include hook-inverse-totop;
-        }
-    }
-
-    .uk-totop:hover,
-    .uk-totop:focus {
-        color: var(--inverse-totop-hover-color);
-        @if mixin-exists(hook-inverse-totop-hover) {
-            @include hook-inverse-totop-hover;
-        }
-    }
-
-    .uk-totop:active {
-        color: var(--inverse-totop-active-color);
-        @if mixin-exists(hook-inverse-totop-active) {
-            @include hook-inverse-totop-active;
-        }
-    }
-}
-
-.hook-inverse-totop() {}
-
-.hook-inverse-totop-hover() {}
-
-.hook-inverse-totop-active() {}
-
 
 // Vars
 // ========================================================================

package/{dist/cjs/styles → styles}/transition.scss

@@ -20,11 +20,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -116,7 +119,7 @@
 .uk-transition-slide-right { transform: translateX(100%); }
 
 .uk-transition-slide-top-small {
-    transform: translateY(unquote('calc(var(--transition-slide-small-translate) * -1)'));
+    transform: translateY(string.unquote('calc(var(--transition-slide-small-translate) * -1)'));
 }
 
 .uk-transition-slide-bottom-small {
@@ -124,7 +127,7 @@
 }
 
 .uk-transition-slide-left-small {
-    transform: translateX(unquote('calc(var(--transition-slide-small-translate) * -1)'));
+    transform: translateX(string.unquote('calc(var(--transition-slide-small-translate) * -1)'));
 }
 
 .uk-transition-slide-right-small {
@@ -132,7 +135,7 @@
 }
 
 .uk-transition-slide-top-medium {
-    transform: translateY(unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+    transform: translateY(string.unquote('calc(var(--transition-slide-medium-translate) * -1)'));
 }
 
 .uk-transition-slide-bottom-medium {
@@ -140,7 +143,7 @@
 }
 
 .uk-transition-slide-left-medium {
-    transform: translateX(unquote('calc(var(--transition-slide-medium-translate) * -1)'));
+    transform: translateX(string.unquote('calc(var(--transition-slide-medium-translate) * -1)'));
 }
 
 .uk-transition-slide-right-medium {
@@ -171,12 +174,10 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-transition-misc) {
+@if meta.mixin-exists('hook-transition-misc') {
     @include hook-transition-misc;
 }
 
-// @mixin hook-transition-misc() {}
-
 
 // Vars
 // ========================================================================

package/{dist/esm/styles → styles}/utility.scss

@@ -26,11 +26,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -67,7 +69,7 @@
     -webkit-overflow-scrolling: touch;
     padding: var(--panel-scrollable-padding);
     resize: both;
-    @if mixin-exists(hook-panel-scrollable) {
+    @if meta.mixin-exists('hook-panel-scrollable') {
         @include hook-panel-scrollable;
     }
 }
@@ -364,7 +366,7 @@
         /* 3 */
         will-change: filter;
         z-index: -1;
-        @if mixin-exists(hook-box-shadow-bottom) {
+        @if meta.mixin-exists('hook-box-shadow-bottom') {
             @include hook-box-shadow-bottom;
         }
     }
@@ -391,7 +393,7 @@
     font-size: var(--dropcap-font-size);
     line-height: 1;
     margin-right: var(--dropcap-margin-right);
-    @if mixin-exists(hook-dropcap) {
+    @if meta.mixin-exists('hook-dropcap') {
         @include hook-dropcap;
     }
 }
@@ -421,12 +423,12 @@
 
 .uk-logo {
     color: var(--logo-color);
-    font-family: var(--logo-font-family);
+    font-family: var(--logo-font-family), system-ui;
     font-size: var(--logo-font-size);
 
     /* 1 */
     text-decoration: none;
-    @if mixin-exists(hook-logo) {
+    @if meta.mixin-exists('hook-logo') {
         @include hook-logo;
     }
 }
@@ -439,7 +441,7 @@
 
     /* 1 */
     text-decoration: none;
-    @if mixin-exists(hook-logo-hover) {
+    @if meta.mixin-exists('hook-logo-hover') {
         @include hook-logo-hover;
     }
 }
@@ -600,7 +602,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-utility-misc) {
+@if meta.mixin-exists('hook-utility-misc') {
     @include hook-utility-misc;
 }