@progress/kendo-theme-fluent 5.7.0

package/scss/table/_theme.scss

@@ -0,0 +1,106 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-table--theme() {
+
+    // Table
+    .k-table,
+    .k-data-table {
+        @include fill (
+            var( --kendo-table-text, #{$kendo-table-text} ),
+            var( --kendo-table-bg, #{$kendo-table-bg} ),
+            var( --kendo-table-border, #{$kendo-table-border} )
+        );
+    }
+
+    // Table header
+    .k-table-thead,
+    .k-table-header {
+        @include fill (
+            var( --kendo-table-header-text, #{$kendo-table-header-text} ),
+            var( --kendo-table-header-bg, #{$kendo-table-header-bg} ),
+            var( --kendo-table-header-border, #{$kendo-table-header-border} )
+        );
+    }
+
+    .k-table-group-sticky-header,
+    .k-table-group-header {
+        @include fill (
+            var( --kendo-table-sticky-header-text, #{$kendo-table-sticky-header-text} ),
+            var( --kendo-table-sticky-header-bg, #{$kendo-table-sticky-header-bg} ),
+            var( --kendo-table-sticky-header-border, #{$kendo-table-sticky-header-border} )
+        );
+        @include box-shadow( var( --kendo-table-sticky-header-shadow, #{$kendo-table-sticky-header-shadow} ) );
+    }
+
+    // Table footer
+    .k-table-tfoot,
+    .k-table-footer {
+        @include fill (
+            var( --kendo-table-footer-text, #{$kendo-table-footer-text} ),
+            var( --kendo-table-footer-bg, #{$kendo-table-footer-bg} ),
+            var( --kendo-table-footer-border, #{$kendo-table-footer-border} )
+        );
+    }
+
+    // Group row
+    .k-table-group-row {
+        @include fill (
+            var( --kendo-table-group-row-text, #{$kendo-table-group-row-text} ),
+            var( --kendo-table-group-row-bg, #{$kendo-table-group-row-bg} ),
+            var( --kendo-table-group-row-border, #{$kendo-table-group-row-border} )
+        );
+    }
+    .k-table-group-td > span {
+        @include fill (
+            var( --kendo-table-group-text, #{$kendo-table-group-label-text} ),
+            var( --kendo-table-group-bg, #{$kendo-table-group-label-bg} ),
+        );
+    }
+
+    // Alternating row
+    .k-table-alt-row {
+        @include fill (
+            var( --kendo-table-alt-row-text, #{$kendo-table-alt-row-text} ),
+            var( --kendo-table-alt-row-bg, #{$kendo-table-alt-row-bg} ),
+            var( --kendo-table-alt-row-border, #{$kendo-table-alt-row-border} )
+        );
+    }
+
+    // Hover state
+    .k-table-tbody .k-table-row:hover,
+    .k-table-list .k-table-row:hover,
+    .k-table-tbody .k-table-row.k-hover,
+    .k-table-list .k-table-row.k-hover {
+        @include fill (
+            var( --kendo-table-hover-text, #{$kendo-table-hover-text} ),
+            var( --kendo-table-hover-bg, #{$kendo-table-hover-bg} ),
+            var( --kendo-table-hover-border, #{$kendo-table-hover-border} )
+        );
+    }
+
+    // Focus state
+    .k-table-tbody .k-table-row.k-focus,
+    .k-table-list .k-table-row.k-focus,
+    .k-table-tbody .k-table-td.k-focus,
+    .k-table-list .k-table-td.k-focus {
+        @include fill (
+            var( --kendo-table-focus-text, #{$kendo-table-focus-text} ),
+            var( --kendo-table-focus-bg, #{$kendo-table-focus-bg} ),
+            var( --kendo-table-focus-border, #{$kendo-table-focus-border} )
+        );
+        @include box-shadow( var( --kendo-table-focus-shadow, #{$kendo-table-focus-shadow} ) );
+        transform: scale(1);
+    }
+
+    // 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} )
+        );
+    }
+
+}

package/scss/table/_variables.scss

@@ -0,0 +1,169 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+/// The width of the table border.
+/// @group table
+$kendo-table-border-width: 1px !default;
+
+/// The width of vertical border of table cells.
+/// @group table
+$kendo-table-cell-vertical-border-width: 0px !default;
+/// The width of horizontal border of table cells.
+/// @group table
+$kendo-table-cell-horizontal-border-width: 1px !default;
+/// The horizontal padding of the cells in the table if no size is specified.
+/// @group table
+$kendo-table-cell-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of the cells in the table if no size is specified.
+/// @group table
+$kendo-table-cell-padding-y: map-get( $kendo-spacing, 3 ) !default;
+
+/// Font weight of the table header cells.
+/// @group table
+$kendo-table-header-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+
+/// The sizes of the table.
+/// @group table
+$kendo-table-sizes: (
+    sm: (
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, inherit ),
+        cell-padding-x: map-get( $kendo-spacing, 3 ),
+        cell-padding-y: map-get( $kendo-spacing, 3 ) - map-get( $kendo-spacing, thin ),
+        group-label-padding-x: $kendo-list-item-group-label-padding-x-sm,
+        group-label-padding-y: $kendo-list-item-group-label-padding-y-sm,
+        group-label-font-size: $kendo-list-item-group-label-font-size-sm
+    ),
+    md: (
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, inherit ),
+        cell-padding-x: map-get( $kendo-spacing, 3 ),
+        cell-padding-y: map-get( $kendo-spacing, 3 ),
+        group-label-padding-x: $kendo-list-item-group-label-padding-x-md,
+        group-label-padding-y: $kendo-list-item-group-label-padding-y-md,
+        group-label-font-size: $kendo-list-item-group-label-font-size-md
+    ),
+    lg: (
+        font-size: var( --kendo-font-size, inherit ),
+        line-height: var( --kendo-line-height, inherit ),
+        cell-padding-x: map-get( $kendo-spacing, 3 ),
+        cell-padding-y: map-get( $kendo-spacing, 3 ) + map-get( $kendo-spacing, thin ),
+        group-label-padding-x: $kendo-list-item-group-label-padding-x-lg,
+        group-label-padding-y: $kendo-list-item-group-label-padding-y-lg,
+        group-label-font-size: $kendo-list-item-group-label-font-size-lg
+    )
+) !default;
+
+/// Background color of tables.
+/// @group table
+$kendo-table-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of tables.
+/// @group table
+$kendo-table-text: var( --kendo-component-text, initial ) !default;
+/// Border color of tables.
+/// @group table
+$kendo-table-border: var( --kendo-component-border, initial ) !default;
+
+/// Background color of table headers.
+/// @group table
+$kendo-table-header-bg: $kendo-table-bg !default;
+/// Text color of table headers.
+/// @group table
+$kendo-table-header-text: get-theme-color-var( neutral-190 ) !default;
+/// Border color of table headers.
+/// @group table
+$kendo-table-header-border: $kendo-table-border !default;
+
+/// Text color of the sticky table header.
+/// @group table
+$kendo-table-sticky-header-text: $kendo-list-header-text !default;
+/// Background color of the sticky table header.
+/// @group table
+$kendo-table-sticky-header-bg: $kendo-list-header-bg !default;
+/// Border color of the sticky table header.
+/// @group table
+$kendo-table-sticky-header-border: $kendo-list-header-border !default;
+/// Shadow of the sticky table header.
+/// @group table
+$kendo-table-sticky-header-shadow: $kendo-list-header-shadow !default;
+
+/// Background color of table footers.
+/// @group table
+$kendo-table-footer-bg: $kendo-table-header-bg !default;
+/// Text color of table footers.
+/// @group table
+$kendo-table-footer-text: $kendo-table-header-text !default;
+/// Border color of table footers.
+/// @group table
+$kendo-table-footer-border: $kendo-table-header-border !default;
+
+/// Background color of group rows in table.
+/// @group table
+$kendo-table-group-row-bg: $kendo-table-header-bg !default;
+/// Text color of group rows in table.
+/// @group table
+$kendo-table-group-row-text: $kendo-table-header-text !default;
+/// Border color of group rows in table.
+/// @group table
+$kendo-table-group-row-border: $kendo-table-header-border !default;
+
+/// Text color of group label in table.
+/// @group table
+$kendo-table-group-label-text: $kendo-list-bg !default;
+/// Background color of group label in table.
+/// @group table
+$kendo-table-group-label-bg: $kendo-list-text !default;
+
+/// Background color of alternating rows in table.
+/// @group table
+$kendo-table-alt-row-bg: initial !default;
+/// Text color of alternating rows in table.
+/// @group table
+$kendo-table-alt-row-text: $kendo-table-text !default;
+/// Border color of alternating rows in table.
+/// @group table
+$kendo-table-alt-row-border: $kendo-table-border !default;
+
+/// Background color of hovered rows in table.
+/// @group table
+$kendo-table-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Text color of hovered rows in table.
+/// @group table
+$kendo-table-hover-text: var( --kendo-hover-text, inherit ) !default;
+/// Border color of hovered rows in table.
+/// @group table
+$kendo-table-hover-border: $kendo-table-border !default;
+
+/// Background color of focused rows in table.
+/// @group table
+$kendo-table-focus-bg: inherit !default;
+/// Text color of focused rows in table.
+/// @group table
+$kendo-table-focus-text: inherit !default;
+/// Border color of focused rows in table.
+/// @group table
+$kendo-table-focus-border: inherit !default;
+/// Box shadow of focused rows in table.
+/// @group table
+$kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+/// Background color of selected rows in table.
+/// @group table
+$kendo-table-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+/// Text color of selected rows in table.
+/// @group table
+$kendo-table-selected-text: var( --kendo-selected-text, inherit ) !default;
+/// Border color of selected rows in table.
+/// @group table
+$kendo-table-selected-border: get-theme-color-var( neutral-60 ) !default;
+
+/// Hover background color of selected rows in table.
+/// @group table
+$kendo-table-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;
+/// Hover text color of selected rows in table.
+/// @group table
+$kendo-table-selected-hover-text: var( --kendo-selected-hover-text, inherit ) !default;
+/// Hover border color of selected rows in table.
+/// @group table
+$kendo-table-selected-hover-border: $kendo-table-selected-border !default;

package/scss/table/index.scss

@@ -0,0 +1,30 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "table",
+    dependencies: (
+        "input",
+        "list",
+        "popup",
+        "combobox",
+        "toolbar",
+        "menu"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "table" ) {
+        @include kendo-table--layout();
+        @include kendo-table--theme();
+    }
+}