@progress/kendo-theme-fluent 8.2.1 → 9.0.0-dev.0

package/dist/meta/variables.json

@@ -750,7 +750,11 @@
     },
     "kendo-components": {
         "type": "List",
-        "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"chart-wizard\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+        "value": "\"utils\", \"utils-accessibility-screen-readers\", \"utils-background-clip\", \"utils-background-color\", \"utils-background-position\", \"utils-background-size\", \"utils-border-color\", \"utils-border-radius\", \"utils-border-style\", \"utils-border-width\", \"utils-outline-color\", \"utils-outline-offset\", \"utils-outline-style\", \"utils-outline-width\", \"utils-effects-opacity\", \"utils-elevation\", \"utils-filter-backdrop\", \"utils-flex-grid-align-content\", \"utils-flex-grid-align-items\", \"utils-flex-grid-align-self\", \"utils-flex-grid-flex-basis\", \"utils-flex-grid-flex-direction\", \"utils-flex-grid-flex-grow\", \"utils-flex-grid-flex-shrink\", \"utils-flex-grid-flex-wrap\", \"utils-flex-grid-flex\", \"utils-flex-grid-gap\", \"utils-flex-grid-grid-auto-columns\", \"utils-flex-grid-grid-auto-flow\", \"utils-flex-grid-grid-auto-rows\", \"utils-flex-grid-grid-column-start-end\", \"utils-flex-grid-grid-row-start-end\", \"utils-flex-grid-grid-template-columns\", \"utils-flex-grid-grid-template-rows\", \"utils-flex-grid-justify-content\", \"utils-flex-grid-justify-items\", \"utils-flex-grid-justify-self\", \"utils-flex-grid-order\", \"utils-flex-grid-place-content\", \"utils-flex-grid-place-items\", \"utils-flex-grid-place-self\", \"utils-interactivity-accent-color\", \"utils-interactivity-appearance\", \"utils-interactivity-caret-color\", \"utils-interactivity-cursor\", \"utils-interactivity-pointer-events\", \"utils-interactivity-resize\", \"utils-interactivity-scroll\", \"utils-interactivity-touch-action\", \"utils-interactivity-user-select\", \"utils-interactivity-will-change\", \"utils-layout-aspect-ratio\", \"utils-layout-box-sizing\", \"utils-layout-clear\", \"utils-layout-columns\", \"utils-layout-display\", \"utils-layout-float\", \"utils-layout-object-fit\", \"utils-layout-object-position\", \"utils-layout-overflow\", \"utils-layout-placement\", \"utils-layout-position\", \"utils-layout-visibility\", \"utils-layout-zindex\", \"utils-sizing-height\", \"utils-sizing-width\", \"utils-spacing-margin\", \"utils-spacing-padding\", \"utils-spacing-space-between\", \"utils-svg-fill\", \"utils-svg-stroke\", \"utils-table-border-collapse\", \"utils-table-table-layout\", \"utils-transform-flip\", \"utils-transform-origin\", \"utils-transform-rotate\", \"utils-transform-scale\", \"utils-transform-skew\", \"utils-transform-translate\", \"utils-typography-font-family\", \"utils-typography-font-size\", \"utils-typography-font-style\", \"utils-typography-font-weight\", \"utils-typography-letter-spacing\", \"utils-typography-line-height\", \"utils-typography-list-style\", \"utils-typography-text-align\", \"utils-typography-text-color\", \"utils-typography-text-decoration\", \"utils-typography-text-overflow\", \"utils-typography-text-transform\", \"utils-typography-vertical-align\", \"utils-typography-white-space\", \"typography\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"chart-wizard\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+    },
+    "kendo-prefix": {
+        "type": "String",
+        "value": "k-"
     },
     "kendo-elevation": {
         "type": "Map",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.2.1",
+    "version": "9.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.2.1",
+    "version": "9.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.2.1",
+    "version": "9.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "8.2.1",
+  "version": "9.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "8.2.0",
-    "@progress/kendo-theme-utils": "8.2.0"
+    "@progress/kendo-theme-core": "9.0.0-dev.0",
+    "@progress/kendo-theme-utils": "9.0.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "b9724348fa33159aca0e38e17e653f3eceedf9b5"
+  "gitHead": "625afb7707a490189438ffb5c2859720098d0aa7"
 }

