@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/_import.utilities.scss

@@ -1,18 +1,163 @@
-// Utilities
-@forward 'animation';
-@forward 'motion';
-@forward 'height';
-@forward 'text';
-@forward 'column';
-@forward 'background';
-@forward 'utility';
-@forward 'flex'; // After: Utility
-@forward 'margin';
-@forward 'padding';
-@forward 'position';
-@forward 'transition';
-@forward 'visibility';
-@forward 'inverse';
-
-// Need to be loaded last
+// ========================================================================
+// Import Utilities (without components)
+// Conditionally generates utility styles and tokens (flex, margin,
+// padding, position, width, height, animation, etc.) based on the
+// `$components` configuration map. Forwards base dependencies:
+// custom-media, variables, components, mixins, print.
+//
+// Usage:
+//   @use '@broxus/react-uikit/styles/import.utilities' with ($components: (all: true));
+//   @use '@broxus/react-uikit/styles/import.utilities' with ($components: (flex: true, margin: true));
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// Forward base dependencies
+@forward 'custom-media';
+@forward 'variables';
+@forward 'components';
+@forward 'mixins';
 @forward 'print';
+
+
+// ========================================================================
+// Configuration
+// ========================================================================
+
+$-components: (
+    all: false,
+
+    // Utilities
+    animation: true,
+    motion: true,
+    width: true,
+    height: true,
+    text: true,
+    column: false,
+    cover: false,
+    background: false,
+    align: true,
+    svg: true,
+    utility: true,
+    flex: true,
+    margin: true,
+    padding: true,
+    position: true,
+    transition: true,
+    visibility: true,
+    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 utility modules
+// ========================================================================
+
+@use 'globals' as globals;
+@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 styles generation
+// ========================================================================
+
+// Utilities
+@if map.get($components, 'animation') or map.get($components, 'all') { @include animation-module.animation-styles; }
+@if map.get($components, 'motion') or map.get($components, 'all') { @include motion-module.motion-styles; }
+@if map.get($components, 'width') or map.get($components, 'all') { @include width-module.width-styles; }
+@if map.get($components, 'height') or map.get($components, 'all') { @include height-module.height-styles; }
+@if map.get($components, 'text') or map.get($components, 'all') { @include text-module.text-styles; }
+@if map.get($components, 'column') or map.get($components, 'all') { @include column-module.column-styles; }
+@if map.get($components, 'cover') or map.get($components, 'all') { @include cover-module.cover-styles; }
+@if map.get($components, 'background') or map.get($components, 'all') { @include background-module.background-styles; }
+@if map.get($components, 'align') or map.get($components, 'all') { @include align-module.align-styles; }
+@if map.get($components, 'svg') or map.get($components, 'all') { @include svg-module.svg-styles; }
+@if map.get($components, 'utility') or map.get($components, 'all') { @include utility-module.utility-styles; }
+@if map.get($components, 'flex') or map.get($components, 'all') { @include flex-module.flex-styles; }
+@if map.get($components, 'margin') or map.get($components, 'all') { @include margin-module.margin-styles; }
+@if map.get($components, 'padding') or map.get($components, 'all') { @include padding-module.padding-styles; }
+@if map.get($components, 'position') or map.get($components, 'all') { @include position-module.position-styles; }
+@if map.get($components, 'transition') or map.get($components, 'all') { @include transition-module.transition-styles; }
+@if map.get($components, 'visibility') or map.get($components, 'all') { @include visibility-module.visibility-styles; }
+
+@if $-inverse or map.get($components, 'all') { @include inverse-module.inverse-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;
+
+        // 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; }
+
+        @if $-inverse or $-all { @include inverse-module.inverse-tokens; }
+    }
+}