@steroidsjs/bootstrap 3.0.0-beta.62 → 3.0.0-beta.64

package/content/Accordion/AccordionItemView.scss

@@ -1,23 +1,81 @@
 :root {
-    --accordion-background-light: #f8f8f8;
-    --accordion-background-intermediate: #ffffff;
-    --accordion-background-dark: #312c3a;
-    --accordion-rect-background: #ffffff;
-    --accordion-chevron-color: #323232;
+    --accordion-light-background: var(--gray);
+    --accordion-intermediate-background: #ffffff;
+    --accordion-dark-background: #312c3a;
+
+    --accordion-chevron-light-background: #ffffff;
+    --accordion-chevron-intermediate-background: #ffffff;
+    --accordion-chevron-dark-background: #ffffff;
+
+    --accordion-chevron-inner-default-color: var(--graphite);
+    --accordion-chevron-inner-revert-color: #323232;
+
+    --accordion-chevron-default-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+    --accordion-chevron-revert-box-shadow: none;
+
+    --accordion-content-background: #ffffff;
 }
 
 html[data-theme="dark"] {
-    --accordion-background-light: #414141;
-    --accordion-background-intermediate: #5b5c6b;
-    --accordion-background-dark: #4e4f57;
-    --accordion-rect-background: #6f6b76;
-    --accordion-chevron-color: #ffffff;
+    --accordion-light-background: var(--graphite);
+    --accordion-intermediate-background: var(--gray);
+    --accordion-dark-background: var(--gray-dark);
+
+    --accordion-chevron-light-background: var(--gray);
+    --accordion-chevron-intermediate-background: var(--gray-dark);
+    --accordion-chevron-dark-background: #ffffff;
+
+    --accordion-chevron-inner-default-color: #ffffff;
+    --accordion-chevron-inner-revert-color: #323232;
+
+    --accordion-chevron-default-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+    --accordion-chevron-revert-box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
+
+    --accordion-content-background: var(--graphite);
 }
 
-$accordionBackgroundMap: (
-    "light": var(--accordion-background-light),
-    "intermediate": var(--accordion-background-intermediate),
-    "dark": var(--accordion-background-dark),
+$accordion-light-background: var(--accordion-light-background);
+$accordion-intermediate-background: var(--accordion-intermediate-background);
+$accordion-dark-background: var(--accordion-dark-background);
+
+$accordion-chevron-light-background: var(--accordion-chevron-light-background);
+$accordion-chevron-intermediate-background: var(--accordion-chevron-intermediate-background);
+$accordion-chevron-dark-background: var(--accordion-chevron-dark-background);
+
+$accordion-chevron-inner-default-color: var(--accordion-chevron-inner-default-color);
+$accordion-chevron-inner-revert-color: var(--accordion-chevron-inner-revert-color);
+
+$accordion-chevron-default-box-shadow: var(--accordion-chevron-default-box-shadow);
+$accordion-chevron-revert-box-shadow: var(--accordion-chevron-revert-box-shadow);
+
+$accordion-content-background: var(--accordion-content-background);
+
+$accordion-themes: () !default;
+$accordion-themes: map-merge(
+    (
+        "light": (
+            "background": $accordion-light-background,
+            "text-color": $text-color,
+            "chevron-box-shadow": $accordion-chevron-default-box-shadow,
+            "chevron-background": $accordion-chevron-light-background,
+            "chevron-inner-color": $accordion-chevron-inner-default-color,
+        ),
+        "intermediate": (
+            "background": $accordion-intermediate-background,
+            "text-color": $text-color,
+            "chevron-box-shadow": $accordion-chevron-default-box-shadow,
+            "chevron-background": $accordion-chevron-intermediate-background,
+            "chevron-inner-color": $accordion-chevron-inner-default-color,
+        ),
+        "dark": (
+            "background": $accordion-dark-background,
+            "text-color": #ffffff,
+            "chevron-box-shadow": $accordion-chevron-revert-box-shadow,
+            "chevron-background": $accordion-chevron-dark-background,
+            "chevron-inner-color": $accordion-chevron-inner-revert-color,
+        ),
+    ),
+    $accordion-themes
 );
 
 $accordion-rect-background: var(--accordion-rect-background);
@@ -28,39 +86,28 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     display: grid;
     align-items: center;
+    overflow: hidden;
 
-    background-color: #fff;
+    background-color: $accordion-content-background;
     height: 56px;
     width: 480px;
     height: fit-content;
     font-family: $font-family-nunito;
 
-    &_theme {
-        @each $theme, $backgroundColor in $accordionBackgroundMap {
-            &_#{$theme} {
-                #{$root}__header-container {
-                    background-color: $backgroundColor;
-                }
-
-                #{$root}__title-container {
-                    color: $text-color;
+    @each $theme, $themeProperties in $accordion-themes {
+        &_theme_#{$theme} {
+            #{$root}__header-container {
+                background-color: map-get($themeProperties, background);
+                color: map-get($themeProperties, text-color);
+            }
 
-                    @if ($theme == "dark" or $is-dark == "false") {
-                        color: $white;
-                    }
+            #{$root}__icon-chevron {
+                box-shadow: map-get($themeProperties, chevron-box-shadow);
+                rect {
+                    fill: map-get($themeProperties, chevron-background);
                 }
-
-                #{$root}__icon {
-                    svg {
-                        @if ($theme == "light" or $theme == "intermediate") {
-                            rect {
-                                fill: $accordion-rect-background;
-                            }
-                            path {
-                                stroke: $accordion-chevron-color;
-                            }
-                        }
-                    }
+                path {
+                    stroke: map-get($themeProperties, chevron-inner-color);
                 }
             }
         }
