@broxus/react-uikit 0.23.3 → 0.24.1

package/styles/_tokens.scss

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

package/styles/{mixin.scss → _utils.scss}

@@ -1,11 +1,17 @@
+// ========================================================================
+// Utilities
+// Low-level helper functions and mixins used across all components
+// (SVG fill replacement, etc.)
 //
-// Component:       Mixin
-// Description:     Defines mixins which are used across all components
+// Usage:
+//   @use '@broxus/react-uikit/styles/utils';
 //
+//   @include utils.svg-fill($src, $old-color, $new-color);
 // ========================================================================
 
 @use 'sass:string';
 
+
 // SVG
 // ========================================================================
 

package/styles/{variables.scss → _variables.scss}

@@ -1,12 +1,24 @@
+// ========================================================================
+// Variables
+// Sass variables shared across all components: breakpoints, colors, fonts,
+// spacing, z-index, global prefix, and per-component defaults.
+// All values are declared with `!default` and can be overridden via
+// `@use 'variables' with (...)`.
 //
-// Component:       Variables
-// Description:     Defines common values which are used across all components
-//
+// Usage:
+//   @use '@broxus/react-uikit/styles/variables' as *;
+//   @use '@broxus/react-uikit/styles/variables' with ($prefix: 'app');
 // ========================================================================
 
 @use 'sass:color';
 @use 'sass:math';
 
+// Global prefix
+// ========================================================================
+
+$prefix:                                                        'uk' !default;
+
+
 // Breakpoints
 // ========================================================================
 
@@ -832,6 +844,7 @@ $datepicker-dropdown-background:                                $global-muted-ba
 $datepicker-dropdown-border:                                    $global-border !default;
 $datepicker-dropdown-border-style:                              $global-border-style !default;
 $datepicker-dropdown-border-width:                              $global-border-width !default;
+$datepicker-dropdown-z-index:                                   $global-z-index + 30 !default;
 
 
 // Description list
@@ -901,7 +914,7 @@ $drawer-content-background:                                     $global-backgrou
 $drawer-content-padding:                                        $global-gutter !default;
 $drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
 $drawer-mask-background:                                        rgb(0 0 0 / 30%) !default;
-$drawer-z-index:                                                $global-z-index + 30 !default;
+$drawer-z-index:                                                $global-z-index + 20 !default;
 $drawer-transition-duration:                                    $transition-medium-fast-duration !default;
 $drawer-close-position:                                         $global-small-margin !default;
 $drawer-close-padding:                                          5px !default;
@@ -1511,23 +1524,24 @@ $section-tertiary-color-mode:                                   light !default;
 
 // Segmented
 // ========================================================================
-$segmented-background:                                          $global-default-background;
-$segmented-padding-horizontal:                                  $global-xsmall-gutter;
-$segmented-padding-vertical:                                    $global-xsmall-gutter;
-$segmented-border-radius:                                       $global-border-radius;
-$segmented-item-height:                                         $global-control-height;
-$segmented-item-padding-horizontal:                             $global-small-gutter;
-$segmented-item-padding-vertical:                               $global-xsmall-gutter;
-$segmented-item-small-height:                                   $global-control-small-height;
-$segmented-item-medium-height:                                  $global-control-medium-height;
-$segmented-item-large-height:                                   $global-control-large-height;
-$segmented-item-color:                                          $global-color;
-$segmented-item-hover-background:                               $global-muted-background;
-$segmented-item-hover-color:                                    $global-color;
-$segmented-item-selected-background:                            $global-primary-background;
-$segmented-item-selected-color:                                 $global-inverse-color;
-$segmented-item-disabled-background:                            $global-muted-background;
-$segmented-item-disabled-color:                                 $global-muted-color;
+$segmented-background:                                          $global-default-background !default;
+$segmented-padding-horizontal:                                  $global-xsmall-gutter !default;
+$segmented-padding-vertical:                                    $global-xsmall-gutter !default;
+$segmented-border-radius:                                       $global-border-radius !default;
+$segmented-group-gutter:                                        $global-xsmall-gutter !default;
+$segmented-item-height:                                         $global-control-height !default;
+$segmented-item-padding-horizontal:                             $global-small-gutter !default;
+$segmented-item-padding-vertical:                               $global-xsmall-gutter !default;
+$segmented-item-small-height:                                   $global-control-small-height !default;
+$segmented-item-medium-height:                                  $global-control-medium-height !default;
+$segmented-item-large-height:                                   $global-control-large-height !default;
+$segmented-item-color:                                          $global-color !default;
+$segmented-item-hover-background:                               $global-muted-background !default;
+$segmented-item-hover-color:                                    $global-color !default;
+$segmented-item-selected-background:                            $global-primary-background !default;
+$segmented-item-selected-color:                                 $global-inverse-color !default;
+$segmented-item-disabled-background:                            $global-muted-background !default;
+$segmented-item-disabled-color:                                 $global-muted-color !default;
 
 
 // Select
