diff --git a/.github/workflows/_compile-themes.yml b/.github/workflows/_compile-themes.yml index ff7501b1b65..83587322530 100644 --- a/.github/workflows/_compile-themes.yml +++ b/.github/workflows/_compile-themes.yml @@ -37,7 +37,8 @@ jobs: - name: Build test assets run: | - npm run sass + npm run sass --prefix packages/core + npm run sass --prefix packages/default - name: Build swatch for a11y tests run: | @@ -48,12 +49,7 @@ jobs: run: | tar -cf themes.tar \ packages/default/dist/all.css \ - packages/default/dist/default-ocean-blue-a11y.css \ - packages/bootstrap/dist/all.css \ - packages/classic/dist/all.css \ - packages/fluent/dist/all.css \ - packages/material/dist/all.css \ - packages/utils/dist/all.css + packages/default/dist/default-ocean-blue-a11y.css - name: Upload themes uses: actions/upload-artifact@v4 diff --git a/.github/workflows/_create-screenshots.yml b/.github/workflows/_create-screenshots.yml index c41c5dae1ae..935423f187b 100644 --- a/.github/workflows/_create-screenshots.yml +++ b/.github/workflows/_create-screenshots.yml @@ -14,7 +14,7 @@ jobs: strategy: matrix: - theme: [default, bootstrap, material, classic, fluent] + theme: [default] steps: diff --git a/.github/workflows/_test-units.yml b/.github/workflows/_test-units.yml index 8ec6fc80cdf..fcc4e171d89 100644 --- a/.github/workflows/_test-units.yml +++ b/.github/workflows/_test-units.yml @@ -14,7 +14,7 @@ jobs: strategy: matrix: - theme: [default, bootstrap, material, classic, fluent] + theme: [default] steps: diff --git a/packages/core/scss/_variables.scss b/packages/core/scss/_variables.scss index 58ae621cd63..fce7b490c7d 100644 --- a/packages/core/scss/_variables.scss +++ b/packages/core/scss/_variables.scss @@ -14,3 +14,10 @@ $kendo-enable-typography: false !default; $equilateral-index: 1.7320508076 !default; $equilateral-height: 0.8660254038 !default; // stylelint-enable number-max-precision +$kendo-disabled-styling: ( + bg: null, + color: null, + border: null, + opacity: .6, + filter: grayscale(.1) +) !default; diff --git a/packages/core/scss/color-system/_swatch-legacy.scss b/packages/core/scss/color-system/_swatch-legacy.scss deleted file mode 100644 index 7f3287721bd..00000000000 --- a/packages/core/scss/color-system/_swatch-legacy.scss +++ /dev/null @@ -1,150 +0,0 @@ -// Primary colors -$kendo-color-primary: null !default; -$kendo-color-primary-lighter: null !default; -$kendo-color-primary-darker: null !default; -$kendo-color-primary-contrast: null !default; - -// Secondary colors -$kendo-color-secondary: null !default; -$kendo-color-secondary-lighter: null !default; -$kendo-color-secondary-darker: null !default; -$kendo-color-secondary-contrast: null !default; - -// Tertiary colors -$kendo-color-tertiary: null !default; -$kendo-color-tertiary-lighter: null !default; -$kendo-color-tertiary-darker: null !default; -$kendo-color-tertiary-contrast: null !default; - -// Info colors -$kendo-color-info: null !default; -$kendo-color-info-lighter: null !default; -$kendo-color-info-darker: null !default; - -// Success colors -$kendo-color-success: null !default; -$kendo-color-success-lighter: null !default; -$kendo-color-success-darker: null !default; - -// Warning colors -$kendo-color-warning: null !default; -$kendo-color-warning-lighter: null !default; -$kendo-color-warning-darker: null !default; - -// Error colors -$kendo-color-error: null !default; -$kendo-color-error-lighter: null !default; -$kendo-color-error-darker: null !default; - - -$kendo-color-dark: null !default; - -// Light colors -$kendo-color-light: null !default; - -// Inverse colors -$kendo-color-inverse: null !default; - -// Body styles -$kendo-body-bg: null !default; -$kendo-body-text: null !default; - -// App styles -$kendo-app-bg: null !default; -$kendo-app-text: $kendo-body-text !default; -$kendo-app-border: null !default; - -// Component styles -$kendo-component-bg: null !default; -$kendo-component-text: $kendo-body-text !default; -$kendo-component-border: null !default; - -$kendo-base-bg: null !default; -$kendo-base-text: $kendo-body-text !default; -$kendo-base-border: $kendo-app-border !default; -$kendo-base-gradient: null !default; - -// States styles -$kendo-hover-bg: null !default; -$kendo-hover-text: $kendo-base-text !default; -$kendo-hover-border: $kendo-base-border !default; -$kendo-hover-gradient: $kendo-base-gradient !default; - -$kendo-selected-bg: $kendo-color-primary !default; -$kendo-selected-text: $kendo-color-primary-contrast !default; -$kendo-selected-border: $kendo-base-border !default; -$kendo-selected-gradient: $kendo-base-gradient !default; - -$kendo-selected-hover-bg: null !default; -$kendo-selected-hover-text: $kendo-selected-text !default; -$kendo-selected-hover-border: $kendo-base-border !default; -$kendo-selected-hover-gradient: $kendo-base-gradient !default; - -$kendo-component-header-bg: $kendo-base-bg !default; -$kendo-component-header-text: $kendo-base-text !default; -$kendo-component-header-border: $kendo-base-border !default; -$kendo-component-header-gradient: null !default; - -$kendo-focus-outline: null !default; - -$kendo-subtle-text: null !default; - -// Link -$kendo-link-text: $kendo-color-primary !default; -$kendo-link-hover-text: null !default; - -// Validator -$kendo-invalid-bg: null !default; -$kendo-invalid-text: $kendo-color-error !default; -$kendo-invalid-border: $kendo-color-error !default; -$kendo-invalid-shadow: null !default; - -$kendo-valid-bg: null !default; -$kendo-valid-text: $kendo-color-success !default; -$kendo-valid-border: $kendo-color-success !default; -$kendo-valid-shadow: null !default; - -// Disabled Styling - -$kendo-disabled-bg: null !default; -$kendo-disabled-text: null !default; -$kendo-disabled-border: null !default; -$kendo-disabled-opacity: null !default; -$kendo-disabled-filter: null !default; - -$kendo-disabled-styling: ( - bg: $kendo-disabled-bg, - color: $kendo-disabled-text, - border: $kendo-disabled-border, - opacity: $kendo-disabled-opacity, - filter: $kendo-disabled-filter -) !default; - -$kendo-theme-colors: ( - "primary": $kendo-color-primary, - "secondary": $kendo-color-secondary, - "tertiary": $kendo-color-tertiary, - "info": $kendo-color-info, - "success": $kendo-color-success, - "warning": $kendo-color-warning, - "error": $kendo-color-error, - "dark": $kendo-color-dark, - "light": $kendo-color-light, - "inverse": $kendo-color-inverse, -) !default; - -:root { - --kendo-disabled-text: #{$kendo-disabled-text}; - --kendo-disabled-bg: #{$kendo-disabled-bg}; - --kendo-disabled-border: #{$kendo-disabled-border}; - --kendo-disabled-opacity: #{$kendo-disabled-opacity}; - --kendo-disabled-filter: #{$kendo-disabled-filter}; - - --kendo-hr-border: #{$kendo-component-border}; - - --kendo-marquee-text: #{$kendo-selected-text}; - --kendo-marquee-bg: #{$kendo-selected-bg}; - --kendo-marquee-border: #{$kendo-selected-border}; - - --kendo-text-selection-bg: #{$kendo-color-primary}; -} diff --git a/packages/core/scss/color-system/_swatch.scss b/packages/core/scss/color-system/_swatch.scss index 75fe570a400..e2a7f0c9ff3 100644 --- a/packages/core/scss/color-system/_swatch.scss +++ b/packages/core/scss/color-system/_swatch.scss @@ -424,6 +424,20 @@ $_default-colors: ( $kendo-colors: $_default-colors !default; $kendo-colors: map.merge($_default-colors, $kendo-colors); +$kendo-component-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": k-color( inverse ) + +) !default; + @mixin kendo-color-system--styles() { @if ($kendo-enable-color-system) { :root { diff --git a/packages/core/scss/components/adaptive/_theme.scss b/packages/core/scss/components/adaptive/_theme.scss index 06889625025..5c1968c6435 100644 --- a/packages/core/scss/components/adaptive/_theme.scss +++ b/packages/core/scss/components/adaptive/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "./variables.scss" as *; @mixin kendo-adaptive--theme-base() { @@ -23,11 +22,11 @@ .k-grid-mobile { .k-column-active + th.k-header { - border-left-color: $kendo-body-text; + border-left-color: k-color( on-app-surface ); } .k-resize-handle-inner::before { - background-color: $kendo-base-bg; + background-color: k-color( surface ); } } @@ -72,7 +71,7 @@ .k-item, .k-link { - color: $kendo-base-text; + color: k-color( on-app-surface ); } .k-clear, diff --git a/packages/core/scss/components/appbar/_theme.scss b/packages/core/scss/components/appbar/_theme.scss index d83ed30888e..2b44b89d623 100644 --- a/packages/core/scss/components/appbar/_theme.scss +++ b/packages/core/scss/components/appbar/_theme.scss @@ -1,6 +1,5 @@ @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -16,7 +15,7 @@ // AppBar theme colors - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-appbar-theme-colors { .k-appbar-#{$name} { @if $name == "light" { color: $kendo-appbar-light-text; @@ -25,7 +24,7 @@ color: $kendo-appbar-dark-text; background-color: $kendo-appbar-dark-bg; } @else { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } diff --git a/packages/core/scss/components/appbar/_variables.scss b/packages/core/scss/components/appbar/_variables.scss index e17860aff8d..c2c162be375 100644 --- a/packages/core/scss/components/appbar/_variables.scss +++ b/packages/core/scss/components/appbar/_variables.scss @@ -1,3 +1,5 @@ +@use "../../color-system/_swatch.scss" as *; + // AppBar $kendo-appbar-margin-x: null !default; @@ -20,3 +22,5 @@ $kendo-appbar-dark-text: null !default; $kendo-appbar-box-shadow: null !default; $kendo-appbar-bottom-box-shadow: null !default; + +$kendo-appbar-theme-colors: null !default; diff --git a/packages/core/scss/components/avatar/_theme.scss b/packages/core/scss/components/avatar/_theme.scss index f453a53554b..6f70df403c1 100644 --- a/packages/core/scss/components/avatar/_theme.scss +++ b/packages/core/scss/components/avatar/_theme.scss @@ -9,7 +9,7 @@ @each $name, $color in $kendo-avatar-theme-colors { .k-avatar-solid-#{$name} { border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } diff --git a/packages/core/scss/components/avatar/_variables.scss b/packages/core/scss/components/avatar/_variables.scss index 9b755c8954f..0188779fd1b 100644 --- a/packages/core/scss/components/avatar/_variables.scss +++ b/packages/core/scss/components/avatar/_variables.scss @@ -1,3 +1,5 @@ +@use "../../color-system/_swatch.scss" as *; + // Avatar $kendo-avatar-border-width: null !default; diff --git a/packages/core/scss/components/badge/_layout.scss b/packages/core/scss/components/badge/_layout.scss index 0facca00c72..f2972c287e9 100644 --- a/packages/core/scss/components/badge/_layout.scss +++ b/packages/core/scss/components/badge/_layout.scss @@ -1,6 +1,6 @@ -@use "../../color-system/_swatch-legacy.scss" as *; -@use "./_variables.scss" as *; @use "sass:map"; +@use "../../color-system/_functions.import.scss" as *; +@use "./_variables.scss" as *; @mixin kendo-badge--layout-base() { @@ -143,7 +143,7 @@ // Border cutout .k-badge-border-cutout { - box-shadow: 0 0 0 2px $kendo-component-bg; + box-shadow: 0 0 0 2px k-color( surface-alt ); } } diff --git a/packages/core/scss/components/badge/_theme.scss b/packages/core/scss/components/badge/_theme.scss index fb8cd157e73..e2fc4f7295a 100644 --- a/packages/core/scss/components/badge/_theme.scss +++ b/packages/core/scss/components/badge/_theme.scss @@ -1,15 +1,14 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../functions/index.import.scss" as *; @use "../../color-system/_functions.import.scss" as *; -@use "../../_variables.scss" as *; +@use "_variables.scss" as *; @mixin kendo-badge--theme-base() { // Solid badges - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-badge-theme-colors { .k-badge-solid-#{$name} { border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } @@ -20,7 +19,7 @@ background-color: transparent; } - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-badge-theme-colors { .k-badge-outline-#{$name} { color: $color; } diff --git a/packages/core/scss/components/badge/_variables.scss b/packages/core/scss/components/badge/_variables.scss index 226f732e2c9..e300e4e1115 100644 --- a/packages/core/scss/components/badge/_variables.scss +++ b/packages/core/scss/components/badge/_variables.scss @@ -1,3 +1,5 @@ +@use "../../color-system/_swatch.scss" as *; + // Badge $kendo-badge-border-width: null !default; @@ -31,3 +33,5 @@ $kendo-badge-md-min-width: null !default; $kendo-badge-lg-min-width: null !default; $kendo-badge-sizes: null !default; + +$kendo-badge-theme-colors: null !default; diff --git a/packages/core/scss/components/bottom-navigation/_theme.scss b/packages/core/scss/components/bottom-navigation/_theme.scss index 63b3162a00f..059726711db 100644 --- a/packages/core/scss/components/bottom-navigation/_theme.scss +++ b/packages/core/scss/components/bottom-navigation/_theme.scss @@ -1,4 +1,3 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; @use "../../color-system/_functions.import.scss" as *; @@ -8,20 +7,20 @@ @mixin kendo-bottom-navigation--theme-base() { // Solid - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-bottom-navigation-theme-colors { .k-bottom-nav-solid-#{$name} { @include fill( - $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)), + $color: color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), $bg: $color ); .k-bottom-nav-item.k-focus, .k-bottom-nav-item:focus { - @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2))); + @include fill( $bg: color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent)); } .k-bottom-nav-item.k-selected { - @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) ); + @include fill( $color: k-color( on-#{$name} )); } } // TODO: remove when suites update class names @@ -31,7 +30,7 @@ } // Flat - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-bottom-navigation-theme-colors { .k-bottom-nav-flat-#{$name} { @include fill( $kendo-bottom-nav-flat-text, @@ -41,12 +40,12 @@ .k-bottom-nav-item.k-focus, .k-bottom-nav-item:focus { - @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) ); + @include fill( $bg: color-mix(in srgb, k-color( on-app-surface ) 5%, transparent)); } .k-bottom-nav-item.k-selected { @if $name == "secondary" or $name == "light" { - @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) ); + @include fill( $color: k-color( #{$name} )); } @else { @include fill( $color: $color ); } diff --git a/packages/core/scss/components/bottom-navigation/_variables.scss b/packages/core/scss/components/bottom-navigation/_variables.scss index eb7667ce294..d3d4d2c877a 100644 --- a/packages/core/scss/components/bottom-navigation/_variables.scss +++ b/packages/core/scss/components/bottom-navigation/_variables.scss @@ -1,3 +1,5 @@ +@use "../../color-system/_swatch.scss" as *; + // BottomNavigation $kendo-bottom-nav-padding-x: null !default; @@ -22,3 +24,5 @@ $kendo-bottom-nav-shadow: null !default; $kendo-bottom-nav-flat-text: null !default; $kendo-bottom-nav-flat-bg: null !default; $kendo-bottom-nav-flat-border: null !default; + +$kendo-bottom-navigation-theme-colors: null !default; diff --git a/packages/core/scss/components/breadcrumb/_layout.scss b/packages/core/scss/components/breadcrumb/_layout.scss index 93fc64f6c9d..dfcf0ca5517 100644 --- a/packages/core/scss/components/breadcrumb/_layout.scss +++ b/packages/core/scss/components/breadcrumb/_layout.scss @@ -1,7 +1,6 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; @use "../../color-system/_constants.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../motion/index.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -93,7 +92,7 @@ .k-breadcrumb-delimiter, .k-breadcrumb-delimiter-icon { color: inherit; - opacity: $kendo-disabled-opacity; + opacity: map.get( $kendo-disabled-styling, opacity ); } diff --git a/packages/core/scss/components/button/_layout.scss b/packages/core/scss/components/button/_layout.scss index cfade26e643..f88ad0353a2 100644 --- a/packages/core/scss/components/button/_layout.scss +++ b/packages/core/scss/components/button/_layout.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_constants.scss" as *; +@use "../../_variables.scss" as *; @use "./_variables.scss" as *; @use "../icons/_variables.scss" as *; diff --git a/packages/core/scss/components/button/_theme.scss b/packages/core/scss/components/button/_theme.scss index da750a3d39d..15b054d61eb 100644 --- a/packages/core/scss/components/button/_theme.scss +++ b/packages/core/scss/components/button/_theme.scss @@ -2,7 +2,6 @@ @use "sass:meta"; @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @use "./_variables.scss" as *; @@ -77,17 +76,17 @@ @each $name, $color in $kendo-button-theme-colors { @if ($name != "base") { - $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); - $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null )); - $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null )); + $_button-text: k-color( on-#{$name} ); + $_button-bg: k-color( $name ); + $_button-border: k-color( $name ); $_button-hover-text: null; - $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null )); - $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null )); + $_button-hover-bg: k-color( #{$name}-hover ); + $_button-hover-border: k-color( #{$name}-hover ); $_button-active-text: null; - $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null )); - $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null )); + $_button-active-bg: k-color( #{$name}-active ); + $_button-active-border: k-color( #{$name}-active ); .k-button-solid-#{$name} { @include fill( @@ -111,7 +110,7 @@ &:focus, &.k-focus { @if ( $kendo-solid-button-shadow ) { - @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true ); } } @@ -151,11 +150,11 @@ // Outline button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) { .k-button-outline-#{$name} { @include box-shadow( none ); border-color: currentColor; - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + color: k-color( #{$name}-on-surface ); background-color: transparent; // Hover state @@ -163,13 +162,13 @@ &.k-hover { @if $name == "base" { @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color ) ), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) + k-color( base ), + k-color( on-base ), + k-color( on-base ) ); } @else { @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + k-color( on-#{$name} ), $color, $color ); @@ -181,9 +180,9 @@ &.k-focus { @if $kendo-outline-button-shadow { @if $name == "base" { - @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true ); } @else { - @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true ); } } } @@ -193,13 +192,13 @@ &.k-active { @if $name == "base" { @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) + k-color( base ), + k-color( on-base ), + k-color( on-base ) ); } @else { @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + k-color( on-#{$name} ), $color, $color ); @@ -210,13 +209,13 @@ &.k-selected { @if $name == "base" { @include fill( - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )), - if($kendo-enable-color-system, k-color( on-base ), $color ), - if($kendo-enable-color-system, k-color( on-base ), $color ) + k-color( base ), + k-color( on-base ), + k-color( on-base ) ); } @else { @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + k-color( on-#{$name} ), $color, $color ); @@ -238,7 +237,7 @@ @if $name == "base" { color: inherit; } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + color: k-color( #{$name}-on-surface ); } // Disabled state @@ -251,7 +250,7 @@ // Link button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) { .k-button-link-#{$name} { color: $color; @@ -259,9 +258,9 @@ &:hover, &.k-hover { @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + color: k-color( on-app-surface ); } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 )); + color: k-color( #{$name}-hover ); } } @@ -270,9 +269,9 @@ &.k-focus { @if ( $kendo-link-button-shadow ) { @if $name == "base" { - @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true ); } @else { - @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true ); } } } @@ -281,18 +280,18 @@ &:active, &.k-active { @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + color: k-color( on-app-surface ); } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + color: k-color( #{$name}-active ); } } // Selected &.k-selected { @if $name == "base" { - color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 )); + color: k-color( on-app-surface ); } @else { - color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 )); + color: k-color( #{$name}-active ); } } @@ -306,9 +305,9 @@ // Clear button - @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) { + @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color( on-app-surface ) ) ) { .k-button-clear-#{$name} { - color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color); + color: k-color( #{$name}-on-surface ); &:focus, &.k-focus, diff --git a/packages/core/scss/components/calendar/_theme.scss b/packages/core/scss/components/calendar/_theme.scss index a4d679d03eb..aad37c59455 100644 --- a/packages/core/scss/components/calendar/_theme.scss +++ b/packages/core/scss/components/calendar/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -134,7 +133,7 @@ &.k-invalid:hover, &.ng-invalid.ng-touched, &.ng-invalid.ng-dirty { - border-color: $kendo-invalid-border; + border-color: k-color( error ); } } @@ -160,7 +159,7 @@ .k-calendar { // stylelint-disable-line $kendo-calendar-range-gap: k-spacing(1px) !default; - $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 )); + $kendo-calendar-range-bg: color-mix(in srgb, k-color( primary ) 25%, transparent); $kendo-calendar-range-split-size: 5px !default; .k-range-start, diff --git a/packages/core/scss/components/card/_theme.scss b/packages/core/scss/components/card/_theme.scss index 58322523202..c06413a8a07 100644 --- a/packages/core/scss/components/card/_theme.scss +++ b/packages/core/scss/components/card/_theme.scss @@ -1,6 +1,5 @@ @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -54,6 +53,10 @@ @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border ); } + // Body + .k-card-body { + border-color: inherit; + } // Separator .k-card-separator, @@ -69,11 +72,11 @@ // Card theme colors - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-card-theme-colors { .k-card-#{$name} { - background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10)); - color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6)); - border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9)); + background-color: k-color( #{$name}-subtle ); + color: k-color( #{$name}-on-subtle ); + border-color: k-color( #{$name}-emphasis ); .k-card-subtitle { color: inherit; diff --git a/packages/core/scss/components/card/_variables.scss b/packages/core/scss/components/card/_variables.scss index 040695783f5..8ee9e0f5aa5 100644 --- a/packages/core/scss/components/card/_variables.scss +++ b/packages/core/scss/components/card/_variables.scss @@ -70,3 +70,5 @@ $kendo-card-deck-scroll-button-offset: null !default; $kendo-card-callout-width: null !default; $kendo-card-callout-height: null !default; + +$kendo-card-theme-colors: null !default; diff --git a/packages/core/scss/components/chat/_theme.scss b/packages/core/scss/components/chat/_theme.scss index 9f34e851db6..3c1edc87838 100644 --- a/packages/core/scss/components/chat/_theme.scss +++ b/packages/core/scss/components/chat/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../motion/index.import.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @@ -39,8 +38,8 @@ transition: $kendo-transition; order: -1; - a { color: $kendo-link-text; } - a:hover { color: $kendo-link-hover-text; } + a { color: k-color( primary ); } + a:hover { color: k-color( primary-hover ); } } .k-chat-bubble:hover { @include box-shadow( $kendo-chat-bubble-hover-shadow ); @@ -84,7 +83,7 @@ &:focus, &.k-focus { - @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true ); + @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), true, true ); } } } diff --git a/packages/core/scss/components/checkbox/_layout.scss b/packages/core/scss/components/checkbox/_layout.scss index aa70c85c008..55a7d4ad9cf 100644 --- a/packages/core/scss/components/checkbox/_layout.scss +++ b/packages/core/scss/components/checkbox/_layout.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../spacing/index.import.scss" as *; +@use "../../_variables.scss" as *; @use "./_variables.scss" as *; @mixin kendo-checkbox--layout-base() { diff --git a/packages/core/scss/components/chip/_theme.scss b/packages/core/scss/components/chip/_theme.scss index b01a8a3b2bf..8940aac1a8b 100644 --- a/packages/core/scss/components/chip/_theme.scss +++ b/packages/core/scss/components/chip/_theme.scss @@ -35,24 +35,24 @@ } } @else { @include fill( - if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )), - if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )), - if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )), + k-color( #{$name}-on-subtle ), + k-color( #{$name}-subtle ), + k-color( #{$name}-emphasis ), $kendo-chip-solid-gradient ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) ); + @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent)); } &:hover, &.k-hover { - @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) ); + @include fill( $bg: k-color( #{$name}-subtle-hover )); } &.k-selected { - @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) ); + @include fill( $bg: k-color( #{$name}-subtle-active )); } } } @@ -90,56 +90,56 @@ } } @else if ($name == "warning") { @include fill( - if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)), - if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), - if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + k-color( on-app-surface ), + transparent, + $color ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); + @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent)); } &:hover, &.k-hover { @include fill( - $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), - $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + $color: k-color( on-#{$name} ), + $bg: $color ); } &.k-selected { @include fill( - $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )), - $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)) + $color: k-color( on-#{$name} ), + $bg: $color ); } } @else { @include fill( - if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )), - if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )) + k-color( #{$name}-on-surface ), + transparent, + k-color( #{$name}-on-surface ) ); &:focus, &.k-focus { - @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) ); + @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color( $name ) 16%, transparent)); } &:hover, &.k-hover { @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), - if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )) + k-color( on-#{$name} ), + k-color( #{$name}-hover ), + k-color( #{$name}-hover ) ); } &.k-selected { @include fill( - if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )), - if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )), - if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )) + k-color( on-#{$name} ), + k-color( #{$name}-active ), + k-color( #{$name}-active ) ); } } diff --git a/packages/core/scss/components/dataviz/_layout.scss b/packages/core/scss/components/dataviz/_layout.scss index 7635168b76e..0236b991df4 100644 --- a/packages/core/scss/components/dataviz/_layout.scss +++ b/packages/core/scss/components/dataviz/_layout.scss @@ -7,7 +7,6 @@ @use "../../border-radii/index.import.scss" as *; @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @use "../tooltip/_variables.scss" as *; @@ -415,13 +414,13 @@ // export variables to allow use in scripts // TODO: remove in favor of $_css-vars once all suites are updated $exported: ( - primary: $kendo-color-primary, - primary-contrast: $kendo-color-primary-contrast, - base: $kendo-base-bg, + primary: k-color( primary ), + primary-contrast: k-color( on-primary ), + base: k-color( surface ), background: $kendo-chart-bg, - normal-background: $kendo-base-bg, - normal-text-color: $kendo-base-text, + normal-background: k-color( surface ), + normal-text-color: k-color( on-app-surface ), series-a: $kendo-series-a, series-b: $kendo-series-b, @@ -461,8 +460,8 @@ series-29: $kendo-series-29, series-30: $kendo-series-30, - gauge-pointer: $kendo-color-primary, - gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )), + gauge-pointer: k-color( primary ), + gauge-track: k-color( base-emphasis ), chart-font-size: $kendo-chart-font-size, chart-title-font-size: $kendo-chart-title-font-size, @@ -504,8 +503,8 @@ } $_css-vars: ( - chart-primary-bg: $kendo-color-primary, - chart-primary-contrast: $kendo-color-primary-contrast, + chart-primary-bg: k-color( primary ), + chart-primary-contrast: k-color( on-primary ), chart-bg: $kendo-chart-bg, chart-text: $kendo-chart-text, @@ -558,8 +557,8 @@ chart-series-29: $kendo-series-29, chart-series-30: $kendo-series-30, - chart-gauge-pointer: $kendo-color-primary, - chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )) + chart-gauge-pointer: k-color( primary ), + chart-gauge-track: k-color( base-emphasis ) ); diff --git a/packages/core/scss/components/dataviz/_theme.scss b/packages/core/scss/components/dataviz/_theme.scss index 757a6eecbe0..27d547a92d2 100644 --- a/packages/core/scss/components/dataviz/_theme.scss +++ b/packages/core/scss/components/dataviz/_theme.scss @@ -1,7 +1,7 @@ @use "../../mixins/index.import.scss" as *; @use "../../color-system/_constants.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @use "../button/_variables.scss" as *; @@ -74,7 +74,7 @@ } .k-mask { - background-color: $kendo-component-bg; + background-color: k-color( surface-alt ); opacity: .8; } @@ -86,31 +86,30 @@ // Treemap .k-treemap { @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border + k-color( on-app-surface ), + k-color( surface-alt ), + k-color( border ) ); // Title .k-treemap-title { @include fill( - $kendo-component-header-text, - $kendo-component-header-bg, - $kendo-component-header-border, - $kendo-component-header-gradient + k-color( on-app-surface ), + k-color( surface ), + k-color( border ) ); } // Leaf .k-leaf { - color: $kendo-component-bg; + color: k-color( surface-alt ); } .k-leaf.k-inverse { - color: $kendo-component-text; + color: k-color( on-app-surface ); } .k-leaf:hover, .k-leaf.k-hover { - box-shadow: inset 0 0 0 3px $kendo-component-border; + box-shadow: inset 0 0 0 3px k-color( border ); } } diff --git a/packages/core/scss/components/dialog/_theme.scss b/packages/core/scss/components/dialog/_theme.scss index 577e4bd6d81..e3b723f5cfd 100644 --- a/packages/core/scss/components/dialog/_theme.scss +++ b/packages/core/scss/components/dialog/_theme.scss @@ -18,7 +18,7 @@ // Dialog theme colors @each $name, $color in $kendo-dialog-theme-colors { .k-dialog-#{$name} .k-dialog-titlebar { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } diff --git a/packages/core/scss/components/editor/_theme.scss b/packages/core/scss/components/editor/_theme.scss index 971a1b84410..9b9866f814a 100644 --- a/packages/core/scss/components/editor/_theme.scss +++ b/packages/core/scss/components/editor/_theme.scss @@ -1,19 +1,19 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @mixin kendo-editor--theme-base() { .k-editor { @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border + k-color( on-app-surface ), + k-color( surface-alt ), + k-color( border ) ); &.k-readonly { .k-editor-content.k-focus { - outline-color: $kendo-body-text; + outline-color: k-color( on-app-surface ); } } } @@ -51,7 +51,7 @@ &:hover, &.k-hover, &.k-active { - border-color: $kendo-component-border; + border-color: k-color( border ); } } @@ -68,7 +68,7 @@ // Insert table .k-ct-popup { .k-selected { - @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none ); + @include fill( k-color( on-primary ), k-color( primary ), k-color( border ), none ); } } diff --git a/packages/core/scss/components/fab/_theme.scss b/packages/core/scss/components/fab/_theme.scss index 8a574155188..fde7bc4e3a1 100644 --- a/packages/core/scss/components/fab/_theme.scss +++ b/packages/core/scss/components/fab/_theme.scss @@ -13,7 +13,7 @@ outline: $kendo-fab-border-width $kendo-fab-outline-style $color; outline-offset: -$kendo-fab-border-width; border-color: $color; - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } @@ -22,8 +22,8 @@ @each $name, $color in $kendo-fab-theme-colors { .k-hover.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:hover { - border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); - background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 )); + border-color: k-color( #{$name}-hover ); + background-color: k-color( #{$name}-hover ); } } @@ -34,7 +34,7 @@ @if $kendo-enable-focus-contrast { @include box-shadow( inset 0 0 0 2px currentColor ); } @else { - outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 )); + outline: $kendo-fab-outline-style $kendo-fab-outline-width color-mix(in srgb, k-color( $name ) 30%, transparent); } } } @@ -45,8 +45,8 @@ .k-selected.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:active { @include box-shadow($kendo-fab-active-shadow); - border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); - background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5)); + border-color: k-color( #{$name}-active ); + background-color: k-color( #{$name}-active ); } } @@ -55,8 +55,8 @@ .k-disabled.k-fab-solid-#{$name}, .k-fab-solid-#{$name}:disabled { @include box-shadow($kendo-fab-disabled-shadow); - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 )); - color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 )); + background-color: color-mix(in srgb, k-color( $name ) 60%, transparent); + color: color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent); opacity: 1; } } @@ -85,8 +85,8 @@ // Hover state .k-fab-item.k-hover .k-fab-item-icon, .k-fab-item:hover .k-fab-item-icon { - border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 )); - background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 )); + border-color: k-color( border ); + background-color: k-color( base-hover ); } // Focus state @@ -95,7 +95,7 @@ .k-fab-item.k-focus .k-fab-item-text, .k-fab-item.k-focus .k-fab-item-icon { @if $kendo-enable-focus-contrast { - @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + @include box-shadow( inset 0 0 0 2px k-color( on-app-surface )); } @else { outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color; } @@ -105,8 +105,8 @@ .k-fab-item.k-active .k-fab-item-icon, .k-fab-item:active .k-fab-item-icon { @include box-shadow($kendo-fab-item-active-shadow); - border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 )); - background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 )); + border-color: k-color( border-alt ); + background-color: k-color( base-active ); } // Disabled state @@ -117,8 +117,8 @@ .k-fab-item-text, .k-fab-item-icon { @include box-shadow($kendo-fab-item-disabled-shadow); - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 )); - color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 )); + background-color: color-mix(in srgb, k-color( base ) 60%, transparent); + color: color-mix(in srgb, k-color( on-base ) 60%, transparent); } } diff --git a/packages/core/scss/components/filter/_theme.scss b/packages/core/scss/components/filter/_theme.scss index 2c30882380b..cbacefb6229 100644 --- a/packages/core/scss/components/filter/_theme.scss +++ b/packages/core/scss/components/filter/_theme.scss @@ -1,11 +1,11 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../mixins/index.import.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @mixin kendo-filter--theme-base() { .k-filter { - color: $kendo-component-text; + color: k-color( on-app-surface ); .k-filter-preview-field { color: $kendo-filter-preview-field-text; @@ -20,7 +20,7 @@ .k-filter-toolbar::before, .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after, .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after { - background-color: $kendo-component-border; + background-color: k-color( border ); } // Focus diff --git a/packages/core/scss/components/floating-label/_theme.scss b/packages/core/scss/components/floating-label/_theme.scss index 3a136c84723..cb63587507c 100644 --- a/packages/core/scss/components/floating-label/_theme.scss +++ b/packages/core/scss/components/floating-label/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @mixin kendo-floating-label--theme-base() { @@ -24,7 +24,7 @@ &.k-invalid > .k-floating-label, &.ng-invalid.ng-touched > .k-floating-label, &.ng-invalid.ng-dirty > .k-floating-label { - @include fill ( $color: $kendo-invalid-text ); + @include fill ( $color: k-color( error ) ); } } diff --git a/packages/core/scss/components/forms/_layout.scss b/packages/core/scss/components/forms/_layout.scss index 7fe07b864de..dec9970f88d 100644 --- a/packages/core/scss/components/forms/_layout.scss +++ b/packages/core/scss/components/forms/_layout.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../spacing/index.import.scss" as *; +@use "../../_variables.scss" as *; @use "./_variables.scss" as *; @use "../input/_variables.scss" as *; diff --git a/packages/core/scss/components/forms/_theme.scss b/packages/core/scss/components/forms/_theme.scss index 715d1e26f65..a1282d611ef 100644 --- a/packages/core/scss/components/forms/_theme.scss +++ b/packages/core/scss/components/forms/_theme.scss @@ -1,12 +1,12 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @mixin kendo-form--theme-base() { .k-form, .k-form-inline { - @include fill( $color: $kendo-body-text ); + @include fill( $color: k-color( on-app-surface ) ); fieldset { legend { @@ -19,18 +19,18 @@ } .k-field-info { - @include fill( $color: $kendo-subtle-text ); + @include fill( $color: k-color( subtle ) ); } .k-alert-error { - @include fill( $color: $kendo-color-error ); + @include fill( $color: k-color( error ) ); } } .k-form-error, .k-text-error, .k-form-field-error .k-label { - @include fill( $color: $kendo-color-error ); + @include fill( $color: k-color( error ) ); } .k-form-separator { diff --git a/packages/core/scss/components/gantt/_theme.scss b/packages/core/scss/components/gantt/_theme.scss index 43926d3e3db..6c151d933d5 100644 --- a/packages/core/scss/components/gantt/_theme.scss +++ b/packages/core/scss/components/gantt/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @@ -104,7 +103,7 @@ ); &.k-task-delayed { - @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px); + @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color( app-surface ), 90deg, 4px, 2px); } &.k-task-advanced { @@ -228,7 +227,7 @@ // Delay offset .k-task-offset { - @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px); + @include repeating-striped-gradient($kendo-gantt-delayed-bg, k-color( app-surface ), 135deg, 4px, 2px); .k-resize-e::before { @include fill( @@ -242,7 +241,7 @@ } .k-task-offset:hover { - @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px); + @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, k-color( app-surface ), 135deg, 4px, 2px); } .k-pdf-export .k-task-offset { diff --git a/packages/core/scss/components/grid/_theme.scss b/packages/core/scss/components/grid/_theme.scss index 9ca13aba9b0..a7ee3231f57 100644 --- a/packages/core/scss/components/grid/_theme.scss +++ b/packages/core/scss/components/grid/_theme.scss @@ -1,6 +1,6 @@ @use "../../mixins/index.import.scss" as *; @use "../../color-system/_constants.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @use "../button/_variables.scss" as *; @@ -211,8 +211,8 @@ @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true ); } &.k-active { - color: $kendo-selected-text; - background-color: $kendo-selected-bg; + color: k-color( on-primary ); + background-color: k-color( primary ); } } @@ -282,15 +282,12 @@ &.k-table-row.k-selected .k-table-td.k-grid-row-sticky, &.k-table-row td.k-grid-content-sticky.k-selected, &.k-table-row .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - @include fill( $bg: $kendo-grid-sticky-bg ); + @include fill( $bg: $kendo-grid-sticky-bg ); - &::before { - @include fill( $bg: $kendo-grid-sticky-selected-bg ); - } - } @else { + &::before { @include fill( $bg: $kendo-grid-sticky-selected-bg ); } + } &.k-selected.k-table-alt-row td.k-grid-content-sticky, @@ -298,13 +295,9 @@ &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky, &.k-table-alt-row td.k-grid-content-sticky.k-selected, &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - @include fill( $bg: $kendo-grid-sticky-alt-bg ); + @include fill( $bg: $kendo-grid-sticky-alt-bg ); - &::before { - @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); - } - } @else { + &::before { @include fill( $bg: $kendo-grid-sticky-selected-alt-bg ); } } @@ -332,13 +325,9 @@ &.k-hover td.k-grid-content-sticky.k-selected, &:hover .k-table-td.k-grid-content-sticky.k-selected, &.k-hover .k-table-td.k-grid-content-sticky.k-selected { - @if($kendo-enable-color-system) { - background-color: $kendo-grid-sticky-hover-bg; + background-color: $kendo-grid-sticky-hover-bg; - &::before { - background-color: $kendo-grid-sticky-selected-hover-bg; - } - } @else { + &::before { background-color: $kendo-grid-sticky-selected-hover-bg; } } diff --git a/packages/core/scss/components/input/_layout.scss b/packages/core/scss/components/input/_layout.scss index 996a8ff8015..e132e38fcc6 100644 --- a/packages/core/scss/components/input/_layout.scss +++ b/packages/core/scss/components/input/_layout.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_constants.scss" as *; +@use "../../_variables.scss" as *; @use "./_variables.scss" as *; @use "../icons/_variables.scss" as *; diff --git a/packages/core/scss/components/input/_theme.scss b/packages/core/scss/components/input/_theme.scss index 7dbedcd51b5..69a7200bac0 100644 --- a/packages/core/scss/components/input/_theme.scss +++ b/packages/core/scss/components/input/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @mixin kendo-input--theme-base() { @@ -63,7 +63,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, @@ -152,7 +152,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, @@ -236,7 +236,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, @@ -331,7 +331,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, @@ -402,7 +402,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, @@ -497,7 +497,7 @@ @include fill( $border: $kendo-input-invalid-border ); .k-input-validation-icon { - color: $kendo-invalid-text; + color: k-color( error ); } &:focus, diff --git a/packages/core/scss/components/list/_theme.scss b/packages/core/scss/components/list/_theme.scss index ee7ca45b64d..95b40da1a5f 100644 --- a/packages/core/scss/components/list/_theme.scss +++ b/packages/core/scss/components/list/_theme.scss @@ -64,7 +64,7 @@ &.k-selected:hover, &.k-selected.k-hover { color: $kendo-list-item-selected-text; - background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg )); + background-color: k-color( primary-hover ); } } diff --git a/packages/core/scss/components/listbox/_theme.scss b/packages/core/scss/components/listbox/_theme.scss index 69e75084e6a..6712f5deef1 100644 --- a/packages/core/scss/components/listbox/_theme.scss +++ b/packages/core/scss/components/listbox/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "./variables.scss" as *; @mixin kendo-listbox--theme-base() { @@ -14,7 +13,7 @@ ); } .k-drop-hint { - border-top-color: $kendo-color-primary; + border-top-color: k-color( primary ); } } diff --git a/packages/core/scss/components/loader/_theme.scss b/packages/core/scss/components/loader/_theme.scss index 86fdcef855d..95cf70aa3b4 100644 --- a/packages/core/scss/components/loader/_theme.scss +++ b/packages/core/scss/components/loader/_theme.scss @@ -1,9 +1,9 @@ -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @mixin kendo-loader--theme-base() { - @each $name, $color in $kendo-theme-colors { + @each $name, $color in $kendo-loader-theme-colors { .k-loader-#{$name} { color: $color; } diff --git a/packages/core/scss/components/loader/_variables.scss b/packages/core/scss/components/loader/_variables.scss index 7ad0b494301..9f6c80977ef 100644 --- a/packages/core/scss/components/loader/_variables.scss +++ b/packages/core/scss/components/loader/_variables.scss @@ -49,3 +49,5 @@ $kendo-loading-bg: null !default; $kendo-loading-text: null !default; $kendo-loading-opacity: null !default; $kendo-zindex-loading: null !default; + +$kendo-loader-theme-colors: null !default; diff --git a/packages/core/scss/components/mediaplayer/_theme.scss b/packages/core/scss/components/mediaplayer/_theme.scss index 26f3a914c06..3fdb5fead38 100644 --- a/packages/core/scss/components/mediaplayer/_theme.scss +++ b/packages/core/scss/components/mediaplayer/_theme.scss @@ -19,7 +19,7 @@ .k-mediaplayer-titlebar { color: $kendo-media-player-titlebar-text; background-image: linear-gradient( $kendo-media-player-titlebar-gradient ); - text-shadow: 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-media-player-text, .5 )); + text-shadow: 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 50%, transparent); } } diff --git a/packages/core/scss/components/messagebox/_theme.scss b/packages/core/scss/components/messagebox/_theme.scss index af1c3cf7f6f..74a6bc5b894 100644 --- a/packages/core/scss/components/messagebox/_theme.scss +++ b/packages/core/scss/components/messagebox/_theme.scss @@ -1,26 +1,25 @@ @use "../../functions/index.import.scss" as *; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @use "../../_variables.scss" as *; @mixin kendo-messagebox--theme-base() { - @each $color-name, $color in $kendo-theme-colors { + @each $color-name, $color in $kendo-message-box-theme-colors { .k-messagebox-#{$color-name} { @if $color-name == "inverse" { @include fill( - if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), - if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), - if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level )) + k-color( dark-on-subtle ), + k-color( dark-subtle ), + k-color( dark-hover ) ); } @else { @include fill( - if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )), - if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )), - if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level )) + k-color( #{$color-name}-on-subtle ), + k-color( #{$color-name}-subtle ), + k-color( #{$color-name}-emphasis ) ); } } diff --git a/packages/core/scss/components/messagebox/_variables.scss b/packages/core/scss/components/messagebox/_variables.scss index b1d9d8cf1d4..5394daaf279 100644 --- a/packages/core/scss/components/messagebox/_variables.scss +++ b/packages/core/scss/components/messagebox/_variables.scss @@ -13,3 +13,5 @@ $kendo-message-box-border-level: null !default; $kendo-message-box-link-font-style: null !default; $kendo-message-box-link-text-decoration: null !default; + +$kendo-message-box-theme-colors: null !default; diff --git a/packages/core/scss/components/notification/_variables.scss b/packages/core/scss/components/notification/_variables.scss index 56d74b8bed4..5cad1badaab 100644 --- a/packages/core/scss/components/notification/_variables.scss +++ b/packages/core/scss/components/notification/_variables.scss @@ -21,7 +21,7 @@ $kendo-notification-icon-spacing: null !default; @each $name, $color in $colors { $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + color: k-color( on-#{$name} ), background-color: $color, border: $color, )), $_theme ); diff --git a/packages/core/scss/components/panel/_theme.scss b/packages/core/scss/components/panel/_theme.scss index 3254e6bd3c9..5ad5ce58070 100644 --- a/packages/core/scss/components/panel/_theme.scss +++ b/packages/core/scss/components/panel/_theme.scss @@ -1,5 +1,4 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "./variables.scss" as *; @mixin kendo-panel--theme--base() { @@ -14,9 +13,9 @@ > .k-header { @include fill( - var( --kendo-component-text, #{$kendo-component-text} ), - var( --kendo-component-bg, #{$kendo-component-bg} ), - var( --kendo-component-border, #{$kendo-component-border} ) + var( --kendo-component-text, #{k-color( on-app-surface )} ), + var( --kendo-component-bg, #{k-color( surface-alt )} ), + var( --kendo-component-border, #{k-color( border )} ) ); } } diff --git a/packages/core/scss/components/pivotgrid/_theme.scss b/packages/core/scss/components/pivotgrid/_theme.scss index fb4d980779b..af9eb9f7532 100644 --- a/packages/core/scss/components/pivotgrid/_theme.scss +++ b/packages/core/scss/components/pivotgrid/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @use "../popup/_variables.scss" as *; @@ -134,7 +134,7 @@ } .k-pivotgrid-configurator-content .k-form-field-wrapper { - @include fill( $border: $kendo-component-border ); + @include fill( $border: k-color( border ) ); } @@ -191,7 +191,7 @@ ); .k-empty { - color: $kendo-subtle-text; + color: k-color( subtle ); } } @@ -223,15 +223,15 @@ } .k-i-kpi-status-hold { - color: $kendo-color-warning; + color: k-color( warning ); } .k-i-kpi-status-deny { - color: $kendo-color-error; + color: k-color( error ); } .k-i-kpi-status-open { - color: $kendo-color-success; + color: k-color( success ); } @@ -239,7 +239,7 @@ .k-pivotgrid-configurator-panel.kendo-jquery { .k-column-fields { - border-color: $kendo-component-border; + border-color: k-color( border ); } } diff --git a/packages/core/scss/components/progressbar/_theme.scss b/packages/core/scss/components/progressbar/_theme.scss index ec47faa0961..5ef5ef86ab1 100644 --- a/packages/core/scss/components/progressbar/_theme.scss +++ b/packages/core/scss/components/progressbar/_theme.scss @@ -36,7 +36,7 @@ .k-progressbar-indeterminate { @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border ); - @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) ); + @include striped-gradient( color-mix(in srgb, k-color( base-emphasis ) 55%, transparent) ); background-size: $kendo-progressbar-height $kendo-progressbar-height; animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing; } diff --git a/packages/core/scss/components/radio/_layout.scss b/packages/core/scss/components/radio/_layout.scss index 86f443f2410..2f07a893f24 100644 --- a/packages/core/scss/components/radio/_layout.scss +++ b/packages/core/scss/components/radio/_layout.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../spacing/index.import.scss" as *; +@use "../../_variables.scss" as *; @use "./variables.scss" as *; @mixin kendo-radio--layout-base() { diff --git a/packages/core/scss/components/rating/_theme.scss b/packages/core/scss/components/rating/_theme.scss index ef42525fc0f..05ae7369cdd 100644 --- a/packages/core/scss/components/rating/_theme.scss +++ b/packages/core/scss/components/rating/_theme.scss @@ -1,10 +1,9 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "./variables.scss" as *; @mixin kendo-rating--theme-base() { .k-rating { - color: $kendo-component-text; + color: k-color( on-app-surface ); &:focus, &.k-focus { diff --git a/packages/core/scss/components/scheduler/_theme.scss b/packages/core/scss/components/scheduler/_theme.scss index f0209bcd459..6c56278c09a 100644 --- a/packages/core/scss/components/scheduler/_theme.scss +++ b/packages/core/scss/components/scheduler/_theme.scss @@ -1,7 +1,6 @@ @use "../../color-system/_functions.import.scss" as *; @use "../../mixins/index.import.scss" as *; @use "../../functions/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -35,7 +34,7 @@ } .k-scheduler-header { - background-color: $kendo-base-bg; + background-color: k-color( surface ); } .k-scheduler-header-wrap { @@ -74,7 +73,7 @@ .k-scheduler-layout td.k-selected, .k-scheduler-layout .k-scheduler-cell.k-selected { - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); + background-color: color-mix(in srgb, k-color( primary ) 25%, transparent); } .k-scheduler-layout-flex { @@ -117,7 +116,7 @@ } &.k-event-inverse { - color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text )); + color: if($kendo-enable-focus-contrast, black, k-color( on-app-surface )); } &.k-event-ongoing { @@ -134,7 +133,7 @@ .k-scheduler-marquee {} .k-scheduler-marquee::before, .k-scheduler-marquee::after { - border-color: $kendo-color-primary; + border-color: k-color( primary ); } // Edit dialog @@ -171,10 +170,10 @@ .k-scheduler-content .k-scheduler-row:hover, .k-scheduler-content .k-scheduler-row.k-hover { @include fill( - $kendo-hover-text, - $kendo-hover-bg, - $kendo-hover-border, - $kendo-hover-gradient + k-color( on-app-surface ), + k-color( base-hover ), + k-color( border ), + null ); } @@ -191,7 +190,7 @@ // Selected .k-scheduler-content tr.k-selected { - background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)); + background-color: color-mix(in srgb, k-color( primary ) 25%, transparent); } .k-scheduler-content tr.k-selected .k-scheduler-datecolumn, .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn { diff --git a/packages/core/scss/components/slider/_theme.scss b/packages/core/scss/components/slider/_theme.scss index 0c8fcc40f4f..e44b13c8785 100644 --- a/packages/core/scss/components/slider/_theme.scss +++ b/packages/core/scss/components/slider/_theme.scss @@ -1,4 +1,3 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../mixins/index.import.scss" as *; @use "../../border-radii/index.import.scss" as *; @use "./variables.scss" as *; @@ -8,7 +7,7 @@ // Slider .k-slider { // TODO: extract variables - color: $kendo-component-text; + color: k-color( on-app-surface ); .k-slider-track, .k-slider-selection { diff --git a/packages/core/scss/components/spreadsheet/_theme.scss b/packages/core/scss/components/spreadsheet/_theme.scss index 2e537a13bdd..39a05309d38 100644 --- a/packages/core/scss/components/spreadsheet/_theme.scss +++ b/packages/core/scss/components/spreadsheet/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @use "../button/_variables.scss" as *; @use "../list/_variables.scss" as *; @@ -115,7 +115,7 @@ // Filter button .k-spreadsheet .k-filter-range { - border-color: $kendo-color-primary; + border-color: k-color( primary ); } .k-spreadsheet-filter { @include fill( diff --git a/packages/core/scss/components/stepper/_theme.scss b/packages/core/scss/components/stepper/_theme.scss index e8860adba10..a948c82bd87 100644 --- a/packages/core/scss/components/stepper/_theme.scss +++ b/packages/core/scss/components/stepper/_theme.scss @@ -1,6 +1,5 @@ @use "../../color-system/_functions.import.scss" as *; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -38,7 +37,7 @@ .k-step-link:focus { // Labels only .k-step-label:only-child { - @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-border ), $inset: true ); + @include focus-indicator( $indicator: ( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( border ) ), $inset: true ); } } @@ -47,22 +46,14 @@ &.k-disabled, &:disabled { .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-disabled-text, - $kendo-stepper-indicator-disabled-bg, - $kendo-stepper-indicator-disabled-border - ); + @include fill( + $kendo-stepper-indicator-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-disabled-bg; } } @@ -79,13 +70,13 @@ ); } .k-step-indicator::after { - @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size $kendo-component-bg ); + @include box-shadow( inset 0 0 0 $kendo-stepper-indicator-focus-size k-color( surface-alt ) ); } .k-step-label:only-child { @include fill( - $kendo-component-text, - $kendo-component-bg, - $kendo-component-border + k-color( on-app-surface ), + k-color( surface-alt ), + k-color( border ) ); } @@ -121,23 +112,16 @@ &.k-disabled, &:disabled { .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-done-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-done-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-done-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-done-disabled-text, - $kendo-stepper-indicator-done-disabled-bg, - $kendo-stepper-indicator-done-disabled-border - ); + @include fill( + $kendo-stepper-indicator-done-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-done-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-done-disabled-bg; } + } } } @@ -174,22 +158,14 @@ &.k-disabled, &:disabled { .k-step-indicator { - @if($kendo-enable-color-system) { - @include fill( - $kendo-stepper-indicator-current-disabled-text, - k-color( app-surface ), - $kendo-stepper-indicator-current-disabled-border - ); - - &::before { - background-color: $kendo-stepper-indicator-current-disabled-bg; - } - } @else { - @include fill( - $kendo-stepper-indicator-current-disabled-text, - $kendo-stepper-indicator-current-disabled-bg, - $kendo-stepper-indicator-current-disabled-border - ); + @include fill( + $kendo-stepper-indicator-current-disabled-text, + k-color( app-surface ), + $kendo-stepper-indicator-current-disabled-border + ); + + &::before { + background-color: $kendo-stepper-indicator-current-disabled-bg; } } } diff --git a/packages/core/scss/components/switch/_theme.scss b/packages/core/scss/components/switch/_theme.scss index 734ca4c6a13..d6d9b266bf7 100644 --- a/packages/core/scss/components/switch/_theme.scss +++ b/packages/core/scss/components/switch/_theme.scss @@ -1,4 +1,5 @@ @use "../../mixins/index.import.scss" as *; +@use "../../color-system/_constants.scss" as *; @use "../../_variables.scss" as *; @use "./variables.scss" as *; @@ -62,7 +63,7 @@ $kendo-switch-off-track-focus-gradient ); @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + @include box-shadow( 0 0 0 2px k-color( on-app-surface )); } @else { outline: $kendo-switch-off-track-focus-ring; } @@ -142,7 +143,7 @@ $kendo-switch-on-track-focus-gradient ); @if $kendo-enable-focus-contrast { - @include box-shadow( 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) ); + @include box-shadow( 0 0 0 2px k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )); } @else { outline: $kendo-switch-on-track-focus-ring; } diff --git a/packages/core/scss/components/taskboard/_theme.scss b/packages/core/scss/components/taskboard/_theme.scss index 8008d8acc03..00559ab8aed 100644 --- a/packages/core/scss/components/taskboard/_theme.scss +++ b/packages/core/scss/components/taskboard/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../_variables.scss" as *; @use "./variables.scss" as *; @mixin kendo-task-board--theme-base() { diff --git a/packages/core/scss/components/timeline/_theme.scss b/packages/core/scss/components/timeline/_theme.scss index 18725927794..ab3e3602559 100644 --- a/packages/core/scss/components/timeline/_theme.scss +++ b/packages/core/scss/components/timeline/_theme.scss @@ -1,4 +1,3 @@ -@use "../../color-system/_swatch-legacy.scss" as *; @use "../../mixins/index.import.scss" as *; @use "./variables.scss" as *; @use "../card/_variables.scss" as *; @@ -36,14 +35,14 @@ } &::-webkit-scrollbar-thumb:hover { - background: $kendo-hover-border; + background: k-color( border ); } } } // TODO: remove .k-timeline-date { - color: $kendo-body-text; + color: k-color( on-app-surface ); } .k-timeline-arrow.k-disabled { diff --git a/packages/core/scss/components/timeselector/_theme.scss b/packages/core/scss/components/timeselector/_theme.scss index 4b39b02405b..0faaf7c6655 100644 --- a/packages/core/scss/components/timeselector/_theme.scss +++ b/packages/core/scss/components/timeselector/_theme.scss @@ -1,6 +1,6 @@ @use "sass:math"; @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @mixin kendo-time-selector--theme-base() { @@ -21,11 +21,11 @@ .k-time-now { // TODO: use a variable - color: $kendo-link-text; + color: k-color( primary ); } .k-time-now:hover { // TODO: use a variable - color: $kendo-link-hover-text; + color: k-color( primary-hover ); } } @@ -59,7 +59,7 @@ } .k-item:hover { - color: $kendo-color-primary; + color: k-color( primary ); } } diff --git a/packages/core/scss/components/tooltip/_variables.scss b/packages/core/scss/components/tooltip/_variables.scss index 59af87ddc70..5b902132bb1 100644 --- a/packages/core/scss/components/tooltip/_variables.scss +++ b/packages/core/scss/components/tooltip/_variables.scss @@ -25,7 +25,7 @@ $kendo-tooltip-shadow: null !default; @each $name, $color in $colors { $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + color: k-color( on-#{$name} ), background-color: $color, border: $color, )), $_theme ); diff --git a/packages/core/scss/components/typography/_theme.scss b/packages/core/scss/components/typography/_theme.scss index 45aa036f002..827f656391a 100644 --- a/packages/core/scss/components/typography/_theme.scss +++ b/packages/core/scss/components/typography/_theme.scss @@ -1,13 +1,13 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./_variables.scss" as *; @mixin kendo-typography--theme-base() { .k-body { @include fill( - $kendo-body-text, - $kendo-body-bg + k-color( on-app-surface ), + k-color( app-surface ) ); } diff --git a/packages/core/scss/components/upload/_theme.scss b/packages/core/scss/components/upload/_theme.scss index 29287f4d7f6..9234b632b75 100644 --- a/packages/core/scss/components/upload/_theme.scss +++ b/packages/core/scss/components/upload/_theme.scss @@ -1,5 +1,5 @@ @use "../../mixins/index.import.scss" as *; -@use "../../color-system/_swatch-legacy.scss" as *; +@use "../../color-system/_functions.import.scss" as *; @use "./variables.scss" as *; @mixin kendo-upload--theme-base() { @@ -88,7 +88,7 @@ .k-file-size, .k-file-validation-message, .k-file-summary { - color: $kendo-subtle-text; + color: k-color( subtle ); } .k-multiple-files-wrapper .k-file-summary { @@ -99,7 +99,7 @@ &.k-invalid, &.ng-invalid.ng-touched, &.ng-invalid.ng-dirty { - border-color: $kendo-invalid-border; + border-color: k-color( error ) } } diff --git a/packages/core/scss/components/window/_theme.scss b/packages/core/scss/components/window/_theme.scss index 1b572de0f37..3f27edb9f7b 100644 --- a/packages/core/scss/components/window/_theme.scss +++ b/packages/core/scss/components/window/_theme.scss @@ -35,7 +35,7 @@ // Window theme colors @each $name, $color in $kendo-window-theme-colors { .k-window-#{$name} .k-window-titlebar { - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )); + color: k-color( on-#{$name} ); background-color: $color; } } diff --git a/packages/core/scss/styles/_base.scss b/packages/core/scss/styles/_base.scss index 9432c0c8408..e54d1bfe845 100644 --- a/packages/core/scss/styles/_base.scss +++ b/packages/core/scss/styles/_base.scss @@ -1,3 +1,4 @@ +@use "sass:map"; @use "../mixins/_disabled.scss" as *; @use "../spacing/index.import.scss" as *; @use "../_variables.scss" as *; @@ -9,11 +10,11 @@ .k-widget[disabled], .k-disabled { @include disabled( - $color: var( --kendo-disabled-text, unset), - $bg: var( --kendo-disabled-bg, unset), - $border: var( --kendo-disabled-border, unset), - $opacity: var( --kendo-disabled-opacity, unset), - $filter: var( --kendo-disabled-filter, unset) + $color: map.get( $kendo-disabled-styling, color ), + $bg: map.get( $kendo-disabled-styling, bg ), + $border: map.get( $kendo-disabled-styling, border ), + $opacity: map.get( $kendo-disabled-styling, opacity ), + $filter: map.get( $kendo-disabled-styling, filter ) ); .k-link { @@ -38,7 +39,7 @@ height: 0; border-width: 1px 0 0; border-style: solid; - border-color: var( --kendo-hr-border, unset ); + border-color: inherit; display: block; float: none; clear: both; diff --git a/packages/core/scss/styles/_selection.scss b/packages/core/scss/styles/_selection.scss index a5af10abaf4..715edbea67d 100644 --- a/packages/core/scss/styles/_selection.scss +++ b/packages/core/scss/styles/_selection.scss @@ -1,3 +1,5 @@ +@use "../color-system/_functions.import.scss" as *; + @mixin kendo-core--styles--selection() { // Marquee @@ -16,9 +18,9 @@ } .k-marquee-color { - color: var( --kendo-marquee-text, unset ); - background-color: var( --kendo-marquee-bg, unset ); - border-color: var( --kendo-marquee-border, unset ); + color: k-color( on-primary ); + background-color: k-color( primary ); + border-color: k-color( border ); opacity: .6; } .k-marquee-text { diff --git a/packages/default/docs/customization-appbar.md b/packages/default/docs/customization-appbar.md index af349a48bb7..077553171fa 100644 --- a/packages/default/docs/customization-appbar.md +++ b/packages/default/docs/customization-appbar.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-appbar-light-bg String - $kendo-color-light + k-color( light ) var(--kendo-color-light, #ebebeb) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-appbar-light-text String - if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) + k-color( on-light ) var(--kendo-color-on-light, #000000) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-appbar-dark-bg String - $kendo-color-dark + k-color( dark ) var(--kendo-color-dark, #3d3d3d) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-appbar-dark-text String - if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) + k-color( on-dark ) var(--kendo-color-on-dark, #ffffff) diff --git a/packages/default/docs/customization-avatar.md b/packages/default/docs/customization-avatar.md index d3957df3a71..ce548d487b1 100644 --- a/packages/default/docs/customization-avatar.md +++ b/packages/default/docs/customization-avatar.md @@ -84,7 +84,18 @@ The following table lists the available variables for customization. $kendo-avatar-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) diff --git a/packages/default/docs/customization-bottom-navigation.md b/packages/default/docs/customization-bottom-navigation.md index 1a25e28468c..1e5a23609b9 100644 --- a/packages/default/docs/customization-bottom-navigation.md +++ b/packages/default/docs/customization-bottom-navigation.md @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-bottom-nav-flat-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-bottom-nav-flat-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-bottom-nav-flat-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-breadcrumb.md b/packages/default/docs/customization-breadcrumb.md index 2e6e0732695..fa1dc0d8f20 100644 --- a/packages/default/docs/customization-breadcrumb.md +++ b/packages/default/docs/customization-breadcrumb.md @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-hover-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-link-focus-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -530,7 +530,7 @@ The following table lists the available variables for customization. $kendo-breadcrumb-root-link-hover-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) diff --git a/packages/default/docs/customization-button.md b/packages/default/docs/customization-button.md index 90680336721..488039631e8 100644 --- a/packages/default/docs/customization-button.md +++ b/packages/default/docs/customization-button.md @@ -269,11 +269,20 @@ The following table lists the available variables for customization. $kendo-button-theme-colors Map - map.merge( - $kendo-theme-colors, - ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) + ( + "base": k-color( base ), + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) ) - +
Description
The theme colors map for the Button.
@@ -282,7 +291,7 @@ The following table lists the available variables for customization. $kendo-button-bg String - if($kendo-enable-color-system, k-color( base ), #f5f5f5) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -292,7 +301,7 @@ The following table lists the available variables for customization. $kendo-button-text String - if($kendo-enable-color-system, k-color( on-base ), #424242) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -302,7 +311,7 @@ The following table lists the available variables for customization. $kendo-button-border String - if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -312,7 +321,7 @@ The following table lists the available variables for customization. $kendo-button-gradient Null - if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) + null null @@ -332,7 +341,7 @@ The following table lists the available variables for customization. $kendo-button-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -382,7 +391,7 @@ The following table lists the available variables for customization. $kendo-button-active-bg String - if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) + k-color( base-active ) var(--kendo-color-base-active, #d6d6d6) @@ -432,7 +441,7 @@ The following table lists the available variables for customization. $kendo-button-selected-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -442,7 +451,7 @@ The following table lists the available variables for customization. $kendo-button-selected-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -522,7 +531,7 @@ The following table lists the available variables for customization. $kendo-button-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) diff --git a/packages/default/docs/customization-calendar.md b/packages/default/docs/customization-calendar.md index cf3e8157272..1e1f5fc17ad 100644 --- a/packages/default/docs/customization-calendar.md +++ b/packages/default/docs/customization-calendar.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-calendar-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-calendar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-calendar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-gradient Null - $kendo-component-header-gradient + null null @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-calendar-header-cell-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-calendar-today-color String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -570,7 +570,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-hover-border String - $kendo-hover-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -620,7 +620,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-selected-border String - $kendo-selected-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -650,7 +650,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-selected-hover-bg String - $kendo-selected-hover-bg + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-calendar-cell-selected-hover-text String - $kendo-selected-hover-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -760,7 +760,7 @@ The following table lists the available variables for customization. $kendo-calendar-navigation-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) diff --git a/packages/default/docs/customization-captcha.md b/packages/default/docs/customization-captcha.md index 49289469d1e..cab52223973 100644 --- a/packages/default/docs/customization-captcha.md +++ b/packages/default/docs/customization-captcha.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-captcha-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-captcha-text String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-captcha-border String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) diff --git a/packages/default/docs/customization-card.md b/packages/default/docs/customization-card.md index f74a1d4909f..777334e8663 100644 --- a/packages/default/docs/customization-card.md +++ b/packages/default/docs/customization-card.md @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-card-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-card-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-card-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-card-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-card-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-card-footer-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-card-footer-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-card-subtitle-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-chart-wizard.md b/packages/default/docs/customization-chart-wizard.md index cc4d2939030..670f9e49774 100644 --- a/packages/default/docs/customization-chart-wizard.md +++ b/packages/default/docs/customization-chart-wizard.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-chart-wizard-icon-area-color String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-chart-wizard-icon-area-bg String - if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) + k-color(primary-subtle) var(--kendo-color-primary-subtle, #ffeceb) @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-chart-wizard-icon-area-focus-shadow List - inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) + inset 0 0 0 1px k-color(primary-emphasis) (inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-chart-wizard-chart-type-selected-color String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-charts.md b/packages/default/docs/customization-charts.md index 92ecc8c1f91..d985c5aa854 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 String - if($kendo-enable-color-system, k-color( series-a ), #ff6358) + k-color( series-a ) var(--kendo-color-series-a, #ff6358) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-series-b String - if($kendo-enable-color-system, k-color( series-b ), #ffe162) + k-color( series-b ) var(--kendo-color-series-b, #ffe162) @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-series-c String - if($kendo-enable-color-system, k-color( series-c ), #4cd180) + k-color( series-c ) var(--kendo-color-series-c, #4cd180) @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-series-d String - if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) + k-color( series-d ) var(--kendo-color-series-d, #4b5ffa) @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-series-e String - if($kendo-enable-color-system, k-color( series-e ), #ac58ff) + k-color( series-e ) var(--kendo-color-series-e, #ac58ff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-series-f String - if($kendo-enable-color-system, k-color( series-f ), #ff5892) + k-color( series-f ) var(--kendo-color-series-f, #ff5892) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-chart-major-lines String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) + color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-chart-minor-lines String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) + color-mix(in srgb, k-color( on-app-surface ) 4%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 4%, transparent) diff --git a/packages/default/docs/customization-chat.md b/packages/default/docs/customization-chat.md index 63e4dfcaf2d..fa025de2f5a 100644 --- a/packages/default/docs/customization-chat.md +++ b/packages/default/docs/customization-chat.md @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-chat-timestamp-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-chat-bg String - $kendo-app-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-chat-text String - $kendo-app-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-chat-border String - $kendo-app-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-chat-bubble-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-chat-bubble-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -520,7 +520,7 @@ The following table lists the available variables for customization. $kendo-chat-alt-bubble-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -530,7 +530,7 @@ The following table lists the available variables for customization. $kendo-chat-alt-bubble-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-hover-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -619,9 +619,9 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-hover-text - String - $kendo-color-primary-contrast - var(--kendo-color-on-primary, #ffffff) + List + k-color( primary )-contrast + (var(--kendo-color-primary, #ff6358) -contrast)
Description
The text color of the hovered Chat quick reply.
@@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-chat-quick-reply-hover-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-checkbox.md b/packages/default/docs/customization-checkbox.md index 2cc322fc111..9dfa7cb9e4d 100644 --- a/packages/default/docs/customization-checkbox.md +++ b/packages/default/docs/customization-checkbox.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-checkbox-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-checkbox-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-checkbox-checked-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) + 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-checkbox-invalid-text String - $kendo-invalid-text + k-color( error ) var(--kendo-color-error, #f31700) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-checkbox-invalid-border String - $kendo-invalid-border + k-color( error ) var(--kendo-color-error, #f31700) diff --git a/packages/default/docs/customization-chip.md b/packages/default/docs/customization-chip.md index 54ad195b88d..f2c08173548 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 String - if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -261,10 +261,10 @@ The following table lists the available variables for customization. Map ( "base": $kendo-chip-base-bg, - "error": map.get($kendo-theme-colors, "error"), - "info": map.get($kendo-theme-colors, "info"), - "warning": map.get($kendo-theme-colors, "warning"), - "success": map.get($kendo-theme-colors, "success") + "error": k-color( error ), + "info": k-color( info ), + "warning": k-color( warning ), + "success": k-color( success ) ) @@ -305,7 +305,7 @@ The following table lists the available variables for customization. $kendo-chip-solid-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -345,7 +345,7 @@ The following table lists the available variables for customization. $kendo-chip-solid-hover-bg String - if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) + k-color( base-subtle-hover ) var(--kendo-color-base-subtle-hover, #e0e0e0) @@ -385,7 +385,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -395,7 +395,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-text String - if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) + k-color( base-on-surface ) var(--kendo-color-base-on-surface, #3d3d3d) @@ -415,7 +415,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -435,7 +435,7 @@ The following table lists the available variables for customization. $kendo-chip-outline-hover-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) + k-color( base ) var(--kendo-color-base, #f5f5f5) diff --git a/packages/default/docs/customization-color-editor.md b/packages/default/docs/customization-color-editor.md index 2dd309c3b62..e5ce7344d4b 100644 --- a/packages/default/docs/customization-color-editor.md +++ b/packages/default/docs/customization-color-editor.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-color-editor-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-color-editor-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-color-editor-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-color-gradient.md b/packages/default/docs/customization-color-gradient.md index 05f4184b4fb..49584c8cf6a 100644 --- a/packages/default/docs/customization-color-gradient.md +++ b/packages/default/docs/customization-color-gradient.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -640,7 +640,7 @@ The following table lists the available variables for customization. $kendo-color-gradient-input-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-common.md b/packages/default/docs/customization-common.md index 23a86f74845..4ddd3a1f5f5 100644 --- a/packages/default/docs/customization-common.md +++ b/packages/default/docs/customization-common.md @@ -37,56 +37,6 @@ The following table lists the available variables for customization.
Description
Box shadow of focused items.
- - $kendo-disabled-bg - Null - null - null - - -
Description
The background color of disabled items.
- - - - $kendo-disabled-text - Null - null - null - - -
Description
The text color of disabled items.
- - - - $kendo-disabled-border - Null - null - null - - -
Description
The border color of disabled items.
- - - - $kendo-disabled-opacity - Number - .6 - 0.6 - - -
Description
The opacity of disabled items.
- - - - $kendo-disabled-filter - String - grayscale(.1) - grayscale(0.1) - - -
Description
The filter of disabled items.
- - diff --git a/packages/default/docs/customization-dialog.md b/packages/default/docs/customization-dialog.md index bb0477cc305..7456f7a77bd 100644 --- a/packages/default/docs/customization-dialog.md +++ b/packages/default/docs/customization-dialog.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-dialog-titlebar-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-dialog-titlebar-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -101,9 +101,9 @@ The following table lists the available variables for customization. $kendo-dialog-theme-colors Map ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) diff --git a/packages/default/docs/customization-dock-manager.md b/packages/default/docs/customization-dock-manager.md index ecfeec3abb8..93892c595d2 100644 --- a/packages/default/docs/customization-dock-manager.md +++ b/packages/default/docs/customization-dock-manager.md @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-pane-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-dock-indicator-hover-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) + color-mix(in srgb, k-color( primary ) 16%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-dock-manager-dock-preview-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-drawer.md b/packages/default/docs/customization-drawer.md index 3e1dedb872e..c21c7a13703 100644 --- a/packages/default/docs/customization-drawer.md +++ b/packages/default/docs/customization-drawer.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-drawer-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-drawer-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-drawer-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-drawer-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-drawer-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-drawer-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-drawer-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-drawer-selected-hover-bg String - $kendo-selected-hover-bg + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-drawer-selected-hover-text String - $kendo-selected-hover-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) diff --git a/packages/default/docs/customization-dropzone.md b/packages/default/docs/customization-dropzone.md index d896aa9083f..0b1d8814baf 100644 --- a/packages/default/docs/customization-dropzone.md +++ b/packages/default/docs/customization-dropzone.md @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-dropzone-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-dropzone-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-dropzone-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-dropzone-icon-hover-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-dropzone-note-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-editor.md b/packages/default/docs/customization-editor.md index 911c67a805d..7261144c44d 100644 --- a/packages/default/docs/customization-editor.md +++ b/packages/default/docs/customization-editor.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-editor-selected-text String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-editor-selected-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-editor-highlighted-bg String - if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) + k-color( primary-subtle ) var(--kendo-color-primary-subtle, #ffeceb) diff --git a/packages/default/docs/customization-expander.md b/packages/default/docs/customization-expander.md index 647a07bf831..f938d64e8a2 100644 --- a/packages/default/docs/customization-expander.md +++ b/packages/default/docs/customization-expander.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-expander-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-expander-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-expander-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-expander-title-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-expander-header-sub-title-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-file-manager.md b/packages/default/docs/customization-file-manager.md index a5ecd47d7be..d64d186397d 100644 --- a/packages/default/docs/customization-file-manager.md +++ b/packages/default/docs/customization-file-manager.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-file-manager-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-file-manager-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-file-manager-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-file-manager-listview-item-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-file-manager-preview-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-filter.md b/packages/default/docs/customization-filter.md index 8ba780972ce..39aca9a3104 100644 --- a/packages/default/docs/customization-filter.md +++ b/packages/default/docs/customization-filter.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-filter-preview-field-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-filter-preview-operator-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-floating-action-button.md b/packages/default/docs/customization-floating-action-button.md index 4b799aceddd..11ced2748b8 100644 --- a/packages/default/docs/customization-floating-action-button.md +++ b/packages/default/docs/customization-floating-action-button.md @@ -310,7 +310,18 @@ The following table lists the available variables for customization. $kendo-fab-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) @@ -393,7 +404,7 @@ The following table lists the available variables for customization. $kendo-fab-item-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -403,7 +414,7 @@ The following table lists the available variables for customization. $kendo-fab-item-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -413,7 +424,7 @@ The following table lists the available variables for customization. $kendo-fab-item-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-form.md b/packages/default/docs/customization-form.md index a488badf624..b1154dd0f72 100644 --- a/packages/default/docs/customization-form.md +++ b/packages/default/docs/customization-form.md @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-form-legend-border-color String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-forms-invalid-color String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -510,7 +510,7 @@ The following table lists the available variables for customization. $kendo-fieldset-legend-text String - if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) diff --git a/packages/default/docs/customization-gantt.md b/packages/default/docs/customization-gantt.md index 2b145db0c6f..49403fc8fae 100644 --- a/packages/default/docs/customization-gantt.md +++ b/packages/default/docs/customization-gantt.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-gantt-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-gantt-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-gantt-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-gantt-nonwork-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) + color-mix(in srgb, k-color( on-base ) 3%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 3%, transparent) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-gantt-line-fill String - if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-gantt-line-selected-fill String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-gantt-milestone-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-gantt-milestone-selected-border String - $kendo-selected-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-bg String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-progress-bg String - if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-selected-bg String - if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) + k-color( primary-subtle-active ) var(--kendo-color-primary-subtle-active, #ffc8c4) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-gantt-summary-progress-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-bg String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-selected-bg String - if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) + k-color( primary-subtle-active ) var(--kendo-color-primary-subtle-active, #ffc8c4) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-gantt-task-progress-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-gantt-planned-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -650,7 +650,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-bg String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-gantt-delayed-bg-lighter String - if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) + k-color( error-emphasis ) var(--kendo-color-error-emphasis, #f76f60) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-gantt-advanced-bg String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -680,7 +680,7 @@ The following table lists the available variables for customization. $kendo-gantt-advanced-bg-lighter String - if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) + k-color( success-emphasis ) var(--kendo-color-success-emphasis, #81d15f) @@ -740,7 +740,7 @@ The following table lists the available variables for customization. $kendo-gantt-validation-tooltip-valid-border String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -750,7 +750,7 @@ The following table lists the available variables for customization. $kendo-gantt-validation-tooltip-invalid-border String - $kendo-color-error + k-color( error )!default var(--kendo-color-error, #f31700) diff --git a/packages/default/docs/customization-grid.md b/packages/default/docs/customization-grid.md index 1eca9662118..2fef5607d5d 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 String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) + color-mix(in srgb, k-color( on-base ) 20%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-grid-row-resizer-active-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-input.md b/packages/default/docs/customization-input.md index 1f4ddb42a0b..1f3252aeadd 100644 --- a/packages/default/docs/customization-input.md +++ b/packages/default/docs/customization-input.md @@ -275,7 +275,7 @@ The following table lists the available variables for customization. $kendo-input-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -285,7 +285,7 @@ The following table lists the available variables for customization. $kendo-input-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -295,7 +295,7 @@ The following table lists the available variables for customization. $kendo-input-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -335,7 +335,7 @@ The following table lists the available variables for customization. $kendo-input-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -385,7 +385,7 @@ The following table lists the available variables for customization. $kendo-input-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -485,7 +485,7 @@ The following table lists the available variables for customization. $kendo-input-outline-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -515,7 +515,7 @@ The following table lists the available variables for customization. $kendo-input-outline-hover-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) + color-mix(in srgb, k-color( on-base ) 80%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent) @@ -665,7 +665,7 @@ The following table lists the available variables for customization. $kendo-input-placeholder-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -805,7 +805,7 @@ The following table lists the available variables for customization. $kendo-input-prefix-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -815,7 +815,7 @@ The following table lists the available variables for customization. $kendo-input-suffix-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -825,7 +825,7 @@ The following table lists the available variables for customization. $kendo-input-invalid-border String - $kendo-invalid-border + k-color( error ) var(--kendo-color-error, #f31700) @@ -835,7 +835,7 @@ The following table lists the available variables for customization. $kendo-input-invalid-shadow Null - $kendo-invalid-shadow + null null diff --git a/packages/default/docs/customization-list.md b/packages/default/docs/customization-list.md index f17875140b2..6c0dc489474 100644 --- a/packages/default/docs/customization-list.md +++ b/packages/default/docs/customization-list.md @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-list-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -299,7 +299,7 @@ The following table lists the available variables for customization. $kendo-list-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -309,7 +309,7 @@ The following table lists the available variables for customization. $kendo-list-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -379,7 +379,7 @@ The following table lists the available variables for customization. $kendo-list-item-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -389,7 +389,7 @@ The following table lists the available variables for customization. $kendo-list-item-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -429,7 +429,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -439,7 +439,7 @@ The following table lists the available variables for customization. $kendo-list-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -489,7 +489,7 @@ The following table lists the available variables for customization. $kendo-list-option-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-listbox.md b/packages/default/docs/customization-listbox.md index d4444584762..d388c393d82 100644 --- a/packages/default/docs/customization-listbox.md +++ b/packages/default/docs/customization-listbox.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-listbox-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-listbox-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-listbox-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-listview.md b/packages/default/docs/customization-listview.md index eabbb0e745c..3b1c1194de0 100644 --- a/packages/default/docs/customization-listview.md +++ b/packages/default/docs/customization-listview.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-listview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-listview-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-listview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-listview-item-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) diff --git a/packages/default/docs/customization-loader.md b/packages/default/docs/customization-loader.md index 2d060edfcbc..10a64747e74 100644 --- a/packages/default/docs/customization-loader.md +++ b/packages/default/docs/customization-loader.md @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-loader-container-panel-border-color String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-loading.md b/packages/default/docs/customization-loading.md index dd17618edae..857db9ed3d5 100644 --- a/packages/default/docs/customization-loading.md +++ b/packages/default/docs/customization-loading.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-loading-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) diff --git a/packages/default/docs/customization-map.md b/packages/default/docs/customization-map.md index 115ab49d9f6..34c91321f32 100644 --- a/packages/default/docs/customization-map.md +++ b/packages/default/docs/customization-map.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-map-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-map-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-map-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-map-attribution-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) + color-mix(in srgb, k-color( app-surface ) 80%, transparent) color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-map-marker-fill String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-mediaplayer.md b/packages/default/docs/customization-mediaplayer.md index d26fee00590..de13aa23057 100644 --- a/packages/default/docs/customization-mediaplayer.md +++ b/packages/default/docs/customization-mediaplayer.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-media-player-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-media-player-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-media-player-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -149,9 +149,9 @@ The following table lists the available variables for customization. $kendo-media-player-titlebar-gradient - List - if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) - (color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)) + String + color-mix(in srgb, k-color( on-app-surface ) 70%, transparent) + color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent)
Description
The gradient of the MediaPlayer title.
diff --git a/packages/default/docs/customization-menu.md b/packages/default/docs/customization-menu.md index 5bed8933fed..cee223ac623 100644 --- a/packages/default/docs/customization-menu.md +++ b/packages/default/docs/customization-menu.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-menu-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-menu-item-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-menu-item-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-menu-item-active-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-menu-item-selected-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-menu-scroll-button-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-menu-scroll-button-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-menu-separator-border String - if($kendo-enable-color-system, k-color(border), $kendo-component-border) + k-color(border) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-no-data.md b/packages/default/docs/customization-no-data.md index f65ac57cfef..623d759092c 100644 --- a/packages/default/docs/customization-no-data.md +++ b/packages/default/docs/customization-no-data.md @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-no-data-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-notification.md b/packages/default/docs/customization-notification.md index de035770c34..4f3f3fb4d0d 100644 --- a/packages/default/docs/customization-notification.md +++ b/packages/default/docs/customization-notification.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-notification-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-notification-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-notification-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -160,7 +160,18 @@ The following table lists the available variables for customization. $kendo-notification-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) diff --git a/packages/default/docs/customization-orgchart.md b/packages/default/docs/customization-orgchart.md index adcda452a86..24ab243d275 100644 --- a/packages/default/docs/customization-orgchart.md +++ b/packages/default/docs/customization-orgchart.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-orgchart-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-orgchart-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-orgchart-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-orgchart-node-group-subtitle-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -450,7 +450,7 @@ The following table lists the available variables for customization. $kendo-orgchart-line-fill String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-pager.md b/packages/default/docs/customization-pager.md index 8d9a67fb95a..d77dc028113 100644 --- a/packages/default/docs/customization-pager.md +++ b/packages/default/docs/customization-pager.md @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-pager-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-pager-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-pager-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-panel.md b/packages/default/docs/customization-panel.md index ab908b31320..81b4057eddb 100644 --- a/packages/default/docs/customization-panel.md +++ b/packages/default/docs/customization-panel.md @@ -100,8 +100,8 @@ The following table lists the available variables for customization. $kendo-panel-text String - var(--kendo-component-text, #{$kendo-component-text}) - var(--kendo-component-text, var(--kendo-color-on-app-surface, #3d3d3d)) + k-color( on-app-surface ) + var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Panel.
@@ -110,8 +110,8 @@ The following table lists the available variables for customization. $kendo-panel-bg String - var(--kendo-component-bg, #{$kendo-component-bg}) - var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff)) + k-color( surface-alt ) + var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Panel.
@@ -120,8 +120,8 @@ The following table lists the available variables for customization. $kendo-panel-border String - var(--kendo-component-border, #{$kendo-component-border}) - var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.08))) + k-color( border ) + var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The color of the border around the Panel.
diff --git a/packages/default/docs/customization-panelbar.md b/packages/default/docs/customization-panelbar.md index 5c6198831d5..8f9ca033f42 100644 --- a/packages/default/docs/customization-panelbar.md +++ b/packages/default/docs/customization-panelbar.md @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-panelbar-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-panelbar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-panelbar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-panelbar-header-selected-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -530,7 +530,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -700,7 +700,7 @@ The following table lists the available variables for customization. $kendo-panelbar-item-selected-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) diff --git a/packages/default/docs/customization-pdf-viewer.md b/packages/default/docs/customization-pdf-viewer.md index bf4b4873250..a0c58df0891 100644 --- a/packages/default/docs/customization-pdf-viewer.md +++ b/packages/default/docs/customization-pdf-viewer.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-canvas-bg String - $kendo-app-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-page-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-page-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-search-panel-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-search-panel-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-search-panel-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-search-highlight-bg String - $kendo-body-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-highlight-annotation-border String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-highlight-annotation-hover-border String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-pdf-viewer-free-text-annotation-border String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-picker.md b/packages/default/docs/customization-picker.md index 5416737eda9..681411d46ba 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 String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-picker-outline-hover-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -390,7 +390,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) + color-mix(in srgb, k-color( on-base ) 4%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-picker-flat-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) diff --git a/packages/default/docs/customization-pivotgrid.md b/packages/default/docs/customization-pivotgrid.md index 256494f6048..a02896e8671 100644 --- a/packages/default/docs/customization-pivotgrid.md +++ b/packages/default/docs/customization-pivotgrid.md @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-alt-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-headers-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-headers-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-headers-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-total-bg String - if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-total-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-total-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-configurator-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-configurator-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-configurator-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -500,7 +500,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-configurator-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-calculated-field-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-calculated-field-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -680,7 +680,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-calculated-field-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -700,7 +700,7 @@ The following table lists the available variables for customization. $kendo-pivotgrid-calculated-field-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) diff --git a/packages/default/docs/customization-popover.md b/packages/default/docs/customization-popover.md index fdcbd105eaf..4c6f861899e 100644 --- a/packages/default/docs/customization-popover.md +++ b/packages/default/docs/customization-popover.md @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-popover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-popover-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-popover-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-popup.md b/packages/default/docs/customization-popup.md index bf59cd41da8..2a526022d66 100644 --- a/packages/default/docs/customization-popup.md +++ b/packages/default/docs/customization-popup.md @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-popup-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-popup-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-popup-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-progressbar.md b/packages/default/docs/customization-progressbar.md index a2ccc2c2994..f02052b03ac 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 String - if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-progressbar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-progressbar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-progressbar-value-border String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-progressbar-chunk-border String - $kendo-body-bg + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-circular-progressbar-arc-stroke String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-prompt.md b/packages/default/docs/customization-prompt.md index afa467e992d..e305aa6c8c6 100644 --- a/packages/default/docs/customization-prompt.md +++ b/packages/default/docs/customization-prompt.md @@ -30,7 +30,7 @@ The following table lists the available variables for customization. $kendo-prompt-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-prompt-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -50,7 +50,7 @@ The following table lists the available variables for customization. $kendo-prompt-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -60,7 +60,7 @@ The following table lists the available variables for customization. $kendo-prompt-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-prompt-header-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-prompt-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-prompt-content-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-prompt-content-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-prompt-content-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-prompt-suggestion-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-prompt-suggestion-bg String - $kendo-body-bg + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-prompt-suggestion-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-rating.md b/packages/default/docs/customization-rating.md index c2396fbff0c..fd930821d3b 100644 --- a/packages/default/docs/customization-rating.md +++ b/packages/default/docs/customization-rating.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-rating-icon-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-rating-icon-selected-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-rating-icon-hover-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-rating-icon-focus-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-scheduler.md b/packages/default/docs/customization-scheduler.md index b5cc3587aa3..b0ec222495a 100644 --- a/packages/default/docs/customization-scheduler.md +++ b/packages/default/docs/customization-scheduler.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-scheduler-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-scheduler-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-scheduler-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-bg String - if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-selected-bg String - if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-scheduler-event-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-scheduler-nonwork-bg String - if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-scheduler-othermonth-bg String - if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -550,7 +550,7 @@ The following table lists the available variables for customization. $kendo-scheduler-yearview-indicator-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -560,7 +560,7 @@ The following table lists the available variables for customization. $kendo-scheduler-yearview-indicator-selected-bg String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-scheduler-tooltip-bg String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-scheduler-tooltip-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) diff --git a/packages/default/docs/customization-scrollview.md b/packages/default/docs/customization-scrollview.md index bb4102a9546..4c65f1e56e2 100644 --- a/packages/default/docs/customization-scrollview.md +++ b/packages/default/docs/customization-scrollview.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-scrollview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-scrollview-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-scrollview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-scrollview-pagebutton-primary-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-slider.md b/packages/default/docs/customization-slider.md index e8b38bc01c5..a5cbeb36424 100644 --- a/packages/default/docs/customization-slider.md +++ b/packages/default/docs/customization-slider.md @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -190,7 +190,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-hover-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-pressed-bg String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-pressed-border String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-slider-draghandle-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) + 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-slider-track-bg String - if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) + k-color( base-emphasis ) var(--kendo-color-base-emphasis, #c2c2c2) @@ -360,7 +360,7 @@ The following table lists the available variables for customization. $kendo-slider-selection-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-splitter.md b/packages/default/docs/customization-splitter.md index f3a6231859f..e893d843309 100644 --- a/packages/default/docs/customization-splitter.md +++ b/packages/default/docs/customization-splitter.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-splitter-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-splitter-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-splitter-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-splitbar-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-splitbar-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-splitbar-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-splitbar-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-splitbar-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) diff --git a/packages/default/docs/customization-spreadsheet.md b/packages/default/docs/customization-spreadsheet.md index aed76bde69e..e25fea9dc2d 100644 --- a/packages/default/docs/customization-spreadsheet.md +++ b/packages/default/docs/customization-spreadsheet.md @@ -70,7 +70,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -120,7 +120,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-header-gradient Null - $kendo-component-header-gradient + null null @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selection-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -330,7 +330,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selection-border String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-selection-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-single-selection-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-partial-selection-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-active-cell-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-auto-fill-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-auto-fill-border String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-auto-fill-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -540,7 +540,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-resize-handle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -550,7 +550,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-cell-comment-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -560,7 +560,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-cell-dirty-border String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-insert-image-dialog-preview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -700,7 +700,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-insert-image-dialog-overlay-hover-text String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -750,7 +750,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-handle-outline-color String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -760,7 +760,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-handle-border-color String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -770,7 +770,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-handle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -810,7 +810,7 @@ The following table lists the available variables for customization. $kendo-spreadsheet-drawing-anchor-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) diff --git a/packages/default/docs/customization-stepper.md b/packages/default/docs/customization-stepper.md index e70c5e62da4..6117ff13305 100644 --- a/packages/default/docs/customization-stepper.md +++ b/packages/default/docs/customization-stepper.md @@ -180,7 +180,7 @@ The following table lists the available variables for customization. $kendo-stepper-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) + color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent) @@ -370,7 +370,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -400,7 +400,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-disabled-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), color.mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) + color-mix(in srgb, k-color( primary ) 60%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent) @@ -440,7 +440,7 @@ The following table lists the available variables for customization. $kendo-stepper-indicator-done-disabled-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -560,7 +560,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-success-text String - $kendo-color-success + k-color( success )!default var(--kendo-color-success, #37b400) @@ -570,7 +570,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-error-text String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -580,7 +580,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-hover-text String - if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-stepper-label-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) + color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-stepper-optional-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) diff --git a/packages/default/docs/customization-switch.md b/packages/default/docs/customization-switch.md index 93c6d230aac..49558137207 100644 --- a/packages/default/docs/customization-switch.md +++ b/packages/default/docs/customization-switch.md @@ -94,7 +94,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -104,7 +104,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -114,7 +114,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-border String - if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -214,7 +214,7 @@ The following table lists the available variables for customization. $kendo-switch-off-track-focus-ring List - 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) + 2px solid color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (2px solid color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -264,7 +264,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -274,7 +274,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -284,7 +284,7 @@ The following table lists the available variables for customization. $kendo-switch-off-thumb-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -344,7 +344,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -354,7 +354,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -464,7 +464,7 @@ The following table lists the available variables for customization. $kendo-switch-on-track-focus-ring List - 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) + 2px solid color-mix(in srgb, k-color( primary ) 25%, transparent) (2px solid color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)) @@ -514,7 +514,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -524,7 +524,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -534,7 +534,7 @@ The following table lists the available variables for customization. $kendo-switch-on-thumb-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-table.md b/packages/default/docs/customization-table.md index 487cf32d3ac..b35cae74f98 100644 --- a/packages/default/docs/customization-table.md +++ b/packages/default/docs/customization-table.md @@ -129,7 +129,7 @@ The following table lists the available variables for customization. $kendo-table-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -139,7 +139,7 @@ The following table lists the available variables for customization. $kendo-table-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -149,7 +149,7 @@ The following table lists the available variables for customization. $kendo-table-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -159,7 +159,7 @@ The following table lists the available variables for customization. $kendo-table-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -169,7 +169,7 @@ The following table lists the available variables for customization. $kendo-table-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -179,7 +179,7 @@ The following table lists the available variables for customization. $kendo-table-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -189,7 +189,7 @@ The following table lists the available variables for customization. $kendo-table-header-gradient Null - $kendo-component-header-gradient + null null @@ -259,7 +259,7 @@ The following table lists the available variables for customization. $kendo-table-alt-row-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) + color-mix(in srgb, k-color( on-app-surface ) 5%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) @@ -289,7 +289,7 @@ The following table lists the available variables for customization. $kendo-table-hover-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) + color-mix(in srgb, k-color( on-app-surface ) 11%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) @@ -359,7 +359,7 @@ The following table lists the available variables for customization. $kendo-table-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) diff --git a/packages/default/docs/customization-tabstrip.md b/packages/default/docs/customization-tabstrip.md index e5ae2a46829..f9384ba6552 100644 --- a/packages/default/docs/customization-tabstrip.md +++ b/packages/default/docs/customization-tabstrip.md @@ -200,7 +200,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -210,7 +210,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-selected-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -420,7 +420,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-selected-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -430,7 +430,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-item-selected-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -590,7 +590,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-content-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -600,7 +600,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-content-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -610,7 +610,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-content-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -620,7 +620,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-content-focus-border String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -630,7 +630,7 @@ The following table lists the available variables for customization. $kendo-tabstrip-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) diff --git a/packages/default/docs/customization-taskboard.md b/packages/default/docs/customization-taskboard.md index 6720048c06a..0fb26e81c4e 100644 --- a/packages/default/docs/customization-taskboard.md +++ b/packages/default/docs/customization-taskboard.md @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-taskboard-column-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -320,7 +320,7 @@ The following table lists the available variables for customization. $kendo-taskboard-column-focus-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -380,7 +380,7 @@ The following table lists the available variables for customization. $kendo-taskboard-column-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -460,7 +460,7 @@ The following table lists the available variables for customization. $kendo-taskboard-pane-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -470,7 +470,7 @@ The following table lists the available variables for customization. $kendo-taskboard-pane-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-taskboard-pane-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -520,7 +520,7 @@ The following table lists the available variables for customization. $kendo-taskboard-pane-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -660,7 +660,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -670,7 +670,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-focus-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -690,7 +690,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-selected-border String - if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) + k-color( primary-emphasis ) var(--kendo-color-primary-emphasis, #ff9d97) @@ -710,7 +710,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-header-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -720,7 +720,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-header-hover-text String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -730,7 +730,7 @@ The following table lists the available variables for customization. $kendo-taskboard-card-header-focus-text String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -770,7 +770,7 @@ The following table lists the available variables for customization. $kendo-taskboard-drag-placeholder-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-tile-layout.md b/packages/default/docs/customization-tile-layout.md index ebf4a9016b7..535dd950713 100644 --- a/packages/default/docs/customization-tile-layout.md +++ b/packages/default/docs/customization-tile-layout.md @@ -40,7 +40,7 @@ The following table lists the available variables for customization. $kendo-tile-layout-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -110,7 +110,7 @@ The following table lists the available variables for customization. $kendo-tile-layout-hint-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-timeline.md b/packages/default/docs/customization-timeline.md index 32fa7078e89..bfd12801eb2 100644 --- a/packages/default/docs/customization-timeline.md +++ b/packages/default/docs/customization-timeline.md @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-timeline-track-arrow-disabled-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) + color-mix(in srgb, k-color( base-subtle ) 60%, transparent) color-mix(in srgb, var(--kendo-color-base-subtle, #ebebeb) 60%, transparent) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-timeline-track-arrow-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) + color-mix(in srgb, k-color( on-base ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 60%, transparent) @@ -150,7 +150,7 @@ The following table lists the available variables for customization. $kendo-timeline-track-arrow-disabled-border String - if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -340,7 +340,7 @@ The following table lists the available variables for customization. $kendo-timeline-flag-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-timeline-flag-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -480,7 +480,7 @@ The following table lists the available variables for customization. $kendo-timeline-circle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) diff --git a/packages/default/docs/customization-toolbar.md b/packages/default/docs/customization-toolbar.md index 93e0a64c354..2f8b49496c7 100644 --- a/packages/default/docs/customization-toolbar.md +++ b/packages/default/docs/customization-toolbar.md @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-toolbar-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-toolbar-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -260,7 +260,7 @@ The following table lists the available variables for customization. $kendo-toolbar-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-toolbar-scroll-overlay List - $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + $kendo-toolbar-bg, color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-toolbar-outline-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -350,7 +350,7 @@ The following table lists the available variables for customization. $kendo-toolbar-outline-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -410,7 +410,7 @@ The following table lists the available variables for customization. $kendo-toolbar-flat-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) diff --git a/packages/default/docs/customization-tooltip.md b/packages/default/docs/customization-tooltip.md index 6b8d589b2ea..4f6f6ff02d6 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 String - if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-tooltip-text String - if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -170,7 +170,18 @@ The following table lists the available variables for customization. $kendo-tooltip-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) diff --git a/packages/default/docs/customization-treeview.md b/packages/default/docs/customization-treeview.md index 72a0df2be25..7e035e2a61d 100644 --- a/packages/default/docs/customization-treeview.md +++ b/packages/default/docs/customization-treeview.md @@ -335,7 +335,7 @@ The following table lists the available variables for customization. $kendo-treeview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -355,7 +355,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -365,7 +365,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -395,7 +395,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -405,7 +405,7 @@ The following table lists the available variables for customization. $kendo-treeview-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -455,7 +455,7 @@ The following table lists the available variables for customization. $kendo-treeview-loadmore-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -485,7 +485,7 @@ The following table lists the available variables for customization. $kendo-treeview-loadmore-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -515,7 +515,7 @@ The following table lists the available variables for customization. $kendo-treeview-loadmore-focus-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) diff --git a/packages/default/docs/customization-typography.md b/packages/default/docs/customization-typography.md index e0c9e677d12..20f3cdf7379 100644 --- a/packages/default/docs/customization-typography.md +++ b/packages/default/docs/customization-typography.md @@ -609,7 +609,7 @@ The following table lists the available variables for customization. $kendo-code-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -619,7 +619,7 @@ The following table lists the available variables for customization. $kendo-code-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -629,7 +629,7 @@ The following table lists the available variables for customization. $kendo-code-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) diff --git a/packages/default/docs/customization-upload.md b/packages/default/docs/customization-upload.md index d5830138203..3b58459175d 100644 --- a/packages/default/docs/customization-upload.md +++ b/packages/default/docs/customization-upload.md @@ -80,7 +80,7 @@ The following table lists the available variables for customization. $kendo-upload-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -90,7 +90,7 @@ The following table lists the available variables for customization. $kendo-upload-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -100,7 +100,7 @@ The following table lists the available variables for customization. $kendo-upload-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -130,7 +130,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -140,7 +140,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -160,7 +160,7 @@ The following table lists the available variables for customization. $kendo-upload-dropzone-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -170,7 +170,7 @@ The following table lists the available variables for customization. $kendo-upload-status-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -250,7 +250,7 @@ The following table lists the available variables for customization. $kendo-upload-icon-color String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-upload-progress-bg String - $kendo-color-info + k-color( info ) var(--kendo-color-info, #0058e9) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-upload-success-text String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -290,7 +290,7 @@ The following table lists the available variables for customization. $kendo-upload-success-bg String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -300,7 +300,7 @@ The following table lists the available variables for customization. $kendo-upload-error-text String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -310,7 +310,7 @@ The following table lists the available variables for customization. $kendo-upload-error-bg String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) diff --git a/packages/default/docs/customization-window.md b/packages/default/docs/customization-window.md index 34341f7e2ed..ab1639017eb 100644 --- a/packages/default/docs/customization-window.md +++ b/packages/default/docs/customization-window.md @@ -220,7 +220,7 @@ The following table lists the available variables for customization. $kendo-window-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -230,7 +230,7 @@ The following table lists the available variables for customization. $kendo-window-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -240,7 +240,7 @@ The following table lists the available variables for customization. $kendo-window-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -270,7 +270,7 @@ The following table lists the available variables for customization. $kendo-window-titlebar-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -280,7 +280,7 @@ The following table lists the available variables for customization. $kendo-window-titlebar-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -325,9 +325,9 @@ The following table lists the available variables for customization. $kendo-window-theme-colors Map ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index db2c0dd5963..5f968fde8f5 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -41,56 +41,6 @@ The following table lists the available variables for customizing the Default th
Description
Box shadow of focused items.
- - $kendo-disabled-bg - Null - null - null - - -
Description
The background color of disabled items.
- - - - $kendo-disabled-text - Null - null - null - - -
Description
The text color of disabled items.
- - - - $kendo-disabled-border - Null - null - null - - -
Description
The border color of disabled items.
- - - - $kendo-disabled-opacity - Number - .6 - 0.6 - - -
Description
The opacity of disabled items.
- - - - $kendo-disabled-filter - String - grayscale(.1) - grayscale(0.1) - - -
Description
The filter of disabled items.
- - @@ -254,7 +204,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-light-bg String - $kendo-color-light + k-color( light ) var(--kendo-color-light, #ebebeb) @@ -264,7 +214,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-light-text String - if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) + k-color( on-light ) var(--kendo-color-on-light, #000000) @@ -274,7 +224,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-dark-bg String - $kendo-color-dark + k-color( dark ) var(--kendo-color-dark, #3d3d3d) @@ -284,7 +234,7 @@ The following table lists the available variables for customizing the Default th $kendo-appbar-dark-text String - if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) + k-color( on-dark ) var(--kendo-color-on-dark, #ffffff) @@ -388,7 +338,18 @@ The following table lists the available variables for customizing the Default th $kendo-avatar-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) @@ -970,7 +931,7 @@ The following table lists the available variables for customizing the Default th $kendo-bottom-nav-flat-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -980,7 +941,7 @@ The following table lists the available variables for customizing the Default th $kendo-bottom-nav-flat-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -990,7 +951,7 @@ The following table lists the available variables for customizing the Default th $kendo-bottom-nav-flat-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -1160,7 +1121,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -1170,7 +1131,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -1180,7 +1141,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -1400,7 +1361,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-link-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -1420,7 +1381,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-link-hover-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -1430,7 +1391,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-link-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -1460,7 +1421,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-link-focus-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -1520,7 +1481,7 @@ The following table lists the available variables for customizing the Default th $kendo-breadcrumb-root-link-hover-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -1914,11 +1875,20 @@ The following table lists the available variables for customizing the Default th $kendo-button-theme-colors Map - map.merge( - $kendo-theme-colors, - ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) + ( + "base": k-color( base ), + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) ) - +
Description
The theme colors map for the Button.
@@ -1927,7 +1897,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-bg String - if($kendo-enable-color-system, k-color( base ), #f5f5f5) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -1937,7 +1907,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-text String - if($kendo-enable-color-system, k-color( on-base ), #424242) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -1947,7 +1917,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-border String - if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -1957,7 +1927,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-gradient Null - if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) + null null @@ -1977,7 +1947,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -2027,7 +1997,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-active-bg String - if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) + k-color( base-active ) var(--kendo-color-base-active, #d6d6d6) @@ -2077,7 +2047,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-selected-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -2087,7 +2057,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-selected-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -2167,7 +2137,7 @@ The following table lists the available variables for customizing the Default th $kendo-button-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -2357,7 +2327,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -2367,7 +2337,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -2377,7 +2347,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -2417,7 +2387,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -2427,7 +2397,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -2437,7 +2407,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -2447,7 +2417,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-header-gradient Null - $kendo-component-header-gradient + null null @@ -2607,7 +2577,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-header-cell-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -2757,7 +2727,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-today-color String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -2847,7 +2817,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -2857,7 +2827,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -2867,7 +2837,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-hover-border String - $kendo-hover-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -2887,7 +2857,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -2897,7 +2867,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -2907,7 +2877,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-selected-border String - $kendo-selected-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -2927,7 +2897,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-selected-hover-bg String - $kendo-selected-hover-bg + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -2937,7 +2907,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-cell-selected-hover-text String - $kendo-selected-hover-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -3037,7 +3007,7 @@ The following table lists the available variables for customizing the Default th $kendo-calendar-navigation-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -3369,7 +3339,7 @@ The following table lists the available variables for customizing the Default th $kendo-captcha-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -3379,7 +3349,7 @@ The following table lists the available variables for customizing the Default th $kendo-captcha-text String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -3389,7 +3359,7 @@ The following table lists the available variables for customizing the Default th $kendo-captcha-border String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -3559,7 +3529,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -3569,7 +3539,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -3579,7 +3549,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -3679,7 +3649,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -3689,7 +3659,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -3759,7 +3729,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-footer-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -3769,7 +3739,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-footer-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -3899,7 +3869,7 @@ The following table lists the available variables for customizing the Default th $kendo-card-subtitle-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -4039,7 +4009,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-wizard-icon-area-color String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -4049,7 +4019,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-wizard-icon-area-bg String - if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) + k-color(primary-subtle) var(--kendo-color-primary-subtle, #ffeceb) @@ -4079,7 +4049,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-wizard-icon-area-focus-shadow List - inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) + inset 0 0 0 1px k-color(primary-emphasis) (inset 0 0 0 1px var(--kendo-color-primary-emphasis, #ff9d97)) @@ -4099,7 +4069,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-wizard-chart-type-selected-color String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -4169,7 +4139,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-a String - if($kendo-enable-color-system, k-color( series-a ), #ff6358) + k-color( series-a ) var(--kendo-color-series-a, #ff6358) @@ -4179,7 +4149,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-b String - if($kendo-enable-color-system, k-color( series-b ), #ffe162) + k-color( series-b ) var(--kendo-color-series-b, #ffe162) @@ -4189,7 +4159,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-c String - if($kendo-enable-color-system, k-color( series-c ), #4cd180) + k-color( series-c ) var(--kendo-color-series-c, #4cd180) @@ -4199,7 +4169,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-d String - if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) + k-color( series-d ) var(--kendo-color-series-d, #4b5ffa) @@ -4209,7 +4179,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-e String - if($kendo-enable-color-system, k-color( series-e ), #ac58ff) + k-color( series-e ) var(--kendo-color-series-e, #ac58ff) @@ -4219,7 +4189,7 @@ The following table lists the available variables for customizing the Default th $kendo-series-f String - if($kendo-enable-color-system, k-color( series-f ), #ff5892) + k-color( series-f ) var(--kendo-color-series-f, #ff5892) @@ -4239,7 +4209,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-major-lines String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) + color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent) @@ -4249,7 +4219,7 @@ The following table lists the available variables for customizing the Default th $kendo-chart-minor-lines String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) + color-mix(in srgb, k-color( on-app-surface ) 4%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 4%, transparent) @@ -4439,7 +4409,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-timestamp-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -4679,7 +4649,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-bg String - $kendo-app-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -4689,7 +4659,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-text String - $kendo-app-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -4699,7 +4669,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-border String - $kendo-app-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -4709,7 +4679,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-bubble-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -4719,7 +4689,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-bubble-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -4769,7 +4739,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-alt-bubble-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -4779,7 +4749,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-alt-bubble-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -4839,7 +4809,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-quick-reply-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -4849,7 +4819,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-quick-reply-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -4859,7 +4829,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-quick-reply-hover-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -4868,9 +4838,9 @@ The following table lists the available variables for customizing the Default th $kendo-chat-quick-reply-hover-text - String - $kendo-color-primary-contrast - var(--kendo-color-on-primary, #ffffff) + List + k-color( primary )-contrast + (var(--kendo-color-primary, #ff6358) -contrast)
Description
The text color of the hovered Chat quick reply.
@@ -4879,7 +4849,7 @@ The following table lists the available variables for customizing the Default th $kendo-chat-quick-reply-hover-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -5039,7 +5009,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -5059,7 +5029,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -5099,7 +5069,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-checked-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -5109,7 +5079,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-checked-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -5189,7 +5159,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-focus-checked-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) + 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) @@ -5269,7 +5239,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-invalid-text String - $kendo-invalid-text + k-color( error ) var(--kendo-color-error, #f31700) @@ -5279,7 +5249,7 @@ The following table lists the available variables for customizing the Default th $kendo-checkbox-invalid-border String - $kendo-invalid-border + k-color( error ) var(--kendo-color-error, #f31700) @@ -5648,7 +5618,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-base-bg String - if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -5660,10 +5630,10 @@ The following table lists the available variables for customizing the Default th Map ( "base": $kendo-chip-base-bg, - "error": map.get($kendo-theme-colors, "error"), - "info": map.get($kendo-theme-colors, "info"), - "warning": map.get($kendo-theme-colors, "warning"), - "success": map.get($kendo-theme-colors, "success") + "error": k-color( error ), + "info": k-color( info ), + "warning": k-color( warning ), + "success": k-color( success ) ) @@ -5704,7 +5674,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-solid-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -5744,7 +5714,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-solid-hover-bg String - if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) + k-color( base-subtle-hover ) var(--kendo-color-base-subtle-hover, #e0e0e0) @@ -5784,7 +5754,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -5794,7 +5764,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-text String - if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) + k-color( base-on-surface ) var(--kendo-color-base-on-surface, #3d3d3d) @@ -5814,7 +5784,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -5834,7 +5804,7 @@ The following table lists the available variables for customizing the Default th $kendo-chip-outline-hover-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -6953,7 +6923,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-editor-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -6963,7 +6933,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-editor-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -6973,7 +6943,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-editor-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -7525,7 +7495,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-gradient-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -7535,7 +7505,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-gradient-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -7545,7 +7515,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-gradient-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -8035,7 +8005,7 @@ The following table lists the available variables for customizing the Default th $kendo-color-gradient-input-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -8339,7 +8309,7 @@ The following table lists the available variables for customizing the Default th $kendo-dialog-titlebar-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -8349,7 +8319,7 @@ The following table lists the available variables for customizing the Default th $kendo-dialog-titlebar-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -8410,9 +8380,9 @@ The following table lists the available variables for customizing the Default th $kendo-dialog-theme-colors Map ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) @@ -8463,7 +8433,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-manager-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -8513,7 +8483,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-manager-pane-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -8673,7 +8643,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-indicator-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -8723,7 +8693,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-indicator-hover-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -8773,7 +8743,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-manager-dock-preview-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) + color-mix(in srgb, k-color( primary ) 16%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 16%, transparent) @@ -8783,7 +8753,7 @@ The following table lists the available variables for customizing the Default th $kendo-dock-manager-dock-preview-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -8813,7 +8783,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -8823,7 +8793,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -8833,7 +8803,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -9043,7 +9013,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -9053,7 +9023,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -9083,7 +9053,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -9093,7 +9063,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -9103,7 +9073,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-selected-hover-bg String - $kendo-selected-hover-bg + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -9113,7 +9083,7 @@ The following table lists the available variables for customizing the Default th $kendo-drawer-selected-hover-text String - $kendo-selected-hover-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -9253,7 +9223,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -9263,7 +9233,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -9273,7 +9243,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -9293,7 +9263,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -9303,7 +9273,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-icon-hover-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -9363,7 +9333,7 @@ The following table lists the available variables for customizing the Default th $kendo-dropzone-note-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -9453,7 +9423,7 @@ The following table lists the available variables for customizing the Default th $kendo-editor-selected-text String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -9463,7 +9433,7 @@ The following table lists the available variables for customizing the Default th $kendo-editor-selected-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -9473,7 +9443,7 @@ The following table lists the available variables for customizing the Default th $kendo-editor-highlighted-bg String - if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) + k-color( primary-subtle ) var(--kendo-color-primary-subtle, #ffeceb) @@ -9703,7 +9673,7 @@ The following table lists the available variables for customizing the Default th $kendo-expander-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -9713,7 +9683,7 @@ The following table lists the available variables for customizing the Default th $kendo-expander-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -9723,7 +9693,7 @@ The following table lists the available variables for customizing the Default th $kendo-expander-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -9823,7 +9793,7 @@ The following table lists the available variables for customizing the Default th $kendo-expander-title-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -9833,7 +9803,7 @@ The following table lists the available variables for customizing the Default th $kendo-expander-header-sub-title-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -9943,7 +9913,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -9953,7 +9923,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -9963,7 +9933,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -10263,7 +10233,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-listview-item-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -10443,7 +10413,7 @@ The following table lists the available variables for customizing the Default th $kendo-file-manager-preview-icon-text String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -10533,7 +10503,7 @@ The following table lists the available variables for customizing the Default th $kendo-filter-preview-field-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -10543,7 +10513,7 @@ The following table lists the available variables for customizing the Default th $kendo-filter-preview-operator-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -10863,7 +10833,18 @@ The following table lists the available variables for customizing the Default th $kendo-fab-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) @@ -10946,7 +10927,7 @@ The following table lists the available variables for customizing the Default th $kendo-fab-item-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -10956,7 +10937,7 @@ The following table lists the available variables for customizing the Default th $kendo-fab-item-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -10966,7 +10947,7 @@ The following table lists the available variables for customizing the Default th $kendo-fab-item-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -11376,7 +11357,7 @@ The following table lists the available variables for customizing the Default th $kendo-form-legend-border-color String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -11596,7 +11577,7 @@ The following table lists the available variables for customizing the Default th $kendo-forms-invalid-color String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -11736,7 +11717,7 @@ The following table lists the available variables for customizing the Default th $kendo-fieldset-legend-text String - if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -11836,7 +11817,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -11846,7 +11827,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -11856,7 +11837,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -11896,7 +11877,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-nonwork-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) + color-mix(in srgb, k-color( on-base ) 3%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 3%, transparent) @@ -11936,7 +11917,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-line-fill String - if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -11946,7 +11927,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-line-selected-fill String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -12036,7 +12017,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-milestone-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -12046,7 +12027,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-milestone-selected-border String - $kendo-selected-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -12056,7 +12037,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-summary-bg String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -12066,7 +12047,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-summary-progress-bg String - if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -12076,7 +12057,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-summary-selected-bg String - if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) + k-color( primary-subtle-active ) var(--kendo-color-primary-subtle-active, #ffc8c4) @@ -12086,7 +12067,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-summary-progress-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -12126,7 +12107,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-task-bg String - if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -12136,7 +12117,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-task-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -12166,7 +12147,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-task-selected-bg String - if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) + k-color( primary-subtle-active ) var(--kendo-color-primary-subtle-active, #ffc8c4) @@ -12176,7 +12157,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-task-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -12196,7 +12177,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-task-progress-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -12396,7 +12377,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-planned-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -12416,7 +12397,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-delayed-bg String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -12426,7 +12407,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-delayed-bg-lighter String - if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) + k-color( error-emphasis ) var(--kendo-color-error-emphasis, #f76f60) @@ -12436,7 +12417,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-advanced-bg String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -12446,7 +12427,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-advanced-bg-lighter String - if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) + k-color( success-emphasis ) var(--kendo-color-success-emphasis, #81d15f) @@ -12506,7 +12487,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-validation-tooltip-valid-border String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -12516,7 +12497,7 @@ The following table lists the available variables for customizing the Default th $kendo-gantt-validation-tooltip-invalid-border String - $kendo-color-error + k-color( error )!default var(--kendo-color-error, #f31700) @@ -12946,7 +12927,7 @@ The following table lists the available variables for customizing the Default th $kendo-grid-row-resizer-hover-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) + color-mix(in srgb, k-color( on-base ) 20%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) @@ -12956,7 +12937,7 @@ The following table lists the available variables for customizing the Default th $kendo-grid-row-resizer-active-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -13361,7 +13342,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -13371,7 +13352,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -13381,7 +13362,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -13421,7 +13402,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -13471,7 +13452,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) + 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -13571,7 +13552,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-outline-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -13601,7 +13582,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-outline-hover-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) + color-mix(in srgb, k-color( on-base ) 80%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 80%, transparent) @@ -13751,7 +13732,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-placeholder-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -13891,7 +13872,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-prefix-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -13901,7 +13882,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-suffix-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -13911,7 +13892,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-invalid-border String - $kendo-invalid-border + k-color( error ) var(--kendo-color-error, #f31700) @@ -13921,7 +13902,7 @@ The following table lists the available variables for customizing the Default th $kendo-input-invalid-shadow Null - $kendo-invalid-shadow + null null @@ -14210,7 +14191,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -14220,7 +14201,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -14230,7 +14211,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -14300,7 +14281,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-item-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -14310,7 +14291,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-item-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -14350,7 +14331,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -14360,7 +14341,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -14410,7 +14391,7 @@ The following table lists the available variables for customizing the Default th $kendo-list-option-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -14520,7 +14501,7 @@ The following table lists the available variables for customizing the Default th $kendo-listbox-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -14530,7 +14511,7 @@ The following table lists the available variables for customizing the Default th $kendo-listbox-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -14540,7 +14521,7 @@ The following table lists the available variables for customizing the Default th $kendo-listbox-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -14670,7 +14651,7 @@ The following table lists the available variables for customizing the Default th $kendo-listview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -14680,7 +14661,7 @@ The following table lists the available variables for customizing the Default th $kendo-listview-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -14690,7 +14671,7 @@ The following table lists the available variables for customizing the Default th $kendo-listview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -14730,7 +14711,7 @@ The following table lists the available variables for customizing the Default th $kendo-listview-item-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -15020,7 +15001,7 @@ The following table lists the available variables for customizing the Default th $kendo-loader-container-panel-border-color String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -15160,7 +15141,7 @@ The following table lists the available variables for customizing the Default th $kendo-loading-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -15260,7 +15241,7 @@ The following table lists the available variables for customizing the Default th $kendo-map-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -15270,7 +15251,7 @@ The following table lists the available variables for customizing the Default th $kendo-map-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -15280,7 +15261,7 @@ The following table lists the available variables for customizing the Default th $kendo-map-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -15400,7 +15381,7 @@ The following table lists the available variables for customizing the Default th $kendo-map-attribution-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) + color-mix(in srgb, k-color( app-surface ) 80%, transparent) color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 80%, transparent) @@ -15410,7 +15391,7 @@ The following table lists the available variables for customizing the Default th $kendo-map-marker-fill String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -15480,7 +15461,7 @@ The following table lists the available variables for customizing the Default th $kendo-media-player-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -15490,7 +15471,7 @@ The following table lists the available variables for customizing the Default th $kendo-media-player-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -15500,7 +15481,7 @@ The following table lists the available variables for customizing the Default th $kendo-media-player-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -15559,9 +15540,9 @@ The following table lists the available variables for customizing the Default th $kendo-media-player-titlebar-gradient - List - if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) - (color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent), color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 0%, transparent)) + String + color-mix(in srgb, k-color( on-app-surface ) 70%, transparent) + color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 70%, transparent)
Description
The gradient of the MediaPlayer title.
@@ -15640,7 +15621,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -15730,7 +15711,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-item-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -15770,7 +15751,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-item-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -15810,7 +15791,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-item-active-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -15860,7 +15841,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-item-selected-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -15900,7 +15881,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-scroll-button-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -15940,7 +15921,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-scroll-button-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -15990,7 +15971,7 @@ The following table lists the available variables for customizing the Default th $kendo-menu-separator-border String - if($kendo-enable-color-system, k-color(border), $kendo-component-border) + k-color(border) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -16340,7 +16321,7 @@ The following table lists the available variables for customizing the Default th $kendo-no-data-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -16450,7 +16431,7 @@ The following table lists the available variables for customizing the Default th $kendo-notification-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -16460,7 +16441,7 @@ The following table lists the available variables for customizing the Default th $kendo-notification-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -16470,7 +16451,7 @@ The following table lists the available variables for customizing the Default th $kendo-notification-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -16500,7 +16481,18 @@ The following table lists the available variables for customizing the Default th $kendo-notification-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) @@ -16740,7 +16732,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -16750,7 +16742,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -16760,7 +16752,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -16840,7 +16832,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-node-group-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -16850,7 +16842,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-node-group-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -16860,7 +16852,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-node-group-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -16940,7 +16932,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-node-group-subtitle-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -17100,7 +17092,7 @@ The following table lists the available variables for customizing the Default th $kendo-orgchart-line-fill String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -17180,7 +17172,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -17190,7 +17182,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -17200,7 +17192,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -17250,7 +17242,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-canvas-bg String - $kendo-app-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -17300,7 +17292,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-page-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -17310,7 +17302,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-page-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -17380,7 +17372,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-search-panel-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -17390,7 +17382,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-search-panel-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -17400,7 +17392,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-search-panel-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -17440,7 +17432,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-search-highlight-bg String - $kendo-body-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -17490,7 +17482,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-highlight-annotation-border String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -17500,7 +17492,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-highlight-annotation-hover-border String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -17510,7 +17502,7 @@ The following table lists the available variables for customizing the Default th $kendo-pdf-viewer-free-text-annotation-border String - if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) + k-color(primary) var(--kendo-color-primary, #ff6358) @@ -17740,7 +17732,7 @@ The following table lists the available variables for customizing the Default th $kendo-pager-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -17750,7 +17742,7 @@ The following table lists the available variables for customizing the Default th $kendo-pager-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -17760,7 +17752,7 @@ The following table lists the available variables for customizing the Default th $kendo-pager-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -18262,8 +18254,8 @@ The following table lists the available variables for customizing the Default th $kendo-panel-text String - var(--kendo-component-text, #{$kendo-component-text}) - var(--kendo-component-text, var(--kendo-color-on-app-surface, #3d3d3d)) + k-color( on-app-surface ) + var(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Panel.
@@ -18272,8 +18264,8 @@ The following table lists the available variables for customizing the Default th $kendo-panel-bg String - var(--kendo-component-bg, #{$kendo-component-bg}) - var(--kendo-component-bg, var(--kendo-color-surface-alt, #ffffff)) + k-color( surface-alt ) + var(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Panel.
@@ -18282,8 +18274,8 @@ The following table lists the available variables for customizing the Default th $kendo-panel-border String - var(--kendo-component-border, #{$kendo-component-border}) - var(--kendo-component-border, var(--kendo-color-border, rgba(0, 0, 0, 0.08))) + k-color( border ) + var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The color of the border around the Panel.
@@ -18452,7 +18444,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -18462,7 +18454,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -18472,7 +18464,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -18492,7 +18484,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-header-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -18522,7 +18514,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-header-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -18652,7 +18644,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-header-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -18662,7 +18654,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-header-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -18692,7 +18684,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-header-selected-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -18812,7 +18804,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-item-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -18942,7 +18934,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -18952,7 +18944,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -18982,7 +18974,7 @@ The following table lists the available variables for customizing the Default th $kendo-panelbar-item-selected-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -19382,7 +19374,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-outline-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -19402,7 +19394,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-outline-hover-text String - if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -19522,7 +19514,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-flat-hover-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) + color-mix(in srgb, k-color( on-base ) 4%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 4%, transparent) @@ -19542,7 +19534,7 @@ The following table lists the available variables for customizing the Default th $kendo-picker-flat-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -19772,7 +19764,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -19782,7 +19774,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -19792,7 +19784,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -19802,7 +19794,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-alt-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -19812,7 +19804,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-headers-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -19822,7 +19814,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-headers-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -19832,7 +19824,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-headers-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -19842,7 +19834,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-total-bg String - if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -19852,7 +19844,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-total-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -19862,7 +19854,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-total-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -19872,7 +19864,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -19902,7 +19894,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -20072,7 +20064,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-configurator-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -20082,7 +20074,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-configurator-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20092,7 +20084,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-configurator-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -20112,7 +20104,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-configurator-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20272,7 +20264,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-calculated-field-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -20282,7 +20274,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-calculated-field-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20292,7 +20284,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-calculated-field-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -20312,7 +20304,7 @@ The following table lists the available variables for customizing the Default th $kendo-pivotgrid-calculated-field-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20432,7 +20424,7 @@ The following table lists the available variables for customizing the Default th $kendo-popover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20442,7 +20434,7 @@ The following table lists the available variables for customizing the Default th $kendo-popover-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -20452,7 +20444,7 @@ The following table lists the available variables for customizing the Default th $kendo-popover-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -20732,7 +20724,7 @@ The following table lists the available variables for customizing the Default th $kendo-popup-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -20742,7 +20734,7 @@ The following table lists the available variables for customizing the Default th $kendo-popup-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20752,7 +20744,7 @@ The following table lists the available variables for customizing the Default th $kendo-popup-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -20862,7 +20854,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-bg String - if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) + k-color( base-subtle ) var(--kendo-color-base-subtle, #ebebeb) @@ -20872,7 +20864,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -20882,7 +20874,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -20902,7 +20894,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-value-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -20912,7 +20904,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-value-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -20922,7 +20914,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-value-border String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -20982,7 +20974,7 @@ The following table lists the available variables for customizing the Default th $kendo-progressbar-chunk-border String - $kendo-body-bg + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -20992,7 +20984,7 @@ The following table lists the available variables for customizing the Default th $kendo-circular-progressbar-arc-stroke String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -21032,7 +21024,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21042,7 +21034,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -21052,7 +21044,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -21062,7 +21054,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21072,7 +21064,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-header-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -21082,7 +21074,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -21122,7 +21114,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-content-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21132,7 +21124,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-content-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -21142,7 +21134,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-content-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -21192,7 +21184,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-suggestion-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21202,7 +21194,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-suggestion-bg String - $kendo-body-bg + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -21212,7 +21204,7 @@ The following table lists the available variables for customizing the Default th $kendo-prompt-suggestion-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -21838,7 +21830,7 @@ The following table lists the available variables for customizing the Default th $kendo-rating-icon-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21848,7 +21840,7 @@ The following table lists the available variables for customizing the Default th $kendo-rating-icon-selected-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -21858,7 +21850,7 @@ The following table lists the available variables for customizing the Default th $kendo-rating-icon-hover-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -21868,7 +21860,7 @@ The following table lists the available variables for customizing the Default th $kendo-rating-icon-focus-text String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -21958,7 +21950,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -21968,7 +21960,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -21978,7 +21970,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -22098,7 +22090,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-event-bg String - if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -22108,7 +22100,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-event-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -22198,7 +22190,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-event-selected-bg String - if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -22208,7 +22200,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-event-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -22308,7 +22300,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-nonwork-bg String - if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -22348,7 +22340,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-othermonth-bg String - if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) + k-color( base ) var(--kendo-color-base, #f5f5f5) @@ -22438,7 +22430,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-yearview-indicator-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -22448,7 +22440,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-yearview-indicator-selected-bg String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -22488,7 +22480,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-tooltip-bg String - $kendo-color-primary-contrast + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -22498,7 +22490,7 @@ The following table lists the available variables for customizing the Default th $kendo-scheduler-tooltip-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -22768,7 +22760,7 @@ The following table lists the available variables for customizing the Default th $kendo-scrollview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -22778,7 +22770,7 @@ The following table lists the available variables for customizing the Default th $kendo-scrollview-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -22788,7 +22780,7 @@ The following table lists the available variables for customizing the Default th $kendo-scrollview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -22828,7 +22820,7 @@ The following table lists the available variables for customizing the Default th $kendo-scrollview-pagebutton-primary-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -22838,7 +22830,7 @@ The following table lists the available variables for customizing the Default th $kendo-scrollview-pagebutton-primary-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23238,7 +23230,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23248,7 +23240,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -23258,7 +23250,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23278,7 +23270,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -23298,7 +23290,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-hover-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23318,7 +23310,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-pressed-bg String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -23338,7 +23330,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-pressed-border String - if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) + k-color( primary-active ) var(--kendo-color-primary-active, #d45349) @@ -23358,7 +23350,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-draghandle-focus-shadow List - 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) + 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) (0 0 0 2px color-mix(in srgb, var(--kendo-color-primary, #ff6358) 30%, transparent)) @@ -23408,7 +23400,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-track-bg String - if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) + k-color( base-emphasis ) var(--kendo-color-base-emphasis, #c2c2c2) @@ -23418,7 +23410,7 @@ The following table lists the available variables for customizing the Default th $kendo-slider-selection-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23658,7 +23650,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitter-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -23668,7 +23660,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitter-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -23678,7 +23670,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitter-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -23748,7 +23740,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitbar-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -23758,7 +23750,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitbar-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -23768,7 +23760,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitbar-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -23788,7 +23780,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitbar-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -23798,7 +23790,7 @@ The following table lists the available variables for customizing the Default th $kendo-splitbar-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -23868,7 +23860,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -23878,7 +23870,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -23888,7 +23880,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -23898,7 +23890,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -23908,7 +23900,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -23918,7 +23910,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -23928,7 +23920,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-header-gradient Null - $kendo-component-header-gradient + null null @@ -24108,7 +24100,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-selection-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -24128,7 +24120,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-selection-border String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24138,7 +24130,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-selection-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -24148,7 +24140,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-single-selection-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24178,7 +24170,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-partial-selection-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -24198,7 +24190,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-active-cell-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -24208,7 +24200,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-auto-fill-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -24228,7 +24220,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-auto-fill-border String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24238,7 +24230,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-auto-fill-shadow List - inset 0 0 0 1px $kendo-selected-bg + inset 0 0 0 1px k-color( primary ) (inset 0 0 0 1px var(--kendo-color-primary, #ff6358)) @@ -24338,7 +24330,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-resize-handle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24348,7 +24340,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-cell-comment-border String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24358,7 +24350,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-cell-dirty-border String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -24458,7 +24450,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-insert-image-dialog-preview-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -24498,7 +24490,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-insert-image-dialog-overlay-hover-text String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -24548,7 +24540,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-drawing-handle-outline-color String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24558,7 +24550,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-drawing-handle-border-color String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24568,7 +24560,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-drawing-handle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -24608,7 +24600,7 @@ The following table lists the available variables for customizing the Default th $kendo-spreadsheet-drawing-anchor-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -24808,7 +24800,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -24908,7 +24900,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -24918,7 +24910,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -24938,7 +24930,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-hover-bg String - if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -24978,7 +24970,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) + color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent) @@ -24998,7 +24990,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-done-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -25008,7 +25000,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-done-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -25028,7 +25020,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-done-hover-bg String - if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -25058,7 +25050,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-done-disabled-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), color.mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) + color-mix(in srgb, k-color( primary ) 60%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent) @@ -25068,7 +25060,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-indicator-done-disabled-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -25188,7 +25180,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-label-success-text String - $kendo-color-success + k-color( success )!default var(--kendo-color-success, #37b400) @@ -25198,7 +25190,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-label-error-text String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -25208,7 +25200,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-label-hover-text String - if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) + k-color( on-base ) var(--kendo-color-on-base, #3d3d3d) @@ -25218,7 +25210,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-label-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) + color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 60%, transparent) @@ -25228,7 +25220,7 @@ The following table lists the available variables for customizing the Default th $kendo-stepper-optional-label-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -25432,7 +25424,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -25442,7 +25434,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -25452,7 +25444,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-border String - if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -25552,7 +25544,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-track-focus-ring List - 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) + 2px solid color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) (2px solid color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)) @@ -25602,7 +25594,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-thumb-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -25612,7 +25604,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-thumb-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -25622,7 +25614,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-off-thumb-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -25682,7 +25674,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-track-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -25692,7 +25684,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-track-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -25802,7 +25794,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-track-focus-ring List - 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) + 2px solid color-mix(in srgb, k-color( primary ) 25%, transparent) (2px solid color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)) @@ -25852,7 +25844,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-thumb-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -25862,7 +25854,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-thumb-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -25872,7 +25864,7 @@ The following table lists the available variables for customizing the Default th $kendo-switch-on-thumb-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26051,7 +26043,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -26061,7 +26053,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26071,7 +26063,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26081,7 +26073,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-header-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -26091,7 +26083,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26101,7 +26093,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-header-border String - $kendo-component-header-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26111,7 +26103,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-header-gradient Null - $kendo-component-header-gradient + null null @@ -26181,7 +26173,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-alt-row-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) + color-mix(in srgb, k-color( on-app-surface ) 5%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) @@ -26211,7 +26203,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-hover-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) + color-mix(in srgb, k-color( on-app-surface ) 11%, transparent) color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) @@ -26281,7 +26273,7 @@ The following table lists the available variables for customizing the Default th $kendo-table-selected-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) + color-mix(in srgb, k-color( primary ) 25%, transparent) color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) @@ -26501,7 +26493,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26511,7 +26503,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26641,7 +26633,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-item-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -26681,7 +26673,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-item-hover-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26711,7 +26703,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-item-selected-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -26721,7 +26713,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-item-selected-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -26731,7 +26723,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-item-selected-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26891,7 +26883,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-content-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -26901,7 +26893,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-content-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26911,7 +26903,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-content-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -26921,7 +26913,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-content-focus-border String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -26931,7 +26923,7 @@ The following table lists the available variables for customizing the Default th $kendo-tabstrip-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -27230,7 +27222,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-column-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -27280,7 +27272,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-column-focus-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -27340,7 +27332,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-column-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -27420,7 +27412,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-pane-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -27430,7 +27422,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-pane-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -27440,7 +27432,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-pane-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -27480,7 +27472,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-pane-header-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -27620,7 +27612,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-hover-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -27630,7 +27622,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-focus-border String - if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) + k-color( border-alt ) var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16)) @@ -27650,7 +27642,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-selected-border String - if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) + k-color( primary-emphasis ) var(--kendo-color-primary-emphasis, #ff9d97) @@ -27670,7 +27662,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-header-text String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -27680,7 +27672,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-header-hover-text String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -27690,7 +27682,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-card-header-focus-text String - if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -27730,7 +27722,7 @@ The following table lists the available variables for customizing the Default th $kendo-taskboard-drag-placeholder-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -27770,7 +27762,7 @@ The following table lists the available variables for customizing the Default th $kendo-tile-layout-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -27840,7 +27832,7 @@ The following table lists the available variables for customizing the Default th $kendo-tile-layout-hint-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -28020,7 +28012,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-track-arrow-disabled-bg String - if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) + color-mix(in srgb, k-color( base-subtle ) 60%, transparent) color-mix(in srgb, var(--kendo-color-base-subtle, #ebebeb) 60%, transparent) @@ -28030,7 +28022,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-track-arrow-disabled-text String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) + color-mix(in srgb, k-color( on-base ) 60%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 60%, transparent) @@ -28040,7 +28032,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-track-arrow-disabled-border String - if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -28230,7 +28222,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-flag-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -28240,7 +28232,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-flag-text String - if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -28370,7 +28362,7 @@ The following table lists the available variables for customizing the Default th $kendo-timeline-circle-bg String - $kendo-color-primary + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -28650,7 +28642,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -28660,7 +28652,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-text String - $kendo-base-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -28670,7 +28662,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-border String - $kendo-base-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -28700,7 +28692,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-scroll-overlay List - $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + $kendo-toolbar-bg, color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -28720,7 +28712,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-outline-border String - if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) + color-mix(in srgb, k-color( on-base ) 50%, transparent) color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 50%, transparent) @@ -28760,7 +28752,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-outline-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -28820,7 +28812,7 @@ The following table lists the available variables for customizing the Default th $kendo-toolbar-flat-scroll-overlay List - if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) @@ -29049,7 +29041,7 @@ The following table lists the available variables for customizing the Default th $kendo-tooltip-bg String - if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -29059,7 +29051,7 @@ The following table lists the available variables for customizing the Default th $kendo-tooltip-text String - if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) + k-color( app-surface ) var(--kendo-color-app-surface, #ffffff) @@ -29089,7 +29081,18 @@ The following table lists the available variables for customizing the Default th $kendo-tooltip-theme-colors Map - $kendo-theme-colors + ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) @@ -29474,7 +29477,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -29494,7 +29497,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-item-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -29504,7 +29507,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-item-hover-text String - $kendo-hover-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -29534,7 +29537,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-item-selected-bg String - $kendo-selected-bg + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -29544,7 +29547,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-item-selected-text String - $kendo-selected-text + k-color( on-primary ) var(--kendo-color-on-primary, #ffffff) @@ -29594,7 +29597,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-loadmore-text String - $kendo-link-text + k-color( primary ) var(--kendo-color-primary, #ff6358) @@ -29624,7 +29627,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-loadmore-hover-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -29654,7 +29657,7 @@ The following table lists the available variables for customizing the Default th $kendo-treeview-loadmore-focus-text String - $kendo-link-hover-text + k-color( primary-hover ) var(--kendo-color-primary-hover, #ea5a51) @@ -30283,7 +30286,7 @@ The following table lists the available variables for customizing the Default th $kendo-code-bg String - $kendo-base-bg + k-color( surface ) var(--kendo-color-surface, #fafafa) @@ -30293,7 +30296,7 @@ The following table lists the available variables for customizing the Default th $kendo-code-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -30303,7 +30306,7 @@ The following table lists the available variables for customizing the Default th $kendo-code-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -31032,7 +31035,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -31042,7 +31045,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -31052,7 +31055,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -31082,7 +31085,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-dropzone-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -31092,7 +31095,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-dropzone-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -31112,7 +31115,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-dropzone-hover-bg String - $kendo-hover-bg + k-color( base-hover ) var(--kendo-color-base-hover, #ebebeb) @@ -31122,7 +31125,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-status-text String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -31202,7 +31205,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-icon-color String - $kendo-subtle-text + k-color( subtle ) var(--kendo-color-subtle, #666666) @@ -31222,7 +31225,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-progress-bg String - $kendo-color-info + k-color( info ) var(--kendo-color-info, #0058e9) @@ -31232,7 +31235,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-success-text String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -31242,7 +31245,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-success-bg String - $kendo-color-success + k-color( success ) var(--kendo-color-success, #37b400) @@ -31252,7 +31255,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-error-text String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -31262,7 +31265,7 @@ The following table lists the available variables for customizing the Default th $kendo-upload-error-bg String - $kendo-color-error + k-color( error ) var(--kendo-color-error, #f31700) @@ -31492,7 +31495,7 @@ The following table lists the available variables for customizing the Default th $kendo-window-bg String - $kendo-component-bg + k-color( surface-alt ) var(--kendo-color-surface-alt, #ffffff) @@ -31502,7 +31505,7 @@ The following table lists the available variables for customizing the Default th $kendo-window-text String - $kendo-component-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -31512,7 +31515,7 @@ The following table lists the available variables for customizing the Default th $kendo-window-border String - $kendo-component-border + k-color( border ) var(--kendo-color-border, rgba(0, 0, 0, 0.08)) @@ -31542,7 +31545,7 @@ The following table lists the available variables for customizing the Default th $kendo-window-titlebar-bg String - $kendo-component-header-bg + k-color( surface )!default var(--kendo-color-surface, #fafafa) @@ -31552,7 +31555,7 @@ The following table lists the available variables for customizing the Default th $kendo-window-titlebar-text String - $kendo-component-header-text + k-color( on-app-surface ) var(--kendo-color-on-app-surface, #3d3d3d) @@ -31597,9 +31600,9 @@ The following table lists the available variables for customizing the Default th $kendo-window-theme-colors Map ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) diff --git a/packages/default/scss/action-sheet/_variables.scss b/packages/default/scss/action-sheet/_variables.scss index a81dcac65ed..7954264bcf0 100644 --- a/packages/default/scss/action-sheet/_variables.scss +++ b/packages/default/scss/action-sheet/_variables.scss @@ -16,9 +16,9 @@ $kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default; $kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default; $kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default; -$kendo-actionsheet-bg: $kendo-component-bg !default; -$kendo-actionsheet-text: $kendo-component-text !default; -$kendo-actionsheet-border: $kendo-component-border !default; +$kendo-actionsheet-bg: k-color( surface-alt ) !default; +$kendo-actionsheet-text: k-color( on-app-surface ) !default; +$kendo-actionsheet-border: k-color( border ) !default; $kendo-actionsheet-shadow: k-elevation(7) !default; @@ -39,7 +39,7 @@ $kendo-actionsheet-titlebar-shadow: null !default; $kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default; $kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default; -$kendo-actionsheet-subtitle-text: $kendo-subtle-text !default; +$kendo-actionsheet-subtitle-text: k-color( subtle ) !default; // Actionsheet item @@ -53,9 +53,9 @@ $kendo-actionsheet-item-title-font-weight: null !default; $kendo-actionsheet-item-title-text-transform: null !default; $kendo-actionsheet-item-description-font-size: .875em !default; -$kendo-actionsheet-item-description-text: $kendo-subtle-text !default; +$kendo-actionsheet-item-description-text: k-color( subtle ) !default; -$kendo-actionsheet-item-hover-bg: $kendo-hover-bg !default; +$kendo-actionsheet-item-hover-bg: k-color( base-hover ) !default; $kendo-actionsheet-item-hover-text: null !default; $kendo-actionsheet-item-hover-border: null !default; $kendo-actionsheet-item-hover-gradient: null !default; @@ -82,7 +82,7 @@ $kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !def $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default; $kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default; $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default; -$kendo-adaptive-actionsheet-titlebar-border: $kendo-component-border !default; +$kendo-adaptive-actionsheet-titlebar-border: k-color( border ) !default; $kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default; $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default; diff --git a/packages/default/scss/adaptive/_variables.scss b/packages/default/scss/adaptive/_variables.scss index acee3bc6652..800fec1aa50 100644 --- a/packages/default/scss/adaptive/_variables.scss +++ b/packages/default/scss/adaptive/_variables.scss @@ -2,20 +2,20 @@ @use "../core/functions/index.import.scss" as *; // Adaptive -$kendo-adaptive-bg: $kendo-component-bg !default; -$kendo-adaptive-text: $kendo-component-text !default; -$kendo-adaptive-border: $kendo-component-border !default; +$kendo-adaptive-bg: k-color( surface-alt ) !default; +$kendo-adaptive-text: k-color( on-app-surface ) !default; +$kendo-adaptive-border: k-color( border ) !default; -$kendo-adaptive-content-bg: $kendo-app-bg !default; -$kendo-adaptive-content-text: $kendo-app-text !default; +$kendo-adaptive-content-bg: k-color( surface ) !default; +$kendo-adaptive-content-text: k-color( on-app-surface ) !default; -$kendo-adaptive-menu-bg: $kendo-color-primary !default; -$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default; +$kendo-adaptive-menu-bg: k-color( primary ) !default; +$kendo-adaptive-menu-text: k-color( on-primary ) !default; -$kendo-adaptive-menu-clear-text: $kendo-color-primary !default; +$kendo-adaptive-menu-clear-text: k-color( primary ) !default; -$kendo-adaptive-menu-item-border: $kendo-component-border !default; -$kendo-adaptive-menu-title-text: $kendo-component-text !default; +$kendo-adaptive-menu-item-border: k-color( border ) !default; +$kendo-adaptive-menu-title-text: k-color( on-app-surface ) !default; $kendo-adaptive-border-width: 1px !default; $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default; @@ -24,13 +24,13 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default; // Adaptive Grid -$kendo-adaptive-grid-sort-text: $kendo-color-primary !default; +$kendo-adaptive-grid-sort-text: k-color( primary ) !default; // Adaptive Scheduler -$kendo-adaptive-scheduler-current-text: $kendo-color-primary !default; +$kendo-adaptive-scheduler-current-text: k-color( primary ) !default; $kendo-adaptive-scheduler-base-text: inherit !default; -$kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default; +$kendo-adaptive-scheduler-subtle-text: k-color( subtle ) !default; @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with ( $kendo-adaptive-bg: $kendo-adaptive-bg, diff --git a/packages/default/scss/appbar/_variables.scss b/packages/default/scss/appbar/_variables.scss index 8b1a676e7f7..4fd7bd0441c 100644 --- a/packages/default/scss/appbar/_variables.scss +++ b/packages/default/scss/appbar/_variables.scss @@ -37,17 +37,17 @@ $kendo-appbar-gap: k-spacing(2) !default; /// The background color of the AppBar based on light theme color. /// @group appbar -$kendo-appbar-light-bg: $kendo-color-light !default; +$kendo-appbar-light-bg: k-color( light ) !default; /// The text color of the AppBar based on light theme color. /// @group appbar -$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) !default; +$kendo-appbar-light-text: k-color( on-light ) !default; /// The background color of the AppBar based on dark theme color. /// @group appbar -$kendo-appbar-dark-bg: $kendo-color-dark !default; +$kendo-appbar-dark-bg: k-color( dark ) !default; /// The text color of the AppBar based on dark theme color. /// @group appbar -$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) !default; +$kendo-appbar-dark-text: k-color( on-dark ) !default; /// The box shadow of the AppBar. /// @group appbar @@ -56,6 +56,19 @@ $kendo-appbar-box-shadow: k-elevation(4) !default; /// @group appbar $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default; +$kendo-appbar-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; + @forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with ( $kendo-appbar-margin-x: $kendo-appbar-margin-x, $kendo-appbar-margin-y: $kendo-appbar-margin-y, @@ -72,5 +85,6 @@ $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default; $kendo-appbar-dark-bg: $kendo-appbar-dark-bg, $kendo-appbar-dark-text: $kendo-appbar-dark-text, $kendo-appbar-box-shadow: $kendo-appbar-box-shadow, - $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow + $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow, + $kendo-appbar-theme-colors: $kendo-appbar-theme-colors ); diff --git a/packages/default/scss/avatar/_variables.scss b/packages/default/scss/avatar/_variables.scss index 77dfaf594a5..bf00c96e3b3 100644 --- a/packages/default/scss/avatar/_variables.scss +++ b/packages/default/scss/avatar/_variables.scss @@ -25,7 +25,18 @@ $kendo-avatar-sizes: ( /// The theme colors map of the Avatar. /// @group avatar -$kendo-avatar-theme-colors: $kendo-theme-colors !default; +$kendo-avatar-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) !default; @forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with ( $kendo-avatar-border-width: $kendo-avatar-border-width, diff --git a/packages/default/scss/badge/_variables.scss b/packages/default/scss/badge/_variables.scss index dea4dd4dfcf..c045d29762d 100644 --- a/packages/default/scss/badge/_variables.scss +++ b/packages/default/scss/badge/_variables.scss @@ -102,6 +102,19 @@ $kendo-badge-sizes: ( ) ) !default; +$kendo-badge-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; + @forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with ( $kendo-badge-border-width: $kendo-badge-border-width, $kendo-badge-border-radius: $kendo-badge-border-radius, @@ -125,5 +138,6 @@ $kendo-badge-sizes: ( $kendo-badge-sm-min-width: $kendo-badge-sm-min-width, $kendo-badge-md-min-width: $kendo-badge-md-min-width, $kendo-badge-lg-min-width: $kendo-badge-lg-min-width, - $kendo-badge-sizes: $kendo-badge-sizes + $kendo-badge-sizes: $kendo-badge-sizes, + $kendo-badge-theme-colors: $kendo-badge-theme-colors ); diff --git a/packages/default/scss/bottom-navigation/_variables.scss b/packages/default/scss/bottom-navigation/_variables.scss index 05111a7dcbf..bf744a3db3d 100644 --- a/packages/default/scss/bottom-navigation/_variables.scss +++ b/packages/default/scss/bottom-navigation/_variables.scss @@ -56,13 +56,26 @@ $kendo-bottom-nav-shadow: k-elevation(4) !default; /// The text color of the flat BottomNavigation. /// @group bottom-navigation -$kendo-bottom-nav-flat-text: $kendo-component-text !default; +$kendo-bottom-nav-flat-text: k-color( on-app-surface ) !default; /// The background color of the flat BottomNavigation. /// @group bottom-navigation -$kendo-bottom-nav-flat-bg: $kendo-component-bg !default; +$kendo-bottom-nav-flat-bg: k-color( surface-alt ) !default; /// The border color of the flat BottomNavigation. /// @group bottom-navigation -$kendo-bottom-nav-flat-border: $kendo-component-border !default; +$kendo-bottom-nav-flat-border: k-color( border ) !default; + +$kendo-bottom-navigation-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; @forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with ( $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x, @@ -83,5 +96,6 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default; $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow, $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text, $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg, - $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border + $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border, + $kendo-bottom-navigation-theme-colors: $kendo-bottom-navigation-theme-colors ); diff --git a/packages/default/scss/breadcrumb/_variables.scss b/packages/default/scss/breadcrumb/_variables.scss index d2eb1158000..41c2efc5dc3 100644 --- a/packages/default/scss/breadcrumb/_variables.scss +++ b/packages/default/scss/breadcrumb/_variables.scss @@ -52,13 +52,13 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default /// The base background of the Breadcrumb. /// @group breadcrumb -$kendo-breadcrumb-bg: $kendo-component-bg !default; +$kendo-breadcrumb-bg: k-color( surface-alt ) !default; /// The base text color of the Breadcrumb. /// @group breadcrumb -$kendo-breadcrumb-text: $kendo-component-text !default; +$kendo-breadcrumb-text: k-color( on-app-surface ) !default; /// The base border color of the Breadcrumb. /// @group breadcrumb -$kendo-breadcrumb-border: $kendo-component-border !default; +$kendo-breadcrumb-border: k-color( border ) !default; /// The box shadow of the focused Breadcrumb. /// @group breadcrumb @@ -132,17 +132,17 @@ $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default; $kendo-breadcrumb-link-bg: null !default; /// The text color of the Breadcrumb link. /// @group breadcrumb -$kendo-breadcrumb-link-text: $kendo-link-text !default; +$kendo-breadcrumb-link-text: k-color( primary ) !default; /// The border color of the Breadcrumb link. /// @group breadcrumb $kendo-breadcrumb-link-border: null !default; /// The background color of the hovered Breadcrumb link. /// @group breadcrumb -$kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default; +$kendo-breadcrumb-link-hover-bg: k-color( surface ) !default; /// The text color of the hovered Breadcrumb link. /// @group breadcrumb -$kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default; +$kendo-breadcrumb-link-hover-text: k-color( primary-hover ) !default; /// The border color of the hovered Breadcrumb link. /// @group breadcrumb $kendo-breadcrumb-link-hover-border: null !default; @@ -152,7 +152,7 @@ $kendo-breadcrumb-link-hover-border: null !default; $kendo-breadcrumb-link-focus-bg: null !default; /// The text color of the focused Breadcrumb link. /// @group breadcrumb -$kendo-breadcrumb-link-focus-text: $kendo-link-text !default; +$kendo-breadcrumb-link-focus-text: k-color( primary ) !default; /// The border color of the focused Breadcrumb link. /// @group breadcrumb $kendo-breadcrumb-link-focus-border: null !default; @@ -172,7 +172,7 @@ $kendo-breadcrumb-root-link-border: null !default; /// The background color of the hovered Breadcrumb root link. /// @group breadcrumb -$kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default; +$kendo-breadcrumb-root-link-hover-bg: k-color( surface ) !default; /// The text color of the hovered Breadcrumb root link. /// @group breadcrumb $kendo-breadcrumb-root-link-hover-text: null !default; diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss index aa04b81286f..4e3047aaa5d 100644 --- a/packages/default/scss/button/_variables.scss +++ b/packages/default/scss/button/_variables.scss @@ -107,30 +107,39 @@ $kendo-button-sizes: ( /// The theme colors map for the Button. /// @group button -$kendo-button-theme-colors: map.merge( - $kendo-theme-colors, - ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) ) +$kendo-button-theme-colors: ( + "base": k-color( base ), + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) ) !default; /// The base background of the Button. /// @group button -$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default; +$kendo-button-bg: k-color( base ) !default; /// The base text color of the Button. /// @group button -$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default; +$kendo-button-text: k-color( on-base ) !default; /// The base border color of the Button. /// @group button -$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default; +$kendo-button-border: k-color( border ) !default; /// The base background gradient of the Button. /// @group button -$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default; +$kendo-button-gradient: null !default; /// The base shadow of the Button. /// @group button $kendo-button-shadow: null !default; /// The base background of the hovered Button. /// @group button -$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default; +$kendo-button-hover-bg: k-color( base-hover ) !default; /// The base text color of the hovered Button. /// @group button $kendo-button-hover-text: null !default; @@ -146,7 +155,7 @@ $kendo-button-hover-shadow: null !default; /// The base background color of the active Button. /// @group button -$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default; +$kendo-button-active-bg: k-color( base-active ) !default; /// The base text color of the active Button. /// @group button $kendo-button-active-text: null !default; @@ -162,10 +171,10 @@ $kendo-button-active-shadow: null !default; /// The base background color of the selected Button. /// @group button -$kendo-button-selected-bg: $kendo-color-primary !default; +$kendo-button-selected-bg: k-color( primary ) !default; /// The text color of the selected Button. /// @group button -$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default; +$kendo-button-selected-text: k-color( on-primary ) !default; /// The border color of the selected Button. /// @group button $kendo-button-selected-border: $kendo-button-selected-bg !default; @@ -190,7 +199,7 @@ $kendo-button-focus-border: null !default; $kendo-button-focus-gradient: null !default; /// The base shadow of the focused Button. /// @group button -$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) !default; +$kendo-button-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The base background of the disabled Button. /// @group button @@ -209,7 +218,7 @@ $kendo-button-disabled-gradient: null !default; $kendo-button-disabled-shadow: null !default; // Solid Button -$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default; +$kendo-solid-button-gradient: null !default; $kendo-solid-button-shade-function: "k-try-shade" !default; $kendo-solid-button-shade-text-amount: 0 !default; $kendo-solid-button-shade-bg-amount: 0 !default; diff --git a/packages/default/scss/calendar/_variables.scss b/packages/default/scss/calendar/_variables.scss index bb89cd6f16a..f0bb282a604 100644 --- a/packages/default/scss/calendar/_variables.scss +++ b/packages/default/scss/calendar/_variables.scss @@ -22,13 +22,13 @@ $kendo-calendar-cell-size: 32px !default; /// The background color of the Calendar. /// @group calendar -$kendo-calendar-bg: $kendo-component-bg !default; +$kendo-calendar-bg: k-color( surface-alt ) !default; /// The text color of the Calendar. /// @group calendar -$kendo-calendar-text: $kendo-component-text !default; +$kendo-calendar-text: k-color( on-app-surface ) !default; /// The border color of the Calendar. /// @group calendar -$kendo-calendar-border: $kendo-component-border !default; +$kendo-calendar-border: k-color( border ) !default; /// The horizontal padding of the header in the Calendar. /// @group calendar @@ -43,16 +43,16 @@ $kendo-calendar-header-border-width: 1px !default; /// The background color of the header in the Calendar. /// @group calendar -$kendo-calendar-header-bg: $kendo-component-header-bg !default; +$kendo-calendar-header-bg: k-color( surface )!default; /// The text color of the header in the Calendar. /// @group calendar -$kendo-calendar-header-text: $kendo-component-header-text !default; +$kendo-calendar-header-text: k-color( on-app-surface ) !default; /// The border color of the header in the Calendar. /// @group calendar -$kendo-calendar-header-border: $kendo-component-header-border !default; +$kendo-calendar-header-border: k-color( border ) !default; /// The gradient of the header in the Calendar. /// @group calendar -$kendo-calendar-header-gradient: $kendo-component-header-gradient !default; +$kendo-calendar-header-gradient: null !default; // TODO: variable is used, but the selector using it is not! Potentially remove; /// The shadow of the header in the Calendar. /// @group calendar @@ -108,7 +108,7 @@ $kendo-calendar-header-cell-line-height: 2 !default; $kendo-calendar-header-cell-bg: null !default; /// The text color of the header cells in the Calendar. /// @group calendar -$kendo-calendar-header-cell-text: $kendo-subtle-text !default; +$kendo-calendar-header-cell-text: k-color( subtle ) !default; /// The opacity of the header cells in the Calendar. /// @group calendar $kendo-calendar-header-cell-opacity: null !default; @@ -159,7 +159,7 @@ $kendo-calendar-weekend-text: null !default; $kendo-calendar-today-style: color !default; /// The color of the current day in the Calendar. /// @group calendar -$kendo-calendar-today-color: $kendo-color-primary !default; +$kendo-calendar-today-color: k-color( primary ) !default; /// The background color of the week number cells in the Calendar. /// @group calendar @@ -190,36 +190,36 @@ $kendo-calendar-cell-gradient: null !default; /// The background color of the hovered cells in the Calendar. /// @group calendar -$kendo-calendar-cell-hover-bg: $kendo-hover-bg !default; +$kendo-calendar-cell-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered cells in the Calendar. /// @group calendar -$kendo-calendar-cell-hover-text: $kendo-hover-text !default; +$kendo-calendar-cell-hover-text: k-color( on-app-surface ) !default; /// The border color of the hovered cells in the Calendar. /// @group calendar -$kendo-calendar-cell-hover-border: $kendo-hover-border !default; +$kendo-calendar-cell-hover-border: k-color( border ) !default; /// The gradient of the hovered cells in the Calendar. /// @group calendar $kendo-calendar-cell-hover-gradient: null !default; /// The background color of the selected cells in the Calendar. /// @group calendar -$kendo-calendar-cell-selected-bg: $kendo-selected-bg !default; +$kendo-calendar-cell-selected-bg: k-color( primary ) !default; /// The text color of the selected cells in the Calendar. /// @group calendar -$kendo-calendar-cell-selected-text: $kendo-selected-text !default; +$kendo-calendar-cell-selected-text: k-color( on-primary ) !default; /// The border color of the selected cells in the Calendar. /// @group calendar -$kendo-calendar-cell-selected-border: $kendo-selected-border !default; +$kendo-calendar-cell-selected-border: k-color( border ) !default; /// The gradient of the selected cells in the Calendar. /// @group calendar $kendo-calendar-cell-selected-gradient: null !default; /// The background color of the selected and hovered cells in the Calendar. /// @group calendar -$kendo-calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default; +$kendo-calendar-cell-selected-hover-bg: k-color( primary-hover ) !default; /// The text color of the selected and hovered cells in the Calendar. /// @group calendar -$kendo-calendar-cell-selected-hover-text: $kendo-selected-hover-text !default; +$kendo-calendar-cell-selected-hover-text: k-color( on-primary ) !default; /// The border color of the selected and hovered cells in the Calendar. /// @group calendar $kendo-calendar-cell-selected-hover-border: null !default; @@ -254,7 +254,7 @@ $kendo-calendar-navigation-border: $kendo-calendar-header-border !default; /// The text color of the hovered items in the Calendar navigation. /// @group calendar -$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default; +$kendo-calendar-navigation-hover-text: k-color( primary-hover ) !default; /// The horizontal padding of the header in the Infinite Calendar. /// @group calendar diff --git a/packages/default/scss/captcha/_variables.scss b/packages/default/scss/captcha/_variables.scss index 3d1f46a55c7..3fb99f1186e 100644 --- a/packages/default/scss/captcha/_variables.scss +++ b/packages/default/scss/captcha/_variables.scss @@ -23,13 +23,13 @@ $kendo-captcha-line-height: var( --kendo-line-height, normal ) !default; $kendo-captcha-gap: $kendo-captcha-spacer !default; /// The background color of the Captcha. /// @group captcha -$kendo-captcha-bg: $kendo-component-bg !default; +$kendo-captcha-bg: k-color( surface-alt ) !default; /// The text color of the Captcha. /// @group captcha -$kendo-captcha-text: $kendo-component-bg !default; +$kendo-captcha-text: k-color( surface-alt ) !default; /// The border color of the Captcha. /// @group captcha -$kendo-captcha-border: $kendo-component-bg !default; +$kendo-captcha-border: k-color( surface-alt ) !default; /// The gap of the Captcha image wrapper. /// @group captcha diff --git a/packages/default/scss/card/_variables.scss b/packages/default/scss/card/_variables.scss index 96052b34e57..5453b01bbf3 100644 --- a/packages/default/scss/card/_variables.scss +++ b/packages/default/scss/card/_variables.scss @@ -34,13 +34,13 @@ $kendo-card-deck-gap: k-spacing(4) !default; /// The background color of the Card. /// @group card -$kendo-card-bg: $kendo-component-bg !default; +$kendo-card-bg: k-color( surface-alt ) !default; /// The text color of the Card. /// @group card -$kendo-card-text: $kendo-component-text !default; +$kendo-card-text: k-color( on-app-surface ) !default; /// The border color of the Card. /// @group card -$kendo-card-border: $kendo-component-border !default; +$kendo-card-border: k-color( border ) !default; /// The shadow of the Card. /// @group card $kendo-card-shadow: null !default; @@ -75,10 +75,10 @@ $kendo-card-header-border-width: 1px !default; $kendo-card-header-bg: null !default; /// The text color of the Card header. /// @group card -$kendo-card-header-text: $kendo-component-header-text !default; +$kendo-card-header-text: k-color( on-app-surface ) !default; /// The border color of the Card header. /// @group card -$kendo-card-header-border: $kendo-component-header-border !default; +$kendo-card-header-border: k-color( border ) !default; /// The horizontal padding of the Card body. /// @group card @@ -101,10 +101,10 @@ $kendo-card-footer-border-width: 1px !default; $kendo-card-footer-bg: null !default; /// The text color of the Card footer. /// @group card -$kendo-card-footer-text: $kendo-component-header-text !default; +$kendo-card-footer-text: k-color( on-app-surface ) !default; /// The border color of the Card footer. /// @group card -$kendo-card-footer-border: $kendo-component-header-border !default; +$kendo-card-footer-border: k-color( border ) !default; /// The bottom margin of the Card title. /// @group card @@ -145,7 +145,7 @@ $kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal, normal ) !def $kendo-card-subtitle-letter-spacing: null !default; /// The text color of the Card subtitle. /// @group card -$kendo-card-subtitle-text: $kendo-subtle-text !default; +$kendo-card-subtitle-text: k-color( subtle ) !default; /// The maximum width of the Card image. /// @group card @@ -184,6 +184,19 @@ $kendo-card-callout-width: 20px !default; /// @group card $kendo-card-callout-height: 20px !default; +$kendo-card-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; + @forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with ( $kendo-card-padding-x: $kendo-card-padding-x, $kendo-card-padding-y: $kendo-card-padding-y, @@ -239,5 +252,6 @@ $kendo-card-callout-height: 20px !default; $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius, $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset, $kendo-card-callout-width: $kendo-card-callout-width, - $kendo-card-callout-height: $kendo-card-callout-height + $kendo-card-callout-height: $kendo-card-callout-height, + $kendo-card-theme-colors: $kendo-card-theme-colors ); diff --git a/packages/default/scss/chart-wizard/_variables.scss b/packages/default/scss/chart-wizard/_variables.scss index 4c8327fa483..018b8d05f82 100644 --- a/packages/default/scss/chart-wizard/_variables.scss +++ b/packages/default/scss/chart-wizard/_variables.scss @@ -5,10 +5,10 @@ /// The color of the area around the chart type icon. /// @group chart-wizard -$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +$kendo-chart-wizard-icon-area-color: k-color(primary) !default; /// The background color of the area around the chart type icon. /// @group chart-wizard -$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) !default; +$kendo-chart-wizard-icon-area-bg: k-color(primary-subtle) !default; /// The border radius of the area around the chart type icon. /// @group chart-wizard $kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default; @@ -17,14 +17,14 @@ $kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default; $kendo-chart-wizard-icon-area-padding: k-spacing(4) !default; /// The box shadow of the focused area around the chart type icon. /// @group chart-wizard -$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) !default; +$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px k-color(primary-emphasis) !default; /// The box shadow of the selected area around the chart type icon. /// @group chart-wizard $kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default; /// The color of the selected chart type items in the Property panel. /// @group chart-wizard -$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +$kendo-chart-wizard-chart-type-selected-color: k-color(primary) !default; /// The padding of the preview pane. /// @group chart-wizard diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss index c12deb6e020..0d8df10ecdf 100644 --- a/packages/default/scss/chat/_variables.scss +++ b/packages/default/scss/chat/_variables.scss @@ -57,7 +57,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !defaul $kendo-chat-timestamp-transform: uppercase !default; /// The text color of the Chat timestamp. /// @group chat -$kendo-chat-timestamp-text: $kendo-subtle-text !default; +$kendo-chat-timestamp-text: k-color( subtle ) !default; /// The background color of the Chat timestamp. /// @group chat $kendo-chat-timestamp-bg: null !default; @@ -138,20 +138,20 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default; /// The background color of the Chat. /// @group chat -$kendo-chat-bg: $kendo-app-bg !default; +$kendo-chat-bg: k-color( surface ) !default; /// The text color of the Chat. /// @group chat -$kendo-chat-text: $kendo-app-text !default; +$kendo-chat-text: k-color( on-app-surface ) !default; /// The border color of the Chat. /// @group chat -$kendo-chat-border: $kendo-app-border !default; +$kendo-chat-border: k-color( border ) !default; /// The background color of the Chat bubble. /// @group chat -$kendo-chat-bubble-bg: $kendo-component-bg !default; +$kendo-chat-bubble-bg: k-color( surface-alt ) !default; /// The text color of the Chat bubble. /// @group chat -$kendo-chat-bubble-text: $kendo-component-text !default; +$kendo-chat-bubble-text: k-color( on-app-surface ) !default; /// The border color of the Chat bubble. /// @group chat $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default; @@ -167,10 +167,10 @@ $kendo-chat-bubble-selected-shadow: k-elevation(3) !default; /// The background color of the Chat alt bubble. /// @group chat -$kendo-chat-alt-bubble-bg: $kendo-color-primary !default; +$kendo-chat-alt-bubble-bg: k-color( primary ) !default; /// The text color of the Chat alt bubble. /// @group chat -$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default; +$kendo-chat-alt-bubble-text: k-color( on-primary ) !default; /// The border color of the Chat alt bubble. /// @group chat $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default; @@ -189,20 +189,20 @@ $kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default; $kendo-chat-quick-reply-bg: transparent !default; /// The text color of the Chat quick reply. /// @group chat -$kendo-chat-quick-reply-text: $kendo-color-primary !default; +$kendo-chat-quick-reply-text: k-color( primary ) !default; /// The border color of the Chat quick reply. /// @group chat -$kendo-chat-quick-reply-border: $kendo-color-primary !default; +$kendo-chat-quick-reply-border: k-color( primary ) !default; /// The background color of the hovered Chat quick reply. /// @group chat -$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default; +$kendo-chat-quick-reply-hover-bg: k-color( primary ) !default; /// The text color of the hovered Chat quick reply. /// @group chat -$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default; +$kendo-chat-quick-reply-hover-text: k-color( on-primary ) !default; /// The border color of the hovered Chat quick reply. /// @group chat -$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default; +$kendo-chat-quick-reply-hover-border: k-color( primary ) !default; /// The shadow blur of the focused Chat quick reply. /// @group chat diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss index 772866f4d15..e9d0c302ea0 100644 --- a/packages/default/scss/checkbox/_variables.scss +++ b/packages/default/scss/checkbox/_variables.scss @@ -60,13 +60,13 @@ $kendo-checkbox-sizes: ( /// The background color of the CheckBox. /// @group checkbox -$kendo-checkbox-bg: $kendo-component-bg !default; +$kendo-checkbox-bg: k-color( surface-alt ) !default; /// The text color of the CheckBox. /// @group checkbox $kendo-checkbox-text: null !default; /// The border color of the CheckBox. /// @group checkbox -$kendo-checkbox-border: $kendo-component-border !default; +$kendo-checkbox-border: k-color( border ) !default; /// The background color of the hovered CheckBox. /// @group checkbox @@ -80,10 +80,10 @@ $kendo-checkbox-hover-border: null !default; /// The background color of the checked CheckBox. /// @group checkbox -$kendo-checkbox-checked-bg: $kendo-color-primary !default; +$kendo-checkbox-checked-bg: k-color( primary ) !default; /// The text color of the checked CheckBox. /// @group checkbox -$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default; +$kendo-checkbox-checked-text: k-color( on-primary ) !default; /// The border color of the checked CheckBox. /// @group checkbox $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default; @@ -109,7 +109,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default; $kendo-checkbox-focus-checked-border: null !default; /// The box shadow of the focused and checked CheckBox. /// @group checkbox -$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default; +$kendo-checkbox-focus-checked-shadow: 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) !default; /// The background color of the disabled CheckBox. /// @group checkbox @@ -136,10 +136,10 @@ $kendo-checkbox-disabled-checked-border: null !default; $kendo-checkbox-invalid-bg: null !default; /// The text color of an invalid CheckBox. /// @group checkbox -$kendo-checkbox-invalid-text: $kendo-invalid-text !default; +$kendo-checkbox-invalid-text: k-color( error ) !default; /// The border color of an invalid CheckBox. /// @group checkbox -$kendo-checkbox-invalid-border: $kendo-invalid-border !default; +$kendo-checkbox-invalid-border: k-color( error ) !default; // CheckBox indicator diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss index f74bfc09ffc..64ba5fb2e0a 100644 --- a/packages/default/scss/chip/_variables.scss +++ b/packages/default/scss/chip/_variables.scss @@ -95,16 +95,16 @@ $kendo-chip-sizes: ( /// The base background of the Chip. /// @group chip -$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default; +$kendo-chip-base-bg: k-color( base-subtle ) !default; /// The theme colors map for the Chip. /// @group chip $kendo-chip-theme-colors: ( "base": $kendo-chip-base-bg, - "error": map.get($kendo-theme-colors, "error"), - "info": map.get($kendo-theme-colors, "info"), - "warning": map.get($kendo-theme-colors, "warning"), - "success": map.get($kendo-theme-colors, "success") + "error": k-color( error ), + "info": k-color( info ), + "warning": k-color( warning ), + "success": k-color( success ) ) !default; /// The base background color of the solid Chip. @@ -118,7 +118,7 @@ $kendo-chip-solid-text: $kendo-button-text !default; $kendo-chip-solid-border: $kendo-button-border !default; /// The base shadow of the solid Chip. /// @group chip -$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default; +$kendo-chip-solid-shadow: 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The base gradient of the solid Chip. /// @group chip $kendo-chip-solid-gradient: $kendo-button-gradient !default; @@ -132,7 +132,7 @@ $kendo-chip-solid-focus-text: null !default; /// The base background color of the hovered solid Chip. /// @group chip -$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default; +$kendo-chip-solid-hover-bg: k-color( base-subtle-hover ) !default; /// The base text color of the hovered solid Chip. /// @group chip $kendo-chip-solid-hover-text: null !default; @@ -146,23 +146,23 @@ $kendo-chip-solid-selected-text: null !default; /// The base background color of the outline Chip. /// @group chip -$kendo-chip-outline-bg: $kendo-component-bg !default; +$kendo-chip-outline-bg: k-color( surface-alt ) !default; /// The base text color of the outline Chip. /// @group chip -$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default; +$kendo-chip-outline-text: k-color( base-on-surface ) !default; /// The base border color of the outline Chip. /// @group chip $kendo-chip-outline-border: $kendo-chip-outline-text !default; /// The base shadow of the outline Chip. /// @group chip -$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default; +$kendo-chip-outline-shadow: 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The base background color of the hovered outline Chip. /// @group chip $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default; /// The base text color of the hovered outline Chip. /// @group chip -$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default; +$kendo-chip-outline-hover-text: k-color( base ) !default; /// The base background color of the selected outline Chip. /// @group chip diff --git a/packages/default/scss/color-preview/_variables.scss b/packages/default/scss/color-preview/_variables.scss index 7c3ff364c44..c5589078ddf 100644 --- a/packages/default/scss/color-preview/_variables.scss +++ b/packages/default/scss/color-preview/_variables.scss @@ -6,11 +6,11 @@ $kendo-color-preview-border-radius: k-border-radius(md)!default; $kendo-color-preview-border-width: 1px !default; $kendo-color-preview-bg: null !default; $kendo-color-preview-text: null !default; -$kendo-color-preview-border: $kendo-component-border !default; -$kendo-color-preview-hover-border: $kendo-hover-border !default; +$kendo-color-preview-border: k-color( border ) !default; +$kendo-color-preview-hover-border: k-color( border ) !default; $kendo-color-preview-no-color-bg: $kendo-color-white !default; -$kendo-color-preview-no-color-text: $kendo-color-error !default; +$kendo-color-preview-no-color-text: k-color( error ) !default; $kendo-color-preview-no-color-border: null !default; $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default; diff --git a/packages/default/scss/coloreditor/_variables.scss b/packages/default/scss/coloreditor/_variables.scss index 292c2216948..12bc38de018 100644 --- a/packages/default/scss/coloreditor/_variables.scss +++ b/packages/default/scss/coloreditor/_variables.scss @@ -35,13 +35,13 @@ $kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default; $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ColorEditor. /// @group color-editor -$kendo-color-editor-text: $kendo-component-text !default; +$kendo-color-editor-text: k-color( on-app-surface ) !default; /// The background color of the ColorEditor. /// @group color-editor -$kendo-color-editor-bg: $kendo-component-bg !default; +$kendo-color-editor-bg: k-color( surface-alt ) !default; /// The border color of the ColorEditor. /// @group color-editor -$kendo-color-editor-border: $kendo-component-border !default; +$kendo-color-editor-border: k-color( border ) !default; /// The border color of the focused ColorEditor. /// @group color-editor diff --git a/packages/default/scss/colorgradient/_variables.scss b/packages/default/scss/colorgradient/_variables.scss index eeb2655251a..b731e830ed7 100644 --- a/packages/default/scss/colorgradient/_variables.scss +++ b/packages/default/scss/colorgradient/_variables.scss @@ -36,13 +36,13 @@ $kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default; $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ColorGradient. /// @group color-gradient -$kendo-color-gradient-text: $kendo-component-text !default; +$kendo-color-gradient-text: k-color( on-app-surface ) !default; /// The background color of the ColorGradient. /// @group color-gradient -$kendo-color-gradient-bg: $kendo-component-bg !default; +$kendo-color-gradient-bg: k-color( surface-alt ) !default; /// The border color of the ColorGradient. /// @group color-gradient -$kendo-color-gradient-border: $kendo-component-border !default; +$kendo-color-gradient-border: k-color( border ) !default; /// The vertical padding of the small ColorGradient. /// @group color-gradient @@ -200,7 +200,7 @@ $kendo-color-gradient-input-gap: k-spacing(2) !default; $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default; /// The text color of the ColorGradient input labels. /// @group color-gradient -$kendo-color-gradient-input-label-text: $kendo-subtle-text !default; +$kendo-color-gradient-input-label-text: k-color( subtle ) !default; /// The width of the small ColorGradient input. /// @group color-gradient diff --git a/packages/default/scss/core/_index.scss b/packages/default/scss/core/_index.scss index ca2485244f7..c505073d134 100644 --- a/packages/default/scss/core/_index.scss +++ b/packages/default/scss/core/_index.scss @@ -4,6 +4,4 @@ // Variables @forward "../_variables.scss"; -// Color System Backward Compatibility -@forward "./color-system/_swatch-legacy.scss"; diff --git a/packages/default/scss/core/color-system/_swatch-legacy.scss b/packages/default/scss/core/color-system/_swatch-legacy.scss deleted file mode 100644 index 5492fbf79d7..00000000000 --- a/packages/default/scss/core/color-system/_swatch-legacy.scss +++ /dev/null @@ -1,222 +0,0 @@ -@use "@progress/kendo-theme-core/scss/index.scss" as *; -@use "../functions/index.import.scss" as *; - -// Primary colors -$kendo-color-primary: if($kendo-enable-color-system, k-color( primary ), #ff6358 ) !default; -$kendo-color-primary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-primary, 2)) !default; -$kendo-color-primary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-primary, 2)) !default; -$kendo-color-primary-contrast: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy($kendo-color-primary) ) !default; - -// Secondary colors -$kendo-color-secondary: if($kendo-enable-color-system, k-color( secondary ), #666666 ) !default; -$kendo-color-secondary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-secondary, 2)) !default; -$kendo-color-secondary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-secondary, 2)) !default; -$kendo-color-secondary-contrast: if($kendo-enable-color-system, k-color( on-secondary ), k-contrast-legacy($kendo-color-secondary) ) !default; - -// Tertiary colors -$kendo-color-tertiary: if($kendo-enable-color-system, k-color( tertiary ), #03a9f4 ) !default; -$kendo-color-tertiary-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-tertiary, 2)) !default; -$kendo-color-tertiary-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-tertiary, 2)) !default; -$kendo-color-tertiary-contrast: if($kendo-enable-color-system, k-color( on-tertiary ), k-contrast-legacy($kendo-color-tertiary) ) !default; - -// Info colors -$kendo-color-info: if($kendo-enable-color-system, k-color( info ), #0058e9 ) !default; -$kendo-color-info-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-info, 2)) !default; -$kendo-color-info-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-info, 2)) !default; - -// Success colors -$kendo-color-success: if($kendo-enable-color-system, k-color( success ), #37b400 ) !default; -$kendo-color-success-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-success, 2)) !default; -$kendo-color-success-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-success, 2)) !default; - -// Warning colors -$kendo-color-warning: if($kendo-enable-color-system, k-color( warning ), #ffc000 ) !default; -$kendo-color-warning-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-warning, 2)) !default; -$kendo-color-warning-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-warning, 2)) !default; - -// Error colors -$kendo-color-error: if($kendo-enable-color-system, k-color( error ), #f31700 ) !default; -$kendo-color-error-lighter: if($kendo-enable-color-system, null, k-color-tint($kendo-color-error, 2)) !default; -$kendo-color-error-darker: if($kendo-enable-color-system, null, k-color-shade($kendo-color-error, 2)) !default; - - -$kendo-color-dark: if($kendo-enable-color-system, k-color( dark ), #424242 ) !default; - -// Light colors -$kendo-color-light: if($kendo-enable-color-system, k-color( light ), #ebebeb ) !default; - -// Inverse colors -$kendo-color-inverse: if($kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark) !default; - -// Body styles -$kendo-body-bg: if($kendo-enable-color-system, k-color( app-surface ), #ffffff ) !default; -$kendo-body-text: if($kendo-enable-color-system, k-color( on-app-surface ), #424242 ) !default; - -// App styles -$kendo-app-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade($kendo-body-bg, 0.25) ) !default; -$kendo-app-text: $kendo-body-text !default; -$kendo-app-border: if($kendo-enable-color-system, k-color( border ), rgba(#000000, 0.08) ) !default; - -// Component styles -$kendo-component-bg: if($kendo-enable-color-system, k-color( surface-alt ), $kendo-body-bg ) !default; -$kendo-component-text: $kendo-body-text !default; -$kendo-component-border: if($kendo-enable-color-system, $kendo-app-border, rgba(if($kendo-is-dark-theme, $kendo-color-white, #000000), 0.08) ) !default; - -$kendo-base-bg: if($kendo-enable-color-system, k-color( surface ), #fafafa ) !default; -$kendo-base-text: $kendo-body-text !default; -$kendo-base-border: $kendo-app-border !default; -$kendo-base-gradient: if($kendo-enable-color-system, null, (rgba(black, 0), rgba(black, 0.02)) ) !default; - -// States styles -$kendo-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-base-bg, 0.5) ) !default; -$kendo-hover-text: $kendo-base-text !default; -$kendo-hover-border: $kendo-base-border !default; -$kendo-hover-gradient: $kendo-base-gradient !default; - -$kendo-selected-bg: $kendo-color-primary !default; -$kendo-selected-text: $kendo-color-primary-contrast !default; -$kendo-selected-border: $kendo-base-border !default; -$kendo-selected-gradient: $kendo-base-gradient !default; - -$kendo-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade($kendo-selected-bg, 0.5) ) !default; -$kendo-selected-hover-text: $kendo-selected-text !default; -$kendo-selected-hover-border: $kendo-base-border !default; -$kendo-selected-hover-gradient: $kendo-base-gradient !default; - -$kendo-component-header-bg: $kendo-base-bg !default; -$kendo-component-header-text: $kendo-base-text !default; -$kendo-component-header-border: $kendo-base-border !default; -$kendo-component-header-gradient: null !default; - -$kendo-focus-outline: null !default; - -$kendo-subtle-text: if($kendo-enable-color-system, k-color( subtle ), #666666 ) !default; - -// Link -$kendo-link-text: $kendo-color-primary !default; -$kendo-link-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; - -// Validator -$kendo-invalid-bg: null !default; -$kendo-invalid-text: $kendo-color-error !default; -$kendo-invalid-border: $kendo-color-error !default; -$kendo-invalid-shadow: null !default; - -$kendo-valid-bg: null !default; -$kendo-valid-text: $kendo-color-success !default; -$kendo-valid-border: $kendo-color-success !default; -$kendo-valid-shadow: null !default; - -// Disabled Styling - -/// The background color of disabled items. -$kendo-disabled-bg: null !default; -/// The text color of disabled items. -$kendo-disabled-text: null !default; -/// The border color of disabled items. -$kendo-disabled-border: null !default; -/// The opacity of disabled items. -$kendo-disabled-opacity: .6 !default; -/// The filter of disabled items. -$kendo-disabled-filter: grayscale(.1) !default; - -$kendo-disabled-styling: ( - bg: $kendo-disabled-bg, - color: $kendo-disabled-text, - border: $kendo-disabled-border, - opacity: $kendo-disabled-opacity, - filter: $kendo-disabled-filter -) !default; - - -$kendo-palettes: () !default; - -$kendo-theme-colors: ( - "primary": $kendo-color-primary, - "secondary": $kendo-color-secondary, - "tertiary": $kendo-color-tertiary, - "info": $kendo-color-info, - "success": $kendo-color-success, - "warning": $kendo-color-warning, - "error": $kendo-color-error, - "dark": $kendo-color-dark, - "light": $kendo-color-light, - "inverse": $kendo-color-inverse, -) !default; - -@forward "@progress/kendo-theme-core/scss/color-system/_swatch-legacy.scss" with ( - $kendo-color-primary: $kendo-color-primary, - $kendo-color-primary-lighter: $kendo-color-primary-lighter, - $kendo-color-primary-darker: $kendo-color-primary-darker, - $kendo-color-primary-contrast: $kendo-color-primary-contrast, - $kendo-color-secondary: $kendo-color-secondary, - $kendo-color-secondary-lighter: $kendo-color-secondary-lighter, - $kendo-color-secondary-darker: $kendo-color-secondary-darker, - $kendo-color-secondary-contrast: $kendo-color-secondary-contrast, - $kendo-color-tertiary: $kendo-color-tertiary, - $kendo-color-tertiary-lighter: $kendo-color-tertiary-lighter, - $kendo-color-tertiary-darker: $kendo-color-tertiary-darker, - $kendo-color-tertiary-contrast: $kendo-color-tertiary-contrast, - $kendo-color-info: $kendo-color-info, - $kendo-color-info-lighter: $kendo-color-info-lighter, - $kendo-color-info-darker: $kendo-color-info-darker, - $kendo-color-success: $kendo-color-success, - $kendo-color-success-lighter: $kendo-color-success-lighter, - $kendo-color-success-darker: $kendo-color-success-darker, - $kendo-color-warning: $kendo-color-warning, - $kendo-color-warning-lighter: $kendo-color-warning-lighter, - $kendo-color-warning-darker: $kendo-color-warning-darker, - $kendo-color-error: $kendo-color-error, - $kendo-color-error-lighter: $kendo-color-error-lighter, - $kendo-color-error-darker: $kendo-color-error-darker, - $kendo-color-dark: $kendo-color-dark, - $kendo-color-light: $kendo-color-light, - $kendo-color-inverse: $kendo-color-inverse, - $kendo-body-bg: $kendo-body-bg, - $kendo-body-text: $kendo-body-text, - $kendo-app-bg: $kendo-app-bg, - $kendo-app-text: $kendo-app-text, - $kendo-app-border: $kendo-app-border, - $kendo-component-bg: $kendo-component-bg, - $kendo-component-text: $kendo-component-text, - $kendo-component-border: $kendo-component-border, - $kendo-base-bg: $kendo-base-bg, - $kendo-base-text: $kendo-base-text, - $kendo-base-border: $kendo-base-border, - $kendo-base-gradient: $kendo-base-gradient, - $kendo-hover-bg: $kendo-hover-bg, - $kendo-hover-text: $kendo-hover-text, - $kendo-hover-border: $kendo-hover-border, - $kendo-hover-gradient: $kendo-hover-gradient, - $kendo-selected-bg: $kendo-selected-bg, - $kendo-selected-text: $kendo-selected-text, - $kendo-selected-border: $kendo-selected-border, - $kendo-selected-gradient: $kendo-selected-gradient, - $kendo-selected-hover-bg: $kendo-selected-hover-bg, - $kendo-selected-hover-text: $kendo-selected-hover-text, - $kendo-selected-hover-border: $kendo-selected-hover-border, - $kendo-selected-hover-gradient: $kendo-selected-hover-gradient, - $kendo-component-header-bg: $kendo-component-header-bg, - $kendo-component-header-text: $kendo-component-header-text, - $kendo-component-header-border: $kendo-component-header-border, - $kendo-component-header-gradient: $kendo-component-header-gradient, - $kendo-focus-outline: $kendo-focus-outline, - $kendo-subtle-text: $kendo-subtle-text, - $kendo-link-text: $kendo-link-text, - $kendo-link-hover-text: $kendo-link-hover-text, - $kendo-invalid-bg: $kendo-invalid-bg, - $kendo-invalid-text: $kendo-invalid-text, - $kendo-invalid-border: $kendo-invalid-border, - $kendo-invalid-shadow: $kendo-invalid-shadow, - $kendo-valid-bg: $kendo-valid-bg, - $kendo-valid-text: $kendo-valid-text, - $kendo-valid-border: $kendo-valid-border, - $kendo-valid-shadow: $kendo-valid-shadow, - $kendo-disabled-bg: $kendo-disabled-bg, - $kendo-disabled-text: $kendo-disabled-text, - $kendo-disabled-border: $kendo-disabled-border, - $kendo-disabled-opacity: $kendo-disabled-opacity, - $kendo-disabled-filter: $kendo-disabled-filter, - $kendo-disabled-styling: $kendo-disabled-styling, - $kendo-theme-colors: $kendo-theme-colors -); diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index 424230d48a4..c7972454dd1 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/scss/dataviz/_variables.scss @@ -6,51 +6,51 @@ /// The first base series color and its light and dark shades. /// @group charts -$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), #ff6358) !default; -$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix(black, $kendo-series-a, 25%)) !default; -$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix(black, $kendo-series-a, 50%)) !default; -$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix(white, $kendo-series-a, 25%)) !default; -$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix(white, $kendo-series-a, 50%)) !default; +$kendo-series-a: k-color( series-a ) !default; +$kendo-series-a-dark: k-color( series-a-bold ) !default; +$kendo-series-a-darker: k-color( series-a-bolder ) !default; +$kendo-series-a-light: k-color( series-a-subtle ) !default; +$kendo-series-a-lighter: k-color( series-a-subtler ) !default; /// The second base series color and its light and dark shades. /// @group charts -$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), #ffe162) !default; -$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix(black, $kendo-series-b, 25%)) !default; -$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix(black, $kendo-series-b, 50%)) !default; -$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix(white, $kendo-series-b, 25%)) !default; -$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix(white, $kendo-series-b, 50%)) !default; +$kendo-series-b: k-color( series-b ) !default; +$kendo-series-b-dark: k-color( series-b-bold ) !default; +$kendo-series-b-darker: k-color( series-b-bolder ) !default; +$kendo-series-b-light: k-color( series-b-subtle ) !default; +$kendo-series-b-lighter: k-color( series-b-subtler ) !default; /// The third base series color and its light and dark shades. /// @group charts -$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #4cd180) !default; -$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix(black, $kendo-series-c, 25%)) !default; -$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix(black, $kendo-series-c, 50%)) !default; -$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix(white, $kendo-series-c, 25%)) !default; -$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix(white, $kendo-series-c, 50%)) !default; +$kendo-series-c: k-color( series-c ) !default; +$kendo-series-c-dark: k-color( series-c-bold ) !default; +$kendo-series-c-darker: k-color( series-c-bolder ) !default; +$kendo-series-c-light: k-color( series-c-subtle ) !default; +$kendo-series-c-lighter: k-color( series-c-subtler ) !default; /// The fourth base series color and its light and dark shades. /// @group charts -$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), #4b5ffa) !default; -$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix(black, $kendo-series-d, 25%)) !default; -$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix(black, $kendo-series-d, 50%)) !default; -$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix(white, $kendo-series-d, 25%)) !default; -$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix(white, $kendo-series-d, 50%)) !default; +$kendo-series-d: k-color( series-d ) !default; +$kendo-series-d-dark: k-color( series-d-bold ) !default; +$kendo-series-d-darker: k-color( series-d-bolder ) !default; +$kendo-series-d-light: k-color( series-d-subtle ) !default; +$kendo-series-d-lighter: k-color( series-d-subtler ) !default; /// The fifth base series color and its light and dark shades. /// @group charts -$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), #ac58ff) !default; -$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix(black, $kendo-series-e, 25%)) !default; -$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix(black, $kendo-series-e, 50%)) !default; -$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix(white, $kendo-series-e, 25%)) !default; -$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix(white, $kendo-series-e, 50%)) !default; +$kendo-series-e: k-color( series-e ) !default; +$kendo-series-e-dark: k-color( series-e-bold ) !default; +$kendo-series-e-darker: k-color( series-e-bolder ) !default; +$kendo-series-e-light: k-color( series-e-subtle ) !default; +$kendo-series-e-lighter: k-color( series-e-subtler ) !default; /// The sixth base series color and its light and dark shades. /// @group charts -$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), #ff5892) !default; -$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix(black, $kendo-series-f, 25%)) !default; -$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix(black, $kendo-series-f, 50%)) !default; -$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix(white, $kendo-series-f, 25%)) !default; -$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix(white, $kendo-series-f, 50%)) !default; +$kendo-series-f: k-color( series-f ) !default; +$kendo-series-f-dark: k-color( series-f-bold ) !default; +$kendo-series-f-darker: k-color( series-f-bolder ) !default; +$kendo-series-f-light: k-color( series-f-subtle ) !default; +$kendo-series-f-lighter: k-color( series-f-subtler ) !default; /// The series colors in order: /// base, light, dark, lighter, darker @@ -98,13 +98,13 @@ $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) ! /// The color of the Chart grid lines (major). /// @group charts -$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default; +$kendo-chart-major-lines: color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The color of the Chart grid lines (minor). /// @group charts -$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default; +$kendo-chart-minor-lines: color-mix(in srgb, k-color( on-app-surface ) 4%, transparent) !default; -$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default; +$kendo-chart-inactive: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; $kendo-chart-area-opacity: .6 !default; $kendo-chart-area-inactive-opacity: .1 !default; $kendo-chart-line-inactive-opacity: .3 !default; @@ -114,24 +114,24 @@ $kendo-chart-tooltip-padding-y: k-spacing(0.5) !default; $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default; -$kendo-chart-bg: $kendo-component-bg !default; -$kendo-chart-text: $kendo-component-text !default; -$kendo-chart-border: $kendo-component-border !default; +$kendo-chart-bg: k-color( surface-alt ) !default; +$kendo-chart-text: k-color( on-app-surface ) !default; +$kendo-chart-border: k-color( border ) !default; -$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default; +$kendo-chart-crosshair-background: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default; -$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default; -$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default; +$kendo-chart-crosshair-shared-tooltip-background: k-color( base ) !default; +$kendo-chart-crosshair-shared-tooltip-border: color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; -$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default; -$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default; -$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default; +$kendo-chart-notes-background: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; +$kendo-chart-notes-border: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; +$kendo-chart-notes-lines: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; -$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default; +$kendo-chart-error-bars-background: color-mix(in srgb, k-color( on-app-surface ) 50%, transparent) !default; $kendo-chart-selection-handle-size: 22px !default; -$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default; -$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default; +$kendo-chart-selection-border-color: color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; +$kendo-chart-selection-shadow: inset 0 1px 7px color-mix(in srgb, k-color( on-app-surface ) 15%, transparent) !default; $kendo-chart-computed-title-height: 0px !default; @@ -144,7 +144,7 @@ $kendo-treemap-padding-x: k-spacing(1) !default; $kendo-treemap-padding-y: k-spacing(0.5) !default; // Chart Overlay -$kendo-chart-overlay-bg: $kendo-base-bg !default; +$kendo-chart-overlay-bg: k-color( surface ) !default; // No Data $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default; diff --git a/packages/default/scss/dialog/_variables.scss b/packages/default/scss/dialog/_variables.scss index 0c9e55f2168..7608701b2f2 100644 --- a/packages/default/scss/dialog/_variables.scss +++ b/packages/default/scss/dialog/_variables.scss @@ -6,10 +6,10 @@ /// The background color of the Dialog titlebar. /// @group dialog -$kendo-dialog-titlebar-bg: $kendo-component-header-bg !default; +$kendo-dialog-titlebar-bg: k-color( surface )!default; /// The text color of the Dialog titlebar. /// @group dialog -$kendo-dialog-titlebar-text: $kendo-component-header-text !default; +$kendo-dialog-titlebar-text: k-color( on-app-surface ) !default; /// The border color of the Dialog titlebar. /// @group dialog $kendo-dialog-titlebar-border: inherit !default; @@ -30,9 +30,9 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default; /// The theme colors map for the Dialog. /// @group dialog $kendo-dialog-theme-colors: ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) !default; @forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with ( diff --git a/packages/default/scss/dock-manager/_variables.scss b/packages/default/scss/dock-manager/_variables.scss index 5802b30b253..650a41de73c 100644 --- a/packages/default/scss/dock-manager/_variables.scss +++ b/packages/default/scss/dock-manager/_variables.scss @@ -8,7 +8,7 @@ $kendo-dock-manager-border-width: 1px !default; $kendo-dock-manager-border-style: solid !default; /// The color of the border around the DockManager component. /// @group dock-manager -$kendo-dock-manager-border: $kendo-base-border !default; +$kendo-dock-manager-border: k-color( border ) !default; /// The vertical padding of the pane header in the DockManager component. /// @group dock-manager @@ -24,7 +24,7 @@ $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width ! $kendo-dock-manager-pane-header-border-style: solid !default; /// The background color of the pane header in the DockManager component. /// @group dock-manager -$kendo-dock-manager-pane-header-bg: $kendo-component-header-bg !default; +$kendo-dock-manager-pane-header-bg: k-color( surface )!default; /// The vertical padding of the pane title in the DockManager component. /// @group dock-manager @@ -77,7 +77,7 @@ $kendo-dock-indicator-padding: k-spacing(1.5) !default; $kendo-dock-indicator-bg: #f5f5f5 !default; /// The text color of the dock indicator in the DockManager component. /// @group dock-manager -$kendo-dock-indicator-text: $kendo-color-primary !default; +$kendo-dock-indicator-text: k-color( primary ) !default; /// The outline width of the dock indicator in the DockManager component. /// @group dock-manager $kendo-dock-indicator-outline-width: 1px !default; @@ -93,7 +93,7 @@ $kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) dr /// The background color of the hovered dock indicator in the DockManager component. /// @group dock-manager -$kendo-dock-indicator-hover-bg: $kendo-color-primary !default; +$kendo-dock-indicator-hover-bg: k-color( primary ) !default; /// The text color of the hovered dock indicator in the DockManager component. /// @group dock-manager $kendo-dock-indicator-hover-text: $kendo-color-white !default; @@ -109,10 +109,10 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default; $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default; /// The background color of the dropping area in the DockManager component. /// @group dock-manager -$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default; +$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color( primary ) 16%, transparent) !default; /// The border color of the dropping area in the DockManager component. /// @group dock-manager -$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default; +$kendo-dock-manager-dock-preview-border: k-color( primary ) !default; @forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with ( $kendo-dock-manager-border-width: $kendo-dock-manager-border-width, diff --git a/packages/default/scss/draggable/_variables.scss b/packages/default/scss/draggable/_variables.scss index 5b094c7184c..d2a4f0d7ca7 100644 --- a/packages/default/scss/draggable/_variables.scss +++ b/packages/default/scss/draggable/_variables.scss @@ -10,9 +10,9 @@ $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default; $kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default; $kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default; -$kendo-drag-hint-bg: $kendo-base-bg !default; -$kendo-drag-hint-text: $kendo-base-text !default; -$kendo-drag-hint-border: $kendo-base-border !default; +$kendo-drag-hint-bg: k-color( surface ) !default; +$kendo-drag-hint-text: k-color( on-app-surface ) !default; +$kendo-drag-hint-border: k-color( border ) !default; $kendo-drag-hint-gradient: null !default; $kendo-drag-hint-shadow: null !default; @@ -27,7 +27,7 @@ $kendo-drop-hint-line-h-height: 1px !default; $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default; $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default; -$kendo-drop-hint-bg: $kendo-color-primary !default; +$kendo-drop-hint-bg: k-color( primary ) !default; @forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with ( $kendo-drag-hint-padding-x: $kendo-drag-hint-padding-x, diff --git a/packages/default/scss/drawer/_variables.scss b/packages/default/scss/drawer/_variables.scss index 76a434a6ebe..2218ba49276 100644 --- a/packages/default/scss/drawer/_variables.scss +++ b/packages/default/scss/drawer/_variables.scss @@ -6,13 +6,13 @@ /// The background color of the Drawer. /// @group drawer -$kendo-drawer-bg: $kendo-component-bg !default; +$kendo-drawer-bg: k-color( surface-alt ) !default; /// The text color of the Drawer. /// @group drawer -$kendo-drawer-text: $kendo-component-text !default; +$kendo-drawer-text: k-color( on-app-surface ) !default; /// The border color of the Drawer. /// @group drawer -$kendo-drawer-border: $kendo-component-border !default; +$kendo-drawer-border: k-color( border ) !default; /// The border width of the Drawer. /// @group drawer $kendo-drawer-border-width: 1px !default; @@ -85,10 +85,10 @@ $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$ /// The background color of the hovered Drawer item. /// @group drawer -$kendo-drawer-hover-bg: $kendo-hover-bg !default; +$kendo-drawer-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered Drawer item. /// @group drawer -$kendo-drawer-hover-text: $kendo-hover-text !default; +$kendo-drawer-hover-text: k-color( on-app-surface ) !default; /// The background color of the focused Drawer item. /// @group drawer @@ -99,17 +99,17 @@ $kendo-drawer-focus-shadow: $kendo-list-item-focus-shadow !default; /// The background color of the selected Drawer item. /// @group drawer -$kendo-drawer-selected-bg: $kendo-selected-bg !default; +$kendo-drawer-selected-bg: k-color( primary ) !default; /// The text color of the selected Drawer item. /// @group drawer -$kendo-drawer-selected-text: $kendo-selected-text !default; +$kendo-drawer-selected-text: k-color( on-primary ) !default; /// The background color of the selected and hovered Drawer item. /// @group drawer -$kendo-drawer-selected-hover-bg: $kendo-selected-hover-bg !default; +$kendo-drawer-selected-hover-bg: k-color( primary-hover ) !default; /// The text color of the selected and hovered Drawer item. /// @group drawer -$kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default; +$kendo-drawer-selected-hover-text: k-color( on-primary ) !default; @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with ( $kendo-drawer-bg: $kendo-drawer-bg, diff --git a/packages/default/scss/dropzone/_variables.scss b/packages/default/scss/dropzone/_variables.scss index e9e876d0c65..6141c70045b 100644 --- a/packages/default/scss/dropzone/_variables.scss +++ b/packages/default/scss/dropzone/_variables.scss @@ -28,23 +28,23 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the DropZone. /// @group dropzone -$kendo-dropzone-bg: $kendo-base-bg !default; +$kendo-dropzone-bg: k-color( surface ) !default; /// The text color of the DropZone. /// @group dropzone -$kendo-dropzone-text: $kendo-base-text !default; +$kendo-dropzone-text: k-color( on-app-surface ) !default; /// The border color of the DropZone. /// @group dropzone -$kendo-dropzone-border: $kendo-base-border !default; +$kendo-dropzone-border: k-color( border ) !default; /// The spacing below the DropZone icon. /// @group dropzone $kendo-dropzone-icon-spacing: k-spacing(6) !default; /// The text color of the DropZone icon. /// @group dropzone -$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 4 )) !default; +$kendo-dropzone-icon-text: k-color( subtle ) !default; /// The text color of the hovered DropZone icon. /// @group dropzone -$kendo-dropzone-icon-hover-text: $kendo-color-primary !default; +$kendo-dropzone-icon-hover-text: k-color( primary ) !default; /// The font size of the DropZone hint. /// @group dropzone @@ -64,7 +64,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default; $kendo-dropzone-note-spacing: null !default; /// The text color of the DropZone note. /// @group dropzone -$kendo-dropzone-note-text: $kendo-subtle-text !default; +$kendo-dropzone-note-text: k-color( subtle ) !default; @forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with ( $kendo-dropzone-padding-x: $kendo-dropzone-padding-x, diff --git a/packages/default/scss/editor/_variables.scss b/packages/default/scss/editor/_variables.scss index b22fc526a2b..c2b22452dfc 100644 --- a/packages/default/scss/editor/_variables.scss +++ b/packages/default/scss/editor/_variables.scss @@ -27,14 +27,14 @@ $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default; /// The selected text color of the Editor. /// @group editor -$kendo-editor-selected-text: $kendo-color-primary-contrast !default; +$kendo-editor-selected-text: k-color( on-primary ) !default; /// The selected background color of the Editor. /// @group editor -$kendo-editor-selected-bg: $kendo-color-primary !default; +$kendo-editor-selected-bg: k-color( primary ) !default; /// The highlighted background color of the Editor. /// @group editor -$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) !default; +$kendo-editor-highlighted-bg: k-color( primary-subtle ) !default; /// The horizontal margin of the Editor's export tool icon. /// @group editor diff --git a/packages/default/scss/expansion-panel/_variables.scss b/packages/default/scss/expansion-panel/_variables.scss index a20de4a7694..0a27249c86a 100644 --- a/packages/default/scss/expansion-panel/_variables.scss +++ b/packages/default/scss/expansion-panel/_variables.scss @@ -21,13 +21,13 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ExpansionPanel. /// @group expander -$kendo-expander-text: $kendo-component-text !default; +$kendo-expander-text: k-color( on-app-surface ) !default; /// The background color of the ExpansionPanel. /// @group expander -$kendo-expander-bg: $kendo-component-bg !default; +$kendo-expander-bg: k-color( surface-alt ) !default; /// The border color of the ExpansionPanel. /// @group expander -$kendo-expander-border: $kendo-component-border !default; +$kendo-expander-border: k-color( border ) !default; /// The box shadow of the focused ExpansionPanel. /// @group expander @@ -62,11 +62,11 @@ $kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default; /// The text color of the ExpansionPanel title. /// @group expander -$kendo-expander-title-text: $kendo-color-primary !default; +$kendo-expander-title-text: k-color( primary ) !default; /// The text color of the ExpansionPanel sub-title. /// @group expander -$kendo-expander-header-sub-title-text: $kendo-subtle-text !default; +$kendo-expander-header-sub-title-text: k-color( subtle ) !default; /// The horizontal margin of the ExpansionPanel indicator. /// @group expander diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss index 65747279194..973b1e4c718 100644 --- a/packages/default/scss/fab/_variables.scss +++ b/packages/default/scss/fab/_variables.scss @@ -97,7 +97,18 @@ $kendo-fab-item-icon-border-radius: 50% !default; /// The theme colors map for the FAB. /// @group floating-action-button -$kendo-fab-theme-colors: $kendo-theme-colors !default; +$kendo-fab-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) !default; /// The size map for the FAB. /// @group floating-action-button @@ -134,13 +145,13 @@ $kendo-fab-outline-width: k-spacing(0.5) !default; /// The base text color of the FAB item. /// @group floating-action-button -$kendo-fab-item-text: $kendo-component-text !default; +$kendo-fab-item-text: k-color( on-app-surface ) !default; /// The base background color of the FAB item. /// @group floating-action-button -$kendo-fab-item-bg: $kendo-component-bg !default; +$kendo-fab-item-bg: k-color( surface-alt ) !default; /// The base border color of the FAB item. /// @group floating-action-button -$kendo-fab-item-border: $kendo-component-border !default; +$kendo-fab-item-border: k-color( border ) !default; /// The base text color of the FAB item icon. /// @group floating-action-button diff --git a/packages/default/scss/filemanager/_variables.scss b/packages/default/scss/filemanager/_variables.scss index 02e54158be1..df44c6804c0 100644 --- a/packages/default/scss/filemanager/_variables.scss +++ b/packages/default/scss/filemanager/_variables.scss @@ -21,13 +21,13 @@ $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default; $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the FileManager. /// @group file-manager -$kendo-file-manager-bg: $kendo-component-bg !default; +$kendo-file-manager-bg: k-color( surface-alt ) !default; /// The text color of the FileManager. /// @group file-manager -$kendo-file-manager-text: $kendo-component-text !default; +$kendo-file-manager-text: k-color( on-app-surface ) !default; /// The border color of the FileManager. /// @group file-manager -$kendo-file-manager-border: $kendo-component-border !default; +$kendo-file-manager-border: k-color( border ) !default; /// The border width of the FileManager Toolbar. /// @group file-manager @@ -123,7 +123,7 @@ $kendo-file-manager-listview-item-border: null !default; $kendo-file-manager-listview-item-icon-bg: null !default; /// The text color of the FileManager ListView item icon. /// @group file-manager -$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default; +$kendo-file-manager-listview-item-icon-text: k-color( subtle ) !default; /// The border color of the FileManager ListView item icon. /// @group file-manager $kendo-file-manager-listview-item-icon-border: null !default; @@ -180,7 +180,7 @@ $kendo-file-manager-preview-border: null !default; $kendo-file-manager-preview-icon-bg: null !default; /// The text color of the FileManager preview icon. /// @group file-manager -$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default; +$kendo-file-manager-preview-icon-text: k-color( subtle ) !default; /// The border color of the FileManager preview icon. /// @group file-manager $kendo-file-manager-preview-icon-border: null !default; diff --git a/packages/default/scss/filter/_variables.scss b/packages/default/scss/filter/_variables.scss index 43fbff6bcd5..cb81841ad5a 100644 --- a/packages/default/scss/filter/_variables.scss +++ b/packages/default/scss/filter/_variables.scss @@ -22,10 +22,10 @@ $kendo-filter-operator-dropdown-width: 15em !default; /// The text color of the Filter preview field. /// @group filter -$kendo-filter-preview-field-text: $kendo-color-primary !default; +$kendo-filter-preview-field-text: k-color( primary ) !default; /// The text color of the Filter preview operator. /// @group filter -$kendo-filter-preview-operator-text: $kendo-subtle-text !default; +$kendo-filter-preview-operator-text: k-color( subtle ) !default; /// The box shadow of the focused Filter toolbar. /// @group filter diff --git a/packages/default/scss/forms/_variables.scss b/packages/default/scss/forms/_variables.scss index 8f4ea8000c0..965dc674338 100644 --- a/packages/default/scss/forms/_variables.scss +++ b/packages/default/scss/forms/_variables.scss @@ -48,7 +48,7 @@ $kendo-form-legend-border-width: 0 0 2px !default; $kendo-form-legend-border-style: solid !default; /// The border color of the Form legend. /// @group form -$kendo-form-legend-border-color: $kendo-component-border !default; +$kendo-form-legend-border-color: k-color( border ) !default; /// The width of the Form legend. /// @group form $kendo-form-legend-width: 100% !default; @@ -125,7 +125,7 @@ $kendo-inline-form-field-padding-y: calc( #{k-spacing(1)} + #{$kendo-input-borde /// The invalid text color of the Form. /// @group form -$kendo-forms-invalid-color: $kendo-color-error !default; +$kendo-forms-invalid-color: k-color( error ) !default; /// The horizontal margin of the optional label in the Form. @@ -175,7 +175,7 @@ $kendo-form-field-info-margin: k-spacing(2) !default; $kendo-fieldset-legend-bg: null !default; /// The text color of the Form legend. /// @group form -$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default; +$kendo-fieldset-legend-text: k-color( on-app-surface ) !default; /// The border color of the Form legend. /// @group form $kendo-fieldset-legend-border: null !default; diff --git a/packages/default/scss/gantt/_variables.scss b/packages/default/scss/gantt/_variables.scss index 004eeac73df..e1d16a5d273 100644 --- a/packages/default/scss/gantt/_variables.scss +++ b/packages/default/scss/gantt/_variables.scss @@ -21,13 +21,13 @@ $kendo-gantt-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Gantt. /// @group gantt -$kendo-gantt-bg: $kendo-component-bg !default; +$kendo-gantt-bg: k-color( surface-alt ) !default; /// The text color of the Gantt. /// @group gantt -$kendo-gantt-text: $kendo-component-text !default; +$kendo-gantt-text: k-color( on-app-surface ) !default; /// The border color of the Gantt. /// @group gantt -$kendo-gantt-border: $kendo-component-border !default; +$kendo-gantt-border: k-color( border ) !default; /// The background color of the Gantt TreeList. /// @group gantt @@ -41,7 +41,7 @@ $kendo-gantt-treelist-border: null !default; /// The background color of the Gantt non-working days. /// @group gantt -$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default; +$kendo-gantt-nonwork-bg: color-mix(in srgb, k-color( on-base ) 3%, transparent) !default; /// The text color of the Gantt non-working days. /// @group gantt $kendo-gantt-nonwork-text: null !default; @@ -54,10 +54,10 @@ $kendo-gantt-nonwork-border: null !default; $kendo-gantt-line-size: 2px !default; /// The background fill color of the Gantt connecting lines. /// @group gantt -$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default; +$kendo-gantt-line-fill: k-color( on-base ) !default; /// The background fill of the selected Gantt connecting lines. /// @group gantt -$kendo-gantt-line-selected-fill: $kendo-color-primary !default; +$kendo-gantt-line-selected-fill: k-color( primary ) !default; /// The size of the Gantt task dot. /// @group gantt @@ -86,23 +86,23 @@ $kendo-gantt-milestone-bg: $kendo-gantt-text !default; $kendo-gantt-milestone-border: $kendo-gantt-border !default; /// The background color of the selected Gantt milestone. /// @group gantt -$kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default; +$kendo-gantt-milestone-selected-bg: k-color( primary ) !default; /// The border color of the selected Gantt milestone. /// @group gantt -$kendo-gantt-milestone-selected-border: $kendo-selected-border !default; +$kendo-gantt-milestone-selected-border: k-color( border ) !default; /// The background color of the Gantt summary. /// @group gantt -$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default; +$kendo-gantt-summary-bg: k-color( subtle ) !default; /// The background color of the Gantt summary progress. /// @group gantt -$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default; +$kendo-gantt-summary-progress-bg: k-color( on-base ) !default; /// The background color of the selected Gantt summary. /// @group gantt -$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default; +$kendo-gantt-summary-selected-bg: k-color( primary-subtle-active ) !default; /// The background color of the selected Gantt summary progress. /// @group gantt -$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default; +$kendo-gantt-summary-progress-selected-bg: k-color( primary ) !default; /// The border width of the Gantt task. /// @group gantt @@ -115,10 +115,10 @@ $kendo-gantt-task-padding-x: k-spacing(2) !default; $kendo-gantt-task-padding-y: k-spacing(1) !default; /// The background color of the Gantt task. /// @group gantt -$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default; +$kendo-gantt-task-bg: k-color( subtle ) !default; /// The text color of the Gantt task. /// @group gantt -$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default; +$kendo-gantt-task-text: k-color( base ) !default; /// The border color of the Gantt task. /// @group gantt $kendo-gantt-task-border: null !default; @@ -127,16 +127,16 @@ $kendo-gantt-task-border: null !default; $kendo-gantt-task-progress-bg: $kendo-gantt-text !default; /// The background color of selected the Gantt task. /// @group gantt -$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default; +$kendo-gantt-task-selected-bg: k-color( primary-subtle-active ) !default; /// The text color of the selected Gantt task. /// @group gantt -$kendo-gantt-task-selected-text: $kendo-selected-text !default; +$kendo-gantt-task-selected-text: k-color( on-primary ) !default; /// The border color of the selected Gantt task. /// @group gantt $kendo-gantt-task-selected-border: null !default; /// The background color of the selected Gantt task progress. /// @group gantt -$kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default; +$kendo-gantt-task-progress-selected-bg: k-color( primary ) !default; /// The padding of the Gantt task actions. /// @group gantt @@ -205,24 +205,24 @@ $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default; /// The background color of the Gantt planned Tooltip. /// @group gantt -$kendo-gantt-planned-bg: $kendo-color-primary !default; +$kendo-gantt-planned-bg: k-color( primary ) !default; /// The border color of the Gantt planned Tooltip. /// @group gantt $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default; /// The background color of the Gantt delayed task. /// @group gantt -$kendo-gantt-delayed-bg: $kendo-color-error !default; +$kendo-gantt-delayed-bg: k-color( error ) !default; /// The complement background color of the Gantt delayed task. /// @group gantt -$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default; +$kendo-gantt-delayed-bg-lighter: k-color( error-emphasis ) !default; /// The background color of the Gantt advanced task. /// @group gantt -$kendo-gantt-advanced-bg: $kendo-color-success !default; +$kendo-gantt-advanced-bg: k-color( success ) !default; /// The complement background color of the Gantt advanced task. /// @group gantt -$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default; +$kendo-gantt-advanced-bg-lighter: k-color( success-emphasis ) !default; /// The text color of the Gantt delayed task action. /// @group gantt @@ -242,10 +242,10 @@ $kendo-gantt-validation-tooltip-label-width: 50px !default; $kendo-gantt-validation-tooltip-border: #656565 !default; /// The border color of the valid Gantt validation Tooltip. /// @group gantt -$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default; +$kendo-gantt-validation-tooltip-valid-border: k-color( success ) !default; /// The border color of the invalid Gantt validation Tooltip. /// @group gantt -$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default; +$kendo-gantt-validation-tooltip-invalid-border: k-color( error )!default; /// The horizontal padding of the Gantt task Tooltip. /// @group gantt diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss index 75cc16bd71a..7e096e7ac73 100644 --- a/packages/default/scss/grid/_variables.scss +++ b/packages/default/scss/grid/_variables.scss @@ -230,12 +230,12 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default; /// @group grid $kendo-grid-selection-aggregates-font-weight: var( --kendo-font-weight-bold, normal ) !default; -$kendo-grid-grouping-row-bg: $kendo-base-bg !default; +$kendo-grid-grouping-row-bg: k-color( surface ) !default; $kendo-grid-grouping-row-text: $kendo-grid-text !default; $kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default; -$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default; -$kendo-grid-sorting-indicator-text: $kendo-color-primary !default; +$kendo-grid-sorted-bg: color-mix(in srgb, k-color( on-app-surface ) 3%, transparent) !default; +$kendo-grid-sorting-indicator-text: k-color( primary ) !default; $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default; $kendo-grid-sorting-index-height: $kendo-icon-size !default; $kendo-grid-sorting-index-spacing-y: calc( #{$kendo-icon-spacing} / 2 ) !default; @@ -249,12 +249,12 @@ $kendo-grid-command-cell-button-spacing: k-spacing(2) !default; $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default; // Must be a solid color -$kendo-grid-sticky-bg: $kendo-component-bg !default; +$kendo-grid-sticky-bg: k-color( surface-alt ) !default; $kendo-grid-sticky-text: $kendo-grid-text !default; $kendo-grid-sticky-border: rgba( black, .3 ) !default; // Must be a solid color -$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default; +$kendo-grid-sticky-alt-bg: k-color( base ) !default; $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default; $kendo-grid-sticky-header-text: $kendo-grid-header-text !default; @@ -263,12 +263,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default; $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default; $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default; -$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), color.mix($kendo-selected-bg, #ffffff, 25%)) !default; -$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default; +$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; +$kendo-grid-sticky-selected-alt-bg: color-mix(in srgb, k-color( primary ) 24%, transparent) !default; // Must be a solid color -$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default; -$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default; +$kendo-grid-sticky-hover-bg: k-color( base-hover ) !default; +$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color( primary ) 24%, transparent) !default; $kendo-grid-column-menu-width: 230px !default; $kendo-grid-column-menu-max-width: 320px !default; @@ -305,7 +305,7 @@ $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default; $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default; $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default; -$kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default; +$kendo-grid-column-menu-tabbed-bg: k-color( surface ) !default; $kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default; @@ -319,10 +319,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !default; /// The background color of the Grid row resize indicator. /// @group grid -$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default; +$kendo-grid-row-resizer-hover-bg: color-mix(in srgb, k-color( on-base ) 20%, transparent) !default; /// The background color of the active Grid row resize indicator. /// @group grid -$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default; +$kendo-grid-row-resizer-active-bg: k-color( primary ) !default; /// The height of the Grid row resize indicator. /// @group grid $kendo-grid-row-resizer-height: k-spacing(0.5) !default; diff --git a/packages/default/scss/imageeditor/_variables.scss b/packages/default/scss/imageeditor/_variables.scss index 71de73459b6..76530f30f1b 100644 --- a/packages/default/scss/imageeditor/_variables.scss +++ b/packages/default/scss/imageeditor/_variables.scss @@ -25,15 +25,15 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default; $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default; $kendo-image-editor-resize-handle-size: 15px !default; -$kendo-image-editor-bg: $kendo-component-bg !default; -$kendo-image-editor-text: $kendo-component-text !default; -$kendo-image-editor-border: $kendo-component-border !default; +$kendo-image-editor-bg: k-color( surface-alt ) !default; +$kendo-image-editor-text: k-color( on-app-surface ) !default; +$kendo-image-editor-border: k-color( border ) !default; $kendo-image-editor-content-bg: #c6c6c6 !default; $kendo-image-editor-content-text: null !default; $kendo-image-editor-content-border: null !default; -$kendo-image-editor-action-pane-bg: $kendo-base-bg !default; +$kendo-image-editor-action-pane-bg: k-color( surface ) !default; $kendo-image-editor-action-pane-text: null !default; $kendo-image-editor-action-pane-border: null !default; diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss index 250b82334fa..7a22e5f36b6 100644 --- a/packages/default/scss/input/_variables.scss +++ b/packages/default/scss/input/_variables.scss @@ -110,13 +110,13 @@ $kendo-input-sizes: ( /// The background color of the Input components. /// @group input -$kendo-input-bg: $kendo-component-bg !default; +$kendo-input-bg: k-color( surface-alt ) !default; /// The text color of the Input components. /// @group input -$kendo-input-text: $kendo-component-text !default; +$kendo-input-text: k-color( on-app-surface ) !default; /// The border color of the Input components. /// @group input -$kendo-input-border: $kendo-component-border !default; +$kendo-input-border: k-color( border ) !default; /// The shadow of the Input components. /// @group input $kendo-input-shadow: null !default; @@ -129,7 +129,7 @@ $kendo-input-hover-bg: null !default; $kendo-input-hover-text: null !default; /// The border color of the hovered Input components. /// @group input -$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default; +$kendo-input-hover-border: k-color( border-alt ) !default; /// The shadow of the hovered Input components. /// @group input $kendo-input-hover-shadow: null !default; @@ -145,7 +145,7 @@ $kendo-input-focus-text: null !default; $kendo-input-focus-border: $kendo-input-hover-border !default; /// The shadow of the focused Input components. /// @group input -$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-input-focus-border, .08 )) !default; +$kendo-input-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The background color of the selected Input components. /// @group input @@ -178,7 +178,7 @@ $kendo-input-outline-bg: null !default; $kendo-input-outline-text: $kendo-input-text !default; /// The border color of the outline Input components. /// @group input -$kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-button-text, .5)) !default; +$kendo-input-outline-border: color-mix(in srgb, k-color( on-base ) 50%, transparent) !default; /// The background color of the outline hovered Input components. /// @group input @@ -188,7 +188,7 @@ $kendo-input-outline-hover-bg: null !default; $kendo-input-outline-hover-text: null !default; /// The border color of the outline hovered Input components. /// @group input -$kendo-input-outline-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 80%, transparent), rgba( $kendo-button-text, .8)) !default; +$kendo-input-outline-hover-border: color-mix(in srgb, k-color( on-base ) 80%, transparent) !default; /// The background color of the outline focused Input components. /// @group input @@ -238,7 +238,7 @@ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default; /// The text color of the Input placeholder. /// @group input -$kendo-input-placeholder-text: $kendo-subtle-text !default; +$kendo-input-placeholder-text: k-color( subtle ) !default; /// The opacity of the Input placeholder. /// @group input $kendo-input-placeholder-opacity: 1 !default; @@ -285,17 +285,17 @@ $kendo-input-separator-opacity: .5 !default; /// The text color of the Input prefix. /// @group input -$kendo-input-prefix-text: $kendo-subtle-text !default; +$kendo-input-prefix-text: k-color( subtle ) !default; /// The text color of the Input suffix. /// @group input -$kendo-input-suffix-text: $kendo-subtle-text !default; +$kendo-input-suffix-text: k-color( subtle ) !default; /// The border color of the invalid Input components. /// @group input -$kendo-input-invalid-border: $kendo-invalid-border !default; +$kendo-input-invalid-border: k-color( error ) !default; /// The shadow of the invalid Input components. /// @group input -$kendo-input-invalid-shadow: $kendo-invalid-shadow !default; +$kendo-input-invalid-shadow: null !default; /// The background color of the Picker components. /// @group picker @@ -369,14 +369,14 @@ $kendo-picker-outline-bg: null !default; $kendo-picker-outline-text: $kendo-button-text !default; /// The border color of the outline Picker components. /// @group picker -$kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) !default; +$kendo-picker-outline-border: color-mix(in srgb, k-color( on-base ) 50%, transparent) !default; /// The background color of the outline hovered Picker components. /// @group picker $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default; /// The text color of the outline hovered Picker components. /// @group picker -$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default; +$kendo-picker-outline-hover-text: k-color( base ) !default; /// The border color of the outline hovered Picker components. /// @group picker $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default; @@ -416,13 +416,13 @@ $kendo-picker-flat-border: $kendo-button-border !default; /// The background color of the flat hovered Picker components. /// @group picker -$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 4%, transparent), rgba( $kendo-button-text, .04 )) !default; +$kendo-picker-flat-hover-bg: color-mix(in srgb, k-color( on-base ) 4%, transparent) !default; /// The text color of the flat hovered Picker components. /// @group picker $kendo-picker-flat-hover-text: null !default; /// The border color of the flat hovered Picker components. /// @group picker -$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default; +$kendo-picker-flat-hover-border: k-color( border-alt ) !default; /// The background color of the flat focused Picker components. /// @group picker diff --git a/packages/default/scss/list/_variables.scss b/packages/default/scss/list/_variables.scss index 4c3c3664dcf..1f8b086f02b 100644 --- a/packages/default/scss/list/_variables.scss +++ b/packages/default/scss/list/_variables.scss @@ -180,13 +180,13 @@ $kendo-list-sizes: ( /// The background color of the List component. /// @group list -$kendo-list-bg: $kendo-component-bg !default; +$kendo-list-bg: k-color( surface-alt ) !default; /// The text color of the List component. /// @group list -$kendo-list-text: $kendo-component-text !default; +$kendo-list-text: k-color( on-app-surface ) !default; /// The border color of the List component. /// @group list -$kendo-list-border: $kendo-component-border !default; +$kendo-list-border: k-color( border ) !default; /// The background color of the List header. @@ -212,10 +212,10 @@ $kendo-list-item-text: null !default; /// The background color of the hovered List items. /// @group list -$kendo-list-item-hover-bg: $kendo-hover-bg !default; +$kendo-list-item-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered List items. /// @group list -$kendo-list-item-hover-text: $kendo-hover-text !default; +$kendo-list-item-hover-text: k-color( on-app-surface ) !default; /// The background color of the focused List items. /// @group list @@ -229,10 +229,10 @@ $kendo-list-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default; /// The background color of the selected List items. /// @group list -$kendo-list-item-selected-bg: $kendo-selected-bg !default; +$kendo-list-item-selected-bg: k-color( primary ) !default; /// The text color of the selected List items. /// @group list -$kendo-list-item-selected-text: $kendo-selected-text !default; +$kendo-list-item-selected-text: k-color( on-primary ) !default; /// The background color of the List group items. /// @group list @@ -249,7 +249,7 @@ $kendo-list-group-item-shadow: null !default; /// The color of the 'Option Label' text. /// @group list -$kendo-list-option-label-text: $kendo-subtle-text !default; +$kendo-list-option-label-text: k-color( subtle ) !default; @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with ( $kendo-list-font-family: $kendo-list-font-family, diff --git a/packages/default/scss/listbox/_variables.scss b/packages/default/scss/listbox/_variables.scss index 269fddfc927..fac2722cbb1 100644 --- a/packages/default/scss/listbox/_variables.scss +++ b/packages/default/scss/listbox/_variables.scss @@ -29,13 +29,13 @@ $kendo-listbox-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ListBox. /// @group listbox -$kendo-listbox-text: $kendo-component-text !default; +$kendo-listbox-text: k-color( on-app-surface ) !default; /// The background color of the ListBox. /// @group listbox -$kendo-listbox-bg: $kendo-component-bg !default; +$kendo-listbox-bg: k-color( surface-alt ) !default; /// The border color of the ListBox. /// @group listbox -$kendo-listbox-border: $kendo-component-border !default; +$kendo-listbox-border: k-color( border ) !default; /// The inline padding of the ListBox item. /// @group listbox diff --git a/packages/default/scss/listgroup/_variables.scss b/packages/default/scss/listgroup/_variables.scss index f3c787ad1c2..3d7f69eb44a 100644 --- a/packages/default/scss/listgroup/_variables.scss +++ b/packages/default/scss/listgroup/_variables.scss @@ -7,9 +7,9 @@ $kendo-listgroup-border-radius: k-border-radius(md) !default; $kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default; $kendo-listgroup-line-height: var( --kendo-line-height, normal ) !default; -$kendo-listgroup-bg: $kendo-component-bg !default; -$kendo-listgroup-text: $kendo-component-text !default; -$kendo-listgroup-border: $kendo-component-border !default; +$kendo-listgroup-bg: k-color( surface-alt ) !default; +$kendo-listgroup-text: k-color( on-app-surface ) !default; +$kendo-listgroup-border: k-color( border ) !default; $kendo-listgroup-item-padding-x: k-spacing(2) !default; $kendo-listgroup-item-padding-y: k-spacing(2) !default; diff --git a/packages/default/scss/listview/_variables.scss b/packages/default/scss/listview/_variables.scss index 615ed95d4f7..48cb6354e31 100644 --- a/packages/default/scss/listview/_variables.scss +++ b/packages/default/scss/listview/_variables.scss @@ -23,13 +23,13 @@ $kendo-listview-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ListView. /// @group listview -$kendo-listview-text: $kendo-component-text !default; +$kendo-listview-text: k-color( on-app-surface ) !default; /// The background color of the ListView. /// @group listview -$kendo-listview-bg: $kendo-component-bg !default; +$kendo-listview-bg: k-color( surface-alt ) !default; /// The border color of the ListView. /// @group listview -$kendo-listview-border: $kendo-component-border !default; +$kendo-listview-border: k-color( border ) !default; /// The horizontal padding of the ListView items. /// @group listview @@ -43,7 +43,7 @@ $kendo-listview-item-padding-y: k-spacing(1) !default; $kendo-listview-item-selected-text: null !default; /// The background color of the selected ListView items. /// @group listview -$kendo-listview-item-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-listview-item-selected-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The border color of the selected ListView items. /// @group listview $kendo-listview-item-selected-border: null !default; diff --git a/packages/default/scss/loader/_variables.scss b/packages/default/scss/loader/_variables.scss index 63cda730e5f..57c0fe8b0d9 100644 --- a/packages/default/scss/loader/_variables.scss +++ b/packages/default/scss/loader/_variables.scss @@ -74,7 +74,7 @@ $kendo-loader-container-panel-border-width: 1px !default; $kendo-loader-container-panel-border-style: solid !default; /// The border color of the container panel. /// @group loader -$kendo-loader-container-panel-border-color: $kendo-component-border !default; +$kendo-loader-container-panel-border-color: k-color( border ) !default; /// The border radius of the container panel. /// @group loader $kendo-loader-container-panel-border-radius: k-border-radius(md) !default; @@ -115,7 +115,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa // Loading indicator /// The background color of the Loading indicator. /// @group loading -$kendo-loading-bg: $kendo-component-bg !default; +$kendo-loading-bg: k-color( surface-alt ) !default; /// The text color of the Loading indicator. /// @group loading $kendo-loading-text: currentColor !default; @@ -126,6 +126,19 @@ $kendo-loading-opacity: .3 !default; /// @group loading $kendo-zindex-loading: 100 !default; +$kendo-loader-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) !default; + @forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with ( $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius, $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size, @@ -163,5 +176,6 @@ $kendo-zindex-loading: 100 !default; $kendo-loading-bg: $kendo-loading-bg, $kendo-loading-text: $kendo-loading-text, $kendo-loading-opacity: $kendo-loading-opacity, - $kendo-zindex-loading: $kendo-zindex-loading + $kendo-zindex-loading: $kendo-zindex-loading, + $kendo-loader-theme-colors: $kendo-loader-theme-colors ); diff --git a/packages/default/scss/map/_variables.scss b/packages/default/scss/map/_variables.scss index 0ab798ecadf..8497a4ce8c0 100644 --- a/packages/default/scss/map/_variables.scss +++ b/packages/default/scss/map/_variables.scss @@ -19,13 +19,13 @@ $kendo-map-font-family: var( --kendo-font-family, inherit ) !default; /// The background color of the Map. /// @group map -$kendo-map-bg: $kendo-component-bg !default; +$kendo-map-bg: k-color( surface-alt ) !default; /// The text color of the Map. /// @group map -$kendo-map-text: $kendo-component-text !default; +$kendo-map-text: k-color( on-app-surface ) !default; /// The border color of the Map. /// @group map -$kendo-map-border: $kendo-component-border !default; +$kendo-map-border: k-color( border ) !default; /// The margin of the Map navigator. /// @group map @@ -64,11 +64,11 @@ $kendo-map-attribution-padding-y: k-spacing(0.5) !default; $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75) !default; /// The background color of the Map attribution. /// @group map -$kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default; +$kendo-map-attribution-bg: color-mix(in srgb, k-color( app-surface ) 80%, transparent) !default; /// The fill color of the Map marker. /// @group map -$kendo-map-marker-fill: $kendo-color-primary !default; +$kendo-map-marker-fill: k-color( primary ) !default; $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default; diff --git a/packages/default/scss/mediaplayer/_variables.scss b/packages/default/scss/mediaplayer/_variables.scss index aba2ccaecd3..2498ca90f41 100644 --- a/packages/default/scss/mediaplayer/_variables.scss +++ b/packages/default/scss/mediaplayer/_variables.scss @@ -18,13 +18,13 @@ $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the MediaPlayer. /// @group mediaplayer -$kendo-media-player-bg: $kendo-component-bg !default; +$kendo-media-player-bg: k-color( surface-alt ) !default; /// The text color of the MediaPlayer. /// @group mediaplayer -$kendo-media-player-text: $kendo-component-text !default; +$kendo-media-player-text: k-color( on-app-surface ) !default; /// The border color of the MediaPlayer. /// @group mediaplayer -$kendo-media-player-border: $kendo-component-border !default; +$kendo-media-player-border: k-color( border ) !default; /// The horizontal padding of the MediaPlayer title. /// @group mediaplayer @@ -43,7 +43,7 @@ $kendo-media-player-titlebar-text: $kendo-media-player-bg !default; $kendo-media-player-titlebar-border: null !default; /// The gradient of the MediaPlayer title. /// @group mediaplayer -$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default; +$kendo-media-player-titlebar-gradient: color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) !default; @forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with ( $kendo-media-player-border-width: $kendo-media-player-border-width, diff --git a/packages/default/scss/menu/_variables.scss b/packages/default/scss/menu/_variables.scss index be5afd486bf..31b0670ab8d 100644 --- a/packages/default/scss/menu/_variables.scss +++ b/packages/default/scss/menu/_variables.scss @@ -25,7 +25,7 @@ $kendo-menu-line-height: var( --kendo-line-height, normal ) !default; $kendo-menu-bg: transparent !default; /// The text color of the Menu. /// @group menu -$kendo-menu-text: $kendo-component-text !default; +$kendo-menu-text: k-color( on-app-surface ) !default; /// The border color of the Menu. /// @group menu $kendo-menu-border: null !default; @@ -57,7 +57,7 @@ $kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) ! $kendo-menu-item-bg: null !default; /// The text color of the Menu item. /// @group menu -$kendo-menu-item-text: $kendo-subtle-text !default; +$kendo-menu-item-text: k-color( subtle ) !default; /// The border color of the Menu item. /// @group menu $kendo-menu-item-border: null !default; @@ -70,7 +70,7 @@ $kendo-menu-item-gradient: null !default; $kendo-menu-item-hover-bg: null !default; /// The text color of hovered Menu item. /// @group menu -$kendo-menu-item-hover-text: $kendo-component-text !default; +$kendo-menu-item-hover-text: k-color( on-app-surface ) !default; /// The border color of hovered Menu item. /// @group menu $kendo-menu-item-hover-border: null !default; @@ -83,7 +83,7 @@ $kendo-menu-item-hover-gradient: null !default; $kendo-menu-item-active-bg: null !default; /// The text color of active Menu item. /// @group menu -$kendo-menu-item-active-text: $kendo-link-text !default; +$kendo-menu-item-active-text: k-color( primary ) !default; /// The border color of active Menu item. /// @group menu $kendo-menu-item-active-border: null !default; @@ -100,7 +100,7 @@ $kendo-menu-item-focus-shadow: $kendo-list-item-focus-shadow !default; $kendo-menu-item-selected-bg: null !default; /// The text color of selected Menu item. /// @group menu -$kendo-menu-item-selected-text: $kendo-link-text !default; +$kendo-menu-item-selected-text: k-color( primary ) !default; /// The border color of selected Menu item. /// @group menu $kendo-menu-item-selected-border: null !default; @@ -113,7 +113,7 @@ $kendo-menu-item-selected-gradient: null !default; $kendo-menu-scroll-button-bg: null !default; /// The text color of the Menu scroll buttons. /// @group menu -$kendo-menu-scroll-button-text: $kendo-subtle-text !default; +$kendo-menu-scroll-button-text: k-color( subtle ) !default; /// The border color of the Menu scroll buttons. /// @group menu $kendo-menu-scroll-button-border: null !default; @@ -126,7 +126,7 @@ $kendo-menu-scroll-button-gradient: null !default; $kendo-menu-scroll-button-hover-bg: null !default; /// The text color of hovered Menu scroll buttons. /// @group menu -$kendo-menu-scroll-button-hover-text: $kendo-component-text !default; +$kendo-menu-scroll-button-hover-text: k-color( on-app-surface ) !default; /// The border color of hovered Menu scroll buttons. /// @group menu $kendo-menu-scroll-button-hover-border: null !default; @@ -145,7 +145,7 @@ $kendo-menu-separator-margin-inline: k-spacing(1) !default; $kendo-menu-separator-margin-block: k-spacing(1.5) !default; /// The border color of the Menu separator. /// @group menu -$kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default; +$kendo-menu-separator-border: k-color(border) !default; // Menu popup diff --git a/packages/default/scss/messagebox/_variables.scss b/packages/default/scss/messagebox/_variables.scss index 05705d43af3..d53ba7da2cd 100644 --- a/packages/default/scss/messagebox/_variables.scss +++ b/packages/default/scss/messagebox/_variables.scss @@ -16,6 +16,19 @@ $kendo-message-box-border-level: -9 !default; $kendo-message-box-link-font-style: italic !default; $kendo-message-box-link-text-decoration: underline !default; +$kendo-message-box-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; + @forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with ( $kendo-message-box-margin: $kendo-message-box-margin, $kendo-message-box-padding-x: $kendo-message-box-padding-x, @@ -27,5 +40,6 @@ $kendo-message-box-link-text-decoration: underline !default; $kendo-message-box-text-level: $kendo-message-box-text-level, $kendo-message-box-border-level: $kendo-message-box-border-level, $kendo-message-box-link-font-style: $kendo-message-box-link-font-style, - $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration + $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration, + $kendo-message-box-theme-colors: $kendo-message-box-theme-colors ); diff --git a/packages/default/scss/no-data/_variables.scss b/packages/default/scss/no-data/_variables.scss index 79a6b11ec05..bb95f2878f3 100644 --- a/packages/default/scss/no-data/_variables.scss +++ b/packages/default/scss/no-data/_variables.scss @@ -6,7 +6,7 @@ $kendo-no-data-min-height: 140px !default; /// The color of the 'No Data' text. /// @group no-data -$kendo-no-data-text: $kendo-subtle-text !default; +$kendo-no-data-text: k-color( subtle ) !default; @forward "@progress/kendo-theme-core/scss/components/no-data/_variables.scss" with ( $kendo-no-data-min-height: $kendo-no-data-min-height, diff --git a/packages/default/scss/notification/_functions.scss b/packages/default/scss/notification/_functions.scss index ab43e621d70..47f4a31c5ac 100644 --- a/packages/default/scss/notification/_functions.scss +++ b/packages/default/scss/notification/_functions.scss @@ -7,7 +7,7 @@ @each $name, $color in $colors { $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + color: k-color( on-#{$name} ), background-color: $color, border: $color, )), $_theme ); diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss index ce0ee2d5ece..302dffddc07 100644 --- a/packages/default/scss/notification/_variables.scss +++ b/packages/default/scss/notification/_variables.scss @@ -34,13 +34,13 @@ $kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default; $kendo-notification-line-height: va( --kendo-line-height, normal ) !default; /// The background color of the Notification. /// @group notification -$kendo-notification-bg: $kendo-component-bg !default; +$kendo-notification-bg: k-color( surface-alt ) !default; /// The text color of the Notification. /// @group notification -$kendo-notification-text: $kendo-component-text !default; +$kendo-notification-text: k-color( on-app-surface ) !default; /// The border color of the Notification. /// @group notification -$kendo-notification-border: $kendo-component-border !default; +$kendo-notification-border: k-color( border ) !default; /// The box shadow of the Notification. /// @group notification $kendo-notification-shadow: $kendo-popup-shadow !default; @@ -51,7 +51,18 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default; /// The theme colors map for the Notification. /// @group notification -$kendo-notification-theme-colors: $kendo-theme-colors !default; +$kendo-notification-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) !default; /// The generated theme colors map for the Notification. /// @group notification $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default; diff --git a/packages/default/scss/orgchart/_variables.scss b/packages/default/scss/orgchart/_variables.scss index 6d74f426359..f7ef8b4db1c 100644 --- a/packages/default/scss/orgchart/_variables.scss +++ b/packages/default/scss/orgchart/_variables.scss @@ -24,13 +24,13 @@ $kendo-orgchart-font-size: var( --kendo-font-size, inherit ) !default; $kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the OrgChart. /// @group orgchart -$kendo-orgchart-bg: $kendo-component-bg !default; +$kendo-orgchart-bg: k-color( surface-alt ) !default; /// The text color of the OrgChart. /// @group orgchart -$kendo-orgchart-text: $kendo-component-text !default; +$kendo-orgchart-text: k-color( on-app-surface ) !default; /// The border color of the OrgChart. /// @group orgchart -$kendo-orgchart-border: $kendo-component-border !default; +$kendo-orgchart-border: k-color( border ) !default; /// The spacing of the OrgChart node. /// @group orgchart @@ -56,13 +56,13 @@ $kendo-orgchart-node-group-border-width: 1px !default; $kendo-orgchart-node-group-border-radius: k-border-radius(md) !default; /// The background color of the OrgChart node group. /// @group orgchart -$kendo-orgchart-node-group-bg: $kendo-base-bg !default; +$kendo-orgchart-node-group-bg: k-color( surface ) !default; /// The text color of the OrgChart node group. /// @group orgchart -$kendo-orgchart-node-group-text: $kendo-base-text !default; +$kendo-orgchart-node-group-text: k-color( on-app-surface ) !default; /// The border color of the OrgChart node group. /// @group orgchart -$kendo-orgchart-node-group-border: $kendo-base-border !default; +$kendo-orgchart-node-group-border: k-color( border ) !default; /// The border color of the focused OrgChart node group. /// @group orgchart @@ -89,7 +89,7 @@ $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default; /// The line height of the OrgChart node group subtitle. /// @group orgchart -$kendo-orgchart-node-group-subtitle-text: $kendo-subtle-text !default; +$kendo-orgchart-node-group-subtitle-text: k-color( subtle ) !default; /// The width of the OrgChart Card. /// @group orgchart @@ -143,7 +143,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default; $kendo-orgchart-line-size: 1px !default; /// The fill color of the OrgChart connecting line. /// @group orgchart -$kendo-orgchart-line-fill: $kendo-base-border !default; +$kendo-orgchart-line-fill: k-color( border ) !default; /// The height of the OrgChart connecting line. /// @group orgchart diff --git a/packages/default/scss/overlay/_variables.scss b/packages/default/scss/overlay/_variables.scss index 1f3f3707c69..4b253042568 100644 --- a/packages/default/scss/overlay/_variables.scss +++ b/packages/default/scss/overlay/_variables.scss @@ -1,6 +1,17 @@ @use "../core/_index.scss" as *; -$kendo-overlay-theme-colors: $kendo-theme-colors !default; +$kendo-overlay-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )), +) !default; $kendo-overlay-bg: $kendo-color-black !default; $kendo-overlay-opacity: .5 !default; diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss index 8f370b8bae1..cf6b0f4e5c9 100644 --- a/packages/default/scss/pager/_variables.scss +++ b/packages/default/scss/pager/_variables.scss @@ -63,13 +63,13 @@ $kendo-pager-font-size: var( --kendo-font-size, inherit ) !default; $kendo-pager-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Pager. /// @group pager -$kendo-pager-bg: $kendo-component-header-bg !default; +$kendo-pager-bg: k-color( surface )!default; /// The text color of the Pager. /// @group pager -$kendo-pager-text: $kendo-component-header-text !default; +$kendo-pager-text: k-color( on-app-surface ) !default; /// The border color of the Pager. /// @group pager -$kendo-pager-border: $kendo-component-border !default; +$kendo-pager-border: k-color( border ) !default; /// The background color of the focused Pager. /// @group pager diff --git a/packages/default/scss/panel/_variables.scss b/packages/default/scss/panel/_variables.scss index 4345bf09335..24175e4ce48 100644 --- a/packages/default/scss/panel/_variables.scss +++ b/packages/default/scss/panel/_variables.scss @@ -26,13 +26,13 @@ $kendo-panel-content-padding-block: k-spacing(1) !default; /// The text color of the Panel. /// @group panel -$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text}) !default; +$kendo-panel-text: k-color( on-app-surface ) !default; /// The background color of the Panel. /// @group panel -$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default; +$kendo-panel-bg: k-color( surface-alt ) !default; /// The color of the border around the Panel. /// @group panel -$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default; +$kendo-panel-border: k-color( border ) !default; @forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with ( $kendo-panel-border-radius: $kendo-panel-border-radius, diff --git a/packages/default/scss/panelbar/_variables.scss b/packages/default/scss/panelbar/_variables.scss index a6eabee421c..14ecf5fc448 100644 --- a/packages/default/scss/panelbar/_variables.scss +++ b/packages/default/scss/panelbar/_variables.scss @@ -52,20 +52,20 @@ $kendo-panelbar-item-level-count: 4 !default; /// The background color of the PanelBar. /// @group panelbar -$kendo-panelbar-bg: $kendo-component-bg !default; +$kendo-panelbar-bg: k-color( surface-alt ) !default; /// The text color of the PanelBar. /// @group panelbar -$kendo-panelbar-text: $kendo-component-text !default; +$kendo-panelbar-text: k-color( on-app-surface ) !default; /// The border color of the PanelBar. /// @group panelbar -$kendo-panelbar-border: $kendo-component-border !default; +$kendo-panelbar-border: k-color( border ) !default; /// The background color of the PanelBar header. /// @group panelbar $kendo-panelbar-header-bg: $kendo-panelbar-bg !default; /// The text color of the PanelBar header. /// @group panelbar -$kendo-panelbar-header-text: $kendo-link-text !default; +$kendo-panelbar-header-text: k-color( primary ) !default; /// The border color of the PanelBar header. /// @group panelbar $kendo-panelbar-header-border: null !default; @@ -75,7 +75,7 @@ $kendo-panelbar-header-gradient: null !default; /// The background color of the hovered PanelBar header. /// @group panelbar -$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default; +$kendo-panelbar-header-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered PanelBar header. /// @group panelbar $kendo-panelbar-header-hover-text: null !default; @@ -117,10 +117,10 @@ $kendo-panelbar-header-hover-focus-gradient: null !default; /// The background color of the selected PanelBar header. /// @group panelbar -$kendo-panelbar-header-selected-bg: $kendo-selected-bg !default; +$kendo-panelbar-header-selected-bg: k-color( primary ) !default; /// The text color of the selected PanelBar header. /// @group panelbar -$kendo-panelbar-header-selected-text: $kendo-selected-text !default; +$kendo-panelbar-header-selected-text: k-color( on-primary ) !default; /// The border color of the selected PanelBar header. /// @group panelbar $kendo-panelbar-header-selected-border: null !default; @@ -130,7 +130,7 @@ $kendo-panelbar-header-selected-gradient: null !default; /// The background color of the selected and hovered PanelBar header. /// @group panelbar -$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default; +$kendo-panelbar-header-selected-hover-bg: k-color( primary-hover ) !default; /// The text color of the selected and hovered PanelBar header. /// @group panelbar $kendo-panelbar-header-selected-hover-text: null !default; @@ -169,7 +169,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default; /// The background color of the hovered PanelBar items. /// @group panelbar -$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default; +$kendo-panelbar-item-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered PanelBar items. /// @group panelbar $kendo-panelbar-item-hover-text: null !default; @@ -211,10 +211,10 @@ $kendo-panelbar-item-hover-focus-gradient: null !default; /// The background color of the selected PanelBar items. /// @group panelbar -$kendo-panelbar-item-selected-bg: $kendo-selected-bg !default; +$kendo-panelbar-item-selected-bg: k-color( primary ) !default; /// The text color of the selected PanelBar items. /// @group panelbar -$kendo-panelbar-item-selected-text: $kendo-selected-text !default; +$kendo-panelbar-item-selected-text: k-color( on-primary ) !default; /// The border color of the selected PanelBar items. /// @group panelbar $kendo-panelbar-item-selected-border: null !default; @@ -224,7 +224,7 @@ $kendo-panelbar-item-selected-gradient: null !default; /// The background color of the selected and hovered PanelBar items. /// @group panelbar -$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default; +$kendo-panelbar-item-selected-hover-bg: k-color( primary-hover ) !default; /// The text color of the selected and hovered PanelBar items. /// @group panelbar $kendo-panelbar-item-selected-hover-text: null !default; diff --git a/packages/default/scss/pdf-viewer/_variables.scss b/packages/default/scss/pdf-viewer/_variables.scss index 09784b72402..9d80c3ce07e 100644 --- a/packages/default/scss/pdf-viewer/_variables.scss +++ b/packages/default/scss/pdf-viewer/_variables.scss @@ -21,13 +21,13 @@ $kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the PDFViewer. /// @group pdf-viewer -$kendo-pdf-viewer-bg: $kendo-component-bg !default; +$kendo-pdf-viewer-bg: k-color( surface-alt ) !default; /// The text color of the PDFViewer. /// @group pdf-viewer -$kendo-pdf-viewer-text: $kendo-component-text !default; +$kendo-pdf-viewer-text: k-color( on-app-surface ) !default; /// The border color of the PDFViewer. /// @group pdf-viewer -$kendo-pdf-viewer-border: $kendo-component-border !default; +$kendo-pdf-viewer-border: k-color( border ) !default; /// The background color of the PDFViewer Toolbar. /// @group pdf-viewer @@ -44,7 +44,7 @@ $kendo-pdf-viewer-toolbar-gradient: null !default; /// The background color of the PDFViewer canvas. /// @group pdf-viewer -$kendo-pdf-viewer-canvas-bg: $kendo-app-bg !default; +$kendo-pdf-viewer-canvas-bg: k-color( surface ) !default; /// The text color of the PDFViewer canvas. /// @group pdf-viewer $kendo-pdf-viewer-canvas-text: null !default; @@ -61,10 +61,10 @@ $kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default; $kendo-pdf-viewer-page-bg: white !default; /// The text color of the PDFViewer page. /// @group pdf-viewer -$kendo-pdf-viewer-page-text: $kendo-component-text !default; +$kendo-pdf-viewer-page-text: k-color( on-app-surface ) !default; /// The border color of the PDFViewer page. /// @group pdf-viewer -$kendo-pdf-viewer-page-border: $kendo-component-border !default; +$kendo-pdf-viewer-page-border: k-color( border ) !default; /// The shadow of the PDFViewer page. /// @group pdf-viewer $kendo-pdf-viewer-page-shadow: k-elevation(3) !default; @@ -86,13 +86,13 @@ $kendo-pdf-viewer-search-panel-border-width: 1px !default; $kendo-pdf-viewer-search-panel-border-radius: 0 !default; /// The background color of the PDFViewer search panel. /// @group pdf-viewer -$kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default; +$kendo-pdf-viewer-search-panel-bg: k-color( surface-alt ) !default; /// The text color of the PDFViewer search panel. /// @group pdf-viewer -$kendo-pdf-viewer-search-panel-text: $kendo-component-text !default; +$kendo-pdf-viewer-search-panel-text: k-color( on-app-surface ) !default; /// The border color of the PDFViewer search panel. /// @group pdf-viewer -$kendo-pdf-viewer-search-panel-border: $kendo-component-border !default; +$kendo-pdf-viewer-search-panel-border: k-color( border ) !default; /// The shadow of the PDFViewer search panel. /// @group pdf-viewer $kendo-pdf-viewer-search-panel-shadow: $kendo-window-shadow !default; @@ -106,7 +106,7 @@ $kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) ! /// The background color of the PDFViewer highlight. /// @group pdf-viewer -$kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default; +$kendo-pdf-viewer-search-highlight-bg: k-color( on-app-surface ) !default; /// The background color of the PDFViewer highlight mark. /// @group pdf-viewer $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default; @@ -124,13 +124,13 @@ $kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default; /// The border color of the PDFViewer selected highlight annotation. /// @group pdf-viewer -$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +$kendo-pdf-viewer-highlight-annotation-border: k-color(primary) !default; /// The background color of the PDFViewer hover highlight annotation. /// @group pdf-viewer -$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; +$kendo-pdf-viewer-highlight-annotation-hover-border: k-color( primary-hover ) !default; /// The border color of the PDFViewer selected free text annotation. /// @group pdf-viewer -$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default; +$kendo-pdf-viewer-free-text-annotation-border: k-color(primary) !default; /// The placeholder text color of the PDFViewer free text annotation. /// @group pdf-viewer $kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default; diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss index a8bf34a4350..bec9572df5f 100644 --- a/packages/default/scss/pivotgrid/_variables.scss +++ b/packages/default/scss/pivotgrid/_variables.scss @@ -50,41 +50,41 @@ $kendo-pivotgrid-cell-border-width: 1px !default; /// The background color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-bg: $kendo-component-bg !default; +$kendo-pivotgrid-bg: k-color( surface-alt ) !default; /// The text color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-text: $kendo-component-text !default; +$kendo-pivotgrid-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-border: $kendo-component-border !default; +$kendo-pivotgrid-border: k-color( border ) !default; /// The alt border color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) !default; +$kendo-pivotgrid-alt-border: k-color( border-alt ) !default; /// The background color of the PivotGrid header. /// @group pivotgrid -$kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default; +$kendo-pivotgrid-headers-bg: k-color( surface )!default; /// The text color of the PivotGrid header. /// @group pivotgrid -$kendo-pivotgrid-headers-text: $kendo-component-header-text !default; +$kendo-pivotgrid-headers-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid header. /// @group pivotgrid -$kendo-pivotgrid-headers-border: $kendo-component-header-border !default; +$kendo-pivotgrid-headers-border: k-color( border ) !default; /// The background color of the PivotGrid total cells. /// @group pivotgrid -$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default; +$kendo-pivotgrid-total-bg: k-color( base-subtle ) !default; /// The text color of the PivotGrid total cells. /// @group pivotgrid -$kendo-pivotgrid-total-text: $kendo-component-header-text !default; +$kendo-pivotgrid-total-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid total cells. /// @group pivotgrid -$kendo-pivotgrid-total-border: $kendo-component-header-border !default; +$kendo-pivotgrid-total-border: k-color( border ) !default; /// The hover background color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) !default; +$kendo-pivotgrid-hover-bg: k-color( base-hover ) !default; /// The hover text color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-hover-text: null !default; @@ -94,7 +94,7 @@ $kendo-pivotgrid-hover-border: null !default; /// The selected background color of the PivotGrid. /// @group pivotgrid -$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-pivotgrid-selected-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The selected text color of the PivotGrid. /// @group pivotgrid $kendo-pivotgrid-selected-text: null !default; @@ -154,20 +154,20 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default; /// The background color of the PivotGrid configurator. /// @group pivotgrid -$kendo-pivotgrid-configurator-bg: $kendo-component-bg !default; +$kendo-pivotgrid-configurator-bg: k-color( surface-alt ) !default; /// The text color of the PivotGrid configurator. /// @group pivotgrid -$kendo-pivotgrid-configurator-text: $kendo-component-text !default; +$kendo-pivotgrid-configurator-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid configurator. /// @group pivotgrid -$kendo-pivotgrid-configurator-border: $kendo-component-border !default; +$kendo-pivotgrid-configurator-border: k-color( border ) !default; /// The background color of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-bg: null !default; /// The text color of the PivotGrid configurator header. /// @group pivotgrid -$kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default; +$kendo-pivotgrid-configurator-header-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid configurator header. /// @group pivotgrid $kendo-pivotgrid-configurator-header-border: null !default; @@ -221,20 +221,20 @@ $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default; /// The background color of the PivotGrid calculated field. /// @group pivotgrid -$kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default; +$kendo-pivotgrid-calculated-field-bg: k-color( surface-alt ) !default; /// The text color of the PivotGrid calculated field. /// @group pivotgrid -$kendo-pivotgrid-calculated-field-text: $kendo-component-text !default; +$kendo-pivotgrid-calculated-field-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid calculated field. /// @group pivotgrid -$kendo-pivotgrid-calculated-field-border: $kendo-component-border !default; +$kendo-pivotgrid-calculated-field-border: k-color( border ) !default; /// The background color of the PivotGrid calculated field header. /// @group pivotgrid $kendo-pivotgrid-calculated-field-header-bg: null !default; /// The text color of the PivotGrid calculated field header. /// @group pivotgrid -$kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !default; +$kendo-pivotgrid-calculated-field-header-text: k-color( on-app-surface ) !default; /// The border color of the PivotGrid calculated field header. /// @group pivotgrid $kendo-pivotgrid-calculated-field-header-border: null !default; @@ -252,8 +252,8 @@ $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default; $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default; $kendo-pivotgrid-chrome-border: $kendo-grid-border !default; -$kendo-pivotgrid-container-bg: $kendo-component-bg !default; -$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default; +$kendo-pivotgrid-container-bg: k-color( surface-alt ) !default; +$kendo-pivotgrid-row-headers-bg: k-color( base ) !default; $kendo-pivotgrid-button-bg: null !default; $kendo-pivotgrid-button-text: null !default; diff --git a/packages/default/scss/popover/_variables.scss b/packages/default/scss/popover/_variables.scss index 9a578a9ad21..aa202d19ae9 100644 --- a/packages/default/scss/popover/_variables.scss +++ b/packages/default/scss/popover/_variables.scss @@ -25,13 +25,13 @@ $kendo-popover-line-height: $kendo-card-line-height !default; /// The text color of the Popover. /// @group popover -$kendo-popover-text: $kendo-component-text !default; +$kendo-popover-text: k-color( on-app-surface ) !default; /// The background color of the Popover. /// @group popover -$kendo-popover-bg: $kendo-component-bg !default; +$kendo-popover-bg: k-color( surface-alt ) !default; /// The border color of the Popover. /// @group popover -$kendo-popover-border: $kendo-component-border !default; +$kendo-popover-border: k-color( border ) !default; /// The box shadow of the Popover. /// @group popover $kendo-popover-shadow: $kendo-popup-shadow !default; diff --git a/packages/default/scss/popup/_variables.scss b/packages/default/scss/popup/_variables.scss index ff66bf671c4..896819856dc 100644 --- a/packages/default/scss/popup/_variables.scss +++ b/packages/default/scss/popup/_variables.scss @@ -29,13 +29,13 @@ $kendo-popup-content-padding-y: k-spacing(2) !default; /// Background color of the popup. /// @group popup -$kendo-popup-bg: $kendo-component-bg !default; +$kendo-popup-bg: k-color( surface-alt ) !default; /// Text color of the popup. /// @group popup -$kendo-popup-text: $kendo-component-text !default; +$kendo-popup-text: k-color( on-app-surface ) !default; /// Border color of the popup. /// @group popup -$kendo-popup-border: $kendo-component-border !default; +$kendo-popup-border: k-color( border ) !default; /// Box shadow of the popup. /// @group popup $kendo-popup-shadow: k-elevation(4) !default; diff --git a/packages/default/scss/progressbar/_variables.scss b/packages/default/scss/progressbar/_variables.scss index 940f6fdfa33..a96a70c6635 100644 --- a/packages/default/scss/progressbar/_variables.scss +++ b/packages/default/scss/progressbar/_variables.scss @@ -27,26 +27,26 @@ $kendo-progressbar-line-height: var( --kendo-line-height-xs, normal ) !default; /// The background color of the ProgressBar. /// @group progressbar -$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default; +$kendo-progressbar-bg: k-color( base-subtle ) !default; /// The text color of the ProgressBar. /// @group progressbar -$kendo-progressbar-text: $kendo-component-text !default; +$kendo-progressbar-text: k-color( on-app-surface ) !default; /// The border color of the ProgressBar. /// @group progressbar -$kendo-progressbar-border: $kendo-component-border !default; +$kendo-progressbar-border: k-color( border ) !default; /// The background gradient of the ProgressBar. /// @group progressbar $kendo-progressbar-gradient: null !default; /// The progress background color of the ProgressBar. /// @group progressbar -$kendo-progressbar-value-bg: $kendo-color-primary !default; +$kendo-progressbar-value-bg: k-color( primary ) !default; /// The progress text color of the ProgressBar. /// @group progressbar -$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default; +$kendo-progressbar-value-text: k-color( on-primary ) !default; /// The progress border color of the ProgressBar. /// @group progressbar -$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default; +$kendo-progressbar-value-border: k-color( primary-active ) !default; /// The progress background gradient of the ProgressBar. /// @group progressbar $kendo-progressbar-value-gradient: null !default; @@ -66,12 +66,12 @@ $kendo-progressbar-indeterminate-gradient: null !default; /// The border color of the chunk ProgressBar. /// @group progressbar -$kendo-progressbar-chunk-border: $kendo-body-bg !default; +$kendo-progressbar-chunk-border: k-color( app-surface ) !default; // Circular Progressbar /// The arc stroke color of the circular ProgressBar. /// @group progressbar -$kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default; +$kendo-circular-progressbar-arc-stroke: k-color( primary ) !default; /// The scale stroke background color of the circular ProgressBar. /// @group progressbar $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default; diff --git a/packages/default/scss/prompt/_variables.scss b/packages/default/scss/prompt/_variables.scss index 4242118d1de..266ad8d92af 100644 --- a/packages/default/scss/prompt/_variables.scss +++ b/packages/default/scss/prompt/_variables.scss @@ -5,23 +5,23 @@ /// The text color of the AIPrompt. /// @group prompt -$kendo-prompt-text: $kendo-component-text !default; +$kendo-prompt-text: k-color( on-app-surface ) !default; /// The background color of the AIPrompt. /// @group prompt -$kendo-prompt-bg: $kendo-component-bg !default; +$kendo-prompt-bg: k-color( surface-alt ) !default; /// The border color of the AIPrompt. /// @group prompt -$kendo-prompt-border: $kendo-component-border !default; +$kendo-prompt-border: k-color( border ) !default; /// The text color of the AIPrompt header. /// @group prompt -$kendo-prompt-header-text: $kendo-component-header-text !default; +$kendo-prompt-header-text: k-color( on-app-surface ) !default; /// The background color of the AIPrompt header. /// @group prompt -$kendo-prompt-header-bg: $kendo-component-bg !default; +$kendo-prompt-header-bg: k-color( surface-alt ) !default; /// The border color of the AIPrompt header. /// @group prompt -$kendo-prompt-header-border: $kendo-component-header-border !default; +$kendo-prompt-header-border: k-color( border ) !default; /// The vertical padding of the AIPrompt content. /// @group prompt @@ -34,13 +34,13 @@ $kendo-prompt-content-padding-x: k-spacing(4) !default; $kendo-prompt-content-spacing: k-spacing(4) !default; /// The text color of the AIPrompt content. /// @group prompt -$kendo-prompt-content-text: $kendo-component-header-text !default; +$kendo-prompt-content-text: k-color( on-app-surface ) !default; /// The background color of the AIPrompt content. /// @group prompt -$kendo-prompt-content-bg: $kendo-component-header-bg !default; +$kendo-prompt-content-bg: k-color( surface )!default; /// The text border of the AIPrompt content. /// @group prompt -$kendo-prompt-content-border: $kendo-component-header-border !default; +$kendo-prompt-content-border: k-color( border ) !default; /// The spacing between the items of the AIPrompt content expander. /// @group prompt @@ -57,13 +57,13 @@ $kendo-prompt-suggestion-padding-x: k-spacing(2) !default; $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default; /// The text color of the AIPrompt suggestion container. /// @group prompt -$kendo-prompt-suggestion-text: $kendo-component-text !default; +$kendo-prompt-suggestion-text: k-color( on-app-surface ) !default; /// The background color of the AIPrompt suggestion container. /// @group prompt -$kendo-prompt-suggestion-bg: $kendo-body-bg !default; +$kendo-prompt-suggestion-bg: k-color( app-surface ) !default; /// The border color of the AIPrompt suggestion container. /// @group prompt -$kendo-prompt-suggestion-border: $kendo-component-border !default; +$kendo-prompt-suggestion-border: k-color( border ) !default; /// The elevation of the AIPrompt suggestion container. /// @group prompt $kendo-prompt-suggestion-shadow: k-elevation(1) !default; diff --git a/packages/default/scss/rating/_variables.scss b/packages/default/scss/rating/_variables.scss index 3af0aef01b8..d5cf66dd175 100644 --- a/packages/default/scss/rating/_variables.scss +++ b/packages/default/scss/rating/_variables.scss @@ -41,16 +41,16 @@ $kendo-rating-icon-size: ($kendo-icon-size * 1.5) !default; /// The text color of the Rating icon. /// @group rating -$kendo-rating-icon-text: $kendo-component-text !default; +$kendo-rating-icon-text: k-color( on-app-surface ) !default; /// The text color of the selected Rating icon. /// @group rating -$kendo-rating-icon-selected-text: $kendo-selected-bg !default; +$kendo-rating-icon-selected-text: k-color( primary ) !default; /// The text color of the hovered Rating icon. /// @group rating -$kendo-rating-icon-hover-text: $kendo-selected-bg !default; +$kendo-rating-icon-hover-text: k-color( primary ) !default; /// The text color of the focused Rating icon. /// @group rating -$kendo-rating-icon-focus-text: $kendo-selected-bg !default; +$kendo-rating-icon-focus-text: k-color( primary ) !default; /// The shadow of the focused Rating icon. /// @group rating diff --git a/packages/default/scss/scheduler/_variables.scss b/packages/default/scss/scheduler/_variables.scss index 3ab46a20aae..8fa4a7fc69c 100644 --- a/packages/default/scss/scheduler/_variables.scss +++ b/packages/default/scss/scheduler/_variables.scss @@ -21,13 +21,13 @@ $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Scheduler. /// @group scheduler -$kendo-scheduler-bg: $kendo-component-bg !default; +$kendo-scheduler-bg: k-color( surface-alt ) !default; /// The text color of the Scheduler. /// @group scheduler -$kendo-scheduler-text: $kendo-component-text !default; +$kendo-scheduler-text: k-color( on-app-surface ) !default; /// The border color of the Scheduler. /// @group scheduler -$kendo-scheduler-border: $kendo-component-border !default; +$kendo-scheduler-border: k-color( border ) !default; /// The background color of the Scheduler ToolBar. /// @group scheduler @@ -67,10 +67,10 @@ $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - /// The background color of the Scheduler event. /// @group scheduler -$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default; +$kendo-scheduler-event-bg: k-color( primary ) !default; /// The text color of the Scheduler event. /// @group scheduler -$kendo-scheduler-event-text: $kendo-selected-text !default; +$kendo-scheduler-event-text: k-color( on-primary ) !default; /// The border color of the Scheduler event. /// @group scheduler $kendo-scheduler-event-border: null !default; @@ -99,10 +99,10 @@ $kendo-scheduler-event-hover-shadow: null !default; /// The background color of the selected Scheduler event. /// @group scheduler -$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) !default; +$kendo-scheduler-event-selected-bg: k-color( primary-active ) !default; /// The text color of the selected Scheduler event. /// @group scheduler -$kendo-scheduler-event-selected-text: $kendo-selected-text !default; +$kendo-scheduler-event-selected-text: k-color( on-primary ) !default; /// The border color of the selected Scheduler event. /// @group scheduler $kendo-scheduler-event-selected-border: null !default; @@ -135,7 +135,7 @@ $kendo-scheduler-timecolumn-width: 11em !default; /// The background color of the non-working hours in the Scheduler. /// @group scheduler -$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default; +$kendo-scheduler-nonwork-bg: k-color( base ) !default; /// The text color of the non-working hours in the Scheduler. /// @group scheduler $kendo-scheduler-nonwork-text: null !default; @@ -149,7 +149,7 @@ $kendo-scheduler-weekend-text: null !default; /// The background color of the preceding/subsequent month cells in the Calendar. /// @group scheduler -$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default; +$kendo-scheduler-othermonth-bg: k-color( base ) !default; /// The text color of the preceding/subsequent month cells in the Calendar. /// @group scheduler $kendo-scheduler-othermonth-text: null !default; @@ -179,10 +179,10 @@ $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{math.div( $k $kendo-scheduler-yearview-indicator-border-radius: 50% !default; /// The background color of the days with events indicator of the year view in the Scheduler. /// @group scheduler -$kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default; +$kendo-scheduler-yearview-indicator-bg: k-color( primary ) !default; /// The background color of the selected days with events indicator of the year view in the Scheduler. /// @group scheduler -$kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default; +$kendo-scheduler-yearview-indicator-selected-bg: k-color( on-primary ) !default; /// The horizontal padding of the Scheduler Tooltip. /// @group scheduler @@ -195,10 +195,10 @@ $kendo-scheduler-tooltip-padding-y: k-spacing(2) !default; $kendo-scheduler-tooltip-border-width: 0 !default; /// The background color of the Scheduler Tooltip. /// @group scheduler -$kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default; +$kendo-scheduler-tooltip-bg: k-color( on-primary ) !default; /// The text color of the Scheduler Tooltip. /// @group scheduler -$kendo-scheduler-tooltip-text: $kendo-base-text !default; +$kendo-scheduler-tooltip-text: k-color( on-app-surface ) !default; /// The border color of the Scheduler Tooltip. /// @group scheduler $kendo-scheduler-tooltip-border: null !default; diff --git a/packages/default/scss/scrollview/_variables.scss b/packages/default/scss/scrollview/_variables.scss index 01efa35fdfc..d3d2e87f693 100644 --- a/packages/default/scss/scrollview/_variables.scss +++ b/packages/default/scss/scrollview/_variables.scss @@ -18,13 +18,13 @@ $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default; /// The text color of the ScrollView. /// @group scrollview -$kendo-scrollview-text: $kendo-component-text !default; +$kendo-scrollview-text: k-color( on-app-surface ) !default; /// The background color of the ScrollView. /// @group scrollview -$kendo-scrollview-bg: $kendo-component-bg !default; +$kendo-scrollview-bg: k-color( surface-alt ) !default; /// The border color of the ScrollView. /// @group scrollview -$kendo-scrollview-border: $kendo-component-border !default; +$kendo-scrollview-border: k-color( border ) !default; /// The size of the ScrollView page button. /// @group scrollview @@ -37,10 +37,10 @@ $kendo-scrollview-pagebutton-bg: $kendo-button-bg !default; $kendo-scrollview-pagebutton-border: $kendo-button-border !default; /// The primary background color of the ScrollView page button. /// @group scrollview -$kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default; +$kendo-scrollview-pagebutton-primary-bg: k-color( primary ) !default; /// The primary border color of the ScrollView page button. /// @group scrollview -$kendo-scrollview-pagebutton-primary-border: $kendo-color-primary !default; +$kendo-scrollview-pagebutton-primary-border: k-color( primary ) !default; /// The box shadow of the ScrollView page button. /// @group scrollview $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default; diff --git a/packages/default/scss/signature/_variables.scss b/packages/default/scss/signature/_variables.scss index 5f55f49c458..ede4a83a8ff 100644 --- a/packages/default/scss/signature/_variables.scss +++ b/packages/default/scss/signature/_variables.scss @@ -20,7 +20,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default; $kendo-signature-line-width: 1px !default; $kendo-signature-line-style: dashed !default; -$kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 24%, transparent), rgba( $kendo-color-info, .24 )) !default; +$kendo-signature-line-color: color-mix(in srgb, k-color( info ) 24%, transparent) !default; $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default; $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default; diff --git a/packages/default/scss/skeleton/_variables.scss b/packages/default/scss/skeleton/_variables.scss index 0821458f3a0..5d59277d13c 100644 --- a/packages/default/scss/skeleton/_variables.scss +++ b/packages/default/scss/skeleton/_variables.scss @@ -16,7 +16,7 @@ $kendo-skeleton-rect-border-radius: 0 !default; /// @group skeleton $kendo-skeleton-circle-border-radius: 9999px !default; -$kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default; +$kendo-skeleton-item-bg: color-mix(in srgb, k-color( on-app-surface ) 20%, transparent) !default; $kendo-skeleton-wave-bg: rgba( black, .04 ) !default; diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss index 1f0286512d6..86265955ac3 100644 --- a/packages/default/scss/slider/_variables.scss +++ b/packages/default/scss/slider/_variables.scss @@ -53,46 +53,46 @@ $kendo-slider-draghandle-active-size: null !default; /// The background color of the Slider drag handle. /// @group slider -$kendo-slider-draghandle-bg: $kendo-color-primary !default; +$kendo-slider-draghandle-bg: k-color( primary ) !default; /// The text color of the Slider drag handle. /// @group slider -$kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default; +$kendo-slider-draghandle-text: k-color( on-primary ) !default; /// The border color of the Slider drag handle. /// @group slider -$kendo-slider-draghandle-border: $kendo-color-primary !default; +$kendo-slider-draghandle-border: k-color( primary ) !default; /// The gradient of the Slider drag handle. /// @group slider $kendo-slider-draghandle-gradient: null !default; /// The background color of the hovered Slider drag handle. /// @group slider -$kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary , .5 )) !default; +$kendo-slider-draghandle-hover-bg: k-color( primary-hover ) !default; /// The text color of the hovered Slider drag handle. /// @group slider $kendo-slider-draghandle-hover-text: null !default; /// The border color of the hovered Slider drag handle. /// @group slider -$kendo-slider-draghandle-hover-border: $kendo-color-primary !default; +$kendo-slider-draghandle-hover-border: k-color( primary ) !default; /// The gradient of the hovered Slider drag handle. /// @group slider $kendo-slider-draghandle-hover-gradient: null !default; /// The background color of the active Slider drag handle. /// @group slider -$kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default; +$kendo-slider-draghandle-pressed-bg: k-color( primary-active ) !default; /// The text color of the active Slider drag handle. /// @group slider $kendo-slider-draghandle-pressed-text: null !default; /// The border color of the active Slider drag handle. /// @group slider -$kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary , 1.5 )) !default; +$kendo-slider-draghandle-pressed-border: k-color( primary-active ) !default; /// The gradient of the active Slider drag handle. /// @group slider $kendo-slider-draghandle-pressed-gradient: null !default; /// The shadow of the focused Slider drag handle. /// @group slider -$kendo-slider-draghandle-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary , .3 )) !default; +$kendo-slider-draghandle-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color( primary ) 30%, transparent) !default; /// The transition speed of the Slider. /// @group slider @@ -109,10 +109,10 @@ $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !def /// The background color of the Slider track. /// @group slider -$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 1 )) !default; +$kendo-slider-track-bg: k-color( base-emphasis ) !default; /// The background color of the Slider's track selection. /// @group slider -$kendo-slider-selection-bg: $kendo-color-primary !default; +$kendo-slider-selection-bg: k-color( primary ) !default; /// @group slider /// The opacity of the disabled Slider. $kendo-slider-disabled-opacity: null !default; diff --git a/packages/default/scss/splitter/_variables.scss b/packages/default/scss/splitter/_variables.scss index 638d7af8f9a..f8ccb24f24b 100644 --- a/packages/default/scss/splitter/_variables.scss +++ b/packages/default/scss/splitter/_variables.scss @@ -18,13 +18,13 @@ $kendo-splitter-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Splitter. /// @group splitter -$kendo-splitter-bg: $kendo-component-bg !default; +$kendo-splitter-bg: k-color( surface-alt ) !default; /// The text color of the Splitter. /// @group splitter -$kendo-splitter-text: $kendo-component-text !default; +$kendo-splitter-text: k-color( on-app-surface ) !default; /// The border color of the Splitter. /// @group splitter -$kendo-splitter-border: $kendo-component-border !default; +$kendo-splitter-border: k-color( border ) !default; /// The size of the Splitter split bar. /// @group splitter @@ -47,24 +47,24 @@ $kendo-splitter-collapse-icon-padding-y: k-spacing(0.5) !default; /// The background color of the Splitter split bar. /// @group splitter -$kendo-splitbar-bg: $kendo-base-bg !default; +$kendo-splitbar-bg: k-color( surface ) !default; /// The text color of the Splitter split bar. /// @group splitter -$kendo-splitbar-text: $kendo-base-text !default; +$kendo-splitbar-text: k-color( on-app-surface ) !default; /// The hover background color of the Splitter split bar. /// @group splitter -$kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default; +$kendo-splitbar-hover-bg: k-color( base-hover ) !default; /// The hover text color of the Splitter split bar. /// @group splitter $kendo-splitbar-hover-text: $kendo-splitbar-text !default; /// The selected background color of the Splitter split bar. /// @group splitter -$kendo-splitbar-selected-bg: $kendo-selected-bg !default; +$kendo-splitbar-selected-bg: k-color( primary ) !default; /// The selected text color of the Splitter split bar. /// @group splitter -$kendo-splitbar-selected-text: $kendo-selected-text !default; +$kendo-splitbar-selected-text: k-color( on-primary ) !default; @forward "@progress/kendo-theme-core/scss/components/splitter/_variables.scss" with ( $kendo-splitter-border-width: $kendo-splitter-border-width, diff --git a/packages/default/scss/spreadsheet/_variables.scss b/packages/default/scss/spreadsheet/_variables.scss index 673356e3b5a..80d9eccbea2 100644 --- a/packages/default/scss/spreadsheet/_variables.scss +++ b/packages/default/scss/spreadsheet/_variables.scss @@ -19,26 +19,26 @@ $kendo-spreadsheet-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Spreadsheet. /// @group spreadsheet -$kendo-spreadsheet-bg: $kendo-component-bg !default; +$kendo-spreadsheet-bg: k-color( surface-alt ) !default; /// The text color of the Spreadsheet. /// @group spreadsheet -$kendo-spreadsheet-text: $kendo-component-text !default; +$kendo-spreadsheet-text: k-color( on-app-surface ) !default; /// The border color of the Spreadsheet. /// @group spreadsheet -$kendo-spreadsheet-border: $kendo-component-border !default; +$kendo-spreadsheet-border: k-color( border ) !default; /// The background color of the Spreadsheet header. /// @group spreadsheet -$kendo-spreadsheet-header-bg: $kendo-component-header-bg !default; +$kendo-spreadsheet-header-bg: k-color( surface )!default; /// The text color of the Spreadsheet header. /// @group spreadsheet -$kendo-spreadsheet-header-text: $kendo-component-header-text !default; +$kendo-spreadsheet-header-text: k-color( on-app-surface ) !default; /// The border color of the Spreadsheet header. /// @group spreadsheet -$kendo-spreadsheet-header-border: $kendo-component-header-border !default; +$kendo-spreadsheet-header-border: k-color( border ) !default; /// The gradient of the Spreadsheet header. /// @group spreadsheet -$kendo-spreadsheet-header-gradient: $kendo-component-header-gradient !default; +$kendo-spreadsheet-header-gradient: null !default; /// The background color of the Spreadsheet table headers. /// @group spreadsheet @@ -99,20 +99,20 @@ $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default; /// The background color of the Spreadsheet selection. /// @group spreadsheet -$kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-spreadsheet-selection-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The text color of the Spreadsheet selection. /// @group spreadsheet $kendo-spreadsheet-selection-text: null !default; /// The border color of the Spreadsheet selection. /// @group spreadsheet -$kendo-spreadsheet-selection-border: $kendo-selected-bg !default; +$kendo-spreadsheet-selection-border: k-color( primary ) !default; /// The shadow of the Spreadsheet selection. /// @group spreadsheet -$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default; +$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px k-color( primary ) !default; /// The background color of the Spreadsheet single selection. /// @group spreadsheet -$kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default; +$kendo-spreadsheet-single-selection-bg: k-color( primary ) !default; /// The text color of the Spreadsheet single selection. /// @group spreadsheet $kendo-spreadsheet-single-selection-text: null !default; @@ -122,27 +122,27 @@ $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default; /// The background color of the Spreadsheet partial selection. /// @group spreadsheet -$kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-spreadsheet-partial-selection-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The background color of the Spreadsheet active cell. /// @group spreadsheet $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default; /// The shadow of the Spreadsheet active cell. /// @group spreadsheet -$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default; +$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px k-color( primary ) !default; /// The background color of the Spreadsheet auto fill. /// @group spreadsheet -$kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-spreadsheet-auto-fill-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The text color of the Spreadsheet auto fill. /// @group spreadsheet $kendo-spreadsheet-auto-fill-text: null !default; /// The border color of the Spreadsheet auto fill. /// @group spreadsheet -$kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default; +$kendo-spreadsheet-auto-fill-border: k-color( primary ) !default; /// The shadow of the Spreadsheet auto fill. /// @group spreadsheet -$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default; +$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px k-color( primary ) !default; /// The background color of the Spreadsheet auto fill punch. /// @group spreadsheet $kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-spreadsheet-bg, .5 ) !default; @@ -175,15 +175,15 @@ $kendo-spreadsheet-cell-editor-border: null !default; /// The background color of the Spreadsheet resize handle. /// @group spreadsheet -$kendo-spreadsheet-resize-handle-bg: $kendo-color-primary !default; +$kendo-spreadsheet-resize-handle-bg: k-color( primary ) !default; /// The border color of the Spreadsheet cell comment indicator. /// @group spreadsheet -$kendo-spreadsheet-cell-comment-border: $kendo-color-primary !default; +$kendo-spreadsheet-cell-comment-border: k-color( primary ) !default; /// The border color of the Spreadsheet cell dirty indicator. /// @group spreadsheet -$kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default; +$kendo-spreadsheet-cell-dirty-border: k-color( error ) !default; /// The horizontal padding of the Spreadsheet sheets bar. /// @group spreadsheet @@ -215,7 +215,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-height: 230px !default; $kendo-spreadsheet-insert-image-dialog-preview-img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAAGQCAYAAAAjl1AKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMGVmMzZmZi04YmI1LTRlN2YtOTcwMS04OTU5ZTg1N2ZhY2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDNDOTBDNUQ2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDNDOTBDNUM2OUJGMTFFOTkwMzY4RTI3NjZBQTdENkMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMmZmZjM0Mi05NjEyLTQwM2YtYWZhYS01MTE1ZjQ2NThmMWMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphYjlhMmUwMy1kNmIwLTY3NGMtODc4ZS0yMjUzMjdkNDI5OTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68UHLbAAAgpElEQVR42uzd2ZNc9dnY8TOL9gU0IAkjgwpkI8QOQmI1FS+FHW9VLt/7wpWb900qKV+lTL3vTZzElSvnJilfvM4fkQunfEOw2LUgiUUsNhiMAFsjtIzQrpmJnhOdoaent+np5SyfT1XXiJ4R0hz19Lef31l6ZHZ2NgEAWhu1CQBAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQQAwQQAwQQAwQQAMuP9/gNGRkZsZQAGop/v8WzCBIA8TJj9GFr9swGUYyAUTHEEoLvn+NxGdLwgG1BEAaoxYY7kNZ55C+bIEu4DoFixHGkT0JE8RTMvwWwXxRHBBKhMQGcbPN8PPZx5COZIh6EcEU+AQgex2fRYH8tm4RxqNIcdzGbxa/dROAGKOT3WhnCk5nOzTX5PbqI5zGB2Estmv24XTwDyO2HOtohi/f25ieawgtkqlvW/HukgnqIJULxY1v96tsV0OvRo5mkfZn0YR5tEs920CUB+o9kokvW3mQ6iWYkJc6RNLOtvo7/85S/X/eIXv/jntWvX/mjZsmVfGRsbG3eNWoCClvOq6enpy1f9/Ysvvvjfv/nNb/7zr3/96zM1oRxN2u/THHhAR/p5odr0D1gYtvpg1kdztObj6N///vf/NDEx8e/Gx8eXeZgBlM+VK1cunzhx4n9u3rz5n65Fc6Zm0my0dFs/tdbGuG9/z2FefL1ROOdi+ZOf/GTl1NTU/920adMvxBKgvOI5/upz/X+I5/x47q8bnEaSnByvMugJs1EkRxoEcyw23Lp16x72UAKojjNnzuxfv379N6/+crrBlDnbbsos44TZ7Mo+aTSPHTv2X8USoHriuT8a0GS6HOqUOewl2QW3OMBnYmLiHz1sAKopGhAtSFqfJTH4aA1pSbbRUmx6m5yc/O833njjv/GQAaiu48eP/6+NGzf+++TLg4AaLc0mSQWWZJuN1iNr1qz5vocKQLVdbcG/TnJ2cZpBBrPV1Xnmps1ly5Zt8lABqLarLdiYNL9YTbOmlCaY9fFsdHm8kbgogYcKQLVda0HTVpR9wuwonq7gA0CD418qtSTbzdQJQIW7macujOZgYwBA7psxmrONIKAA5LIN42XaIFeuXEmmpqaSixcvJjMzMx5qAMOYxEZHkxUrViTr16+P68T2shGVe3uvvohYTk5OCiXAkMXz8Pnz59PhZePGjb2IZj5eCJTlHygmS7EEyFc447m5NJNzWb6ReCUDQL5cuHBBMPP4SgaAfOn39coFEwBypjQH/bhCEAAmTAAQTAAQTAAQTAAQTABAMAFAMAFAMAFAMAFAMAFAMAFAMAFAMAEAwQQAwQQAwQQAwQSAAhkvyzcyMjLiXxMAEyYACCYACCYACCYACCYAIJgAIJgAIJgAIJgAIJgAIJgAIJgAIJgAgGACwBJ5ey8AMGECgGACgGACgGACgGACgGACgGACAIIJAIIJAIIJAIIJAIIJAKXg4usAYMIEAMEEAMEEAMEEAMEEAMEEAMEEAAQTAAQTAAQTAAQTAAQTAErBxdcBwIQJAIIJAAMzbhMA9cbGxpLx8fH0Fr8eHR1NP8auj+wWZmdn527T09PJzMxM+vHKlSvpLX4NggmUKpDLly9Pb8uWLUsD2YnaeMb/o14E9PLly8mlS5fSm4AimEDhRBRXrlyZ3mKSrHXmzJnk5MmTyalTp5IvvvgivV28eDG9RfQigukTyLUpdMWKFWls165dm96uv/76ZMOGDcn69evTz8UtxNR54cKF9BYxBcEEcivCtmrVqrmIZYGcnJxMPv300+Rvf/tbGsZMLLc2ky29nj9/Pv3vY8eOzft8/Bk33XRTsmXLlmTTpk3JunXr5qIaf0b8vpg8oQhGWv0w9OQP+PJ0j5Gaj9lttOYW6zljV/8+J7v5c+p/UIFkQbzWrFkzb5r88MMPk7/85S9pKOt18tzQ6msafe7mm29Otm3bltx2223zonv27Nl5kaZc4sVSl/3YcPXD9LXbTM1ttuaW1HxM+tk0wYSSi32SMdHFx5BNku++++7c0mqvItlpROPvsmPHjrnJM8TfJZZ+6/9OCKZgCib0VeyjjFDGPsrw+eefpxPlO++80/NpsptpM3PXXXelE+eNN96Y/nfs34xw2scpmIIpmNB3sfwa+wuzo13/9Kc/JXv37h1oJFt9vtH9jz32WLJ9+/b01xHL2K9qmVYwBVMwoW8/bxHKbKr8+OOPkwMHDqT7CPMwTbb7XEzEu3fvTrZu3To3bUY4+/08hWAKJlRInAcZp3HE/sE49ePgwYPpfsphT5OLnTRD7N/ctWtX+j3FPs2pqSnncArm0IPptBIogYjkddddly7BxkE9L7/8cseT2bCmyVb3HzlyJDl69Gjy1FNPpU+2cU7n6dOnHRDEUJVmwownCaiiOK8yJsv4WfvrX/+avPTSS+mpGkWZJlt9LibMiGYcFBRfE5Om8zaLZ+PGjaWYMF18HQosDu7JYvn+++8ne/bsaRnL7Lqv3Xy+9rqx3Xyu099Te398L88++2zy3nvvpd9jduUgGAZLslDgyTIO8ImQ/PnPf05eeeWVQk+Tre6PFwLxMY6ije85fm3SZNBMmFDEV7rj43OTZbNYFm2abHf/888/nx7ElE2a9de/BcEE5v/Qjo6mB/hky7D1sew2hJ3+3l4GdLH3x6SZLc9mBzmBYAILZNNVhOKjjz5Kj4btVQjzNE22uv+5555LPvjgg3kvHGAQxsv0RAJlFxdPj1NI4jJ3EctBnxLS632Tnd7fKJqxLTZv3pxe7CAupQcmTCCVvS1XiGXYZuckLnVizNM02ey++N4jmnExg7iqkSNnEUwgFSsoMUmF2Id34sSJjqPWj8/18/5O4xlvbp3tv41p0yoTggmkQYh9dnFt2FdffbWjqbCbyXCQU2Mn02S7qL7xxhvp+3nGtoltBIIJFRanT2QXU9+3b1/HU+FiJr28TpOdRPXFF19MP8Y2cqoJggkVVrsUGwe3DOKUkF6dKtLLabLZ/XHN3LfeemvetgLBhIqJg1liaoqjYltdnGBQ50cOI4jtvjZ+/cc//jF9x6LYVg4AQjChgrKjYuO8w35Nk0sJaK+j2s3XZuJNsmu3GQgmVEScRhITU0xOb7/9du5PCRnENNnqaw8dOpR89tln6TaLbQeCCRWRHejzySef5PpydYOcJuuXYuvvi7c3q912IJhQ9h/M0dH0ij7hnXfeyd00OYggtvvaRvcdPnx4bjp3nVl6zaXxIIfiwJV4TMf1YrO3scr75ery8LWxreIdTeJtwGLKPH/+vAcTJkwoezBDHOxjmmy/FFt7fwSzdhuCCRPK+ip2dDQ9cGVqaiqdMAc5NRZpmmx2X2yzuGze9ddfn27LmZkZDypMmFBG2RGecXTsoKfGok2TzX7/p59+Om9bgmBCCWUH+xw9ejT3R7q2+38sNZ7d/v4PP/xw3raEXrAkCzkNZjYl1YahmaUudy72/n4spfby98dF6gUTwYQSGxsbS4+Ojf2XFy9e7Hv4ihrEdvfF0bHZfszYpvG+mSCYULJghtOnTw88fGWL5+TkZBrMOIBKMOkF+zAhh8GM6ag+BHm++Hke92MeP3583jYFEyaU6RXstavTxIRpmlza12bb0BV/EMw6rvRDKX4gr70BcuzDbDRFDTuIRYpnbMNswvT8gGBCyWRP7OfOnRPEJX5ttg3FEsGEEgfzwoULhb/izrDjmV1HVjARTChxMOsv5yaei//aK1euCCaCCWUPZrzrhiAu/Z1LBBPBhJJbygE/4tn6qkggmFCSUMZEFJd0u3z5cqGClLe/a3bhdfFEMKHEwYxTIbIlxbIEbdDnlGYXLBBMBBNKGsxsOsqO8ixj/AYRz5UrVwomggllD+bq1asXXB4vD0Ea9u9fzP8jtqFg0kuuGQU5kl0kfP369fNiMKjrr/bjWrG9vNbsYq6Zm21DF17HhFnHoeOUQXb+5XXXXVf5pdil/j9iG2bb1PMDggklnTA3bNhQyCAO+mtb3b9x48Z5L0JAMKGEwYz3cazaOZK9jmcWzOyKPyCYUCIxDcWTfiwnxlGecU3ZPMQv79Nk/f2rVq1KJiYm0vtNmPSKg34gZ+KCBWHLli2FPDCn26/t9v/R6P9z6623ztuWIJhQQtkSYvak30lMlhq0QQSxl0fAtro/brfddtu8bQm9YEkWcjphfuUrX6nc1Xl6df9Xv/pVEyYmTCi72OcWB//Efsxt27a1nMSKuhTbr/tDTJc33HBDug3tv0QwoeSy68h+/etfL/xS7CDvj9s999wzbxtCr1iShZwGM470jAkzrivbi/fHHPTyar+XYht9LrbV3XffLZiYMKEqYikx2/9233335XqaHNaU2ehzDz/8cPoxtp3lWASTwjt+/LiN0IGLFy+mH7du3drz+PU6fIPYN9ns/trP3X777fO2HfSSa8ky8Fg+//zzyZNPPpls2rTJBmkhTomIA1fiaNkHHnggOXjw4IJINApHs6AM6msHcX+jz+3evTu55ZZb0m0W285zAiZMCh3LPXv2pO/zGNE8duyYjdJGdqWfOPin22kyr0fALnaKbfe5u+66a942A8Gk8LHMntREs73YFxcT00033ZR885vfzEUQlxq9pQS02ee+973vJTfffHO6rZx7iWBSmljWTk+i2d65c+fSj/fee2+ybt26wl6urpcBrf1cvO/lQw89NG9bgWBSyFhGFOtjKZqdi6kpO0XiqaeeGug02cvL1fXi9zT6fU8//XT6MbaRN4tGMCl0LNu96s+iOTk5aaM1ES84IhJf+9rXkm9961uluMBAN9Nk/ed37dqVbN++Pb2/2YsyEExKEcvaaMayrWgmTYORbcs4LzN7r8eiXK6uV9NkrXiT7XjxUPuCAgSTQsYynsTi0P5Ob3HunEmzuTiYJTu/8Dvf+U4yPj5eqWmy9vPxvf/4xz9OP8ZSrKv6IJgUOpbdsDzbfvtkR81+97vfXXTI8nKBgW4/l30+YhnvSBLbwlIsgkkhY/nCCy8s+QlMNJuLYJw9ezb9eMcdd8xFMy9TZi8/1+zPi1ju2LFj3raAQRjp94Ot5mobIzUfs9tozW0sblf/Pie7+XNOnz7tX3OIIm69iGWtlStXuiJQE2NjY8maNWvSn6833ngj+cMf/tAwNs0i1Iv7h/G5H/7wh+lVj7JYOiq2GOKt6rrsx4arH6av3WZqbrM1t6TmY19fQJkwyWUss0kz/r9OOVkoQhEHAcWTQ5yfWTtplmmarPWDH/xgLpbxvYslgyaYLEm2DBtxW8wBPos5EEg0G4vrpWZHh0Y042o3ebtcXSch7OTzP/rRj5IHH3xw7vSR+N5BMClULGNfY7+v3SmazcWRs9mkGW+cnB05mofL1S31SNjsaNif/vSnyf333z83Wbr0HcNiHya5jmWtFStW2KfZRO0+zU8++ST5/e9/n5w8eXIuPq2mt8Xcv5TPLfbzExMT6QuAeAcS+yyLrSz7MAWTrmLZj32WncgOBMpO3OdLo6OjyerVq9N4Rliee+65ZP/+/T0J3lJC2M3vjSv4fPvb306WLVs2t7/WG0ILpmAKpliKZk9/3mL7LF++PP3v9957L3n22WfTn488T5O1T6xxbdg777wz/e+4IEGsYjh1RDAFUzALGcs8vN9gtjwrmo3FZLZq1aq5n7948+n6U0+GMU22+prvf//7yc6dO+e+Jl6U2V8pmIIpmGIpmgOfNj/99NPk7bffTvbu3ZuLaTLzyCOPJHfffXeyZcsWU6VgCqZgFtvnn38+9GVY0exeHGka4Yx9m+Ho0aPJBx98kOzbty+NU7+WZFt9Tfy77d69O9m2bVt6UE+IfZURSqeMCKZg9jmYU1NTHpV9nCzzfL3OiMETTzzh6NkOwhmhysIZ3n333eTNN99MPw5imox9k3H6S1zaLhOhjFOHhLK84k2+BVMwxVI0CxnO2McZt9pVhI8//jh5//33k48++mjBv3m302TsR926dWv6Pp633nprcsMNN8x9LvZPxk0oBVMwBbPwsXzxxRcL9U4QlmcX/7OZhbN26swCGheKiNupU6fSW5zakV1lJ3s7rez3xwuWOA/0+uuvT2/xb7B58+Z5gcymySyU9lEKpmAKpljmYNIUzcWJczhj8oxwxsean9slieeXCGyEMj46l1IwBVMwSyMmi4hlTBNFJZq9CWjEMz5mt+z6vrU/19nzR3YpuwhidotICiSCKZiljmUZ3pA3lmdFEwSzpy8k/VNStliGOOoyvh9vQg0IJmLZQTRfeukl0QQEE7FsJ06EF01AMFlyLCMm/Xrz57zcskkzjv4FEEy6imVZJ8t62T5N0QS6VZqjZM+cOeNfcxGxLPMybCtxysnjjz/u6FkYoHXr1nXbD0fJIpbDYp8mYMI0YXYcyzy9RdewxHmaJk0wYZowaRjL7AAfnHICCCYtYlnVZdhW0Xz55ZdFExBMxLKdmLgjmo6eBdqxD7PETpw4IZYdyvZp3njjjTYG9Jh9mIhlibi4AVCZCfOLL77wr3mNA3yWNmk+9thjjp6FHlq7dq0JE7Es46TpQCBAMCsQy3iyF0vRZPg8fgSTnMfSPsveRfOVV17xpEdXYl/4888/nxw7dszGKBH7ME2WtJDt03T0LIuJ5Z49e9IXr3Ht4m984xvJpk2bKr1N7MMkF+JoWLHs76TpPE26iWWIn0uTZnkIplgimvQhlhnRFExyEkv7LEWTfMQyotjszdjj8fPCCy+IZsHZh2myZBFin+ajjz5qnyYLYtnJi9fYp/nkk09Wbp9mWfZhliaYZ8+ercQDzwE++YmmixsQR1F3GsvaaFbtQKA1a9aUIpiWZAsWyzjVQSyHyykn1May2TJss1s8fuzTLCbBLFgs7bMUTfIVy24fP6JZPJZkC8A+y/yyT7OasYwDeHrx4rUq+zQtySKWzE2ajp4Vy27Ez7WjZ4tDMMUS0WQIsRTN4rEkm+NYOsCnWGJ59pFHHrE8W0K151n2SyzPPvHEE6VcnrUki1iyYNJ89dVXTZpi2fWk+eKLL5o0c0wwxRLRZMixFE3BRCxFk0LHMvYtDvrnUTTzqzT7MM+dO1fof4g4zzKeZMWyPOzTLK5+HeCzGGU65WT16tXd9sM+TMTSpEneY7nYK/j0+haPH5NmvgjmkMUyrFiWO5p79+4VzQLGMg8sz+aLJVmxZABieXb37t2WZ3Ms22eZx8tPFv2UE0uyiCUmTbE0aVaIYIolA4zmvn37RFMsRVMwEUs6edITzfzFctgH+DgQqBjswxxwLGNZTizJ9mnecMMNNsYQYxnxKeJb5mX7NIvyJub2YSKWdC3bpxmnFDF4sd0jlkWZLJtNmt6P1YRZugnz5MmT6TJsPMih1vLly02aQ4plGd6MPSbNxx9/PPeTZlkmzNIEM68PfpMl7cTy7K5du5xyMgBFXoZtF808n3KyatWqUgTTkqxYMmSOnhXLpYjnl5deesny7ACYMPscS8uwdMrybP9jWeYXr7FSkdcDgUyYiCU9denSJQcC9SmWMYGVfaUnnm9Mmv0lmH2IZSyviSXdRjMeP6LZ21iWbRm2Gcuz/WVJVizJoViejQOBLM+KZTfydvRsWZZkBVMsEc3SqT3Psqpin2ZeomkfJnPiPMv9+/eLJT0Vy7PxuLI8K5bdiOejl19+2fKsCTM/E2bE0mRJvyfNhx9+2KQpll2J5dnHHntsqJOmJVnBFEsGGs1Ynp2YmLAxWsSyCkfDdiNbnh3WxTEsyVacWDJI2fJs7CtHLBcrO+XExTFMmKlB/qDEk5Z9lgxr0rQ8O19VzrPshWEtz8afa8KsILEkD5OmA4HEstvBwoFAJsyB/MBYhiUvYp/Uzp07Kz1pWoZd2uNnkJOmCbNixJI8icfhgQMHKjtpiuXSHz8mTRNm32JpGZY8in2aVZs0xbK3k9+jjz7a90nThFmhyVIsyavYpxmTZlWOno1YxmQklr0R2/GVV15x9KwJUyyp1qQZR8+W+TxNseyfbJ9mv87TLMuEKZgtYhmv3MWSIkUzlmfLGE2xLHY0LcmWmFhSRGVdnhXLwcgOBLI8K5hiiWgWUHwfsY9NLAcXTfs0W0y8lmS/dOrUqXSfZTzpQJHF8uxDDz1U6OXZiKXJcjhieTaOnu3V8qwl2ZKJWMYrc7GkLJPmwYMHCztpiqVJM48EsyaWlmEp25NeEaMplqKZV6VZku02drHP8rXXXhNLSqtIy7NxgE88SQ/r/W1ZKLu4wVKWZ2OJt8t+OK0kL8EUS6oinrAefPDBXEczi6XJMp+Pn6VEsyzBrOySrFhSJXlfnhXL/D9+LM9WdMKMfZZiSRXF8mzeJs3s1BHLsOWdNC3JFjSYYoknvRXJAw88kItoOs+ymI+fRx55ZFHRFMwCBjOLpVNHMGkuH3o0xbI60bQPs2AilrEPRyzh/5+neejQoXRf/rBi+eqrr4plQcWAEv9+VdunWYlgZrG0DAvDj2YWS/ssix/NvXv3VupNzEu/JCuW0Fq2T3PDhg0mS7p6/MTybKs3MbcPswDBPH36tH2W0IFsn2Y/oxmTrH2W1YymYOY8mBFLkyXkI5oRS5Nl+aO5e/fuhtF00E/ORJizm1jC4tXu06z9eVrqTSyroXafZv1joDSdKcuEmS27OhoW8jNp2mdZ3Umz9pSTeEyVYcIsVTAjlvEK2WQJw49mxDImDrGsZjR37do1F03BzFkwjx07lsbSZAm9sWzZsq6jKZbURrMswSzNPkyxhN66fPlycvjw4UWfpymWhFjp27dvX6nO0yxNMMUS+vNztZhoiiX10YzHQ1mMl+UbKdORWJDHSfP+++9vuTwbUY2JIp4k/TxSxmFm1D8n0Gk0m02acb/JkrITTKDjaL7++uvp0ehiiWACtBDLa0eOHEmmp6fFksqxDxPoWJxqct999yVjY2NzsbTPEhMmQF0sd+7cmaxdu3beAT4gmADXxInnEct169bNxdIyLFVjSRZoO1k+9NBDaSzjPEuxRDABWsQyJsv9+/fbZ0llWZIFOoqlyRITZkl4xQu9j2XtAT5iiWACtImlZViwJAu0iGW2zxKwJAtkTwbj4wtiaRkWShhMYGmT5YMPPpjGMq4V62hYWMiSLIjlvFi6gg+UfML0Shi6eAIYH284WQIlDiaw+MnygQcesAwLJkygVSzvv//+BVfwAUyYQIPJUixBMIEOYnngwIH0TaGt0ECFgukHHtrHMpZha2NpsoTOOa0ExBKo0oQJtI9lHA372muvWYaFKgfTDz80+AEfH58XS5MlCCbQYLK877775k4dMVnC0tiHCRWJpckSTJgpr5rh2g/1+LhYgmACnUyW2dGwBw8eFEsQTKCTWFp9AcGcx5MClf5BvrYMa7KE/nHQD4glUKUJE6oolmHvvffeufMsDx065NQRMGECrWJpsgQTZke8oqZSP7jj42IJggm0myzvueeeebG0DAuCacKEusmyUSwBwQRqYhnLsGvWrJl3gA8wGA76gYLG0j5LMGECNbJ9llksDx8+bJ8lCGb3PHlQ1smyPpYmSxgOS7JQgFiePn1aLMGECdSLZdi777577mhYy7AgmD3jiYQyTZb1sTRZgmACdbG0zxIEE2ghW4Z1NCwIZl95UqHok2WjWAL54ShZyFksX3/9dbEEwQSaxTJOHYlY2mcJOf15tQkgH7G0zxIEcyA8yVC0WN51110LYgkIJtAklrEMe/nyZS/6IOfsw4Qhx9JkCSbMgfLqnKLEcvXq1WIJggl0Ess33njDMiwUjCVZGEIsTZZgwhwar9TJayx37NghlmDCBDqN5ZtvvimWYMI0YUJ9LO+8884FsfQ4BRMmUDdZxqkjU1NTyVtvvWWyBBMm0CiWJksQzNzyhEQeYtloGRYoB0uy0IdYWoYFwQQ6iKW36ALBBMQSqvnzXpZvxD5MhhHL7du3L1iG9VgEE2aujY2N+ddkKLGMU0eOHDlinyWU/Lm5NBPm+vXrk5MnT3p0MvBYmiyhuYmJCcHMm1tuuSU5c+ZMMj097RFKX18tN4ol0PjF5W233Vaa72dkdna2v3/Al6+6R2o+ZrfRmlvM7WNX/z5dj4kXLlxIjh49mj6RCSf9+OG/4447xBI6eGEZk2XEMn5eltCPDVc/TF+7zdTcZmtuSc3HpJ9Ny0MwR67FMn49vpRgAlAe14J55Vokp6+FcWjBzMtBPwu+aQAqL1dtGM3JxgCAXDdjNGcbQkAByGUXRvO2Qaanp0UToOJmZmZyF85hBbPRN5/ed+UqDxWAart8+fKVVq0oezAb7bydrdsAsxcuXJj0UAGotnPnzk0mLY6GTYZwQFBelmTnfn3mzJnfe6gAVNupU6f+T5NADk2eTitJb7/97W//+eoo7qoDABV16dKl6d/97nf/1GDCHKpBXrgg/c8GHxdc9efEiRP/bcOGDf/Wwwagej744IP/sW3btv+YdHZ1n3kRK8uVfmpDWR/LBVf+OX/+/HMrV67c6aEDUB3Hjh07sHnz5n+VNL+yT/3EObBgDnpJttnRTvW3mZ/97GdPX7hw4S0PH4BqmJycPPLzn//86RaRnG3TlP4OgAOeMJtNmUndhDm3RHvixIn/snr16n9YsWLFMg8ngPK5Ohxd/uyzz357++23P5MsXIKdSRaeUdE0mGW/luxsk4kzvdjuxMTEM7/61a9uPXr06L9MTU19dunSpSv9jjwA/RMXJbh48eKVkydPfvbhhx/+yzPPPHPr1Vj+MvnyXUnaLr0OwzAmzEZTZu202ektafARgHxqdLDOYm5JJwHtZ9PGc7IRRxpsiFaRHGkRXgDyGctGwUzaBDI371gyPsSNN9Immo3imYglQKmimXQQyaEe7JOHCbNVNEeabKDa++sjKZoA+Y9lJ/HMXSyHHczFTpr1X18fTkcCAZQnnLmKZR6C2SyaSdJ+iTYXGxCAvsUzN7HMSzAbRbCTcAJQnmC2imIuGjCew4030mZDCShAeaOZu1DmMZiNNtBI3jcgAAONqGAuYsM5GhZAHAWzbBsYgHIYtQkAQDABoCf6viTrnUUAMGECgGACAIIJAIIJAIIJAIIJAIIJAIIJAIIJAIIJAAgmAAgmAAgmAAgmAAgmAAgmAAgmACCYACCYACCYACCYACCYAFB0/0+AAQDHHxQEMMRIrwAAAABJRU5ErkJggg==" !default; /// The border of the Spreadsheet image Dialog preview. /// @group spreadsheet -$kendo-spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default; +$kendo-spreadsheet-insert-image-dialog-preview-border: k-color( border ) !default; /// The border radius of the Spreadsheet image Dialog preview. /// @group spreadsheet $kendo-spreadsheet-insert-image-dialog-preview-border-radius: k-border-radius(md) !default; @@ -227,7 +227,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000p $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: k-border-radius(md) !default; /// The text color of the hovered Spreadsheet image Dialog preview. /// @group spreadsheet -$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default; +$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: k-color( surface-alt ) !default; /// The width of the Spreadsheet drawing handle. /// @group spreadsheet @@ -243,13 +243,13 @@ $kendo-spreadsheet-drawing-handle-border-style: solid !default; $kendo-spreadsheet-drawing-handle-border-width: 1px !default; /// The border color of the Spreadsheet drawing handle. /// @group spreadsheet -$kendo-spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default; +$kendo-spreadsheet-drawing-handle-outline-color: k-color( primary ) !default; /// The outline color of the Spreadsheet drawing handle. /// @group spreadsheet -$kendo-spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default; +$kendo-spreadsheet-drawing-handle-border-color: k-color( primary ) !default; /// The border color of the Spreadsheet drawing handle. /// @group spreadsheet -$kendo-spreadsheet-drawing-handle-bg: $kendo-color-primary !default; +$kendo-spreadsheet-drawing-handle-bg: k-color( primary ) !default; /// The border radius of the Spreadsheet drawing handle. /// @group spreadsheet $kendo-spreadsheet-drawing-handle-border-radius: k-border-radius(lg) !default; @@ -261,7 +261,7 @@ $kendo-spreadsheet-drawing-outline-style: solid !default; $kendo-spreadsheet-drawing-outline-width: 2px !default; /// The background color of the Spreadsheet drawing anchor. /// @group spreadsheet -$kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-spreadsheet-drawing-anchor-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The vertical spacing of the Spreadsheet DropZone. /// @group spreadsheet diff --git a/packages/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss index 9f180ea523b..ebd1a6c178b 100644 --- a/packages/default/scss/stepper/_variables.scss +++ b/packages/default/scss/stepper/_variables.scss @@ -54,7 +54,7 @@ $kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default; $kendo-stepper-bg: null !default; /// The text color of the Stepper. /// @group stepper -$kendo-stepper-text: $kendo-component-text !default; +$kendo-stepper-text: k-color( on-app-surface ) !default; /// The border color of the Stepper. /// @group stepper $kendo-stepper-border: null !default; @@ -87,17 +87,17 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc /// The background color of the Stepper indicator. /// @group stepper -$kendo-stepper-indicator-bg: $kendo-component-bg !default; +$kendo-stepper-indicator-bg: k-color( surface-alt ) !default; /// The text color of the Stepper indicator. /// @group stepper -$kendo-stepper-indicator-text: $kendo-component-text !default; +$kendo-stepper-indicator-text: k-color( on-app-surface ) !default; /// The border color of the Stepper indicator. /// @group stepper $kendo-stepper-indicator-border: #cccccc !default; /// The background color of the hovered Stepper indicator. /// @group stepper -$kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default; +$kendo-stepper-indicator-hover-bg: k-color( base-hover ) !default; /// The text color of the hovered Stepper indicator. /// @group stepper $kendo-stepper-indicator-hover-text: null !default; @@ -110,24 +110,24 @@ $kendo-stepper-indicator-hover-border: null !default; $kendo-stepper-indicator-disabled-bg: null !default; /// The text color of the disabled Stepper indicator. /// @group stepper -$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default; +$kendo-stepper-indicator-disabled-text: color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) !default; /// The border color of the disabled Stepper indicator. /// @group stepper $kendo-stepper-indicator-disabled-border: null !default; /// The background color of the Stepper's done indicator. /// @group stepper -$kendo-stepper-indicator-done-bg: $kendo-color-primary !default; +$kendo-stepper-indicator-done-bg: k-color( primary ) !default; /// The text color of the Stepper's done indicator. /// @group stepper -$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default; +$kendo-stepper-indicator-done-text: k-color( on-primary ) !default; /// The border color of the Stepper's done indicator. /// @group stepper $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default; /// The background color of the Stepper's hovered done indicator. /// @group stepper -$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default; +$kendo-stepper-indicator-done-hover-bg: k-color( primary-hover ) !default; /// The text color of the Stepper's hovered done indicator. /// @group stepper $kendo-stepper-indicator-done-hover-text: null !default; @@ -137,10 +137,10 @@ $kendo-stepper-indicator-done-hover-border: null !default; /// The background color of the Stepper's disabled done indicator. /// @group stepper -$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), color.mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default; +$kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color( primary ) 60%, transparent) !default; /// The text color of the Stepper's disabled done indicator. /// @group stepper -$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default; +$kendo-stepper-indicator-done-disabled-text: k-color( on-primary ) !default; /// The border color of the Stepper's disabled done indicator. /// @group stepper $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default; @@ -180,20 +180,20 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done- $kendo-stepper-label-text: null !default; /// The success text color of the Stepper label. /// @group stepper -$kendo-stepper-label-success-text: $kendo-color-success !default; +$kendo-stepper-label-success-text: k-color( success )!default; /// The error text color of the Stepper label. /// @group stepper -$kendo-stepper-label-error-text: $kendo-color-error !default; +$kendo-stepper-label-error-text: k-color( error ) !default; /// The text color of the hovered Stepper label. /// @group stepper -$kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !default; +$kendo-stepper-label-hover-text: k-color( on-base ) !default; /// The text color of the disabled Stepper label. /// @group stepper -$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default; +$kendo-stepper-label-disabled-text: color-mix(in srgb, k-color( on-app-surface ) 60%, transparent) !default; /// The text color of the optional Stepper label. /// @group stepper -$kendo-stepper-optional-label-text: $kendo-subtle-text !default; +$kendo-stepper-optional-label-text: k-color( subtle ) !default; /// The opacity of the optional Stepper label. /// @group stepper $kendo-stepper-optional-label-opacity: null !default; diff --git a/packages/default/scss/switch/_variables.scss b/packages/default/scss/switch/_variables.scss index ac672050bfd..ede31dfda06 100644 --- a/packages/default/scss/switch/_variables.scss +++ b/packages/default/scss/switch/_variables.scss @@ -33,13 +33,13 @@ $kendo-switch-sizes: ( /// The background of the track when the Switch is not checked. /// @group switch -$kendo-switch-off-track-bg: $kendo-component-bg !default; +$kendo-switch-off-track-bg: k-color( surface-alt ) !default; /// The text color of the track when the Switch is not checked. /// @group switch -$kendo-switch-off-track-text: $kendo-component-text !default; +$kendo-switch-off-track-text: k-color( on-app-surface ) !default; /// The border color of the track when the Switch is not checked. /// @group switch -$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-switch-off-track-bg, 8% )) !default; +$kendo-switch-off-track-border: k-color( border ) !default; /// The background gradient of the track when the Switch is not checked. /// @group switch $kendo-switch-off-track-gradient: null !default; @@ -71,7 +71,7 @@ $kendo-switch-off-track-focus-border: null !default; $kendo-switch-off-track-focus-gradient: null !default; /// The ring around the track when the focused Switch is not checked. /// @group switch -$kendo-switch-off-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) , .08 )) !default; +$kendo-switch-off-track-focus-ring: 2px solid color-mix(in srgb, k-color( on-app-surface ) 8%, transparent) !default; /// The background of the track when the disabled Switch is not checked. /// @group switch @@ -88,13 +88,13 @@ $kendo-switch-off-track-disabled-gradient: null !default; /// The background of the thumb when the Switch is not checked. /// @group switch -$kendo-switch-off-thumb-bg: $kendo-base-bg !default; +$kendo-switch-off-thumb-bg: k-color( surface ) !default; /// The text color of the thumb when the Switch is not checked. /// @group switch -$kendo-switch-off-thumb-text: $kendo-base-text !default; +$kendo-switch-off-thumb-text: k-color( on-app-surface ) !default; /// The border color of the thumb when the Switch is not checked. /// @group switch -$kendo-switch-off-thumb-border: $kendo-base-border !default; +$kendo-switch-off-thumb-border: k-color( border ) !default; /// The background gradient of the thumb when the Switch is not checked. /// @group switch $kendo-switch-off-thumb-gradient: null !default; @@ -115,10 +115,10 @@ $kendo-switch-off-thumb-hover-gradient: null !default; /// The background of the track when the Switch is checked. /// @group switch -$kendo-switch-on-track-bg: $kendo-color-primary !default; +$kendo-switch-on-track-bg: k-color( primary ) !default; /// The text color of the track when the Switch is checked. /// @group switch -$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-switch-on-track-bg )) !default; +$kendo-switch-on-track-text: k-color( on-primary ) !default; /// The border color of the track when the Switch is checked. /// @group switch $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default; @@ -153,7 +153,7 @@ $kendo-switch-on-track-focus-border: null !default; $kendo-switch-on-track-focus-gradient: null !default; /// The ring around the track when the focused Switch is checked. /// @group switch -$kendo-switch-on-track-focus-ring: 2px solid if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-switch-on-track-border, .25 )) !default; +$kendo-switch-on-track-focus-ring: 2px solid color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// The background of the track when the disabled Switch is checked. /// @group switch @@ -170,13 +170,13 @@ $kendo-switch-on-track-disabled-gradient: null !default; /// The background of the thumb when the Switch is checked. /// @group switch -$kendo-switch-on-thumb-bg: $kendo-base-bg !default; +$kendo-switch-on-thumb-bg: k-color( surface ) !default; /// The text color of the thumb when the Switch is checked. /// @group switch -$kendo-switch-on-thumb-text: $kendo-base-text !default; +$kendo-switch-on-thumb-text: k-color( on-app-surface ) !default; /// The border color of the thumb when the Switch is checked. /// @group switch -$kendo-switch-on-thumb-border: $kendo-base-border !default; +$kendo-switch-on-thumb-border: k-color( border ) !default; /// The background gradient of the thumb when the Switch is checked. /// @group switch $kendo-switch-on-thumb-gradient: null !default; diff --git a/packages/default/scss/table/_variables.scss b/packages/default/scss/table/_variables.scss index 0802636d7e2..3b04d99827a 100644 --- a/packages/default/scss/table/_variables.scss +++ b/packages/default/scss/table/_variables.scss @@ -65,27 +65,27 @@ $kendo-table-sizes: ( /// Background color of tables. /// @group table -$kendo-table-bg: $kendo-component-bg !default; +$kendo-table-bg: k-color( surface-alt ) !default; /// Text color of tables. /// @group table -$kendo-table-text: $kendo-component-text !default; +$kendo-table-text: k-color( on-app-surface ) !default; /// Border color of tables. /// @group table -$kendo-table-border: $kendo-component-border !default; +$kendo-table-border: k-color( border ) !default; /// Background color of table headers. /// @group table -$kendo-table-header-bg: $kendo-component-header-bg !default; +$kendo-table-header-bg: k-color( surface )!default; /// Text color of table headers. /// @group table -$kendo-table-header-text: $kendo-component-header-text !default; +$kendo-table-header-text: k-color( on-app-surface ) !default; /// Border color of table headers. /// @group table -$kendo-table-header-border: $kendo-component-header-border !default; +$kendo-table-header-border: k-color( border ) !default; /// Gradient of table headers. /// @group table -$kendo-table-header-gradient: $kendo-component-header-gradient !default; +$kendo-table-header-gradient: null !default; /// Background color of table footers. @@ -111,7 +111,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default; /// Background color of alternating rows in table. /// @group table -$kendo-table-alt-row-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) !default; +$kendo-table-alt-row-bg: color-mix(in srgb, k-color( on-app-surface ) 5%, transparent) !default; /// Text color of alternating rows in table. /// @group table $kendo-table-alt-row-text: null !default; @@ -122,7 +122,7 @@ $kendo-table-alt-row-border: null !default; /// Background color of hovered rows in table. /// @group table -$kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) !default; +$kendo-table-hover-bg: color-mix(in srgb, k-color( on-app-surface ) 11%, transparent) !default; /// Text color of hovered rows in table. /// @group table $kendo-table-hover-text: null !default; @@ -147,7 +147,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default; /// Background color of selected rows in table. /// @group table -$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) !default; +$kendo-table-selected-bg: color-mix(in srgb, k-color( primary ) 25%, transparent) !default; /// Text color of selected rows in table. /// @group table $kendo-table-selected-text: null !default; diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss index 53bd9980ab0..97a97bbf5f2 100644 --- a/packages/default/scss/tabstrip/_variables.scss +++ b/packages/default/scss/tabstrip/_variables.scss @@ -61,10 +61,10 @@ $kendo-tabstrip-wrapper-border: null !default; $kendo-tabstrip-bg: null !default; /// The text color of the TabStrip. /// @group tabstrip -$kendo-tabstrip-text: $kendo-component-text !default; +$kendo-tabstrip-text: k-color( on-app-surface ) !default; /// The border color of the TabStrip. /// @group tabstrip -$kendo-tabstrip-border: $kendo-component-border !default; +$kendo-tabstrip-border: k-color( border ) !default; /// The horizontal padding of the TabStrip items. /// @group tabstrip @@ -105,7 +105,7 @@ $kendo-tabstrip-lg-item-padding-y: k-spacing(2.5) !default; $kendo-tabstrip-item-bg: null !default; /// The text color of the TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-text: $kendo-subtle-text !default; +$kendo-tabstrip-item-text: k-color( subtle ) !default; /// The border color of the TabStrip items. /// @group tabstrip $kendo-tabstrip-item-border: null !default; @@ -118,7 +118,7 @@ $kendo-tabstrip-item-gradient: null !default; $kendo-tabstrip-item-hover-bg: null !default; /// The text color of the hovered TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-hover-text: $kendo-component-text !default; +$kendo-tabstrip-item-hover-text: k-color( on-app-surface ) !default; /// The border color of the hovered TabStrip items. /// @group tabstrip $kendo-tabstrip-item-hover-border: null !default; @@ -128,13 +128,13 @@ $kendo-tabstrip-item-hover-gradient: null !default; /// The background color of the selected TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-selected-bg: $kendo-component-bg !default; +$kendo-tabstrip-item-selected-bg: k-color( surface-alt ) !default; /// The text color of the selected TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-selected-text: $kendo-link-text !default; +$kendo-tabstrip-item-selected-text: k-color( primary ) !default; /// The border color of the selected TabStrip items. /// @group tabstrip -$kendo-tabstrip-item-selected-border: $kendo-component-border !default; +$kendo-tabstrip-item-selected-border: k-color( border ) !default; /// The gradient of the selected TabStrip items. /// @group tabstrip $kendo-tabstrip-item-selected-gradient: null !default; @@ -189,20 +189,20 @@ $kendo-tabstrip-content-border-width: 1px !default; /// The background color of the TabStrip content. /// @group tabstrip -$kendo-tabstrip-content-bg: $kendo-component-bg !default; +$kendo-tabstrip-content-bg: k-color( surface-alt ) !default; /// The text color of the TabStrip content. /// @group tabstrip -$kendo-tabstrip-content-text: $kendo-component-text !default; +$kendo-tabstrip-content-text: k-color( on-app-surface ) !default; /// The border color of the TabStrip content. /// @group tabstrip -$kendo-tabstrip-content-border: $kendo-component-border !default; +$kendo-tabstrip-content-border: k-color( border ) !default; /// The border color of the focused TabStrip content. /// @group tabstrip -$kendo-tabstrip-content-focus-border: $kendo-component-text !default; +$kendo-tabstrip-content-focus-border: k-color( on-app-surface ) !default; /// The left and right scroll overlay of the TabStrip. /// @group tabstrip -$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default; +$kendo-tabstrip-scroll-overlay: k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) !default; /// The size map of the TabStrip. /// @group tabstrip diff --git a/packages/default/scss/taskboard/_variables.scss b/packages/default/scss/taskboard/_variables.scss index 88c28623ccd..7da7db32ddc 100644 --- a/packages/default/scss/taskboard/_variables.scss +++ b/packages/default/scss/taskboard/_variables.scss @@ -82,7 +82,7 @@ $kendo-taskboard-column-border-width: 1px !default; $kendo-taskboard-column-border-radius: k-border-radius(md) !default; /// The background color of the TaskBoard column. /// @group taskboard -$kendo-taskboard-column-bg: $kendo-base-bg !default; +$kendo-taskboard-column-bg: k-color( surface ) !default; /// The text color of the TaskBoard column. /// @group taskboard $kendo-taskboard-column-text: null !default; @@ -98,7 +98,7 @@ $kendo-taskboard-column-focus-bg: null !default; $kendo-taskboard-column-focus-text: null !default; /// The border color of the focused TaskBoard column. /// @group taskboard -$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default; +$kendo-taskboard-column-focus-border: k-color( border-alt ) !default; /// The vertical padding of the TaskBoard column header. /// @group taskboard @@ -117,7 +117,7 @@ $kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2 $kendo-taskboard-column-header-font-weight: 500 !default; /// The text color of the TaskBoard column header. /// @group taskboard -$kendo-taskboard-column-header-text: $kendo-component-header-text !default; +$kendo-taskboard-column-header-text: k-color( on-app-surface ) !default; /// The vertical padding of the TaskBoard column Card wrapper. /// @group taskboard @@ -143,13 +143,13 @@ $kendo-taskboard-pane-padding-x: null !default; $kendo-taskboard-pane-border-width: 1px !default; /// The background color of the TaskBoard pane. /// @group taskboard -$kendo-taskboard-pane-bg: $kendo-component-bg !default; +$kendo-taskboard-pane-bg: k-color( surface-alt ) !default; /// The text color of the TaskBoard pane. /// @group taskboard -$kendo-taskboard-pane-text: $kendo-component-text !default; +$kendo-taskboard-pane-text: k-color( on-app-surface ) !default; /// The border color of the TaskBoard pane. /// @group taskboard -$kendo-taskboard-pane-border: $kendo-component-border !default; +$kendo-taskboard-pane-border: k-color( border ) !default; /// The vertical padding of the TaskBoard pane header. /// @group taskboard @@ -162,7 +162,7 @@ $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default; $kendo-taskboard-pane-header-font-weight: 500 !default; /// The text color of the TaskBoard pane header. /// @group taskboard -$kendo-taskboard-pane-header-text: $kendo-component-header-text !default; +$kendo-taskboard-pane-header-text: k-color( on-app-surface ) !default; /// The vertical padding of the TaskBoard pane content. /// @group taskboard @@ -209,31 +209,31 @@ $kendo-taskboard-card-category-border-width: 4px !default; /// The border color of the hovered TaskBoard Card. /// @group taskboard -$kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default; +$kendo-taskboard-card-hover-border: k-color( border-alt ) !default; /// The border color of the focused TaskBoard Card. /// @group taskboard -$kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default; +$kendo-taskboard-card-focus-border: k-color( border-alt ) !default; /// The shadow of the focused TaskBoard Card. /// @group taskboard $kendo-taskboard-card-focus-shadow: none !default; /// The border of the selected TaskBoard Card. /// @group taskboard -$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 )) !default; +$kendo-taskboard-card-selected-border: k-color( primary-emphasis ) !default; /// The shadow of the selected TaskBoard Card. /// @group taskboard $kendo-taskboard-card-selected-shadow: none !default; /// The text color of the TaskBoard Card header text. /// @group taskboard -$kendo-taskboard-card-header-text: $kendo-color-primary !default; +$kendo-taskboard-card-header-text: k-color( primary ) !default; /// The text color of the hovered TaskBoard Card header text. /// @group taskboard -$kendo-taskboard-card-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; +$kendo-taskboard-card-header-hover-text: k-color( primary-hover ) !default; /// The text color of the focused TaskBoard Card header text. /// @group taskboard -$kendo-taskboard-card-header-focus-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default; +$kendo-taskboard-card-header-focus-text: k-color( primary-hover ) !default; /// The border width of the TaskBoard Card placeholder. /// @group taskboard @@ -246,7 +246,7 @@ $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-card-border-ra $kendo-taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default; /// The border color of the TaskBoard Card placeholder. /// @group taskboard -$kendo-taskboard-drag-placeholder-border: $kendo-component-border !default; +$kendo-taskboard-drag-placeholder-border: k-color( border ) !default; @forward "@progress/kendo-theme-core/scss/components/taskboard/_variables.scss" with ( $kendo-taskboard-spacer: $kendo-taskboard-spacer, diff --git a/packages/default/scss/tilelayout/_variables.scss b/packages/default/scss/tilelayout/_variables.scss index 87ad8d79613..ce29125e0a4 100644 --- a/packages/default/scss/tilelayout/_variables.scss +++ b/packages/default/scss/tilelayout/_variables.scss @@ -8,7 +8,7 @@ $kendo-tile-layout-border-width: 0px !default; /// The background color of the TileLayout. /// @group tile-layout -$kendo-tile-layout-bg: $kendo-base-bg !default; +$kendo-tile-layout-bg: k-color( surface ) !default; /// The horizontal padding of the TileLayout. /// @group tile-layout @@ -33,7 +33,7 @@ $kendo-tile-layout-hint-border-width: 1px !default; $kendo-tile-layout-hint-border-radius: k-border-radius(lg) !default; /// The color of the border around the TileLayout hint. /// @group tile-layout -$kendo-tile-layout-hint-border: $kendo-component-border !default; +$kendo-tile-layout-hint-border: k-color( border ) !default; /// The background color of the TileLayout hint. /// @group tile-layout $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default; diff --git a/packages/default/scss/timeline/_variables.scss b/packages/default/scss/timeline/_variables.scss index 679a7c6c96e..1eebb150237 100644 --- a/packages/default/scss/timeline/_variables.scss +++ b/packages/default/scss/timeline/_variables.scss @@ -41,13 +41,13 @@ $kendo-timeline-track-arrow-height: k-spacing(7.5) !default; /// The background color of the disabled Timeline track arrow. /// @group timeline -$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-subtle ) 60%, transparent), k-true-mix($kendo-button-bg, $kendo-body-bg, 65%)) !default; +$kendo-timeline-track-arrow-disabled-bg: color-mix(in srgb, k-color( base-subtle ) 60%, transparent) !default; /// The text color of the disabled Timeline track arrow. /// @group timeline -$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default; +$kendo-timeline-track-arrow-disabled-text: color-mix(in srgb, k-color( on-base ) 60%, transparent) !default; /// The border color of the disabled Timeline track arrow. /// @group timeline -$kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, k-color( border ), k-true-mix(#000000, $kendo-body-bg, 4.8%)) !default; +$kendo-timeline-track-arrow-disabled-border: k-color( border ) !default; /// The size of the Timeline track. /// @group timeline @@ -108,10 +108,10 @@ $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + $kendo-timeline-horizontal-flag-min-width: 60px !default; /// The background color of the Timeline flag. /// @group timeline -$kendo-timeline-flag-bg: $kendo-color-primary !default; +$kendo-timeline-flag-bg: k-color( primary ) !default; /// The text color of the Timeline flag. /// @group timeline -$kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default; +$kendo-timeline-flag-text: k-color( on-primary ) !default; /// The width of the Timeline's flag callout. /// @group timeline @@ -155,7 +155,7 @@ $kendo-timeline-circle-width: 16px !default; $kendo-timeline-circle-height: 16px !default; /// The background color of the Timeline circle. /// @group timeline -$kendo-timeline-circle-bg: $kendo-color-primary !default; +$kendo-timeline-circle-bg: k-color( primary ) !default; /// The horizontal padding of the Timeline collapse arrow. /// @group timeline diff --git a/packages/default/scss/timeselector/_variables.scss b/packages/default/scss/timeselector/_variables.scss index 0040df29df1..3604fbc9eff 100644 --- a/packages/default/scss/timeselector/_variables.scss +++ b/packages/default/scss/timeselector/_variables.scss @@ -9,9 +9,9 @@ $kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default; $kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default; $kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default; -$kendo-time-selector-bg: $kendo-component-bg !default; -$kendo-time-selector-text: $kendo-component-text !default; -$kendo-time-selector-border: $kendo-component-border !default; +$kendo-time-selector-bg: k-color( surface-alt ) !default; +$kendo-time-selector-text: k-color( on-app-surface ) !default; +$kendo-time-selector-border: k-color( border ) !default; $kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default; $kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default; @@ -25,16 +25,16 @@ $kendo-time-list-height: 240px !default; $kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default; $kendo-time-list-title-line-height: var( --kendo-line-height-lg, normal ) !default; $kendo-time-list-title-height: calc( ( #{$kendo-time-list-title-font-size} ) * ( #{$kendo-time-list-title-line-height} ) ) !default; -$kendo-time-list-title-text: $kendo-subtle-text !default; -$kendo-time-list-title-focus-text: $kendo-component-text !default; +$kendo-time-list-title-text: k-color( subtle ) !default; +$kendo-time-list-title-focus-text: k-color( on-app-surface ) !default; $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default; $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default; $kendo-time-list-highlight-border-width: 1px 0px !default; $kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default; -$kendo-time-list-highlight-bg: $kendo-component-bg !default; -$kendo-time-list-highlight-border: $kendo-component-border !default; +$kendo-time-list-highlight-bg: k-color( surface-alt ) !default; +$kendo-time-list-highlight-border: k-color( border ) !default; $kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default; diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss index f939b7b5824..a4889009ca5 100644 --- a/packages/default/scss/toolbar/_variables.scss +++ b/packages/default/scss/toolbar/_variables.scss @@ -75,13 +75,13 @@ $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default; /// The background color of the Toolbar. /// @group toolbar -$kendo-toolbar-bg: $kendo-base-bg !default; +$kendo-toolbar-bg: k-color( surface ) !default; /// The text color of the Toolbar. /// @group toolbar -$kendo-toolbar-text: $kendo-base-text !default; +$kendo-toolbar-text: k-color( on-app-surface ) !default; /// The color of the border around the Toolbar. /// @group toolbar -$kendo-toolbar-border: $kendo-base-border !default; +$kendo-toolbar-border: k-color( border ) !default; /// The gradient of the Toolbar. /// @group toolbar $kendo-toolbar-gradient: null !default; @@ -90,14 +90,14 @@ $kendo-toolbar-gradient: null !default; $kendo-toolbar-shadow: null !default; /// The left and right scroll overlay of the Toolbar. /// @group toolbar -$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default; +$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color( app-surface ) 0%, transparent) !default; /// The text color of the outline Toolbar. /// @group toolbar $kendo-toolbar-outline-text: $kendo-button-text !default; /// The color of the border around the outline Toolbar. /// @group toolbar -$kendo-toolbar-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 50%, transparent), rgba( $kendo-toolbar-outline-text, .5)) !default; +$kendo-toolbar-outline-border: color-mix(in srgb, k-color( on-base ) 50%, transparent) !default; /// The gradient of the outline Toolbar. /// @group toolbar $kendo-toolbar-outline-gradient: null !default; @@ -109,7 +109,7 @@ $kendo-toolbar-outline-shadow: null !default; $kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default; /// The left and right scroll overlay of the outline Toolbar. /// @group toolbar -$kendo-toolbar-outline-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default; +$kendo-toolbar-outline-scroll-overlay: k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) !default; /// The text color of the flat Toolbar. /// @group toolbar @@ -128,7 +128,7 @@ $kendo-toolbar-flat-shadow: null !default; $kendo-toolbar-flat-border-width: 1px !default; /// The left and right scroll overlay of the flat Toolbar. /// @group toolbar -$kendo-toolbar-flat-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default; +$kendo-toolbar-flat-scroll-overlay: k-color( app-surface ), color-mix(in srgb, k-color( app-surface ) 0%, transparent) !default; /// The color of the separator border of the Toolbar. /// @group toolbar diff --git a/packages/default/scss/tooltip/_functions.scss b/packages/default/scss/tooltip/_functions.scss index 97718bb7e7e..d3ca22ca0f4 100644 --- a/packages/default/scss/tooltip/_functions.scss +++ b/packages/default/scss/tooltip/_functions.scss @@ -7,7 +7,7 @@ @each $name, $color in $colors { $_theme: map.merge(( $name: ( - color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )), + color: k-color( on-#{$name} ), background-color: $color, border: $color, )), $_theme ); diff --git a/packages/default/scss/tooltip/_variables.scss b/packages/default/scss/tooltip/_variables.scss index 442903ae372..f3258f1664f 100644 --- a/packages/default/scss/tooltip/_variables.scss +++ b/packages/default/scss/tooltip/_variables.scss @@ -41,10 +41,10 @@ $kendo-tooltip-callout-size: 6px !default; /// The default background of the Tooltip. /// @group tooltip -$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 )) !default; +$kendo-tooltip-bg: k-color( on-app-surface ) !default; /// The default text color of the Tooltip. /// @group tooltip -$kendo-tooltip-text: if($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg )) !default; +$kendo-tooltip-text: k-color( app-surface ) !default; /// The default border color of the Tooltip. /// @group tooltip $kendo-tooltip-border: $kendo-tooltip-bg !default; @@ -55,7 +55,18 @@ $kendo-tooltip-shadow: k-elevation(2) !default; /// The theme colors map for the Tooltip. /// @group tooltip -$kendo-tooltip-theme-colors: $kendo-theme-colors !default; +$kendo-tooltip-theme-colors: ( + "primary": k-color( primary ), + "secondary": k-color( secondary ), + "tertiary": k-color( tertiary ), + "info": k-color( info ), + "success": k-color( success ), + "warning": k-color( warning ), + "error": k-color( error ), + "dark": k-color( dark ), + "light": k-color( light ), + "inverse": if($kendo-is-dark-theme, k-color( light ), k-color( dark )) +) !default; /// The generated theme colors map for the Tooltip. /// @group tooltip $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default; diff --git a/packages/default/scss/treeview/_variables.scss b/packages/default/scss/treeview/_variables.scss index aef8cc50e54..10991227a49 100644 --- a/packages/default/scss/treeview/_variables.scss +++ b/packages/default/scss/treeview/_variables.scss @@ -119,17 +119,17 @@ $kendo-treeview-sizes: ( $kendo-treeview-bg: null !default; /// The text color of the TreeView. /// @group treeview -$kendo-treeview-text: $kendo-component-text !default; +$kendo-treeview-text: k-color( on-app-surface ) !default; /// The border color of the TreeView. /// @group treeview $kendo-treeview-border: null !default; /// The background color of hovered TreeView items. /// @group treeview -$kendo-treeview-item-hover-bg: $kendo-hover-bg !default; +$kendo-treeview-item-hover-bg: k-color( base-hover ) !default; /// The text color of hovered TreeView items. /// @group treeview -$kendo-treeview-item-hover-text: $kendo-hover-text !default; +$kendo-treeview-item-hover-text: k-color( on-app-surface ) !default; /// The border color of hovered TreeView items. /// @group treeview $kendo-treeview-item-hover-border: null !default; @@ -139,10 +139,10 @@ $kendo-treeview-item-hover-gradient: null !default; /// The background color of selected TreeView items. /// @group treeview -$kendo-treeview-item-selected-bg: $kendo-selected-bg !default; +$kendo-treeview-item-selected-bg: k-color( primary ) !default; /// The text color of selected TreeView items. /// @group treeview -$kendo-treeview-item-selected-text: $kendo-selected-text !default; +$kendo-treeview-item-selected-text: k-color( on-primary ) !default; /// The border color of selected TreeView items. /// @group treeview $kendo-treeview-item-selected-border: null !default; @@ -159,7 +159,7 @@ $kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default; $kendo-treeview-loadmore-bg: transparent !default; /// The text color of the Load More button in the TreeView /// @group treeview -$kendo-treeview-loadmore-text: $kendo-link-text !default; +$kendo-treeview-loadmore-text: k-color( primary ) !default; /// The border color of the Load More button in the TreeView /// @group treeview $kendo-treeview-loadmore-border: null !default; @@ -169,7 +169,7 @@ $kendo-treeview-loadmore-border: null !default; $kendo-treeview-loadmore-hover-bg: transparent !default; /// The text color of the hovered Load More button in the TreeView. /// @group treeview -$kendo-treeview-loadmore-hover-text: $kendo-link-hover-text !default; +$kendo-treeview-loadmore-hover-text: k-color( primary-hover ) !default; /// The border color of the hovered Load More button in the TreeView. /// @group treeview $kendo-treeview-loadmore-hover-border: null !default; @@ -179,7 +179,7 @@ $kendo-treeview-loadmore-hover-border: null !default; $kendo-treeview-loadmore-focus-bg: transparent !default; /// The text color of the focused Load More button in the TreeView. /// @group treeview -$kendo-treeview-loadmore-focus-text: $kendo-link-hover-text !default; +$kendo-treeview-loadmore-focus-text: k-color( primary-hover ) !default; /// The border color of the focused Load More button in the TreeView. /// @group treeview $kendo-treeview-loadmore-focus-border: null !default; diff --git a/packages/default/scss/typography/_variables.scss b/packages/default/scss/typography/_variables.scss index f84657f13e5..1af1d63daae 100644 --- a/packages/default/scss/typography/_variables.scss +++ b/packages/default/scss/typography/_variables.scss @@ -230,13 +230,13 @@ $kendo-code-border-width: 1px !default; /// The background color of the code tag. /// @group typography -$kendo-code-bg: $kendo-base-bg !default; +$kendo-code-bg: k-color( surface ) !default; /// The color of the code tag. /// @group typography -$kendo-code-text: $kendo-component-text !default; +$kendo-code-text: k-color( on-app-surface ) !default; /// The border color of the code tag. /// @group typography -$kendo-code-border: $kendo-component-border !default; +$kendo-code-border: k-color( border ) !default; // Display diff --git a/packages/default/scss/upload/_variables.scss b/packages/default/scss/upload/_variables.scss index f98e9197697..3883ed7a624 100644 --- a/packages/default/scss/upload/_variables.scss +++ b/packages/default/scss/upload/_variables.scss @@ -21,13 +21,13 @@ $kendo-upload-max-height: 300px !default; /// The text color of the Upload. /// @group upload -$kendo-upload-text: $kendo-component-text !default; +$kendo-upload-text: k-color( on-app-surface ) !default; /// The background color of the Upload. /// @group upload -$kendo-upload-bg: $kendo-component-bg !default; +$kendo-upload-bg: k-color( surface-alt ) !default; /// The border color of the Upload. /// @group upload -$kendo-upload-border: $kendo-component-border !default; +$kendo-upload-border: k-color( border ) !default; /// The horizontal padding of the Upload dropzone. /// @group upload @@ -37,20 +37,20 @@ $kendo-upload-dropzone-padding-x: k-spacing(2) !default; $kendo-upload-dropzone-padding-y: k-spacing(2) !default; /// The text color of the Upload dropzone. /// @group upload -$kendo-upload-dropzone-text: $kendo-component-header-text !default; +$kendo-upload-dropzone-text: k-color( on-app-surface ) !default; /// The background color of the Upload dropzone. /// @group upload -$kendo-upload-dropzone-bg: $kendo-component-header-bg !default; +$kendo-upload-dropzone-bg: k-color( surface )!default; /// The border color of the Upload dropzone. /// @group upload $kendo-upload-dropzone-border: $kendo-upload-border !default; /// The background color of the hovered Upload dropzone. /// @group upload -$kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default; +$kendo-upload-dropzone-hover-bg: k-color( base-hover ) !default; /// The text color of the Upload status message. /// @group upload -$kendo-upload-status-text: $kendo-subtle-text !default; +$kendo-upload-status-text: k-color( subtle ) !default; /// The opacity of the Upload status message. /// @group upload $kendo-upload-status-text-opacity: null !default; @@ -77,28 +77,28 @@ $kendo-upload-validation-line-height: var( --kendo-line-height-xs, normal ) !def $kendo-upload-icon-spacing: $kendo-icon-spacing !default; /// The color of the uploaded items icon. /// @group upload -$kendo-upload-icon-color: $kendo-subtle-text !default; +$kendo-upload-icon-color: k-color( subtle ) !default; /// The thickness of the Upload progress bar. /// @group upload $kendo-upload-progress-thickness: 2px !default; /// The background color of the Upload progress bar. /// @group upload -$kendo-upload-progress-bg: $kendo-color-info !default; +$kendo-upload-progress-bg: k-color( info ) !default; /// The success text color of the Upload. /// @group upload -$kendo-upload-success-text: $kendo-color-success !default; +$kendo-upload-success-text: k-color( success ) !default; /// The success background color of the Upload progress bar. /// @group upload -$kendo-upload-success-bg: $kendo-color-success !default; +$kendo-upload-success-bg: k-color( success ) !default; /// The error text color of the Upload. /// @group upload -$kendo-upload-error-text: $kendo-color-error !default; +$kendo-upload-error-text: k-color( error ) !default; /// The error background color of the Upload progress bar. /// @group upload -$kendo-upload-error-bg: $kendo-color-error !default; +$kendo-upload-error-bg: k-color( error ) !default; /// The shadow of the focused Upload button, actions and uploaded items. /// @group upload diff --git a/packages/default/scss/window/_variables.scss b/packages/default/scss/window/_variables.scss index 27a3c67b32d..b7be9768284 100644 --- a/packages/default/scss/window/_variables.scss +++ b/packages/default/scss/window/_variables.scss @@ -69,13 +69,13 @@ $kendo-window-buttongroup-border-width: 1px !default; /// The background color of the Window. /// @group window -$kendo-window-bg: $kendo-component-bg !default; +$kendo-window-bg: k-color( surface-alt ) !default; /// The text color of the Window. /// @group window -$kendo-window-text: $kendo-component-text !default; +$kendo-window-text: k-color( on-app-surface ) !default; /// The border color of the Window. /// @group window -$kendo-window-border: $kendo-component-border !default; +$kendo-window-border: k-color( border ) !default; /// The box shadow of the Window. /// @group window $kendo-window-shadow: k-elevation(8) !default; @@ -85,10 +85,10 @@ $kendo-window-focus-shadow: k-elevation(9) !default; /// The background color of the Window titlebar. /// @group window -$kendo-window-titlebar-bg: $kendo-component-header-bg !default; +$kendo-window-titlebar-bg: k-color( surface )!default; /// The text color of the Window titlebar. /// @group window -$kendo-window-titlebar-text: $kendo-component-header-text !default; +$kendo-window-titlebar-text: k-color( on-app-surface ) !default; /// The border color of the Window titlebar. /// @group window $kendo-window-titlebar-border: inherit !default; @@ -107,9 +107,9 @@ $kendo-window-sizes: ( /// The theme colors map for the Window. /// @group window $kendo-window-theme-colors: ( - "primary": map.get($kendo-theme-colors, "primary"), - "light": map.get($kendo-theme-colors, "light"), - "dark": map.get($kendo-theme-colors, "dark") + "primary": k-color( primary ), + "light": k-color( light ), + "dark": k-color( dark ) ) !default; @forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with ( diff --git a/tests/_output/default/chart-wizard/tab-format-sections-expanded.png b/tests/_output/default/chart-wizard/tab-format-sections-expanded.png index e0af973a3d8..e8696bdce51 100644 Binary files a/tests/_output/default/chart-wizard/tab-format-sections-expanded.png and b/tests/_output/default/chart-wizard/tab-format-sections-expanded.png differ diff --git a/tests/_output/default/floating-label/floating-label-flat.png b/tests/_output/default/floating-label/floating-label-flat.png index ad1b48ec084..07b9fd04a3d 100644 Binary files a/tests/_output/default/floating-label/floating-label-flat.png and b/tests/_output/default/floating-label/floating-label-flat.png differ diff --git a/tests/_output/default/floating-label/floating-label-outline.png b/tests/_output/default/floating-label/floating-label-outline.png index b1ce819fb06..504573ab160 100644 Binary files a/tests/_output/default/floating-label/floating-label-outline.png and b/tests/_output/default/floating-label/floating-label-outline.png differ diff --git a/tests/_output/default/floating-label/floating-label-solid.png b/tests/_output/default/floating-label/floating-label-solid.png index 138e3ae2776..b03934d9092 100644 Binary files a/tests/_output/default/floating-label/floating-label-solid.png and b/tests/_output/default/floating-label/floating-label-solid.png differ diff --git a/tests/_output/default/form/form-misc.png b/tests/_output/default/form/form-misc.png index c5e8f9eca78..1b2179400f9 100644 Binary files a/tests/_output/default/form/form-misc.png and b/tests/_output/default/form/form-misc.png differ diff --git a/tests/_output/default/map/map.png b/tests/_output/default/map/map.png index 3bd661be19a..d0c3fb454b1 100644 Binary files a/tests/_output/default/map/map.png and b/tests/_output/default/map/map.png differ diff --git a/tests/_output/default/menu/menu-icons.png b/tests/_output/default/menu/menu-icons.png index 07079dea1ba..bde48671173 100644 Binary files a/tests/_output/default/menu/menu-icons.png and b/tests/_output/default/menu/menu-icons.png differ diff --git a/tests/_output/default/menu/menu-popup-size.png b/tests/_output/default/menu/menu-popup-size.png index f9ba4b56a11..71db1b5dfe5 100644 Binary files a/tests/_output/default/menu/menu-popup-size.png and b/tests/_output/default/menu/menu-popup-size.png differ diff --git a/tests/_output/default/menu/menu-separators.png b/tests/_output/default/menu/menu-separators.png index 13bd41d91b0..f6e228e9967 100644 Binary files a/tests/_output/default/menu/menu-separators.png and b/tests/_output/default/menu/menu-separators.png differ diff --git a/tests/_output/default/menu/menu.png b/tests/_output/default/menu/menu.png index bfd4da920cb..054947afb23 100644 Binary files a/tests/_output/default/menu/menu.png and b/tests/_output/default/menu/menu.png differ diff --git a/tests/_output/default/responsive-layout/responsive-layout-css-grid.png b/tests/_output/default/responsive-layout/responsive-layout-css-grid.png index 3b216b0faba..2fcaf58407f 100644 Binary files a/tests/_output/default/responsive-layout/responsive-layout-css-grid.png and b/tests/_output/default/responsive-layout/responsive-layout-css-grid.png differ diff --git a/tests/_output/default/responsive-layout/responsive-layout.png b/tests/_output/default/responsive-layout/responsive-layout.png index e561fa1c139..13feaaa1a12 100644 Binary files a/tests/_output/default/responsive-layout/responsive-layout.png and b/tests/_output/default/responsive-layout/responsive-layout.png differ