@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/section/_section.scss

@@ -0,0 +1,293 @@
+// Name:            Section
+// Description:     Component to create horizontal layout section
+//
+// Component:       `uk-section`
+//
+// Modifiers:       `uk-section-xsmall`
+//                  `uk-section-small`
+//                  `uk-section-large`
+//                  `uk-section-xlarge`
+//                  `uk-section-default`
+//                  `uk-section-muted`
+//                  `uk-section-primary`
+//                  `uk-section-secondary`
+//                  `uk-section-tertiary`
+//                  `uk-section-overlap`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin section-styles {
+    /* ========================================================================
+       Component: Section
+     ========================================================================== */
+
+    /*
+     * 1. Make it work with `100vh` and height in general
+     */
+
+    .#{$prefix}-section {
+        box-sizing: border-box; /* 1 */
+        display: flow-root;
+        padding-bottom: var(--section-padding-vertical);
+        padding-top: var(--section-padding-vertical);
+        @if map.has-key($mixins, 'hook-section') {
+            @include meta.apply(map.get($mixins, 'hook-section'));
+        }
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-section {
+            padding-bottom: var(--section-padding-vertical-m);
+            padding-top: var(--section-padding-vertical-m);
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-section > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Size modifiers
+     ========================================================================== */
+
+    /*
+     * XSmall
+     */
+
+    .#{$prefix}-section-xsmall {
+        padding-bottom: var(--section-xsmall-padding-vertical);
+        padding-top: var(--section-xsmall-padding-vertical);
+    }
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-section-small {
+        padding-bottom: var(--section-small-padding-vertical);
+        padding-top: var(--section-small-padding-vertical);
+    }
+
+    /*
+     * Large
+     */
+
+    .#{$prefix}-section-large {
+        padding-bottom: var(--section-large-padding-vertical);
+        padding-top: var(--section-large-padding-vertical);
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-section-large {
+            padding-bottom: var(--section-large-padding-vertical-m);
+            padding-top: var(--section-large-padding-vertical-m);
+        }
+    }
+
+    /*
+     * XLarge
+     */
+
+    .#{$prefix}-section-xlarge {
+        padding-bottom: var(--section-xlarge-padding-vertical);
+        padding-top: var(--section-xlarge-padding-vertical);
+    }
+
+    /* Tablet landscape and bigger */
+    @media (--media-breakpoint-medium) {
+        .#{$prefix}-section-xlarge {
+            padding-bottom: var(--section-xlarge-padding-vertical-m);
+            padding-top: var(--section-xlarge-padding-vertical-m);
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Default
+     */
+
+    .#{$prefix}-section-default {
+        --uk-inverse: #{$section-default-color-mode};
+        background: var(--section-default-background);
+        @if map.has-key($mixins, 'hook-section-default') {
+            @include meta.apply(map.get($mixins, 'hook-section-default'));
+        }
+    }
+
+    /*
+     * Muted
+     */
+
+    .#{$prefix}-section-muted {
+        --uk-inverse: #{$section-muted-color-mode};
+        background: var(--section-muted-background);
+        @if map.has-key($mixins, 'hook-section-muted') {
+            @include meta.apply(map.get($mixins, 'hook-section-muted'));
+        }
+    }
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-section-primary {
+        --uk-inverse: #{$section-primary-color-mode};
+        background: var(--section-primary-background);
+        @if map.has-key($mixins, 'hook-section-primary') {
+            @include meta.apply(map.get($mixins, 'hook-section-primary'));
+        }
+    }
+
+    /*
+     * Secondary
+     */
+
+    .#{$prefix}-section-secondary {
+        --uk-inverse: #{$section-secondary-color-mode};
+        background: var(--section-secondary-background);
+        @if map.has-key($mixins, 'hook-section-secondary') {
+            @include meta.apply(map.get($mixins, 'hook-section-secondary'));
+        }
+    }
+
+    /*
+     * Tertiary
+     */
+
+    .#{$prefix}-section-tertiary {
+        --uk-inverse: #{$section-tertiary-color-mode};
+        background: var(--section-tertiary-background);
+        @if map.has-key($mixins, 'hook-section-tertiary') {
+            @include meta.apply(map.get($mixins, 'hook-section-tertiary'));
+        }
+    }
+
+    /* Overlap modifier
+     ========================================================================== */
+
+    /*
+     * Reserved modifier to make a section overlap another section with an border image
+     * Implemented by the theme
+     */
+
+    .#{$prefix}-section-overlap {
+        @if map.has-key($mixins, 'hook-section-overlap') {
+            @include meta.apply(map.get($mixins, 'hook-section-overlap'));
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-section-misc') {
+        @include meta.apply(map.get($mixins, 'hook-section-misc'));
+    }
+
+    @content;
+}
+
+@mixin section-tokens {
+    --section-padding-vertical: var(--global-medium-margin);
+    --section-padding-vertical-m: var(--global-large-margin);
+    --section-xsmall-padding-vertical: var(--global-margin);
+    --section-small-padding-vertical: var(--global-medium-margin);
+    --section-large-padding-vertical: var(--global-large-margin);
+    --section-large-padding-vertical-m: var(--global-xlarge-margin);
+    --section-xlarge-padding-vertical: var(--global-xlarge-margin);
+    --section-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+    --section-default-background: var(--global-background);
+    --section-muted-background: var(--global-muted-background);
+    --section-primary-background: var(--global-primary-background);
+    --section-secondary-background: var(--global-secondary-background);
+    --section-tertiary-background: var(--global-tertiary-background);
+
+    @content;
+}
+
+@mixin section-inverse-styles {
+    // Color mode
+    @if $section-default-color-mode == dark {
+        .#{$prefix}-section-default:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $section-default-color-mode == light {
+        .#{$prefix}-section-default:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $section-muted-color-mode == dark {
+        .#{$prefix}-section-muted:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $section-muted-color-mode == light {
+        .#{$prefix}-section-muted:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $section-primary-color-mode == dark {
+        .#{$prefix}-section-primary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $section-primary-color-mode == light {
+        .#{$prefix}-section-primary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $section-secondary-color-mode == dark {
+        .#{$prefix}-section-secondary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $section-secondary-color-mode == light {
+        .#{$prefix}-section-secondary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $section-tertiary-color-mode == dark {
+        .#{$prefix}-section-tertiary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $section-tertiary-color-mode == light {
+        .#{$prefix}-section-tertiary:not(.#{$prefix}-preserve-color) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @content;
+}

package/styles/segmented/_index.scss

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

package/styles/segmented/_segmented.scss

@@ -0,0 +1,275 @@
+// Name:            Segmented
+// Description:     Component to create a multiple options with only one selectable
+//
+// Component:       `uk-segmented`
+//
+// Modifiers:       `uk-segmented-small`
+//                  `uk-segmented-large`
+//
+// States:          `uk-active`
+//                  `uk-first-column`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin segmented-styles {
+    /* ========================================================================
+       Component: Segmented
+     ========================================================================== */
+
+    .#{$prefix}-segmented {
+        background-color: var(--segmented-background);
+        border-radius: var(--segmented-border-radius);
+        box-sizing: border-box;
+        display: inline-block;
+        padding: var(--segmented-padding-vertical) var(--segmented-padding-horizontal);
+        @if map.has-key($mixins, 'hook-segmented') {
+            @include meta.apply(map.get($mixins, 'hook-segmented'));
+        }
+    }
+
+    .#{$prefix}-segmented-group {
+        align-items: stretch;
+        border-radius: inherit;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        gap: var(--segmented-group-gutter);
+        justify-content: flex-start;
+        position: relative;
+        width: 100%;
+        @if map.has-key($mixins, 'hook-segmented-group') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-group'));
+        }
+    }
+
+
+    /* Items
+     ========================================================================== */
+
+    .#{$prefix}-segmented-item {
+        border-radius: calc(var(--segmented-border-radius) * 0.677);
+        box-sizing: border-box;
+        color: var(--segmented-item-color);
+        cursor: pointer;
+        line-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+        min-height: calc(var(--segmented-item-height) - var(--segmented-padding-vertical) * 2);
+        position: relative;
+        text-align: center;
+        transform: translateZ(0);
+        transition: color var(--transition-medium-fast-duration) var(--ease-in-out);
+        @if map.has-key($mixins, 'hook-segmented-item') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item'));
+        }
+    }
+
+    .#{$prefix}-segmented-item::after {
+        border-radius: inherit;
+        content: '';
+        height: 100%;
+        inset-inline-start: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transition: opacity var(--transition-medium-fast-duration);
+        width: 100%;
+        z-index: -1;
+    }
+
+    /* Hover state */
+    .#{$prefix}-segmented-item:not(.#{$prefix}-segmented-item-selected, .#{$prefix}-segmented-item-disabled):hover {
+        color: var(--segmented-item-hover-color);
+
+        &::after {
+            background-color: var(--segmented-item-hover-background);
+            opacity: 1;
+        }
+
+        @if map.has-key($mixins, 'hook-segmented-item-hover') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item-hover'));
+        }
+    }
+
+    /* Active (onclick) state */
+    .#{$prefix}-segmented-item:not(.#{$prefix}-segmented-item-selected, .#{$prefix}-segmented-item-disabled):active {
+        color: var(--segmented-item-onclick-color);
+
+        &::after {
+            background-color: var(--segmented-item-onclick-background);
+            opacity: 1;
+        }
+
+        @if map.has-key($mixins, 'hook-segmented-item-onclick') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item-onclick'));
+        }
+    }
+
+    /* Selected state (non-disabled) */
+    .#{$prefix}-segmented-item-selected:not(.#{$prefix}-segmented-item-disabled) {
+        background-color: var(--segmented-item-selected-background);
+        color: var(--segmented-item-selected-color);
+
+        @if map.has-key($mixins, 'hook-segmented-item-selected') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item-selected'));
+        }
+    }
+
+    /* Selected state (non-disabled) */
+    .#{$prefix}-segmented-item:not(.#{$prefix}-segmented-item-disabled) [aria-checked="true"] {
+        color: var(--segmented-item-selected-color);
+        transition: color var(--transition-fast-duration) var(--ease-out) var(--transition-medium-fast-duration);
+    }
+
+    /* Selected state (disabled) */
+    .#{$prefix}-segmented-item-selected:where(.#{$prefix}-segmented-item-disabled) {
+        background-color: var(--segmented-item-disabled-background);
+    }
+
+    /* Disabled state */
+    .#{$prefix}-segmented-item-disabled,
+    .#{$prefix}-segmented-item-disabled:hover,
+    .#{$prefix}-segmented-item-disabled:focus {
+        color: var(--segmented-item-disabled-color);
+        cursor: not-allowed;
+        @if map.has-key($mixins, 'hook-segmented-item-disabled') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item-disabled'));
+        }
+    }
+
+    .#{$prefix}-segmented-item-label {
+        box-sizing: border-box;
+        line-height: inherit;
+        min-height: inherit;
+        overflow: hidden;
+        padding: 0 var(--segmented-item-padding-horizontal);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @if map.has-key($mixins, 'hook-segmented-item-label') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-item-label'));
+        }
+    }
+
+    .#{$prefix}-segmented-item-input {
+        height: 0;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        width: 0;
+    }
+
+
+    /* Thumb
+     ========================================================================== */
+
+    .#{$prefix}-segmented-thumb {
+        background-color: var(--segmented-item-selected-background);
+        border-radius: calc(var(--segmented-border-radius) * 0.677);
+        box-sizing: border-box;
+        height: 100%;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        position: absolute;
+        transition: transform var(--transition-duration) var(--ease-in-out),
+            width var(--transition-duration) var(--ease-in-out);
+        width: 0;
+        @if map.has-key($mixins, 'hook-segmented-thumb') {
+            @include meta.apply(map.get($mixins, 'hook-segmented-thumb'));
+        }
+    }
+
+    .#{$prefix}-segmented-thumb ~ .#{$prefix}-segmented-item:not(.#{$prefix}-segmented-item-selected, .#{$prefix}-segmented-item-disabled)::after {
+        background-color: transparent;
+    }
+
+    .#{$prefix}-segmented-thumb-motion-appear-active,
+    .#{$prefix}-segmented-thumb-motion-enter-active {
+        transition: transform var(--transition-duration) var(--ease-in-out),
+            width var(--transition-duration) var(--ease-in-out);
+        will-change: transform, width;
+    }
+
+
+    /* Size modifier
+     ========================================================================== */
+
+    .#{$prefix}-segmented-small .#{$prefix}-segmented-item {
+        line-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+        min-height: calc(var(--segmented-item-small-height) - var(--segmented-padding-vertical) * 2);
+    }
+
+    .#{$prefix}-segmented-medium .#{$prefix}-segmented-item {
+        line-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+        min-height: calc(var(--segmented-item-medium-height) - var(--segmented-padding-vertical) * 2);
+    }
+
+    .#{$prefix}-segmented-large .#{$prefix}-segmented-item {
+        line-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+        min-height: calc(var(--segmented-item-large-height) - var(--segmented-padding-vertical) * 2);
+    }
+
+
+    /* Vertical modifier
+     ========================================================================== */
+
+    .#{$prefix}-segmented-vertical .#{$prefix}-segmented-group {
+        flex-direction: column;
+    }
+
+    .#{$prefix}-segmented-vertical .#{$prefix}-segmented-item {
+        text-align: left;
+        width: 100%;
+    }
+
+    .#{$prefix}-segmented-vertical .#{$prefix}-segmented-thumb {
+        height: 0;
+        transition: transform var(--transition-duration) var(--ease-in-out),
+            height var(--transition-duration) var(--ease-in-out);
+        width: 100%;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-segmented-misc') {
+        @include meta.apply(map.get($mixins, 'hook-segmented-misc'));
+    }
+
+    @content;
+}
+
+@mixin segmented-tokens {
+    --segmented-background: var(--global-default-background);
+    --segmented-padding-horizontal: var(--global-xsmall-gutter);
+    --segmented-padding-vertical: var(--global-xsmall-gutter);
+    --segmented-border-radius: var(--global-border-radius);
+    --segmented-group-gutter: var(--global-xsmall-gutter);
+    --segmented-item-height: var(--global-control-height);
+    --segmented-item-padding-horizontal: var(--global-small-gutter);
+    --segmented-item-padding-vertical: var(--global-xsmall-gutter);
+    --segmented-item-small-height: var(--global-control-small-height);
+    --segmented-item-medium-height: var(--global-control-medium-height);
+    --segmented-item-large-height: var(--global-control-large-height);
+    --segmented-item-color: var(--global-color);
+    --segmented-item-hover-background: var(--global-muted-background);
+    --segmented-item-hover-color: var(--global-color);
+    --segmented-item-onclick-background: var(--global-default-background);
+    --segmented-item-onclick-color: var(--global-color);
+    --segmented-item-selected-background: var(--global-primary-background);
+    --segmented-item-selected-color: var(--global-inverse-color);
+    --segmented-item-disabled-background: var(--global-muted-background);
+    --segmented-item-disabled-color: var(--global-muted-color);
+
+    @content;
+}

package/styles/select/_index.scss

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