@progress/kendo-theme-core 13.2.0-dev.2 → 13.2.0-dev.4

package/scss/components/appbar/_theme.scss

@@ -16,12 +16,7 @@
                 @if $name == "inherit" {
                     color: inherit;
                     background-color: inherit;
-                } @else if $name == "dark" {
-                    color: $kendo-appbar-dark-text;
-                    background-color: $kendo-appbar-dark-bg;
-                } @else if $name == "light" {
-                    color: $kendo-appbar-light-text;
-                    background-color: $kendo-appbar-light-bg;
+
                 } @else {
                     color: k-color(on-#{$name});
                     background-color: k-color(#{$name});

package/scss/components/appbar/_variables.scss

@@ -15,15 +15,9 @@ $kendo-appbar-line-height: null !default;
 
 $kendo-appbar-gap: null !default;
 
-$kendo-appbar-light-bg: null !default;
-$kendo-appbar-light-text: null !default;
-
-$kendo-appbar-dark-bg: null !default;
-$kendo-appbar-dark-text: null !default;
-
 $kendo-appbar-box-shadow: null !default;
 $kendo-appbar-bottom-box-shadow: null !default;
 
 /// The theme colors map of the AppBar.
 /// @group appbar
-$kendo-appbar-theme-colors: ("inherit", "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-appbar-theme-colors: ("base", "primary", "secondary", "tertiary", "inverse") !default;

package/scss/components/avatar/_variables.scss

@@ -31,4 +31,4 @@ $kendo-avatar-sizes: (
 
 /// The theme colors map of the Avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-avatar-theme-colors: ("base", "primary", "secondary", "tertiary") !default;

package/scss/components/badge/_variables.scss

@@ -60,4 +60,4 @@ $kendo-badge-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 /// The theme colors map of the Badge.
 /// @group badge
-$kendo-badge-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-badge-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error") !default;

package/scss/components/bottom-navigation/_theme.scss

@@ -50,11 +50,7 @@
                     }
 
                     .k-bottom-nav-item.k-selected {
-                        @if $name == "secondary" or $name == "light" {
-                            @include fill( $color: k-color(#{$name}));
-                        } @else {
-                            @include fill( $color: k-color(#{$name}) );
-                        }
+                        @include fill( $color: k-color(#{$name}-on-surface));
                     }
                 }
             }

package/scss/components/bottom-navigation/_variables.scss

@@ -30,4 +30,4 @@ $kendo-bottom-nav-flat-border: null !default;
 
 /// The theme colors map of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-navigation-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-bottom-navigation-theme-colors: ("base", "primary", "secondary", "tertiary", "inverse") !default;

package/scss/components/button/_theme.scss

@@ -291,7 +291,7 @@
                     @if $name == "base" {
                         color: k-color(on-app-surface);
                     } @else {
-                        color: k-color(#{$name});
+                        color: k-color(#{$name}-on-surface);
                     }
 
                     // Hover
@@ -303,7 +303,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-hover);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }
 
@@ -328,7 +328,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-active);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }
 
@@ -340,7 +340,7 @@
                         @if $name == "base" {
                             color: k-color(on-app-surface);
                         } @else {
-                            color: k-color(#{$name}-active);
+                            color: k-color(#{$name}-on-surface);
                         }
                     }
 

package/scss/components/button/_variables.scss

@@ -113,7 +113,7 @@ $kendo-button-roundness: ("none", "sm", "md", "lg", "full") !default;
 
 /// The theme colors map of the Button.
 /// @group button
-$kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;
 
 /// The sizes map of the Button.
 /// @group button

package/scss/components/card/_theme.scss

@@ -34,21 +34,6 @@
             @include box-shadow( $kendo-card-focus-shadow );
         }
 
-
-        // Card theme colors
-        @each $name in $kendo-card-theme-colors {
-            #{k-when-default($kendo-card-default-theme-color, $name)}
-            &.k-card-#{$name} {
-                background-color: k-color(#{$name}-subtle);
-                color: k-color(#{$name}-on-subtle);
-                border-color: k-color(#{$name}-emphasis);
-
-                .k-card-subtitle {
-                    color: inherit;
-                }
-            }
-        }
-
     }
 
 

package/scss/components/card/_variables.scss

@@ -1,7 +1,5 @@
 // Card
 
-$kendo-card-default-theme-color: null !default;
-
 $kendo-card-padding-x: null !default;
 $kendo-card-padding-y: null !default;
 $kendo-card-border-width: null !default;
@@ -71,7 +69,3 @@ $kendo-card-deck-scroll-button-offset: null !default;
 
 $kendo-card-callout-width: null !default;
 $kendo-card-callout-height: null !default;
-
-/// The theme colors map of the Card.
-/// @group card
-$kendo-card-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/dialog/_theme.scss

@@ -7,18 +7,6 @@
 @mixin kendo-dialog--theme-base() {
     .k-dialog {
         background-color: $kendo-dialog-bg;
-
-        // Dialog theme colors
-        @each $name in $kendo-dialog-theme-colors {
-
-            #{k-when-default($kendo-dialog-default-theme-color, $name)}
-            &.k-dialog-#{$name} {
-                .k-dialog-titlebar {
-                    color: k-color(on-#{$name});
-                    background-color: k-color(#{$name});
-                }
-            }
-        }
     }
 
     // Dialog titlebar

package/scss/components/dialog/_variables.scss

@@ -1,7 +1,5 @@
 // Dialog
 
-$kendo-dialog-default-theme-color: null !default;
-
 $kendo-dialog-titlebar-bg: null !default;
 $kendo-dialog-titlebar-text: null !default;
 $kendo-dialog-titlebar-border: null !default;
@@ -12,7 +10,3 @@ $kendo-dialog-buttongroup-border-width: null !default;
 $kendo-dialog-button-spacing: null !default;
 
 $kendo-dialog-bg: null !default;
-
-/// The theme colors map of the Dialog.
-/// @group dialog
-$kendo-dialog-theme-colors: ("primary", "light", "dark") !default;

package/scss/components/fab/_variables.scss

@@ -65,7 +65,7 @@ $kendo-fab-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 /// The theme colors map of the FloatingActionButton.
 /// @group floating-action-button
-$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary") !default;
 
 /// The sizes map of the FloatingActionButton.
 /// @group floating-action-button

package/scss/components/floating-label/_theme.scss

@@ -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: k-color(error) );
+            @include fill ( $color: k-color(error-on-surface) );
         }
     }
 

package/scss/components/forms/_theme.scss

@@ -23,14 +23,14 @@
         }
 
         .k-alert-error {
-            @include fill( $color: k-color(error) );
+            @include fill( $color: k-color(error-on-surface) );
         }
     }
 
     .k-form-error,
     .k-text-error,
     .k-form-field-error .k-label {
-        @include fill( $color: k-color(error) );
+        @include fill( $color: k-color(error-on-surface) );
     }
 
     .k-form-separator {

package/scss/components/grid/_layout.scss

@@ -90,7 +90,6 @@
         }
 
         .k-table-th,
-        td,
         .k-table-td {
             border-width: 0;
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
@@ -125,7 +124,6 @@
             white-space: nowrap;
         }
 
-        td,
         .k-table-td {
             border-block-end-width: $kendo-grid-cell-horizontal-border-width;
             white-space: unset;
@@ -287,12 +285,10 @@
             }
         }
 
-        .k-grouping-row td,
         .k-grouping-row .k-table-td {
             overflow: visible;
         }
 
-        .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
             border-block-start-width: $kendo-grid-grouping-row-border-top;
         }
@@ -309,13 +305,11 @@
             text-decoration: none;
         }
 
-        .k-table .k-group-footer td,
         .k-table .k-group-footer .k-table-td {
             border-style: solid;
             border-width: $kendo-grid-group-footer-border-y 0;
         }
 
-        .k-group-footer .k-group-cell + td,
         .k-group-footer .k-group-cell + .k-table-td {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -352,11 +346,14 @@
             }
         }
 
