@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/_import.components.scss

@@ -1,67 +1,517 @@
-// Base
+// ========================================================================
+// Import Components (without utilities)
+// Conditionally generates component styles and tokens based on the
+// `$components` configuration map. Forwards base dependencies:
+// custom-media, variables, utils, mixins.
+//
+// Usage:
+//   @use '@broxus/react-uikit/styles/import.components' with ($components: (all: true));
+//   @use '@broxus/react-uikit/styles/import.components' with ($components: (button: true, card: true));
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// Forward base dependencies
+@forward 'custom-media';
 @forward 'variables';
-@forward 'mixin';
-@forward 'base';
+@forward 'utils';
+@forward 'mixins';
+
+
+// ========================================================================
+// Configuration
+// ========================================================================
+
+$-components: (
+    all: false,
+
+    // Base
+    base: true,
+
+    // Elements
+    link: true,
+    heading: true,
+    divider: true,
+    list: true,
+    description-list: false,
+    icon: true,
+    form: true,
+    control: true,
+    input-password: true,
+    input-number: true,
+    checkbox: true,
+    radio: true,
+    datepicker: true,
+    button: true,
+    progress: false,
+    slider: true,
+    switch: true,
+    select: true,
+    textarea: true,
+
+    // Layout
+    section: true,
+    container: true,
+    grid: true,
+    tile: true,
+    card: true,
+
+    // Common
+    close: true,
+    spinner: true,
+    totop: false,
+    marker: false,
+    alert: true,
+    placeholder: false,
+    badge: true,
+    label: true,
+    overlay: false,
+    article: false,
+    search: false,
+
+    // Interaction
+    accordion: true,
+    drop: true,
+    dropdown: true,
+    modal: true,
+    drawer: true,
+    sticky: false,
+    leader: false,
+    tooltip: true,
+
+    // Navs
+    nav: true,
+    navbar: true,
+    subnav: true,
+    segmented: true,
+    breadcrumb: true,
+    tabs: true,
+    dotnav: false,
+    thumbnav: false,
+    iconnav: 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;
+
+
+// ========================================================================
+// Conditional styles generation
+// ========================================================================
+
+// Base
+@if map.get($components, 'base') or $-all { @include base-module.base-styles; }
 
 // Elements
-@forward 'link';
-@forward 'heading';
-@forward 'divider';
-@forward 'list';
-@forward 'description-list'; //
-// @forward 'table';
-@forward 'icon';
-@forward 'form'; // After: Icon
-@forward 'control'; // After: Icon
-@forward 'input-password';
-@forward 'input-number';
-@forward 'checkbox';
-@forward 'radio';
-@forward 'datepicker';
-@forward 'button';
-@forward 'progress';
-@forward 'slider';
-@forward 'switch';
+@if map.get($components, 'link') or $-all { @include link-module.link-styles; }
+@if map.get($components, 'heading') or $-all { @include heading-module.heading-styles; }
+@if map.get($components, 'divider') or $-all { @include divider-module.divider-styles; }
+@if map.get($components, 'list') or $-all { @include list-module.list-styles; }
+@if map.get($components, 'description-list') or $-all { @include description-list-module.description-list-styles; }
+@if map.get($components, 'icon') or $-all { @include icon-module.icon-styles; }
+@if map.get($components, 'form') or $-all { @include form-module.form-styles; }
+@if map.get($components, 'control') or $-all { @include control-module.control-styles; }
+@if map.get($components, 'input-password') or $-all { @include input-password-module.input-password-styles; }
+@if map.get($components, 'input-number') or $-all { @include input-number-module.input-number-styles; }
+@if map.get($components, 'checkbox') or $-all { @include checkbox-module.checkbox-styles; }
+@if map.get($components, 'radio') or $-all { @include radio-module.radio-styles; }
+@if map.get($components, 'datepicker') or $-all { @include datepicker-module.datepicker-styles; }
+@if map.get($components, 'button') or $-all { @include button-module.button-styles; }
+@if map.get($components, 'progress') or $-all { @include progress-module.progress-styles; }
+@if map.get($components, 'slider') or $-all { @include slider-module.slider-styles; }
+@if map.get($components, 'switch') or $-all { @include switch-module.switch-styles; }
+@if map.get($components, 'select') or $-all { @include select-module.select-styles; }
+@if map.get($components, 'textarea') or $-all { @include textarea-module.textarea-styles; }
 
 // Layout
-@forward 'section';
-@forward 'container';
-@forward 'grid';
-@forward 'tile';
-@forward 'card';
+@if map.get($components, 'section') or $-all {
+    @include section-module.section-styles {
+        @if $-inverse {
+            @include section-module.section-inverse-styles;
+        }
+    }
+}
+@if map.get($components, 'container') or $-all { @include container-module.container-styles; }
+@if map.get($components, 'tile') or $-all {
+    @include tile-module.tile-styles {
+        @if $-inverse {
+            @include tile-module.tile-inverse-styles;
+        }
+    }
+}
+@if map.get($components, 'card') or $-all {
+    @include card-module.card-styles {
+        @if $-inverse {
+            @include card-module.card-inverse-styles
+        }
+    }
+}
 
 // Common
-@forward 'close'; // After: Icon
-@forward 'spinner'; // After: Icon
-@forward 'totop'; // After: Icon
-@forward 'marker'; // After: Icon
-@forward 'alert'; // After: Close
-@forward 'placeholder';
-@forward 'badge';
-@forward 'label';
-@forward 'overlay'; // After: Icon
-@forward 'article'; // After: Subnav
-// @forward 'comment';
-// @forward 'search'; // After: Icon
+@if map.get($components, 'close') or $-all { @include close-module.close-styles; }
+@if map.get($components, 'spinner') or $-all { @include spinner-module.spinner-styles; }
+@if map.get($components, 'totop') or $-all { @include totop-module.totop-styles; }
+@if map.get($components, 'marker') or $-all { @include marker-module.marker-styles; }
+@if map.get($components, 'alert') or $-all { @include alert-module.alert-styles; }
+@if map.get($components, 'placeholder') or $-all { @include placeholder-module.placeholder-styles; }
+@if map.get($components, 'badge') or $-all { @include badge-module.badge-styles; }
+@if map.get($components, 'label') or $-all { @include label-module.label-styles; }
+@if map.get($components, 'overlay') or $-all {
+    @include overlay-module.overlay-styles {
+        @if $-inverse {
+            @include overlay-module.overlay-inverse-styles;
+        }
+    }
+}
+@if map.get($components, 'article') or $-all { @include article-module.article-styles; }
+@if map.get($components, 'search') or $-all { @include search-module.search-styles; }
+
+// Interaction
+@if map.get($components, 'accordion') or $-all { @include accordion-module.accordion-styles; }
+@if map.get($components, 'drop') or $-all { @include drop-module.drop-styles; }
+@if map.get($components, 'dropdown') or $-all {
+    @include dropdown-module.dropdown-styles {
+        @if $-inverse {
+            @include dropdown-module.dropdown-inverse-styles;
+        }
+    }
+}
+@if map.get($components, 'modal') or $-all { @include modal-module.modal-styles; }
+@if map.get($components, 'drawer') or $-all { @include drawer-module.drawer-styles; }
+@if map.get($components, 'sticky') or $-all { @include sticky-module.sticky-styles; }
+@if map.get($components, 'leader') or $-all { @include leader-module.leader-styles; }
+@if map.get($components, 'tooltip') or $-all { @include tooltip-module.tooltip-styles; }
 
 // Navs
-@forward 'nav';
-@forward 'navbar'; // After: Card, Grid, Nav, Icon, Search
-@forward 'subnav';
-@forward 'segmented';
-@forward 'breadcrumb'; //
-// @forward 'pagination';
-@forward 'tabs';
-@forward 'dotnav';
-@forward 'thumbnav';
-@forward 'iconnav';
-
-// JavaScript
-@forward 'accordion'; // After: Card
-@forward 'drop'; // After: Card
-@forward 'dropdown'; // After: Card
-@forward 'modal'; // After: Close
-@forward 'drawer';
-@forward 'datepicker';
-
-@forward 'sticky';
+@if map.get($components, 'nav') or $-all { @include nav-module.nav-styles; }
+@if map.get($components, 'navbar') or $-all {
+    @include navbar-module.navbar-styles {
+        @if $-inverse {
+            @include navbar-module.navbar-inverse-styles;
+        }
+    }
+}
+@if map.get($components, 'subnav') or $-all { @include subnav-module.subnav-styles; }
+@if map.get($components, 'segmented') or $-all { @include segmented-module.segmented-styles; }
+@if map.get($components, 'breadcrumb') or $-all { @include breadcrumb-module.breadcrumb-styles; }
+@if map.get($components, 'tabs') or $-all { @include tabs-module.tabs-styles; }
+@if map.get($components, 'dotnav') or $-all { @include dotnav-module.dotnav-styles; }
+@if map.get($components, 'thumbnav') or $-all { @include thumbnav-module.thumbnav-styles; }
+@if map.get($components, 'iconnav') or $-all { @include iconnav-module.iconnav-styles; }
+
+@if map.get($components, 'grid') or $-all { @include grid-module.grid-styles; }
+
+
+// ========================================================================
+// Conditional tokens generation
+// ========================================================================
+
+// Whether to generate CSS tokens
+$generate-tokens: true !default;
+$tokens-selector: ':root' !default;
+
+@if $generate-tokens {
+    #{$tokens-selector} {
+        @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;
+                }
+            }
+        }
+    }
+}