@progress/kendo-theme-fluent 9.1.1-dev.2 → 10.0.0-dev.0

package/scss/progressbar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-progressbar--styles() {
+    @include import-once( "progressbar" ) {
+        @include core-styles();
+        @include kendo-progressbar--layout();
+        @include kendo-progressbar--theme();
+    }
+}

package/scss/progressbar/_theme.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-progressbar--theme {

package/scss/prompt/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-prompt--styles() {
+    @include import-once( "prompt" ) {
+        @include core-styles();
+        @include kendo-prompt--layout();
+        @include kendo-prompt--theme();
+        @include kendo-utils--flex-grid--flex-direction();
+    }
+}

package/scss/radio/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-radio--styles() {
+    @include import-once( "radio" ) {
+        @include core-styles();
+        @include kendo-radio--layout();
+        @include kendo-radio--theme();
+    }
+}

package/scss/radio/_variables.scss

@@ -3,6 +3,7 @@
 @use "../core/_index.scss" as *;
 @use "../checkbox/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 
 // Radio button
 
@@ -139,7 +140,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// The image of the checked RadioButton indicator.
 /// @group radio
-$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

package/scss/rating/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-rating--styles() {
+    @include import-once( "rating" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-rating--layout();
+        @include kendo-rating--theme();
+    }
+}

package/scss/responsivepanel/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-responsive-panel--styles() {
+    @include import-once( "responsive-panel" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-responsive-panel--layout();
+        @include kendo-responsive-panel--theme();
+    }
+}

package/scss/ripple/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-ripple--styles() {
+    @include import-once( "ripple" ) {
+        @include core-styles();
+        @include kendo-ripple--layout();
+        @include kendo-ripple--theme();
+    }
+}

package/scss/scheduler/_index.scss

@@ -0,0 +1,32 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../adaptive/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../tooltip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-scheduler--styles() {
+    @include import-once( "scheduler" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-adaptive--styles();
+        @include kendo-button--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-dialog--styles();
+        @include kendo-tooltip--styles();
+        @include kendo-scheduler--layout();
+        @include kendo-scheduler--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/scheduler/_layout.scss

@@ -679,7 +679,7 @@
 
 
     // Agenda view
-    .k-scheduler-agendaview {
+    :where(.k-scheduler-agendaview) {
 
         .k-task {
             display: flex;

package/scss/scroller/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-scroller--styles() {
+    @include import-once( "scroller" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-scroller--layout();
+        @include kendo-scroller--theme();
+    }
+}

package/scss/scrollview/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-scrollview--styles() {
+    @include import-once( "scrollview" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-scrollview--layout();
+        @include kendo-scrollview--theme();
+    }
+}

package/scss/searchbox/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-searchbox--styles() {
+    @include import-once( "searchbox" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-searchbox--layout();
+        @include kendo-searchbox--theme();
+    }
+}

package/scss/signature/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-signature--styles() {
+    @include import-once( "signature" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-signature--layout();
+        @include kendo-signature--theme();
+    }
+}

package/scss/skeleton/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-skeleton--styles() {
+    @include import-once( "skeleton" ) {
+        @include core-styles();
+        @include kendo-skeleton--layout();
+        @include kendo-skeleton--theme();
+    }
+}

package/scss/slider/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../tooltip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-slider--styles() {
+    @include import-once( "slider" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-tooltip--styles();
+        @include kendo-icon--styles();
+        @include kendo-slider--layout();
+        @include kendo-slider--theme();
+    }
+}

package/scss/split-button/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+
+// Dependencies
+
+
+// Expose
+@mixin kendo-split-button--styles() {
+    @include import-once( "split-button" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-menu--styles();
+        @include kendo-split-button--layout();
+        @include kendo-split-button--theme();
+    }
+}

package/scss/splitter/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+
+// Dependencies
+
+
+// Expose
+@mixin kendo-splitter--styles() {
+    @include import-once( "splitter" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-splitter--layout();
+        @include kendo-splitter--theme();
+    }
+}

package/scss/spreadsheet/_index.scss

@@ -0,0 +1,48 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../colorpicker/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-spreadsheet--styles() {
+    @include import-once( "spreadsheet" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-color-picker--styles();
+        @include kendo-combobox--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-menu--styles();
+        @include kendo-window--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-treeview--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-spreadsheet--layout();
+        @include kendo-spreadsheet--theme();
+        @include kendo-utils--flex-grid--order();
+    }
+}

package/scss/spreadsheet/_layout.scss

@@ -85,7 +85,7 @@
         gap: var( --kendo-spreadsheet-formula-bar-gap, #{$kendo-spreadsheet-formula-bar-gap} );
 
         > .k-icon {
-            padding-inline: var( --kendo-padding-y, #{$kendo-padding-md-y} );
+            padding-inline: k-spacing(1);
             padding-block: 0;
             box-sizing: content-box;
             border-width: 0 1px 0 0;
@@ -531,7 +531,7 @@
     }
     .k-spreadsheet-filter {
         @include border-radius( k-border-radius(md) );
-        padding: var( --kendo-padding-y, #{$kendo-padding-md-y} );
+        padding: k-spacing(1);
         line-height: 1;
         position: absolute;
         cursor: pointer;
@@ -559,8 +559,8 @@
                 padding-inline-start: var( --filter-menu-padding-left, #{$kendo-filter-menu-padding-left} );
             }
             .k-icon {
-                margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-md-y} ) );
-                margin-inline-end: $kendo-padding-md-y;
+                margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{k-spacing(1)} ) );
+                margin-inline-end: k-spacing(1);
             }
 
         }
@@ -573,7 +573,7 @@
             overflow-x: auto;
 
             .k-treeview {
-                padding: $kendo-padding-md-y;
+                padding: k-spacing(1);
                 overflow: visible;
             }
         }
@@ -600,7 +600,7 @@
 
             > .k-icon,
             > .k-expander-indicator {
-                margin-inline-end: $kendo-padding-md-y;
+                margin-inline-end: k-spacing(1);
             }
         }
         .k-details-content,

package/scss/spreadsheet/_variables.scss

@@ -216,7 +216,7 @@ $kendo-spreadsheet-sheets-remove-inline-end: k-spacing(2) !default;
 
 /// The left padding of the Spreadsheet sheets menu.
 /// @group spreadsheet
-$kendo-filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * var( --kendo-padding-y, #{$kendo-padding-md-y} ) ) !default;
+$kendo-filter-menu-padding-left: calc( var( --kendo-icon-size, 1rem ) + 2 * k-spacing(1) ) !default;
 
 /// The text color of the Spreadsheet filter Button.
 /// @group spreadsheet

package/scss/stepper/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../progressbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-stepper--styles() {
+    @include import-once( "stepper" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-progressbar--styles();
+        @include kendo-stepper--layout();
+        @include kendo-stepper--theme();
+    }
+}

package/scss/switch/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-switch--styles() {
+    @include import-once( "switch" ) {
+        @include core-styles();
+        @include kendo-switch--layout();
+        @include kendo-switch--theme();
+    }
+}

package/scss/table/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-table--styles() {
+    @include import-once( "table" ) {
+        @include core-styles();
+        @include kendo-table--layout();
+        @include kendo-table--theme();
+    }
+}

package/scss/tabstrip/_index.scss

@@ -0,0 +1,25 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-tabstrip--styles() {
+    @include import-once( "tabstrip" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-tabstrip--layout();
+        @include kendo-tabstrip--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/tabstrip/_variables.scss

@@ -46,7 +46,7 @@ $kendo-tabstrip-border: transparent !default;
 
 /// The horizontal padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
+$kendo-tabstrip-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default;

package/scss/taskboard/_index.scss

@@ -0,0 +1,32 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../searchbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../card/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-task-board--styles() {
+    @include import-once( "task-board" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-searchbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-card--styles();
+        @include kendo-task-board--layout();
+        @include kendo-task-board--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/textarea/{index.scss → _index.scss}

@@ -1,28 +1,20 @@
-@use "../utils/index.scss" as *;
-
-// Module meta
-$_kendo-module-meta: (
-    name: "textarea",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input"
-    )
-);
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
 @use "./_layout.scss" as *;
 @use "./_theme.scss" as *;
 
-// Register
-@use "../core/module-system/index.scss" as module;
-@include module.register( $_kendo-module-meta... );
-
 // Expose
-@mixin textarea-styles() {
-    @include module.render( "textarea" ) {
+@mixin kendo-textarea--styles() {
+    @include import-once( "textarea" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
         @include kendo-textarea--layout();
         @include kendo-textarea--theme();
         @include kendo-utils--flex-grid--align-items();

package/scss/textbox/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-textbox--styles() {
+    @include import-once( "textbox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-textbox--layout();
+        @include kendo-textbox--theme();
+    }
+}