@@ -1554,7 +1568,7 @@ $select-content-padding-vertical:                               $select-gutter !
 $select-content-small-padding-horizontal:                       $control-small-padding-horizontal !default;
 $select-content-medium-padding-horizontal:                      $control-medium-padding-horizontal !default;
 $select-content-large-padding-horizontal:                       $control-large-padding-horizontal !default;
-$select-search-input-width:                                     4px !default;
+$select-search-input-width:                                     4 !default;
 $select-search-input-color:                                     $control-color !default;
 $select-placeholder-color:                                      $control-placeholder-color !default;
 $select-selection-item-background:                              $global-background !default;
@@ -1724,7 +1738,7 @@ $switch-border-style:                                           $global-border-s
 $switch-border-width:                                           $global-border-width !default;
 $switch-border-radius:                                          100px !default;
 $switch-height:                                                 22px !default;
-$switch-width:                                                  44px !default;
+$switch-width:                                                  $switch-height * 2 !default;
 $switch-handle-background:                                      $global-background !default;
 $switch-handle-checked-background:                              $global-background !default;
 $switch-handle-border-radius:                                   100px !default;
@@ -1857,10 +1871,10 @@ $inverse-text-tertiary-color:                                   $inverse-global-
 // Textarea
 // ========================================================================
 
-$textarea-counter-background:                                   $global-default-background;
-$textarea-counter-border-radius:                                $control-border-radius;
-$textarea-counter-color:                                        $global-muted-color;
-$textarea-counter-font-size:                                    0.8em;
+$textarea-counter-background:                                   $global-default-background !default;
+$textarea-counter-border-radius:                                $control-border-radius !default;
+$textarea-counter-color:                                        $global-muted-color !default;
+$textarea-counter-font-size:                                    0.8em !default;
 
 
 // Thumbnav

package/styles/accordion/_accordion.scss

