@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/button/_index.scss

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

package/styles/card/_card.scss

@@ -0,0 +1,544 @@
+// Name:            Card
+// Description:     Component to create boxed content containers
+//
+// Component:       `uk-card`
+//
+// Sub-objects:     `uk-card-body`
+//                  `uk-card-header`
+//                  `uk-card-footer`
+//                  `uk-card-media-*`
+//                  `uk-card-title`
+//                  `uk-card-badge`
+//
+// Modifiers:       `uk-card-hover`
+//                  `uk-card-default`
+//                  `uk-card-primary`
+//                  `uk-card-secondary`
+//                  `uk-card-tertiary`
+//                  `uk-card-small`
+//                  `uk-card-large`
+//
+// Uses:            `uk-grid-stack`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin card-styles {
+    /* ========================================================================
+       Component: Card
+     ========================================================================== */
+
+    .#{$prefix}-card {
+        box-sizing: border-box;
+        position: relative;
+        @if map.has-key($mixins, 'hook-card') {
+            @include meta.apply(map.get($mixins, 'hook-card'));
+        }
+    }
+
+
+    /* Sections
+     ========================================================================== */
+
+    .#{$prefix}-card-body {
+        display: flow-root;
+        padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
+        @if map.has-key($mixins, 'hook-card-body') {
+            @include meta.apply(map.get($mixins, 'hook-card-body'));
+        }
+    }
+
+    .#{$prefix}-card-header {
+        display: flow-root;
+        padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
+        @if map.has-key($mixins, 'hook-card-header') {
+            @include meta.apply(map.get($mixins, 'hook-card-header'));
+        }
+    }
+
+    .#{$prefix}-card-footer {
+        display: flow-root;
+        padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
+        @if map.has-key($mixins, 'hook-card-footer') {
+            @include meta.apply(map.get($mixins, 'hook-card-footer'));
+        }
+    }
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-card-body {
+            padding: var(--card-body-padding-vertical-l) var(--card-body-padding-horizontal-l);
+        }
+
+        .#{$prefix}-card-header {
+            padding: var(--card-header-padding-vertical-l) var(--card-header-padding-horizontal-l);
+        }
+
+        .#{$prefix}-card-footer {
+            padding: var(--card-footer-padding-vertical-l) var(--card-footer-padding-horizontal-l);
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-card-body > :last-child,
+    .#{$prefix}-card-header > :last-child,
+    .#{$prefix}-card-footer > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Media
+     ========================================================================== */
+
+    /*
+     * Reserved alignment modifier to style the media element, e.g. with `border-radius`
+     * Implemented by the theme
+     */
+
+    [class*='#{$prefix}-card-media'] {
+        @if map.has-key($mixins, 'hook-card-media') {
+            @include meta.apply(map.get($mixins, 'hook-card-media'));
+        }
+    }
+
+    .#{$prefix}-card-media-top,
+    .#{$prefix}-grid-stack > .#{$prefix}-card-media-left,
+    .#{$prefix}-grid-stack > .#{$prefix}-card-media-right {
+        @if map.has-key($mixins, 'hook-card-media-top') {
+            @include meta.apply(map.get($mixins, 'hook-card-media-top'));
+        }
+    }
+
+    .#{$prefix}-card-media-bottom {
+        @if map.has-key($mixins, 'hook-card-media-bottom') {
+            @include meta.apply(map.get($mixins, 'hook-card-media-bottom'));
+        }
+    }
+
+    :not(.#{$prefix}-grid-stack) > .#{$prefix}-card-media-left {
+        @if map.has-key($mixins, 'hook-card-media-left') {
+            @include meta.apply(map.get($mixins, 'hook-card-media-left'));
+        }
+    }
+
+    :not(.#{$prefix}-grid-stack) > .#{$prefix}-card-media-right {
+        @if map.has-key($mixins, 'hook-card-media-right') {
+            @include meta.apply(map.get($mixins, 'hook-card-media-right'));
+        }
+    }
+
+
+    /* Title
+     ========================================================================== */
+
+    .#{$prefix}-card-title {
+        font-size: var(--card-title-font-size);
+        line-height: var(--card-title-line-height);
+        @if map.has-key($mixins, 'hook-card-title') {
+            @include meta.apply(map.get($mixins, 'hook-card-title'));
+        }
+    }
+
+
+    /* Badge
+     ========================================================================== */
+
+    /*
+     * 1. Position
+     * 2. Size
+     * 3. Style
+     * 4. Center child vertically
+     */
+
+    .#{$prefix}-card-badge {
+        align-items: center; /* 4 */
+        background: var(--card-badge-background); /* 3 */
+        color: var(--card-badge-color); /* 3 */
+        display: flex; /* 4 */
+        font-size: var(--card-badge-font-size); /* 3 */
+        height: var(--card-badge-height); /* 2 */
+        justify-content: center; /* 4 */
+        line-height: 0; /* 4 */
+        padding: 0 var(--card-badge-padding-horizontal);
+        position: absolute; /* 1 */
+        right: var(--card-badge-right); /* 1 */
+        top: var(--card-badge-top); /* 1 */
+        z-index: 1; /* 1 */
+        @if map.has-key($mixins, 'hook-card-badge') {
+            @include meta.apply(map.get($mixins, 'hook-card-badge'));
+        }
+    }
+
+    /*
+     * Remove margin from adjacent element
+     */
+
+    .#{$prefix}-card-badge:first-child + * {
+        margin-top: 0;
+    }
+
+
+    /* Hover modifier
+     ========================================================================== */
+
+    .#{$prefix}-card-hover:not(.#{$prefix}-card-default, .#{$prefix}-card-primary, .#{$prefix}-card-secondary, .#{$prefix}-card-tertiary):hover {
+        background: var(--card-hover-background);
+        @if map.has-key($mixins, 'hook-card-hover') {
+            @include meta.apply(map.get($mixins, 'hook-card-hover'));
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Default
+     * Note: Header and Footer are only implemented for the default style
+     */
+
+    .#{$prefix}-card-default {
+        --uk-inverse: #{$card-default-color-mode};
+        background: var(--card-default-background);
+        color: var(--card-default-color);
+        @if map.has-key($mixins, 'hook-card-default') {
+            @include meta.apply(map.get($mixins, 'hook-card-default'));
+        }
+    }
+
+    .#{$prefix}-card-default .#{$prefix}-card-title {
+        color: var(--card-default-title-color);
+        @if map.has-key($mixins, 'hook-card-default-title') {
+            @include meta.apply(map.get($mixins, 'hook-card-default-title'));
+        }
+    }
+
+    .#{$prefix}-card-default.#{$prefix}-card-hover:hover {
+        background-color: var(--card-default-hover-background);
+        @if map.has-key($mixins, 'hook-card-default-hover') {
+            @include meta.apply(map.get($mixins, 'hook-card-default-hover'));
+        }
+    }
+
+    .#{$prefix}-card-default .#{$prefix}-card-header {
+        @if map.has-key($mixins, 'hook-card-default-header') {
+            @include meta.apply(map.get($mixins, 'hook-card-default-header'));
+        }
+    }
+
+    .#{$prefix}-card-default .#{$prefix}-card-footer {
+        @if map.has-key($mixins, 'hook-card-default-footer') {
+            @include meta.apply(map.get($mixins, 'hook-card-default-footer'));
+        }
+    }
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-card-primary {
+        --uk-inverse: #{$card-primary-color-mode};
+        background: var(--card-primary-background);
+        color: var(--card-primary-color);
+        @if map.has-key($mixins, 'hook-card-primary') {
+            @include meta.apply(map.get($mixins, 'hook-card-primary'));
+        }
+    }
+
+    .#{$prefix}-card-primary .#{$prefix}-card-title {
+        color: var(--card-primary-title-color);
+        @if map.has-key($mixins, 'hook-card-primary-title') {
+            @include meta.apply(map.get($mixins, 'hook-card-primary-title'));
+        }
+    }
+
+    .#{$prefix}-card-primary.#{$prefix}-card-hover:hover {
+        background-color: var(--card-primary-hover-background);
+        @if map.has-key($mixins, 'hook-card-primary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-card-primary-hover'));
+        }
+    }
+
+    /*
+     * Secondary
+     */
+
+    .#{$prefix}-card-secondary {
+        --uk-inverse: #{$card-secondary-color-mode};
+        background: var(--card-secondary-background);
+        color: var(--card-secondary-color);
+        @if map.has-key($mixins, 'hook-card-secondary') {
+            @include meta.apply(map.get($mixins, 'hook-card-secondary'));
+        }
+    }
+
+    .#{$prefix}-card-secondary .#{$prefix}-card-title {
+        color: var(--card-secondary-title-color);
+        @if map.has-key($mixins, 'hook-card-secondary-title') {
+            @include meta.apply(map.get($mixins, 'hook-card-secondary-title'));
+        }
+    }
+
+    .#{$prefix}-card-secondary.#{$prefix}-card-hover:hover {
+        background-color: var(--card-secondary-hover-background);
+        @if map.has-key($mixins, 'hook-card-secondary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-card-secondary-hover'));
+        }
+    }
+
+    /*
+     * Tertiary
+     */
+
+    .#{$prefix}-card-tertiary {
+        --uk-inverse: #{$card-tertiary-color-mode};
+        background: var(--card-tertiary-background);
+        color: var(--card-tertiary-color);
+        @if map.has-key($mixins, 'hook-card-tertiary') {
+            @include meta.apply(map.get($mixins, 'hook-card-tertiary'));
+        }
+    }
+
+    .#{$prefix}-card-tertiary .#{$prefix}-card-title {
+        color: var(--card-tertiary-title-color);
+        @if map.has-key($mixins, 'hook-card-tertiary-title') {
+            @include meta.apply(map.get($mixins, 'hook-card-tertiary-title'));
+        }
+    }
+
+    .#{$prefix}-card-tertiary.#{$prefix}-card-hover:hover {
+        background-color: var(--card-tertiary-hover-background);
+        @if map.has-key($mixins, 'hook-card-tertiary-hover') {
+            @include meta.apply(map.get($mixins, 'hook-card-tertiary-hover'));
+        }
+    }
+
+    /* Size modifier
+     ========================================================================== */
+
+    /*
+     * Small
+     */
+
+    .#{$prefix}-card-small.#{$prefix}-card-body,
+    .#{$prefix}-card-small .#{$prefix}-card-body {
+        padding: var(--card-small-body-padding-vertical) var(--card-small-body-padding-horizontal);
+    }
+
+    .#{$prefix}-card-small .#{$prefix}-card-header {
+        padding: var(--card-small-header-padding-vertical) var(--card-small-header-padding-horizontal);
+    }
+
+    .#{$prefix}-card-small .#{$prefix}-card-footer {
+        padding: var(--card-small-footer-padding-vertical) var(--card-small-footer-padding-horizontal);
+    }
+
+    /*
+     * Large
+     */
+
+    /* Desktop and bigger */
+    @media (--media-breakpoint-large) {
+        .#{$prefix}-card-large.#{$prefix}-card-body,
+        .#{$prefix}-card-large .#{$prefix}-card-body {
+            padding: var(--card-large-body-padding-vertical-l) var(--card-large-body-padding-horizontal-l);
+        }
+
+        .#{$prefix}-card-large .#{$prefix}-card-header {
+            padding: var(--card-large-header-padding-vertical-l) var(--card-large-header-padding-horizontal-l);
+        }
+
+        .#{$prefix}-card-large .#{$prefix}-card-footer {
+            padding: var(--card-large-footer-padding-vertical-l) var(--card-large-footer-padding-horizontal-l);
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-card-misc') {
+        @include meta.apply(map.get($mixins, 'hook-card-misc'));
+    }
+
+    @content;
+}
+
+@mixin card-tokens {
+    --card-body-padding-horizontal: var(--global-gutter);
+    --card-body-padding-vertical: var(--global-gutter);
+    --card-body-padding-horizontal-l: var(--global-medium-gutter);
+    --card-body-padding-vertical-l: var(--global-medium-gutter);
+    --card-header-padding-horizontal: var(--global-gutter);
+    --card-header-padding-vertical: #{$card-header-padding-vertical};
+    --card-header-padding-horizontal-l: var(--global-medium-gutter);
+    --card-header-padding-vertical-l: #{$card-header-padding-vertical-l};
+    --card-footer-padding-horizontal: var(--global-gutter);
+    --card-footer-padding-vertical: #{$card-footer-padding-vertical};
+    --card-footer-padding-horizontal-l: var(--global-medium-gutter);
+    --card-footer-padding-vertical-l: #{$card-footer-padding-vertical-l};
+    --card-title-font-size: var(--global-large-font-size);
+    --card-title-line-height: #{$card-title-line-height};
+    --card-badge-top: var(--global-small-gutter);
+    --card-badge-right: var(--card-badge-top);
+    --card-badge-height: var(--badge-size);
+    --card-badge-padding-horizontal: var(--badge-padding-horizontal);
+    --card-badge-background: var(--badge-background);
+    --card-badge-color: var(--badge-color);
+    --card-badge-font-size: var(--badge-font-size);
+    --card-hover-background: var(--global-muted-background);
+    --card-default-background: var(--global-muted-background);
+    --card-default-color: var(--global-color);
+    --card-default-title-color: var(--global-emphasis-color);
+    --card-default-hover-background: #{$card-default-hover-background};
+    --card-primary-background: var(--global-primary-background);
+    --card-primary-color: var(--global-inverse-color);
+    --card-primary-title-color: var(--card-primary-color);
+    --card-primary-hover-background: #{$card-primary-hover-background};
+    --card-secondary-background: var(--global-secondary-background);
+    --card-secondary-color: var(--global-inverse-color);
+    --card-secondary-title-color: var(--card-secondary-color);
+    --card-secondary-hover-background: #{$card-secondary-hover-background};
+    --card-tertiary-background: var(--global-tertiary-background);
+    --card-tertiary-color: var(--global-inverse-color);
+    --card-tertiary-title-color: var(--card-tertiary-color);
+    --card-tertiary-hover-background: #{$card-tertiary-hover-background};
+    --card-small-body-padding-horizontal: var(--global-margin);
+    --card-small-body-padding-vertical: var(--global-margin);
+    --card-small-header-padding-horizontal: var(--global-margin);
+    --card-small-header-padding-vertical: #{$card-small-header-padding-vertical};
+    --card-small-footer-padding-horizontal: var(--global-margin);
+    --card-small-footer-padding-vertical: #{$card-small-footer-padding-vertical};
+    --card-large-body-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-body-padding-vertical-l: var(--global-large-gutter);
+    --card-large-header-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-header-padding-vertical-l: #{$card-large-header-padding-vertical-l};
+    --card-large-footer-padding-horizontal-l: var(--global-large-gutter);
+    --card-large-footer-padding-vertical-l: #{$card-large-footer-padding-vertical-l};
+
+    @content;
+}
+
+@mixin card-inverse-styles {
+    // Default Color Mode
+    @if $card-default-color-mode == light {
+        .#{$prefix}-card-default.#{$prefix}-card-body {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-default-color-mode == light {
+        .#{$prefix}-card-default > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-default-color-mode == dark {
+        .#{$prefix}-card-default.#{$prefix}-card-body {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $card-default-color-mode == dark {
+        .#{$prefix}-card-default > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    // Primary Color Mode
+    @if $card-primary-color-mode == light {
+        .#{$prefix}-card-primary.#{$prefix}-card-body {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-primary-color-mode == light {
+        .#{$prefix}-card-primary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-primary-color-mode == dark {
+        .#{$prefix}-card-primary.#{$prefix}-card-body {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $card-primary-color-mode == dark {
+        .#{$prefix}-card-primary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    // Secondary Color Mode
+    @if $card-secondary-color-mode == light {
+        .#{$prefix}-card-secondary.#{$prefix}-card-body {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-secondary-color-mode == light {
+        .#{$prefix}-card-secondary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-secondary-color-mode == dark {
+        .#{$prefix}-card-secondary.#{$prefix}-card-body {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $card-secondary-color-mode == dark {
+        .#{$prefix}-card-secondary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    // Tertiary Color Mode
+    @if $card-tertiary-color-mode == light {
+        .#{$prefix}-card-tertiary.#{$prefix}-card-body {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-tertiary-color-mode == light {
+        .#{$prefix}-card-tertiary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-light !optional;
+        }
+    }
+
+    @if $card-tertiary-color-mode == dark {
+        .#{$prefix}-card-tertiary.#{$prefix}-card-body {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @if $card-tertiary-color-mode == dark {
+        .#{$prefix}-card-tertiary > :not([class*='#{$prefix}-card-media']) {
+            @extend .#{$prefix}-dark !optional;
+        }
+    }
+
+    @content;
+}
+
+@mixin card-inverse-tokens {
+    --inverse-card-badge-background: var(--inverse-global-primary-background);
+    --inverse-card-badge-color: var(--inverse-global-inverse-color);
+
+    @content;
+}

package/styles/card/_index.scss

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