@progress/kendo-theme-bootstrap 4.41.2-dev.0 → 4.41.3-dev.0

package/dist/all.scss

@@ -791,6 +791,8 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000000 !default;
 
+$dark-theme: false !default;
+
 $body-bg: $white !default;
 $body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
 
@@ -801,6 +803,7 @@ $component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default
 $input-bg: $component-bg !default;
 $input-color: contrast-wcag( $input-bg, $gray-700, $gray-300 ) !default;
 $input-border-color:  contrast-wcag( $input-bg, $gray-400, $gray-600 ) !default;
+$input-placeholder-color: contrast-wcag( $input-bg, $gray-600, $gray-400 ) !default;
 
 $card-bg: $component-bg !default;
 $card-color: $component-text !default;
@@ -814,8 +817,15 @@ $table-bg: $component-bg !default;
 $table-color: $component-text !default;
 $table-border-color: $component-border !default;
 
+$tooltip-bg: if( $dark-theme, $white, $black ) !default;
+$tooltip-color: contrast-wcag( $tooltip-bg ) !default;
+
 $popover-font-size: $font-size-base !default;
 
+$popover-bg: $card-bg !default;
+$popover-color: $card-color !default;
+$popover-border-color: $card-border-color !default;
+
 $popover-header-bg: $component-bg !default;
 $popover-header-text: $component-text !default;
 $popover-header-border: $component-border !default;
@@ -3016,7 +3026,7 @@ $component-text: $body-text !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
 /// @group component
-$component-border: $gray-300 !default;
+$component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
 
 
 /// The background of the components' chrome area.
@@ -3142,7 +3152,7 @@ $placeholder-bg: rgba(0, 0, 0, .1) !default;
 $invalid-bg: null !default;
 $invalid-text: $error !default;
 $invalid-border: $error !default;
-$invalid-shadow: 0 0 0 .2rem rgba($invalid-border, .25) !default;
+$invalid-shadow: 0 0 0 .25rem rgba($invalid-border, .25) !default;
 
 
 // Drag clue
@@ -4748,6 +4758,7 @@ $display4-letter-spacing: null !default;
         position: absolute;
         z-index: 100000;
     }
+
     .k-marquee-color,
     .k-marquee-text {
         position: absolute;
@@ -4756,6 +4767,7 @@ $display4-letter-spacing: null !default;
         width: 100%;
         height: 100%;
     }
+
     .k-marquee-color {
         color: $selected-text;
         background-color: $selected-bg;
@@ -9489,8 +9501,8 @@ $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;
 $flat-button-selected-opacity: .2 !default;
 
-$clear-button-text: #6c757d !default;
-$clear-button-hover-text: $button-text !default;
+$clear-button-text: inherit !default;
+$clear-button-hover-text: inherit !default;
 $clear-button-focused-opacity: .1 !default;
 
 // #endregion
@@ -9589,7 +9601,7 @@ $input-icon-opacity: null !default;
 
 
 // Input separator
-$input-separator-color: $clear-button-text !default;
+$input-separator-color: $input-text !default;
 $input-separator-opacity: .5 !default;
 
 // #endregion
@@ -9949,11 +9961,11 @@ $input-separator-opacity: .5 !default;
 
             // k-button
             > .k-button:first-child {
-                @include border-left-radius( $button-border-radius );
+                @include border-right-radius( $button-border-radius );
             }
             > .k-split-button-arrow,
             > .k-button:last-child {
-                @include border-right-radius( $button-border-radius );
+                @include border-left-radius( $button-border-radius );
             }
         }
     }
