@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/base/_base.scss

@@ -0,0 +1,661 @@
+// Name:            Base
+// Description:     Default values for HTML elements
+//
+// Component:       `uk-link`
+//                  `uk-h1`, `uk-h2`, `uk-h3`, `uk-h4`, `uk-h5`, `uk-h6`
+//                  `uk-hr`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin base-styles {
+    /* ========================================================================
+       Component: Base
+     ========================================================================== */
+
+    /*
+     * 1. Set `font-size` to support `rem` units
+     *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
+     * 2. Prevent adjustments of font size after orientation changes in iOS.
+     * 3. Style
+     */
+
+    html {
+        background: var(--base-body-background); /* 3 */
+        color: var(--base-body-color); /* 3 */
+        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 map.has-key($mixins, 'hook-base-body') {
+            @include meta.apply(map.get($mixins, 'hook-base-body'));
+        }
+    }
+
+    /*
+     * Remove the margin in all browsers.
+     */
+
+    body { margin: 0; }
+
+
+    /* Links
+     ========================================================================== */
+
+    /*
+     * Style
+     */
+
+    a,
+    .#{$prefix}-link {
+        color: var(--base-link-color);
+        cursor: pointer;
+        text-decoration: var(--base-link-text-decoration);
+        @if map.has-key($mixins, 'hook-base-link') {
+            @include meta.apply(map.get($mixins, 'hook-base-link'));
+        }
+    }
+
+    a:hover,
+    .#{$prefix}-link:hover,
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link,
+    .#{$prefix}-link-toggle:focus .#{$prefix}-link {
+        color: var(--base-link-hover-color);
+        text-decoration: var(--base-link-hover-text-decoration);
+        @if map.has-key($mixins, 'hook-base-link-hover') {
+            @include meta.apply(map.get($mixins, 'hook-base-link-hover'));
+        }
+    }
+
+    /*
+     * Fix text underline offset if `vertical-align`is set to `middle`
+     */
+
+    a:has(.#{$prefix}-text-middle),
+    .#{$prefix}-link:has(.#{$prefix}-text-middle),
+    .#{$prefix}-link-toggle:hover .#{$prefix}-link:has(.#{$prefix}-text-middle) { text-underline-offset: 0.1875em; }
+
+
+    /* Text-level semantics
+     ========================================================================== */
+
+    /*
+     * 1. Add the correct text decoration in Edge.
+     * 2. The shorthand declaration `underline dotted` is not supported in Safari.
+     */
+
+    abbr[title] {
+        text-decoration: underline dotted; /* 1 */
+        -webkit-text-decoration-style: dotted; /* 2 */
+    }
+
+    /*
+     * Add the correct font weight in Chrome, Edge, and Safari.
+     */
+
+    b,
+    strong { font-weight: var(--base-strong-font-weight); }
+
+    /*
+     * 1. Consolas has a better baseline in running text compared to `Courier`
+     * 2. Correct the odd `em` font sizing in all browsers.
+     * 3. Style
+     */
+
+    :not(pre) > code,
+    :not(pre) > kbd,
+    :not(pre) > samp {
+        color: var(--base-code-color); /* 3 */
+        font-family: var(--base-code-font-family), monospace; /* 1 */
+        font-size: var(--base-code-font-size); /* 2 */
+        padding: var(--base-code-padding-vertical) var(--base-code-padding-horizontal);
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-base-code') {
+            @include meta.apply(map.get($mixins, 'hook-base-code'));
+        }
+    }
+
+    /*
+     * Emphasize
+     */
+
+    em { color: var(--base-em-color); }
+
+    /*
+     * Insert
+     */
+
+    ins {
+        background: var(--base-ins-background);
+        color: var(--base-ins-color);
+        text-decoration: none;
+    }
+
+    /*
+     * Mark
+     */
+
+    mark {
+        background: var(--base-mark-background);
+        color: var(--base-mark-color);
+    }
+
+    /*
+     * Quote
+     */
+
+    q { font-style: var(--base-quote-font-style); }
+
+    /*
+     * Add the correct font size in all browsers.
+     */
+
+    small { font-size: var(--base-small-font-size); }
+
+    /*
+     * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+     */
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sup { top: -0.5em; }
+    sub { bottom: -0.25em; }
+
+
+    /* Embedded content
+     ========================================================================== */
+
+    /*
+     * Remove the gap between the element and the bottom of its parent container.
+     */
+
+    audio,
+    canvas,
+    iframe,
+    img,
+    svg,
+    video { vertical-align: middle; }
+
+    /*
+     * 1. Constrain the element to its parent width.
+     * 2. Take border and padding into account.
+     * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
+     * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
+     * 5. Size image to fill the element's content box.
+     * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
+     */
+
+    canvas,
+    img,
+    svg,
+    video {
+        aspect-ratio: string.unquote('attr(width type(<number>)) / attr(height type(<number>))'); /* 4 */
+        box-sizing: border-box; /* 3 */
+        height: auto; /* 2 */
+        max-width: 100%; /* 1 */
+        object-fit: cover; /* 5 */
+    }
+
+    /*
+     * Deprecated: only needed for `img` elements with `uk-img`
+     * 1. Hide `alt` text for lazy load images.
+     * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
+     */
+
+    img:not([src]) {
+        min-width: 1px; /* 2 */
+        visibility: hidden; /* 1 */
+    }
+
+    /*
+     * Iframe
+     * Remove border in all browsers
+     */
+
+    iframe { border: 0; }
+
+
+    /* Block elements
+     ========================================================================== */
+
+    /*
+     * Margins
+     */
+
+    p,
+    ul,
+    ol,
+    dl,
+    pre,
+    address,
+    fieldset,
+    figure { margin: 0 0 var(--base-margin-vertical) 0; }
+
+    /* Add margin if adjacent element */
+    * + p,
+    * + ul,
+    * + ol,
+    * + dl,
+    * + pre,
+    * + address,
+    * + fieldset,
+    * + figure { margin-top: var(--base-margin-vertical); }
+
+
+    /* Headings
+     ========================================================================== */
+
+    h1, .#{$prefix}-h1,
+    h2, .#{$prefix}-h2,
+    h3, .#{$prefix}-h3,
+    h4, .#{$prefix}-h4,
+    h5, .#{$prefix}-h5,
+    h6, .#{$prefix}-h6,
+    .#{$prefix}-heading-small,
+    .#{$prefix}-heading-medium,
+    .#{$prefix}-heading-large,
+    .#{$prefix}-heading-xlarge,
+    .#{$prefix}-heading-2xlarge,
+    .#{$prefix}-heading-3xlarge {
+        color: var(--base-heading-color);
+        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 map.has-key($mixins, 'hook-base-heading') {
+            @include meta.apply(map.get($mixins, 'hook-base-heading'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + h1, * + .#{$prefix}-h1,
+    * + h2, * + .#{$prefix}-h2,
+    * + h3, * + .#{$prefix}-h3,
+    * + h4, * + .#{$prefix}-h4,
+    * + h5, * + .#{$prefix}-h5,
+    * + h6, * + .#{$prefix}-h6,
+    * + .#{$prefix}-heading-small,
+    * + .#{$prefix}-heading-medium,
+    * + .#{$prefix}-heading-large,
+    * + .#{$prefix}-heading-xlarge,
+    * + .#{$prefix}-heading-2xlarge,
+    * + .#{$prefix}-heading-3xlarge {
+        margin-top: var(--base-heading-margin-top);
+    }
+
+    /*
+     * Sizes
+     */
+
+    h1, .#{$prefix}-h1 {
+        font-size: var(--base-h1-font-size);
+        line-height: var(--base-h1-line-height);
+        @if map.has-key($mixins, 'hook-base-h1') {
+            @include meta.apply(map.get($mixins, 'hook-base-h1'));
+        }
+    }
+
+    h2, .#{$prefix}-h2 {
+        font-size: var(--base-h2-font-size);
+        line-height: var(--base-h2-line-height);
+        @if map.has-key($mixins, 'hook-base-h2') {
+            @include meta.apply(map.get($mixins, 'hook-base-h2'));
+        }
+    }
+
+    h3, .#{$prefix}-h3 {
+        font-size: var(--base-h3-font-size);
+        line-height: var(--base-h3-line-height);
+        @if map.has-key($mixins, 'hook-base-h3') {
+            @include meta.apply(map.get($mixins, 'hook-base-h3'));
+        }
+    }
+
+    h4, .#{$prefix}-h4 {
+        font-size: var(--base-h4-font-size);
+        line-height: var(--base-h4-line-height);
+        @if map.has-key($mixins, 'hook-base-h4') {
+            @include meta.apply(map.get($mixins, 'hook-base-h4'));
+        }
+    }
+
+    h5, .#{$prefix}-h5 {
+        font-size: var(--base-h5-font-size);
+        line-height: var(--base-h5-line-height);
+        @if map.has-key($mixins, 'hook-base-h5') {
+            @include meta.apply(map.get($mixins, 'hook-base-h5'));
+        }
+    }
+
+    h6, .#{$prefix}-h6 {
+        font-size: var(--base-h6-font-size);
+        line-height: var(--base-h6-line-height);
+        @if map.has-key($mixins, 'hook-base-h6') {
+            @include meta.apply(map.get($mixins, 'hook-base-h6'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+
+        h1, .#{$prefix}-h1 { font-size: var(--base-h1-font-size-m); }
+        h2, .#{$prefix}-h2 { font-size: var(--base-h2-font-size-m); }
+
+    }
+
+
+    /* Lists
+     ========================================================================== */
+
+    ul, ol { padding-left: var(--base-list-padding-left); }
+
+    /*
+     * Reset margin for nested lists
+     */
+
+    ul > li > ul,
+    ul > li > ol,
+    ol > li > ol,
+    ol > li > ul {
+        margin: 0;
+    }
+
+
+    /* Description lists
+     ========================================================================== */
+
+    dt { font-weight: bold; }
+    dd { margin-left: 0; }
+
+
+    /* Horizontal rules
+     ========================================================================== */
+
+    /*
+     * 1. Show the overflow in Chrome, Edge and IE.
+     * 2. Add the correct text-align in Edge and IE.
+     * 3. Style
+     */
+
+    hr, .#{$prefix}-hr {
+        border: 0; /* 3 */
+        border-top: var(--base-hr-border-width) solid var(--base-hr-border); /* 3 */
+        margin: 0 0 var(--base-hr-margin-vertical) 0; /* 3 */
+        overflow: visible; /* 1 */
+        text-align: inherit; /* 2 */
+        @if map.has-key($mixins, 'hook-base-hr') {
+            @include meta.apply(map.get($mixins, 'hook-base-hr'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + hr,
+    * + .#{$prefix}-hr {
+        margin-top: var(--base-hr-margin-vertical);
+    }
+
+
+    /* Address
+     ========================================================================== */
+
+    address { font-style: normal; }
+
+
+    /* Blockquotes
+     ========================================================================== */
+
+    blockquote {
+        color: var(--base-blockquote-color);
+        font-size: var(--base-blockquote-font-size);
+        font-style: var(--base-blockquote-font-style);
+        line-height: var(--base-blockquote-line-height);
+        margin: 0 0 var(--base-blockquote-margin-vertical) 0;
+        @if map.has-key($mixins, 'hook-base-blockquote') {
+            @include meta.apply(map.get($mixins, 'hook-base-blockquote'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + blockquote {
+        margin-top: var(--base-blockquote-margin-vertical);
+    }
+
+    /*
+     * Content
+     */
+
+    blockquote p:last-of-type {
+        margin-bottom: 0;
+    }
+
+    blockquote footer {
+        color: var(--base-blockquote-footer-color);
+        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 map.has-key($mixins, 'hook-base-blockquote-footer') {
+            @include meta.apply(map.get($mixins, 'hook-base-blockquote-footer'));
+        }
+    }
+
+
+    /* Preformatted text
+     ========================================================================== */
+
+    /*
+     * 1. Contain overflow in all browsers.
+     */
+
+    pre {
+        color: var(--base-pre-color);
+        font-family: var(--base-pre-font-family), monospace;
+        font-size: var(--base-pre-font-size);
+        line-height: var(--base-pre-line-height);
+        overflow: auto; /* 1 */
+        tab-size: 4;
+        @if map.has-key($mixins, 'hook-base-pre') {
+            @include meta.apply(map.get($mixins, 'hook-base-pre'));
+        }
+    }
+
+    pre code { font-family: var(--base-pre-font-family), monospace; }
+
+
+    /* Focus
+     ========================================================================== */
+
+    /*
+     * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
+     * 1. Fallback: Remove `:focus` for a negative tab-indexes.
+     * 2. Fallback: Set `:focus` style but not for negative tab-indexes.
+     * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+     * 4. Set `:focus-visible` style for browsers which support it.
+     */
+
+    /* 1 */
+    :focus { outline: none; }
+
+    /* 2 */
+    :focus:not([tabindex^='-']) {
+        outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
+        outline-offset: var(--base-focus-outline-offset);
+    }
+
+    /* 3 */
+    :focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    /* 4 */
+    :focus-visible {
+        outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline);
+        outline-offset: var(--base-focus-outline-offset);
+    }
+
+
+    /* Selection pseudo-element
+     ========================================================================== */
+
+    ::selection {
+        background: var(--base-selection-background);
+        color: var(--base-selection-color);
+        text-shadow: none;
+    }
+
+
+    /* HTML5 elements
+     ========================================================================== */
+
+    /*
+     * 1. Add the correct display in Edge, IE 10+, and Firefox.
+     * 2. Add the correct display in IE.
+     */
+
+    details, /* 1 */
+    main { /* 2 */
+        display: block;
+    }
+
+    /*
+     * Add the correct display in all browsers.
+     */
+
+    summary { display: list-item; }
+
+    /*
+     * Add the correct display in IE.
+     */
+
+    template { display: none; }
+
+
+    /* Pass media breakpoints to JS
+     ========================================================================== */
+
+    /*
+     * Breakpoints
+     */
+
+    .#{$prefix}-breakpoint-s::before { content: var(--breakpoint-small); }
+    .#{$prefix}-breakpoint-m::before { content: var(--breakpoint-medium); }
+    .#{$prefix}-breakpoint-l::before { content: var(--breakpoint-large); }
+    .#{$prefix}-breakpoint-xl::before { content: var(--breakpoint-xlarge); }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-base-misc') {
+        @include meta.apply(map.get($mixins, 'hook-base-misc'));
+    }
+
+    @content;
+}
+
+@mixin base-tokens {
+    --base-body-background: var(--global-background);
+    --base-body-font-family: var(--global-font-family);
+    --base-body-font-weight: #{$base-body-font-weight};
+    --base-body-font-size: var(--global-font-size);
+    --base-body-line-height: var(--global-line-height);
+    --base-body-color: var(--global-color);
+    --base-link-color: var(--global-link-color);
+    --base-link-text-decoration: #{$base-link-text-decoration};
+    --base-link-hover-color: var(--global-link-hover-color);
+    --base-link-hover-text-decoration: #{$base-link-hover-text-decoration};
+    --base-strong-font-weight: #{$base-strong-font-weight};
+    --base-code-font-size: var(--global-small-font-size);
+    --base-code-font-family: #{$base-code-font-family};
+    --base-code-color: var(--global-danger-background);
+    --base-code-padding-horizontal: #{$base-code-padding-horizontal};
+    --base-code-padding-vertical: #{$base-code-padding-vertical};
+    --base-em-color: var(--global-danger-background);
+    --base-ins-background: #{$base-ins-background};
+    --base-ins-color: var(--global-color);
+    --base-mark-background: #{$base-mark-background};
+    --base-mark-color: var(--global-color);
+    --base-quote-font-style: #{$base-quote-font-style};
+    --base-small-font-size: #{$base-small-font-size};
+    --base-margin-vertical: var(--global-margin);
+    --base-heading-font-family: var(--global-font-family);
+    --base-heading-font-weight: #{$base-heading-font-weight};
+    --base-heading-color: var(--global-emphasis-color);
+    --base-heading-text-transform: #{$base-heading-text-transform};
+    --base-heading-margin-top: var(--global-medium-margin);
+    --base-h1-font-size-m: var(--global-2xlarge-font-size);
+    --base-h1-font-size: calc(var(--base-h1-font-size-m) * 0.85);
+    --base-h1-line-height: #{$base-h1-line-height};
+    --base-h2-font-size-m: var(--global-xlarge-font-size);
+    --base-h2-font-size: calc(var(--base-h2-font-size-m) * 0.85);
+    --base-h2-line-height: #{$base-h2-line-height};
+    --base-h3-font-size: var(--global-large-font-size);
+    --base-h3-line-height: #{$base-h3-line-height};
+    --base-h4-font-size: var(--global-medium-font-size);
+    --base-h4-line-height: #{$base-h4-line-height};
+    --base-h5-font-size: var(--global-font-size);
+    --base-h5-line-height: #{$base-h5-line-height};
+    --base-h6-font-size: var(--global-small-font-size);
+    --base-h6-line-height: #{$base-h6-line-height};
+    --base-list-padding-left: #{$base-list-padding-left};
+    --base-hr-margin-vertical: var(--global-margin);
+    --base-hr-border-width: var(--global-border-width);
+    --base-hr-border: var(--global-border);
+    --base-blockquote-font-size: var(--global-medium-font-size);
+    --base-blockquote-line-height: #{$base-blockquote-line-height};
+    --base-blockquote-font-style: #{$base-blockquote-font-style};
+    --base-blockquote-margin-vertical: var(--global-margin);
+    --base-blockquote-color: var(--global-emphasis-color);
+    --base-blockquote-footer-color: var(--global-color);
+    --base-blockquote-footer-margin-top: var(--global-small-margin);
+    --base-blockquote-footer-font-size: var(--global-small-font-size);
+    --base-blockquote-footer-line-height: #{$base-blockquote-footer-line-height};
+    --base-pre-font-size: var(--global-small-font-size);
+    --base-pre-line-height: #{$base-pre-line-height};
+    --base-pre-font-family: var(--base-code-font-family);
+    --base-pre-color: var(--global-color);
+    --base-focus-outline-width: #{$base-focus-outline-width};
+    --base-focus-outline-style: #{$base-focus-outline-style};
+    --base-focus-outline: var(--global-emphasis-color);
+    --base-focus-outline-offset: #{$base-focus-outline-offset};
+    --base-selection-background: #{$base-selection-background};
+    --base-selection-color: var(--global-inverse-color);
+    --uk-breakpoint-s: var(--breakpoint-small);
+    --uk-breakpoint-m: var(--breakpoint-medium);
+    --uk-breakpoint-l: var(--breakpoint-large);
+    --uk-breakpoint-xl: var(--breakpoint-xlarge);
+
+    @content;
+}
+
+@mixin base-inverse-tokens {
+    --inverse-base-color: var(--inverse-global-color);
+    --inverse-base-link-color: var(--inverse-global-emphasis-color);
+    --inverse-base-link-hover-color: var(--inverse-global-emphasis-color);
+    --inverse-base-code-color: var(--inverse-global-color);
+    --inverse-base-em-color: var(--inverse-global-emphasis-color);
+    --inverse-base-heading-color: var(--inverse-global-emphasis-color);
+    --inverse-base-hr-border: var(--inverse-global-color);
+    --inverse-base-focus-outline: var(--inverse-global-emphasis-color);
+    --inverse-base-blockquote-color: var(--inverse-global-emphasis-color);
+    --inverse-base-blockquote-footer-color: var(--inverse-global-color);
+
+    @content;
+}

package/styles/base/_index.scss

@@ -0,0 +1,11 @@
+@use 'base' as *;
+
+$generate-tokens: true !default;
+
+@include base-styles;
+
+@if $generate-tokens {
+    :root {
+        @include base-tokens;
+    }
+}