@@ -68,28 +115,22 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     &_position {
         &_top {
-            #{$root}__header-container {
-                border-bottom: 1px solid rgba(#000, 0.1);
-                border-radius: $radius-large $radius-large 0 0;
-            }
+            border-radius: $radius-large $radius-large 0 0;
         }
 
         &_middle {
-            #{$root}__header-container {
-                border-top: 1px solid rgba(#000, 0.1);
-                border-radius: 0px;
-            }
+            border-radius: 0px;
         }
 
         &_bottom {
+            border-radius: 0 0 $radius-large $radius-large;
+
             #{$root}__content {
                 grid-row-start: 1;
                 grid-row-end: 1;
             }
 
             #{$root}__header-container {
-                border-top: 1px solid rgba(#000, 0.1);
-                border-radius: 0 0 $radius-large $radius-large;
                 grid-row-start: 2;
                 grid-row-end: 2;
             }
@@ -143,6 +184,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         width: 100%;
         padding: 16px;
         align-self: center;
+
         font-size: $font-size-lg;
         line-height: 24px;
     }
@@ -161,7 +203,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         }
     }
 
-    .IconView { 
+    .IconView {
         display: inline-block;
         width: 24px;
         height: 24px;
@@ -172,12 +214,12 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         overflow: hidden;
         max-height: 0;
         padding: 0 16px;
-        color: #343a40;
+        color: $text-color;
 
         &_visible {
             max-height: 1024px;
             padding: 18px 32px 18px 16px;
-            border: 1px solid rgba(#000, 0.1);
+            border: 1px solid $accordion-content-border;
         }
     }
 
@@ -199,11 +241,12 @@ $accordion-chevron-color: var(--accordion-chevron-color);
             opacity: 1;
             pointer-events: all;
         }
-        
+
         #{$root}__open-icon {
             position: absolute;
             opacity: 0;
             pointer-events: none;
         }
     }
+
 }

package/content/Accordion/AccordionView.scss

@@ -1,14 +1,28 @@
+:root {
+    --accordion-content-border: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+    --accordion-content-border: rgba(255, 255, 255, 0.1);
+}
+
+$accordion-content-border: var(--accordion-content-border);
+
 .AccordionView {
-  height: fit-content;
+    height: fit-content;
+
+    display: grid;
+    grid-gap: 0;
 
-  display: grid;
-  grid-gap: 0;
+    .AccordionItemView {
+        $root: &;
 
-  & > :first-child {
-    border-radius: 14px 14px 0 0;
-  }
+        &__header-container {
+            border-bottom: 1px solid $accordion-content-border;
+        }
+    }
 
-  & > :last-child {
-    border-radius: 0 0 14px 14px;
-  }
+    .AccordionItemView:last-of-type .AccordionItemView__header-container {
+        border-bottom: none;
+    }
 }

