@broxus/react-uikit 0.18.0 → 0.19.0

package/{dist/cjs/components/Switch/index.scss → styles/switch.scss}

@@ -5,10 +5,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
+
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
+
 
 /* ========================================================================
    Component: Switch
@@ -33,8 +37,7 @@
     transition: all var(--transition-medium-fast-duration);
     user-select: none;
     vertical-align: middle;
-
-    @if mixin-exists(hook-switch) {
+    @if meta.mixin-exists('hook-switch') {
         @include hook-switch;
     }
 }
@@ -51,8 +54,7 @@
     transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
     width: calc(var(--switch-height) - var(--switch-handle-offset) * 2);
     z-index: 10;
-
-    @if mixin-exists(hook-switch-handle) {
+    @if meta.mixin-exists('hook-switch-handle') {
         @include hook-switch-handle;
     }
 }
@@ -62,7 +64,7 @@
     border-radius: var(--switch-handle-border-radius);
     bottom: 0;
     content: '';
-    inset-inline: 0 0;
+    inset-inline: 0;
     position: absolute;
     top: 0;
     transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
@@ -94,7 +96,7 @@
 }
 
 .uk-switch-inner-unchecked {
-    margin-inline: 0 0;
+    margin-inline: 0;
     margin-top: calc(var(--switch-height) * -1);
 }
 
@@ -123,7 +125,7 @@
 .uk-switch-checked {
     background: var(--switch-checked-background);
 
-    @if mixin-exists(hook-switch-checked) {
+    @if meta.mixin-exists('hook-switch-checked') {
         @include hook-switch-checked;
     }
 }
@@ -145,8 +147,7 @@
 
 .uk-switch-checked .uk-switch-handle {
     inset-inline-start: calc(100% - var(--switch-height) + var(--switch-handle-offset));
-
-    @if mixin-exists(hook-switch-checked-handle) {
+    @if meta.mixin-exists('hook-switch-checked-handle') {
         @include hook-switch-checked-handle;
     }
 }
@@ -160,7 +161,7 @@
 }
 
 .uk-switch-checked .uk-switch-inner-checked {
-    margin-inline: 0 0;
+    margin-inline: 0;
 }
 
 .uk-switch-checked .uk-switch-inner-unchecked {
@@ -172,7 +173,7 @@
     cursor: not-allowed;
     opacity: 0.65;
 
-    @if mixin-exists(hook-switch-disabled) {
+    @if meta.mixin-exists('hook-switch-disabled') {
         @include hook-switch-disabled;
     }
 }
@@ -181,7 +182,7 @@
 /* Hooks
  ========================================================================== */
 
