@steroidsjs/bootstrap 3.0.0-beta.63 → 3.0.0-beta.65

package/form/TextField/TextFieldView.scss

@@ -41,7 +41,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
 
         svg {
             path {
-                stroke: $background-disabled-color;
+                stroke: $element-background-color-disabled;
                 stroke-width: 1.5px;
             }
         }
@@ -58,7 +58,7 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         height: 80px;
 
         border-radius: $radius-small;
-        background-color: $text-field-background-color;
+        background-color: $element-field-background-color;
 
         padding: 5px 40px 8px 8px;
 
@@ -68,14 +68,14 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         z-index: 2;
         outline: none;
         color: $text-color;
-        border: 1px solid $border-color;
+        border: 1px solid $element-border-color;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:hover {
-            border-color: $border-color-hover;
+            border-color: $element-border-color-hover;
         }
 
         &:focus {
@@ -87,13 +87,13 @@ $text-field-active-clear-color: var(--text-field-active-clear-color);
         }
 
         &:disabled {
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
             border: none;
             resize: none;
         }
 
         &:disabled::placeholder {
-            color: $placeholder-disabled-color;
+            color: $element-placeholder-color-disabled;
         }
 
         &:disabled + #{$root}__clear {

package/index.scss

@@ -3,6 +3,8 @@
 @import './scss/animations';
 @import './scss/fonts';
 
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
@@ -11,8 +13,6 @@
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Accordion/AccordionView';
-@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
 @import './content/DropDown/DropDownView.scss';
 @import './content/Menu/MenuItemView';

package/layout/ProgressBar/LineProgressBarView.scss

@@ -109,7 +109,7 @@
   }
 
   &__text{
-    color: $dark;
+    color: $graphite;
     margin-left: 8px;
   }
 }

package/list/Grid/GridView.scss

@@ -1,21 +1,24 @@
 :root {
-    --grid-header-background-color: #f1f5f7;
-    --grid-border-color: #e6e6e6;
-    --grid-alternating-color: #F8F8F8;
+    --grid-header-background-color: var(--light-gray);
+    --grid-border-color: var(--gray);
+
     --grid-td-background-color: #FFFFFF;
+    --grid-td-alternating-color: var(--additional-light-gray);
 }
 
 html[data-theme="dark"] {
-    --grid-header-background-color: #414141;
-    --grid-border-color: #595959;
-    --grid-alternating-color: #4A4B53;
-    --grid-td-background-color: #4E4F57;
+    --grid-header-background-color: var(--additional-gray-dark);
+    --grid-border-color: var(--additional-gray-dark);
+
+    --grid-td-background-color: var(--graphite);
+    --grid-td-alternating-color: var(--graphite-dark);
 }
 
 $grid-header-background-color: var(--grid-header-background-color);
 $grid-border-color: var(--grid-border-color);
-$grid-alternating-color: var(--grid-alternating-color);
+
 $grid-td-background-color: var(--grid-td-background-color);
+$grid-td-alternating-color: var(--grid-td-alternating-color);
 
 .GridView {
     $root: &;
@@ -78,7 +81,7 @@ $grid-td-background-color: var(--grid-td-background-color);
 
     &_alternatingColors{
         #{$root}__table tbody tr:nth-child(even) td { 
-            background-color: $grid-alternating-color;
+            background-color: $grid-td-alternating-color;
         }
     }
 

package/list/Grid/views/ContentColumnView/ContentColumnView.scss

