fix(bootstrap): use logic from bootstrap dark theme to implement dark…

… swatches
telerik · Jan 26, 2023 · adff721 · adff721
1 parent 2dcb6d8
commit adff721
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -99,13 +99,13 @@ $kendo-button-shadow: null !default;
 
 /// The base background of hovered button.
 /// @group button
-$kendo-button-hover-bg: k-try-darken( $kendo-button-bg, 7.5% ) !default;
+$kendo-button-hover-bg: k-color-darken( $kendo-button-bg, 7.5% ) !default;
 /// The base text color of hovered button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of hovered button.
 /// @group button
-$kendo-button-hover-border: k-try-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-hover-border: k-color-darken( $kendo-button-bg, 10% ) !default;
 /// The base background gradient of hovered button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -115,13 +115,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of active button.
 /// @group button
-$kendo-button-active-bg: k-try-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-active-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
 /// The base text color of active button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of active button.
 /// @group button
-$kendo-button-active-border: k-try-darken( $kendo-button-bg, 12.5% ) !default;
+$kendo-button-active-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
 /// The base background gradient of active button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -131,13 +131,13 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of selected button.
 /// @group button
-$kendo-button-selected-bg: k-try-darken( $kendo-color-primary, 10% ) !default;
+$kendo-button-selected-bg: k-color-darken( $kendo-color-primary, 10% ) !default;
 /// The text color of selected buttons.
 /// @group button
 $kendo-button-selected-text: k-contrast-color( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$kendo-button-selected-border: k-try-darken( $kendo-color-primary, 12.5% ) !default;
+$kendo-button-selected-border: k-color-darken( $kendo-color-primary, 12.5% ) !default;
 /// The background gradient of selected buttons.
 /// @group button
 $kendo-button-selected-gradient: $kendo-button-active-gradient !default;
@@ -147,13 +147,13 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
 
 /// The base background of focused button.
 /// @group button
-$kendo-button-focus-bg: k-try-darken( $kendo-button-bg, 10% ) !default;
+$kendo-button-focus-bg: k-color-darken( $kendo-button-bg, 10% ) !default;
 /// The base text color of focused button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of focused button.
 /// @group button
-$kendo-button-focus-border: k-try-darken( $kendo-button-bg, 12.5% ) !default;
+$kendo-button-focus-border: k-color-darken( $kendo-button-bg, 12.5% ) !default;
 /// The base background gradient of focused button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
@@ -179,7 +179,7 @@ $kendo-button-disabled-shadow: null !default;
 
 // Solid button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "k-try-darken" !default;
+$kendo-solid-button-shade-function: "k-color-darken" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;

diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss
@@ -85,7 +85,7 @@ $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !defaul
 $kendo-calendar-cell-selected-hover-gradient: null !default;
 
 $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
-$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( k-try-darken( $kendo-color-primary, 12.5% ), .5 ) !default;
+$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 ) !default;
 
 
 // Calendar navigation

diff --git a/packages/bootstrap/scss/fab/_theme.scss b/packages/bootstrap/scss/fab/_theme.scss
@@ -16,9 +16,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
-            border-color: k-try-darken( $color, 10% );
-            color: k-contrast-color( k-try-darken( $color, 7.5% ) );
-            background-color: k-try-darken( $color, 7.5% );
+            border-color: k-color-darken( $color, 10% );
+            color: k-contrast-color( k-color-darken( $color, 7.5% ) );
+            background-color: k-color-darken( $color, 7.5% );
         }
     }
 
@@ -38,9 +38,9 @@
         .k-fab-solid-#{$name}.k-active,
         .k-fab-solid-#{$name}.k-selected {
             @include box-shadow( $kendo-fab-active-shadow );
-            border-color: k-try-darken( $color, 12.5% );
-            color: k-contrast-color( k-try-darken( $color, 10% ) );
-            background-color: k-try-darken( $color, 10% );
+            border-color: k-color-darken( $color, 12.5% );
+            color: k-contrast-color( k-color-darken( $color, 10% ) );
+            background-color: k-color-darken( $color, 10% );
         }
     }
 
@@ -79,11 +79,11 @@
     .k-fab-item:hover .k-fab-item-icon,
     .k-fab-item.k-hover .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-shadow );
-        outline: $kendo-fab-border-width solid k-try-darken( $kendo-fab-item-icon-border, 10% );
+        outline: $kendo-fab-border-width solid k-color-darken( $kendo-fab-item-icon-border, 10% );
         outline-offset: -$kendo-fab-border-width;
-        border-color: k-try-darken( $kendo-fab-item-icon-border, 10% );
-        color: k-contrast-color( k-try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
-        background-color: k-try-darken( $kendo-fab-item-icon-bg, 7.5% );
+        border-color: k-color-darken( $kendo-fab-item-icon-border, 10% );
+        color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: k-color-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
@@ -100,11 +100,11 @@
     .k-fab-item:active .k-fab-item-icon,
     .k-fab-item.k-active .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-active-shadow );
-        outline: $kendo-fab-border-width solid k-try-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline: $kendo-fab-border-width solid k-color-darken( $kendo-fab-item-icon-border, 12.5% );
         outline-offset: -$kendo-fab-border-width;
-        border-color: k-try-darken( $kendo-fab-item-icon-border, 12.5% );
-        color: k-contrast-color( k-try-darken( $kendo-fab-item-icon-bg, 10% ) );
-        background-color: k-try-darken( $kendo-fab-item-icon-bg, 10% );
+        border-color: k-color-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: k-contrast-color( k-color-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: k-color-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state