package/content/Alert/AlertView.scss

@@ -1,3 +1,40 @@
+:root {
+    --alert-text-color: #152536;
+}
+
+html[data-theme="dark"] {
+    --alert-text-color: #152536;
+}
+
+$alert-text-color: var(--alert-text-color);
+
+$alert-themes: () !default;
+$alert-themes: map-merge(
+    (
+        "success": (
+            "background-color": $success-light,
+            "icon-color": $success,
+        ),
+        "info": (
+            "background-color": $info-light,
+            "icon-color": $info,
+        ),
+        "warning": (
+            "background-color": $warning-light,
+            "icon-color": $warning,
+        ),
+        "error": (
+            "background-color": $danger-light,
+            "icon-color": $danger,
+        ),
+        "default": (
+            "background-color": $light-gray,
+            "icon-color": $gray-dark,
+        ),
+    ),
+    $alert-themes
+);
+
 .AlertView {
     $root: &;
 
@@ -43,7 +80,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        cursor: pointer;    
+        cursor: pointer;
     }
 
     &__text-block {
@@ -51,26 +88,19 @@
         row-gap: 12px;
         max-width: 444px;
         margin-right: auto;
+        color: $alert-text-color;
     }
 
-    &_success {
-        background: $success-light;
-    }
+    @each $color, $alert-properties in $alert-themes {
+        &_#{$color} {
+            background-color: map-get($alert-properties, background-color);
 
-    &_info {
-        background: $info-light;
-    }
-
-    &_warning {
-        background: $warning-light;
-    }
-
-    &_error {
-        background: $danger-light;
-    }
-
-    &_default {
-        background: $light-gray;
+            #{$root}__icon_#{$color} { 
+                g > circle:not([fill="white"]), rect { 
+                    fill: map-get($alert-properties, icon-color);
+                }
+            }
+        }
     }
 
     &__message {

package/content/Avatar/AvatarView.scss

@@ -145,7 +145,7 @@ $status-border-color: var(--status-border-color);
         vertical-align: middle;
 
         color: $white;
-        background: $gradient-blue border-box;
+        background: $primary;
 
         span {
             display: block;

package/content/Badge/BadgeView.scss

@@ -2,13 +2,19 @@
 
 :root {
     --counter-background-color: #ffffff;
+    --counter-border-color: var(--gray);
+    --counter-cross-color: #000000;
 }
 
 html[data-theme="dark"] {
-    --counter-background-color: #414141;
+    --counter-background-color: rgba(255, 255, 255, 0.1);;
+    --counter-border-color: transparent;
+    --counter-cross-color: #FFFFFF;
 }
 
 $counter-background-color: var(--counter-background-color);
+$counter-border-color: var(--counter-border-color);
+$counter-cross-color: var(--counter-cross-color);
 
 .BadgeView {
     $root: &;
@@ -50,7 +56,7 @@ $counter-background-color: var(--counter-background-color);
             background-color: $color;
 
             @if ($type == "warning" or $type == "info") {
-                color: $text-color;
+                color: $static-text-color;
 
                 #{$root}__close {
                     svg {
@@ -90,7 +96,7 @@ $counter-background-color: var(--counter-background-color);
     }
 
     &_has-counter {
-        border: 1px solid #e9e9e9;
+        border: 1px solid $counter-border-color;
         border-radius: 100px;
 
         background: $light-gray;
@@ -128,7 +134,7 @@ $counter-background-color: var(--counter-background-color);
 
         #{$root}__close {
             path {
-                stroke: #000;
+                stroke: $counter-cross-color;
             }
         }
     }

package/content/Calendar/CalendarView.scss

@@ -1,11 +1,11 @@
 :root {
     --day-background-color-hover: rgba(0, 0, 0, 0.1);
-    --calendar-border-color: #f1f5f7;
+    --calendar-border-color: var(--light-gray);
 }
 
 html[data-theme="dark"] {
     --day-background-color-hover: rgba(255, 255, 255, 0.1);
-    --calendar-border-color: #5b5c6b;
+    --calendar-border-color: var(--gray);
 }
 
 $day-background-color-hover: var(--day-background-color-hover);
@@ -26,6 +26,10 @@ $calendar-border-color: var(--calendar-border-color);
 
 .CalendarView {
     $root: &;
+
+    background-color: $element-background-color;
+    border-radius: $radius-large;
+    border: 4px solid $calendar-border-color;
     position: relative;
     color: $text-color;
     font-weight: $font-weight-md;
@@ -148,7 +152,7 @@ $calendar-border-color: var(--calendar-border-color);
         }
 
         &--outside {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
 
         }
 

package/content/Calendar/CaptionElement.scss

@@ -6,7 +6,7 @@
 }
 
 html[data-theme="dark"] {
-    --caption-arrow-background-color: #323232;
+    --caption-arrow-background-color: var(--gray);
     --caption-arrow-color: #ffffff;
     --caption-header-month-background-color: #333646;
     --separator-background-color: rgba(255, 255, 255, 0.1);

package/content/Card/CardView.scss

@@ -1,12 +1,12 @@
 :root {
-    --card-background-color: #ffffff;
-    --card-footer-background-color: #f9fcff;
+    --card-background-color: $white;
+    --card-footer-background-color: var(--additional-light-blue);
     --card-dots-color: #323232;
 }
 
 html[data-theme="dark"] {
-    --card-background-color: #4e4f57;
-    --card-footer-background-color: #6b6477;
+    --card-background-color: var(--graphite);
+    --card-footer-background-color: var(--gray-dark);
     --card-dots-color: #ffffff;
 }
 
@@ -42,7 +42,7 @@ $card-dots-color: var(--card-dots-color);
     overflow: hidden;
     height: fit-content;
 
-    border: 1px solid $border-color;
+    border: 1px solid $element-border-color;
     border-radius: $radius-large;
     color: $text-color;
     background-color: $card-background-color;

package/content/Detail/DetailView.scss

@@ -1,16 +1,13 @@
 :root {
-    --detail-background-color-value: #ffffff;
-    --detail-background-color-label: #f9fcff;
-    --detail-border-color: #e9e9e9;
+    --detail-background-color-value: $white;
+    --detail-background-color-label: var(--additional-light-blue);
 }
 
 html[data-theme="dark"] {
-    --detail-background-color-value: #4E4F57;
-    --detail-background-color-label: #5B5C6B;
-    --detail-border-color: #ADAAB3;
+    --detail-background-color-value: var(--graphite);
+    --detail-background-color-label: var(--additional-gray-dark);
 }
 
-$detail-border-color: var(--detail-border-color);
 $detail-background-color-value: var(--detail-background-color-value);
 $detail-background-color-label: var(--detail-background-color-label);
 
@@ -38,7 +35,7 @@ $detail-background-color-label: var(--detail-background-color-label);
     &__table-container {
         display: flex;
         border-radius: 10px;
-        border: 1px solid $detail-border-color;
+        border: 1px solid $gray;
         overflow: hidden;
     }
 
@@ -52,13 +49,13 @@ $detail-background-color-label: var(--detail-background-color-label);
     }
 
     &__row:not(:last-child) {
-        border-bottom: 1px solid $detail-border-color;
+        border-bottom: 1px solid $gray;
     }
 
     &__label,
     &__value {
         &:not(:last-child) {
-            border-right: 1px solid $detail-border-color;
+            border-right: 1px solid $gray;
         }
 
         padding: 12px;

package/content/DropDown/DropDownView.js

@@ -52,6 +52,7 @@ function DropDownView(props) {
                 show: props.isComponentVisible
             },
             _a["position-".concat(props.position)] = !!props.position,
+            _a.hasArrow = props.hasArrow,
             _a)), props.className), style: props.style }, content));
 }
 exports["default"] = DropDownView;