@@ -10413,7 +10425,7 @@ $input-separator-opacity: .5 !default;
         &.k-state-focused,
         &.k-state-focused:active {
             &::after {
-                background-color: $clear-button-text;
+                background-color: currentColor;
                 opacity: $clear-button-focused-opacity;
                 display: block;
             }
@@ -15883,8 +15895,8 @@ $textarea-focus-shadow: $input-focused-shadow !default;
 $textarea-placeholder-text: $input-placeholder-text !default;
 $textarea-placeholder-opacity: $input-placeholder-opacity !default;
 
-$textarea-selected-text: $input-selected-text !default;
 $textarea-selected-bg: $input-selected-bg !default;
+$textarea-selected-text: $input-selected-text !default;
 
 $textarea-invalid-focus-shadow: $invalid-shadow !default;
 
@@ -17417,6 +17429,10 @@ $numeric-button-pressed-gradient: $button-active-gradient !default;
     // Numeric
     .k-numerictextbox {
 
+        .k-i-warning {
+            color: $error;
+        }
+
         // Normal state
         .k-numeric-wrap {
             @include fill(
@@ -20401,17 +20417,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             right: $padding-x;
             top: 50%;
             transform: translateY(-50%);
             overflow: visible;
         }
-        &.k-invalid .k-i-warning,
-        &.k-state-invalid .k-i-warning {
-            display: inline-block;
-        }
 
 
         // RTL
@@ -20513,18 +20524,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL
@@ -20614,18 +20619,12 @@ $datetime-select-pressed-gradient: $button-active-gradient !default;
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL
@@ -21423,7 +21422,7 @@ $grid-footer-border: $grid-header-border !default;
 
 /// Background color of alternating rows in grid
 /// @group grid
-$grid-alt-bg: rgba( black, .04 ) !default;
+$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
 /// Text color of alternating rows in grid
 /// @group grid
 $grid-alt-text: null !default;
@@ -21433,7 +21432,7 @@ $grid-alt-border: null !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: rgba( black, .08) !default;
+$grid-hovered-bg: rgba( contrast-wcag( $grid-bg ), .08 ) !default;
 /// Text color of hovered rows in grid
 /// @group grid
 $grid-hovered-text: null !default;
@@ -21443,7 +21442,7 @@ $grid-hovered-border: null !default;
 
 /// Background color of selected rows in grid
 /// @group grid
-$grid-selected-bg: rgba($selected-bg, .25) !default;
+$grid-selected-bg: rgba( $selected-bg, .25 ) !default;
 /// Text color of selected rows in grid
 /// @group grid
 $grid-selected-text: $grid-text !default;
@@ -21484,7 +21483,7 @@ $grid-sticky-header-border: $grid-sticky-border !default;
 $grid-sticky-footer-bg: $grid-header-bg !default;
 $grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;
 
-$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
+$grid-sticky-selected-bg: mix($selected-bg, $grid-bg, 25%) !default;
 $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 
 $grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
@@ -23090,15 +23089,10 @@ $dropdowntree-filter-spacer: 0px !default;
 
             &.k-state-invalid {
                 transition: none;
-
-                + .k-i-warning {
-                    display: inline-block;
-                }
             }
         }
 
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
@@ -26224,13 +26218,13 @@ $notification-themes: () !default;
         > .k-icon {
             margin-top: $notification-icon-offset;
             margin-right: $notification-icon-spacing;
-            flex: 0 0 auto;
+            flex: none;
         }
 
         > .k-i-close {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
-            flex: 0 0 auto;
+            flex: none;
             cursor: pointer;
         }
 
@@ -27498,6 +27492,7 @@ $popover-border-radius: $card-border-radius !default;
 $popover-font-size: $card-font-size !default;
 $popover-font-family: $card-font-family !default;
 $popover-line-height: $card-line-height !default;
+
 $popover-bg: $card-bg !default;
 $popover-text: $card-text !default;
 $popover-border: $card-border !default;
@@ -27507,6 +27502,7 @@ $popover-header-padding-y: $card-header-padding-y !default;
 $popover-header-padding-x: $card-header-padding-x !default;
 $popover-header-border-width: $card-header-border-width !default;
 $popover-header-border-style: $popover-border-style !default;
+
 $popover-header-bg: $card-header-bg !default;
 $popover-header-text: $card-header-text !default;
 $popover-header-border: $card-header-border !default;
@@ -27535,6 +27531,7 @@ $popover-callout-shadow-w: null !default;
     // Popover
     .k-popover {
         @include border-radius( $popover-border-radius );
+        padding: 0;
         border-width: $popover-border-width;
         border-style: $popover-border-style;
         box-sizing: border-box;
@@ -28420,7 +28417,8 @@ $pager-dropdown-width: 5em !default;
 
         &:focus,
         &.k-focus,
-        &.k-state-focus {
+        &.k-state-focus,
+        &.k-state-focused {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
         }
@@ -30165,6 +30163,8 @@ $tabstrip-content-border-focused: $component-text !default;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
+        position: relative;
+        z-index: 2;
     }
 
     .k-tabstrip-items {
@@ -30172,7 +30172,6 @@ $tabstrip-content-border-focused: $component-text !default;
         display: flex;
         flex-direction: row;
         flex: 0 0 auto;
-        position: relative;
 
         .k-item {
             margin: 0;
@@ -30216,6 +30215,8 @@ $tabstrip-content-border-focused: $component-text !default;
         display: none;
         overflow: auto;
         flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
 
         &.k-state-active {
             display: block;
@@ -30250,9 +30251,8 @@ $tabstrip-content-border-focused: $component-text !default;
 
 
     // Scrolling
-    .k-tabstrip.k-tabstrip-scrollable {
+    .k-tabstrip-scrollable {
         > .k-tabstrip-items-wrapper {
-            border-width: 0;
 
             > .k-tabstrip-items {
                 flex: 1 1 auto;
@@ -30277,11 +30277,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 }
             }
         }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            border-width: $tabstrip-content-border-width;
-        }
     }
 
 
@@ -30289,6 +30284,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
+            margin-bottom: -$tabstrip-content-border-width;
 
             .k-item {
                 @include border-top-radius( $tabstrip-item-border-radius );
@@ -30307,12 +30303,13 @@ $tabstrip-content-border-focused: $component-text !default;
         > .k-content,
         > .k-tabstrip-content {
             @include border-bottom-radius( $tabstrip-item-border-radius );
-            border-top-width: 0;
+            border-top-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: $tabstrip-border-width;
+            margin-top: -$tabstrip-content-border-width;
 
             .k-item {
                 @include border-bottom-radius( $tabstrip-item-border-radius );
@@ -30331,7 +30328,7 @@ $tabstrip-content-border-focused: $component-text !default;
         > .k-content,
         > .k-tabstrip-content {
             @include border-top-radius( $tabstrip-item-border-radius );
-            border-bottom-width: 0;
+            border-bottom-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-left {
@@ -30339,6 +30336,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
         > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
+            margin-right: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -30362,10 +30360,8 @@ $tabstrip-content-border-focused: $component-text !default;
         > .k-content,
         > .k-tabstrip-content {
             @include border-right-radius( $tabstrip-item-border-radius );
-            // sass-lint:disable no-important
-            margin: 0 !important;
-            // sass-lint:enable no-important
-            border-left-width: 0;
+            margin: 0 !important; // sass-lint:disable-line no-important
+            border-left-color: transparent !important; // sass-lint:disable-line no-important
         }
 
     }
@@ -30374,6 +30370,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
         > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
+            margin-left: -$tabstrip-content-border-width;
 
             > .k-tabstrip-items {
                 display: inline-flex;
@@ -30397,10 +30394,8 @@ $tabstrip-content-border-focused: $component-text !default;
         > .k-content,
         > .k-tabstrip-content {
             @include border-left-radius( $tabstrip-item-border-radius );
-            // sass-lint:disable no-important
-            margin: 0 !important;
-            // sass-lint:enable no-important
-            border-right-width: 0;
+            margin: 0 !important; // sass-lint:disable-line no-important
+            border-right-color: transparent !important; // sass-lint:disable-line no-important
         }
     }
 
@@ -31589,7 +31584,7 @@ $skeleton-rect-border-radius: 0 !default;
 
 $skeleton-circle-border-radius: 9999px !default;
 
-$skeleton-item-bg: rgba( $dark, .2 ) !default;
+$skeleton-item-bg: rgba( $inverse, .2 ) !default;
 
 $skeleton-wave-bg: rgba( black, .04 ) !default;
 
@@ -34147,7 +34142,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         display: inline-flex;
         flex-direction: row;
         position: absolute;
-        z-index: 1;
+        z-index: 2;
         top: 0;
         left: 0;
 
@@ -34164,6 +34159,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
     // Tabstrip
     .k-spreadsheet-tabstrip {
         padding-top: $toolbar-padding-y;
+        position: relative;
+        z-index: 1;
+    }
+    .k-spreadsheet-tabstrip .k-tabstrip-items-wrapper {
+        margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
         display: none;
@@ -34317,17 +34317,17 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 
     // Sheets bar
     .k-spreadsheet-sheets-bar {
-        padding: 0 $padding-y $padding-y;
+        padding: 0 0 map-get( $spacing, 1 ) map-get( $spacing, 1 );
         border-width: 1px 0 0;
         border-style: solid;
         border-color: inherit;
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         position: relative;
     }
     .k-spreadsheet-sheets-bar-add {
-        margin-right: $padding-y;
+        align-self: center;
 
         &:not(:hover) {
             border-color: transparent;
@@ -34336,22 +34336,13 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         }
     }
     .k-spreadsheet-sheets-items {
-        margin-top: -1px;
         flex: 1;
         overflow: hidden;
 
-        // sass-lint:disable no-important
-        .k-tabstrip-items {
-            margin: 0 $button-calc-size !important;
+        .k-tabstrip-items-wrapper {
+            margin: 0;
             border-width: 0;
         }
-        .k-tabstrip-prev {
-            left: 0 !important;
-        }
-        .k-tabstrip-next {
-            right: 0 !important;
-        }
-        // sass-lint:enable no-important
 
         .k-item  {
             .k-link {
@@ -34366,6 +34357,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
                 display: inline-flex;
                 flex-direction: row;
                 vertical-align: middle;
+                align-self: center;
             }
         }
     }
@@ -35982,9 +35974,9 @@ $pivotgrid-remove-text: null !default;
     }
 
     .k-pivot-toolbar {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        align-items: start;
+        border-width: 0 0 1px;
+        border-style: solid;
+        align-items: flex-start;
         flex-wrap: wrap;
 
         > * {
@@ -37626,7 +37618,7 @@ $taskboard-columns-container-gap: $taskboard-spacer !default;
 $taskboard-column-width: 320px !default;
 $taskboard-column-border-width: 1px !default;
 $taskboard-column-border-radius: $border-radius-sm !default;
-$taskboard-column-bg: $gray-100 !default;
+$taskboard-column-bg: if( $dark-theme, $gray-900, $gray-100 ) !default;
 $taskboard-column-text: null !default;
 $taskboard-column-border: transparent !default;
 
@@ -37691,7 +37683,7 @@ $taskboard-card-header-hover-text: $primary-lighter !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
-$taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
+$taskboard-drag-placeholder-bg: rgba( if( $dark-theme, $white, $black ), .1) !default;
 $taskboard-drag-placeholder-border: $component-border !default;
 
 // #endregion
@@ -42592,6 +42584,11 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             border-style: solid;
             line-height: $chat-bubble-line-height;
             word-wrap: break-word;
+
+            a {
+                color: inherit;
+                text-decoration: underline;
+            }
         }
 
 
@@ -43034,6 +43031,9 @@ $chat-toolbar-box-scroll-button-shadow: 0 0 20px 5px $chat-bg !default;
             @include box-shadow( $chat-bubble-shadow );
             transition: $transition;
             order: -1;
+
+            a { color: $link-text; }
+            a:hover { color: $link-hover-text; }
         }
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );
@@ -44832,11 +44832,11 @@ $chart-inactive: rgba( $body-text, .5 ) !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$chart-major-lines: rgba(0, 0, 0, .08) !default;
+$chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$chart-minor-lines: rgba(0, 0, 0, .04) !default;
+$chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
@@ -44846,23 +44846,20 @@ $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;
 
-$chart-tap-highlight-color: rgba(0, 0, 0, 0);
-
-$chart-crosshair-background: rgba(0, 0, 0, .5) !default;
+$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
 $chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default;
+$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
 
-$chart-notes-background: rgba(0, 0, 0, .5) !default;
-$chart-notes-border: rgba(0, 0, 0, .5) !default;
-$chart-notes-lines: rgba(0, 0, 0, .5) !default;
+$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-border: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-lines: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$error-bars-background: rgba(0, 0, 0, .5) !default;
+$error-bars-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$chart-selection-marque-background: $series-a !default;
 $selection-handle-size: 22px !default;
-$selection-border-color: rgba(0, 0, 0, .08) !default;
-$selection-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default;
+$selection-border-color: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $white, $black ), .15) !default;
 
 
 // TreeMap
@@ -44914,7 +44911,7 @@ $treemap-line-height: $line-height !default;
         font-size: $chart-font-size;
         line-height: $chart-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $chart-tap-highlight-color;
+        -webkit-tap-highlight-color: $rgba-transparent;
     }
 
     .k-chart,
@@ -45055,20 +45052,6 @@ $treemap-line-height: $line-height !default;
         height: 100%;
     }
 
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
-
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
     // Navigator hint
     .k-navigator-hint div {
         position: absolute;
@@ -45439,10 +45422,10 @@ $treemap-line-height: $line-height !default;
     // Tooltip
     // TODO
     .k-chart-tooltip {
-        color: $component-bg;
+        color: $white;
     }
     .k-chart-tooltip-inverse {
-        color: invert($component-bg);
+        color: $black;
     }
 
     .k-chart-crosshair-tooltip,
@@ -45488,14 +45471,6 @@ $treemap-line-height: $line-height !default;
         background-color: $component-bg;
         opacity: .8;
     }
-
-    .k-marquee-color {
-        background-color: $chart-selection-marque-background;
-    }
-
-    .k-marquee-color {
-        opacity: .6;
-    }
 }
 
 

package/lib/swatches/bootstrap-3-dark.json

@@ -8,7 +8,7 @@
         "#222222",
         "#337ab7",
         "#23527c",
-        "#333333"
+        "#ffffff"
     ],
     "components": [],
     "groups": [

package/lib/swatches/bootstrap-main-dark.json

@@ -4,11 +4,11 @@
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
     "previewColors": [
-        "#ffffff",
-        "#f8f9fa",
+        "#000000",
+        "#212529",
         "#0d6efd",
         "#0a58ca",
-        "#212529"
+        "#ffffff"
     ],
     "components": [],
     "groups": [

package/lib/swatches/bootstrap-nordic.json

@@ -5,10 +5,10 @@
     "base": "@progress/kendo-theme-bootstrap",
     "previewColors": [
         "#ffffff",
-        "#50686e",
-        "#01a8c1",
-        "#006989",
-        "#e7607b"
+        "#f8f9fa",
+        "#e7607b",
+        "#da2146",
+        "#50686e"
     ],
     "components": [],
     "groups": [

package/lib/swatches/bootstrap-urban.json

@@ -6,9 +6,9 @@
     "previewColors": [
         "#ffffff",
         "#e3eef4",
-        "#447a99",
-        "#1b4b66",
-        "#ff804d"
+        "#ff5c1a",
+        "#e65317",
+        "#000000"
     ],
     "components": [],
     "groups": [