@broxus/react-uikit 0.23.2 → 0.24.0

package/styles/_components.scss

@@ -0,0 +1,85 @@
+// ========================================================================
+// Components Re-exports
+// Re-exports all component style mixins for selective inclusion
+//
+// Usage:
+//   @use '@broxus/react-uikit/styles/components' as components;
+//
+//   @include components.button-styles;
+//   @include components.card-styles;
+// ========================================================================
+
+@forward 'accordion/accordion' show accordion-styles;
+@forward 'alert/alert' show alert-styles;
+@forward 'align/align' show align-styles;
+@forward 'animation/animation' show animation-styles;
+@forward 'article/article' show article-styles;
+@forward 'background/background' show background-styles;
+@forward 'badge/badge' show badge-styles;
+@forward 'base/base' show base-styles;
+@forward 'breadcrumb/breadcrumb' show breadcrumb-styles;
+@forward 'button/button' show button-styles;
+@forward 'card/card' show card-styles, card-inverse-styles;
+@forward 'checkbox/checkbox' show checkbox-styles;
+@forward 'close/close' show close-styles;
+@forward 'column/column' show column-styles;
+@forward 'comment/comment' show comment-styles;
+@forward 'container/container' show container-styles;
+@forward 'control/control' show control-styles;
+@forward 'cover/cover' show cover-styles;
+@forward 'datepicker/datepicker' show datepicker-styles;
+@forward 'description-list/description-list' show description-list-styles;
+@forward 'divider/divider' show divider-styles;
+@forward 'dotnav/dotnav' show dotnav-styles;
+@forward 'drawer/drawer' show drawer-styles;
+@forward 'drop/drop' show drop-styles;
+@forward 'dropdown/dropdown' show dropdown-styles, dropdown-inverse-styles;
+@forward 'flex/flex' show flex-styles;
+@forward 'form/form' show form-styles;
+@forward 'grid/grid' show grid-styles;
+@forward 'heading/heading' show heading-styles;
+@forward 'height/height' show height-styles;
+@forward 'icon/icon' show icon-styles;
+@forward 'iconnav/iconnav' show iconnav-styles;
+@forward 'input-number/input-number' show input-number-styles;
+@forward 'input-password/input-password' show input-password-styles;
+@forward 'inverse/inverse' show inverse-styles;
+@forward 'label/label' show label-styles;
+@forward 'leader/leader' show leader-styles;
+@forward 'link/link' show link-styles;
+@forward 'list/list' show list-styles;
+@forward 'margin/margin' show margin-styles;
+@forward 'marker/marker' show marker-styles;
+@forward 'modal/modal' show modal-styles;
+@forward 'motion/motion' show motion-styles;
+@forward 'nav/nav' show nav-styles;
+@forward 'navbar/navbar' show navbar-styles, navbar-inverse-styles;
+@forward 'overlay/overlay' show overlay-styles, overlay-inverse-styles;
+@forward 'padding/padding' show padding-styles;
+@forward 'pagination/pagination' show pagination-styles;
+@forward 'placeholder/placeholder' show placeholder-styles;
+@forward 'position/position' show position-styles;
+@forward 'progress/progress' show progress-styles;
+@forward 'radio/radio' show radio-styles;
+@forward 'search/search' show search-styles;
+@forward 'section/section' show section-styles, section-inverse-styles;
+@forward 'segmented/segmented' show segmented-styles;
+@forward 'select/select' show select-styles;
+@forward 'slider/slider' show slider-styles;
+@forward 'spinner/spinner' show spinner-styles;
+@forward 'sticky/sticky' show sticky-styles;
+@forward 'subnav/subnav' show subnav-styles;
+@forward 'svg/svg' show svg-styles;
+@forward 'switch/switch' show switch-styles;
+@forward 'table/table' show table-styles;
+@forward 'tabs/tabs' show tabs-styles;
+@forward 'text/text' show text-styles;
+@forward 'textarea/textarea' show textarea-styles;
+@forward 'thumbnav/thumbnav' show thumbnav-styles;
+@forward 'tile/tile' show tile-styles, tile-inverse-styles;
+@forward 'tooltip/tooltip' show tooltip-styles;
+@forward 'totop/totop' show totop-styles;
+@forward 'transition/transition' show transition-styles;
+@forward 'utility/utility' show utility-styles;
+@forward 'visibility/visibility' show visibility-styles;
+@forward 'width/width' show width-styles;

package/styles/_globals.scss

@@ -0,0 +1,151 @@
+// ========================================================================
+// Global Tokens
+// Outputs global CSS custom properties (breakpoints, colors, fonts, etc.)
+// Used as the foundation for all component tokens
+//
+// Usage:
+//   @use '@broxus/react-uikit/styles/globals' as globals;
+//
+//   :root {
+//       @include globals.global-tokens;
+//   }
+// ========================================================================
+
+@use 'variables' as *;
+
+@mixin global-tokens {
+    // 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};
+
+    @content;
+}