package/content/DropDown/DropDownView.scss

@@ -7,9 +7,9 @@
 }
 
 html[data-theme="dark"] {
-    --dropdown-background: #4e4f57;
+    --dropdown-background: var(--gray-dark);
     --dropdown-border: transparent;
-    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5859 11.222L0.585938 0.222044L20.5859 0.222046L10.5859 11.222Z' fill='%23272A37'/%3E%3C/svg%3E");
 }
 
 $dropdown-background: var(--dropdown-background);
@@ -87,10 +87,9 @@ $gap: 12px;
 
             left: 100%;
             top: $padding;
-            transform: rotate(-90deg) translate(-30%, -7.5px) ;
+            transform: rotate(-90deg) translate(-30%, -7.5px);
         }
-    }
-    @else if($edge == "right") { 
+    } @else if($edge == "right") {
         &::before {
             @extend %triangle;
 
@@ -104,7 +103,7 @@ $gap: 12px;
 
             right: 100%;
             top: $padding;
-            transform: rotate(-90deg) translate(-30%, 7.5px) ;
+            transform: rotate(-90deg) translate(-30%, 7.5px);
         }
     }
 }
@@ -114,6 +113,7 @@ $gap: 12px;
 
     z-index: 1000;
     position: absolute;
+    color: $text-color;
 
     transform: translate(0, 0);
     opacity: 0;