@@ -28,7 +28,7 @@ $grid-icon-color: var(--grid-icon-color);
     }
 
     &__subtitle {
-        color: $placeholder-color;
+        color: $element-placeholder-color;
     }
 
     &__picture {

package/list/Pagination/PaginationButtonView.scss

@@ -1,27 +1,24 @@
 :root {
-    --pagination-hover-color: #e5e9eb;
-    --pagination-hover-background-color: #ffffff;
+    --pagination-border-color: var(--gray);
+    --pagination-hover-background-color: $white;
+
     --pagination-arrow-color: #323232;
-    --pagination-focus-color: #f5f8fa;
-    --pagination-disabled-background-color: #eef1f2;
-    --pagination-disabled-color: rgba(0, 0, 0, 0.1);
+    --pagination-background-color-disabled: #F1F5F7;
 }
 
 html[data-theme="dark"] {
-    --pagination-hover-color: #5b5c6b;
-    --pagination-hover-background-color: #5b5c6b;
+    --pagination-border-color: var(--background-color);
+    --pagination-hover-background-color: var(--gray-dark);
+
     --pagination-arrow-color: #ffffff;
-    --pagination-focus-color: #adaab3;
-    --pagination-disabled-background-color: #5b5c6b;
-    --pagination-disabled-color: rgba(255, 255, 255, 0.1);
+    --pagination-background-color-disabled: #333646;
 }
 
-$pagination-hover-color: var(--pagination-hover-color);
+$pagination-border-color: var(--pagination-border-color);
 $pagination-hover-background-color: var(--pagination-hover-background-color);
+
 $pagination-arrow-color: var(--pagination-arrow-color);
-$pagination-focus-color: var(--pagination-focus-color);
-$pagination-disabled-background-color: var(--pagination-disabled-background-color);
-$pagination-disabled-color: var(--pagination-disabled-color);
+$pagination-background-color-disabled: var(--pagination-background-color-disabled);
 
 .PaginationButtonView {
     $root: &;
@@ -155,7 +152,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         cursor: pointer;
 
         background-color: $element-background-color;
-        border: 1px solid $border-color;
+        border: 1px solid $pagination-border-color;
         border-right: none;
 
         &::before {
@@ -168,12 +165,12 @@ $pagination-disabled-color: var(--pagination-disabled-color);
             height: 100%;
             pointer-events: none;
             border-radius: inherit;
-            border: 4px solid $pagination-focus-color;
+            border: 4px solid $light-gray;
             opacity: 0;
         }
 
         &:last-child {
-            border: 1px solid $border-color;
+            border: 1px solid $pagination-border-color;
         }
 
         &_active {
@@ -192,7 +189,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         }
 
         &:not(#{$pageRoot}_disabled):not(#{$pageRoot}_active):hover {
-            border-color: $pagination-hover-color;
+            border-color: $element-border-color-hover;
             background-color: $pagination-hover-background-color;
         }
 
@@ -233,7 +230,7 @@ $pagination-disabled-color: var(--pagination-disabled-color);
             justify-content: center;
             align-items: center;
 
-            rect { 
+            rect {
                 fill: transparent;
             }
 
@@ -247,18 +244,19 @@ $pagination-disabled-color: var(--pagination-disabled-color);
         }
 
         &_disabled {
-            background-color: $pagination-disabled-background-color;
-            color: $pagination-disabled-color;
+            background-color: $element-background-color-disabled;
+            color: $element-placeholder-color-disabled;
+
             cursor: not-allowed;
 
-            button { 
+            button {
                 cursor: not-allowed;
             }
 
             #{$pageRoot}-icon {
                 pointer-events: none;
                 path {
-                    stroke: $pagination-disabled-color;
+                    stroke: $element-placeholder-color-disabled;
                 }
             }
         }

package/modal/Modal/ModalView.scss

@@ -1,3 +1,13 @@
+:root { 
+    --modal-background-color:  #FFFFFF;
+}
+
+html[data-theme="dark"] {
+    --modal-background-color:  #272A37;
+}
+
+$modal-background-color: var(--modal-background-color);
+
 .ModalView {
     $root: &;
     min-width: 300px;
@@ -18,7 +28,7 @@
     &__body {
         margin: auto;
         overflow: visible;
-        background-color: $element-background-color;
+        background-color: $modal-background-color;
         color: $text-color;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.63",
+    "version": "3.0.0-beta.65",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.44",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.44"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.45"
     }
 }

package/scss/mixins/date.scss

@@ -1,3 +1,5 @@
+@import "../variables/index";
+
 :root {
     --date-icon-default-color: #cbd5db;
     --date-icon-close-default-color: #323232;
@@ -6,7 +8,7 @@
 }
 
 html[data-theme="dark"] {
-    --date-icon-default-color: #5b5c6b;
+    --date-icon-default-color: #333646;
     --date-icon-close-default-color: #ffffff;
     --date-icon-disabled-color: rgba(255, 255, 255, 0.1);
     --date-range-separator-color: rgba(255, 255, 255, 0.1);
@@ -106,8 +108,8 @@ $date-sizes: map-merge(
         width: 100%;
         font-size: inherit;
         line-height: $line-height-lg;
-        background-color: $element-background-color;
-        border: 1px solid $border-color;
+        background-color: $element-field-background-color;
+        border: 1px solid $element-border-color;
         color: $text-color;
         transition: border-color 150ms ease-in-out;
 
@@ -116,12 +118,16 @@ $date-sizes: map-merge(
         }
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
 
         &:disabled {
             border: none;
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
+
+            &::placeholder {
+                color: $element-placeholder-color-disabled;
+            }
         }
     }
 }
@@ -163,10 +169,12 @@ $date-sizes: map-merge(
     }
 
     &_disabled {
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-disabled-color;
+        #{$root}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
             }
         }
     }
