@broxus/react-uikit 0.18.0 → 0.19.1

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

@@ -22,11 +22,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -252,7 +255,7 @@
 @keyframes uk-fade-top-small {
     0% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -284,7 +287,7 @@
 @keyframes uk-fade-left-small {
     0% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-small-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-small-translate) * -1)'));
     }
 
     100% {
@@ -316,7 +319,7 @@
 @keyframes uk-fade-top-medium {
     0% {
         opacity: 0;
-        transform: translateY(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        transform: translateY(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
@@ -348,7 +351,7 @@
 @keyframes uk-fade-left-medium {
     0% {
         opacity: 0;
-        transform: translateX(unquote('calc(var(--animation-slide-medium-translate) * -1)'));
+        transform: translateX(string.unquote('calc(var(--animation-slide-medium-translate) * -1)'));
     }
 
     100% {
@@ -461,7 +464,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-animation-misc) {
+@if meta.mixin-exists('hook-animation-misc') {
     @include hook-animation-misc;
 }
 

package/{dist/esm/components/Article/index.scss → styles/article.scss}

@@ -8,11 +8,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -21,7 +23,7 @@
 
 .uk-article {
     display: flow-root;
-    @if mixin-exists(hook-article) {
+    @if meta.mixin-exists('hook-article') {
         @include hook-article;
     }
 }
@@ -40,7 +42,7 @@
 
 .uk-article + .uk-article {
     margin-top: var(--article-margin-top);
-    @if mixin-exists(hook-article-adjacent) {
+    @if meta.mixin-exists('hook-article-adjacent') {
         @include hook-article-adjacent;
     }
 }
@@ -52,7 +54,7 @@
 .uk-article-title {
     font-size: var(--article-title-font-size);
     line-height: var(--article-title-line-height);
-    @if mixin-exists(hook-article-title) {
+    @if meta.mixin-exists('hook-article-title') {
         @include hook-article-title;
     }
 }
@@ -72,7 +74,7 @@
     color: var(--article-meta-color);
     font-size: var(--article-meta-font-size);
     line-height: var(--article-meta-line-height);
-    @if mixin-exists(hook-article-meta) {
+    @if meta.mixin-exists('hook-article-meta') {
         @include hook-article-meta;
     }
 }
@@ -81,7 +83,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-article-misc) {
+@if meta.mixin-exists('hook-article-misc') {
     @include hook-article-misc;
 }
 

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

@@ -5,11 +5,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -244,7 +247,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-background-misc) {
+@if meta.mixin-exists('hook-background-misc') {
     @include hook-background-misc;
 }
 

package/{dist/cjs/components/Badge/index.scss → styles/badge.scss}

@@ -5,11 +5,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -35,7 +37,7 @@
     min-width: var(--badge-size);
     padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
     vertical-align: middle;
-    @if mixin-exists(hook-badge) {
+    @if meta.mixin-exists('hook-badge') {
         @include hook-badge;
     }
 }
@@ -49,7 +51,7 @@
     color: var(--badge-hover-color);
     outline: none;
     text-decoration: none;
-    @if mixin-exists(hook-badge-hover) {
+    @if meta.mixin-exists('hook-badge-hover') {
         @include hook-badge-hover;
     }
 }
@@ -58,7 +60,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-badge-misc) {
+@if meta.mixin-exists('hook-badge-misc') {
     @include hook-badge-misc;
 }
 

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

@@ -7,11 +7,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -28,12 +31,12 @@
 html {
     background: var(--base-body-background); /* 3 */
     color: var(--base-body-color); /* 3 */
-    font-family: var(--base-body-font-family);
+    font-family: var(--base-body-font-family), system-ui;
     font-size: var(--base-body-font-size); /* 1 */
     font-weight: var(--base-body-font-weight);
     line-height: var(--base-body-line-height);
     text-size-adjust: 100%; /* 2 */
-    @if mixin-exists(hook-base-body) {
+    @if meta.mixin-exists('hook-base-body') {
         @include hook-base-body;
     }
 }
@@ -57,7 +60,7 @@ a,
     color: var(--base-link-color);
     cursor: pointer;
     text-decoration: var(--base-link-text-decoration);
-    @if mixin-exists(hook-base-link) {
+    @if meta.mixin-exists('hook-base-link') {
         @include hook-base-link;
     }
 }
@@ -68,7 +71,7 @@ a:hover,
 .uk-link-toggle:focus .uk-link {
     color: var(--base-link-hover-color);
     text-decoration: var(--base-link-hover-text-decoration);
-    @if mixin-exists(hook-base-link-hover) {
+    @if meta.mixin-exists('hook-base-link-hover') {
         @include hook-base-link-hover;
     }
 }
@@ -119,13 +122,13 @@ strong { font-weight: var(--base-strong-font-weight); }
     color: var(--base-code-color);
 
     /* 1 */
-    font-family: var(--base-code-font-family);
+    font-family: var(--base-code-font-family), monospace;
 
     /* 2 */
     font-size: var(--base-code-font-size);
     padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
     white-space: nowrap;
-    @if mixin-exists(hook-base-code) {
+    @if meta.mixin-exists('hook-base-code') {
         @include hook-base-code;
     }
 }
@@ -296,11 +299,11 @@ h6, .uk-h6,
 .uk-heading-xlarge,
 .uk-heading-2xlarge {
     color: var(--base-heading-color);
-    font-family: var(--base-heading-font-family);
+    font-family: var(--base-heading-font-family), system-ui;
     font-weight: var(--base-heading-font-weight);
     margin: 0 0 var(--base-margin-vertical) 0;
     text-transform: var(--base-heading-text-transform);
-    @if mixin-exists(hook-base-heading) {
+    @if meta.mixin-exists('hook-base-heading') {
         @include hook-base-heading;
     }
 }
@@ -325,7 +328,7 @@ h6, .uk-h6,
 h1, .uk-h1 {
     font-size: var(--base-h1-font-size);
     line-height: var(--base-h1-line-height);
-    @if mixin-exists(hook-base-h1) {
+    @if meta.mixin-exists('hook-base-h1') {
         @include hook-base-h1;
     }
 }
@@ -333,7 +336,7 @@ h1, .uk-h1 {
 h2, .uk-h2 {
     font-size: var(--base-h2-font-size);
     line-height: var(--base-h2-line-height);
-    @if mixin-exists(hook-base-h2) {
+    @if meta.mixin-exists('hook-base-h2') {
         @include hook-base-h2;
     }
 }
@@ -341,7 +344,7 @@ h2, .uk-h2 {
 h3, .uk-h3 {
     font-size: var(--base-h3-font-size);
     line-height: var(--base-h3-line-height);
-    @if mixin-exists(hook-base-h3) {
+    @if meta.mixin-exists('hook-base-h3') {
         @include hook-base-h3;
     }
 }
@@ -349,7 +352,7 @@ h3, .uk-h3 {
 h4, .uk-h4 {
     font-size: var(--base-h4-font-size);
     line-height: var(--base-h4-line-height);
-    @if mixin-exists(hook-base-h4) {
+    @if meta.mixin-exists('hook-base-h4') {
         @include hook-base-h4;
     }
 }
@@ -357,7 +360,7 @@ h4, .uk-h4 {
 h5, .uk-h5 {
     font-size: var(--base-h5-font-size);
     line-height: var(--base-h5-line-height);
-    @if mixin-exists(hook-base-h5) {
+    @if meta.mixin-exists('hook-base-h5') {
         @include hook-base-h5;
     }
 }
@@ -365,7 +368,7 @@ h5, .uk-h5 {
 h6, .uk-h6 {
     font-size: var(--base-h6-font-size);
     line-height: var(--base-h6-line-height);
-    @if mixin-exists(hook-base-h6) {
+    @if meta.mixin-exists('hook-base-h6') {
         @include hook-base-h6;
     }
 }
@@ -422,7 +425,7 @@ hr, .uk-hr {
 
     /* 2 */
     text-align: inherit;
-    @if mixin-exists(hook-base-hr) {
+    @if meta.mixin-exists('hook-base-hr') {
         @include hook-base-hr;
     }
 }
@@ -449,7 +452,7 @@ blockquote {
     font-style: var(--base-blockquote-font-style);
     line-height: var(--base-blockquote-line-height);
     margin: 0 0 var(--base-blockquote-margin-vertical) 0;
-    @if mixin-exists(hook-base-blockquote) {
+    @if meta.mixin-exists('hook-base-blockquote') {
         @include hook-base-blockquote;
     }
 }
@@ -472,7 +475,7 @@ blockquote footer {
     font-size: var(--base-blockquote-footer-font-size);
     line-height: var(--base-blockquote-footer-line-height);
     margin-top: var(--base-blockquote-footer-margin-top);
-    @if mixin-exists(hook-base-blockquote-footer) {
+    @if meta.mixin-exists('hook-base-blockquote-footer') {
         @include hook-base-blockquote-footer;
     }
 }
@@ -487,17 +490,19 @@ blockquote footer {
 
 pre {
     color: var(--base-pre-color);
-    font: var(--base-pre-font-size) unquote('/') var(--base-pre-line-height) var(--base-pre-font-family);
+    font-family: var(--base-pre-font-family), monospace;
+    font-size: var(--base-pre-font-size);
+    line-height: var(--base-pre-line-height);
 
     /* 1 */
     overflow: auto;
     tab-size: 4;
-    @if mixin-exists(hook-base-pre) {
+    @if meta.mixin-exists('hook-base-pre') {
         @include hook-base-pre;
     }
 }
 
-pre code { font-family: var(--base-pre-font-family); }
+pre code { font-family: var(--base-pre-font-family), monospace; }
 
 
 /* Focus
@@ -583,7 +588,7 @@ template { display: none; }
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-base-misc) {
+@if meta.mixin-exists('hook-base-misc') {
     @include hook-base-misc;
 }
 

package/{dist/cjs/components/Breadcrumb/index.scss → styles/breadcrumb.scss}

@@ -7,11 +7,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -25,7 +27,7 @@
 .uk-breadcrumb {
     list-style: none;
     padding: 0;
-    @if mixin-exists(hook-breadcrumb) {
+    @if meta.mixin-exists('hook-breadcrumb') {
         @include hook-breadcrumb;
     }
 }
@@ -45,7 +47,7 @@
 .uk-breadcrumb > * > * {
     color: var(--breadcrumb-item-color);
     font-size: var(--breadcrumb-item-font-size);
-    @if mixin-exists(hook-breadcrumb-item) {
+    @if meta.mixin-exists('hook-breadcrumb-item') {
         @include hook-breadcrumb-item;
     }
 }
@@ -55,14 +57,14 @@
 .uk-breadcrumb > * > :focus {
     color: var(--breadcrumb-item-hover-color);
     text-decoration: var(--breadcrumb-item-hover-text-decoration);
-    @if mixin-exists(hook-breadcrumb-item-hover) {
+    @if meta.mixin-exists('hook-breadcrumb-item-hover') {
         @include hook-breadcrumb-item-hover;
     }
 }
 
 /* Disabled */
 .uk-breadcrumb > .uk-disabled > * {
-    @if mixin-exists(hook-breadcrumb-item-disabled) {
+    @if meta.mixin-exists('hook-breadcrumb-item-disabled') {
         @include hook-breadcrumb-item-disabled;
     }
 }
@@ -71,7 +73,7 @@
 .uk-breadcrumb > :last-child > span,
 .uk-breadcrumb > :last-child > a:not([href]) {
     color: var(--breadcrumb-item-active-color);
-    @if mixin-exists(hook-breadcrumb-item-active) {
+    @if meta.mixin-exists('hook-breadcrumb-item-active') {
         @include hook-breadcrumb-item-active;
     }
 }
@@ -91,7 +93,7 @@
 
     /* 1 */
     margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px);
-    @if mixin-exists(hook-breadcrumb-divider) {
+    @if meta.mixin-exists('hook-breadcrumb-divider') {
         @include hook-breadcrumb-divider;
     }
 }
@@ -100,7 +102,7 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-breadcrumb-misc) {
+@if meta.mixin-exists('hook-breadcrumb-misc') {
     @include hook-breadcrumb-misc;
 }