+        .k-table-td:has(.k-pin-cell) {
+            text-overflow: clip;
+        }
+
         .k-hierarchy-cell + .k-grid-content-sticky {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
-        .k-detail-cell {}
-        .k-master-row {}
+
 
         .k-detail-row {
             .k-detail-cell {
@@ -414,8 +411,6 @@
         }
 
         // Highlighted state
-        td.k-highlighted,
-        .k-table-row.k-highlighted > td,
         .k-table-td.k-highlighted,
         .k-table-row.k-highlighted > .k-table-td {
             font-weight: $kendo-grid-highlighted-font-weight;
@@ -560,15 +555,11 @@
     .k-grid-footer {
         border-block-start-width: 1px;
 
-        td,
         .k-table-td {
             height: $kendo-line-height-em;
         }
     }
 
-    .k-grid-footer td,
-    .k-group-footer td,
-    .k-grouping-row td,
     .k-grid-footer .k-table-td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
@@ -594,7 +585,6 @@
     .k-filter-row {
         line-height: $kendo-form-line-height;
 
-        td,
         .k-table-td,
         .k-table-th {
             border-width: 0;
@@ -603,7 +593,6 @@
             white-space: nowrap;
         }
 
-        td:first-child,
         .k-table-td:first-child {
             border-inline-start-width: 0;
         }
@@ -640,7 +629,6 @@
         border-color: inherit;
         outline: 0;
 
-        .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
             border-block-end-width: 0;
         }
@@ -666,13 +654,11 @@
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
-    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
         text-overflow: clip;
     }
 
     .k-grid .k-edit-cell,
-    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
 
         > input:not([type="checkbox"]):not([type="radio"]),
@@ -837,11 +823,10 @@
         visibility: hidden;
     }
 
-    .k-width-container  div {
+    .k-width-container div {
         height: 1px;
     }
 
-    .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
         border-block-end-style: solid;
         border-block-end-width: 1px;
@@ -927,7 +912,6 @@
             position: static;
         }
 
-        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             border-block-end-width: $kendo-grid-border-width;
             border-block-start-width: $kendo-grid-border-width;
@@ -938,8 +922,6 @@
             z-index: k-z-index("base", 2);
         }
 