@@ -0,0 +1,231 @@
+// Name:            Accordion
+// Description:     Component to create accordions
+//
+// Component:       `uk-accordion`
+//
+// Sub-objects:     `uk-accordion-header`
+//                  `uk-accordion-panel`
+//                  `uk-accordion-body`
+//                  `uk-accordion-extra`
+//
+// States:          `uk-accordion-item-active`
+//                  `uk-accordion-item-disabled`
+//                  `uk-accordion-header-collapsible-only`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin accordion-styles {
+    /* ========================================================================
+       Component: Accordion
+     ========================================================================== */
+
+    .#{$prefix}-accordion {
+        display: flex;
+        flex-direction: column;
+        gap: var(--accordion-gutter);
+        list-style: none;
+        padding: 0;
+        @if map.has-key($mixins, 'hook-accordion') {
+            @include meta.apply(map.get($mixins, 'hook-accordion'));
+        }
+    }
+
+
+    /* Item
+     ========================================================================== */
+
+    .#{$prefix}-accordion-item {
+        @if map.has-key($mixins, 'hook-accordion-item') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-item'));
+        }
+    }
+
+
+    /* Header
+     ========================================================================== */
+
+    .#{$prefix}-accordion-header {
+        align-items: center;
+        color: var(--accordion-header-color);
+        cursor: pointer;
+        display: flex;
+        @if map.has-key($mixins, 'hook-accordion-header') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-header'));
+        }
+    }
+
+    /*
+     * Header collapsible area
+     */
+    .#{$prefix}-accordion-collapsible-header {
+        cursor: default;
+        @if map.has-key($mixins, 'hook-accordion-collapsible-header') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-collapsible-header'));
+        }
+    }
+
+    .#{$prefix}-accordion-collapsible-header .#{$prefix}-accordion-title {
+        cursor: pointer;
+    }
+
+    .#{$prefix}-accordion-collapsible-header .#{$prefix}-accordion-expand-icon {
+        pointer-events: none;
+    }
+
+    /*
+     * Icon collapsible area
+     */
+    .#{$prefix}-accordion-collapsible-icon {
+        cursor: default;
+        @if map.has-key($mixins, 'hook-accordion-collapsible-icon') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-collapsible-icon'));
+        }
+    }
+
+    .#{$prefix}-accordion-collapsible-icon .#{$prefix}-accordion-expand-icon {
+        cursor: pointer;
+    }
+
+    /* Title */
+    .#{$prefix}-accordion-title {
+        color: var(--accordion-title-color);
+        font-size: var(--accordion-title-font-size);
+        line-height: var(--accordion-title-line-height);
+        @if map.has-key($mixins, 'hook-accordion-title') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-title'));
+        }
+    }
+
+    /* Hover + Focus */
+    :not(.#{$prefix}-accordion-collapsible-disabled, .#{$prefix}-accordion-collapsible-icon):hover > .#{$prefix}-accordion-title,
+    :not(.#{$prefix}-accordion-collapsible-disabled, .#{$prefix}-accordion-collapsible-icon) > .#{$prefix}-accordion-title:hover {
+        color: var(--accordion-title-hover-color);
+        outline: none;
+        text-decoration: none;
+        @if map.has-key($mixins, 'hook-accordion-title-hover') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-title-hover'));
+        }
+    }
+
+    /* Expand Icon */
+    .#{$prefix}-accordion-expand-icon {
+        --icon-size: var(--accordion-icon-size);
+        margin-right: var(--accordion-icon-margin-right);
+    }
+
+
+    /* Disabled item
+     ========================================================================== */
+
+    .#{$prefix}-accordion-collapsible-disabled {
+        color: var(--accordion-item-disabled-color);
+        cursor: not-allowed;
+        opacity: 0.7;
+        @if map.has-key($mixins, 'hook-accordion-item-disable') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-item-disable'));
+        }
+    }
+
+
+    /* Content panel
+     ========================================================================== */
+
+    .#{$prefix}-accordion-panel {
+        box-sizing: border-box;
+        display: flow-root;
+        overflow: hidden;
+        @if map.has-key($mixins, 'hook-accordion-panel') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-panel'));
+        }
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-accordion-panel > :last-child { margin-bottom: 0; }
+
+    .#{$prefix}-accordion-body {
+        box-sizing: border-box;
+        margin-top: var(--accordion-gutter);
+        @if map.has-key($mixins, 'hook-accordion-body') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-body'));
+        }
+    }
+
+
+    /* Header extra
+     ========================================================================== */
+
+    .#{$prefix}-accordion-extra {
+        margin-left: auto;
+        margin-right: var(--accordion-extra-margin-horizontal);
+        @if map.has-key($mixins, 'hook-accordion-extra') {
+            @include meta.apply(map.get($mixins, 'hook-accordion-extra'));
+        }
+    }
+
+
+    // Right to Left Direction
+    // ========================================================================
+
+    [dir='rtl'] .#{$prefix}-accordion,
+    .#{$prefix}-accordion.#{$prefix}-accordion-rtl {
+        direction: rtl;
+
+        .#{$prefix}-accordion-expand-icon {
+            margin-left: var(--accordion-icon-margin-right);
+            margin-right: unset;
+        }
+
+        .#{$prefix}-accordion-extra {
+            margin-left: var(--accordion-extra-margin-horizontal);
+            margin-right: auto;
+        }
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-accordion-misc') {
+        @include meta.apply(map.get($mixins, 'hook-accordion-misc'));
+    }
+
+    @content;
+}
+
+@mixin accordion-tokens {
+    --accordion-gutter: var(--global-margin);
+    --accordion-item-disabled-color: var(--global-muted-color);
+    --accordion-header-color: var(--global-emphasis-color);
+    --accordion-title-font-size: var(--global-medium-font-size);
+    --accordion-title-line-height: #{$accordion-title-line-height};
+    --accordion-title-color: var(--global-emphasis-color);
+    --accordion-title-hover-color: var(--global-color);
+    --accordion-extra-margin-horizontal: var(--global-small-margin);
+    --accordion-icon-margin-right: var(--global-small-margin);
+    --accordion-icon-color: var(--global-color);
+    --accordion-icon-size: #{$accordion-icon-size};
+
+    @content;
+}
+
+@mixin accordion-inverse-tokens {
+    --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
+    --inverse-accordion-title-hover-color: var(--inverse-global-color);
+    --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
+
+    @content;
+}

package/styles/accordion/_index.scss

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

package/styles/alert/_alert.scss