package/scss/action-buttons/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "action-buttons",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
     @include module.render( "action-buttons" ) {
         @include kendo-action-buttons--layout();
         @include kendo-action-buttons--theme();
+        @include kendo-utils--flex-grid--justify-content();
     }
 }

package/scss/action-sheet/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "action-sheet",
@@ -24,5 +26,7 @@ $_kendo-module-meta: (
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--layout-jq();
         @include kendo-action-sheet--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--typography--text-align();
     }
 }

package/scss/bottom-navigation/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "bottom-navigation",
@@ -21,5 +23,6 @@ $_kendo-module-meta: (
     @include module.render( "bottom-navigation" ) {
         @include kendo-bottom-navigation--layout();
         @include kendo-bottom-navigation--theme();
+        @include kendo-utils--layout--position();
     }
 }

package/scss/breadcrumb/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "breadcrumb",
@@ -22,5 +24,7 @@ $_kendo-module-meta: (
     @include module.render( "breadcrumb" ) {
         @include kendo-breadcrumb--layout();
         @include kendo-breadcrumb--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--flex-wrap();
     }
 }

package/scss/calendar/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "button",
@@ -21,5 +23,8 @@ $_kendo-module-meta: (
     @include module.render( "calendar" ) {
         @include kendo-calendar--layout();
         @include kendo-calendar--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+        @include kendo-utils--interactivity--pointer-events();
     }
 }

package/scss/captcha/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "captcha",
@@ -25,5 +27,7 @@ $_kendo-module-meta: (
     @include module.render( "captcha" ) {
         @include kendo-captcha--layout();
         @include kendo-captcha--theme();
+        @include kendo-utils--typography--text-color();
+        @include kendo-utils--layout--position();
     }
 }

package/scss/card/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "card",
@@ -25,5 +27,8 @@ $_kendo-module-meta: (
     @include module.render( "card" ) {
         @include kendo-card--layout();
         @include kendo-card--theme();
+        @include kendo-utils--typography--text-overflow();
+        @include kendo-utils--typography--white-space();
+        @include kendo-utils--layout--display();
     }
 }

package/scss/chip/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "chip",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
     @include module.render( "chip" ) {
         @include kendo-chip--layout();
         @include kendo-chip--theme();
+        @include kendo-utils--typography--text-overflow();
     }
 }

package/scss/colorgradient/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "colorgradient",
@@ -25,5 +27,8 @@ $_kendo-module-meta: (
     @include module.render( "colorgradient" ) {
         @include kendo-color-gradient--layout();
         @include kendo-color-gradient--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--align-self();
+        @include kendo-utils--typography--text-color();
     }
 }

package/scss/dropdowntree/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "dropdowntree",
@@ -24,5 +26,6 @@ $_kendo-module-meta: (
     @include module.render( "dropdowntree" ) {
         @include kendo-dropdowntree--layout();
         @include kendo-dropdowntree--theme();
+        @include kendo-utils--typography--text-align();
     }
 }

package/scss/expansion-panel/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "expansion-panel",
@@ -20,5 +22,6 @@ $_kendo-module-meta: (
     @include module.render( "expansion-panel" ) {
         @include kendo-expansion-panel--layout();
         @include kendo-expansion-panel--theme();
+        @include kendo-utils--layout--display();
     }
 }

package/scss/fab/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "fab",
@@ -24,5 +26,8 @@ $_kendo-module-meta: (
     @include module.render( "fab" ) {
         @include kendo-fab--layout();
         @include kendo-fab--theme();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--typography--text-align();
+        @include kendo-utils--layout--overflow();
     }
 }

package/scss/forms/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "forms",
@@ -26,5 +28,9 @@ $_kendo-module-meta: (
     @include module.render( "forms" ) {
         @include kendo-forms--layout();
         @include kendo-forms--theme();
+        @include kendo-utils--layout--display();
+        @include kendo-utils--flex-grid--gap();
+        @include kendo-utils--flex-grid--grid-template-columns();
+        @include kendo-utils--flex-grid--grid-column-start-end();
     }
 }

