diff --git a/packages/bootstrap/docs/customization-appbar.md b/packages/bootstrap/docs/customization-appbar.md index d526a2a1ff1..817a21eb637 100644 --- a/packages/bootstrap/docs/customization-appbar.md +++ b/packages/bootstrap/docs/customization-appbar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-appbar-light-text Color - k-contrast-color( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-appbar-dark-text Color - k-contrast-color( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white diff --git a/packages/bootstrap/docs/customization-breadcrumb.md b/packages/bootstrap/docs/customization-breadcrumb.md index 7cdefd617ac..cfa6671eba9 100644 --- a/packages/bootstrap/docs/customization-breadcrumb.md +++ b/packages/bootstrap/docs/customization-breadcrumb.md @@ -490,7 +490,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-focus-shadow List - inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) inset 0 0 0 3px rgba(33, 37, 41, 0.25) diff --git a/packages/bootstrap/docs/customization-button.md b/packages/bootstrap/docs/customization-button.md index 62e8fb07f90..5a837b1073b 100644 --- a/packages/bootstrap/docs/customization-button.md +++ b/packages/bootstrap/docs/customization-button.md @@ -271,7 +271,7 @@ The following table lists the available variables for customization. Map k-map-merge( $kendo-theme-colors, - ( "base": #e4e7eb ) + ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) ) ) ("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb) @@ -282,7 +282,7 @@ The following table lists the available variables for customization. $kendo-button-bg Color - #e4e7eb + if($kendo-enable-color-system, k-color( base ), #e4e7eb) #e4e7eb @@ -292,7 +292,7 @@ The following table lists the available variables for customization. $kendo-button-text Color - k-contrast-color( $kendo-button-bg, $gray-900 ) + if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) #212529 @@ -332,7 +332,7 @@ The following table lists the available variables for customization. $kendo-button-hover-bg Color - k-color-darken( $kendo-button-bg, 7.5% ) + if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% )) #ced3db @@ -352,7 +352,7 @@ The following table lists the available variables for customization. $kendo-button-hover-border Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -382,7 +382,7 @@ The following table lists the available variables for customization. $kendo-button-active-bg Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -402,7 +402,7 @@ The following table lists the available variables for customization. $kendo-button-active-border Color - k-color-darken( $kendo-button-bg, 12.5% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) #bfc6d0 @@ -432,7 +432,7 @@ The following table lists the available variables for customization. $kendo-button-selected-bg Color - k-color-darken( $kendo-color-primary, 10% ) + if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) #0257d5 @@ -442,7 +442,7 @@ The following table lists the available variables for customization. $kendo-button-selected-text Color - k-contrast-color( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg )) white @@ -452,7 +452,7 @@ The following table lists the available variables for customization. $kendo-button-selected-border Color - k-color-darken( $kendo-color-primary, 12.5% ) + if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) #0252c9 @@ -482,7 +482,7 @@ The following table lists the available variables for customization. $kendo-button-focus-bg Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -502,7 +502,7 @@ The following table lists the available variables for customization. $kendo-button-focus-border Color - k-color-darken( $kendo-button-bg, 12.5% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) #bfc6d0 @@ -522,7 +522,7 @@ The following table lists the available variables for customization. $kendo-button-focus-shadow List - 0 0 0 .25rem rgba( $kendo-button-border, .5 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 )) 0 0 0 0.25rem rgba(228, 231, 235, 0.5) diff --git a/packages/bootstrap/docs/customization-charts.md b/packages/bootstrap/docs/customization-charts.md index f2dd5b9208f..7caef8f01bb 100644 --- a/packages/bootstrap/docs/customization-charts.md +++ b/packages/bootstrap/docs/customization-charts.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-series-a Color - $blue + if($kendo-enable-color-system, k-color( series-a ), $blue) #0d6efd @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-series-b Color - $purple + if($kendo-enable-color-system, k-color( series-b ), $purple) #6f42c1 @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-series-c Color - $teal + if($kendo-enable-color-system, k-color( series-c ), $teal) #20c997 @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-series-d Color - $green + if($kendo-enable-color-system, k-color( series-d ), $green) #198754 @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-series-e Color - $yellow + if($kendo-enable-color-system, k-color( series-e ), $yellow) #ffc107 @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-series-f Color - $red + if($kendo-enable-color-system, k-color( series-f ), $red) #dc3545 @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) diff --git a/packages/bootstrap/docs/customization-checkbox.md b/packages/bootstrap/docs/customization-checkbox.md index 2c4078a83ce..035bb9ba95f 100644 --- a/packages/bootstrap/docs/customization-checkbox.md +++ b/packages/bootstrap/docs/customization-checkbox.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-checkbox-border Color - if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ) + if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) #ced4da @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-text Color - k-contrast-color( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) white @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-border Color - k-try-tint( $kendo-color-primary, 50% ) + if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) #86b7fe @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) diff --git a/packages/bootstrap/docs/customization-chip.md b/packages/bootstrap/docs/customization-chip.md index e4036aec897..62cfae91dec 100644 --- a/packages/bootstrap/docs/customization-chip.md +++ b/packages/bootstrap/docs/customization-chip.md @@ -425,7 +425,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-hover-text Color - k-contrast-color( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) white diff --git a/packages/bootstrap/docs/customization-color-system.md b/packages/bootstrap/docs/customization-color-system.md index 388b45f4b81..22a36854cf2 100644 --- a/packages/bootstrap/docs/customization-color-system.md +++ b/packages/bootstrap/docs/customization-color-system.md @@ -28,23 +28,13 @@ The following table lists the available variables for customization. - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39) -
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
diff --git a/packages/bootstrap/docs/customization-common.md b/packages/bootstrap/docs/customization-common.md index 2e28984c549..d1d4f6b5b6e 100644 --- a/packages/bootstrap/docs/customization-common.md +++ b/packages/bootstrap/docs/customization-common.md @@ -37,6 +37,16 @@ The following table lists the available variables for customization.
Description
Border radius for all components.
+ + $kendo-chip-lg-font-size + Number + $kendo-font-size-md + 1rem + + +
Description
The font size of the large Chip.
+ + $kendo-base-bg Color @@ -158,13 +168,13 @@ The following table lists the available variables for customization. - $kendo-chip-lg-font-size - Number - $kendo-font-size-md - 1rem + $kendo-disabled-text + Color + if( $kendo-is-dark-theme, $gray-600, $gray-500) + #adb5bd -
Description
The font size of the large Chip.
+
Description
Text color of disabled items.
diff --git a/packages/bootstrap/docs/customization-dock-manager.md b/packages/bootstrap/docs/customization-dock-manager.md index 4f318b5d9e1..6001bdd0d48 100644 --- a/packages/bootstrap/docs/customization-dock-manager.md +++ b/packages/bootstrap/docs/customization-dock-manager.md @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(13, 110, 253, 0.16) diff --git a/packages/bootstrap/docs/customization-dropzone.md b/packages/bootstrap/docs/customization-dropzone.md index e56225de5f6..fe2983e3f58 100644 --- a/packages/bootstrap/docs/customization-dropzone.md +++ b/packages/bootstrap/docs/customization-dropzone.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-dropzone-bg Color - if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ) + if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) #f8f9fa @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 8 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) #afb1b2 diff --git a/packages/bootstrap/docs/customization-editor.md b/packages/bootstrap/docs/customization-editor.md index d7c4be5ff8a..59f24a1a0ac 100644 --- a/packages/bootstrap/docs/customization-editor.md +++ b/packages/bootstrap/docs/customization-editor.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg Color - k-color-mix( $kendo-color-primary, #ffffff, 20% ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) #cfe2ff diff --git a/packages/bootstrap/docs/customization-filemanager.md b/packages/bootstrap/docs/customization-filemanager.md index bb17cc69ce3..8ed32fb08f7 100644 --- a/packages/bootstrap/docs/customization-filemanager.md +++ b/packages/bootstrap/docs/customization-filemanager.md @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-file-manager-listview-item-icon-text Color - k-try-tint( $kendo-file-manager-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) #686b6d @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-file-manager-preview-icon-text Color - k-try-tint( $kendo-file-manager-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) #686b6d diff --git a/packages/bootstrap/docs/customization-filter.md b/packages/bootstrap/docs/customization-filter.md index 5e9018fa1f9..1340ba0c187 100644 --- a/packages/bootstrap/docs/customization-filter.md +++ b/packages/bootstrap/docs/customization-filter.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-filter-toolbar-focus-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) diff --git a/packages/bootstrap/docs/customization-grid.md b/packages/bootstrap/docs/customization-grid.md index cbea1e13cc7..ebc86436899 100644 --- a/packages/bootstrap/docs/customization-grid.md +++ b/packages/bootstrap/docs/customization-grid.md @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) diff --git a/packages/bootstrap/docs/customization-input.md b/packages/bootstrap/docs/customization-input.md index e61fbf0b6a6..11e7a5e80a3 100644 --- a/packages/bootstrap/docs/customization-input.md +++ b/packages/bootstrap/docs/customization-input.md @@ -266,7 +266,7 @@ The following table lists the available variables for customization. $kendo-input-bg Color $input-bg - #ffffff + #fff
Description
The background color of the Input components.
@@ -346,7 +346,7 @@ The following table lists the available variables for customization. $kendo-input-focus-bg Color $input-focus-bg - #ffffff + #fff
Description
The background color of the focused Input components.
@@ -475,7 +475,7 @@ The following table lists the available variables for customization. $kendo-input-outline-border Color - rgba( $kendo-base-text, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 )) rgba(33, 37, 41, 0.5) diff --git a/packages/bootstrap/docs/customization-list.md b/packages/bootstrap/docs/customization-list.md index a91952f25fa..1edb223b3ce 100644 --- a/packages/bootstrap/docs/customization-list.md +++ b/packages/bootstrap/docs/customization-list.md @@ -409,7 +409,7 @@ The following table lists the available variables for customization. $kendo-list-item-focus-shadow List - inset 0 0 0 3px rgba( $kendo-list-text, .15 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 )) inset 0 0 0 3px rgba(33, 37, 41, 0.15) diff --git a/packages/bootstrap/docs/customization-listview.md b/packages/bootstrap/docs/customization-listview.md index 252c6c8d306..5e732e6b8bf 100644 --- a/packages/bootstrap/docs/customization-listview.md +++ b/packages/bootstrap/docs/customization-listview.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(13, 110, 253, 0.25) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-listview-item-focus-shadow List - inset 0 0 0 3px rgba( $kendo-listview-text, .15 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) inset 0 0 0 3px rgba(33, 37, 41, 0.15) diff --git a/packages/bootstrap/docs/customization-pager.md b/packages/bootstrap/docs/customization-pager.md index 1d5f63efae1..31a3a9bee95 100644 --- a/packages/bootstrap/docs/customization-pager.md +++ b/packages/bootstrap/docs/customization-pager.md @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-pager-item-focus-shadow List - 0 0 0 3px rgba($kendo-color-primary, .25) + 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25)) 0 0 0 3px rgba(13, 110, 253, 0.25) diff --git a/packages/bootstrap/docs/customization-picker.md b/packages/bootstrap/docs/customization-picker.md index d19dee7195c..5ffa40df269 100644 --- a/packages/bootstrap/docs/customization-picker.md +++ b/packages/bootstrap/docs/customization-picker.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 )) rgba(33, 37, 41, 0.5) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-text Color - k-contrast-color( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) white @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .08 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 )) rgba(33, 37, 41, 0.08) diff --git a/packages/bootstrap/docs/customization-skeleton.md b/packages/bootstrap/docs/customization-skeleton.md index 338578dce78..e51a5d82ba3 100644 --- a/packages/bootstrap/docs/customization-skeleton.md +++ b/packages/bootstrap/docs/customization-skeleton.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(33, 37, 41, 0.2) diff --git a/packages/bootstrap/docs/customization-switch.md b/packages/bootstrap/docs/customization-switch.md index 7ba890e87cb..e8600731c9e 100644 --- a/packages/bootstrap/docs/customization-switch.md +++ b/packages/bootstrap/docs/customization-switch.md @@ -194,7 +194,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-border Color - k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ) + if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) #86b7fe @@ -214,7 +214,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-ring List - .25rem solid rgba( $kendo-color-primary, .25 ) + .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0.25rem solid rgba(13, 110, 253, 0.25) @@ -224,7 +224,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-disabled-bg Color - if( $kendo-is-dark-theme, $gray-800, $gray-200 ) + if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 )) #e9ecef @@ -464,7 +464,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-ring List - .25rem solid rgba( $kendo-switch-on-track-border, .25 ) + .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) 0.25rem solid rgba(13, 110, 253, 0.25) @@ -474,7 +474,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-disabled-bg Color - k-try-tint( $kendo-switch-on-track-bg, 50% ) + if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% )) #86b7fe @@ -514,7 +514,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-bg Color - k-contrast-color( $kendo-switch-on-track-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg )) white diff --git a/packages/bootstrap/docs/customization-table.md b/packages/bootstrap/docs/customization-table.md index c6373376d21..0757cd24017 100644 --- a/packages/bootstrap/docs/customization-table.md +++ b/packages/bootstrap/docs/customization-table.md @@ -259,7 +259,7 @@ The following table lists the available variables for customization. $kendo-table-alt-row-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-table-hover-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .08 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 )) rgba(0, 0, 0, 0.08) @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(13, 110, 253, 0.25) diff --git a/packages/bootstrap/docs/customization-toolbar.md b/packages/bootstrap/docs/customization-toolbar.md index b1bdf282e31..be3c0517c50 100644 --- a/packages/bootstrap/docs/customization-toolbar.md +++ b/packages/bootstrap/docs/customization-toolbar.md @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-toolbar-item-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) diff --git a/packages/bootstrap/docs/customization-tooltip.md b/packages/bootstrap/docs/customization-tooltip.md index dd59b2db1a9..d3d4b3963e8 100644 --- a/packages/bootstrap/docs/customization-tooltip.md +++ b/packages/bootstrap/docs/customization-tooltip.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-tooltip-bg Color - if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) + if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) #000000 @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-tooltip-text Color - k-contrast-color( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) white diff --git a/packages/bootstrap/docs/customization-treeview.md b/packages/bootstrap/docs/customization-treeview.md index 60c40ee70f7..0f67515f871 100644 --- a/packages/bootstrap/docs/customization-treeview.md +++ b/packages/bootstrap/docs/customization-treeview.md @@ -435,7 +435,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-focus-shadow List - inset 0 0 0 2px rgba( $kendo-treeview-text, .15 ) + inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 )) inset 0 0 0 2px rgba(33, 37, 41, 0.15) diff --git a/packages/bootstrap/docs/customization-upload.md b/packages/bootstrap/docs/customization-upload.md index a67a0d428b9..72166088563 100644 --- a/packages/bootstrap/docs/customization-upload.md +++ b/packages/bootstrap/docs/customization-upload.md @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-hover-bg Color - k-try-shade( $kendo-upload-dropzone-bg, .2 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 )) #f4f5f6 diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index d08f51fca73..c26cf565425 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -41,6 +41,16 @@ The following table lists the available variables for customizing the Bootstrap
Description
Border radius for all components.
+ + $kendo-chip-lg-font-size + Number + $kendo-font-size-md + 1rem + + +
Description
The font size of the large Chip.
+ + $kendo-base-bg Color @@ -162,13 +172,13 @@ The following table lists the available variables for customizing the Bootstrap - $kendo-chip-lg-font-size - Number - $kendo-font-size-md - 1rem + $kendo-disabled-text + Color + if( $kendo-is-dark-theme, $gray-600, $gray-500) + #adb5bd -
Description
The font size of the large Chip.
+
Description
Text color of disabled items.
@@ -304,7 +314,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-appbar-light-text Color - k-contrast-color( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black @@ -324,7 +334,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-appbar-dark-text Color - k-contrast-color( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white @@ -1400,7 +1410,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-breadcrumb-link-focus-shadow List - inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) inset 0 0 0 3px rgba(33, 37, 41, 0.25) @@ -1836,7 +1846,7 @@ The following table lists the available variables for customizing the Bootstrap Map k-map-merge( $kendo-theme-colors, - ( "base": #e4e7eb ) + ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) ) ) ("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529, "base": #e4e7eb) @@ -1847,7 +1857,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-bg Color - #e4e7eb + if($kendo-enable-color-system, k-color( base ), #e4e7eb) #e4e7eb @@ -1857,7 +1867,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-text Color - k-contrast-color( $kendo-button-bg, $gray-900 ) + if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) #212529 @@ -1897,7 +1907,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-hover-bg Color - k-color-darken( $kendo-button-bg, 7.5% ) + if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 7.5% )) #ced3db @@ -1917,7 +1927,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-hover-border Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -1947,7 +1957,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-active-bg Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -1967,7 +1977,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-active-border Color - k-color-darken( $kendo-button-bg, 12.5% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) #bfc6d0 @@ -1997,7 +2007,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-selected-bg Color - k-color-darken( $kendo-color-primary, 10% ) + if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) #0257d5 @@ -2007,7 +2017,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-selected-text Color - k-contrast-color( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-button-selected-bg )) white @@ -2017,7 +2027,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-selected-border Color - k-color-darken( $kendo-color-primary, 12.5% ) + if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) #0252c9 @@ -2047,7 +2057,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-focus-bg Color - k-color-darken( $kendo-button-bg, 10% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) #c7cdd5 @@ -2067,7 +2077,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-focus-border Color - k-color-darken( $kendo-button-bg, 12.5% ) + if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) #bfc6d0 @@ -2087,7 +2097,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-button-focus-shadow List - 0 0 0 .25rem rgba( $kendo-button-border, .5 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 )) 0 0 0 0.25rem rgba(228, 231, 235, 0.5) @@ -2957,7 +2967,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-a Color - $blue + if($kendo-enable-color-system, k-color( series-a ), $blue) #0d6efd @@ -2967,7 +2977,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-b Color - $purple + if($kendo-enable-color-system, k-color( series-b ), $purple) #6f42c1 @@ -2977,7 +2987,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-c Color - $teal + if($kendo-enable-color-system, k-color( series-c ), $teal) #20c997 @@ -2987,7 +2997,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-d Color - $green + if($kendo-enable-color-system, k-color( series-d ), $green) #198754 @@ -2997,7 +3007,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-e Color - $yellow + if($kendo-enable-color-system, k-color( series-e ), $yellow) #ffc107 @@ -3007,7 +3017,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-series-f Color - $red + if($kendo-enable-color-system, k-color( series-f ), $red) #dc3545 @@ -3027,7 +3037,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -3037,7 +3047,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) @@ -3187,7 +3197,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-checkbox-border Color - if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 ) + if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) #ced4da @@ -3237,7 +3247,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-checkbox-checked-text Color - k-contrast-color( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) white @@ -3287,7 +3297,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-checkbox-focus-border Color - k-try-tint( $kendo-color-primary, 50% ) + if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) #86b7fe @@ -3297,7 +3307,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-checkbox-focus-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) @@ -3952,7 +3962,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-chip-outline-hover-text Color - k-contrast-color( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) white @@ -4464,23 +4474,13 @@ The following table lists the available variables for customizing the Bootstrap - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #212529, subtle: #606970, surface: #f8f9fa, surface-alt: #ffffff, border: #dee2e6, border-alt: #ced4da, base-subtle: #e9ecef, base-subtle-hover: #dee2e6, base-subtle-active: #ced4da, base: #dee2e6, base-hover: #ced4da, base-active: #bdc4cb, base-emphasis: #adb5bd, base-on-subtle: #212529, on-base: #212529, base-on-surface: #212529, primary-subtle: #cfe2ff, primary-subtle-hover: #b6d4fe, primary-subtle-active: #9ec5fe, primary: #0d6efd, primary-hover: #0b5ed7, primary-active: #0a58ca, primary-emphasis: #6ea8fe, primary-on-subtle: #052c65, on-primary: #ffffff, primary-on-surface: #0d6efd, secondary-subtle: #dee2e6, secondary-subtle-hover: #ced4da, secondary-subtle-active: #bdc4cb, secondary: #6c757d, secondary-hover: #606970, secondary-active: #555c64, secondary-emphasis: #8d959d, secondary-on-subtle: #212529, on-secondary: #ffffff, secondary-on-surface: #212529, tertiary-subtle: #e2d9f3, tertiary-subtle-hover: #d3c5ec, tertiary-subtle-active: #c5b3e6, tertiary: #6f42c1, tertiary-hover: #59359a, tertiary-active: #4e2f89, tertiary-emphasis: #a98eda, tertiary-on-subtle: #21143b, on-tertiary: #ffffff, tertiary-on-surface: #6f42c1, info-subtle: #cff4fc, info-subtle-hover: #aaecfa, info-subtle-active: #86e5f8, info: #0dcaf0, info-hover: #0aa2c0, info-active: #098da8, info-emphasis: #3dd5f3, info-on-subtle: #04414d, on-info: #ffffff, info-on-surface: #0dcaf0, success-subtle: #d1e7dd, success-subtle-hover: #badbcc, success-subtle-active: #8cc3aa, success: #146c43, success-hover: #125f3b, success-active: #0f5132, success-emphasis: #479f76, success-on-subtle: #08291a, on-success: #ffffff, success-on-surface: #0f5132, warning-subtle: #ffecb5, warning-subtle-hover: #ffe69c, warning-subtle-active: #ffe083, warning: #ffc107, warning-hover: #cc9a06, warning-active: #b38705, warning-emphasis: #ffcd39, warning-on-subtle: #523e02, on-warning: #000000, warning-on-surface: #ffc107, error-subtle: #f8d7da, error-subtle-hover: #f5c2c7, error-subtle-active: #f1aeb5, error: #dc3545, error-hover: #b02a37, error-active: #9a2530, error-emphasis: #e35d6a, error-on-subtle: #421015, on-error: #ffffff, error-on-surface: #dc3545, light-subtle: #f8f9fa, light-subtle-hover: #e9ecef, light-subtle-active: #dee2e6, light: #f8f9fa, light-hover: #e9ecef, light-active: #dee2e6, light-emphasis: #bdc4cb, light-on-subtle: #343a40, on-light: #000000, light-on-surface: #ced4da, dark-subtle: #6c757d, dark-subtle-hover: #606970, dark-subtle-active: #555c64, dark: #212529, dark-hover: #2c3035, dark-active: #343a40, dark-emphasis: #343a40, dark-on-subtle: #ffffff, on-dark: #ffffff, dark-on-surface: #121417, inverse-subtle: #6c757d, inverse-subtle-hover: #606970, inverse-subtle-active: #555c64, inverse: #212529, inverse-hover: #2c3035, inverse-active: #343a40, inverse-emphasis: #343a40, inverse-on-subtle: #ffffff, on-inverse: #ffffff, inverse-on-surface: #121417, series-a: #0d6efd, series-a-bold: #0a53be, series-a-bolder: #052c65, series-a-subtle: #86b6fe, series-a-subtler: #4992fd, series-b: #6f42c1, series-b-bold: #4e2f89, series-b-bolder: #36215f, series-b-subtle: #b9a3e1, series-b-subtler: #8c68cd, series-c: #20c997, series-c-bold: #178c69, series-c-bolder: #10654c, series-c-subtle: #a6e9d5, series-c-subtler: #4dd4ac, series-d: #198754, series-d-bold: #125f3b, series-d-bolder: #0d442a, series-d-subtle: #8cc3aa, series-d-subtler: #479f76, series-e: #dc3545, series-e-bold: #9a2530, series-e-bolder: #6e1b23, series-e-subtle: #f1aeb5, series-e-subtler: #e35d6a, series-f: #ffc107, series-f-bold: #b38705, series-f-bolder: #806104, series-f-subtle: #ffe083, series-f-subtler: #ffcd39) -
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
@@ -5480,7 +5480,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(13, 110, 253, 0.16) @@ -5630,7 +5630,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-dropzone-bg Color - if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 ) + if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $gray-100, $gray-900 )) #f8f9fa @@ -5670,7 +5670,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 8 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) #afb1b2 @@ -5850,7 +5850,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-editor-highlighted-bg Color - k-color-mix( $kendo-color-primary, #ffffff, 20% ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) #cfe2ff @@ -6590,7 +6590,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-file-manager-listview-item-icon-text Color - k-try-tint( $kendo-file-manager-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) #686b6d @@ -6770,7 +6770,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-file-manager-preview-icon-text Color - k-try-tint( $kendo-file-manager-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-file-manager-text, 4 )) #686b6d @@ -6880,7 +6880,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-filter-toolbar-focus-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) @@ -8443,7 +8443,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) @@ -8729,7 +8729,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-input-bg Color $input-bg - #ffffff + #fff
Description
The background color of the Input components.
@@ -8809,7 +8809,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-input-focus-bg Color $input-focus-bg - #ffffff + #fff
Description
The background color of the focused Input components.
@@ -8938,7 +8938,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-input-outline-border Color - rgba( $kendo-base-text, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 )) rgba(33, 37, 41, 0.5) @@ -9717,7 +9717,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-list-item-focus-shadow List - inset 0 0 0 3px rgba( $kendo-list-text, .15 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 )) inset 0 0 0 3px rgba(33, 37, 41, 0.15) @@ -10117,7 +10117,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(13, 110, 253, 0.25) @@ -10167,7 +10167,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-listview-item-focus-shadow List - inset 0 0 0 3px rgba( $kendo-listview-text, .15 ) + inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) inset 0 0 0 3px rgba(33, 37, 41, 0.15) @@ -11487,7 +11487,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-pager-item-focus-shadow List - 0 0 0 3px rgba($kendo-color-primary, .25) + 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25)) 0 0 0 3px rgba(13, 110, 253, 0.25) @@ -12169,7 +12169,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 )) rgba(33, 37, 41, 0.5) @@ -12189,7 +12189,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-picker-outline-hover-text Color - k-contrast-color( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) white @@ -12309,7 +12309,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .08 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 )) rgba(33, 37, 41, 0.08) @@ -14305,7 +14305,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(33, 37, 41, 0.2) @@ -14619,7 +14619,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-off-track-focus-border Color - k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary ) + if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) #86b7fe @@ -14639,7 +14639,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-off-track-focus-ring List - .25rem solid rgba( $kendo-color-primary, .25 ) + .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0.25rem solid rgba(13, 110, 253, 0.25) @@ -14649,7 +14649,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-off-track-disabled-bg Color - if( $kendo-is-dark-theme, $gray-800, $gray-200 ) + if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $gray-800, $gray-200 )) #e9ecef @@ -14889,7 +14889,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-on-track-focus-ring List - .25rem solid rgba( $kendo-switch-on-track-border, .25 ) + .25rem solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) 0.25rem solid rgba(13, 110, 253, 0.25) @@ -14899,7 +14899,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-on-track-disabled-bg Color - k-try-tint( $kendo-switch-on-track-bg, 50% ) + if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% )) #86b7fe @@ -14939,7 +14939,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-switch-on-thumb-bg Color - k-contrast-color( $kendo-switch-on-track-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-switch-on-track-bg )) white @@ -15268,7 +15268,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-table-alt-row-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -15298,7 +15298,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-table-hover-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .08 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), rgba( k-contrast-color( $kendo-table-bg ), .08 )) rgba(0, 0, 0, 0.08) @@ -15368,7 +15368,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-table-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(13, 110, 253, 0.25) @@ -16068,7 +16068,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-toolbar-item-shadow List - 0 0 0 .25rem rgba( $kendo-color-primary, .25 ) + 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) 0 0 0 0.25rem rgba(13, 110, 253, 0.25) @@ -16234,7 +16234,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-tooltip-bg Color - if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) + if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) #000000 @@ -16244,7 +16244,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-tooltip-text Color - k-contrast-color( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) white @@ -16719,7 +16719,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-treeview-item-focus-shadow List - inset 0 0 0 2px rgba( $kendo-treeview-text, .15 ) + inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-treeview-text, .15 )) inset 0 0 0 2px rgba(33, 37, 41, 0.15) @@ -17049,7 +17049,7 @@ The following table lists the available variables for customizing the Bootstrap $kendo-upload-dropzone-hover-bg Color - k-try-shade( $kendo-upload-dropzone-bg, .2 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-upload-dropzone-bg, .2 )) #f4f5f6 diff --git a/packages/classic/docs/customization-appbar.md b/packages/classic/docs/customization-appbar.md index db4241d6748..ef439b1c4f2 100644 --- a/packages/classic/docs/customization-appbar.md +++ b/packages/classic/docs/customization-appbar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-appbar-light-text Color - k-contrast-color( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-appbar-dark-text Color - k-contrast-color( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white diff --git a/packages/classic/docs/customization-button.md b/packages/classic/docs/customization-button.md index 768d4ea578d..2861f8ad833 100644 --- a/packages/classic/docs/customization-button.md +++ b/packages/classic/docs/customization-button.md @@ -302,7 +302,7 @@ The following table lists the available variables for customization. $kendo-button-border Color - k-try-shade( $kendo-button-bg, 2 ) + if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 )) #cacaca @@ -332,7 +332,7 @@ The following table lists the available variables for customization. $kendo-button-hover-bg Color - k-try-shade( $kendo-button-bg, 1 ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 )) #dddddd @@ -352,7 +352,7 @@ The following table lists the available variables for customization. $kendo-button-hover-border Color - k-try-shade( $kendo-button-bg, 3 ) + if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 )) #b6b6b6 @@ -382,7 +382,7 @@ The following table lists the available variables for customization. $kendo-button-active-bg Color - k-try-shade( $kendo-button-bg, 2 ) + if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 )) #cacaca @@ -402,7 +402,7 @@ The following table lists the available variables for customization. $kendo-button-active-border Color - k-try-shade( $kendo-button-bg, 4 ) + if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 )) #a3a3a3 @@ -442,7 +442,7 @@ The following table lists the available variables for customization. $kendo-button-selected-text Color - k-contrast-legacy( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) white @@ -522,7 +522,7 @@ The following table lists the available variables for customization. $kendo-button-focus-shadow List - 0 0 4px 0 rgba( $kendo-button-border, .75 ) + 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 )) 0 0 4px 0 rgba(202, 202, 202, 0.75) diff --git a/packages/classic/docs/customization-charts.md b/packages/classic/docs/customization-charts.md index 4b59f385ac3..7e9df3aa5ec 100644 --- a/packages/classic/docs/customization-charts.md +++ b/packages/classic/docs/customization-charts.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-series-a Color - #ff6358 + if($kendo-enable-color-system, k-color( series-a ), #ff6358) #ff6358 @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-series-b Color - #ffd246 + if($kendo-enable-color-system, k-color( series-b ), #ffd246) #ffd246 @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-series-c Color - #78d237 + if($kendo-enable-color-system, k-color( series-c ), #78d237) #78d237 @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-series-d Color - #28b4c8 + if($kendo-enable-color-system, k-color( series-d ), #28b4c8) #28b4c8 @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-series-e Color - #2d73f5 + if($kendo-enable-color-system, k-color( series-e ), #2d73f5) #2d73f5 @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-series-f Color - #aa46be + if($kendo-enable-color-system, k-color( series-f ), #aa46be) #aa46be @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) diff --git a/packages/classic/docs/customization-checkbox.md b/packages/classic/docs/customization-checkbox.md index ac96f489fb2..6ed7f95e207 100644 --- a/packages/classic/docs/customization-checkbox.md +++ b/packages/classic/docs/customization-checkbox.md @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-text Color - k-contrast-legacy( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) white @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px rgba( $kendo-color-primary, .3 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) 0 0 0 2px rgba(243, 88, 0, 0.3) diff --git a/packages/classic/docs/customization-chip.md b/packages/classic/docs/customization-chip.md index 8b28b976a23..1a5675c8517 100644 --- a/packages/classic/docs/customization-chip.md +++ b/packages/classic/docs/customization-chip.md @@ -305,7 +305,7 @@ The following table lists the available variables for customization. $kendo-chip-solid-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) 0 0 0 2px rgba(0, 0, 0, 0.16) @@ -415,7 +415,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) 0 0 0 2px rgba(0, 0, 0, 0.16) @@ -435,7 +435,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-hover-text Color - k-contrast-legacy( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) white diff --git a/packages/classic/docs/customization-color-system.md b/packages/classic/docs/customization-color-system.md index b63c805702b..b671caf5657 100644 --- a/packages/classic/docs/customization-color-system.md +++ b/packages/classic/docs/customization-color-system.md @@ -28,23 +28,13 @@ The following table lists the available variables for customization. - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce) -
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
diff --git a/packages/classic/docs/customization-common.md b/packages/classic/docs/customization-common.md index c23218fcad4..e93f967d3e9 100644 --- a/packages/classic/docs/customization-common.md +++ b/packages/classic/docs/customization-common.md @@ -28,6 +28,56 @@ The following table lists the available variables for customization. + $kendo-body-bg + Color + $kendo-color-white + #ffffff + + +
Description
Background color of the body.
+ + + + $kendo-body-text + Color + #272727 + #272727 + + +
Description
Text color of the body.
+ + + + $kendo-subtle-text + Color + #646464 + #646464 + + +
Description
Subtle text color.
+ + + + $kendo-link-text + Color + $kendo-color-primary + #f35800 + + +
Description
Text color of the links.
+ + + + $kendo-link-hover-text + Color + $kendo-color-primary-darker + #cc4a00 + + +
Description
Text color of the links on hover.
+ + + $kendo-border-radius Number k-map-get( $kendo-spacing, 1 ) @@ -157,6 +207,56 @@ The following table lists the available variables for customization.
Description
The gradient background of selected items.
+ + $kendo-selected-hover-bg + Color + k-try-shade( $kendo-selected-bg, 1 ) + #e05100 + + +
Description
The background of selected and hovered items.
+ + + + $kendo-selected-hover-text + Color + k-contrast-legacy( $kendo-selected-hover-bg ) + white + + +
Description
The text color of selected and hovered items.
+ + + + $kendo-selected-hover-border + Color + $kendo-selected-border + #cc4a00 + + +
Description
The border of selected and hovered items.
+ + + + $kendo-selected-hover-gradient + List + $kendo-selected-gradient + rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) + + +
Description
The gradient of selected and hovered items.
+ + + + $kendo-disabled-text + Color + #8d8d8d + #8d8d8d + + +
Description
Text color of disabled items.
+ + diff --git a/packages/classic/docs/customization-component.md b/packages/classic/docs/customization-component.md index be4e10565ca..0c0c19a3b12 100644 --- a/packages/classic/docs/customization-component.md +++ b/packages/classic/docs/customization-component.md @@ -57,6 +57,126 @@ The following table lists the available variables for customization.
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+ + $kendo-component-header-bg + Color + $kendo-base-bg + #f0f0f0 + + +
Description
Background color of the component header.
+ + + + $kendo-component-header-text + Color + $kendo-base-text + #272727 + + +
Description
Text color of the component header.
+ + + + $kendo-component-header-border + Color + $kendo-base-border + #cacaca + + +
Description
Border color of the component header.
+ + + + $kendo-component-header-gradient + List + $kendo-base-gradient + rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) + + +
Description
Gradient of the component header.
+ + + + $kendo-invalid-bg + Null + null + null + + +
Description
Background color of the invalid items.
+ + + + $kendo-invalid-text + Color + $kendo-color-error + #d92800 + + +
Description
Text color of the invalid items.
+ + + + $kendo-invalid-border + Color + $kendo-color-error + #d92800 + + +
Description
Border color of the invalid items.
+ + + + $kendo-invalid-shadow + Null + null + null + + +
Description
Shadow of the invalid items.
+ + + + $kendo-valid-bg + Null + null + null + + +
Description
Background color of the valid items.
+ + + + $kendo-valid-text + Color + $kendo-color-success + #3ea44e + + +
Description
Text color of the valid items.
+ + + + $kendo-valid-border + Color + $kendo-color-success + #3ea44e + + +
Description
Border color of the valid items.
+ + + + $kendo-valid-shadow + Null + null + null + + +
Description
Shadow of the valid items.
+ + diff --git a/packages/classic/docs/customization-dock-manager.md b/packages/classic/docs/customization-dock-manager.md index 4e1a4d1313b..66fc7082cae 100644 --- a/packages/classic/docs/customization-dock-manager.md +++ b/packages/classic/docs/customization-dock-manager.md @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(243, 88, 0, 0.16) diff --git a/packages/classic/docs/customization-dropzone.md b/packages/classic/docs/customization-dropzone.md index 55bdcff0b7a..73ca318da6d 100644 --- a/packages/classic/docs/customization-dropzone.md +++ b/packages/classic/docs/customization-dropzone.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) #6c6c6c diff --git a/packages/classic/docs/customization-editor.md b/packages/classic/docs/customization-editor.md index 7dd0c0440e5..19f070469d6 100644 --- a/packages/classic/docs/customization-editor.md +++ b/packages/classic/docs/customization-editor.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg Color - k-color-mix( $kendo-color-primary, #ffffff, 20% ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) #fddecc diff --git a/packages/classic/docs/customization-expander.md b/packages/classic/docs/customization-expander.md index a20ef44d20a..ec89dfe41aa 100644 --- a/packages/classic/docs/customization-expander.md +++ b/packages/classic/docs/customization-expander.md @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-expander-header-hover-bg Color - k-color-shade( $kendo-expander-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 )) #ebebeb diff --git a/packages/classic/docs/customization-filemanager.md b/packages/classic/docs/customization-filemanager.md index f394bc6e43c..6f5bed843ea 100644 --- a/packages/classic/docs/customization-filemanager.md +++ b/packages/classic/docs/customization-filemanager.md @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #6c6c6c @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #6c6c6c diff --git a/packages/classic/docs/customization-form.md b/packages/classic/docs/customization-form.md index 152448e4c11..ed3900b4ad3 100644 --- a/packages/classic/docs/customization-form.md +++ b/packages/classic/docs/customization-form.md @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-fieldset-legend-text Color - k-try-shade( $kendo-body-text, 2 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) #212121 diff --git a/packages/classic/docs/customization-grid.md b/packages/classic/docs/customization-grid.md index 01182e93765..48868a1d278 100644 --- a/packages/classic/docs/customization-grid.md +++ b/packages/classic/docs/customization-grid.md @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) diff --git a/packages/classic/docs/customization-input.md b/packages/classic/docs/customization-input.md index 098beda0b66..ba35dfc70a8 100644 --- a/packages/classic/docs/customization-input.md +++ b/packages/classic/docs/customization-input.md @@ -475,7 +475,7 @@ The following table lists the available variables for customization. $kendo-input-outline-border Color - rgba( $kendo-button-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5)) rgba(39, 39, 39, 0.5) @@ -505,7 +505,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-border Color - rgba( $kendo-button-text, .8) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8)) rgba(39, 39, 39, 0.8) diff --git a/packages/classic/docs/customization-listview.md b/packages/classic/docs/customization-listview.md index 413ea7fc03b..63b6b62ffca 100644 --- a/packages/classic/docs/customization-listview.md +++ b/packages/classic/docs/customization-listview.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(243, 88, 0, 0.25) diff --git a/packages/classic/docs/customization-picker.md b/packages/classic/docs/customization-picker.md index 0cea224141e..db9af1c0da1 100644 --- a/packages/classic/docs/customization-picker.md +++ b/packages/classic/docs/customization-picker.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) rgba(39, 39, 39, 0.5) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-text Color - k-contrast-color( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) white @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 )) rgba(39, 39, 39, 0.04) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-border Color - rgba( $kendo-button-border, .16 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) rgba(202, 202, 202, 0.16) diff --git a/packages/classic/docs/customization-progressbar.md b/packages/classic/docs/customization-progressbar.md index 560d348913d..86926ccdf85 100644 --- a/packages/classic/docs/customization-progressbar.md +++ b/packages/classic/docs/customization-progressbar.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-progressbar-bg Color - k-try-shade( $kendo-component-bg, 1 ) + if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) #ebebeb @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-text Color - k-contrast-legacy( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) white @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-border Color - k-try-shade( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) #e05100 diff --git a/packages/classic/docs/customization-scrollview.md b/packages/classic/docs/customization-scrollview.md index 610dffac68f..40ab51712bb 100644 --- a/packages/classic/docs/customization-scrollview.md +++ b/packages/classic/docs/customization-scrollview.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-border Color - k-try-shade( $kendo-color-primary, 2 ) + if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) #cc4a00 diff --git a/packages/classic/docs/customization-skeleton.md b/packages/classic/docs/customization-skeleton.md index 9c761d58697..081cfea58be 100644 --- a/packages/classic/docs/customization-skeleton.md +++ b/packages/classic/docs/customization-skeleton.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(64, 64, 64, 0.2) diff --git a/packages/classic/docs/customization-switch.md b/packages/classic/docs/customization-switch.md index b82659a1c2c..b077702e483 100644 --- a/packages/classic/docs/customization-switch.md +++ b/packages/classic/docs/customization-switch.md @@ -214,7 +214,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-ring List - 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) + 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) 0 0 3px 1px rgba(0, 0, 0, 0.25) @@ -264,7 +264,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-bg Color - k-try-shade( $kendo-switch-off-track-bg ) + if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg )) #ebebeb @@ -304,7 +304,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-hover-bg Color - k-try-shade( $kendo-switch-off-thumb-bg ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg )) #d8d8d8 @@ -464,7 +464,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-ring List - 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) + 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) 0 0 3px 1px rgba(0, 0, 0, 0.25) @@ -534,7 +534,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-border Color - k-try-shade( $kendo-switch-on-thumb-bg ) + if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg )) #e05100 @@ -554,7 +554,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-hover-bg Color - k-try-shade( $kendo-switch-on-thumb-bg ) + if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg )) #e05100 @@ -574,7 +574,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-hover-border Color - k-try-shade( $kendo-switch-on-thumb-hover-bg ) + if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg )) #ce4b00 diff --git a/packages/classic/docs/customization-table.md b/packages/classic/docs/customization-table.md index 81f1bc3fbda..a1c18c9b398 100644 --- a/packages/classic/docs/customization-table.md +++ b/packages/classic/docs/customization-table.md @@ -259,7 +259,7 @@ The following table lists the available variables for customization. $kendo-table-alt-row-bg Color - k-try-shade( $kendo-table-bg, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 )) whitesmoke @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-table-hover-bg Color - k-try-shade( $kendo-table-bg, 1 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 )) #ebebeb @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(243, 88, 0, 0.25) diff --git a/packages/classic/docs/customization-tooltip.md b/packages/classic/docs/customization-tooltip.md index 1348cca9690..49ca7b67d4d 100644 --- a/packages/classic/docs/customization-tooltip.md +++ b/packages/classic/docs/customization-tooltip.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-tooltip-bg Color - rgba( k-contrast-color( $kendo-body-bg ), .75 ) + if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 )) rgba(0, 0, 0, 0.75) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-tooltip-text Color - k-contrast-color( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) white diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index 9a09af9249c..d4117370066 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -32,6 +32,56 @@ The following table lists the available variables for customizing the Classic th + $kendo-body-bg + Color + $kendo-color-white + #ffffff + + +
Description
Background color of the body.
+ + + + $kendo-body-text + Color + #272727 + #272727 + + +
Description
Text color of the body.
+ + + + $kendo-subtle-text + Color + #646464 + #646464 + + +
Description
Subtle text color.
+ + + + $kendo-link-text + Color + $kendo-color-primary + #f35800 + + +
Description
Text color of the links.
+ + + + $kendo-link-hover-text + Color + $kendo-color-primary-darker + #cc4a00 + + +
Description
Text color of the links on hover.
+ + + $kendo-border-radius Number k-map-get( $kendo-spacing, 1 ) @@ -161,6 +211,56 @@ The following table lists the available variables for customizing the Classic th
Description
The gradient background of selected items.
+ + $kendo-selected-hover-bg + Color + k-try-shade( $kendo-selected-bg, 1 ) + #e05100 + + +
Description
The background of selected and hovered items.
+ + + + $kendo-selected-hover-text + Color + k-contrast-legacy( $kendo-selected-hover-bg ) + white + + +
Description
The text color of selected and hovered items.
+ + + + $kendo-selected-hover-border + Color + $kendo-selected-border + #cc4a00 + + +
Description
The border of selected and hovered items.
+ + + + $kendo-selected-hover-gradient + List + $kendo-selected-gradient + rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) + + +
Description
The gradient of selected and hovered items.
+ + + + $kendo-disabled-text + Color + #8d8d8d + #8d8d8d + + +
Description
Text color of disabled items.
+ + @@ -294,7 +394,7 @@ The following table lists the available variables for customizing the Classic th $kendo-appbar-light-text Color - k-contrast-color( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black @@ -314,7 +414,7 @@ The following table lists the available variables for customizing the Classic th $kendo-appbar-dark-text Color - k-contrast-color( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white @@ -1857,7 +1957,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-border Color - k-try-shade( $kendo-button-bg, 2 ) + if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-button-bg, 2 )) #cacaca @@ -1887,7 +1987,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-hover-bg Color - k-try-shade( $kendo-button-bg, 1 ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, 1 )) #dddddd @@ -1907,7 +2007,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-hover-border Color - k-try-shade( $kendo-button-bg, 3 ) + if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 3 )) #b6b6b6 @@ -1937,7 +2037,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-active-bg Color - k-try-shade( $kendo-button-bg, 2 ) + if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 2 )) #cacaca @@ -1957,7 +2057,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-active-border Color - k-try-shade( $kendo-button-bg, 4 ) + if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-button-bg, 4 )) #a3a3a3 @@ -1997,7 +2097,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-selected-text Color - k-contrast-legacy( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) white @@ -2077,7 +2177,7 @@ The following table lists the available variables for customizing the Classic th $kendo-button-focus-shadow List - 0 0 4px 0 rgba( $kendo-button-border, .75 ) + 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 )) 0 0 4px 0 rgba(202, 202, 202, 0.75) @@ -2947,7 +3047,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-a Color - #ff6358 + if($kendo-enable-color-system, k-color( series-a ), #ff6358) #ff6358 @@ -2957,7 +3057,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-b Color - #ffd246 + if($kendo-enable-color-system, k-color( series-b ), #ffd246) #ffd246 @@ -2967,7 +3067,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-c Color - #78d237 + if($kendo-enable-color-system, k-color( series-c ), #78d237) #78d237 @@ -2977,7 +3077,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-d Color - #28b4c8 + if($kendo-enable-color-system, k-color( series-d ), #28b4c8) #28b4c8 @@ -2987,7 +3087,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-e Color - #2d73f5 + if($kendo-enable-color-system, k-color( series-e ), #2d73f5) #2d73f5 @@ -2997,7 +3097,7 @@ The following table lists the available variables for customizing the Classic th $kendo-series-f Color - #aa46be + if($kendo-enable-color-system, k-color( series-f ), #aa46be) #aa46be @@ -3017,7 +3117,7 @@ The following table lists the available variables for customizing the Classic th $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -3027,7 +3127,7 @@ The following table lists the available variables for customizing the Classic th $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) @@ -3227,7 +3327,7 @@ The following table lists the available variables for customizing the Classic th $kendo-checkbox-checked-text Color - k-contrast-legacy( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) white @@ -3307,7 +3407,7 @@ The following table lists the available variables for customizing the Classic th $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px rgba( $kendo-color-primary, .3 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) 0 0 0 2px rgba(243, 88, 0, 0.3) @@ -3822,7 +3922,7 @@ The following table lists the available variables for customizing the Classic th $kendo-chip-solid-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) 0 0 0 2px rgba(0, 0, 0, 0.16) @@ -3932,7 +4032,7 @@ The following table lists the available variables for customizing the Classic th $kendo-chip-outline-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) 0 0 0 2px rgba(0, 0, 0, 0.16) @@ -3952,7 +4052,7 @@ The following table lists the available variables for customizing the Classic th $kendo-chip-outline-hover-text Color - k-contrast-legacy( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) white @@ -4464,23 +4564,13 @@ The following table lists the available variables for customizing the Classic th - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #272727, subtle: #666666, surface: #f0f0f0, surface-alt: #ffffff, border: #cacaca, border-alt: #b6b6b6, base-subtle: #f0f0f0, base-subtle-hover: #ebebeb, base-subtle-active: #dddddd, base: #ebebeb, base-hover: #dddddd, base-active: #d6d6d6, base-emphasis: #cacaca, base-on-subtle: #272727, on-base: #272727, base-on-surface: #272727, primary-subtle: #fff2eb, primary-subtle-hover: #ffe5d6, primary-subtle-active: #ffd8c2, primary: #f35800, primary-hover: #e05100, primary-active: #cc4a00, primary-emphasis: #ff8b47, primary-on-subtle: #3d1600, on-primary: #ffffff, primary-on-surface: #f35800, secondary-subtle: #cacaca, secondary-subtle-hover: #b6b6b6, secondary-subtle-active: #a3a3a3, secondary: #b6b6b6, secondary-hover: #a3a3a3, secondary-active: #8f8f8f, secondary-emphasis: #7a7a7a, secondary-on-subtle: #272727, on-secondary: #000000, secondary-on-surface: #8f8f8f, tertiary-subtle: #9cdffe, tertiary-subtle-hover: #72d1fe, tertiary-subtle-active: #49c4fd, tertiary: #03a9f4, tertiary-hover: #039be0, tertiary-active: #038ecd, tertiary-emphasis: #2cbbfd, tertiary-on-subtle: #01364e, on-tertiary: #ffffff, tertiary-on-surface: #0273a6, info-subtle: #cce5f3, info-subtle-hover: #a6d1ea, info-subtle-active: #6ab2dc, info: #007bc3, info-hover: #0071b3, info-active: #0067a4, info-emphasis: #409cd2, info-on-subtle: #002b44, on-info: #ffffff, info-on-surface: #005485, success-subtle: #bbdfc1, success-subtle-hover: #9ed1a6, success-subtle-active: #82c48c, success: #3ea44e, success-hover: #399748, success-active: #348a42, success-emphasis: #6ebb7a, success-on-subtle: #16391b, on-success: #ffffff, success-on-surface: #2a7035, warning-subtle: #ffdead, warning-subtle-hover: #ffd699, warning-subtle-active: #ffc670, warning: #ffa41f, warning-hover: #ff9800, warning-active: #eb8c00, warning-emphasis: #ffb240, warning-on-subtle: #593500, on-warning: #000000, warning-on-surface: #ffa41f, error-subtle: #f4c3b8, error-subtle-hover: #f2b4a6, error-subtle-active: #ec8e79, error: #d92800, error-hover: #c82500, error-active: #b62200, error-emphasis: #e35e40, error-on-subtle: #4c0e00, on-error: #ffffff, error-on-surface: #941b00, light-subtle: #f0f0f0, light-subtle-hover: #ebebeb, light-subtle-active: #dddddd, light: #ebebeb, light-hover: #dddddd, light-active: #d6d6d6, light-emphasis: #cacaca, light-on-subtle: #272727, on-light: #000000, light-on-surface: #ebebeb, dark-subtle: #cacaca, dark-subtle-hover: #b6b6b6, dark-subtle-active: #a3a3a3, dark: #404040, dark-hover: #333333, dark-active: #272727, dark-emphasis: #7a7a7a, dark-on-subtle: #000000, on-dark: #ffffff, dark-on-surface: #333333, inverse-subtle: #cacaca, inverse-subtle-hover: #b6b6b6, inverse-subtle-active: #a3a3a3, inverse: #404040, inverse-hover: #333333, inverse-active: #272727, inverse-emphasis: #7a7a7a, inverse-on-subtle: #000000, on-inverse: #ffffff, inverse-on-surface: #333333, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffd246, series-b-bold: #bf9d35, series-b-bolder: #806923, series-b-subtle: #ffe9a2, series-b-subtler: #ffdd74, series-c: #78d237, series-c-bold: #5a9d29, series-c-bolder: #3c691c, series-c-subtle: #bbe99b, series-c-subtler: #9add69, series-d: #28b4c8, series-d-bold: #1e8796, series-d-bolder: #145a64, series-d-subtle: #93d9e3, series-d-subtler: #5ec7d6, series-e: #2d73f5, series-e-bold: #2256b8, series-e-bolder: #173a7b, series-e-subtle: #96b9fa, series-e-subtler: #6296f7, series-f: #9d40b0, series-f-bold: #80358e, series-f-bolder: #55235f, series-f-subtle: #d5a2df, series-f-subtler: #bf74ce) -
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
@@ -5023,6 +5113,126 @@ The following table lists the available variables for customizing the Classic th
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+ + $kendo-component-header-bg + Color + $kendo-base-bg + #f0f0f0 + + +
Description
Background color of the component header.
+ + + + $kendo-component-header-text + Color + $kendo-base-text + #272727 + + +
Description
Text color of the component header.
+ + + + $kendo-component-header-border + Color + $kendo-base-border + #cacaca + + +
Description
Border color of the component header.
+ + + + $kendo-component-header-gradient + List + $kendo-base-gradient + rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) + + +
Description
Gradient of the component header.
+ + + + $kendo-invalid-bg + Null + null + null + + +
Description
Background color of the invalid items.
+ + + + $kendo-invalid-text + Color + $kendo-color-error + #d92800 + + +
Description
Text color of the invalid items.
+ + + + $kendo-invalid-border + Color + $kendo-color-error + #d92800 + + +
Description
Border color of the invalid items.
+ + + + $kendo-invalid-shadow + Null + null + null + + +
Description
Shadow of the invalid items.
+ + + + $kendo-valid-bg + Null + null + null + + +
Description
Background color of the valid items.
+ + + + $kendo-valid-text + Color + $kendo-color-success + #3ea44e + + +
Description
Text color of the valid items.
+ + + + $kendo-valid-border + Color + $kendo-color-success + #3ea44e + + +
Description
Border color of the valid items.
+ + + + $kendo-valid-shadow + Null + null + null + + +
Description
Shadow of the valid items.
+ + @@ -5480,7 +5690,7 @@ The following table lists the available variables for customizing the Classic th $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(243, 88, 0, 0.16) @@ -5670,7 +5880,7 @@ The following table lists the available variables for customizing the Classic th $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) #6c6c6c @@ -5850,7 +6060,7 @@ The following table lists the available variables for customizing the Classic th $kendo-editor-highlighted-bg Color - k-color-mix( $kendo-color-primary, #ffffff, 20% ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) #fddecc @@ -6090,7 +6300,7 @@ The following table lists the available variables for customizing the Classic th $kendo-expander-header-hover-bg Color - k-color-shade( $kendo-expander-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-shade( $kendo-expander-bg, 1 )) #ebebeb @@ -6560,7 +6770,7 @@ The following table lists the available variables for customizing the Classic th $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #6c6c6c @@ -6740,7 +6950,7 @@ The following table lists the available variables for customizing the Classic th $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #6c6c6c @@ -7963,7 +8173,7 @@ The following table lists the available variables for customizing the Classic th $kendo-fieldset-legend-text Color - k-try-shade( $kendo-body-text, 2 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) #212121 @@ -8423,7 +8633,7 @@ The following table lists the available variables for customizing the Classic th $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) @@ -8918,7 +9128,7 @@ The following table lists the available variables for customizing the Classic th $kendo-input-outline-border Color - rgba( $kendo-button-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5)) rgba(39, 39, 39, 0.5) @@ -8948,7 +9158,7 @@ The following table lists the available variables for customizing the Classic th $kendo-input-outline-hover-border Color - rgba( $kendo-button-text, .8) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8)) rgba(39, 39, 39, 0.8) @@ -10097,7 +10307,7 @@ The following table lists the available variables for customizing the Classic th $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(243, 88, 0, 0.25) @@ -12149,7 +12359,7 @@ The following table lists the available variables for customizing the Classic th $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) rgba(39, 39, 39, 0.5) @@ -12169,7 +12379,7 @@ The following table lists the available variables for customizing the Classic th $kendo-picker-outline-hover-text Color - k-contrast-color( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) white @@ -12289,7 +12499,7 @@ The following table lists the available variables for customizing the Classic th $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 )) rgba(39, 39, 39, 0.04) @@ -12309,7 +12519,7 @@ The following table lists the available variables for customizing the Classic th $kendo-picker-flat-hover-border Color - rgba( $kendo-button-border, .16 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) rgba(202, 202, 202, 0.16) @@ -12899,7 +13109,7 @@ The following table lists the available variables for customizing the Classic th $kendo-progressbar-bg Color - k-try-shade( $kendo-component-bg, 1 ) + if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) #ebebeb @@ -12949,7 +13159,7 @@ The following table lists the available variables for customizing the Classic th $kendo-progressbar-value-text Color - k-contrast-legacy( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) white @@ -12959,7 +13169,7 @@ The following table lists the available variables for customizing the Classic th $kendo-progressbar-value-border Color - k-try-shade( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) #e05100 @@ -14055,7 +14265,7 @@ The following table lists the available variables for customizing the Classic th $kendo-scrollview-pagebutton-primary-border Color - k-try-shade( $kendo-color-primary, 2 ) + if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) #cc4a00 @@ -14285,7 +14495,7 @@ The following table lists the available variables for customizing the Classic th $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(64, 64, 64, 0.2) @@ -14619,7 +14829,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-off-track-focus-ring List - 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) + 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) 0 0 3px 1px rgba(0, 0, 0, 0.25) @@ -14669,7 +14879,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-off-thumb-bg Color - k-try-shade( $kendo-switch-off-track-bg ) + if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg )) #ebebeb @@ -14709,7 +14919,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-off-thumb-hover-bg Color - k-try-shade( $kendo-switch-off-thumb-bg ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg )) #d8d8d8 @@ -14869,7 +15079,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-on-track-focus-ring List - 0 0 3px 1px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) + 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) 0 0 3px 1px rgba(0, 0, 0, 0.25) @@ -14939,7 +15149,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-on-thumb-border Color - k-try-shade( $kendo-switch-on-thumb-bg ) + if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg )) #e05100 @@ -14959,7 +15169,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-on-thumb-hover-bg Color - k-try-shade( $kendo-switch-on-thumb-bg ) + if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg )) #e05100 @@ -14979,7 +15189,7 @@ The following table lists the available variables for customizing the Classic th $kendo-switch-on-thumb-hover-border Color - k-try-shade( $kendo-switch-on-thumb-hover-bg ) + if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg )) #ce4b00 @@ -15248,7 +15458,7 @@ The following table lists the available variables for customizing the Classic th $kendo-table-alt-row-bg Color - k-try-shade( $kendo-table-bg, .5 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 )) whitesmoke @@ -15278,7 +15488,7 @@ The following table lists the available variables for customizing the Classic th $kendo-table-hover-bg Color - k-try-shade( $kendo-table-bg, 1 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 )) #ebebeb @@ -15348,7 +15558,7 @@ The following table lists the available variables for customizing the Classic th $kendo-table-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) rgba(243, 88, 0, 0.25) @@ -16214,7 +16424,7 @@ The following table lists the available variables for customizing the Classic th $kendo-tooltip-bg Color - rgba( k-contrast-color( $kendo-body-bg ), .75 ) + if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-color( $kendo-body-bg ), .75 )) rgba(0, 0, 0, 0.75) @@ -16224,7 +16434,7 @@ The following table lists the available variables for customizing the Classic th $kendo-tooltip-text Color - k-contrast-color( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) white diff --git a/packages/core/docs/customization-color-system.md b/packages/core/docs/customization-color-system.md index 559e62fbaa8..70b3791ebdc 100644 --- a/packages/core/docs/customization-color-system.md +++ b/packages/core/docs/customization-color-system.md @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-color-rgba-transparent Color - rgba( 0, 0, 0, 0 ) + rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-gradient-transparent-to-black Gradient - rgba( black, 0 ), black + rgba(black, 0), black rgba(0, 0, 0, 0), black @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-gradient-transparent-to-white Gradient - rgba( white, 0 ), white + rgba(white, 0), white rgba(255, 255, 255, 0), white @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-gradient-black-to-transparent Gradient - black, rgba( black, 0 ) + black, rgba(black, 0) black, rgba(0, 0, 0, 0) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-gradient-white-to-transparent Gradient - white, rgba( white, 0 ) + white, rgba(white, 0) white, rgba(255, 255, 255, 0) @@ -107,6 +107,16 @@ The following table lists the available variables for customization.
Description
A gradient that cycles through the colors of the rainbow.
Note: you cannot change this value.
+ + $kendo-colors + Map + $_default-colors + (app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, base-subtle: null, base-subtle-hover: null, base-subtle-active: null, base: null, base-hover: null, base-active: null, base-emphasis: null, base-on-subtle: null, on-base: null, base-on-surface: null, primary-subtle: null, primary-subtle-hover: null, primary-subtle-active: null, primary: null, primary-hover: null, primary-active: null, primary-emphasis: null, primary-on-subtle: null, on-primary: null, primary-on-surface: null, secondary-subtle: null, secondary-subtle-hover: null, secondary-subtle-active: null, secondary: null, secondary-hover: null, secondary-active: null, secondary-emphasis: null, secondary-on-subtle: null, on-secondary: null, secondary-on-surface: null, tertiary-subtle: null, tertiary-subtle-hover: null, tertiary-subtle-active: null, tertiary: null, tertiary-hover: null, tertiary-active: null, tertiary-emphasis: null, tertiary-on-subtle: null, on-tertiary: null, tertiary-on-surface: null, info-subtle: null, info-subtle-hover: null, info-subtle-active: null, info: null, info-hover: null, info-active: null, info-emphasis: null, info-on-subtle: null, on-info: null, info-on-surface: null, success-subtle: null, success-subtle-hover: null, success-subtle-active: null, success: null, success-hover: null, success-active: null, success-emphasis: null, success-on-subtle: null, on-success: null, success-on-surface: null, warning-subtle: null, warning-subtle-hover: null, warning-subtle-active: null, warning: null, warning-hover: null, warning-active: null, warning-emphasis: null, warning-on-subtle: null, on-warning: null, warning-on-surface: null, error-subtle: null, error-subtle-hover: null, error-subtle-active: null, error: null, error-hover: null, error-active: null, error-emphasis: null, error-on-subtle: null, on-error: null, error-on-surface: null, light-subtle: null, light-subtle-hover: null, light-subtle-active: null, light: null, light-hover: null, light-active: null, light-emphasis: null, light-on-subtle: null, on-light: null, light-on-surface: null, dark-subtle: null, dark-subtle-hover: null, dark-subtle-active: null, dark: null, dark-hover: null, dark-active: null, dark-emphasis: null, dark-on-subtle: null, on-dark: null, dark-on-surface: null, inverse-subtle: null, inverse-subtle-hover: null, inverse-subtle-active: null, inverse: null, inverse-hover: null, inverse-active: null, inverse-emphasis: null, inverse-on-subtle: null, on-inverse: null, inverse-on-surface: null, series-a: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null) + + +
Description
The global default Colors map.
+ + diff --git a/packages/core/docs/customization.md b/packages/core/docs/customization.md index c9cc9026580..b16b9f1dbcb 100644 --- a/packages/core/docs/customization.md +++ b/packages/core/docs/customization.md @@ -459,6 +459,51 @@ k-rgba-to-mix($color, $bg) // => Color } ``` +### `k-generate-colors` + +Generates all color variations of a given main color + + +#### Syntax + +```scss +k-generate-colors($name, $level) // => Map +``` + +#### Parameters + + +` $name` +: The name of the main color + +` $level` +: The color value to be assigned to the main color + + + + +#### Source + +```scss +// Location https://github.com/telerik/kendo-themes/blob/develop/packages//scss/functions/_color-manipulation.import.scss#L142-L157 +@function k-generate-colors($name, $level) { + $_variations: ( + #{$name}-subtle: k-try-tint( $color, 80% ), + #{$name}-subtle-hover: k-try-tint( $color, 65% ), + #{$name}-subtle-active: k-try-tint( $color, 50% ), + #{$name}: $color, + #{$name}-hover: k-try-shade( $color, 0.5 ), + #{$name}-active: k-try-shade( $color, 1.5 ), + #{$name}-emphasis: k-try-tint( $color, 4.5 ), + #{$name}-on-subtle: k-try-shade( $color, 8 ), + on-#{$name}: k-contrast-legacy( $color ), + #{$name}-on-surface: $color, + ); + + @return $_variations; +} +``` + ### `k-color-alpha` Returns the alpha channel of a color. @@ -3834,7 +3879,7 @@ The following table lists the available variables for customizing the Theme Core $kendo-color-rgba-transparent Color - rgba( 0, 0, 0, 0 ) + rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) @@ -3844,7 +3889,7 @@ The following table lists the available variables for customizing the Theme Core $kendo-gradient-transparent-to-black Gradient - rgba( black, 0 ), black + rgba(black, 0), black rgba(0, 0, 0, 0), black @@ -3854,7 +3899,7 @@ The following table lists the available variables for customizing the Theme Core $kendo-gradient-transparent-to-white Gradient - rgba( white, 0 ), white + rgba(white, 0), white rgba(255, 255, 255, 0), white @@ -3864,7 +3909,7 @@ The following table lists the available variables for customizing the Theme Core $kendo-gradient-black-to-transparent Gradient - black, rgba( black, 0 ) + black, rgba(black, 0) black, rgba(0, 0, 0, 0) @@ -3874,7 +3919,7 @@ The following table lists the available variables for customizing the Theme Core $kendo-gradient-white-to-transparent Gradient - white, rgba( white, 0 ) + white, rgba(white, 0) white, rgba(255, 255, 255, 0) @@ -3891,6 +3936,16 @@ The following table lists the available variables for customizing the Theme Core
Description
A gradient that cycles through the colors of the rainbow.
Note: you cannot change this value.
+ + $kendo-colors + Map + $_default-colors + (app-surface: null, on-app-surface: null, subtle: null, surface: null, surface-alt: null, border: null, border-alt: null, base-subtle: null, base-subtle-hover: null, base-subtle-active: null, base: null, base-hover: null, base-active: null, base-emphasis: null, base-on-subtle: null, on-base: null, base-on-surface: null, primary-subtle: null, primary-subtle-hover: null, primary-subtle-active: null, primary: null, primary-hover: null, primary-active: null, primary-emphasis: null, primary-on-subtle: null, on-primary: null, primary-on-surface: null, secondary-subtle: null, secondary-subtle-hover: null, secondary-subtle-active: null, secondary: null, secondary-hover: null, secondary-active: null, secondary-emphasis: null, secondary-on-subtle: null, on-secondary: null, secondary-on-surface: null, tertiary-subtle: null, tertiary-subtle-hover: null, tertiary-subtle-active: null, tertiary: null, tertiary-hover: null, tertiary-active: null, tertiary-emphasis: null, tertiary-on-subtle: null, on-tertiary: null, tertiary-on-surface: null, info-subtle: null, info-subtle-hover: null, info-subtle-active: null, info: null, info-hover: null, info-active: null, info-emphasis: null, info-on-subtle: null, on-info: null, info-on-surface: null, success-subtle: null, success-subtle-hover: null, success-subtle-active: null, success: null, success-hover: null, success-active: null, success-emphasis: null, success-on-subtle: null, on-success: null, success-on-surface: null, warning-subtle: null, warning-subtle-hover: null, warning-subtle-active: null, warning: null, warning-hover: null, warning-active: null, warning-emphasis: null, warning-on-subtle: null, on-warning: null, warning-on-surface: null, error-subtle: null, error-subtle-hover: null, error-subtle-active: null, error: null, error-hover: null, error-active: null, error-emphasis: null, error-on-subtle: null, on-error: null, error-on-surface: null, light-subtle: null, light-subtle-hover: null, light-subtle-active: null, light: null, light-hover: null, light-active: null, light-emphasis: null, light-on-subtle: null, on-light: null, light-on-surface: null, dark-subtle: null, dark-subtle-hover: null, dark-subtle-active: null, dark: null, dark-hover: null, dark-active: null, dark-emphasis: null, dark-on-subtle: null, on-dark: null, dark-on-surface: null, inverse-subtle: null, inverse-subtle-hover: null, inverse-subtle-active: null, inverse: null, inverse-hover: null, inverse-active: null, inverse-emphasis: null, inverse-on-subtle: null, on-inverse: null, inverse-on-surface: null, series-a: null, series-a-bold: null, series-a-bolder: null, series-a-subtle: null, series-a-subtler: null, series-b: null, series-b-bold: null, series-b-bolder: null, series-b-subtle: null, series-b-subtler: null, series-c: null, series-c-bold: null, series-c-bolder: null, series-c-subtle: null, series-c-subtler: null, series-d: null, series-d-bold: null, series-d-bolder: null, series-d-subtle: null, series-d-subtler: null, series-e: null, series-e-bold: null, series-e-bolder: null, series-e-subtle: null, series-e-subtler: null, series-f: null, series-f-bold: null, series-f-bolder: null, series-f-subtle: null, series-f-subtler: null) + + +
Description
The global default Colors map.
+ + diff --git a/packages/default/docs/customization-appbar.md b/packages/default/docs/customization-appbar.md index b93fda39b45..1059f83ccf3 100644 --- a/packages/default/docs/customization-appbar.md +++ b/packages/default/docs/customization-appbar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-appbar-light-text Color - k-contrast-legacy( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) black @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-appbar-dark-text Color - k-contrast-legacy( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) white diff --git a/packages/default/docs/customization-button.md b/packages/default/docs/customization-button.md index 3e0359d436c..12f7a4351ac 100644 --- a/packages/default/docs/customization-button.md +++ b/packages/default/docs/customization-button.md @@ -271,7 +271,7 @@ The following table lists the available variables for customization. Map k-map-merge( $kendo-theme-colors, - ( "base": #f5f5f5 ) + ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) ) ("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5) @@ -282,7 +282,7 @@ The following table lists the available variables for customization. $kendo-button-bg Color - #f5f5f5 + if($kendo-enable-color-system, k-color( base ), #f5f5f5) #f5f5f5 @@ -292,7 +292,7 @@ The following table lists the available variables for customization. $kendo-button-text Color - #424242 + if($kendo-enable-color-system, k-color( on-base ), #424242) #424242 @@ -302,7 +302,7 @@ The following table lists the available variables for customization. $kendo-button-border Color - rgba( black, .08 ) + if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) rgba(0, 0, 0, 0.08) @@ -312,7 +312,7 @@ The following table lists the available variables for customization. $kendo-button-gradient List - rgba( black, 0 ), rgba( black, .02 ) + if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) @@ -332,7 +332,7 @@ The following table lists the available variables for customization. $kendo-button-hover-bg Color - k-try-shade( $kendo-button-bg, .5 ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) #ebebeb @@ -382,7 +382,7 @@ The following table lists the available variables for customization. $kendo-button-active-bg Color - k-try-shade( $kendo-button-bg, 1.5 ) + if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) #d8d8d8 @@ -442,7 +442,7 @@ The following table lists the available variables for customization. $kendo-button-selected-text Color - k-contrast-legacy( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) white @@ -522,7 +522,7 @@ The following table lists the available variables for customization. $kendo-button-focus-shadow List - 0 0 0 2px rgba( $kendo-button-border, .08 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) 0 0 0 2px rgba(0, 0, 0, 0.08) diff --git a/packages/default/docs/customization-charts.md b/packages/default/docs/customization-charts.md index e10706802d1..270855e5956 100644 --- a/packages/default/docs/customization-charts.md +++ b/packages/default/docs/customization-charts.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-series-a Color - #ff6358 + if($kendo-enable-color-system, k-color( series-a ), #ff6358) #ff6358 @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-series-b Color - #ffe162 + if($kendo-enable-color-system, k-color( series-b ), #ffe162) #ffe162 @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-series-c Color - #4cd180 + if($kendo-enable-color-system, k-color( series-c ), #4cd180) #4cd180 @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-series-d Color - #4b5ffa + if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) #4b5ffa @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-series-e Color - #ac58ff + if($kendo-enable-color-system, k-color( series-e ), #ac58ff) #ac58ff @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-series-f Color - #ff5892 + if($kendo-enable-color-system, k-color( series-f ), #ff5892) #ff5892 @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) diff --git a/packages/default/docs/customization-checkbox.md b/packages/default/docs/customization-checkbox.md index 1fe92310a5a..63abe3179b2 100644 --- a/packages/default/docs/customization-checkbox.md +++ b/packages/default/docs/customization-checkbox.md @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-text Color - k-contrast-legacy( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) white @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px rgba( $kendo-color-primary, .3 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) 0 0 0 2px rgba(255, 99, 88, 0.3) diff --git a/packages/default/docs/customization-chip.md b/packages/default/docs/customization-chip.md index f97927deac0..4f75e521553 100644 --- a/packages/default/docs/customization-chip.md +++ b/packages/default/docs/customization-chip.md @@ -249,7 +249,7 @@ The following table lists the available variables for customization. $kendo-chip-base-bg Color - $kendo-button-bg + if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) #f5f5f5 @@ -305,7 +305,7 @@ The following table lists the available variables for customization. $kendo-chip-solid-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -345,7 +345,7 @@ The following table lists the available variables for customization. $kendo-chip-solid-hover-bg Color - $kendo-button-hover-bg + if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) #ebebeb @@ -415,7 +415,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -435,7 +435,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-hover-text Color - k-contrast-legacy( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) white diff --git a/packages/default/docs/customization-color-system.md b/packages/default/docs/customization-color-system.md index c533e3b86aa..0d5316be367 100644 --- a/packages/default/docs/customization-color-system.md +++ b/packages/default/docs/customization-color-system.md @@ -28,6 +28,16 @@ The following table lists the available variables for customization. + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae) + + +
Description
The global default Colors map.
+ + + $kendo-color-primary Color #ff6358 @@ -40,7 +50,7 @@ The following table lists the available variables for customization. $kendo-color-primary-contrast Color - k-contrast-legacy( $kendo-color-primary ) + k-contrast-legacy($kendo-color-primary) white @@ -60,7 +70,7 @@ The following table lists the available variables for customization. $kendo-color-secondary-contrast Color - k-contrast-legacy( $kendo-color-secondary ) + k-contrast-legacy($kendo-color-secondary) white @@ -80,7 +90,7 @@ The following table lists the available variables for customization. $kendo-color-tertiary-contrast Color - k-contrast-legacy( $kendo-color-tertiary ) + k-contrast-legacy($kendo-color-tertiary) white @@ -150,7 +160,7 @@ The following table lists the available variables for customization. $kendo-color-inverse Color - if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) + if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) #424242 diff --git a/packages/default/docs/customization-common.md b/packages/default/docs/customization-common.md index 8920cff732d..8553cdbe29a 100644 --- a/packages/default/docs/customization-common.md +++ b/packages/default/docs/customization-common.md @@ -277,6 +277,46 @@ The following table lists the available variables for customization.
Description
Text color of the links on hover.
+ + $kendo-focus-shadow + List + inset 0 0 0 2px rgba(0, 0, 0, .13) + inset 0 0 0 2px rgba(0, 0, 0, 0.13) + + +
Description
Box shadow of focused items.
+ + + + $kendo-transition + List + color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out + color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out + + +
Description
Transition used across all components.
+ + + + $kendo-disabled-filter + String + grayscale(.1) + grayscale(0.1) + + +
Description
Filter used for disabled items.
+ + + + $kendo-disabled-opacity + Number + .6 + 0.6 + + +
Description
Opacity used for disabled items.
+ + $kendo-base-bg Color @@ -300,7 +340,7 @@ The following table lists the available variables for customization. $kendo-base-border Color - rgba( black, .08 ) + rgba(black, 0.08) rgba(0, 0, 0, 0.08) @@ -310,7 +350,7 @@ The following table lists the available variables for customization. $kendo-base-gradient List - rgba( black, 0 ), rgba( black, .02 ) + rgba(black, 0), rgba(black, 0.02) rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) @@ -320,7 +360,7 @@ The following table lists the available variables for customization. $kendo-hover-bg Color - k-try-shade( $kendo-base-bg, .5 ) + k-try-shade($kendo-base-bg, 0.5) #f0f0f0 @@ -370,7 +410,7 @@ The following table lists the available variables for customization. $kendo-selected-text Color - k-contrast-legacy( $kendo-selected-bg ) + k-contrast-legacy($kendo-selected-bg) white @@ -400,7 +440,7 @@ The following table lists the available variables for customization. $kendo-selected-hover-bg Color - k-try-shade( $kendo-selected-bg, .5 ) + k-try-shade($kendo-selected-bg, 0.5) #f55f54 @@ -437,26 +477,6 @@ The following table lists the available variables for customization.
Description
The gradient of selected and hovered items.
- - $kendo-focus-shadow - List - inset 0 0 0 2px rgba(0, 0, 0, .13) - inset 0 0 0 2px rgba(0, 0, 0, 0.13) - - -
Description
Box shadow of focused items.
- - - - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out - - -
Description
Transition used across all components.
- - $kendo-disabled-text Color @@ -467,26 +487,6 @@ The following table lists the available variables for customization.
Description
Text color of disabled items.
- - $kendo-disabled-filter - String - grayscale(.1) - grayscale(0.1) - - -
Description
Filter used for disabled items.
- - - - $kendo-disabled-opacity - Number - .6 - 0.6 - - -
Description
Opacity used for disabled items.
- - diff --git a/packages/default/docs/customization-component.md b/packages/default/docs/customization-component.md index d26afe04fa0..a2a5e70abc9 100644 --- a/packages/default/docs/customization-component.md +++ b/packages/default/docs/customization-component.md @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-component-border Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) rgba(0, 0, 0, 0.08) @@ -99,9 +99,9 @@ The following table lists the available variables for customization. $kendo-invalid-bg - String + Null + null null - initial
Description
Background color of the invalid items.
@@ -139,9 +139,9 @@ The following table lists the available variables for customization. $kendo-valid-bg - String + Null + null null - initial
Description
Background color of the valid items.
diff --git a/packages/default/docs/customization-dock-manager.md b/packages/default/docs/customization-dock-manager.md index 4251c1a641f..545a56638fb 100644 --- a/packages/default/docs/customization-dock-manager.md +++ b/packages/default/docs/customization-dock-manager.md @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(255, 99, 88, 0.16) diff --git a/packages/default/docs/customization-dropzone.md b/packages/default/docs/customization-dropzone.md index c0ccbb07e18..fd7f64c0906 100644 --- a/packages/default/docs/customization-dropzone.md +++ b/packages/default/docs/customization-dropzone.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) #7e7e7e diff --git a/packages/default/docs/customization-editor.md b/packages/default/docs/customization-editor.md index 91783ee225a..e75b6d313f2 100644 --- a/packages/default/docs/customization-editor.md +++ b/packages/default/docs/customization-editor.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg Color - k-color-mix($kendo-color-primary, #ffffff, 20%) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) #ffe0de diff --git a/packages/default/docs/customization-filemanager.md b/packages/default/docs/customization-filemanager.md index 63ebdfb96a8..0ef90b491ec 100644 --- a/packages/default/docs/customization-filemanager.md +++ b/packages/default/docs/customization-filemanager.md @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #7e7e7e @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #7e7e7e diff --git a/packages/default/docs/customization-form.md b/packages/default/docs/customization-form.md index 7ab8237ad1d..642e952bc6a 100644 --- a/packages/default/docs/customization-form.md +++ b/packages/default/docs/customization-form.md @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-fieldset-legend-text Color - k-try-shade( $kendo-body-text, 2 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) #373737 diff --git a/packages/default/docs/customization-grid.md b/packages/default/docs/customization-grid.md index f35085ae97a..6ddb2e27b6f 100644 --- a/packages/default/docs/customization-grid.md +++ b/packages/default/docs/customization-grid.md @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) diff --git a/packages/default/docs/customization-input.md b/packages/default/docs/customization-input.md index d76fd620abe..d6d1e80afb9 100644 --- a/packages/default/docs/customization-input.md +++ b/packages/default/docs/customization-input.md @@ -325,7 +325,7 @@ The following table lists the available variables for customization. $kendo-input-hover-border Color - rgba( $kendo-input-border, .16 ) + if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) rgba(0, 0, 0, 0.16) @@ -375,7 +375,7 @@ The following table lists the available variables for customization. $kendo-input-focus-shadow List - 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -475,7 +475,7 @@ The following table lists the available variables for customization. $kendo-input-outline-border Color - rgba( $kendo-button-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) rgba(66, 66, 66, 0.5) @@ -505,7 +505,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-border Color - rgba( $kendo-button-text, .8) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) rgba(66, 66, 66, 0.8) diff --git a/packages/default/docs/customization-listview.md b/packages/default/docs/customization-listview.md index 89cffff7969..23bdc523b55 100644 --- a/packages/default/docs/customization-listview.md +++ b/packages/default/docs/customization-listview.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) rgba(255, 99, 88, 0.25) diff --git a/packages/default/docs/customization-picker.md b/packages/default/docs/customization-picker.md index 6ed22cc3ce6..abe26f5d2ec 100644 --- a/packages/default/docs/customization-picker.md +++ b/packages/default/docs/customization-picker.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) rgba(66, 66, 66, 0.5) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-text Color - k-contrast-legacy( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) white @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .04 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) rgba(66, 66, 66, 0.04) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-border Color - rgba( $kendo-button-border, .16 ) + if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) rgba(0, 0, 0, 0.16) diff --git a/packages/default/docs/customization-progressbar.md b/packages/default/docs/customization-progressbar.md index 355485378aa..5f9048e1e12 100644 --- a/packages/default/docs/customization-progressbar.md +++ b/packages/default/docs/customization-progressbar.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-progressbar-bg Color - k-try-shade( $kendo-component-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) #ebebeb @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-text Color - k-contrast-legacy( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) white @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-border Color - k-try-shade( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) #eb5b51 diff --git a/packages/default/docs/customization-skeleton.md b/packages/default/docs/customization-skeleton.md index 645165586dc..89493c74b1a 100644 --- a/packages/default/docs/customization-skeleton.md +++ b/packages/default/docs/customization-skeleton.md @@ -67,26 +67,6 @@ The following table lists the available variables for customization.
Description
The border radius of the circular Skeleton.
- - $kendo-skeleton-item-bg - Color - rgba( $kendo-color-inverse, .2 ) - rgba(66, 66, 66, 0.2) - - -
Description
The background color of the Skeleton item.
- - - - $kendo-skeleton-wave-bg - Color - rgba( black, .04 ) - rgba(0, 0, 0, 0.04) - - -
Description
The background color of the Skeleton wave animation.
- - diff --git a/packages/default/docs/customization-switch.md b/packages/default/docs/customization-switch.md index 86fb809c4fe..6ae2bcd41ea 100644 --- a/packages/default/docs/customization-switch.md +++ b/packages/default/docs/customization-switch.md @@ -114,7 +114,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-border Color - k-try-shade( $kendo-switch-off-track-bg, 8% ) + if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) #ebebeb @@ -214,7 +214,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-ring List - 2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) + 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) 2px solid rgba(0, 0, 0, 0.08) @@ -354,7 +354,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-text Color - k-contrast-legacy( $kendo-switch-on-track-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) white @@ -464,7 +464,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-ring List - 2px solid rgba( $kendo-switch-on-track-border, .25 ) + 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) 2px solid rgba(255, 99, 88, 0.25) diff --git a/packages/default/docs/customization-table.md b/packages/default/docs/customization-table.md index 83c977e5c19..302e44dc1ec 100644 --- a/packages/default/docs/customization-table.md +++ b/packages/default/docs/customization-table.md @@ -259,7 +259,7 @@ The following table lists the available variables for customization. $kendo-table-alt-row-bg Color - rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-table-hover-bg Color - k-color-darken($kendo-table-bg, 7%) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) #ededed @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg Color - rgba($kendo-selected-bg, .25) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) rgba(255, 99, 88, 0.25) diff --git a/packages/default/docs/customization-tooltip.md b/packages/default/docs/customization-tooltip.md index ab9c0df42d7..c494ae754eb 100644 --- a/packages/default/docs/customization-tooltip.md +++ b/packages/default/docs/customization-tooltip.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-tooltip-bg Color - rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) + if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) rgba(0, 0, 0, 0.75) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-tooltip-text Color - k-contrast-legacy( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) white diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index e10c714ab55..58d53ba3655 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -281,6 +281,46 @@ The following table lists the available variables for customizing the Default th
Description
Text color of the links on hover.
+ + $kendo-focus-shadow + List + inset 0 0 0 2px rgba(0, 0, 0, .13) + inset 0 0 0 2px rgba(0, 0, 0, 0.13) + + +
Description
Box shadow of focused items.
+ + + + $kendo-transition + List + color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out + color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out + + +
Description
Transition used across all components.
+ + + + $kendo-disabled-filter + String + grayscale(.1) + grayscale(0.1) + + +
Description
Filter used for disabled items.
+ + + + $kendo-disabled-opacity + Number + .6 + 0.6 + + +
Description
Opacity used for disabled items.
+ + $kendo-base-bg Color @@ -304,7 +344,7 @@ The following table lists the available variables for customizing the Default th $kendo-base-border Color - rgba( black, .08 ) + rgba(black, 0.08) rgba(0, 0, 0, 0.08) @@ -314,7 +354,7 @@ The following table lists the available variables for customizing the Default th $kendo-base-gradient List - rgba( black, 0 ), rgba( black, .02 ) + rgba(black, 0), rgba(black, 0.02) rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) @@ -324,7 +364,7 @@ The following table lists the available variables for customizing the Default th $kendo-hover-bg Color - k-try-shade( $kendo-base-bg, .5 ) + k-try-shade($kendo-base-bg, 0.5) #f0f0f0 @@ -374,7 +414,7 @@ The following table lists the available variables for customizing the Default th $kendo-selected-text Color - k-contrast-legacy( $kendo-selected-bg ) + k-contrast-legacy($kendo-selected-bg) white @@ -404,7 +444,7 @@ The following table lists the available variables for customizing the Default th $kendo-selected-hover-bg Color - k-try-shade( $kendo-selected-bg, .5 ) + k-try-shade($kendo-selected-bg, 0.5) #f55f54 @@ -441,26 +481,6 @@ The following table lists the available variables for customizing the Default th
Description
The gradient of selected and hovered items.
- - $kendo-focus-shadow - List - inset 0 0 0 2px rgba(0, 0, 0, .13) - inset 0 0 0 2px rgba(0, 0, 0, 0.13) - - -
Description
Box shadow of focused items.
- - - - $kendo-transition - List - color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out - color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out - - -
Description
Transition used across all components.
- - $kendo-disabled-text Color @@ -471,26 +491,6 @@ The following table lists the available variables for customizing the Default th
Description
Text color of disabled items.
- - $kendo-disabled-filter - String - grayscale(.1) - grayscale(0.1) - - -
Description
Filter used for disabled items.
- - - - $kendo-disabled-opacity - Number - .6 - 0.6 - - -
Description
Opacity used for disabled items.
- - @@ -624,7 +624,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-light-text Color - k-contrast-legacy( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) black @@ -644,7 +644,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-dark-text Color - k-contrast-legacy( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) white @@ -2156,7 +2156,7 @@ The following table lists the available variables for customizing the Default th Map k-map-merge( $kendo-theme-colors, - ( "base": #f5f5f5 ) + ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) ) ("primary": #ff6358, "secondary": #666666, "tertiary": #03a9f4, "info": #0058e9, "success": #37b400, "warning": #ffc000, "error": #f31700, "dark": #424242, "light": #ebebeb, "inverse": #424242, "base": #f5f5f5) @@ -2167,7 +2167,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-bg Color - #f5f5f5 + if($kendo-enable-color-system, k-color( base ), #f5f5f5) #f5f5f5 @@ -2177,7 +2177,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-text Color - #424242 + if($kendo-enable-color-system, k-color( on-base ), #424242) #424242 @@ -2187,7 +2187,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-border Color - rgba( black, .08 ) + if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) rgba(0, 0, 0, 0.08) @@ -2197,7 +2197,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-gradient List - rgba( black, 0 ), rgba( black, .02 ) + if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) @@ -2217,7 +2217,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-hover-bg Color - k-try-shade( $kendo-button-bg, .5 ) + if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) #ebebeb @@ -2267,7 +2267,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-active-bg Color - k-try-shade( $kendo-button-bg, 1.5 ) + if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) #d8d8d8 @@ -2327,7 +2327,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-selected-text Color - k-contrast-legacy( $kendo-button-selected-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) white @@ -2407,7 +2407,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-focus-shadow List - 0 0 0 2px rgba( $kendo-button-border, .08 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -3277,7 +3277,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-a Color - #ff6358 + if($kendo-enable-color-system, k-color( series-a ), #ff6358) #ff6358 @@ -3287,7 +3287,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-b Color - #ffe162 + if($kendo-enable-color-system, k-color( series-b ), #ffe162) #ffe162 @@ -3297,7 +3297,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-c Color - #4cd180 + if($kendo-enable-color-system, k-color( series-c ), #4cd180) #4cd180 @@ -3307,7 +3307,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-d Color - #4b5ffa + if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) #4b5ffa @@ -3317,7 +3317,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-e Color - #ac58ff + if($kendo-enable-color-system, k-color( series-e ), #ac58ff) #ac58ff @@ -3327,7 +3327,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-f Color - #ff5892 + if($kendo-enable-color-system, k-color( series-f ), #ff5892) #ff5892 @@ -3347,7 +3347,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -3357,7 +3357,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) @@ -3557,7 +3557,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-checked-text Color - k-contrast-legacy( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) white @@ -3637,7 +3637,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px rgba( $kendo-color-primary, .3 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) 0 0 0 2px rgba(255, 99, 88, 0.3) @@ -4096,7 +4096,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-base-bg Color - $kendo-button-bg + if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) #f5f5f5 @@ -4152,7 +4152,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-solid-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -4192,7 +4192,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-solid-hover-bg Color - $kendo-button-hover-bg + if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) #ebebeb @@ -4262,7 +4262,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-shadow List - 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -4282,7 +4282,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-hover-text Color - k-contrast-legacy( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) white @@ -4794,6 +4794,16 @@ The following table lists the available variables for customizing the Default th + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #3d3d3d, subtle: #666666, surface: #fafafa, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.08), border-alt: rgba(0, 0, 0, 0.16), base-subtle: #ebebeb, base-subtle-hover: #e0e0e0, base-subtle-active: #d6d6d6, base: #f5f5f5, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #c2c2c2, base-on-subtle: #3d3d3d, on-base: #3d3d3d, base-on-surface: #3d3d3d, primary-subtle: #ffeceb, primary-subtle-hover: #ffdedb, primary-subtle-active: #ffc8c4, primary: #ff6358, primary-hover: #ea5a51, primary-active: #d45349, primary-emphasis: #ff9d97, primary-on-subtle: #5c201c, on-primary: #ffffff, primary-on-surface: #ff6358, secondary-subtle: #fafafa, secondary-subtle-hover: #f5f5f5, secondary-subtle-active: #ebebeb, secondary: #666666, secondary-hover: #525252, secondary-active: #3d3d3d, secondary-emphasis: #e0e0e0, secondary-on-subtle: #141414, on-secondary: #ffffff, secondary-on-surface: #292929, tertiary-subtle: #d8f1fd, tertiary-subtle-hover: #c5eafc, tertiary-subtle-active: #a3dffb, tertiary: #03a9f4, tertiary-hover: #039ae0, tertiary-active: #028ccb, tertiary-emphasis: #61c9f9, tertiary-on-subtle: #023f5c, on-tertiary: #ffffff, tertiary-on-surface: #028ccb, info-subtle: #d2e2fb, info-subtle-hover: #bdd4f8, info-subtle-active: #80acf4, info: #0058e9, info-hover: #0052d6, info-active: #004ac2, info-emphasis: #6098f2, info-on-subtle: #002259, on-info: #ffffff, info-on-surface: #004ac2, success-subtle: #dcf0d3, success-subtle-hover: #cbe9bf, success-subtle-active: #b7e1a5, success: #37b400, success-hover: #32a500, success-active: #2d9600, success-emphasis: #81d15f, success-on-subtle: #1c5a00, on-success: #ffffff, success-on-surface: #2d9600, warning-subtle: #fff4d3, warning-subtle-hover: #ffeebd, warning-subtle-active: #ffe79e, warning: #ffc000, warning-hover: #eaaf00, warning-active: #d49f00, warning-emphasis: #ffd760, warning-on-subtle: #5e4700, on-warning: #3d3d3d, warning-on-surface: #ffc000, error-subtle: #fcddda, error-subtle-hover: #fbc8c3, error-subtle-active: #f98b80, error: #f31700, error-hover: #df1600, error-active: #ca1400, error-emphasis: #f76f60, error-on-subtle: #7a0c00, on-error: #ffffff, error-on-surface: #ca1400, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #ebebeb, light: #ebebeb, light-hover: #e0e0e0, light-active: #d6d6d6, light-emphasis: #d6d6d6, light-on-subtle: #141414, on-light: #000000, light-on-surface: #e0e0e0, dark-subtle: #c2c2c2, dark-subtle-hover: #adadad, dark-subtle-active: #999999, dark: #3d3d3d, dark-hover: #292929, dark-active: #1f1f1f, dark-emphasis: #666666, dark-on-subtle: #1f1f1f, on-dark: #ffffff, dark-on-surface: #141414, inverse-subtle: #c2c2c2, inverse-subtle-hover: #adadad, inverse-subtle-active: #999999, inverse: #3d3d3d, inverse-hover: #292929, inverse-active: #1f1f1f, inverse-emphasis: #666666, inverse-on-subtle: #1f1f1f, on-inverse: #ffffff, inverse-on-surface: #141414, series-a: #ff6358, series-a-bold: #bf4a42, series-a-bolder: #80322c, series-a-subtle: #ffb1ac, series-a-subtler: #ff8a82, series-b: #ffe162, series-b-bold: #bfa94a, series-b-bolder: #807131, series-b-subtle: #fff0b1, series-b-subtler: #ffe989, series-c: #4cd180, series-c-bold: #399d60, series-c-bolder: #266940, series-c-subtle: #a6e8c0, series-c-subtler: #79dda0, series-d: #4b5ffa, series-d-bold: #3847bc, series-d-bolder: #26307d, series-d-subtle: #a5affd, series-d-subtler: #7887fb, series-e: #ac58ff, series-e-bold: #8142bf, series-e-bolder: #562c80, series-e-subtle: #d6acff, series-e-subtler: #c182ff, series-f: #ff5892, series-f-bold: #bf426e, series-f-bolder: #802c49, series-f-subtle: #ffacc9, series-f-subtler: #ff82ae) + + +
Description
The global default Colors map.
+ + + $kendo-color-primary Color #ff6358 @@ -4806,7 +4816,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-primary-contrast Color - k-contrast-legacy( $kendo-color-primary ) + k-contrast-legacy($kendo-color-primary) white @@ -4826,7 +4836,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-secondary-contrast Color - k-contrast-legacy( $kendo-color-secondary ) + k-contrast-legacy($kendo-color-secondary) white @@ -4846,7 +4856,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-tertiary-contrast Color - k-contrast-legacy( $kendo-color-tertiary ) + k-contrast-legacy($kendo-color-tertiary) white @@ -4916,7 +4926,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-inverse Color - if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) + if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) #424242 @@ -5326,7 +5336,7 @@ The following table lists the available variables for customizing the Default th $kendo-component-border Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba(if($kendo-is-dark-theme, $kendo-color-white, $kendo-color-black), 0.08) rgba(0, 0, 0, 0.08) @@ -5375,9 +5385,9 @@ The following table lists the available variables for customizing the Default th $kendo-invalid-bg - String + Null + null null - initial
Description
Background color of the invalid items.
@@ -5415,9 +5425,9 @@ The following table lists the available variables for customizing the Default th $kendo-valid-bg - String + Null + null null - initial
Description
Background color of the valid items.
@@ -5910,7 +5920,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(255, 99, 88, 0.16) @@ -6100,7 +6110,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) #7e7e7e @@ -6280,7 +6290,7 @@ The following table lists the available variables for customizing the Default th $kendo-editor-highlighted-bg Color - k-color-mix($kendo-color-primary, #ffffff, 20%) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) #ffe0de @@ -6990,7 +7000,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #7e7e7e @@ -7170,7 +7180,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) #7e7e7e @@ -8403,7 +8413,7 @@ The following table lists the available variables for customizing the Default th $kendo-fieldset-legend-text Color - k-try-shade( $kendo-body-text, 2 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) #373737 @@ -8843,7 +8853,7 @@ The following table lists the available variables for customizing the Default th $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .12 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) rgba(0, 0, 0, 0.12) @@ -9188,7 +9198,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-hover-border Color - rgba( $kendo-input-border, .16 ) + if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) rgba(0, 0, 0, 0.16) @@ -9238,7 +9248,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-focus-shadow List - 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) + 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) 0 0 0 2px rgba(0, 0, 0, 0.08) @@ -9338,7 +9348,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-outline-border Color - rgba( $kendo-button-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) rgba(66, 66, 66, 0.5) @@ -9368,7 +9378,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-outline-hover-border Color - rgba( $kendo-button-text, .8) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) rgba(66, 66, 66, 0.8) @@ -10537,7 +10547,7 @@ The following table lists the available variables for customizing the Default th $kendo-listview-item-selected-bg Color - rgba( $kendo-selected-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) rgba(255, 99, 88, 0.25) @@ -12579,7 +12589,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-outline-border Color - rgba( $kendo-picker-outline-text, .5) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) rgba(66, 66, 66, 0.5) @@ -12599,7 +12609,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-outline-hover-text Color - k-contrast-legacy( $kendo-picker-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) white @@ -12719,7 +12729,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-flat-hover-bg Color - rgba( $kendo-button-text, .04 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) rgba(66, 66, 66, 0.04) @@ -12739,7 +12749,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-flat-hover-border Color - rgba( $kendo-button-border, .16 ) + if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) rgba(0, 0, 0, 0.16) @@ -13329,7 +13339,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-bg Color - k-try-shade( $kendo-component-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) #ebebeb @@ -13379,7 +13389,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-value-text Color - k-contrast-legacy( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) white @@ -13389,7 +13399,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-value-border Color - k-try-shade( $kendo-progressbar-value-bg ) + if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) #eb5b51 @@ -14722,26 +14732,6 @@ The following table lists the available variables for customizing the Default th
Description
The border radius of the circular Skeleton.
- - $kendo-skeleton-item-bg - Color - rgba( $kendo-color-inverse, .2 ) - rgba(66, 66, 66, 0.2) - - -
Description
The background color of the Skeleton item.
- - - - $kendo-skeleton-wave-bg - Color - rgba( black, .04 ) - rgba(0, 0, 0, 0.04) - - -
Description
The background color of the Skeleton wave animation.
- - @@ -14959,7 +14949,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-border Color - k-try-shade( $kendo-switch-off-track-bg, 8% ) + if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) #ebebeb @@ -15059,7 +15049,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-focus-ring List - 2px solid rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) + 2px solid if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) 2px solid rgba(0, 0, 0, 0.08) @@ -15199,7 +15189,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-track-text Color - k-contrast-legacy( $kendo-switch-on-track-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) white @@ -15309,7 +15299,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-track-focus-ring List - 2px solid rgba( $kendo-switch-on-track-border, .25 ) + 2px solid if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-switch-on-track-border, .25 )) 2px solid rgba(255, 99, 88, 0.25) @@ -15688,7 +15678,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-alt-row-bg Color - rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -15718,7 +15708,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-hover-bg Color - k-color-darken($kendo-table-bg, 7%) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) #ededed @@ -15788,7 +15778,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-selected-bg Color - rgba($kendo-selected-bg, .25) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) rgba(255, 99, 88, 0.25) @@ -16654,7 +16644,7 @@ The following table lists the available variables for customizing the Default th $kendo-tooltip-bg Color - rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) + if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) rgba(0, 0, 0, 0.75) @@ -16664,7 +16654,7 @@ The following table lists the available variables for customizing the Default th $kendo-tooltip-text Color - k-contrast-legacy( $kendo-tooltip-bg ) + if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) white diff --git a/packages/fluent/docs/customization-action-sheet.md b/packages/fluent/docs/customization-action-sheet.md index 006bb3efe12..ba5cb0aa422 100644 --- a/packages/fluent/docs/customization-action-sheet.md +++ b/packages/fluent/docs/customization-action-sheet.md @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-actionsheet-item-icon-color - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) diff --git a/packages/fluent/docs/customization-appbar.md b/packages/fluent/docs/customization-appbar.md index 8b5952967a9..822dcf28955 100644 --- a/packages/fluent/docs/customization-appbar.md +++ b/packages/fluent/docs/customization-appbar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-appbar-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -165,7 +165,7 @@ The following table lists the available variables for customization. error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) diff --git a/packages/fluent/docs/customization-avatar.md b/packages/fluent/docs/customization-avatar.md index 4679d83242f..041a63e5fc5 100644 --- a/packages/fluent/docs/customization-avatar.md +++ b/packages/fluent/docs/customization-avatar.md @@ -89,7 +89,7 @@ The following table lists the available variables for customization. error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) diff --git a/packages/fluent/docs/customization-badge.md b/packages/fluent/docs/customization-badge.md index 191a0945dc7..6d70cfd7f37 100644 --- a/packages/fluent/docs/customization-badge.md +++ b/packages/fluent/docs/customization-badge.md @@ -267,7 +267,7 @@ The following table lists the available variables for customization. error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) diff --git a/packages/fluent/docs/customization-bottom-navigation.md b/packages/fluent/docs/customization-bottom-navigation.md index ec8d4514029..4c0bf279aae 100644 --- a/packages/fluent/docs/customization-bottom-navigation.md +++ b/packages/fluent/docs/customization-bottom-navigation.md @@ -225,7 +225,7 @@ The following table lists the available variables for customization. error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) diff --git a/packages/fluent/docs/customization-breadcrumb.md b/packages/fluent/docs/customization-breadcrumb.md index ea648b42c09..32001cecf22 100644 --- a/packages/fluent/docs/customization-breadcrumb.md +++ b/packages/fluent/docs/customization-breadcrumb.md @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-focus-shadow - 0 0 0 1px k-get-theme-color-var( neutral-30 ) + 0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-hover-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-active-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-focus-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-selected-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) diff --git a/packages/fluent/docs/customization-calendar.md b/packages/fluent/docs/customization-calendar.md index 5d03715afe4..f69ba74dc7d 100644 --- a/packages/fluent/docs/customization-calendar.md +++ b/packages/fluent/docs/customization-calendar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-calendar-today-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-calendar-today-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-calendar-today-hover-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-calendar-today-hover-bg - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-focus-shadow - inset 0 0 0 1px k-get-theme-color-var( neutral-130) + inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-calendar-navigation-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -740,7 +740,7 @@ The following table lists the available variables for customization. $kendo-calendar-range-bg - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) @@ -760,7 +760,7 @@ The following table lists the available variables for customization. $kendo-calendar-range-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -770,7 +770,7 @@ The following table lists the available variables for customization. $kendo-calendar-start-range-hover-shadow - inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -780,7 +780,7 @@ The following table lists the available variables for customization. $kendo-calendar-mid-range-hover-shadow - inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -790,7 +790,7 @@ The following table lists the available variables for customization. $kendo-calendar-end-range-hover-shadow - inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-card.md b/packages/fluent/docs/customization-card.md index 4779554a53d..fb58f4e0bc3 100644 --- a/packages/fluent/docs/customization-card.md +++ b/packages/fluent/docs/customization-card.md @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-card-header-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) diff --git a/packages/fluent/docs/customization-charts.md b/packages/fluent/docs/customization-charts.md index 02a26e2f94e..88c52751970 100644 --- a/packages/fluent/docs/customization-charts.md +++ b/packages/fluent/docs/customization-charts.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-series-a - k-get-theme-color-var( series-a-100 ) + if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 )) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-series-b - k-get-theme-color-var( series-b-100 ) + if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 )) @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-series-c - k-get-theme-color-var( series-c-100 ) + if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 )) @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-series-d - k-get-theme-color-var( series-d-100 ) + if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 )) @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-series-e - k-get-theme-color-var( series-e-100 ) + if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 )) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-series-f - k-get-theme-color-var( series-f-100 ) + if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 )) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-chart-major-lines - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-chart-minor-lines - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-chart-tooltip-color - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-chart-tooltip-color-inverse - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-chart-crosshair-background - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-chart-crosshair-shared-tooltip-color - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-chart-notes-background - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-chart-handle-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-color-error-bars-background - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) @@ -510,7 +510,7 @@ The following table lists the available variables for customization. $kendo-treemap-title-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -520,7 +520,7 @@ The following table lists the available variables for customization. $kendo-treemap-title-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) diff --git a/packages/fluent/docs/customization-chat.md b/packages/fluent/docs/customization-chat.md index 7c2fc47c177..74f7ab854b0 100644 --- a/packages/fluent/docs/customization-chat.md +++ b/packages/fluent/docs/customization-chat.md @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-chat-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-chat-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-chat-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -550,7 +550,7 @@ The following table lists the available variables for customization. $kendo-chat-alt-bubble-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -620,7 +620,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -640,7 +640,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-hover-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-hover-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-checkbox.md b/packages/fluent/docs/customization-checkbox.md index 4a0a002c70b..7cdaaf9cd7e 100644 --- a/packages/fluent/docs/customization-checkbox.md +++ b/packages/fluent/docs/customization-checkbox.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-checkbox-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-checkbox-hover-text - k-get-theme-color( neutral, 130 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-checkbox-hover-checked-bg - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-checkbox-hover-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-outline - 1px solid k-get-theme-color-var( neutral-130 ) + 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-checkbox-indeterminate-text - k-get-theme-color( primary, 100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-checkbox-indeterminate-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-checkbox-hover-indeterminate-text - k-get-theme-color( primary, 110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-checkbox-hover-indeterminate-border - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-text - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-checked-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-checked-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-indeterminate-text - k-get-theme-color( neutral, 60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 )) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-checkbox-disabled-indeterminate-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -530,7 +530,7 @@ The following table lists the available variables for customization. $kendo-checkbox-ripple-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-chip.md b/packages/fluent/docs/customization-chip.md index df74931f07e..ec4d8f9970b 100644 --- a/packages/fluent/docs/customization-chip.md +++ b/packages/fluent/docs/customization-chip.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-disabled-border - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) diff --git a/packages/fluent/docs/customization-cologradient.md b/packages/fluent/docs/customization-cologradient.md index 43290c9e4d7..9a079b20cb9 100644 --- a/packages/fluent/docs/customization-cologradient.md +++ b/packages/fluent/docs/customization-cologradient.md @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-focus-border - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-canvas-rectangle-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-slider-border-width - 1px + if($kendo-enable-color-system, 0, 1px) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-slider-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-draghandle-border - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-draghandle-shadow - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-draghandle-focus-border - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-draghandle-focus-shadow - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-draghandle-hover-shadow - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-color-preview.md b/packages/fluent/docs/customization-color-preview.md index afcbd416cdb..563261f0525 100644 --- a/packages/fluent/docs/customization-color-preview.md +++ b/packages/fluent/docs/customization-color-preview.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-color-preview-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-color-preview-hover-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-color-preview-no-color-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-color-preview-no-color-text - k-get-theme-color( error, 190 ) + if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 )) diff --git a/packages/fluent/docs/customization-color-system.md b/packages/fluent/docs/customization-color-system.md new file mode 100644 index 00000000000..511d3676e2e --- /dev/null +++ b/packages/fluent/docs/customization-color-system.md @@ -0,0 +1,48 @@ +--- +title: Customizing Color System +description: "Refer to the list of the Kendo UI Fluent theme variables available for customization." +slug: variables_kendothemefluent_color-system +position: 9 +--- + +# Customizing Color System + +## Variables + +The following table lists the available variables for customization. + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-colors$_default-colors
Description
The global default Colors map.
+
+ +## Suggested Links + +* [Styling Overview]({% slug themesandstyles %}) +* [Web Font Icons]({% slug icons %}) +* [Preview of the Themed Components](../) + diff --git a/packages/fluent/docs/customization-coloreditor.md b/packages/fluent/docs/customization-coloreditor.md index 070c18ec1f2..db12a947e2e 100644 --- a/packages/fluent/docs/customization-coloreditor.md +++ b/packages/fluent/docs/customization-coloreditor.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-color-editor-focus-border - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) diff --git a/packages/fluent/docs/customization-colorpalette.md b/packages/fluent/docs/customization-colorpalette.md index fea3fe9818d..54ea6f45efc 100644 --- a/packages/fluent/docs/customization-colorpalette.md +++ b/packages/fluent/docs/customization-colorpalette.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-color-palette-tile-focus-outline - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-color-palette-tile-focus-shadow - inset 0 0 0 2px $kendo-color-white + inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-color-palette-tile-hover-outline - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-color-palette-tile-hover-shadow - inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white + inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) diff --git a/packages/fluent/docs/customization-common.md b/packages/fluent/docs/customization-common.md index 963c014ce68..c5d7b1a9b4c 100644 --- a/packages/fluent/docs/customization-common.md +++ b/packages/fluent/docs/customization-common.md @@ -223,7 +223,7 @@ The following table lists the available variables for customization. $kendo-tooltip-brand-colors ( - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, success: success, warning: warning, diff --git a/packages/fluent/docs/customization-dock-manager.md b/packages/fluent/docs/customization-dock-manager.md index c33e609c012..88818261102 100644 --- a/packages/fluent/docs/customization-dock-manager.md +++ b/packages/fluent/docs/customization-dock-manager.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-pane-header-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-unpinned-container-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-hover-bg - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-hover-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg - color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-draggable.md b/packages/fluent/docs/customization-draggable.md index 833fa3bd37c..93381c26b2d 100644 --- a/packages/fluent/docs/customization-draggable.md +++ b/packages/fluent/docs/customization-draggable.md @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-drop-hint-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-drawer.md b/packages/fluent/docs/customization-drawer.md index 9489e0a7d66..56508ca62a9 100644 --- a/packages/fluent/docs/customization-drawer.md +++ b/packages/fluent/docs/customization-drawer.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-drawer-scrollbar-color - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-drawer-scrollbar-bg - k-get-theme-color-var( neutral-40 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-drawer-scrollbar-hover-color - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-ripple-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-icon-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-hover-text - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-hover-icon-text - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-focus-shadow - inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) + inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-selected-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-drawer-item-selected-icon-text - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) diff --git a/packages/fluent/docs/customization-dropzone.md b/packages/fluent/docs/customization-dropzone.md index 72336f1d344..a31193f0085 100644 --- a/packages/fluent/docs/customization-dropzone.md +++ b/packages/fluent/docs/customization-dropzone.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-dropzone-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
The text color of the DropZone.
+
Description
Text color of the dropzone.
@@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 )) @@ -150,11 +150,11 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-hover-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) -
Description
The text color of the hovered DropZone icon.
+
Description
Text color of the icon when the dropzone is hovered.
diff --git a/packages/fluent/docs/customization-editor.md b/packages/fluent/docs/customization-editor.md index 3c007265eb0..c96d2842dc1 100644 --- a/packages/fluent/docs/customization-editor.md +++ b/packages/fluent/docs/customization-editor.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-editor-selected-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-editor-selected-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg - k-get-theme-color-var( primary-60 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-editor-resize-handle-border - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-editor-resize-handle-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-editor-selectednode-outline-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-expander.md b/packages/fluent/docs/customization-expander.md index 7c69bde1a81..a41f9e3fa5a 100644 --- a/packages/fluent/docs/customization-expander.md +++ b/packages/fluent/docs/customization-expander.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-expander-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-expander-shadow - inset 0 0 0 2px k-get-theme-color-var( neutral-30 ) + inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-expander-focus-outline - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-expander-focus-shadow - inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 ) + inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-expander-header-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-expander-header-hover-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-expander-title-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-filter.md b/packages/fluent/docs/customization-filter.md index 449028b3940..3b5dda24178 100644 --- a/packages/fluent/docs/customization-filter.md +++ b/packages/fluent/docs/customization-filter.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-filter-preview-field-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-filter-preview-operator-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-filter-toolbar-focus-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-floating-action-button.md b/packages/fluent/docs/customization-floating-action-button.md index f25e9550593..06fac2e6158 100644 --- a/packages/fluent/docs/customization-floating-action-button.md +++ b/packages/fluent/docs/customization-floating-action-button.md @@ -445,7 +445,7 @@ The following table lists the available variables for customization. $kendo-fab-item-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -465,7 +465,7 @@ The following table lists the available variables for customization. $kendo-fab-item-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -495,7 +495,7 @@ The following table lists the available variables for customization. $kendo-fab-item-hover-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -505,7 +505,7 @@ The following table lists the available variables for customization. $kendo-fab-item-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -525,7 +525,7 @@ The following table lists the available variables for customization. $kendo-fab-item-focus-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -555,7 +555,7 @@ The following table lists the available variables for customization. $kendo-fab-item-active-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) diff --git a/packages/fluent/docs/customization-form.md b/packages/fluent/docs/customization-form.md index 3c6b3a7a397..910ecad1fff 100644 --- a/packages/fluent/docs/customization-form.md +++ b/packages/fluent/docs/customization-form.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-form-hint-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-fieldset-legend-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-gantt.md b/packages/fluent/docs/customization-gantt.md index 6471688c944..9ad805e1775 100644 --- a/packages/fluent/docs/customization-gantt.md +++ b/packages/fluent/docs/customization-gantt.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-gantt-nonwork-bg - rgba( $kendo-color-black, .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 ) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-gantt-line-selected-fill - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-gantt-dot-bg - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-gantt-dot-border - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-gantt-dot-hover-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-gantt-dot-hover-border - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-gantt-milestone-selected-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-gantt-milestone-selected-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-bg - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-progress-bg - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-selected-bg - k-get-theme-color-var( primary-50 ) + if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-progress-selected-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-bg - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 )) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-progress-bg - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-progress-hover-bg - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-selected-bg - k-get-theme-color-var( primary-50 ) + if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 )) @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-selected-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-progress-selected-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-gantt-planned-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-gantt-planned-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-gantt-planned-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -620,7 +620,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-bg - k-get-theme-color-var( error-160 ) + if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 )) @@ -640,7 +640,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-bg-lighter - k-get-theme-color-var( error-110) + if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110)) @@ -650,7 +650,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-hover-bg - k-get-theme-color-var( error-190 ) + if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-gantt-advanced-bg - k-get-theme-color-var( success-160 ) + if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 )) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-gantt-advanced-bg-lighter - k-get-theme-color-var( success-110 ) + if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 )) @@ -680,7 +680,7 @@ The following table lists the available variables for customization. $kendo-gantt-advanced-hover-bg - k-get-theme-color-var( success-190 ) + if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 )) @@ -690,7 +690,7 @@ The following table lists the available variables for customization. $kendo-gantt-action-on-offset-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -740,7 +740,7 @@ The following table lists the available variables for customization. $kendo-gantt-validation-tooltip-valid-border - k-get-theme-color-var( success-100 ) + if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 )) @@ -750,7 +750,7 @@ The following table lists the available variables for customization. $kendo-gantt-validation-tooltip-invalid-border - k-get-theme-color-var( error-100 ) + if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) diff --git a/packages/fluent/docs/customization-grid.md b/packages/fluent/docs/customization-grid.md index c8e8e9aee23..582bc403f4a 100644 --- a/packages/fluent/docs/customization-grid.md +++ b/packages/fluent/docs/customization-grid.md @@ -500,7 +500,7 @@ The following table lists the available variables for customization. $kendo-grid-header-icon-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -810,7 +810,7 @@ The following table lists the available variables for customization. $kendo-grid-sort-indicator-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -820,7 +820,7 @@ The following table lists the available variables for customization. $kendo-grid-sort-indicator-order-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -830,7 +830,7 @@ The following table lists the available variables for customization. $kendo-grid-sorted-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -930,7 +930,7 @@ The following table lists the available variables for customization. $kendo-grid-group-indicator-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -940,7 +940,7 @@ The following table lists the available variables for customization. $kendo-grid-group-indicator-icon-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -970,7 +970,7 @@ The following table lists the available variables for customization. $kendo-grid-group-drop-hint-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -1010,7 +1010,7 @@ The following table lists the available variables for customization. $kendo-grid-sticky-border - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 )) @@ -1110,7 +1110,7 @@ The following table lists the available variables for customization. $kendo-grid-sticky-selected-hover-bg - $kendo-grid-selected-hover-bg + if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) @@ -1540,7 +1540,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-hover-bg - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -1550,7 +1550,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-active-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-imageeditor.md b/packages/fluent/docs/customization-imageeditor.md index a1fc95ec434..595eaedd62d 100644 --- a/packages/fluent/docs/customization-imageeditor.md +++ b/packages/fluent/docs/customization-imageeditor.md @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-image-editor-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-image-editor-content-bg - k-get-theme-color-var( neutral-50 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-image-editor-crop-border - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) diff --git a/packages/fluent/docs/customization-input.md b/packages/fluent/docs/customization-input.md index 4a24d2f4862..1ce1bd6740d 100644 --- a/packages/fluent/docs/customization-input.md +++ b/packages/fluent/docs/customization-input.md @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-input-solid-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-input-solid-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-input-solid-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-input-solid-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-input-solid-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-input-solid-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-input-outline-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-input-outline-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-input-outline-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-input-outline-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-input-outline-focus-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -490,7 +490,7 @@ The following table lists the available variables for customization. $kendo-input-outline-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -560,7 +560,7 @@ The following table lists the available variables for customization. $kendo-input-flat-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -570,7 +570,7 @@ The following table lists the available variables for customization. $kendo-input-flat-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-input-flat-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-input-flat-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-input-flat-hover-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-input-flat-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -620,7 +620,7 @@ The following table lists the available variables for customization. $kendo-input-flat-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-input-flat-focus-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -640,7 +640,7 @@ The following table lists the available variables for customization. $kendo-input-flat-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -710,7 +710,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -720,7 +720,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -730,7 +730,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-border - k-get-theme-color-var( neutral-130 )!default + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default @@ -740,7 +740,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -750,7 +750,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-hover-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -760,7 +760,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -770,7 +770,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -780,7 +780,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-focus-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -790,7 +790,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -840,7 +840,7 @@ The following table lists the available variables for customization. $kendo-picker-solid-disabled-bg - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 )) @@ -860,7 +860,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -880,7 +880,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -890,7 +890,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -900,7 +900,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-bg - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -920,7 +920,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -930,7 +930,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-focus-bg - $kendo-color-white!default + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -940,7 +940,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -950,7 +950,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-focus-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -960,7 +960,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-focus-bg - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -970,7 +970,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -1010,7 +1010,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -1030,7 +1030,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -1040,7 +1040,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -1050,7 +1050,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) @@ -1060,7 +1060,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -1070,7 +1070,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -1080,7 +1080,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-focus-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -1090,7 +1090,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-focus-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -1343,7 +1343,7 @@ The following table lists the available variables for customization. $kendo-input-prefix-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) @@ -1353,7 +1353,7 @@ The following table lists the available variables for customization. $kendo-input-suffix-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) @@ -1453,7 +1453,7 @@ The following table lists the available variables for customization. $kendo-input-placeholder-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -1473,7 +1473,7 @@ The following table lists the available variables for customization. $kendo-input-clear-value-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-list.md b/packages/fluent/docs/customization-list.md index c3f21bfec57..f22e5bddc25 100644 --- a/packages/fluent/docs/customization-list.md +++ b/packages/fluent/docs/customization-list.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-list-item-icon-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -358,7 +358,7 @@ The following table lists the available variables for customization. $kendo-list-header-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -368,7 +368,7 @@ The following table lists the available variables for customization. $kendo-list-header-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -398,7 +398,7 @@ The following table lists the available variables for customization. $kendo-list-item-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -408,7 +408,7 @@ The following table lists the available variables for customization. $kendo-list-item-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -418,7 +418,7 @@ The following table lists the available variables for customization. $kendo-list-item-hover-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) @@ -428,7 +428,7 @@ The following table lists the available variables for customization. $kendo-list-item-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -438,7 +438,7 @@ The following table lists the available variables for customization. $kendo-list-item-focus-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -448,7 +448,7 @@ The following table lists the available variables for customization. $kendo-list-item-focus-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -458,7 +458,7 @@ The following table lists the available variables for customization. $kendo-list-item-focus-shadow - inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) + inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -468,7 +468,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-bg - k-get-theme-color-var( neutral-40 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 )) @@ -478,7 +478,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -488,7 +488,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-hover-bg - k-get-theme-color-var( neutral-50 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 )) @@ -498,7 +498,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -508,7 +508,7 @@ The following table lists the available variables for customization. $kendo-list-item-disabled-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -518,7 +518,7 @@ The following table lists the available variables for customization. $kendo-list-item-disabled-text - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -528,7 +528,7 @@ The following table lists the available variables for customization. $kendo-list-group-item-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -538,7 +538,7 @@ The following table lists the available variables for customization. $kendo-list-group-item-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -568,7 +568,7 @@ The following table lists the available variables for customization. $kendo-list-no-data-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) diff --git a/packages/fluent/docs/customization-listbox.md b/packages/fluent/docs/customization-listbox.md index 69a821943ea..16456db25d4 100644 --- a/packages/fluent/docs/customization-listbox.md +++ b/packages/fluent/docs/customization-listbox.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listbox-drop-hint-border-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-listview.md b/packages/fluent/docs/customization-listview.md index 20c0c003cbb..8a1909cedfd 100644 --- a/packages/fluent/docs/customization-listview.md +++ b/packages/fluent/docs/customization-listview.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 )) diff --git a/packages/fluent/docs/customization-loader.md b/packages/fluent/docs/customization-loader.md index c5caeeb4d1b..7ae497bba0e 100644 --- a/packages/fluent/docs/customization-loader.md +++ b/packages/fluent/docs/customization-loader.md @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-loader-container-panel-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -432,7 +432,7 @@ The following table lists the available variables for customization. ( primary: primary, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, error: error, success: success, diff --git a/packages/fluent/docs/customization-map.md b/packages/fluent/docs/customization-map.md index 42811fa66ca..f673d5c679b 100644 --- a/packages/fluent/docs/customization-map.md +++ b/packages/fluent/docs/customization-map.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-map-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-map-navigator-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-map-navigator-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-map-navigator-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-map-attribution-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-map-marker-fill - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-mediaplayer.md b/packages/fluent/docs/customization-mediaplayer.md index d98bede8d8c..31a703b0d7e 100644 --- a/packages/fluent/docs/customization-mediaplayer.md +++ b/packages/fluent/docs/customization-mediaplayer.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-media-player-overlay-bg - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-media-player-quality-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-media-player-titlebar-bg - rgba( $kendo-color-black, .4 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 ) diff --git a/packages/fluent/docs/customization-menu.md b/packages/fluent/docs/customization-menu.md index 4fc84f5ee1d..754701d8244 100644 --- a/packages/fluent/docs/customization-menu.md +++ b/packages/fluent/docs/customization-menu.md @@ -528,7 +528,7 @@ The following table lists the available variables for customization. $kendo-menu-popup-item-focus-outline - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -618,7 +618,7 @@ The following table lists the available variables for customization. $kendo-menu-icon-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-notification.md b/packages/fluent/docs/customization-notification.md index 18abacdb0c5..c3f15acf932 100644 --- a/packages/fluent/docs/customization-notification.md +++ b/packages/fluent/docs/customization-notification.md @@ -186,7 +186,7 @@ The following table lists the available variables for customization. warning: warning, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) diff --git a/packages/fluent/docs/customization-orgchart.md b/packages/fluent/docs/customization-orgchart.md index f26c3455330..c8a449b3269 100644 --- a/packages/fluent/docs/customization-orgchart.md +++ b/packages/fluent/docs/customization-orgchart.md @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-orgchart-line-text - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) diff --git a/packages/fluent/docs/customization-pager.md b/packages/fluent/docs/customization-pager.md index eea8f9620d2..8f44e06f62f 100644 --- a/packages/fluent/docs/customization-pager.md +++ b/packages/fluent/docs/customization-pager.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-pager-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-pager-focus-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-pager-sizes-label-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-pager-info-label-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-panelbar.md b/packages/fluent/docs/customization-panelbar.md index 9718fa23270..6a105b19ad5 100644 --- a/packages/fluent/docs/customization-panelbar.md +++ b/packages/fluent/docs/customization-panelbar.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-hover-text - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-selected-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-panelbar-selected-marker - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -510,7 +510,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-hover-text - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-selected-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) diff --git a/packages/fluent/docs/customization-pdf-viewer.md b/packages/fluent/docs/customization-pdf-viewer.md index ada3d6c7721..8c1702ab382 100644 --- a/packages/fluent/docs/customization-pdf-viewer.md +++ b/packages/fluent/docs/customization-pdf-viewer.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-canvas-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -114,7 +114,7 @@ The following table lists the available variables for customization. -
Description
The text color of the PDFViewer canvas.
+
Description
Text color of the PDF viewer canvas.
diff --git a/packages/fluent/docs/customization-pivotgrid.md b/packages/fluent/docs/customization-pivotgrid.md index b8cb32dbcf5..f61908a2152 100644 --- a/packages/fluent/docs/customization-pivotgrid.md +++ b/packages/fluent/docs/customization-pivotgrid.md @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-headers-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-total-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-configurator-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) diff --git a/packages/fluent/docs/customization-progressbar.md b/packages/fluent/docs/customization-progressbar.md index a1198ea2dd8..6fb5350b2a6 100644 --- a/packages/fluent/docs/customization-progressbar.md +++ b/packages/fluent/docs/customization-progressbar.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-progressbar-bg - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-progressbar-disabled-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-progressbar-disabled-text - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-disabled-bg - k-get-theme-color-var( primary-30 ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-progressbar-indeterminate-bg - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-progressbar-indeterminate-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-progressbar-indeterminate-gradient-horizontal - linear-gradient(270deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%) + linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-progressbar-indeterminate-gradient-vertical - linear-gradient(180deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%) + linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-circular-progressbar-arc-stroke - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-radio.md b/packages/fluent/docs/customization-radio.md index 2cc99acb127..3bd7343a921 100644 --- a/packages/fluent/docs/customization-radio.md +++ b/packages/fluent/docs/customization-radio.md @@ -99,7 +99,7 @@ The following table lists the available variables for customization. $kendo-radio-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -119,7 +119,7 @@ The following table lists the available variables for customization. $kendo-radio-hover-text - k-get-theme-color( neutral, 130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) @@ -149,7 +149,7 @@ The following table lists the available variables for customization. $kendo-radio-checked-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -159,7 +159,7 @@ The following table lists the available variables for customization. $kendo-radio-checked-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -179,7 +179,7 @@ The following table lists the available variables for customization. $kendo-radio-hover-checked-text - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -189,7 +189,7 @@ The following table lists the available variables for customization. $kendo-radio-hover-checked-border - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -219,7 +219,7 @@ The following table lists the available variables for customization. $kendo-radio-focus-outline - 1px solid k-get-theme-color-var( neutral-130 ) + 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -249,7 +249,7 @@ The following table lists the available variables for customization. $kendo-radio-disabled-text - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -259,7 +259,7 @@ The following table lists the available variables for customization. $kendo-radio-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -439,7 +439,7 @@ The following table lists the available variables for customization. $kendo-radio-ripple-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-rating.md b/packages/fluent/docs/customization-rating.md index 5c2f8c9d42c..effcf0abd9d 100644 --- a/packages/fluent/docs/customization-rating.md +++ b/packages/fluent/docs/customization-rating.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-rating-item-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-rating-item-hover-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-rating-item-selected-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-rating-item-selected-hover-text - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) diff --git a/packages/fluent/docs/customization-scheduler.md b/packages/fluent/docs/customization-scheduler.md index fbfd559a5ab..d71a98aa2fd 100644 --- a/packages/fluent/docs/customization-scheduler.md +++ b/packages/fluent/docs/customization-scheduler.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-scheduler-selected-bg - k-get-theme-color-var( primary-20 ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-selected-bg - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-scheduler-nonwork-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -510,7 +510,7 @@ The following table lists the available variables for customization. $kendo-scheduler-othermonth-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-scheduler-yearview-indicator-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-scheduler-yearview-indicator-selected-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -650,7 +650,7 @@ The following table lists the available variables for customization. $kendo-scheduler-tooltip-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-scheduler-tooltip-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -810,7 +810,7 @@ The following table lists the available variables for customization. $kendo-scheduler-marquee-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-scrollview.md b/packages/fluent/docs/customization-scrollview.md index 77b86f75e2d..4c991ada66d 100644 --- a/packages/fluent/docs/customization-scrollview.md +++ b/packages/fluent/docs/customization-scrollview.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-hover-shadow - 0 0 0 1px k-get-theme-color-var( neutral-30 ) + 0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-focus-shadow - 0 0 0 1px k-get-theme-color-var( neutral-130 ) + 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-hover-shadow - 0 0 0 2px k-get-theme-color-var( neutral-30 ) + 0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-focus-shadow - 0 0 0 2px k-get-theme-color-var( neutral-130 ) + 0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-scrollview-navigation-color - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-scrollview-navigation-focus-shadow - 0 0 0 1px k-get-theme-color-var( neutral-130 ) + 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-searchbox.md b/packages/fluent/docs/customization-searchbox.md index a1f1736995d..0fac73c96e9 100644 --- a/packages/fluent/docs/customization-searchbox.md +++ b/packages/fluent/docs/customization-searchbox.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-searchbox-icon-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-signature.md b/packages/fluent/docs/customization-signature.md index a4ea1c0f368..6991f483a5f 100644 --- a/packages/fluent/docs/customization-signature.md +++ b/packages/fluent/docs/customization-signature.md @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-signature-line-color - rgba( k-get-theme-color( info, 100 ), .4 ) + rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 ) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-signature-line-disabled-color - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) diff --git a/packages/fluent/docs/customization-skeleton.md b/packages/fluent/docs/customization-skeleton.md index 17be9bb5f91..fe13208cf26 100644 --- a/packages/fluent/docs/customization-skeleton.md +++ b/packages/fluent/docs/customization-skeleton.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-skeleton-item-bg - k-get-theme-color-var( neutral-50 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-skeleton-wave-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) diff --git a/packages/fluent/docs/customization-slider.md b/packages/fluent/docs/customization-slider.md index 40a8302331b..65a42b90120 100644 --- a/packages/fluent/docs/customization-slider.md +++ b/packages/fluent/docs/customization-slider.md @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-slider-track-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-slider-track-hover-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-slider-track-focus-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-slider-selection-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-slider-thumb-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-slider-thumb-hover-border - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-slider-thumb-active-border - k-get-theme-color-var( primary-130 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 )) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-slider-disabled-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 )) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-slider-track-disabled-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-slider-selection-disabled-bg - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-slider-thumb-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) diff --git a/packages/fluent/docs/customization-split-button.md b/packages/fluent/docs/customization-split-button.md index 2cb1512264c..29a64d80171 100644 --- a/packages/fluent/docs/customization-split-button.md +++ b/packages/fluent/docs/customization-split-button.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-split-button-arrow-delimiter-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) diff --git a/packages/fluent/docs/customization-splitter.md b/packages/fluent/docs/customization-splitter.md index bcbab11e92b..1a79404d617 100644 --- a/packages/fluent/docs/customization-splitter.md +++ b/packages/fluent/docs/customization-splitter.md @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-splitbar-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-splitbar-hover-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-splitbar-selected-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-spreadsheet.md b/packages/fluent/docs/customization-spreadsheet.md index c3459086d55..6f0d358242e 100644 --- a/packages/fluent/docs/customization-spreadsheet.md +++ b/packages/fluent/docs/customization-spreadsheet.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-primary-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-primary-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-header-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-table-header-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selected-text - k-get-theme-color-var( primary-160 ) + if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 )) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selected-bg - k-get-theme-color-var( primary-30 ) + if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 )) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selected-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-resize-handle-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-cell-comment-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-cell-dirty-border - k-get-theme-color-var( error-100 ) + if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 )) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -680,7 +680,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -690,7 +690,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -700,7 +700,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-hover-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -710,7 +710,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-hover-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) @@ -720,7 +720,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-hover-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -730,7 +730,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-active-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -740,7 +740,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-active-bg - k-get-theme-color-var( neutral-30 ) + f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) @@ -750,7 +750,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-button-active-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -760,7 +760,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-filter-menu-icon-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -770,7 +770,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-error-border - k-get-theme-color-var( error-190 ) + if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 )) @@ -940,7 +940,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-handle-outline-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -950,7 +950,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-handle-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-stepper.md b/packages/fluent/docs/customization-stepper.md index 6f3db6e51b5..37735d997e1 100644 --- a/packages/fluent/docs/customization-stepper.md +++ b/packages/fluent/docs/customization-stepper.md @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-text - $kendo-color-white + if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-hover-bg - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-disabled-bg - k-get-theme-color-var( primary-30 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 )) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-current-bg - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) @@ -510,7 +510,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-success-text - k-get-theme-color-var( success-190 ) + if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) @@ -520,7 +520,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-error-text - k-get-theme-color-var( error-190 ) + if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) @@ -560,7 +560,7 @@ The following table lists the available variables for customization. $kendo-stepper-optional-label-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-switch.md b/packages/fluent/docs/customization-switch.md index f8fc880fbe8..c50d855ee4f 100644 --- a/packages/fluent/docs/customization-switch.md +++ b/packages/fluent/docs/customization-switch.md @@ -94,7 +94,7 @@ The following table lists the available variables for customization. $kendo-switch-focus-ring - 1px solid k-get-theme-color-var( neutral-130 ) + 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -124,7 +124,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -154,7 +154,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -184,7 +184,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-border - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -214,7 +214,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -224,7 +224,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-bg - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -244,7 +244,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -254,7 +254,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-hover-bg - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -274,7 +274,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-hover-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -284,7 +284,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-disabled-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -304,7 +304,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -314,7 +314,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -324,7 +324,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -344,7 +344,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-hover-bg - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -354,7 +354,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-hover-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -374,7 +374,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -384,7 +384,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -404,7 +404,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-disabled-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -414,7 +414,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-disabled-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -424,7 +424,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-disabled-border - $kendo-switch-on-track-disabled-bg + if($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg) @@ -434,7 +434,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -464,7 +464,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-hover-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -494,7 +494,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-disabled-bg - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 )) @@ -514,7 +514,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-disabled-border - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) diff --git a/packages/fluent/docs/customization-table.md b/packages/fluent/docs/customization-table.md index c297ae7dfad..ca74c0dd249 100644 --- a/packages/fluent/docs/customization-table.md +++ b/packages/fluent/docs/customization-table.md @@ -168,7 +168,7 @@ The following table lists the available variables for customization. $kendo-table-header-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -408,7 +408,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg - k-get-theme-color-var( primary-20 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 )) @@ -438,7 +438,7 @@ The following table lists the available variables for customization. $kendo-table-selected-hover-bg - k-get-theme-color-var( primary-30 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 )) diff --git a/packages/fluent/docs/customization-tabstrip.md b/packages/fluent/docs/customization-tabstrip.md index 9cdbbc8ce0d..8724d3bddbe 100644 --- a/packages/fluent/docs/customization-tabstrip.md +++ b/packages/fluent/docs/customization-tabstrip.md @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-selected-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-selected-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-dragging-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-indicator-color - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-taskboard.md b/packages/fluent/docs/customization-taskboard.md index f5d75894880..76ed6915ec0 100644 --- a/packages/fluent/docs/customization-taskboard.md +++ b/packages/fluent/docs/customization-taskboard.md @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-taskboard-column-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-taskboard-column-focus-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-selected-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -640,7 +640,7 @@ The following table lists the available variables for customization. $kendo-taskboard-drag-placeholder-bg - k-get-theme-color-var( neutral-50 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) diff --git a/packages/fluent/docs/customization-tilelayout.md b/packages/fluent/docs/customization-tilelayout.md index 68aa86ea507..b874ec55865 100644 --- a/packages/fluent/docs/customization-tilelayout.md +++ b/packages/fluent/docs/customization-tilelayout.md @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-tile-layout-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) diff --git a/packages/fluent/docs/customization-timeline.md b/packages/fluent/docs/customization-timeline.md index a2bae4f25bf..8eafd1930bc 100644 --- a/packages/fluent/docs/customization-timeline.md +++ b/packages/fluent/docs/customization-timeline.md @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-timeline-track-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-timeline-track-border-color - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-timeline-flag-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-timeline-card-header-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-timeline-card-body-scroll-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -570,7 +570,7 @@ The following table lists the available variables for customization. $kendo-timeline-circle-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-toolbar.md b/packages/fluent/docs/customization-toolbar.md index af541676908..962d4bf2fcf 100644 --- a/packages/fluent/docs/customization-toolbar.md +++ b/packages/fluent/docs/customization-toolbar.md @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-toolbar-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-toolbar-separator-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-toolbar-item-focus-outline-color - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-tooltip.md b/packages/fluent/docs/customization-tooltip.md index 65cd82bdf3c..68e2ced430a 100644 --- a/packages/fluent/docs/customization-tooltip.md +++ b/packages/fluent/docs/customization-tooltip.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-tooltip-bg - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-tooltip-button-text - k-get-theme-color-var( neutral-130, initial ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial )) diff --git a/packages/fluent/docs/customization-treeview.md b/packages/fluent/docs/customization-treeview.md index dc62f9ae6ae..49dda37c97c 100644 --- a/packages/fluent/docs/customization-treeview.md +++ b/packages/fluent/docs/customization-treeview.md @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-focus-shadow - inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) + inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization-upload.md b/packages/fluent/docs/customization-upload.md index c9e741754f3..9a2762e62d0 100644 --- a/packages/fluent/docs/customization-upload.md +++ b/packages/fluent/docs/customization-upload.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-text - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-upload-progress-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-upload-success-text - k-get-theme-color-var( success-190 ) + if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-upload-success-bg - k-get-theme-color-var( success-190 ) + if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-upload-error-text - k-get-theme-color-var( error-190 ) + if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-upload-error-bg - k-get-theme-color-var( error-190 ) + if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) diff --git a/packages/fluent/docs/customization-window.md b/packages/fluent/docs/customization-window.md index 9b55a1dc022..b7ece6d61d3 100644 --- a/packages/fluent/docs/customization-window.md +++ b/packages/fluent/docs/customization-window.md @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-window-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-window-titlebar-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-window-titlebar-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) diff --git a/packages/fluent/docs/customization-wizard.md b/packages/fluent/docs/customization-wizard.md index 0ab98135bac..41010b818e4 100644 --- a/packages/fluent/docs/customization-wizard.md +++ b/packages/fluent/docs/customization-wizard.md @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-wizard-step-focus-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index b9c96226bb6..ab7e3900afa 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -227,7 +227,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-tooltip-brand-colors ( - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, success: success, warning: warning, @@ -693,7 +693,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-actionsheet-item-icon-color - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) @@ -1093,7 +1093,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-appbar-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -1118,7 +1118,7 @@ The following table lists the available variables for customizing the Fluent the error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) @@ -1219,7 +1219,7 @@ The following table lists the available variables for customizing the Fluent the error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) @@ -1498,7 +1498,7 @@ The following table lists the available variables for customizing the Fluent the error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) @@ -1735,7 +1735,7 @@ The following table lists the available variables for customizing the Fluent the error: error, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) @@ -1947,7 +1947,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-breadcrumb-focus-shadow - 0 0 0 1px k-get-theme-color-var( neutral-30 ) + 0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -2097,7 +2097,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-breadcrumb-link-hover-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -2137,7 +2137,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-breadcrumb-link-active-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) @@ -2157,7 +2157,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-breadcrumb-link-focus-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -2227,7 +2227,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-breadcrumb-link-selected-text - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -2961,7 +2961,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-header-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -3261,7 +3261,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-today-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -3271,7 +3271,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-today-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -3281,7 +3281,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-today-hover-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -3291,7 +3291,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-today-hover-bg - k-get-theme-color-var( primary-120 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) @@ -3451,7 +3451,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-cell-focus-shadow - inset 0 0 0 1px k-get-theme-color-var( neutral-130) + inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) @@ -3491,7 +3491,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-navigation-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -3561,7 +3561,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-range-bg - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) @@ -3581,7 +3581,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-range-border - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -3591,7 +3591,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-start-range-hover-shadow - inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -3601,7 +3601,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-mid-range-hover-shadow - inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -3611,7 +3611,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-calendar-end-range-hover-shadow - inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) + inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -4041,7 +4041,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-card-header-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -4401,7 +4401,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-a - k-get-theme-color-var( series-a-100 ) + if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 )) @@ -4411,7 +4411,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-b - k-get-theme-color-var( series-b-100 ) + if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 )) @@ -4421,7 +4421,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-c - k-get-theme-color-var( series-c-100 ) + if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 )) @@ -4431,7 +4431,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-d - k-get-theme-color-var( series-d-100 ) + if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 )) @@ -4441,7 +4441,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-e - k-get-theme-color-var( series-e-100 ) + if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 )) @@ -4451,7 +4451,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-series-f - k-get-theme-color-var( series-f-100 ) + if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 )) @@ -4561,7 +4561,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-major-lines - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -4571,7 +4571,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-minor-lines - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -4641,7 +4641,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-tooltip-color - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -4651,7 +4651,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-tooltip-color-inverse - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -4661,7 +4661,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-crosshair-background - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -4671,7 +4671,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-crosshair-shared-tooltip-color - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) @@ -4701,7 +4701,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-notes-background - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -4731,7 +4731,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chart-handle-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -4791,7 +4791,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-error-bars-background - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) @@ -4881,7 +4881,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-treemap-title-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -4891,7 +4891,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-treemap-title-text - $kendo-color-black + if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) @@ -5361,7 +5361,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-bg - k-get-theme-color-var( neutral-10 ) + if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) @@ -5371,7 +5371,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-text - k-get-theme-color-var( neutral-190 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) @@ -5381,7 +5381,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -5451,7 +5451,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-alt-bubble-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5521,7 +5521,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-quick-reply-text - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5531,7 +5531,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-quick-reply-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5541,7 +5541,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-quick-reply-hover-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5561,7 +5561,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chat-quick-reply-hover-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5631,7 +5631,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-border - k-get-theme-color-var( neutral-160 ) + if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) @@ -5651,7 +5651,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-hover-text - k-get-theme-color( neutral, 130 ) + if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) @@ -5671,7 +5671,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-checked-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5681,7 +5681,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -5701,7 +5701,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-hover-checked-bg - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -5711,7 +5711,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-hover-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -5751,7 +5751,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-focus-outline - 1px solid k-get-theme-color-var( neutral-130 ) + 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -5771,7 +5771,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-indeterminate-text - k-get-theme-color( primary, 100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) @@ -5781,7 +5781,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-indeterminate-border - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -5801,7 +5801,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-hover-indeterminate-text - k-get-theme-color( primary, 110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) @@ -5811,7 +5811,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-hover-indeterminate-border - k-get-theme-color-var( primary-110 ) + if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) @@ -5831,7 +5831,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-text - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -5841,7 +5841,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -5851,7 +5851,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-checked-bg - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -5861,7 +5861,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-checked-text - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -5871,7 +5871,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-checked-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) @@ -5891,7 +5891,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-indeterminate-text - k-get-theme-color( neutral, 60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 )) @@ -5901,7 +5901,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-disabled-indeterminate-border - k-get-theme-color-var( neutral-60 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) @@ -6091,7 +6091,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-checkbox-ripple-bg - k-get-theme-color-var( primary-100 ) + if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) @@ -6231,7 +6231,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-chip-outline-disabled-border - k-get-theme-color-var( neutral-90 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) @@ -6604,7 +6604,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-focus-border - k-get-theme-color-var( neutral-20 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) @@ -6664,7 +6664,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-canvas-rectangle-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -6704,7 +6704,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-slider-border-width - 1px + if($kendo-enable-color-system, 0, 1px) @@ -6714,7 +6714,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-slider-border - k-get-theme-color-var( neutral-30 ) + if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) @@ -6794,7 +6794,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-draghandle-border - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -6804,7 +6804,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-draghandle-shadow - k-get-theme-color-var( neutral-110 ) + if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) @@ -6824,7 +6824,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-draghandle-focus-border - $kendo-color-white + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) @@ -6834,7 +6834,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-draghandle-focus-shadow - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -6844,7 +6844,7 @@ The following table lists the available variables for customizing the Fluent the $kendo-color-gradient-draghandle-hover-shadow - k-get-theme-color-var( neutral-130 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) @@ -6944,6 +6944,36 @@ The following table lists the available variables for customizing the Fluent the +### Color System + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefault valueComputed value
$kendo-colors$_default-colors
Description
The global default Colors map.
+
+ ### Color-preview @@ -7004,7 +7034,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7014,7 +7044,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7024,7 +7054,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7034,7 +7064,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7184,7 +7214,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7444,7 +7474,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7454,7 +7484,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7464,7 +7494,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7474,7 +7504,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7784,7 +7814,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7904,7 +7934,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7944,7 +7974,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -7994,7 +8024,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8004,7 +8034,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8044,7 +8074,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8054,7 +8084,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8294,7 +8324,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8424,7 +8454,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8434,7 +8464,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8454,7 +8484,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8564,7 +8594,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8594,7 +8624,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8614,7 +8644,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8624,7 +8654,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8654,7 +8684,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8694,7 +8724,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8704,7 +8734,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8874,7 +8904,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8888,7 +8918,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -8914,7 +8944,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -8924,11 +8954,11 @@ The following table lists the available variables for customizing the Fluent the - + - @@ -9154,7 +9184,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9164,7 +9194,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9174,7 +9204,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9204,7 +9234,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9214,7 +9244,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9224,7 +9254,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9404,7 +9434,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9424,7 +9454,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9494,7 +9524,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9514,7 +9544,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9544,7 +9574,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9564,7 +9594,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -9574,7 +9604,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10294,7 +10324,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10304,7 +10334,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10324,7 +10354,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10769,7 +10799,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10789,7 +10819,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10819,7 +10849,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10829,7 +10859,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10849,7 +10879,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -10879,7 +10909,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11319,7 +11349,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11539,7 +11569,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11669,7 +11699,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11719,7 +11749,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11749,7 +11779,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11759,7 +11789,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11769,7 +11799,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11779,7 +11809,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11809,7 +11839,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11819,7 +11849,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11829,7 +11859,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11839,7 +11869,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11849,7 +11879,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11859,7 +11889,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11899,7 +11929,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11909,7 +11939,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11929,7 +11959,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11939,7 +11969,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11949,7 +11979,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11959,7 +11989,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -11979,7 +12009,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12159,7 +12189,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12169,7 +12199,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12179,7 +12209,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12189,7 +12219,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12199,7 +12229,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12209,7 +12239,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12219,7 +12249,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12229,7 +12259,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12239,7 +12269,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12249,7 +12279,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12259,7 +12289,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12309,7 +12339,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12319,7 +12349,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -12819,7 +12849,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13129,7 +13159,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13139,7 +13169,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13149,7 +13179,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13249,7 +13279,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13259,7 +13289,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13289,7 +13319,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13329,7 +13359,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13429,7 +13459,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13859,7 +13889,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13869,7 +13899,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -13979,7 +14009,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14069,7 +14099,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14189,7 +14219,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14539,7 +14569,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14549,7 +14579,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14559,7 +14589,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14569,7 +14599,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14589,7 +14619,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14619,7 +14649,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14689,7 +14719,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14699,7 +14729,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14709,7 +14739,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14719,7 +14749,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14729,7 +14759,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14739,7 +14769,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14749,7 +14779,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14759,7 +14789,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14769,7 +14799,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14839,7 +14869,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14849,7 +14879,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14859,7 +14889,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14869,7 +14899,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14879,7 +14909,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14889,7 +14919,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14899,7 +14929,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14909,7 +14939,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14919,7 +14949,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14989,7 +15019,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -14999,7 +15029,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15009,7 +15039,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15019,7 +15049,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15029,7 +15059,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15039,7 +15069,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15049,7 +15079,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15059,7 +15089,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15069,7 +15099,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15119,7 +15149,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15139,7 +15169,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15159,7 +15189,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15169,7 +15199,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15179,7 +15209,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15199,7 +15229,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15209,7 +15239,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15219,7 +15249,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15229,7 +15259,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15239,7 +15269,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15249,7 +15279,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15289,7 +15319,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15309,7 +15339,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15319,7 +15349,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15329,7 +15359,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15339,7 +15369,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15349,7 +15379,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15359,7 +15389,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15369,7 +15399,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15622,7 +15652,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15632,7 +15662,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15732,7 +15762,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -15752,7 +15782,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16032,7 +16062,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16140,7 +16170,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16150,7 +16180,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16180,7 +16210,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16190,7 +16220,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16200,7 +16230,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16210,7 +16240,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16220,7 +16250,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16230,7 +16260,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16240,7 +16270,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16250,7 +16280,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16260,7 +16290,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16270,7 +16300,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16280,7 +16310,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16290,7 +16320,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16300,7 +16330,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16310,7 +16340,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16320,7 +16350,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16350,7 +16380,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16520,7 +16550,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -16890,7 +16920,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17220,7 +17250,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17352,7 +17382,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17538,7 +17568,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17548,7 +17578,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17558,7 +17588,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17628,7 +17658,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17638,7 +17668,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17738,7 +17768,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17748,7 +17778,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -17788,7 +17818,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -18326,7 +18356,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -18416,7 +18446,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -18742,7 +18772,7 @@ The following table lists the available variables for customizing the Fluent the warning: warning, success: success, info: info, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, ) @@ -18944,7 +18974,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -18954,7 +18984,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -18964,7 +18994,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19224,7 +19254,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19434,7 +19464,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19484,7 +19514,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19544,7 +19574,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19554,7 +19584,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19850,7 +19880,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19950,7 +19980,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -19970,7 +20000,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -20110,7 +20140,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -20210,7 +20240,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -20410,7 +20440,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -20424,7 +20454,7 @@ The following table lists the available variables for customizing the Fluent the - @@ -20840,7 +20870,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -20860,7 +20890,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -21110,7 +21140,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -21890,7 +21920,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -21930,7 +21960,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -21990,7 +22020,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22000,7 +22030,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22020,7 +22050,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22030,7 +22060,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22050,7 +22080,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22060,7 +22090,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22070,7 +22100,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22110,7 +22140,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22439,7 +22469,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22459,7 +22489,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22489,7 +22519,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22499,7 +22529,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22519,7 +22549,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22529,7 +22559,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22559,7 +22589,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22589,7 +22619,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22599,7 +22629,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22779,7 +22809,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22879,7 +22909,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22889,7 +22919,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22939,7 +22969,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -22949,7 +22979,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23049,7 +23079,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23209,7 +23239,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23219,7 +23249,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23309,7 +23339,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23419,7 +23449,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23459,7 +23489,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23549,7 +23579,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23559,7 +23589,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23599,7 +23629,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23609,7 +23639,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23759,7 +23789,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23869,7 +23899,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23889,7 +23919,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23909,7 +23939,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23919,7 +23949,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23929,7 +23959,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23939,7 +23969,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -23989,7 +24019,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24019,7 +24049,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24099,7 +24129,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24219,7 +24249,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24229,7 +24259,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24375,7 +24405,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24385,7 +24415,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24505,7 +24535,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24525,7 +24555,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24545,7 +24575,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24565,7 +24595,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24645,7 +24675,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24685,7 +24715,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24725,7 +24755,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24785,7 +24815,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24795,7 +24825,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24805,7 +24835,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24815,7 +24845,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -24965,7 +24995,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25139,7 +25169,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25159,7 +25189,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25179,7 +25209,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25299,7 +25329,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25309,7 +25339,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25319,7 +25349,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25349,7 +25379,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25379,7 +25409,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25389,7 +25419,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25399,7 +25429,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25779,7 +25809,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25789,7 +25819,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25799,7 +25829,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25869,7 +25899,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25879,7 +25909,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25889,7 +25919,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25899,7 +25929,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25909,7 +25939,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25919,7 +25949,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25929,7 +25959,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25939,7 +25969,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25949,7 +25979,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25959,7 +25989,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -25969,7 +25999,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26139,7 +26169,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26149,7 +26179,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26459,7 +26489,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26529,7 +26559,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26539,7 +26569,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26559,7 +26589,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26589,7 +26619,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26619,7 +26649,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26719,7 +26749,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26729,7 +26759,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26769,7 +26799,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26923,7 +26953,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26953,7 +26983,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -26983,7 +27013,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27013,7 +27043,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27043,7 +27073,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27053,7 +27083,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27073,7 +27103,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27083,7 +27113,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27103,7 +27133,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27113,7 +27143,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27133,7 +27163,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27143,7 +27173,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27153,7 +27183,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27173,7 +27203,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27183,7 +27213,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27203,7 +27233,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27213,7 +27243,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27233,7 +27263,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27243,7 +27273,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27253,7 +27283,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27263,7 +27293,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27293,7 +27323,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27323,7 +27353,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27343,7 +27373,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27511,7 +27541,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27751,7 +27781,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -27781,7 +27811,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28111,7 +28141,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28121,7 +28151,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28151,7 +28181,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28171,7 +28201,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28491,7 +28521,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28541,7 +28571,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28841,7 +28871,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28901,7 +28931,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -28951,7 +28981,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29560,7 +29590,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29570,7 +29600,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29720,7 +29750,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29790,7 +29820,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29800,7 +29830,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -29930,7 +29960,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30130,7 +30160,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30160,7 +30190,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30200,7 +30230,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30376,7 +30406,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30416,7 +30446,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -30815,7 +30845,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31155,7 +31185,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31165,7 +31195,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31175,7 +31205,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31285,7 +31315,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31295,7 +31325,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31305,7 +31335,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31315,7 +31345,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31325,7 +31355,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31595,7 +31625,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31635,7 +31665,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31645,7 +31675,7 @@ The following table lists the available variables for customizing the Fluent the - + @@ -31851,7 +31881,7 @@ The following table lists the available variables for customizing the Fluent the - + diff --git a/packages/material/docs/customization-appbar.md b/packages/material/docs/customization-appbar.md index ad505cc3031..8f6c1c494e5 100644 --- a/packages/material/docs/customization-appbar.md +++ b/packages/material/docs/customization-appbar.md @@ -140,7 +140,7 @@ The following table lists the available variables for customization. - + @@ -160,7 +160,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-breadcrumb.md b/packages/material/docs/customization-breadcrumb.md index 112b9ebcb4d..96bf4fa7691 100644 --- a/packages/material/docs/customization-breadcrumb.md +++ b/packages/material/docs/customization-breadcrumb.md @@ -460,7 +460,7 @@ The following table lists the available variables for customization. - + @@ -560,7 +560,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-button.md b/packages/material/docs/customization-button.md index 61c3241977b..209b00db20b 100644 --- a/packages/material/docs/customization-button.md +++ b/packages/material/docs/customization-button.md @@ -532,7 +532,7 @@ The following table lists the available variables for customization. - + @@ -542,7 +542,7 @@ The following table lists the available variables for customization. - + @@ -552,7 +552,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-charts.md b/packages/material/docs/customization-charts.md index 1e035437287..21203e4cf66 100644 --- a/packages/material/docs/customization-charts.md +++ b/packages/material/docs/customization-charts.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. - + @@ -40,7 +40,7 @@ The following table lists the available variables for customization. - + @@ -50,7 +50,7 @@ The following table lists the available variables for customization. - + @@ -60,7 +60,7 @@ The following table lists the available variables for customization. - + @@ -70,7 +70,7 @@ The following table lists the available variables for customization. - + @@ -80,7 +80,7 @@ The following table lists the available variables for customization. - + @@ -100,7 +100,7 @@ The following table lists the available variables for customization. - + @@ -110,7 +110,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-checkbox.md b/packages/material/docs/customization-checkbox.md index 0c696707c00..285c7875d2c 100644 --- a/packages/material/docs/customization-checkbox.md +++ b/packages/material/docs/customization-checkbox.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. - + @@ -200,7 +200,7 @@ The following table lists the available variables for customization. - + @@ -310,7 +310,7 @@ The following table lists the available variables for customization. - + @@ -330,7 +330,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-chip.md b/packages/material/docs/customization-chip.md index 085fe269be7..0942c80fea4 100644 --- a/packages/material/docs/customization-chip.md +++ b/packages/material/docs/customization-chip.md @@ -249,7 +249,7 @@ The following table lists the available variables for customization. - + @@ -275,7 +275,7 @@ The following table lists the available variables for customization. - + @@ -325,7 +325,7 @@ The following table lists the available variables for customization. - + @@ -345,7 +345,7 @@ The following table lists the available variables for customization. - + @@ -365,7 +365,7 @@ The following table lists the available variables for customization. - + @@ -425,7 +425,7 @@ The following table lists the available variables for customization. - + @@ -435,7 +435,7 @@ The following table lists the available variables for customization. - + @@ -445,7 +445,7 @@ The following table lists the available variables for customization. - + diff --git a/packages/material/docs/customization-color-system.md b/packages/material/docs/customization-color-system.md index d843282ca24..2e8901d58fa 100644 --- a/packages/material/docs/customization-color-system.md +++ b/packages/material/docs/customization-color-system.md @@ -28,23 +28,13 @@ The following table lists the available variables for customization. - - - - - - - - - - - - - + + + + - @@ -177,26 +167,6 @@ The following table lists the available variables for customization. - - - - - - - - - - - - - - - - - -
$kendo-color-preview-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-color-preview-hover-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-color-preview-no-color-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-color-preview-no-color-text k-get-theme-color( error, 190 )if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 ))
$kendo-color-editor-focus-border k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))
$kendo-color-palette-tile-focus-outline k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-color-palette-tile-focus-shadow inset 0 0 0 2px $kendo-color-whiteinset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-color-palette-tile-hover-outline k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 ))
$kendo-color-palette-tile-hover-shadow inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-whiteinset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-dock-manager-pane-header-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-dock-manager-unpinned-container-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-dock-indicator-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-dock-indicator-hover-bg k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-dock-indicator-hover-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-dock-manager-dock-preview-bg color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent))
$kendo-dock-manager-dock-preview-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-drop-hint-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-drawer-scrollbar-color k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))
$kendo-drawer-scrollbar-bg k-get-theme-color-var( neutral-40 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 ))
$kendo-drawer-scrollbar-hover-color k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 ))
$kendo-drawer-item-ripple-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-drawer-item-icon-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-drawer-item-hover-text k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-drawer-item-hover-icon-text k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-drawer-item-focus-shadow inset 0 0 0 1px k-get-theme-color-var( neutral-130 )inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
$kendo-drawer-item-selected-text $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-drawer-item-selected-icon-text k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
$kendo-dropzone-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The text color of the DropZone.
+
Description
Text color of the dropzone.
$kendo-dropzone-icon-text k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 ))
$kendo-dropzone-icon-hover-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The text color of the hovered DropZone icon.
+
Description
Text color of the icon when the dropzone is hovered.
$kendo-editor-selected-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-editor-selected-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-editor-highlighted-bg k-get-theme-color-var( primary-60 )if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 ))
$kendo-editor-resize-handle-border $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-editor-resize-handle-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-editor-selectednode-outline-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-expander-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-expander-shadow inset 0 0 0 2px k-get-theme-color-var( neutral-30 )inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-expander-focus-outline k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
$kendo-expander-focus-shadow inset 0px 0px 0px 2px k-get-theme-color-var( neutral-130 )inset 0px 0px 0px 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
$kendo-expander-header-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-expander-header-hover-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
$kendo-expander-title-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-filter-preview-field-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-filter-preview-operator-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-filter-toolbar-focus-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-fab-item-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-fab-item-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-fab-item-hover-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-fab-item-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-fab-item-focus-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-fab-item-active-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-form-hint-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-fieldset-legend-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-gantt-nonwork-bg rgba( $kendo-color-black, .04 )rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 )
$kendo-gantt-line-selected-fill k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
$kendo-gantt-dot-bg $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-gantt-dot-border $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-gantt-dot-hover-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-gantt-dot-hover-border $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-gantt-milestone-selected-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-milestone-selected-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-summary-bg k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))
$kendo-gantt-summary-progress-bg k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-gantt-summary-selected-bg k-get-theme-color-var( primary-50 )if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))
$kendo-gantt-summary-progress-selected-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-task-bg k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-110 ))
$kendo-gantt-task-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-gantt-task-progress-bg k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-gantt-task-progress-hover-bg k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-gantt-task-selected-bg k-get-theme-color-var( primary-50 )if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-50 ))
$kendo-gantt-task-selected-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-gantt-task-progress-selected-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-planned-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-gantt-planned-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-planned-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-gantt-delayed-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-gantt-delayed-bg k-get-theme-color-var( error-160 )if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var( error-160 ))
$kendo-gantt-delayed-bg-lighter k-get-theme-color-var( error-110)if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-110))
$kendo-gantt-delayed-hover-bg k-get-theme-color-var( error-190 )if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))
$kendo-gantt-advanced-bg k-get-theme-color-var( success-160 )if($kendo-enable-color-system, k-color( success-emphasis ), k-get-theme-color-var( success-160 ))
$kendo-gantt-advanced-bg-lighter k-get-theme-color-var( success-110 )if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-110 ))
$kendo-gantt-advanced-hover-bg k-get-theme-color-var( success-190 )if($kendo-enable-color-system, k-color( success-on-subtle ), k-get-theme-color-var( success-190 ))
$kendo-gantt-action-on-offset-text $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-gantt-validation-tooltip-valid-border k-get-theme-color-var( success-100 )if($kendo-enable-color-system, k-color( success ), k-get-theme-color-var( success-100 ))
$kendo-gantt-validation-tooltip-invalid-border k-get-theme-color-var( error-100 )if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))
$kendo-grid-header-icon-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-grid-sort-indicator-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-grid-sort-indicator-order-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-grid-sorted-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-grid-group-indicator-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-grid-group-indicator-icon-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-grid-group-drop-hint-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-grid-sticky-border k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 ))
$kendo-grid-sticky-selected-hover-bg $kendo-grid-selected-hover-bgif($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg)
$kendo-grid-row-resizer-hover-bg k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))
$kendo-grid-row-resizer-active-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-image-editor-border k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-image-editor-content-bg k-get-theme-color-var( neutral-50 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))
$kendo-image-editor-crop-border $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-solid-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-input-solid-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-solid-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-input-solid-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-input-solid-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-input-solid-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-input-outline-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-input-outline-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-outline-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-input-outline-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-input-outline-hover-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-outline-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-input-outline-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-input-outline-focus-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-outline-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-input-flat-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-input-flat-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-flat-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-input-flat-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-input-flat-hover-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-flat-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-input-flat-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-input-flat-focus-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-input-flat-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-picker-solid-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-solid-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-solid-border k-get-theme-color-var( neutral-130 )!defaultif($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default
$kendo-picker-solid-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-picker-solid-hover-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-solid-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-solid-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-solid-focus-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-solid-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-picker-solid-disabled-bg k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 ))
$kendo-picker-outline-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-outline-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-outline-hover-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-outline-hover-bg k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-picker-outline-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-outline-focus-bg $kendo-color-white!defaultif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-outline-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-picker-outline-hover-focus-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-outline-hover-focus-bg k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-picker-outline-hover-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-picker-flat-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-flat-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-picker-flat-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-picker-flat-hover-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
$kendo-picker-flat-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-flat-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-picker-flat-focus-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-picker-flat-focus-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-input-prefix-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
$kendo-input-suffix-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
$kendo-input-placeholder-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-input-clear-value-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-list-item-icon-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-list-header-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-list-header-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-list-item-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-list-item-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-list-item-hover-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
$kendo-list-item-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-list-item-focus-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-list-item-focus-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-list-item-focus-shadow inset 0 0 0 1px k-get-theme-color-var( neutral-130 )inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
$kendo-list-item-selected-bg k-get-theme-color-var( neutral-40 )if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 ))
$kendo-list-item-selected-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-list-item-selected-hover-bg k-get-theme-color-var( neutral-50 )if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 ))
$kendo-list-item-selected-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-list-item-disabled-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-list-item-disabled-text k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))
$kendo-list-group-item-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-list-group-item-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-list-no-data-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-listbox-drop-hint-border-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-listview-item-selected-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 ))
$kendo-loader-container-panel-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
( primary: primary, - secondary: neutral, + secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, error: error, success: success, @@ -17448,7 +17478,7 @@ The following table lists the available variables for customizing the Fluent the
$kendo-map-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-map-navigator-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-map-navigator-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-map-navigator-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-map-attribution-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-map-marker-fill k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-media-player-overlay-bg k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-media-player-quality-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-media-player-titlebar-bg rgba( $kendo-color-black, .4 )rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 )
$kendo-menu-popup-item-focus-outline k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
$kendo-menu-icon-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-orgchart-node-group-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-orgchart-node-group-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-orgchart-node-group-border k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-orgchart-line-text k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-pager-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-pager-focus-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-pager-sizes-label-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-pager-info-label-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-panelbar-header-hover-text k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-panelbar-header-selected-text $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-panelbar-selected-marker k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-panelbar-item-hover-text k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-panelbar-item-selected-text $kendo-color-blackif($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black)
$kendo-pdf-viewer-canvas-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
The text color of the PDFViewer canvas.
+
Description
Text color of the PDF viewer canvas.
$kendo-pivotgrid-headers-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-pivotgrid-total-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 ))
$kendo-pivotgrid-configurator-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-progressbar-bg k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
$kendo-progressbar-value-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-progressbar-disabled-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))
$kendo-progressbar-disabled-text k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))
$kendo-progressbar-value-disabled-bg k-get-theme-color-var( primary-30 )if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 ))
$kendo-progressbar-indeterminate-bg k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
$kendo-progressbar-indeterminate-border k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
$kendo-progressbar-indeterminate-gradient-horizontal linear-gradient(270deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%)linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
$kendo-progressbar-indeterminate-gradient-vertical linear-gradient(180deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%)linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
$kendo-circular-progressbar-arc-stroke k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-radio-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-radio-hover-text k-get-theme-color( neutral, 130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 ))
$kendo-radio-checked-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-radio-checked-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-radio-hover-checked-text k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-radio-hover-checked-border k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-radio-focus-outline 1px solid k-get-theme-color-var( neutral-130 )1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-radio-disabled-text k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-radio-disabled-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-radio-ripple-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-rating-item-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-rating-item-hover-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-rating-item-selected-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-rating-item-selected-hover-text k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
$kendo-scheduler-selected-bg k-get-theme-color-var( primary-20 )if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 ))
$kendo-scheduler-event-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-scheduler-event-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-scheduler-event-selected-bg k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
$kendo-scheduler-nonwork-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-scheduler-othermonth-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-scheduler-yearview-indicator-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-scheduler-yearview-indicator-selected-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-scheduler-tooltip-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-scheduler-tooltip-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-scheduler-marquee-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-scrollview-pagebutton-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-scrollview-pagebutton-primary-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-scrollview-pagebutton-hover-shadow 0 0 0 1px k-get-theme-color-var( neutral-30 )0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))
$kendo-scrollview-pagebutton-focus-shadow 0 0 0 1px k-get-theme-color-var( neutral-130 )0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-scrollview-pagebutton-primary-hover-shadow 0 0 0 2px k-get-theme-color-var( neutral-30 )0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 ))
$kendo-scrollview-pagebutton-primary-focus-shadow 0 0 0 2px k-get-theme-color-var( neutral-130 )0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-scrollview-navigation-color $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-scrollview-navigation-focus-shadow 0 0 0 1px k-get-theme-color-var( neutral-130 )0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-searchbox-icon-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-signature-line-color rgba( k-get-theme-color( info, 100 ), .4 )rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 )
$kendo-signature-line-disabled-color k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-skeleton-item-bg k-get-theme-color-var( neutral-50 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))
$kendo-skeleton-wave-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 ))
$kendo-slider-track-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-slider-track-hover-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-slider-track-focus-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-slider-selection-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-slider-thumb-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-slider-thumb-hover-border k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))
$kendo-slider-thumb-active-border k-get-theme-color-var( primary-130 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-130 ))
$kendo-slider-disabled-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 ))
$kendo-slider-track-disabled-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))
$kendo-slider-selection-disabled-bg k-get-theme-color-var( neutral-90 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 ))
$kendo-slider-thumb-disabled-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-split-button-arrow-delimiter-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-splitbar-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-splitbar-hover-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
$kendo-splitbar-selected-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-primary-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-primary-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-header-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-spreadsheet-table-header-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-spreadsheet-selected-text k-get-theme-color-var( primary-160 )if($kendo-enable-color-system, k-color( primary-on-subtle ), k-get-theme-color-var( primary-160 ))
$kendo-spreadsheet-selected-bg k-get-theme-color-var( primary-30 )if($kendo-enable-color-system, k-color( primary-subtle-active ), k-get-theme-color-var( primary-30 ))
$kendo-spreadsheet-selected-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-resize-handle-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-cell-comment-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-cell-dirty-border k-get-theme-color-var( error-100 )if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( error-100 ))
$kendo-spreadsheet-filter-button-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-spreadsheet-filter-button-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-spreadsheet-filter-button-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-spreadsheet-filter-button-hover-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-spreadsheet-filter-button-hover-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))
$kendo-spreadsheet-filter-button-hover-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-spreadsheet-filter-button-active-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-spreadsheet-filter-button-active-bg k-get-theme-color-var( neutral-30 )f($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))
$kendo-spreadsheet-filter-button-active-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-spreadsheet-filter-menu-icon-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-error-border k-get-theme-color-var( error-190 )if($kendo-enable-color-system, k-color( error-on-subtle ), k-get-theme-color-var( error-190 ))
$kendo-spreadsheet-drawing-handle-outline-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-spreadsheet-drawing-handle-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-stepper-indicator-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-stepper-indicator-done-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-stepper-indicator-done-text $kendo-color-whiteif($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white)
$kendo-stepper-indicator-done-hover-bg k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-stepper-indicator-done-disabled-bg k-get-theme-color-var( primary-30 )if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 ))
$kendo-stepper-indicator-current-bg k-get-theme-color-var( primary-120 )if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 ))
$kendo-stepper-label-success-text k-get-theme-color-var( success-190 )if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
$kendo-stepper-label-error-text k-get-theme-color-var( error-190 )if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
$kendo-stepper-optional-label-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-switch-focus-ring 1px solid k-get-theme-color-var( neutral-130 )1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-switch-off-track-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-switch-off-track-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-switch-off-track-focus-border k-get-theme-color-var( neutral-110 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 ))
$kendo-switch-off-track-disabled-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-switch-off-thumb-bg k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-switch-off-thumb-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-switch-off-thumb-hover-bg k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-switch-off-thumb-hover-border k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 ))
$kendo-switch-off-thumb-disabled-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-switch-off-thumb-disabled-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-switch-on-track-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-switch-on-track-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-track-hover-bg k-get-theme-color-var( primary-110 )if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 ))
$kendo-switch-on-track-hover-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-track-focus-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-switch-on-track-focus-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-track-disabled-bg k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-switch-on-track-disabled-text $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-track-disabled-border $kendo-switch-on-track-disabled-bgif($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg)
$kendo-switch-on-thumb-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-thumb-hover-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-switch-on-thumb-disabled-bg k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 ))
$kendo-switch-on-thumb-disabled-border k-get-theme-color-var( neutral-20 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 ))
$kendo-table-header-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-table-selected-bg k-get-theme-color-var( primary-20 )if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 ))
$kendo-table-selected-hover-bg k-get-theme-color-var( primary-30 )if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 ))
$kendo-tabstrip-item-selected-text k-get-theme-color-var( neutral-190 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))
$kendo-tabstrip-item-selected-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-tabstrip-item-dragging-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-tabstrip-indicator-color k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-taskboard-column-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-taskboard-column-focus-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))
$kendo-taskboard-card-selected-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-taskboard-drag-placeholder-bg k-get-theme-color-var( neutral-50 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 ))
$kendo-tile-layout-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-timeline-track-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-timeline-track-border-color k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-timeline-flag-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-timeline-card-header-text k-get-theme-color-var( neutral-160 )if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))
$kendo-timeline-card-body-scroll-border k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-timeline-circle-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-toolbar-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-toolbar-separator-border k-get-theme-color-var( neutral-60 )if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 ))
$kendo-toolbar-item-focus-outline-color k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-tooltip-bg $kendo-color-whiteif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
$kendo-tooltip-button-text k-get-theme-color-var( neutral-130, initial )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial ))
$kendo-treeview-item-focus-shadow inset 0 0 0 1px k-get-theme-color-var( neutral-130 )inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-upload-dropzone-text k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 ))
$kendo-upload-dropzone-bg k-get-theme-color-var( neutral-10 )if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
$kendo-upload-dropzone-border k-get-theme-color-var( neutral-30 )if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 ))
$kendo-upload-progress-bg k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-upload-success-text k-get-theme-color-var( success-190 )if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
$kendo-upload-success-bg k-get-theme-color-var( success-190 )if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 ))
$kendo-upload-error-text k-get-theme-color-var( error-190 )if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
$kendo-upload-error-bg k-get-theme-color-var( error-190 )if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 ))
$kendo-window-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-window-titlebar-text k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-window-titlebar-border k-get-theme-color-var( primary-100 )if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
$kendo-wizard-step-focus-border k-get-theme-color-var( neutral-130 )if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
$kendo-appbar-light-text Colork-contrast-color( $kendo-color-light )if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black
$kendo-appbar-dark-text Colork-contrast-color( $kendo-color-dark )if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white
$kendo-breadcrumb-link-focus-bg Colork-map-get( $theme, focus-bg )if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) rgba(0, 0, 0, 0.12)
$kendo-breadcrumb-root-link-focus-bg Colork-map-get( $theme, focus-bg )if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) rgba(0, 0, 0, 0.12)
$kendo-button-disabled-bg Colork-try-shade( $kendo-body-bg, 12% )if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% )) #e0e0e0
$kendo-button-disabled-text Color$kendo-disabled-textif($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text) rgba(0, 0, 0, 0.38)
$kendo-button-disabled-border Color$kendo-button-disabled-bgif($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) #e0e0e0
$kendo-series-a Colorget-base-hue( purple, 500 )if($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 )) #9c27b0
$kendo-series-b Colorget-base-hue( blue, 500 )if($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 )) #2196f3
$kendo-series-c Colorget-base-hue( teal, 500 )if($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 )) #009688
$kendo-series-d Colorget-base-hue( yellow, 500 )if($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 )) #ffeb3b
$kendo-series-e Colorget-base-hue( red, 500 )if($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 )) #f44336
$kendo-series-f Colorget-base-hue( green, 500 )if($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 )) #4caf50
$kendo-chart-major-lines Colorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08)
$kendo-chart-minor-lines Colorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04)
$kendo-checkbox-border Colorrgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 ) rgba(0, 0, 0, 0.54)
$kendo-checkbox-checked-text Colork-contrast-color( $kendo-checkbox-checked-bg )if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) white
$kendo-checkbox-disabled-border Colork-try-shade( $kendo-component-bg, 4 )if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 )) #adadad
$kendo-checkbox-disabled-checked-text Colork-contrast-color( $kendo-checkbox-disabled-checked-bg )if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) black
$kendo-chip-base-bg Colorif( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)) #000000
$kendo-chip-solid-bg Colorif( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))) #ebebeb
$kendo-chip-solid-focus-bg Colork-try-tint( $kendo-chip-base-bg, 80% )if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% )) #cccccc
$kendo-chip-solid-hover-bg Colork-try-tint( $kendo-chip-base-bg, 84% )if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% )) #d6d6d6
$kendo-chip-solid-selected-bg Colork-try-tint( $kendo-chip-base-bg, 76% )if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% )) #c2c2c2
$kendo-chip-outline-hover-bg Colork-try-tint( $kendo-chip-base-bg, 92% )if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% )) #ebebeb
$kendo-chip-outline-hover-text Colork-contrast-color( $kendo-chip-outline-hover-bg )if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) black
$kendo-chip-outline-selected-bg Colork-try-tint( $kendo-chip-base-bg, 84% )if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% )) #d6d6d6
$kendo-color-whiteColor#ffffff#ffffff
Description
The color white.
Note: you cannot change this value.
-
$kendo-color-blackColor#000000#000000$kendo-colorsMap$_default-colors(app-surface: #ffffff, on-app-surface: #212121, subtle: #757575, surface: #f5f5f5, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.12), border-alt: rgba(0, 0, 0, 0.15), base-subtle: #ebebeb, base-subtle-hover: #d6d6d6, base-subtle-active: #c2c2c2, base: #ffffff, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #adadad, base-on-subtle: #212121, on-base: #212121, base-on-surface: #212121, primary-subtle: #d1d5ee, primary-subtle-hover: #c5cae8, primary-subtle-active: #b5bde3, primary: #3f51b5, primary-hover: #3a4ba7, primary-active: #354498, primary-emphasis: #97a0d7, primary-on-subtle: #161c3f, on-primary: #ffffff, primary-on-surface: #3f51b5, secondary-subtle: #fbcdd9, secondary-subtle-hover: #f9afc3, secondary-subtle-active: #f79bb3, secondary: #e51a5f, secondary-hover: #d31857, secondary-active: #c01650, secondary-emphasis: #f58da9, secondary-on-subtle: #500c22, on-secondary: #ffffff, secondary-on-surface: #ae1549, tertiary-subtle: #c9dbd8, tertiary-subtle-hover: #a9c6c1, tertiary-subtle-active: #92b8b1, tertiary: #00695c, tertiary-hover: #006155, tertiary-active: #00584d, tertiary-emphasis: #84aea7, tertiary-on-subtle: #002520, on-tertiary: #ffffff, tertiary-on-surface: #054f46, info-subtle: #c8d7fb, info-subtle-hover: #a7c0f7, info-subtle-active: #8fb0f6, info: #0058e9, info-hover: #0251d6, info-active: #034ac3, info-emphasis: #80a5f4, info-on-subtle: #071f51, on-info: #ffffff, info-on-surface: #0443b0, success-subtle: #d7f0cc, success-subtle-hover: #bae2ad, success-subtle-active: #a7db97, success: #37b400, success-hover: #33a600, success-active: #2e9704, success-emphasis: #93d775, success-on-subtle: #163f09, on-success: #ffffff, success-on-surface: #2b8906, warning-subtle: #fff0ce, warning-subtle-hover: #ffe7b0, warning-subtle-active: #ffe19c, warning: #ffc000, warning-hover: #ebb201, warning-active: #d6a202, warning-emphasis: #ffdd8f, warning-on-subtle: #59430a, on-warning: #000000, warning-on-surface: #ffc000, error-subtle: #fcc7c2, error-subtle-hover: #feafa8, error-subtle-active: #fe9a91, error: #f31700, error-hover: #e01701, error-active: #cc1505, error-emphasis: #fc8d83, error-on-subtle: #550c07, on-error: #ffffff, error-on-surface: #b91406, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #eeeeee, light: #f5f5f5, light-hover: #ebebeb, light-active: #d6d6d6, light-emphasis: #e0e0e0, light-on-subtle: #212121, on-light: #000000, light-on-surface: #616161, dark-subtle: #c7c7c7, dark-subtle-hover: #c2c2c2, dark-subtle-active: #bdbdbd, dark: #424242, dark-hover: #212121, dark-active: #000000, dark-emphasis: #9e9e9e, dark-on-subtle: #212121, on-dark: #ffffff, dark-on-surface: #616161, inverse-subtle: #c7c7c7, inverse-subtle-hover: #c2c2c2, inverse-subtle-active: #bdbdbd, inverse: #424242, inverse-hover: #212121, inverse-active: #000000, inverse-emphasis: #9e9e9e, inverse-on-subtle: #212121, on-inverse: #ffffff, inverse-on-surface: #616161, series-a: #9c27b0, series-a-bold: #751d84, series-a-bolder: #4e1458, series-a-subtle: #b55dc4, series-a-subtler: #cd93d7, series-b: #2196f3, series-b-bold: #1971b6, series-b-bolder: #114b7a, series-b-subtle: #59b0f6, series-b-subtler: #90cbf9, series-c: #009688, series-c-bold: #007166, series-c-bolder: #004b44, series-c-subtle: #40b0a6, series-c-subtler: #80cbc4, series-d: #ffeb3b, series-d-bold: #bfb02c, series-d-bolder: #80761e, series-d-subtle: #fff06c, series-d-subtler: #fff59d, series-e: #f44336, series-e-bold: #b73229, series-e-bolder: #7a221b, series-e-subtle: #f77268, series-e-subtler: #faa19b, series-f: #4caf50, series-f-bold: #39833c, series-f-bolder: #265828, series-f-subtle: #79c37c, series-f-subtler: #a6d7a8)
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
$kendo-color-whiteColor#ffffff#ffffff
Description
The color white.
Note: you cannot change this value.
-
$kendo-color-blackColor#000000#000000
Description
The color black.
Note: you cannot change this value.
-
diff --git a/packages/material/docs/customization-common.md b/packages/material/docs/customization-common.md index 19863cb36e8..88822eee096 100644 --- a/packages/material/docs/customization-common.md +++ b/packages/material/docs/customization-common.md @@ -157,6 +157,16 @@ The following table lists the available variables for customization.
Description
The gradient background of selected items.
+ + $kendo-disabled-text + Color + k-map-get( $theme, disabled-text ) + rgba(0, 0, 0, 0.38) + + +
Description
Text color of disabled items.
+ + $kendo-list-sizes Map diff --git a/packages/material/docs/customization-dock-manager.md b/packages/material/docs/customization-dock-manager.md index be71a88589e..c61003ca0c3 100644 --- a/packages/material/docs/customization-dock-manager.md +++ b/packages/material/docs/customization-dock-manager.md @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-hover-bg Color - k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ) + if($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% )) #4e5fbb @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(63, 81, 181, 0.16) diff --git a/packages/material/docs/customization-dropzone.md b/packages/material/docs/customization-dropzone.md index a6d251eea61..34cb97eecc3 100644 --- a/packages/material/docs/customization-dropzone.md +++ b/packages/material/docs/customization-dropzone.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-dropzone-bg Color - k-try-shade( $kendo-base-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 )) #ebebeb @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) rgba(97, 97, 97, 0.9116) diff --git a/packages/material/docs/customization-editor.md b/packages/material/docs/customization-editor.md index b40e6785f9d..6cc3d9d943e 100644 --- a/packages/material/docs/customization-editor.md +++ b/packages/material/docs/customization-editor.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg Color - k-color-mix($kendo-color-primary, #ffffff, 20%) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) #d9dcf0 diff --git a/packages/material/docs/customization-filemanager.md b/packages/material/docs/customization-filemanager.md index faa36f9adf7..b1527742535 100644 --- a/packages/material/docs/customization-filemanager.md +++ b/packages/material/docs/customization-filemanager.md @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-file-manager-toolbar-bg Color - k-try-shade( $kendo-button-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) whitesmoke @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) rgba(97, 97, 97, 0.9116) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) rgba(97, 97, 97, 0.9116) diff --git a/packages/material/docs/customization-grid.md b/packages/material/docs/customization-grid.md index c476daf33f1..e621153f843 100644 --- a/packages/material/docs/customization-grid.md +++ b/packages/material/docs/customization-grid.md @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .24 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 )) rgba(0, 0, 0, 0.24) diff --git a/packages/material/docs/customization-input.md b/packages/material/docs/customization-input.md index e9466ddc7ea..8d955431812 100644 --- a/packages/material/docs/customization-input.md +++ b/packages/material/docs/customization-input.md @@ -265,7 +265,7 @@ The following table lists the available variables for customization. $kendo-input-bg Color - k-try-shade( $kendo-component-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) whitesmoke @@ -285,7 +285,7 @@ The following table lists the available variables for customization. $kendo-input-border Color - rgba( $kendo-component-border, .38 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 )) rgba(0, 0, 0, 0.38) @@ -405,7 +405,7 @@ The following table lists the available variables for customization. $kendo-input-disabled-bg Color - k-try-shade( $kendo-component-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 )) #fafafa @@ -415,7 +415,7 @@ The following table lists the available variables for customization. $kendo-input-disabled-text Color - $kendo-disabled-text + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text) rgba(0, 0, 0, 0.38) @@ -425,7 +425,7 @@ The following table lists the available variables for customization. $kendo-input-disabled-border Color - rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) rgba(0, 0, 0, 0.06) diff --git a/packages/material/docs/customization-listview.md b/packages/material/docs/customization-listview.md index aaef41f431e..a560c7ae76c 100644 --- a/packages/material/docs/customization-listview.md +++ b/packages/material/docs/customization-listview.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg Color - rgba( k-contrast-color( $kendo-listview-bg ), .04 ) + if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-listview-item-focus-bg Color - rgba( k-contrast-color( $kendo-listview-bg ), .08 ) + if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 )) rgba(0, 0, 0, 0.08) diff --git a/packages/material/docs/customization-pager.md b/packages/material/docs/customization-pager.md index 8a7f9f642ce..6641d2f7f4a 100644 --- a/packages/material/docs/customization-pager.md +++ b/packages/material/docs/customization-pager.md @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-pager-text Color - if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) + if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) rgba(0, 0, 0, 0.54) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-pager-focus-bg Color - k-try-shade( $kendo-pager-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 )) whitesmoke diff --git a/packages/material/docs/customization-pdf-viewer.md b/packages/material/docs/customization-pdf-viewer.md index 4913cf23519..8765729b33c 100644 --- a/packages/material/docs/customization-pdf-viewer.md +++ b/packages/material/docs/customization-pdf-viewer.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-toolbar-bg Color - k-try-shade( $kendo-button-bg, .25 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 )) #fafafa diff --git a/packages/material/docs/customization-progressbar.md b/packages/material/docs/customization-progressbar.md index 9b2cf254992..4b0fd1bfbc5 100644 --- a/packages/material/docs/customization-progressbar.md +++ b/packages/material/docs/customization-progressbar.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-progressbar-bg Color - k-try-tint( $kendo-color-primary, 8 ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) #bac0e4 diff --git a/packages/material/docs/customization-shadows.md b/packages/material/docs/customization-shadows.md index 78287d289f2..02645707157 100644 --- a/packages/material/docs/customization-shadows.md +++ b/packages/material/docs/customization-shadows.md @@ -28,16 +28,6 @@ The following table lists the available variables for customization. - $elevation - Color - k-map-get( $theme, elevation ) - #000000 - - -
Description
Color of shadows
- - - $box-shadow-depth-1 String k-elevation(1) @@ -127,6 +117,16 @@ The following table lists the available variables for customization.
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
+ + $elevation + Color + k-map-get( $theme, elevation ) + #000000 + + +
Description
Color of shadows
+ + diff --git a/packages/material/docs/customization-skeleton.md b/packages/material/docs/customization-skeleton.md index 70b76c46286..4a40fed64c4 100644 --- a/packages/material/docs/customization-skeleton.md +++ b/packages/material/docs/customization-skeleton.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(66, 66, 66, 0.2) diff --git a/packages/material/docs/customization-switch.md b/packages/material/docs/customization-switch.md index 9c82ca704d9..078764ac6a9 100644 --- a/packages/material/docs/customization-switch.md +++ b/packages/material/docs/customization-switch.md @@ -94,7 +94,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-bg Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 ) rgba(0, 0, 0, 0.38) @@ -264,7 +264,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-bg Color - if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ) + if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )) #ffffff @@ -344,7 +344,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-bg Color - rgba( $kendo-color-primary, .54 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 )) rgba(63, 81, 181, 0.54) diff --git a/packages/material/docs/customization-table.md b/packages/material/docs/customization-table.md index dab63cf6276..ea65bd6ef26 100644 --- a/packages/material/docs/customization-table.md +++ b/packages/material/docs/customization-table.md @@ -169,7 +169,7 @@ The following table lists the available variables for customization. $kendo-table-header-text Color - if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) + if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) rgba(0, 0, 0, 0.54) @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-table-hover-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .07 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 )) rgba(0, 0, 0, 0.07) @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) diff --git a/packages/material/docs/customization-tilelayout.md b/packages/material/docs/customization-tilelayout.md index 2cb2b00b6ad..6370b0823d9 100644 --- a/packages/material/docs/customization-tilelayout.md +++ b/packages/material/docs/customization-tilelayout.md @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-tile-layout-bg Color - if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) + if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) #f5f5f5 diff --git a/packages/material/docs/customization-treeview.md b/packages/material/docs/customization-treeview.md index 99887faa231..82eb6d51a4f 100644 --- a/packages/material/docs/customization-treeview.md +++ b/packages/material/docs/customization-treeview.md @@ -355,7 +355,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-hover-bg Color - rgba( $kendo-treeview-text, .07 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .07 ), rgba( $kendo-treeview-text, .07 )) rgba(0, 0, 0, 0.07) diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index dbf3b538831..8d541206314 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -161,6 +161,16 @@ The following table lists the available variables for customizing the Material t
Description
The gradient background of selected items.
+ + $kendo-disabled-text + Color + k-map-get( $theme, disabled-text ) + rgba(0, 0, 0, 0.38) + + +
Description
Text color of disabled items.
+ + $kendo-list-sizes Map @@ -353,7 +363,7 @@ The following table lists the available variables for customizing the Material t $kendo-appbar-light-text Color - k-contrast-color( $kendo-color-light ) + if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) black @@ -373,7 +383,7 @@ The following table lists the available variables for customizing the Material t $kendo-appbar-dark-text Color - k-contrast-color( $kendo-color-dark ) + if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) white @@ -1419,7 +1429,7 @@ The following table lists the available variables for customizing the Material t $kendo-breadcrumb-link-focus-bg Color - k-map-get( $theme, focus-bg ) + if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) rgba(0, 0, 0, 0.12) @@ -1519,7 +1529,7 @@ The following table lists the available variables for customizing the Material t $kendo-breadcrumb-root-link-focus-bg Color - k-map-get( $theme, focus-bg ) + if($kendo-enable-color-system, k-color( base-active ), k-map-get( $theme, focus-bg )) rgba(0, 0, 0, 0.12) @@ -2146,7 +2156,7 @@ The following table lists the available variables for customizing the Material t $kendo-button-disabled-bg Color - k-try-shade( $kendo-body-bg, 12% ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% )) #e0e0e0 @@ -2156,7 +2166,7 @@ The following table lists the available variables for customizing the Material t $kendo-button-disabled-text Color - $kendo-disabled-text + if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text) rgba(0, 0, 0, 0.38) @@ -2166,7 +2176,7 @@ The following table lists the available variables for customizing the Material t $kendo-button-disabled-border Color - $kendo-button-disabled-bg + if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) #e0e0e0 @@ -3006,7 +3016,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-a Color - get-base-hue( purple, 500 ) + if($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 )) #9c27b0 @@ -3016,7 +3026,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-b Color - get-base-hue( blue, 500 ) + if($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 )) #2196f3 @@ -3026,7 +3036,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-c Color - get-base-hue( teal, 500 ) + if($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 )) #009688 @@ -3036,7 +3046,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-d Color - get-base-hue( yellow, 500 ) + if($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 )) #ffeb3b @@ -3046,7 +3056,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-e Color - get-base-hue( red, 500 ) + if($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 )) #f44336 @@ -3056,7 +3066,7 @@ The following table lists the available variables for customizing the Material t $kendo-series-f Color - get-base-hue( green, 500 ) + if($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 )) #4caf50 @@ -3076,7 +3086,7 @@ The following table lists the available variables for customizing the Material t $kendo-chart-major-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) rgba(0, 0, 0, 0.08) @@ -3086,7 +3096,7 @@ The following table lists the available variables for customizing the Material t $kendo-chart-minor-lines Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) rgba(0, 0, 0, 0.04) @@ -3236,7 +3246,7 @@ The following table lists the available variables for customizing the Material t $kendo-checkbox-border Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 ) rgba(0, 0, 0, 0.54) @@ -3286,7 +3296,7 @@ The following table lists the available variables for customizing the Material t $kendo-checkbox-checked-text Color - k-contrast-color( $kendo-checkbox-checked-bg ) + if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) white @@ -3396,7 +3406,7 @@ The following table lists the available variables for customizing the Material t $kendo-checkbox-disabled-border Color - k-try-shade( $kendo-component-bg, 4 ) + if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 )) #adadad @@ -3416,7 +3426,7 @@ The following table lists the available variables for customizing the Material t $kendo-checkbox-disabled-checked-text Color - k-contrast-color( $kendo-checkbox-disabled-checked-bg ) + if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) black @@ -3825,7 +3835,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-base-bg Color - if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) + if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black)) #000000 @@ -3851,7 +3861,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-solid-bg Color - if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) + if($kendo-enable-color-system, k-color( base-subtle ), if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% ))) #ebebeb @@ -3901,7 +3911,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-solid-focus-bg Color - k-try-tint( $kendo-chip-base-bg, 80% ) + if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 80% )) #cccccc @@ -3921,7 +3931,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-solid-hover-bg Color - k-try-tint( $kendo-chip-base-bg, 84% ) + if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 84% )) #d6d6d6 @@ -3941,7 +3951,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-solid-selected-bg Color - k-try-tint( $kendo-chip-base-bg, 76% ) + if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 76% )) #c2c2c2 @@ -4001,7 +4011,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-outline-hover-bg Color - k-try-tint( $kendo-chip-base-bg, 92% ) + if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-tint( $kendo-chip-base-bg, 92% )) #ebebeb @@ -4011,7 +4021,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-outline-hover-text Color - k-contrast-color( $kendo-chip-outline-hover-bg ) + if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) black @@ -4021,7 +4031,7 @@ The following table lists the available variables for customizing the Material t $kendo-chip-outline-selected-bg Color - k-try-tint( $kendo-chip-base-bg, 84% ) + if($kendo-enable-color-system, k-color( base-subtle-active ), k-try-tint( $kendo-chip-base-bg, 84% )) #d6d6d6 @@ -4523,23 +4533,13 @@ The following table lists the available variables for customizing the Material t - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 + $kendo-colors + Map + $_default-colors + (app-surface: #ffffff, on-app-surface: #212121, subtle: #757575, surface: #f5f5f5, surface-alt: #ffffff, border: rgba(0, 0, 0, 0.12), border-alt: rgba(0, 0, 0, 0.15), base-subtle: #ebebeb, base-subtle-hover: #d6d6d6, base-subtle-active: #c2c2c2, base: #ffffff, base-hover: #ebebeb, base-active: #d6d6d6, base-emphasis: #adadad, base-on-subtle: #212121, on-base: #212121, base-on-surface: #212121, primary-subtle: #d1d5ee, primary-subtle-hover: #c5cae8, primary-subtle-active: #b5bde3, primary: #3f51b5, primary-hover: #3a4ba7, primary-active: #354498, primary-emphasis: #97a0d7, primary-on-subtle: #161c3f, on-primary: #ffffff, primary-on-surface: #3f51b5, secondary-subtle: #fbcdd9, secondary-subtle-hover: #f9afc3, secondary-subtle-active: #f79bb3, secondary: #e51a5f, secondary-hover: #d31857, secondary-active: #c01650, secondary-emphasis: #f58da9, secondary-on-subtle: #500c22, on-secondary: #ffffff, secondary-on-surface: #ae1549, tertiary-subtle: #c9dbd8, tertiary-subtle-hover: #a9c6c1, tertiary-subtle-active: #92b8b1, tertiary: #00695c, tertiary-hover: #006155, tertiary-active: #00584d, tertiary-emphasis: #84aea7, tertiary-on-subtle: #002520, on-tertiary: #ffffff, tertiary-on-surface: #054f46, info-subtle: #c8d7fb, info-subtle-hover: #a7c0f7, info-subtle-active: #8fb0f6, info: #0058e9, info-hover: #0251d6, info-active: #034ac3, info-emphasis: #80a5f4, info-on-subtle: #071f51, on-info: #ffffff, info-on-surface: #0443b0, success-subtle: #d7f0cc, success-subtle-hover: #bae2ad, success-subtle-active: #a7db97, success: #37b400, success-hover: #33a600, success-active: #2e9704, success-emphasis: #93d775, success-on-subtle: #163f09, on-success: #ffffff, success-on-surface: #2b8906, warning-subtle: #fff0ce, warning-subtle-hover: #ffe7b0, warning-subtle-active: #ffe19c, warning: #ffc000, warning-hover: #ebb201, warning-active: #d6a202, warning-emphasis: #ffdd8f, warning-on-subtle: #59430a, on-warning: #000000, warning-on-surface: #ffc000, error-subtle: #fcc7c2, error-subtle-hover: #feafa8, error-subtle-active: #fe9a91, error: #f31700, error-hover: #e01701, error-active: #cc1505, error-emphasis: #fc8d83, error-on-subtle: #550c07, on-error: #ffffff, error-on-surface: #b91406, light-subtle: #fafafa, light-subtle-hover: #f5f5f5, light-subtle-active: #eeeeee, light: #f5f5f5, light-hover: #ebebeb, light-active: #d6d6d6, light-emphasis: #e0e0e0, light-on-subtle: #212121, on-light: #000000, light-on-surface: #616161, dark-subtle: #c7c7c7, dark-subtle-hover: #c2c2c2, dark-subtle-active: #bdbdbd, dark: #424242, dark-hover: #212121, dark-active: #000000, dark-emphasis: #9e9e9e, dark-on-subtle: #212121, on-dark: #ffffff, dark-on-surface: #616161, inverse-subtle: #c7c7c7, inverse-subtle-hover: #c2c2c2, inverse-subtle-active: #bdbdbd, inverse: #424242, inverse-hover: #212121, inverse-active: #000000, inverse-emphasis: #9e9e9e, inverse-on-subtle: #212121, on-inverse: #ffffff, inverse-on-surface: #616161, series-a: #9c27b0, series-a-bold: #751d84, series-a-bolder: #4e1458, series-a-subtle: #b55dc4, series-a-subtler: #cd93d7, series-b: #2196f3, series-b-bold: #1971b6, series-b-bolder: #114b7a, series-b-subtle: #59b0f6, series-b-subtler: #90cbf9, series-c: #009688, series-c-bold: #007166, series-c-bolder: #004b44, series-c-subtle: #40b0a6, series-c-subtler: #80cbc4, series-d: #ffeb3b, series-d-bold: #bfb02c, series-d-bolder: #80761e, series-d-subtle: #fff06c, series-d-subtler: #fff59d, series-e: #f44336, series-e-bold: #b73229, series-e-bolder: #7a221b, series-e-subtle: #f77268, series-e-subtler: #faa19b, series-f: #4caf50, series-f-bold: #39833c, series-f-bolder: #265828, series-f-subtle: #79c37c, series-f-subtler: #a6d7a8) -
Description
The color black.
Note: you cannot change this value.
+
Description
The global default Colors map.
@@ -4672,26 +4672,6 @@ The following table lists the available variables for customizing the Material t
Description
Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
- - $kendo-color-white - Color - #ffffff - #ffffff - - -
Description
The color white.
Note: you cannot change this value.
- - - - $kendo-color-black - Color - #000000 - #000000 - - -
Description
The color black.
Note: you cannot change this value.
- - @@ -5509,7 +5489,7 @@ The following table lists the available variables for customizing the Material t $kendo-dock-indicator-hover-bg Color - k-color-mix( $kendo-color-white, $kendo-color-primary, 8% ) + if($kendo-enable-color-system, k-color( primary-hover ), k-color-mix( $kendo-color-white, $kendo-color-primary, 8% )) #4e5fbb @@ -5559,7 +5539,7 @@ The following table lists the available variables for customizing the Material t $kendo-dock-manager-dock-preview-bg Color - rgba( $kendo-color-primary, .16 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) rgba(63, 81, 181, 0.16) @@ -5709,7 +5689,7 @@ The following table lists the available variables for customizing the Material t $kendo-dropzone-bg Color - k-try-shade( $kendo-base-bg, 1 ) + if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-base-bg, 1 )) #ebebeb @@ -5749,7 +5729,7 @@ The following table lists the available variables for customizing the Material t $kendo-dropzone-icon-text Color - k-try-tint( $kendo-dropzone-text, 4 ) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) rgba(97, 97, 97, 0.9116) @@ -5929,7 +5909,7 @@ The following table lists the available variables for customizing the Material t $kendo-editor-highlighted-bg Color - k-color-mix($kendo-color-primary, #ffffff, 20%) + if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) #d9dcf0 @@ -6389,7 +6369,7 @@ The following table lists the available variables for customizing the Material t $kendo-file-manager-toolbar-bg Color - k-try-shade( $kendo-button-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) whitesmoke @@ -6669,7 +6649,7 @@ The following table lists the available variables for customizing the Material t $kendo-file-manager-listview-item-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) rgba(97, 97, 97, 0.9116) @@ -6849,7 +6829,7 @@ The following table lists the available variables for customizing the Material t $kendo-file-manager-preview-icon-text Color - k-try-tint($kendo-file-manager-text, 4) + if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) rgba(97, 97, 97, 0.9116) @@ -8472,7 +8452,7 @@ The following table lists the available variables for customizing the Material t $kendo-grid-row-resizer-hover-bg Color - rgba( k-contrast-color( $kendo-grid-bg ), .24 ) + if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .24 )) rgba(0, 0, 0, 0.24) @@ -8757,7 +8737,7 @@ The following table lists the available variables for customizing the Material t $kendo-input-bg Color - k-try-shade( $kendo-component-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) whitesmoke @@ -8777,7 +8757,7 @@ The following table lists the available variables for customizing the Material t $kendo-input-border Color - rgba( $kendo-component-border, .38 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 )) rgba(0, 0, 0, 0.38) @@ -8897,7 +8877,7 @@ The following table lists the available variables for customizing the Material t $kendo-input-disabled-bg Color - k-try-shade( $kendo-component-bg, .25 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 )) #fafafa @@ -8907,7 +8887,7 @@ The following table lists the available variables for customizing the Material t $kendo-input-disabled-text Color - $kendo-disabled-text + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text) rgba(0, 0, 0, 0.38) @@ -8917,7 +8897,7 @@ The following table lists the available variables for customizing the Material t $kendo-input-disabled-border Color - rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) rgba(0, 0, 0, 0.06) @@ -10087,7 +10067,7 @@ The following table lists the available variables for customizing the Material t $kendo-listview-item-selected-bg Color - rgba( k-contrast-color( $kendo-listview-bg ), .04 ) + if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -10117,7 +10097,7 @@ The following table lists the available variables for customizing the Material t $kendo-listview-item-focus-bg Color - rgba( k-contrast-color( $kendo-listview-bg ), .08 ) + if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 )) rgba(0, 0, 0, 0.08) @@ -11267,7 +11247,7 @@ The following table lists the available variables for customizing the Material t $kendo-pager-text Color - if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) + if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) rgba(0, 0, 0, 0.54) @@ -11287,7 +11267,7 @@ The following table lists the available variables for customizing the Material t $kendo-pager-focus-bg Color - k-try-shade( $kendo-pager-bg, .5 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-pager-bg, .5 )) whitesmoke @@ -11639,7 +11619,7 @@ The following table lists the available variables for customizing the Material t $kendo-pdf-viewer-toolbar-bg Color - k-try-shade( $kendo-button-bg, .25 ) + if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .25 )) #fafafa @@ -12909,7 +12889,7 @@ The following table lists the available variables for customizing the Material t $kendo-progressbar-bg Color - k-try-tint( $kendo-color-primary, 8 ) + if($kendo-enable-color-system, k-color( primary-subtle ), k-try-tint( $kendo-color-primary, 8 )) #bac0e4 @@ -14253,16 +14233,6 @@ The following table lists the available variables for customizing the Material t - $elevation - Color - k-map-get( $theme, elevation ) - #000000 - - -
Description
Color of shadows
- - - $box-shadow-depth-1 String k-elevation(1) @@ -14352,6 +14322,16 @@ The following table lists the available variables for customizing the Material t
Deprecated
Use the `$kendo-elevation` map instead.
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
+ + $elevation + Color + k-map-get( $theme, elevation ) + #000000 + + +
Description
Color of shadows
+ + @@ -14415,7 +14395,7 @@ The following table lists the available variables for customizing the Material t $kendo-skeleton-item-bg Color - rgba( $kendo-color-inverse, .2 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) rgba(66, 66, 66, 0.2) @@ -14629,7 +14609,7 @@ The following table lists the available variables for customizing the Material t $kendo-switch-off-track-bg Color - rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) + rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 ) rgba(0, 0, 0, 0.38) @@ -14799,7 +14779,7 @@ The following table lists the available variables for customizing the Material t $kendo-switch-off-thumb-bg Color - if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ) + if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )) #ffffff @@ -14879,7 +14859,7 @@ The following table lists the available variables for customizing the Material t $kendo-switch-on-track-bg Color - rgba( $kendo-color-primary, .54 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 )) rgba(63, 81, 181, 0.54) @@ -15288,7 +15268,7 @@ The following table lists the available variables for customizing the Material t $kendo-table-header-text Color - if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ) + if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text )) rgba(0, 0, 0, 0.54) @@ -15408,7 +15388,7 @@ The following table lists the available variables for customizing the Material t $kendo-table-hover-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .07 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 )) rgba(0, 0, 0, 0.07) @@ -15478,7 +15458,7 @@ The following table lists the available variables for customizing the Material t $kendo-table-selected-bg Color - rgba( k-contrast-color( $kendo-table-bg ), .04 ) + if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) rgba(0, 0, 0, 0.04) @@ -15828,7 +15808,7 @@ The following table lists the available variables for customizing the Material t $kendo-tile-layout-bg Color - if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) + if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) #f5f5f5 @@ -16749,7 +16729,7 @@ The following table lists the available variables for customizing the Material t $kendo-treeview-item-hover-bg Color - rgba( $kendo-treeview-text, .07 ) + if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .07 ), rgba( $kendo-treeview-text, .07 )) rgba(0, 0, 0, 0.07)