@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/vars.scss

@@ -1,143 +1,478 @@
-// Name:            Vars
-// Description:     Define variables via the `var()` CSS function
+// ========================================================================
+// Vars (Conditional Tokens Output)
+// Generates `:root` CSS custom properties for enabled components.
+// Unlike `_tokens.scss` (which only re-exports mixins), this file
+// actually outputs CSS — use it as the main entry point for theming.
 //
+// Usage:
+//   @use '@broxus/react-uikit/styles/vars' with ($components: (all: true));
+//   @use '@broxus/react-uikit/styles/vars' with ($components: (button: true, card: true));
+// ========================================================================
+
+@use 'sass:map';
+
+
 // ========================================================================
+// Configuration
+// ========================================================================
+
+// Default components configuration
+$-components: (
+    all: false,
+
+    // Base
+    base: true,
+
+    // Elements
+    link: false,
+    heading: false,
+    divider: false,
+    list: false,
+    description-list: false,
+    icon: false,
+    form: false,
+    control: false,
+    input-password: false,
+    input-number: false,
+    checkbox: false,
+    radio: false,
+    datepicker: false,
+    button: false,
+    progress: false,
+    slider: false,
+    switch: false,
+    select: false,
+    textarea: false,
+
+    // Layout
+    section: false,
+    container: false,
+    grid: false,
+    tile: false,
+    card: false,
+
+    // Common
+    close: false,
+    spinner: false,
+    totop: false,
+    marker: false,
+    alert: false,
+    placeholder: false,
+    badge: false,
+    label: false,
+    overlay: false,
+    article: false,
+    search: false,
+
+    // Interaction
+    accordion: false,
+    drop: false,
+    dropdown: false,
+    modal: false,
+    drawer: false,
+    sticky: false,
+    leader: false,
+    tooltip: false,
+
+    // Navs
+    nav: false,
+    navbar: false,
+    subnav: false,
+    segmented: false,
+    breadcrumb: false,
+    tabs: false,
+    dotnav: false,
+    thumbnav: false,
+    iconnav: false,
+
+    // Utilities
+    animation: false,
+    motion: false,
+    width: false,
+    height: false,
+    text: false,
+    column: false,
+    cover: false,
+    background: false,
+    align: false,
+    svg: false,
+    utility: false,
+    flex: false,
+    margin: false,
+    padding: false,
+    position: false,
+    transition: false,
+    visibility: false,
+    inverse: false,
+) !default;
+
+// External override for components configuration (e.g., from the project using the library)
+$components: () !default;
+$components: map.merge($-components, $components);
+
+// Private variables for easier access
+$-all: map.get($components, 'all') !default;
+$-inverse: map.get($components, 'inverse') !default;
+
+
+// ========================================================================
+// Import component modules
+// ========================================================================
+
+@use 'globals' as globals;
+@use 'base/base' as base-module;
+@use 'link/link' as link-module;
+@use 'heading/heading' as heading-module;
+@use 'divider/divider' as divider-module;
+@use 'list/list' as list-module;
+@use 'description-list/description-list' as description-list-module;
+@use 'icon/icon' as icon-module;
+@use 'form/form' as form-module;
+@use 'control/control' as control-module;
+@use 'input-password/input-password' as input-password-module;
+@use 'input-number/input-number' as input-number-module;
+@use 'checkbox/checkbox' as checkbox-module;
+@use 'radio/radio' as radio-module;
+@use 'datepicker/datepicker' as datepicker-module;
+@use 'button/button' as button-module;
+@use 'progress/progress' as progress-module;
+@use 'slider/slider' as slider-module;
+@use 'switch/switch' as switch-module;
+@use 'select/select' as select-module;
+@use 'textarea/textarea' as textarea-module;
+@use 'section/section' as section-module;
+@use 'container/container' as container-module;
+@use 'grid/grid' as grid-module;
+@use 'tile/tile' as tile-module;
+@use 'card/card' as card-module;
+@use 'close/close' as close-module;
+@use 'spinner/spinner' as spinner-module;
+@use 'totop/totop' as totop-module;
+@use 'marker/marker' as marker-module;
+@use 'alert/alert' as alert-module;
+@use 'placeholder/placeholder' as placeholder-module;
+@use 'badge/badge' as badge-module;
+@use 'label/label' as label-module;
+@use 'overlay/overlay' as overlay-module;
+@use 'article/article' as article-module;
+@use 'search/search' as search-module;
+@use 'accordion/accordion' as accordion-module;
+@use 'drop/drop' as drop-module;
+@use 'dropdown/dropdown' as dropdown-module;
+@use 'modal/modal' as modal-module;
+@use 'drawer/drawer' as drawer-module;
+@use 'sticky/sticky' as sticky-module;
+@use 'leader/leader' as leader-module;
+@use 'tooltip/tooltip' as tooltip-module;
+@use 'nav/nav' as nav-module;
+@use 'navbar/navbar' as navbar-module;
+@use 'subnav/subnav' as subnav-module;
+@use 'segmented/segmented' as segmented-module;
+@use 'breadcrumb/breadcrumb' as breadcrumb-module;
+@use 'tabs/tabs' as tabs-module;
+@use 'dotnav/dotnav' as dotnav-module;
+@use 'thumbnav/thumbnav' as thumbnav-module;
+@use 'iconnav/iconnav' as iconnav-module;
+@use 'animation/animation' as animation-module;
+@use 'motion/motion' as motion-module;
+@use 'width/width' as width-module;
+@use 'height/height' as height-module;
+@use 'text/text' as text-module;
+@use 'column/column' as column-module;
+@use 'cover/cover' as cover-module;
+@use 'background/background' as background-module;
+@use 'align/align' as align-module;
+@use 'svg/svg' as svg-module;
+@use 'utility/utility' as utility-module;
+@use 'flex/flex' as flex-module;
+@use 'margin/margin' as margin-module;
+@use 'padding/padding' as padding-module;
+@use 'position/position' as position-module;
+@use 'transition/transition' as transition-module;
+@use 'visibility/visibility' as visibility-module;
+@use 'inverse/inverse' as inverse-module;
+
+
+// ========================================================================
+// Conditional tokens generation (CSS custom properties)
+// ========================================================================
+
+$selector: ':root' !default;
+
+#{$selector} {
+    // Globals
+    @include globals.global-tokens;
+
+    // Base
+    @if map.get($components, 'base') or $-all {
+        @include base-module.base-tokens {
+            @if $-inverse {
+                @include base-module.base-inverse-tokens;
+            }
+        }
+    }
+
+    // Elements
+    @if map.get($components, 'link') or $-all {
+        @include link-module.link-tokens {
+            @if $-inverse {
+                @include link-module.link-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'heading') or $-all {
+        @include heading-module.heading-tokens {
+            @if $-inverse {
+                @include heading-module.heading-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'divider') or $-all {
+        @include divider-module.divider-tokens {
+            @if $-inverse {
+                @include divider-module.divider-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'list') or $-all {
+        @include list-module.list-tokens {
+            @if $-inverse {
+                @include list-module.list-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'description-list') or $-all {
+        @include description-list-module.description-list-tokens {
+            @if $-inverse {
+                @include description-list-module.description-list-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'icon') or $-all {
+        @include icon-module.icon-tokens {
+            @if $-inverse {
+                @include icon-module.icon-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'form') or $-all {
+        @include form-module.form-tokens {
+            @if $-inverse {
+                @include form-module.form-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'control') or $-all {
+        @include control-module.control-tokens {
+            @if $-inverse {
+                @include control-module.control-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'input-password') or $-all { @include input-password-module.input-password-tokens; }
+    @if map.get($components, 'input-number') or $-all { @include input-number-module.input-number-tokens; }
+    @if map.get($components, 'checkbox') or $-all { @include checkbox-module.checkbox-tokens; }
+    @if map.get($components, 'radio') or $-all { @include radio-module.radio-tokens; }
+    @if map.get($components, 'datepicker') or $-all { @include datepicker-module.datepicker-tokens; }
+    @if map.get($components, 'button') or $-all {
+        @include button-module.button-tokens {
+            @if $-inverse {
+                @include button-module.button-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'progress') or $-all { @include progress-module.progress-tokens; }
+    @if map.get($components, 'slider') or $-all { @include slider-module.slider-tokens; }
+    @if map.get($components, 'switch') or $-all { @include switch-module.switch-tokens; }
+    @if map.get($components, 'select') or $-all { @include select-module.select-tokens; }
+    @if map.get($components, 'textarea') or $-all { @include textarea-module.textarea-tokens; }
+
+    // Layout
+    @if map.get($components, 'section') or $-all { @include section-module.section-tokens; }
+    @if map.get($components, 'container') or $-all { @include container-module.container-tokens; }
+    @if map.get($components, 'tile') or $-all { @include tile-module.tile-tokens; }
+    @if map.get($components, 'card') or $-all {
+        @include card-module.card-tokens {
+            @if $-inverse {
+                @include card-module.card-inverse-tokens;
+            }
+        }
+    }
+
+    // Common
+    @if map.get($components, 'close') or $-all {
+        @include close-module.close-tokens {
+            @if $-inverse {
+                @include close-module.close-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'spinner') or $-all { @include spinner-module.spinner-tokens; }
+    @if map.get($components, 'totop') or $-all {
+        @include totop-module.totop-tokens {
+            @if $-inverse {
+                @include totop-module.totop-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'marker') or $-all {
+        @include marker-module.marker-tokens {
+            @if $-inverse {
+                @include marker-module.marker-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'alert') or $-all { @include alert-module.alert-tokens; }
+    @if map.get($components, 'placeholder') or $-all { @include placeholder-module.placeholder-tokens; }
+    @if map.get($components, 'badge') or $-all {
+        @include badge-module.badge-tokens {
+            @if $-inverse {
+                @include badge-module.badge-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'label') or $-all {
+        @include label-module.label-tokens {
+            @if $-inverse {
+                @include label-module.label-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'overlay') or $-all { @include overlay-module.overlay-tokens; }
+    @if map.get($components, 'article') or $-all {
+        @include article-module.article-tokens {
+            @if $-inverse {
+                @include article-module.article-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'search') or $-all {
+        @include search-module.search-tokens {
+            @if $-inverse {
+                @include search-module.search-inverse-tokens;
+            }
+        }
+    }
+
+    // Interaction
+    @if map.get($components, 'accordion') or $-all {
+        @include accordion-module.accordion-tokens {
+            @if $-inverse {
+                @include accordion-module.accordion-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'drop') or $-all { @include drop-module.drop-tokens; }
+    @if map.get($components, 'dropdown') or $-all {
+        @include dropdown-module.dropdown-tokens {
+            @if $-inverse {
+                @include dropdown-module.dropdown-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'modal') or $-all { @include modal-module.modal-tokens; }
+    @if map.get($components, 'drawer') or $-all { @include drawer-module.drawer-tokens; }
+    @if map.get($components, 'sticky') or $-all { @include sticky-module.sticky-tokens; }
+    @if map.get($components, 'leader') or $-all { @include leader-module.leader-tokens; }
+    @if map.get($components, 'tooltip') or $-all { @include tooltip-module.tooltip-tokens; }
+
+    // Navs
+    @if map.get($components, 'nav') or $-all {
+        @include nav-module.nav-tokens {
+            @if $-inverse {
+                @include nav-module.nav-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'navbar') or $-all {
+        @include navbar-module.navbar-tokens {
+            @if $-inverse {
+                @include navbar-module.navbar-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'subnav') or $-all {
+        @include subnav-module.subnav-tokens {
+            @if $-inverse {
+                @include subnav-module.subnav-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'segmented') or $-all { @include segmented-module.segmented-tokens; }
+    @if map.get($components, 'breadcrumb') or $-all {
+        @include breadcrumb-module.breadcrumb-tokens {
+            @if $-inverse {
+                @include breadcrumb-module.breadcrumb-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'tabs') or $-all {
+        @include tabs-module.tabs-tokens {
+            @if $-inverse {
+                @include tabs-module.tabs-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'dotnav') or $-all {
+        @include dotnav-module.dotnav-tokens {
+            @if $-inverse {
+                @include dotnav-module.dotnav-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'thumbnav') or $-all { @include thumbnav-module.thumbnav-tokens; }
+    @if map.get($components, 'iconnav') or $-all {
+        @include iconnav-module.iconnav-tokens {
+            @if $-inverse {
+                @include iconnav-module.iconnav-inverse-tokens;
+            }
+        }
+    }
+
+    @if map.get($components, 'grid') or $-all {
+        @include grid-module.grid-tokens {
+            @if $-inverse {
+                @include grid-module.grid-inverse-tokens;
+            }
+        }
+    }
+
+    // Utilities
+    @if map.get($components, 'animation') or $-all { @include animation-module.animation-tokens; }
+    @if map.get($components, 'motion') or $-all { @include motion-module.motion-tokens; }
+    @if map.get($components, 'width') or $-all { @include width-module.width-tokens; }
+    @if map.get($components, 'height') or $-all { @include height-module.height-tokens; }
+    @if map.get($components, 'text') or $-all {
+        @include text-module.text-tokens {
+            @if $-inverse {
+                @include text-module.text-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'column') or $-all {
+        @include column-module.column-tokens {
+            @if $-inverse {
+                @include column-module.column-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'cover') or $-all { @include cover-module.cover-tokens; }
+    @if map.get($components, 'background') or $-all { @include background-module.background-tokens; }
+    @if map.get($components, 'align') or $-all { @include align-module.align-tokens; }
+    @if map.get($components, 'svg') or $-all { @include svg-module.svg-tokens; }
+    @if map.get($components, 'utility') or $-all {
+        @include utility-module.utility-tokens {
+            @if $-inverse {
+                @include utility-module.utility-inverse-tokens;
+            }
+        }
+    }
+    @if map.get($components, 'flex') or $-all { @include flex-module.flex-tokens; }
+    @if map.get($components, 'margin') or $-all { @include margin-module.margin-tokens; }
+    @if map.get($components, 'padding') or $-all { @include padding-module.padding-tokens; }
+    @if map.get($components, 'position') or $-all { @include position-module.position-tokens; }
+    @if map.get($components, 'transition') or $-all { @include transition-module.transition-tokens; }
+    @if map.get($components, 'visibility') or $-all { @include visibility-module.visibility-tokens; }
 
-@use 'variables' as *;
-
-:root,
-::after,
-::before {
-    // Breakpoints
-    // ========================================================================
-
-    --breakpoint-2xsmall: #{$breakpoint-2xsmall};
-    --breakpoint-xsmall: #{$breakpoint-xsmall};
-    --breakpoint-small: #{$breakpoint-small};
-    --breakpoint-medium: #{$breakpoint-medium};
-    --breakpoint-large: #{$breakpoint-large};
-    --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};
-    --breakpoint-large-max: #{$breakpoint-large-max};
-    --breakpoint-xlarge-max: #{$breakpoint-xlarge-max};
-    --breakpoint-2xlarge-max: #{$breakpoint-2xlarge-max};
-
-
-    // Global variables
-    // ========================================================================
-
-    //
-    // Typography
-    //
-
-    --global-font-family: #{$global-font-family};
-    --global-font-size: #{$global-font-size};
-    --global-font-weight: #{$global-font-weight};
-    --global-bold-font-weight: #{$global-bold-font-weight};
-    --global-line-height: #{$global-line-height};
-    --global-2xlarge-font-size: #{$global-2xlarge-font-size};
-    --global-xlarge-font-size: #{$global-xlarge-font-size};
-    --global-large-font-size: #{$global-large-font-size};
-    --global-medium-font-size: #{$global-medium-font-size};
-    --global-small-font-size: #{$global-small-font-size};
-    --global-xsmall-font-size: #{$global-xsmall-font-size};
-    --global-2xsmall-font-size: #{$global-2xsmall-font-size};
-
-    //
-    // Colors
-    //
-
-    --global-color: #{$global-color};
-    --global-emphasis-color: #{$global-emphasis-color};
-    --global-muted-color: #{$global-muted-color};
-    --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
-    //
-
-    --global-background: #{$global-background};
-    --global-default-background: #{$global-default-background};
-    --global-muted-background: #{$global-muted-background};
-    --global-primary-background: #{$global-primary-background};
-    --global-secondary-background: #{$global-secondary-background};
-    --global-tertiary-background: #{$global-tertiary-background};
-    --global-success-background: #{$global-success-background};
-    --global-warning-background: #{$global-warning-background};
-    --global-danger-background: #{$global-danger-background};
-
-    //
-    // Borders
-    //
-
-    --global-border-width: #{$global-border-width};
-    --global-border-style: #{$global-border-style};
-    --global-border: #{$global-border};
-    --global-muted-border: #{$global-muted-border};
-    --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
-    //
-
-    --global-small-box-shadow: #{$global-small-box-shadow};
-    --global-medium-box-shadow: #{$global-medium-box-shadow};
-    --global-large-box-shadow: #{$global-large-box-shadow};
-    --global-xlarge-box-shadow: #{$global-xlarge-box-shadow};
-
-    //
-    // Spacings
-    //
-
-    --global-margin: #{$global-margin};
-    --global-xsmall-margin: #{$global-xsmall-margin};
-    --global-small-margin: #{$global-small-margin};
-    --global-medium-margin: #{$global-medium-margin};
-    --global-large-margin: #{$global-large-margin};
-    --global-xlarge-margin: #{$global-xlarge-margin};
-    --global-gutter: #{$global-gutter};
-    --global-xsmall-gutter: #{$global-xsmall-gutter};
-    --global-small-gutter: #{$global-small-gutter};
-    --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
-    //
-
-    --global-control-height: #{$global-control-height};
-    --global-control-xsmall-height: #{$global-control-xsmall-height};
-    --global-control-small-height: #{$global-control-small-height};
-    --global-control-medium-height: #{$global-control-medium-height};
-    --global-control-large-height: #{$global-control-large-height};
-    --global-control-xlarge-height: #{$global-control-xlarge-height};
-
-    //
-    // Z-index
-    //
-
-    --global-z-index: #{$global-z-index};
+    @if $-inverse or $-all { @include inverse-module.inverse-tokens; }
 }

package/styles/visibility/_index.scss

@@ -0,0 +1,8 @@
+@use 'visibility' as *;
+
+$generate-tokens: true !default;
+
+@include visibility-styles;
+
+// No tokens for this component
+// :root { @include visibility-tokens; }