@@ -232,7 +240,7 @@ $date-sizes: map-merge(
         }
 
         &::before {
-            border-color: $border-color;
+            border-color: $element-border-color;
         }
 
         &::after {
@@ -263,7 +271,13 @@ $date-sizes: map-merge(
 
     &_disabled {
         #{$root}__body {
-            background-color: $background-disabled-color;
+            background-color: $element-background-color-disabled;
+        }
+
+        #{$root}__input { 
+            &::placeholder { 
+                color: $element-placeholder-color-disabled;
+            }
         }
 
         #{$root}__effect {
@@ -272,10 +286,12 @@ $date-sizes: map-merge(
     }
 
     &_disabled {
-        #{$root}__date-icon {
-            path,
-            circle {
-                stroke: $date-icon-disabled-color;
+        #{$root}__icon-container {
+            #{$root}__date-icon {
+                path,
+                circle {
+                    stroke: $date-icon-disabled-color;
+                }
             }
         }
     }
@@ -325,12 +341,11 @@ $date-sizes: map-merge(
         color: inherit;
 
         &::placeholder {
-            color: $placeholder-color;
+            color: $element-placeholder-color;
         }
     }
 }
 
-
 @mixin date-time-panel($root) {
     &__panel-container {
         position: relative;
@@ -394,4 +409,10 @@ $date-sizes: map-merge(
             margin-top: 3px;
         }
     }
+}
+
+@mixin calendar-border () { 
+    .CalendarView { 
+        border: none;
+    }
 }

package/scss/variables/common/colors.scss

