@broxus/react-uikit 0.18.0 → 0.19.0

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

@@ -1,14 +1,17 @@
 // Name:            Vars
-// Description:     Define.scss variables via the `var()` CSS function
+// Description:     Define variables via the `var()` CSS function
 //
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
-:root, ::after, ::before {
+:root,
+::after,
+::before {
     // Breakpoints
     // ========================================================================
 
+    --breakpoint-2xsmall: #{$breakpoint-2xsmall};
     --breakpoint-xsmall: #{$breakpoint-xsmall};
     --breakpoint-small: #{$breakpoint-small};
     --breakpoint-medium: #{$breakpoint-medium};
@@ -16,6 +19,7 @@
     --breakpoint-xlarge: #{$breakpoint-xlarge};
     --breakpoint-2xlarge: #{$breakpoint-2xlarge};
     --breakpoint-3xlarge: #{$breakpoint-3xlarge};
+    --breakpoint-2xsmall-max: #{$breakpoint-2xsmall-max};
     --breakpoint-xsmall-max: #{$breakpoint-xsmall-max};
     --breakpoint-small-max: #{$breakpoint-small-max};
     --breakpoint-medium-max: #{$breakpoint-medium-max};
@@ -30,6 +34,7 @@
     //
     // Typography
     //
+
     --global-font-family: #{$global-font-family};
     --global-font-size: #{$global-font-size};
     --global-font-weight: #{$global-font-weight};
@@ -53,6 +58,12 @@
     --global-link-color: #{$global-link-color};
     --global-link-hover-color: #{$global-link-hover-color};
     --global-inverse-color: #{$global-inverse-color};
+    --global-primary-color: #{$global-primary-color};
+    --global-secondary-color: #{$global-secondary-color};
+    --global-tertiary-color: #{$global-tertiary-color};
+    --global-success-color: #{$global-success-color};
+    --global-warning-color: #{$global-warning-color};
+    --global-danger-color: #{$global-danger-color};
 
     //
     // Backgrounds
@@ -79,7 +90,12 @@
     --global-primary-border: #{$global-primary-border};
     --global-secondary-border: #{$global-secondary-border};
     --global-tertiary-border: #{$global-tertiary-border};
+    --global-success-border: #{$global-success-border};
+    --global-warning-border: #{$global-warning-border};
+    --global-danger-border: #{$global-danger-border};
     --global-border-radius: #{$global-border-radius};
+    --global-small-border-radius: #{$global-small-border-radius};
+    --global-xsmall-border-radius: #{$global-xsmall-border-radius};
 
     //
     // Box-Shadows
@@ -106,6 +122,7 @@
     --global-medium-gutter: #{$global-medium-gutter};
     --global-large-gutter: #{$global-large-gutter};
     --global-xlarge-gutter: #{$global-xlarge-gutter};
+    --global-2xlarge-gutter: #{$global-2xlarge-gutter};
 
     //
     // Controls

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

@@ -12,11 +12,13 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+
 
 // Variables
 // ========================================================================
 
-@import 'variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -111,7 +113,7 @@
  */
 
 /* 1 + 2 */
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-within) {
     height: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
@@ -127,7 +129,7 @@
  */
 
 /* 1 + 2 */
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover, :focus) .uk-invisible-hover:not(:focus-within) {
     /* 3 */
     opacity: 0 !important;
 }
@@ -177,8 +179,6 @@
 // Hooks
 // ========================================================================
 
-@if mixin-exists(hook-visibility-misc) {
-    @include hook-visibility-misc();
+@if meta.mixin-exists('hook-visibility-misc') {
+    @include hook-visibility-misc;
 }
-
-// @mixin hook-visibility-misc() {}

package/{dist/esm/components/Width/index.scss → styles/width.scss}

@@ -6,10 +6,14 @@
 //
 // ========================================================================
 
+@use 'sass:meta';
+@use 'sass:string';
+
+
 // Variables
 // ========================================================================
 
-@import '../../styles/variables.scss';
+@use 'variables' as *;
 
 
 /* ========================================================================
@@ -30,7 +34,7 @@
 }
 
 .uk-child-width-1-3 > * {
-    width: unquote('calc(100% * 1 / 3.001)');
+    width: string.unquote('calc(100% * 1 / 3.001)');
 }
 
 .uk-child-width-1-4 > * {
@@ -42,7 +46,7 @@
 }
 
 .uk-child-width-1-6 > * {
-    width: unquote('calc(100% * 1 / 6.001)');
+    width: string.unquote('calc(100% * 1 / 6.001)');
 }
 
 .uk-child-width-auto > * {
@@ -75,7 +79,7 @@
     }
 
     .uk-child-width-1-3\@s > * {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-child-width-1-4\@s > * {
@@ -87,7 +91,7 @@
     }
 
     .uk-child-width-1-6\@s > * {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-child-width-auto\@s > * {
@@ -112,7 +116,7 @@
     }
 
     .uk-child-width-1-3\@m > * {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-child-width-1-4\@m > * {
@@ -124,7 +128,7 @@
     }
 
     .uk-child-width-1-6\@m > * {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-child-width-auto\@m > * {
@@ -149,7 +153,7 @@
     }
 
     .uk-child-width-1-3\@l > * {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-child-width-1-4\@l > * {
@@ -161,7 +165,7 @@
     }
 
     .uk-child-width-1-6\@l > * {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-child-width-auto\@l > * {
@@ -186,7 +190,7 @@
     }
 
     .uk-child-width-1-3\@xl > * {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-child-width-1-4\@xl > * {
@@ -198,7 +202,7 @@
     }
 
     .uk-child-width-1-6\@xl > * {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-child-width-auto\@xl > * {
@@ -234,11 +238,11 @@
 
 /* Thirds */
 .uk-width-1-3 {
-    width: unquote('calc(100% * 1 / 3.001)');
+    width: string.unquote('calc(100% * 1 / 3.001)');
 }
 
 .uk-width-2-3 {
-    width: unquote('calc(100% * 2 / 3.001)');
+    width: string.unquote('calc(100% * 2 / 3.001)');
 }
 
 /* Quarters */
@@ -269,11 +273,11 @@
 
 /* Sixths */
 .uk-width-1-6 {
-    width: unquote('calc(100% * 1 / 6.001)');
+    width: string.unquote('calc(100% * 1 / 6.001)');
 }
 
 .uk-width-5-6 {
-    width: unquote('calc(100% * 5 / 6.001)');
+    width: string.unquote('calc(100% * 5 / 6.001)');
 }
 
 /* Pixel */
@@ -323,11 +327,11 @@
 
     /* Thirds */
     .uk-width-1-3\@s {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-width-2-3\@s {
-        width: unquote('calc(100% * 2 / 3.001)');
+        width: string.unquote('calc(100% * 2 / 3.001)');
     }
 
     /* Quarters */
@@ -358,11 +362,11 @@
 
     /* Sixths */
     .uk-width-1-6\@s {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-width-5-6\@s {
-        width: unquote('calc(100% * 5 / 6.001)');
+        width: string.unquote('calc(100% * 5 / 6.001)');
     }
 
     /* Pixel */
@@ -413,11 +417,11 @@
 
     /* Thirds */
     .uk-width-1-3\@m {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-width-2-3\@m {
-        width: unquote('calc(100% * 2 / 3.001)');
+        width: string.unquote('calc(100% * 2 / 3.001)');
     }
 
     /* Quarters */
@@ -448,11 +452,11 @@
 
     /* Sixths */
     .uk-width-1-6\@m {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-width-5-6\@m {
-        width: unquote('calc(100% * 5 / 6.001)');
+        width: string.unquote('calc(100% * 5 / 6.001)');
     }
 
     /* Pixel */
@@ -503,11 +507,11 @@
 
     /* Thirds */
     .uk-width-1-3\@l {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-width-2-3\@l {
-        width: unquote('calc(100% * 2 / 3.001)');
+        width: string.unquote('calc(100% * 2 / 3.001)');
     }
 
     /* Quarters */
@@ -538,11 +542,11 @@
 
     /* Sixths */
     .uk-width-1-6\@l {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-width-5-6\@l {
-        width: unquote('calc(100% * 5 / 6.001)');
+        width: string.unquote('calc(100% * 5 / 6.001)');
     }
 
     /* Pixel */
@@ -593,11 +597,11 @@
 
     /* Thirds */
     .uk-width-1-3\@xl {
-        width: unquote('calc(100% * 1 / 3.001)');
+        width: string.unquote('calc(100% * 1 / 3.001)');
     }
 
     .uk-width-2-3\@xl {
-        width: unquote('calc(100% * 2 / 3.001)');
+        width: string.unquote('calc(100% * 2 / 3.001)');
     }
 
     /* Quarters */
@@ -628,11 +632,11 @@
 
     /* Sixths */
     .uk-width-1-6\@xl {
-        width: unquote('calc(100% * 1 / 6.001)');
+        width: string.unquote('calc(100% * 1 / 6.001)');
     }
 
     .uk-width-5-6\@xl {
-        width: unquote('calc(100% * 5 / 6.001)');
+        width: string.unquote('calc(100% * 5 / 6.001)');
     }
 
     /* Pixel */
@@ -673,7 +677,7 @@
 // ========================================================================
 
 
-@if mixin-exists(hook-width-misc) {
+@if meta.mixin-exists('hook-width-misc') {
     @include hook-width-misc;
 }
 

package/dist/cjs/components/Align/index.scss

@@ -1,147 +0,0 @@
-// Name:            Align
-// Description:     Utilities to align embedded content
-//
-// Component:       `uk-align-left-*`
-//                  `uk-align-right-*`
-//                  `uk-align-center`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Align
- ========================================================================== */
-
-/*
- * Default
- */
-
-[class*='uk-align'] {
-    display: block;
-    margin-bottom: var(--align-margin-vertical);
-}
-
-* + [class*='uk-align'] {
-    margin-top: var(--align-margin-vertical);
-}
-
-/*
- * Center
- */
-
-.uk-align-center {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/*
- * Left/Right
- */
-
-.uk-align-left {
-    float: left;
-    margin-right: var(--align-margin-horizontal);
-    margin-top: 0;
-}
-
-.uk-align-right {
-    float: right;
-    margin-left: var(--align-margin-horizontal);
-    margin-top: 0;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-    .uk-align-left\@s {
-        float: left;
-        margin-right: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@s {
-        float: right;
-        margin-left: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-align-left\@m {
-        float: left;
-        margin-right: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@m {
-        float: right;
-        margin-left: var(--align-margin-horizontal);
-        margin-top: 0;
-    }
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-    .uk-align-left\@l {
-        float: left;
-        margin-top: 0;
-    }
-
-    .uk-align-right\@l {
-        float: right;
-        margin-top: 0;
-    }
-
-    .uk-align-left,
-    .uk-align-left\@s,
-    .uk-align-left\@m,
-    .uk-align-left\@l {
-        margin-right: var(--align-margin-horizontal-l);
-    }
-
-    .uk-align-right,
-    .uk-align-right\@s,
-    .uk-align-right\@m,
-    .uk-align-right\@l {
-        margin-left: var(--align-margin-horizontal-l);
-    }
-}
-
-/* Large screen and bigger */
-@media (min-width: $breakpoint-xlarge) {
-    .uk-align-left\@xl {
-        float: left;
-        margin-right: var(--align-margin-horizontal-l);
-        margin-top: 0;
-    }
-
-    .uk-align-right\@xl {
-        float: right;
-        margin-left: var(--align-margin-horizontal-l);
-        margin-top: 0;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-align-misc) {
-    @include hook-align-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --align-margin-horizontal: var(--global-gutter);
-    --align-margin-horizontal-l: var(--global-medium-gutter);
-    --align-margin-vertical: var(--global-gutter);
-}

package/dist/cjs/components/Article/index.scss

@@ -1,103 +0,0 @@
-// Name:            Article
-// Description:     Component to create articles
-//
-// Component:       `uk-article`
-//
-// Sub-objects:     `uk-article-title`
-//                  `uk-article-meta`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../styles/variables.scss';
-
-
-/* ========================================================================
-   Component: Article
- ========================================================================== */
-
-.uk-article {
-    display: flow-root;
-    @if mixin-exists(hook-article) {
-        @include hook-article;
-    }
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.uk-article > :last-child {
-    margin-bottom: 0;
-}
-
-
-/* Adjacent sibling
- ========================================================================== */
-
-.uk-article + .uk-article {
-    margin-top: var(--article-margin-top);
-    @if mixin-exists(hook-article-adjacent) {
-        @include hook-article-adjacent;
-    }
-}
-
-
-/* Title
- ========================================================================== */
-
-.uk-article-title {
-    font-size: var(--article-title-font-size);
-    line-height: var(--article-title-line-height);
-    @if mixin-exists(hook-article-title) {
-        @include hook-article-title;
-    }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-    .uk-article-title {
-        font-size: var(--article-title-font-size-m);
-    }
-}
-
-
-/* Meta
- ========================================================================== */
-
-.uk-article-meta {
-    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) {
-        @include hook-article-meta;
-    }
-}
-
-
-// Hooks
-// ========================================================================
-
-@if mixin-exists(hook-article-misc) {
-    @include hook-article-misc;
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --article-margin-top: var(--global-large-margin);
-    --article-title-font-size-m: var(--global-2xlarge-font-size);
-    --article-title-font-size: calc(var(--article-title-font-size-m) * 0.85);
-    --article-title-line-height: #{$article-title-line-height};
-    --article-meta-font-size: var(--global-small-font-size);
-    --article-meta-line-height: #{$article-meta-line-height};
-    --article-meta-color: var(--global-muted-color);
-
-    // Inverse
-    --inverse-article-meta-color: var(--inverse-global-muted-color);
-}