@progress/kendo-theme-fluent 7.1.0-dev.7 → 7.1.0-dev.9

package/scss/table/_theme.scss

@@ -94,13 +94,24 @@
     }
 
     // Selected state
-    .k-table-tbody .k-table-row.k-selected,
-    .k-table-list .k-table-row.k-selected {
-        @include fill (
-            var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
-            var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
-            var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
-        );
+    @if($kendo-enable-color-system) {
+        .k-table-tbody .k-table-row.k-selected > .k-table-td,
+        .k-table-list .k-table-row.k-selected {
+            @include fill (
+                var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
+                var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
+                var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
+            );
+        }
+    } @else {
+        .k-table-tbody .k-table-row.k-selected,
+        .k-table-list .k-table-row.k-selected {
+            @include fill (
+                var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
+                var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
+                var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
+            );
+        }
     }
 
 }

package/scss/table/_variables.scss

@@ -88,7 +88,7 @@ $kendo-table-border: var( --kendo-component-border, initial ) !default;
 $kendo-table-header-bg: $kendo-table-bg !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-table-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: $kendo-table-border !default;
@@ -168,7 +168,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: k-get-theme-color-var( primary-20 ) !default;
+$kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 )) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: $kendo-table-text !default;
@@ -178,7 +178,7 @@ $kendo-table-selected-border: $kendo-table-border !default;
 
 /// Hover background color of selected rows in table.
 /// @group table
-$kendo-table-selected-hover-bg: k-get-theme-color-var( primary-30 ) !default;
+$kendo-table-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 )) !default;
 /// Hover text color of selected rows in table.
 /// @group table
 $kendo-table-selected-hover-text: $kendo-table-selected-text !default;

package/scss/tabstrip/_variables.scss

@@ -93,10 +93,10 @@ $kendo-tabstrip-item-hover-border: var( --kendo-hover-bg, inherit ) !default;
 $kendo-tabstrip-item-selected-bg: var( --kendo-component-bg, transparent ) !default;
 /// The text color of selected tabs
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-tabstrip-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// The border color of selected tabs
 /// @group tabstrip
-$kendo-tabstrip-item-selected-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-tabstrip-item-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The background gradient of selected tabs
 /// @group tabstrip
 $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -105,7 +105,7 @@ $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 /// The text color of the sortable tabstrip item
 /// @group tabstrip
-$kendo-tabstrip-item-dragging-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 // Indicator
 /// The border width of the tabstrip indicator
@@ -113,7 +113,7 @@ $kendo-tabstrip-item-dragging-text: k-get-theme-color-var( primary-100 ) !defaul
 $kendo-tabstrip-indicator-size: map.get( $kendo-spacing, 0.5 ) !default;
 /// The border color of the tabstrip ripple
 /// @group tabstrip
-$kendo-tabstrip-indicator-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-tabstrip-indicator-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The horizontal padding of tabstrip content
 /// @group tabstrip

package/scss/taskboard/_variables.scss

@@ -69,7 +69,7 @@ $kendo-taskboard-column-border-width: 1px !default;
 $kendo-taskboard-column-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Background color of the task board column.
 /// @group taskboard
-$kendo-taskboard-column-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the task board column.
 /// @group taskboard
 $kendo-taskboard-column-text: var( --kendo-component-text, inherit ) !default;
@@ -84,7 +84,7 @@ $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-bg !default;
 $kendo-taskboard-column-focus-text: $kendo-taskboard-column-text !default;
 /// Focus border color of the task board column.
 /// @group taskboard
-$kendo-taskboard-column-focus-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// Vertical padding of the task board column header.
 /// @group taskboard
@@ -182,7 +182,7 @@ $kendo-taskboard-card-category-border-width: 4px !default;
 $kendo-taskboard-card-focus-shadow: none !default;
 /// Selected border of the task board card.
 /// @group taskboard