@@ -1,3 +1,4 @@
+//** Themed colors **//
 :root {
     --primary: #651fff;
     --primary-dark: #5218d0;
@@ -17,42 +18,48 @@
     --warning: #ffe457;
     --warning-dark: #ebd251;
     --warning-light: #fff6c6;
+
+    --graphite-dark: #2b2828;
     --graphite: #323232;
+    --mouse: #626262;
     --gray-dark: #cbd5db;
     --gray: #dbe2e6;
     --light-gray: #f1f5f7;
-    --dark: #6f6b76;
-    --light: #9088a1;
+
+    --additional-gray-dark: #26272f;
+    --additional-light-gray: #f8f8f8;
+    --additional-light-blue: #f9fcff;
+
     --text-color: #312c3a;
-    --background-color: #fff;
-    --is-dark: "false";
-    --border-color: #dbe2e6;
-    --border-color-hover: #e5e9eb;
-    --placeholder-color: rgba(0, 0, 0, 0.3);
-    --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
-    --background-disabled-color: #f1f5f7;
+    --link-color: #2BA3FB;
+    --link-color-hover: #00c2ff;
+
+    --background-color: #EDF0F1;
+
+    --element-placeholder-color: rgba(0, 0, 0, 0.3);
+    --element-placeholder-color-disabled: rgba(0, 0, 0, 0.1);
+    --element-border-color: #dbe2e6;
+    --element-border-color-hover: #cbd5db;
     --element-background-color: #FFFFFF;
-    --additional-gray-dark: #6F6B76;
-    --additional-gray: #E6E6E6;
-    --additional-light-gray: #F8F8F8;
-    --additional-light: #9088A1;
-    --additional-light-blue: #F9FCFF;
-    --scroll-thumb-color: #e5e9eb;
-    --scroll-track-color: #f5f8fa;
+    --element-background-color-disabled: #f1f5f7;
+    --element-field-background-color: #FFFFFF;
+
+    --scroll-thumb-color: #cbd5db;
+    --scroll-track-color: #f1f5f7;
 }
 
 html[data-theme="dark"] {
-    --primary: #8b57ff;
-    --primary-dark: #6648a7;
-    --primary-light: #ba9bff;
+    --primary: #9362ff;
+    --primary-dark: #8256e4;
+    --primary-light: #b898ff;
     --secondary: #9ea8db;
-    --secondary-dark: #616a95;
+    --secondary-dark: #727eb7;
     --secondary-light: #bcc3e9;
-    --success: #3cf25a;
-    --success-dark: #34cc4d;
-    --success-light: #74ff8b;
-    --danger: #fc6666;
-    --danger-dark: #dc5858;
+    --success: #5ecc71;
+    --success-dark: #5b9966;
+    --success-light: #89e699;
+    --danger: #f76e6e;
+    --danger-dark: #e95b5b;
     --danger-light: #ffa1a1;
     --info: #9ae1f1;
     --info-dark: #77c4d6;
@@ -60,33 +67,36 @@ html[data-theme="dark"] {
     --warning: #ffe457;
     --warning-dark: #ebd251;
     --warning-light: #fff6c8;
-    --graphite: #414141;
-    --gray-dark: #4e4f57;
-    --gray: #5b5c6b;
-    --light-gray: #928b9d;
-    --dark: #6b6477;
-    --light: #b7afc7;
+
+    --graphite-dark: #16171b;
+    --graphite: #191b1f;
+    --mouse: #adacac;
+    --gray-dark: #272a37;
+    --gray: #333646;
+    --light-gray: #4b4e5e;
+
+    --additional-gray-dark: #26272f;
+    --additional-light-gray: #f8f8f8;
+    --additional-light-blue: #f9fcff;
+
     --text-color: #ffffff;
-    --background-color: #323030;
-    --is-dark: "true";
-    --border-color: #5B5C6B;
-    --border-color-hover: #4e4f57;
-    --placeholder-color: rgba(255, 255, 255, 0.3);
-    --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
-    --background-disabled-color: #5b5c6b;
-    --element-background-color: #414141;
-    --additional-gray-dark: #6B6477;
-    --additional-gray: #595959;
-    --additional-light-gray: #4A4B53;
-    --additional-light: #B7AFC7;
-    --additional-light-blue: #DAEAF6;
-    --scroll-thumb-color: #5b5c6b;
-    --scroll-track-color: #444147;
+    --link-color: #2BA3FB;
+    --link-color-hover: #00c2ff;
+
+    --background-color: #101216;
+
+    --element-placeholder-color: rgba(255, 255, 255, 0.3);
+    --element-placeholder-color-disabled: rgba(255, 255, 255, 0.1);
+    --element-border-color: #333646;
+    --element-border-color-hover: #272a37;
+    --element-background-color: #191B1F;
+    --element-background-color-disabled: #333646;
+    --element-field-background-color: #101216;
+
+    --scroll-thumb-color: #333646;
+    --scroll-track-color: #26272f;
 }
 
-/*
- *  SCSS variables implementation
- */
 $primary: var(--primary);
 $primary-dark: var(--primary-dark);
 $primary-light: var(--primary-light);
@@ -105,34 +115,38 @@ $info-light: var(--info-light);
 $warning: var(--warning);
 $warning-dark: var(--warning-dark);
 $warning-light: var(--warning-light);
+
+$graphite-dark: var(--graphite-dark);
 $graphite: var(--graphite);
+$mouse: var(--mouse);
 $gray-dark: var(--gray-dark);
 $gray: var(--gray);
 $light-gray: var(--light-gray);
-$dark: var(--dark);
-$light: var(--light);
+
+$additional-gray-dark: var(--additional-gray-dark);
+$additional-light-gray: var(--additional-gray);
+$additional-light-blue: var(--additional-light-blue);
+
 $text-color: var(--text-color);
-$text-color-revert: var(--text-color-revert);
+$link-color: var(--link-color);
+$link-color-hover: var(--link-color-hover);
+
 $background-color: var(--background-color);
-$is-dark: var(--is-dark);
-$border-color: var(--border-color);
-$border-color-hover: var(--border-color-hover);
-$placeholder-color: var(--placeholder-color);
-$placeholder-disabled-color: var(--placeholder-disabled-color);
-$background-disabled-color: var(--background-disabled-color);
+
+$element-placeholder-color: var(--element-placeholder-color);
+$element-placeholder-color-disabled: var(--element-placeholder-color-disabled);
+$element-border-color: var(--element-border-color);
+$element-border-color-hover: var(--element-border-color-hover);
 $element-background-color: var(--element-background-color);
-$additional-gray-dark: var(--additional-gray-dark);
-$additional-gray: var(--additional-gray);
-$additional-light-gray: var(--additional-light-gray);
-$additional-light: var(--additional-light);
-$additional-light-blue: var(--additional-light-blue);
+$element-background-color-disabled: var(--element-background-color-disabled);
+$element-field-background-color: var(--element-field-background-color);
+
+
 $scroll-thumb-color: var(--scroll-thumb-color);
 $scroll-track-color: var(--scroll-track-color);
+//** Themed colors **//
 
-/*
- * Common colors   
- */
-
+//! Base colors !//
 $black: rgba(#000, 1) !default;
 $black-60: rgba(#000, 0.6) !default;
 $black-30: rgba(#000, 0.3) !default;
@@ -143,11 +157,9 @@ $white-60: rgba(#ffffff, 0.6) !default;
 $white-30: rgba(#ffffff, 0.3) !default;
 $white-10: rgba(#ffffff, 0.1) !default;
 $white-4: rgba(#ffffff, 0.04) !default;
-
-$link-color: #2ba3fb !default;
-$link-color-hover: #00c2ff !default;
-
-$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
+$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff);
+$static-text-color: #312C3A !default;
+//! Base colors !//
 
 $color-themes: () !default;
 $color-themes: map-merge(

package/scss/variables/components/calendar.scss

@@ -1,7 +1,6 @@
 $calendar-primary-color: $primary !default;
 $calendar-primary-light-color: $primary-light !default;
 $calendar-secondary-color: $border-default !default;
-$calendar-secondary-light-color: $light !default;
 $calendar-text-color: $heading !default;
 $calendar-selected-text-color: $white !default;