@@ -0,0 +1,201 @@
+// Name:            Alert
+// Description:     Component to create alert messages
+//
+// Component:       `uk-alert`
+//
+// Adopted:         `uk-alert-close`
+//                  `uk-alert-motion`
+//
+// Modifiers:       `uk-alert-primary`
+//                  `uk-alert-success`
+//                  `uk-alert-warning`
+//                  `uk-alert-danger`
+//
+// ========================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+
+// Variables
+// ========================================================================
+
+@use '../variables' as *;
+@use '../mixins' as *;
+
+
+@mixin alert-styles() {
+    /* ========================================================================
+       Component: Alert
+     ========================================================================== */
+
+    .#{$prefix}-alert {
+        background: var(--alert-background);
+        color: var(--alert-color);
+        margin-bottom: var(--alert-margin-vertical);
+        padding: var(--alert-padding);
+        padding-right: var(--alert-padding-right);
+        position: relative;
+        @if map.has-key($mixins, 'hook-alert') {
+            @include meta.apply(map.get($mixins, 'hook-alert'));
+        }
+    }
+
+    /* Add margin if adjacent element */
+    * + .#{$prefix}-alert {
+        margin-top: var(--alert-margin-vertical);
+    }
+
+    /*
+     * Remove margin from the last-child
+     */
+
+    .#{$prefix}-alert > :last-child {
+        margin-bottom: 0;
+    }
+
+
+    /* Close
+     * Adopts `uk-close`
+     ========================================================================== */
+
+    .#{$prefix}-alert-close {
+        position: absolute;
+        right: var(--alert-close-right);
+        top: var(--alert-close-top);
+        @if map.has-key($mixins, 'hook-alert-close') {
+            @include meta.apply(map.get($mixins, 'hook-alert-close'));
+        }
+    }
+
+    /*
+     * Remove margin from adjacent element
+     */
+
+    .#{$prefix}-alert-close:first-child + * {
+        margin-top: 0;
+    }
+
+    /*
+     * Hover + Focus
+     */
+
+    .#{$prefix}-alert-close:hover,
+    .#{$prefix}-alert-close:focus {
+        --close-hover-color: initial;
+        opacity: 0.8;
+        @if map.has-key($mixins, 'hook-alert-close-hover') {
+            @include meta.apply(map.get($mixins, 'hook-alert-close-hover'));
+        }
+    }
+
+
+    /* Style modifiers
+     ========================================================================== */
+
+    /*
+     * Primary
+     */
+
+    .#{$prefix}-alert-primary {
+        background: var(--alert-primary-background);
+        color: var(--alert-primary-color);
+        @if map.has-key($mixins, 'hook-alert-primary') {
+            @include meta.apply(map.get($mixins, 'hook-alert-primary'));
+        }
+    }
+
+    /*
+     * Success
+     */
+
+    .#{$prefix}-alert-success {
+        background: var(--alert-success-background);
+        color: var(--alert-success-color);
+        @if map.has-key($mixins, 'hook-alert-success') {
+            @include meta.apply(map.get($mixins, 'hook-alert-success'));
+        }
+    }
+
+    /*
+     * Warning
+     */
+
+    .#{$prefix}-alert-warning {
+        background: var(--alert-warning-background);
+        color: var(--alert-warning-color);
+        @if map.has-key($mixins, 'hook-alert-warning') {
+            @include meta.apply(map.get($mixins, 'hook-alert-warning'));
+        }
+    }
+
+    /*
+     * Danger
+     */
+
+    .#{$prefix}-alert-danger {
+        background: var(--alert-danger-background);
+        color: var(--alert-danger-color);
+        @if map.has-key($mixins, 'hook-alert-danger') {
+            @include meta.apply(map.get($mixins, 'hook-alert-danger'));
+        }
+    }
+
+
+    /* Motion
+     ========================================================================== */
+
+    .#{$prefix}-alert-motion {
+        transition: height var(--transition-duration), opacity var(--transition-duration);
+    }
+
+    .#{$prefix}-alert-motion-leave {
+        opacity: 1;
+        overflow: hidden;
+        transition:
+            max-height var(--transition-duration) var(--ease-in-out-circ),
+            opacity var(--transition-duration) var(--ease-in-out-circ),
+            padding-top var(--transition-duration) var(--ease-in-out-circ),
+            padding-bottom var(--transition-duration) var(--ease-in-out-circ),
+            margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+    }
+
+    .#{$prefix}-alert-motion-leave-active {
+        margin-bottom: 0 !important;
+        max-height: 0;
+        opacity: 0;
+        padding-bottom: 0;
+        padding-top: 0;
+    }
+
+
+    // Hooks
+    // ========================================================================
+
+    @if map.has-key($mixins, 'hook-alert-misc') {
+        @include meta.apply(map.get($mixins, 'hook-alert-misc'));
+    }
+
+    @content;
+}
+
+@mixin alert-tokens {
+    --alert-border-radius: var(--global-border-radius);
+    --alert-margin-vertical: var(--global-margin);
+    --alert-padding: var(--global-small-gutter);
+    --alert-padding-right: calc(var(--alert-padding) + 15px);
+    --alert-background: var(--global-muted-background);
+    --alert-color: var(--global-color);
+    --alert-close-top: var(--alert-padding);
+    --alert-close-right: var(--alert-padding);
+    --alert-primary-background: #{$alert-primary-background};
+    --alert-primary-color: var(--global-primary-color);
+    --alert-success-background: #{$alert-success-background};
+    --alert-success-color: var(--global-success-color);
+    --alert-warning-background: #{$alert-warning-background};
+    --alert-warning-color: var(--global-warning-color);
+    --alert-danger-background: #{$alert-danger-background};
+    --alert-danger-color: var(--global-danger-color);
+
+    @content;
+}

package/styles/alert/_index.scss

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