@@ -179,11 +179,11 @@ $gap: 12px;
     }
 
     &_position-leftTop {
-        @include drop("left", 12.5%)
+        @include drop("left", 12.5%);
     }
 
     &_position-leftBottom {
-        @include drop("left", 80%)
+        @include drop("left", 80%);
     }
 
     &_position-right {
@@ -197,4 +197,16 @@ $gap: 12px;
     &_position-rightBottom {
         @include drop("right", 80%);
     }
+
+    &::before,
+    &::after {
+        opacity: 0;
+    }
+
+    &_hasArrow {
+        &::before,
+        &::after {
+            opacity: 1;
+        }
+    }
 }

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -24,8 +24,8 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
 
     &__input {
         width: 100%;
-        border: 1px solid $border-color;
-        background-color: $element-background-color;
+        border: 1px solid $element-border-color;
+        background-color: $element-field-background-color;
         color: $text-color;
         transition: border-color 150ms ease-in-out;
         font-size: inherit;
@@ -47,7 +47,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
         margin-top: 8px;
         border-radius: $radius-large;
         background-color: $element-background-color;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
         overflow: hidden;
     }
 
@@ -111,7 +111,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
         &__label {
             display: block;
             padding: 12px 8px;
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
         &__content {
             width: 100%;
@@ -123,7 +123,7 @@ $autocomplete-icon-color: var(--autocomplete-icon-color);
     }
 
     &__nothing {
-        color: $placeholder-color;
+        color: $element-placeholder-color;
         width: 100%;
         margin-bottom: 48px;
         padding: 8px 12px;

package/form/CheckboxField/CheckboxFieldView.scss

@@ -113,13 +113,13 @@
             }
 
             &::before {
-                background: $background-disabled-color;
+                background: $element-background-color-disabled;
                 border: none;
             }
         }
 
         &:disabled:checked #{$root}__label::before {
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
             border-color: none;
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.8584 1.48401L4.3584 7.48401L1.8584 4.75674' stroke='black' stroke-opacity='0.1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
         }

package/form/DateField/DateFieldView.js

@@ -46,7 +46,7 @@ var Calendar_1 = __importDefault(require("@steroidsjs/core/ui/content/Calendar")
 function DateFieldView(props) {
     var bem = (0, hooks_1.useBem)('DateFieldView');
     var renderCalendar = (0, react_1.useCallback)(function () { return (React.createElement(Calendar_1["default"], __assign({}, props.calendarProps))); }, [props.calendarProps]);
-    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown') },
+    return (React.createElement(DropDown_1["default"], { content: renderCalendar, position: 'bottomLeft', visible: props.isOpened, onClose: props.onClose, className: bem.element('dropdown'), hasArrow: false },
         React.createElement("div", { className: bem(bem.block({
                 size: props.size,
                 disabled: props.disabled,