package/scss/gantt/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "gantt",
@@ -32,5 +34,7 @@ $_kendo-module-meta: (
     @include module.render( "gantt" ) {
         @include kendo-gantt--layout();
         @include kendo-gantt--theme();
+        @include kendo-utils--typography--white-space();
+        @include kendo-utils--table--table-layout();
     }
 }

package/scss/grid/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "grid",
@@ -43,5 +45,8 @@ $_kendo-module-meta: (
     @include module.render( "grid" ) {
         @include kendo-grid--layout();
         @include kendo-grid--theme();
+        @include kendo-utils--interactivity--touch-action();
+        @include kendo-utils--interactivity--cursor();
+        @include kendo-utils--layout--display();
     }
 }

package/scss/icon/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "icon",
@@ -19,5 +21,8 @@ $_kendo-module-meta: (
     @include module.render( "icon" ) {
         @include kendo-icon--layout();
         @include kendo-icon--theme();
+        @include kendo-utils--transform--rotate();
+        @include kendo-utils--transform--flip();
+        @include kendo-utils--typography--text-color();
     }
 }

package/scss/index.scss

@@ -2,9 +2,8 @@
 @forward "./core";
 
 
-// Typography and utils
+// Typography
 @forward "./typography";
-@forward "./utils";
 @forward "./draggable";
 
 
@@ -166,9 +165,8 @@
 // Use component modules
 @use "./core" as *;
 
-// Typography and utils
+// Typography
 @use "./typography" as *;
-@use "./utils" as *;
 @use "./draggable" as *;
 
 
@@ -357,9 +355,8 @@
     // Radii
     @include kendo-border-radius--styles();
 
-    // Typography and utils
+    // Typography
     @include typography-styles();
-    @include utils-styles();
 
     // Generic content
     @include icon-styles();

package/scss/listview/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "listview",
@@ -23,5 +25,9 @@ $_kendo-module-meta: (
     @include module.render( "listview" ) {
         @include kendo-listview--layout();
         @include kendo-listview--theme();
+        @include kendo-utils--layout--display();
+        @include kendo-utils--flex-grid--flex-direction();
+        @include kendo-utils--flex-grid--grid-template-columns();
+        @include kendo-utils--flex-grid--flex-wrap();
     }
 }

package/scss/loader/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "loader",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
         @include kendo-loader--layout();
         @include kendo-loading--layout();
         @include kendo-loader--theme();
+        @include kendo-utils--typography--text-color();
     }
 }

package/scss/orgchart/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "orgchart",
@@ -30,5 +32,9 @@ $_kendo-module-meta: (
     @include module.render( "orgchart" ) {
         @include kendo-orgchart--layout();
         @include kendo-orgchart--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
     }
 }

package/scss/pdf-viewer/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "pdf-viewer",
@@ -28,5 +30,7 @@ $_kendo-module-meta: (
     @include module.render( "pdf-viewer" ) {
         @include kendo-pdf-viewer--layout();
         @include kendo-pdf-viewer--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
     }
 }

package/scss/pivotgrid/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "pivotgrid",
@@ -28,9 +30,11 @@ $_kendo-module-meta: (
         @include kendo-pivotgrid-export--layout();
         @include kendo-pivotgrid-legacy--layout();
         @include kendo-pivotgrid-configurator-legacy--layout();
-
         @include kendo-pivotgrid--theme();
         @include kendo-pivotgrid-configurator--theme();
         @include kendo-pivotgrid-legacy--theme();
+        @include kendo-utils--layout--display();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--flex-direction();
     }
 }

package/scss/prompt/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "prompt",
@@ -19,5 +21,6 @@ $_kendo-module-meta: (
     @include module.render( "prompt" ) {
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
+        @include kendo-utils--flex-grid--flex-direction();
     }
 }

package/scss/scheduler/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "scheduler",
@@ -31,5 +33,6 @@ $_kendo-module-meta: (
     @include module.render( "scheduler" ) {
         @include kendo-scheduler--layout();
         @include kendo-scheduler--theme();
+        @include kendo-utils--typography--text-overflow();
     }
 }