-        .k-grid-row-sticky td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
         .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
             z-index: k-z-index("base", 3);
@@ -966,7 +948,6 @@
     .k-grid .k-table .k-grid-footer-sticky {
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
 
-        &:not([style*="display: none"]) + td,
         &:not([style*="display: none"]) + .k-table-td,
         &:not([style*="display: none"]) + .k-table-th {
             border-inline-start-width: 0;
@@ -1064,7 +1045,6 @@
                     padding-inline: $_header-padding-x;
                 }
 
-                td,
                 .k-table-td {
                     padding-block: $_cell-padding-y;
                     padding-inline: $_cell-padding-x;
@@ -1130,7 +1110,6 @@
                     // Edit row
                     .k-edit-cell,
                     .k-command-cell,
-                    .k-grid-edit-row td,
                     .k-grid-edit-row .k-table-td {
                         padding-block: $_edit-cell-padding-y;
                         padding-inline: $_edit-cell-padding-x;
@@ -1140,7 +1119,6 @@
 
                 // Filter row
                 .k-filter-row {
-                    td,
                     .k-table-td,
                     .k-table-th {
                         padding-block: $_filter-cell-padding-y;
@@ -1475,7 +1453,6 @@
         table-layout: auto !important; // stylelint-disable-line declaration-no-important
 
         .k-table-th,
-        td,
         .k-table-td {
             white-space: nowrap !important; // stylelint-disable-line declaration-no-important
         }