-@if mixin-exists(hook-switch-misc) {
+@if meta.mixin-exists('hook-switch-misc') {
     @include hook-switch-misc;
 }
 

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

@@ -18,11 +18,15 @@
 //
 // ========================================================================
 
+@use 'sass:math';
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
+
 
 /* ========================================================================
    Component: Table
@@ -44,7 +48,7 @@
 
     /* 2 */
     width: 100%;
-    @if mixin-exists(hook-table) {
+    @if meta.mixin-exists('hook-table') {
         @include hook-table;
     }
 }
@@ -70,7 +74,7 @@
     padding: var(--table-cell-padding-vertical);
     text-align: left;
     vertical-align: bottom;
-    @if mixin-exists(hook-table) {
+    @if meta.mixin-exists('hook-table') {
         @include hook-table-header-cell;
     }
 }
@@ -81,7 +85,7 @@
 .uk-table td {
     padding: var(--table-cell-padding-vertical);
     vertical-align: top;
-    @if mixin-exists(hook-table-cell) {
+    @if meta.mixin-exists('hook-table-cell') {
         @include hook-table-cell;
     }
 }
@@ -99,7 +103,7 @@
 
 .uk-table tfoot {
     font-size: var(--table-footer-font-size);
-    @if mixin-exists(hook-table-footer) {
+    @if meta.mixin-exists('hook-table-footer') {
         @include hook-table-footer;
     }
 }
@@ -111,7 +115,7 @@
     color: var(--table-caption-color);
     font-size: var(--table-caption-font-size);
     text-align: left;
-    @if mixin-exists(hook-table-caption) {
+    @if meta.mixin-exists('hook-table-caption') {
         @include hook-table-caption;
     }
 }
@@ -135,7 +139,7 @@
 .uk-table-divider > :not(:first-child) > tr,
 .uk-table-divider > :first-child > tr:not(:first-child) {
     border-top: var(--table-divider-border-width);
-    @if mixin-exists(hook-table-divider) {
+    @if meta.mixin-exists('hook-table-divider') {
         @include hook-table-divider;
     }
 }
@@ -147,7 +151,7 @@
 .uk-table-striped > tr:nth-of-type(odd),
 .uk-table-striped tbody tr:nth-of-type(odd) {
     background: var(--table-striped-row-background);
-    @if mixin-exists(hook-table-striped) {
+    @if meta.mixin-exists('hook-table-striped') {
         @include hook-table-striped;
     }
 }
@@ -159,7 +163,7 @@
 .uk-table-hover > tr:hover,
 .uk-table-hover tbody tr:hover {
     background: var(--table-hover-row-background);
-    @if mixin-exists(hook-table-hover) {
+    @if meta.mixin-exists('hook-table-hover') {
         @include hook-table-hover;
     }
 }
@@ -170,7 +174,7 @@
 .uk-table > tr.uk-active,
 .uk-table tbody tr.uk-active {
     background: var(--table-row-active-background);
-    @if mixin-exists(hook-table-row-active) {
+    @if meta.mixin-exists('hook-table-row-active') {
         @include hook-table-row-active;
     }
 }
@@ -181,7 +185,7 @@
 .uk-table-small th,
 .uk-table-small td {
     padding: var(--table-small-cell-padding-vertical);
-    @if mixin-exists(hook-table-small) {
+    @if meta.mixin-exists('hook-table-small') {
         @include hook-table-small;
     }
 }
@@ -189,7 +193,7 @@
 .uk-table-large th,
 .uk-table-large td {
     padding: var(--table-large-cell-padding-vertical);
-    @if mixin-exists(hook-table-large) {
+    @if meta.mixin-exists('hook-table-large') {
         @include hook-table-large;
     }
 }
@@ -268,13 +272,13 @@
     .uk-table-responsive th:not(:first-child, .uk-table-link),
     .uk-table-responsive td:not(:first-child, .uk-table-link),
     .uk-table-responsive .uk-table-link:not(:first-child) > a {
-        padding-top: round($table-cell-padding-vertical / 3) !important;
+        padding-top: math.round(math.div($table-cell-padding-vertical, 3)) !important;
     }
 
     .uk-table-responsive th:not(:last-child, .uk-table-link),
     .uk-table-responsive td:not(:last-child, .uk-table-link),
     .uk-table-responsive .uk-table-link:not(:last-child) > a {
-        padding-bottom: round($table-cell-padding-vertical / 3) !important;
+        padding-bottom: math.round(math.div($table-cell-padding-vertical, 3)) !important;
     }
 
     .uk-table-justify.uk-table-responsive th,
@@ -287,7 +291,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-table-misc) {
+@if meta.mixin-exists('hook-table-misc') {
     @include hook-table-misc;
 }
 

package/{dist/esm/components/Tabs/index.scss → styles/tabs.scss}

@@ -13,11 +13,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -38,7 +40,7 @@
     display: flex;
     flex: none;
     position: relative;
-    @if mixin-exists(hook-tabs) {
+    @if meta.mixin-exists('hook-tabs') {
         @include hook-tabs;
     }
 }
@@ -157,7 +159,7 @@
     outline: none;
     padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
     position: relative;
-    @if mixin-exists(hook-tabs-tab) {
+    @if meta.mixin-exists('hook-tabs-tab') {
         @include hook-tabs-tab;
     }
 }
@@ -166,7 +168,7 @@
 .uk-tabs-tab:not(.uk-tabs-tab-disabled):hover,
 .uk-tabs-tab:not(.uk-tabs-tab-disabled):focus {
     color: var(--tabs-tab-hover-color);
-    @if mixin-exists(hook-tabs-tab-hover) {
+    @if meta.mixin-exists('hook-tabs-tab-hover') {
         @include hook-tabs-tab-hover;
     }
 }
@@ -174,7 +176,7 @@
 /* Active */
 .uk-tabs-tab-active:not(.uk-tabs-tab-disabled) {
     color: var(--tabs-tab-active-color);
-    @if mixin-exists(hook-tabs-tab-active) {
+    @if meta.mixin-exists('hook-tabs-tab-active') {
         @include hook-tabs-tab-active;
     }
 }
@@ -183,7 +185,7 @@
 .uk-tabs-tab-disabled {
     color: var(--tabs-tab-disabled-color);
     cursor: not-allowed;
-    @if mixin-exists(hook-tabs-tab-disabled) {
+    @if meta.mixin-exists('hook-tabs-tab-disabled') {
         @include hook-tabs-tab-disabled;
     }
 }
@@ -345,13 +347,13 @@
         order: 0;
     }
 
-    @if mixin-exists(hook-tabs-bottom) {
+    @if meta.mixin-exists('hook-tabs-bottom') {
         @include hook-tabs-bottom;
     }
 }
 
 .uk-tabs-bottom .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-bottom-tab) {
+    @if meta.mixin-exists('hook-tabs-bottom-tab') {
         @include hook-tabs-bottom-tab;
     }
 }
@@ -387,13 +389,13 @@
         border-radius: var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0 0;
     }
 
-    @if mixin-exists(hook-tabs-top) {
+    @if meta.mixin-exists('hook-tabs-top') {
         @include hook-tabs-top;
     }
 }
 
 .uk-tabs-top .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-top-tab) {
+    @if meta.mixin-exists('hook-tabs-top-tab') {
         @include hook-tabs-top-tab;
     }
 }
@@ -479,13 +481,13 @@
         border-radius: var(--tabs-card-tab-border-radius) 0 0 var(--tabs-card-tab-border-radius);
     }
 
-    @if mixin-exists(hook-tabs-left) {
+    @if meta.mixin-exists('hook-tabs-left') {
         @include hook-tabs-left;
     }
 }
 
 .uk-tabs-left .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-left-tab) {
+    @if meta.mixin-exists('hook-tabs-left-tab') {
         @include hook-tabs-left-tab;
     }
 }
@@ -526,13 +528,13 @@
         border-radius: 0 var(--tabs-card-tab-border-radius) var(--tabs-card-tab-border-radius) 0;
     }
 
-    @if mixin-exists(hook-tabs-right) {
+    @if meta.mixin-exists('hook-tabs-right') {
         @include hook-tabs-right;
     }
 }
 
 .uk-tabs-right .uk-tabs-tab {
-    @if mixin-exists(hook-tabs-right-tab) {
+    @if meta.mixin-exists('hook-tabs-right-tab') {
         @include hook-tabs-right-tab;
     }
 }
@@ -613,7 +615,7 @@
     overflow: hidden auto;
     padding: 0;
     text-align: left;
-    @if mixin-exists(hook-tabs-dropdown-menu) {
+    @if meta.mixin-exists('hook-tabs-dropdown-menu') {
         @include hook-tabs-dropdown-menu;
     }
 }
@@ -715,7 +717,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-tabs-misc) {
+@if meta.mixin-exists('hook-tabs-misc') {
     @include hook-tabs-misc;
 }
 
@@ -732,15 +734,15 @@
     --tabs-large-tab-padding-vertical: #{$tabs-large-tab-padding-vertical};
     --tabs-tab-font-size: var(--global-font-size);
     --tabs-tab-color: var(--global-color);
-    --tabs-tab-hover-color: var(--global-primary-background);
-    --tabs-tab-active-color: var(--global-primary-background);
+    --tabs-tab-hover-color: var(--global-primary-color);
+    --tabs-tab-active-color: var(--global-primary-color);
     --tabs-tab-disabled-color: var(--global-muted-color);
     --tabs-tab-remove-color: var(--global-muted-color);
     --tabs-tab-remove-font-size: var(--global-small-font-size);
-    --tabs-tab-remove-hover-color: var(--global-danger-background);
-    --tabs-tab-remove-active-color: var(--global-danger-background);
+    --tabs-tab-remove-hover-color: var(--global-danger-color);
+    --tabs-tab-remove-active-color: var(--global-danger-color);
     --tabs-nav-more-font-size: var(--global-small-font-size);
-    --tabs-ink-bar-color: var(--global-primary-background);
+    --tabs-ink-bar-color: var(--global-primary-color);
     --tabs-ink-bar-height: #{$tabs-ink-bar-height};
     --tabs-ink-bar-width: #{$tabs-ink-bar-width};
     --tabs-card-tab-background: var(--global-muted-background);

package/{dist/esm/components/Text/index.scss → styles/text.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -24,7 +26,7 @@
     color: var(--text-lead-color);
     font-size: var(--text-lead-font-size);
     line-height: var(--text-lead-line-height);
-    @if mixin-exists(hook-text-lead) {
+    @if meta.mixin-exists('hook-text-lead') {
         @include hook-text-lead;
     }
 }
@@ -33,7 +35,7 @@
     color: var(--text-meta-color);
     font-size: var(--text-meta-font-size);
     line-height: var(--text-meta-line-height);
-    @if mixin-exists(hook-text-meta) {
+    @if meta.mixin-exists('hook-text-meta') {
         @include hook-text-meta;
     }
 }
@@ -42,7 +44,7 @@
     color: var(--text-base-font-size);
     font-size: var(--text-base-font-size);
     line-height: var(--text-base-line-height);
-    @if mixin-exists(hook-text-base) {
+    @if meta.mixin-exists('hook-text-base') {
         @include hook-text-base;
     }
 }
@@ -54,7 +56,7 @@
 .uk-text-xsmall {
     font-size: var(--text-xsmall-font-size);
     line-height: var(--text-xsmall-line-height);
-    @if mixin-exists(hook-text-xsmall) {
+    @if meta.mixin-exists('hook-text-xsmall') {
         @include hook-text-xsmall;
     }
 }
@@ -62,7 +64,7 @@
 .uk-text-small {
     font-size: var(--text-small-font-size);
     line-height: var(--text-small-line-height);
-    @if mixin-exists(hook-text-small) {
+    @if meta.mixin-exists('hook-text-small') {
         @include hook-text-small;
     }
 }
@@ -70,7 +72,7 @@
 .uk-text-large {
     font-size: var(--text-large-font-size);
     line-height: var(--text-large-line-height);
-    @if mixin-exists(hook-text-large) {
+    @if meta.mixin-exists('hook-text-large') {
         @include hook-text-large;
     }
 }
@@ -153,7 +155,7 @@
     .uk-text-background {
         background-color: var(--text-background-color);
         color: transparent !important;
-        @if mixin-exists(hook-text-background) {
+        @if meta.mixin-exists('hook-text-background') {
             @include hook-text-background;
         }
     }
@@ -272,7 +274,7 @@ td.uk-text-break { word-break: break-all; }
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-text-misc) {
+@if meta.mixin-exists('hook-text-misc') {
     @include hook-text-misc;
 }
 
@@ -283,7 +285,7 @@ td.uk-text-break { word-break: break-all; }
 :root {
     --text-base-font-size: var(--global-font-size);
     --text-base-line-height: var(--global-line-height);
-    --text-base-color: var(--global-base-color);
+    --text-base-color: var(--global-color);
     --text-lead-font-size: var(--global-large-font-size);
     --text-lead-line-height: #{$text-lead-line-height};
     --text-lead-color: var(--global-emphasis-color);
@@ -298,12 +300,12 @@ td.uk-text-break { word-break: break-all; }
     --text-large-line-height: #{$text-large-line-height};
     --text-muted-color: var(--global-muted-color);
     --text-emphasis-color: var(--global-emphasis-color);
-    --text-primary-color: var(--global-primary-background);
-    --text-secondary-color: var(--global-secondary-background);
-    --text-tertiary-color: var(--global-tertiary-background);
-    --text-success-color: var(--global-success-background);
-    --text-warning-color: var(--global-warning-background);
-    --text-danger-color: var(--global-danger-background);
+    --text-primary-color: var(--global-primary-color);
+    --text-secondary-color: var(--global-secondary-color);
+    --text-tertiary-color: var(--global-tertiary-color);
+    --text-success-color: var(--global-success-color);
+    --text-warning-color: var(--global-warning-color);
+    --text-danger-color: var(--global-danger-color);
     --text-background-color: var(--global-primary-background);
 
     // Inverse

package/{dist/cjs/components/Control/TextArea/index.scss → styles/textarea.scss}

@@ -12,11 +12,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -27,7 +29,7 @@
     height: auto;
     max-width: 100%;
     padding: 0;
-    @if mixin-exists(hook-textarea-control) {
+    @if meta.mixin-exists('hook-textarea-control') {
         @include hook-textarea-control;
     }
 }
@@ -44,7 +46,7 @@
     position: absolute;
     right: 5px;
     white-space: nowrap;
-    @if mixin-exists(hook-textarea-counter) {
+    @if meta.mixin-exists('hook-textarea-counter') {
         @include hook-textarea-counter;
     }
 }
@@ -65,7 +67,7 @@
     padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
     resize: none;
     vertical-align: bottom;
-    @if mixin-exists(hook-textarea) {
+    @if meta.mixin-exists('hook-textarea') {
         @include hook-textarea;
     }
 }

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

@@ -9,11 +9,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -36,7 +38,7 @@
     /* 2 */
     margin: 0 0 0 /* 3 */ calc(var(--thumbnav-margin-horizontal) * -1);
     padding: 0;
-    @if mixin-exists(hook-thumbnav) {
+    @if meta.mixin-exists('hook-thumbnav') {
         @include hook-thumbnav;
     }
 }
@@ -61,7 +63,7 @@
 
 .uk-thumbnav > * > * {
     display: inline-block;
-    @if mixin-exists(hook-thumbnav-item) {
+    @if meta.mixin-exists('hook-thumbnav-item') {
         @include hook-thumbnav-item;
     }
 }
@@ -70,14 +72,14 @@
 .uk-thumbnav > * > :hover,
 .uk-thumbnav > * > :focus {
     outline: none;
-    @if mixin-exists(hook-thumbnav-item-hover) {
+    @if meta.mixin-exists('hook-thumbnav-item-hover') {
         @include hook-thumbnav-item-hover;
     }
 }
 
 /* Active */
 .uk-thumbnav > .uk-active > * {
-    @if mixin-exists(hook-thumbnav-item-active) {
+    @if meta.mixin-exists('hook-thumbnav-item-active') {
         @include hook-thumbnav-item-active;
     }
 }
@@ -110,7 +112,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-thumbnav-misc) {
+@if meta.mixin-exists('hook-thumbnav-misc') {
     @include hook-thumbnav-misc;
 }