-$kendo-taskboard-card-selected-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-taskboard-card-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Selected shadow of the task board card.
 /// @group taskboard
 $kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -202,7 +202,7 @@ $kendo-taskboard-drag-placeholder-border-width: 1px !default;
 $kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
 /// Background color of the task board card placeholder.
 /// @group taskboard
-$kendo-taskboard-drag-placeholder-bg: k-get-theme-color-var( neutral-50 ) !default;
+$kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
 /// Border color of the task board card placeholder.
 /// @group taskboard
 $kendo-taskboard-drag-placeholder-border: var( --kendo-component-border, inherit ) !default;

package/scss/tilelayout/_variables.scss

@@ -8,7 +8,7 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tilelayout
-$kendo-tile-layout-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tilelayout

package/scss/timeline/_variables.scss

@@ -62,10 +62,10 @@ $kendo-timeline-track-start-calc: calc( #{ $kendo-timeline-track-arrow-width } -
 $kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
 /// The background of the track in the timeline.
 /// @group timeline
-$kendo-timeline-track-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the track in the timeline.
 /// @group timeline
-$kendo-timeline-track-border-color: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-timeline-track-border-color: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The inset block end of the arrow in the timeline.
 /// @group timeline
@@ -113,7 +113,7 @@ $kendo-timeline-mobile-flag-max-width: calc( #{ $kendo-timeline-flag-min-width }
 $kendo-timeline-horizontal-flag-min-width: map.get( $kendo-spacing, 15 ) !default;
 /// The background of the flag in the timeline.
 /// @group timeline
-$kendo-timeline-flag-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-timeline-flag-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The text of the flag in the timeline.
 /// @group timeline
 $kendo-timeline-flag-text: var( --kendo-component-bg, initial ) !default;
@@ -135,10 +135,10 @@ $kendo-timeline-flag-margin-bottom-calc: calc( #{ $kendo-timeline-track-size } +
 $kendo-timeline-card-header-bg: var( --kendo-component-bg, initial ) !default;
 /// The text of the card header in the timeline.
 /// @group timeline
-$kendo-timeline-card-header-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-timeline-card-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The border of the card body scroll in the timeline.
 /// @group timeline
-$kendo-timeline-card-body-scroll-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// The background of the card body scroll of the timeline.
 /// @group timeline
 $kendo-timeline-card-body-scroll-bg: var( --kendo-component-bg, initial ) !default;
@@ -180,7 +180,7 @@ $kendo-timeline-circle-width: map.get( $kendo-spacing, 4 ) !default;
 $kendo-timeline-circle-height: map.get( $kendo-spacing, 4 ) !default;
 /// The background of the circle in the timeline.
 /// @group timeline
-$kendo-timeline-circle-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-timeline-circle-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The width of the events in the timeline.
 /// @group timeline

package/scss/timeselector/_theme.scss

@@ -48,7 +48,7 @@
     // Time list
     .k-time-list {
         .k-item:hover {
-            color: k-get-theme-color-var( primary-120 );
+            color: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ));
         }
     }
 

package/scss/toolbar/_variables.scss

@@ -47,7 +47,7 @@ $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The text color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
@@ -57,7 +57,7 @@ $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
 
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-separator-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-toolbar-separator-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The width of the input in the Toolbar.
 /// @group toolbar
@@ -71,7 +71,7 @@ $kendo-toolbar-item-focus-outline-width: 1px !default;
 $kendo-toolbar-item-focus-outline-style: solid !default;
 /// The border color of the focused Toolbar item.
 /// @group toolbar
-$kendo-toolbar-item-focus-outline-color: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-toolbar-item-focus-outline-color: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// Border width of the flat Toolbar.
 /// @group toolbar

package/scss/tooltip/_variables.scss

@@ -39,7 +39,7 @@ $kendo-tooltip-callout-size: map.get( $kendo-spacing, 2 ) !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: $kendo-color-white !default;
+$kendo-tooltip-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
@@ -52,11 +52,11 @@ $kendo-tooltip-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The text color of the Tooltip button.
 /// @group tooltip
-$kendo-tooltip-button-text: k-get-theme-color-var( neutral-130, initial ) !default;
+$kendo-tooltip-button-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130, initial )) !default;
 
 /// Theme variations for the tooltip.
 $kendo-tooltip-brand-colors: (
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
     success: success,
     warning: warning,
@@ -66,19 +66,19 @@ $kendo-tooltip-brand-colors: (
 
 // Matrix with tooltip theme colors in the order: bg, color, border
 $_tc-tooltip-matrix: (
-    (normal: (20, 160, 20)),
+    (normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20))),
 ) !default;
 
 $_tc-tooltip-primary-matrix: (
-    (normal: (100, $kendo-color-white, 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
 ) !default;
 
 $_tc-tooltip-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-tooltip-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// Theme colors map for the tooltip variations.
@@ -103,13 +103,13 @@ $kendo-tooltip-theme-colors: () !default;
 @each $ui-states in $_tc-tooltip-dark-matrix {
     $kendo-tooltip-theme-colors: map.deep-merge(
         $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-tooltip-light-matrix {
     $kendo-tooltip-theme-colors: map.deep-merge(
         $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/treeview/_variables.scss

@@ -124,7 +124,7 @@ $kendo-treeview-item-focus-text: $kendo-treeview-item-text !default;
 $kendo-treeview-item-focus-border: $kendo-treeview-item-border !default;
 /// The box shadow of focused TreeView items.
 /// @group treeview
-$kendo-treeview-item-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-treeview-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The background color of selected TreeView items.
 /// @group treeview

package/scss/upload/_variables.scss

@@ -35,13 +35,13 @@ $kendo-upload-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
 $kendo-upload-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-upload-dropzone-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-upload-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-upload-dropzone-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;
@@ -79,21 +79,21 @@ $kendo-upload-icon-color: var( --kendo-subtle-text, inherit ) !default;
 $kendo-upload-progress-thickness: 2px !default;
 /// The background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-progress-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-upload-progress-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-upload-success-text: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-success-bg: k-get-theme-color-var( success-190 ) !default;
+$kendo-upload-success-bg: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: k-get-theme-color-var( error-190 ) !default;
+$kendo-upload-error-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-error-bg: k-get-theme-color-var( error-190 ) !default;
+$kendo-upload-error-bg: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
 
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload

package/scss/window/_variables.scss

@@ -78,7 +78,7 @@ $kendo-window-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-window-text: var( --kendo-component-text, initial ) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-window-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The box shadow of the Window.
 /// @group window
 $kendo-window-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
@@ -91,10 +91,10 @@ $kendo-window-focus-shadow: var( --kendo-box-shadow-depth-9, none ) !default;
 $kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $kendo-component-header-bg
 /// The text color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-text: k-get-theme-color-var( primary-100 ) !default; // $kendo-component-header-text
+$kendo-window-titlebar-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; // $kendo-component-header-text
 /// The border color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-window-titlebar-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The map of the width of the different Window sizes.
 /// @group window
@@ -112,15 +112,15 @@ $kendo-window-brand-colors: (
 
 // Matrix with window theme colors in the order: bg, color, border
 $_tc-window-matrix: (
-    (normal: (100, $kendo-color-white, 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
 ) !default;
 
 $_tc-window-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-window-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// The theme colors map for the Window.
@@ -139,13 +139,13 @@ $kendo-window-theme-colors: () !default;
 @each $ui-states in $_tc-window-dark-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-window-light-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/wizard/_variables.scss

@@ -50,4 +50,4 @@ $kendo-wizard-buttons-margin-y: map.get( $kendo-spacing, 6 ) !default;
 
 /// Outline of the focused wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-wizard-step-focus-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;