package/scss/spreadsheet/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "spreadsheet",
@@ -37,5 +39,6 @@ $_kendo-module-meta: (
     @include module.render( "spreadsheet" ) {
         @include kendo-spreadsheet--layout();
         @include kendo-spreadsheet--theme();
+        @include kendo-utils--flex-grid--order();
     }
 }

package/scss/tabstrip/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tabstrip",
@@ -23,5 +25,7 @@ $_kendo-module-meta: (
     @include module.render( "tabstrip" ) {
         @include kendo-tabstrip--layout();
         @include kendo-tabstrip--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
     }
 }

package/scss/taskboard/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "taskboard",
@@ -27,5 +29,6 @@ $_kendo-module-meta: (
     @include module.render( "taskboard" ) {
         @include kendo-taskboard--layout();
         @include kendo-taskboard--theme();
+        @include kendo-utils--typography--text-overflow();
     }
 }

package/scss/textarea/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "textarea",
@@ -21,5 +23,11 @@ $_kendo-module-meta: (
     @include module.render( "textarea" ) {
         @include kendo-textarea--layout();
         @include kendo-textarea--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--flex-direction();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--flex-wrap();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--interactivity--resize();
     }
 }

package/scss/tilelayout/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tilelayout",
@@ -21,5 +23,8 @@ $_kendo-module-meta: (
     @include module.render( "tilelayout" ) {
         @include kendo-tile-layout--layout();
         @include kendo-tile-layout--theme();
+        @include kendo-utils--interactivity--resize();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--grid-auto-flow();
     }
 }

package/scss/toolbar/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "toolbar",
@@ -24,5 +26,7 @@ $_kendo-module-meta: (
     @include module.render( "toolbar" ) {
         @include kendo-toolbar--layout();
         @include kendo-toolbar--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--typography--vertical-align();
     }
 }

package/scss/tooltip/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "tooltip",
@@ -22,5 +24,6 @@ $_kendo-module-meta: (
     @include module.render( "tooltip" ) {
         @include kendo-tooltip--layout();
         @include kendo-tooltip--theme();
+        @include kendo-utils--typography--text-color();
     }
 }

package/scss/typography/index.scss

@@ -1,3 +1,5 @@
+@use "../utils" as *;
+
 // Module meta
 $_kendo-module-meta: (
     name: "typography",
@@ -19,5 +21,7 @@ $_kendo-module-meta: (
     @include module.render( "typography" ) {
         @include kendo-typography--layout();
         @include kendo-typography--theme();
+        @include kendo-utils--spacing--margin();
+        @include kendo-utils--typography();
     }
 }

package/scss/utils/index.scss

@@ -1,23 +1,10 @@
-// Module meta
-$_kendo-module-meta: (
-    name: "utils",
-    dependencies: ()
+@use "../core" as *;
+
+@forward "@progress/kendo-theme-utils/scss/index.import.scss" with (
+    $kendo-spacing: $kendo-spacing,
+    $kendo-font-sizes: $kendo-font-sizes,
+    $kendo-border-radii: $kendo-border-radii,
+    $kendo-elevation: $kendo-elevation,
+    $kendo-colors: $kendo-colors,
+    $kendo-enable-color-system: $kendo-enable-color-system
 );
-
-
-// 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 utils-styles() {
-    @include module.render( "utils" ) {
-        @include kendo-utils--layout();
-        @include kendo-utils--theme();
-    }
-}

package/scss/utils/_layout.scss

@@ -1,14 +0,0 @@
-@use "../core" as *;
-
-@use "@progress/kendo-theme-utils/scss/index.import.scss" as * with (
-    $kendo-spacing: $kendo-spacing,
-    $kendo-font-sizes: $kendo-font-sizes,
-    $kendo-border-radii: $kendo-border-radii,
-    $kendo-elevation: $kendo-elevation,
-    $kendo-colors: $kendo-colors,
-    $kendo-enable-color-system: $kendo-enable-color-system
-);
-
-@mixin kendo-utils--layout() {
-    @include kendo-utils();
-}

package/scss/utils/_theme.scss

@@ -1 +0,0 @@
-@mixin kendo-utils--theme() {}