feat(bootstrap): use theme core in bootstrap theme

packages/bootstrap/package.json

@@ -43,6 +43,7 @@
     "postpublish": "echo 'no postpublish for bootstrap theme'"
   },
   "dependencies": {
+    "@progress/kendo-theme-core": "^5.8.2-dev.4",
     "@progress/kendo-theme-default": "^5.8.2-dev.4",
     "bootstrap": "^5.2.1"
   },

packages/bootstrap/scss/_bootstrap-overrides.scss

@@ -21,16 +21,16 @@ $black:    #000000 !default;
 // stylelint-enable scss/dollar-variable-colon-space-after
 
 $body-bg: $white !default;
-$body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
+$body-color: k-contrast-color( $body-bg, $gray-900, $gray-100 ) !default;
 
 $component-bg: $body-bg !default;
-$component-text: contrast-wcag( $component-bg, $gray-900, $gray-100 ) !default;
-$component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
+$component-text: k-contrast-color( $component-bg, $gray-900, $gray-100 ) !default;
+$component-border: if( k-is-light( $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;
+$input-color: k-contrast-color( $input-bg, $gray-700, $gray-300 ) !default;
+$input-border-color: if( k-is-light( $input-bg ), $gray-400, $gray-600 ) !default;
+$input-placeholder-color: k-contrast-color( $input-bg, $gray-600, $gray-400 ) !default;
 
 $card-bg: $component-bg !default;
 $card-color: $component-text !default;
@@ -45,7 +45,7 @@ $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;
+$tooltip-color: k-contrast-color( $tooltip-bg ) !default;
 
 $popover-font-size: $font-size-base !default;
 

packages/bootstrap/scss/_variables.scss

@@ -65,7 +65,7 @@ $default-scrollbar-width: 17px !default;
 // Icons
 $icon-size: 16px !default;
 $icon-size-lg: 32px !default;
-$icon-spacing: map-get( $spacing, 2 ) !default;
+$icon-spacing: k-map-get( $spacing, 2 ) !default;
 
 /// The URL to the icon font that will be used by the theme
 /// The default value of `null` embeds the package font with a `data:` URL
@@ -75,15 +75,15 @@ $icon-font-url: null !default;
 
 // Metrics
 $padding-x: $spacer !default;
-$padding-y: $spacer / 2 !default;
-$padding-x-sm: $padding-x / 2 !default;
-$padding-y-sm: $padding-y / 2 !default;
+$padding-y: k-math-div( $spacer, 2 ) !default;
+$padding-x-sm: k-math-div( $padding-x, 2 ) !default;
+$padding-y-sm: k-math-div( $padding-y, 2 ) !default;
 $padding-x-lg: $padding-x * 1.5 !default;
 $padding-y-lg: $padding-y * 1.5 !default;
 
 /// Border radius for all components.
 $kendo-border-radius: $border-radius !default;
-$kendo-border-radius-sm: $kendo-border-radius / 2 !default;
+$kendo-border-radius-sm: k-math-div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
 $kendo-border-radius-lg: $kendo-border-radius * 1.5 !default;
 
@@ -122,7 +122,7 @@ $accent: $primary !default;
 /// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
 /// @group color-system
 /// @type Color
-$accent-contrast: contrast-wcag( $accent ) !default;
+$accent-contrast: k-contrast-color( $accent ) !default;
 
 
 // Theme colors
@@ -131,68 +131,68 @@ $accent-contrast: contrast-wcag( $accent ) !default;
 /// @group color-system
 /// @type Color
 $primary: $primary !default;
-$primary-lighter: tint( $primary, 2 ) !default;
-$primary-darker: shade( $primary, 2 ) !default;
+$primary-lighter: k-color-tint( $primary, 2 ) !default;
+$primary-darker: k-color-shade( $primary, 2 ) !default;
 
 /// The color used along with the primary color denoted by $primary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$primary-contrast: contrast-wcag( $primary ) !default;
+$primary-contrast: k-contrast-color( $primary ) !default;
 
 /// The secondary color of the theme.
 /// @group color-system
 /// @type Color
 $secondary: $secondary !default;
-$secondary-lighter: tint( $secondary, 2 ) !default;
-$secondary-darker: shade( $secondary, 2 ) !default;
+$secondary-lighter: k-color-tint( $secondary, 2 ) !default;
+$secondary-darker: k-color-shade( $secondary, 2 ) !default;
 
 /// The color used along with the secondary color denoted by $secondary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$secondary-contrast: contrast-wcag( $secondary ) !default;
+$secondary-contrast: k-contrast-color( $secondary ) !default;
 
 /// The tertiary color of the theme.
 /// @group color-system
 /// @type Color
 $tertiary: $purple !default;
-$tertiary-lighter: tint( $tertiary, 2 ) !default;
-$tertiary-darker: shade( $tertiary, 2 ) !default;
+$tertiary-lighter: k-color-tint( $tertiary, 2 ) !default;
+$tertiary-darker: k-color-shade( $tertiary, 2 ) !default;
 
 /// The color used along with the tertiary color denoted by $tertiary.
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$tertiary-contrast: contrast-wcag( $tertiary ) !default;
+$tertiary-contrast: k-contrast-color( $tertiary ) !default;
 
 /// The color for informational messages and states.
 /// @group color-system
 /// @type Color
 $info: $info !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
+$info-lighter: k-color-tint( $info, 2 ) !default;
+$info-darker: k-color-shade( $info, 2 ) !default;
 
 /// The color for success messages and states.
 /// @group color-system
 /// @type Color
 $success: $success !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
+$success-lighter: k-color-tint( $success, 2 ) !default;
+$success-darker: k-color-shade( $success, 2 ) !default;
 
 /// The color for warning messages and states.
 /// @group color-system
 /// @type Color
 $warning: $warning !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
+$warning-lighter: k-color-tint( $warning, 2 ) !default;
+$warning-darker: k-color-shade( $warning, 2 ) !default;
 
 /// The color for error messages and states.
 /// @group color-system
 /// @type Color
 $error: $danger !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
+$error-lighter: k-color-tint( $error, 2 ) !default;
+$error-darker: k-color-shade( $error, 2 ) !default;
 
 /// The dark color of the theme.
 /// @group color-system
@@ -246,9 +246,9 @@ $body-text: $body-color !default;
 $subtle-text: if( $dark-theme, $gray-400, $text-muted ) !default;
 $disabled-text: if( $dark-theme, $gray-600, $gray-500) !default;
 
-$app-bg: try-shade( $body-bg, .25 ) !default;
+$app-bg: k-try-shade( $body-bg, .25 ) !default;
 $app-text: $body-text !default;
-$app-border: contrast-wcag( $app-bg, $gray-300, $gray-700 ) !default;
+$app-border: if( k-is-light( $app-bg ), $gray-300, $gray-700 ) !default;
 
 
 // Components
@@ -265,15 +265,15 @@ $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: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
+$component-border: if( k-is-light( $component-bg ), $gray-300, $gray-700 ) !default;
 
 
 /// The background of the components' chrome area.
 $base-bg: $gray-100 !default;
 /// The text color of the components' chrome area.
 $base-text: $body-text !default;
 /// The border color of the components' chrome area.
-$base-border: try-shade( $base-bg, 1 ) !default;
+$base-border: k-try-shade( $base-bg, 1 ) !default;
 /// The gradient background of the components' chrome area.
 $base-gradient: null !default;
 
@@ -282,20 +282,20 @@ $hovered-bg: $gray-200 !default;
 /// The text color of hovered items.
 $hovered-text: $base-text !default;
 /// The border color of hovered items.
-$hovered-border: try-shade( $hovered-bg, 1 ) !default;
+$hovered-border: k-try-shade( $hovered-bg, 1 ) !default;
 /// The gradient background of hovered items.
 $hovered-gradient: null !default;
 
 /// The background of selected items.
 $selected-bg: $primary !default;
 /// The text color of selected items.
-$selected-text: contrast-wcag( $selected-bg ) !default;
+$selected-text: k-contrast-color( $selected-bg ) !default;
 /// The border color of selected items.
-$selected-border: try-shade( $selected-bg, 1 ) !default;
+$selected-border: k-try-shade( $selected-bg, 1 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: null !default;
 
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, .5 ) !default;
 $selected-hover-text: $selected-text !default;
 $selected-hover-border: $base-border !default;
 $selected-hover-gradient: null !default;
@@ -326,7 +326,7 @@ $equilateral-index: 1.7320508076 !default;
 $equilateral-height: .8660254038 !default;
 
 $drop-hint-arrow-size: 8px !default;
-$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
+$drop-hint-arrow-spacing: k-math-div( $drop-hint-arrow-size, 2 ) !default;
 $drop-hint-line-h-width: 20px !default;
 $drop-hint-line-h-height: 1px !default;
 $drop-hint-line-v-width: $drop-hint-line-h-height !default;
@@ -365,7 +365,7 @@ $zindex-loading: 100 !default;
 // Placeholder
 $placeholder-line-width: 100% !default;
 $placeholder-line-height: 10px !default;
-$placeholder-bg: rgba(0, 0, 0, .1) !default;
+$placeholder-bg: rgba( black, .1 ) !default;
 
 
 // Table
@@ -375,7 +375,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 .25rem rgba($invalid-border, .25) !default;
+$invalid-shadow: 0 0 0 .25rem rgba( $invalid-border, .25 ) !default;
 
 
 // Drag clue

packages/bootstrap/scss/action-buttons/_variables.scss

@@ -1,9 +1,9 @@
 // Actions
-$actions-margin-top: map-get( $spacing, 4 ) !default;
-$actions-padding-x: map-get( $spacing, 2 ) !default;
-$actions-padding-y: map-get( $spacing, 2 ) !default;
+$actions-margin-top: k-map-get( $spacing, 4 ) !default;
+$actions-padding-x: k-map-get( $spacing, 2 ) !default;
+$actions-padding-y: k-map-get( $spacing, 2 ) !default;
 $actions-border-width: 0px !default;
-$actions-button-spacing: map-get( $spacing, 2 ) !default;
+$actions-button-spacing: k-map-get( $spacing, 2 ) !default;
 
 $actions-bg: null !default;
 $actions-text: null !default;

packages/bootstrap/scss/action-sheet/_variables.scss

@@ -15,12 +15,12 @@ $actionsheet-line-height: $line-height !default;
 $actionsheet-bg: $component-bg !default;
 $actionsheet-text: $component-text !default;
 $actionsheet-border: $component-border !default;
-$actionsheet-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
+$actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( black, .14 ), 0 6px 30px 5px rgba( black, .12 ) !default;
 
 
 // Actionsheet header
-$actionsheet-header-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-header-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-header-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-header-padding-y: k-map-get( $spacing, 2 ) !default;
 $actionsheet-header-border-width: null !default;
 $actionsheet-header-font-size: null !default;
 $actionsheet-header-font-family: null !default;
@@ -35,8 +35,8 @@ $actionsheet-header-shadow: null !default;
 
 // Actionsheet item
 $actionsheet-item-min-height: 40px !default;
-$actionsheet-item-padding-x: map-get( $spacing, 4 ) !default;
-$actionsheet-item-padding-y: map-get( $spacing, 2 ) !default;
+$actionsheet-item-padding-x: k-map-get( $spacing, 4 ) !default;
+$actionsheet-item-padding-y: k-map-get( $spacing, 2 ) !default;
 $actionsheet-item-border-width: 1px !default;
 $actionsheet-item-spacing: 12px !default;
 
@@ -58,7 +58,7 @@ $actionsheet-item-focus-bg: null !default;
 $actionsheet-item-focus-text: null !default;
 $actionsheet-item-focus-border: null !default;
 $actionsheet-item-focus-gradient: null !default;
-$actionsheet-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$actionsheet-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
 
 $actionsheet-item-disabled-bg: null !default;
 $actionsheet-item-disabled-text: null !default;

packages/bootstrap/scss/adaptive/_variables.scss

@@ -7,7 +7,7 @@ $adaptive-content-bg: $app-bg !default;
 $adaptive-content-text: $app-text !default;
 
 $adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-text: k-contrast-color( $adaptive-menu-bg ) !default;
 
 $adaptive-menu-clear-text: $primary !default;
 

packages/bootstrap/scss/appbar/_variables.scss

@@ -1,22 +1,22 @@
 // Appbar
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 2 ) !default;
+$appbar-padding-y: k-map-get( $spacing, 2 ) !default;
+$appbar-padding-x: k-map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;
 
 $appbar-font-size: $font-size !default;
 $appbar-line-height: $line-height !default;
 $appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
+$appbar-gap: k-map-get( $spacing, 2 ) !default;
 
 $appbar-light-bg: $light !default;
-$appbar-light-text: contrast-wcag( $light ) !default;
+$appbar-light-text: k-contrast-color( $light ) !default;
 
 $appbar-dark-bg: $dark !default;
-$appbar-dark-text: contrast-wcag( $dark ) !default;
+$appbar-dark-text: k-contrast-color( $dark ) !default;
 
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
-$appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
+$appbar-box-shadow: 0px 1px 1px rgba( black, .16 ) !default;
+$appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .16 ) !default;