@progress/kendo-theme-fluent 5.11.1-dev.2 → 5.12.1-dev.0

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": "5.11.1-dev.2",
+  "version": "5.12.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,11 +47,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-core": "^5.11.1-dev.2",
-    "@progress/kendo-theme-utils": "^5.11.1-dev.2"
+    "@progress/kendo-theme-core": "^5.12.1-dev.0",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.0"
   },
-  "devDependencies": {
-    "sass-build": "^1.1.0"
-  },
-  "gitHead": "1abe5dc353ef37c2ad5ee6177c8fb1e3894956d6"
+  "gitHead": "342125ccbda2aec05866a2bb2c5e6e0c6f64b2e3"
 }

package/scss/action-buttons/index.scss

@@ -18,7 +18,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin action-buttons-styles() {
     @include module.render( "action-buttons" ) {
         @include kendo-action-buttons--layout();
         @include kendo-action-buttons--theme();

package/scss/action-sheet/index.scss

@@ -19,7 +19,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin action-sheet-styles() {
     @include module.render( "action-sheet" ) {
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--layout-jq();

package/scss/adaptive/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin adaptive-styles() {
     @include module.render( "adaptive" ) {
         @include kendo-adaptive--layout();
         @include kendo-adaptive-grid--layout();

package/scss/appbar/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register($_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin appbar-styles() {
     @include module.render("appbar") {
         @include kendo-appbar--layout();
         @include kendo-appbar--theme();

package/scss/autocomplete/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin autocomplete-styles() {
     @include module.render( "autocomplete" ) {
         @include kendo-autocomplete--layout();
         @include kendo-autocomplete--theme();

package/scss/avatar/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin avatar-styles() {
     @include module.render( "avatar" ) {
         @include kendo-avatar--layout();
         @include kendo-avatar--theme();

package/scss/badge/index.scss

@@ -15,7 +15,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin badge-styles() {
     @include module.render( "badge" ) {
         @include kendo-badge--layout();
         @include kendo-badge--theme();

package/scss/bottom-navigation/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin bottom-navigation-styles() {
     @include module.render( "bottom-navigation" ) {
         @include kendo-bottom-navigation--layout();
         @include kendo-bottom-navigation--theme();

package/scss/breadcrumb/index.scss

@@ -18,7 +18,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin breadcrumb-styles() {
     @include module.render( "breadcrumb" ) {
         @include kendo-breadcrumb--layout();
         @include kendo-breadcrumb--theme();

package/scss/button/_variables.scss

@@ -105,7 +105,7 @@ $kendo-button-brand-colors: (
     info: info,
     secondary: neutral,
     tertiary: tertiary,
-);
+) !default;
 
 
 // Matrices with theme colors in the order: bg, color, border, outline

package/scss/button/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin button-styles() {
     @include module.render( "button" ) {
         @include kendo-button--layout();
         @include kendo-button--theme();

package/scss/calendar/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin calendar-styles() {
     @include module.render( "calendar" ) {
         @include kendo-calendar--layout();
         @include kendo-calendar--theme();

package/scss/captcha/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin captcha-styles() {
     @include module.render( "captcha" ) {
         @include kendo-captcha--layout();
         @include kendo-captcha--theme();

package/scss/card/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin card-styles() {
     @include module.render( "card" ) {
         @include kendo-card--layout();
         @include kendo-card--theme();

package/scss/chat/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin chat-styles() {
     @include module.render( "chat" ) {
         @include kendo-chat--layout();
         @include kendo-chat-card--layout();

package/scss/checkbox/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin checkbox-styles() {
     @include module.render( "checkbox" ) {
         @include kendo-checkbox--layout();
         @include kendo-checkbox--theme();

package/scss/chip/index.scss

@@ -18,7 +18,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin chip-styles() {
     @include module.render( "chip" ) {
         @include kendo-chip--layout();
         @include kendo-chip--theme();

package/scss/color-preview/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin color-preview-styles() {
     @include module.render( "color-preview" ) {
         @include kendo-color-preview--layout();
         @include kendo-color-preview--theme();

package/scss/coloreditor/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin coloreditor-styles() {
     @include module.render( "coloreditor" ) {
         @include kendo-coloreditor--layout();
         @include kendo-coloreditor--theme();

package/scss/colorgradient/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin colorgradient-styles() {
     @include module.render( "colorgradient" ) {
         @include kendo-colorgradient--layout();
         @include kendo-colorgradient--theme();

package/scss/colorpalette/index.scss

@@ -15,7 +15,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin colorpalette-styles() {
     @include module.render( "colorpalette" ) {
         @include kendo-colorpalette--layout();
         @include kendo-colorpalette--theme();

package/scss/colorpicker/index.scss

@@ -21,7 +21,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin colorpicker-styles() {
     @include module.render( "colorpicker" ) {
         @include kendo-colorpicker--layout();
         @include kendo-colorpicker--theme();

package/scss/combobox/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin combobox-styles() {
     @include module.render( "combobox" ) {
         @include kendo-combobox--layout();
         @include kendo-combobox--theme();

package/scss/core/_index.scss

@@ -22,8 +22,12 @@
 
 $components: null !default;
 
-@mixin configure($components: null) {
-    @if $components {
-        module.$components: $components;
+@mixin core-configure($config: null) {
+    @if $config {
+        $_components: map-get( $config, "components" );
+
+        @if ($_components) {
+            module.$components: $_components;
+        }
     }
 }

package/scss/core/_variables.scss

@@ -103,31 +103,33 @@ $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, bord
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;
 
-:root {
-    --kendo-font-family: #{meta.inspect($kendo-font-family)};
-
-    --kendo-font-size: #{$kendo-font-size};
-    --kendo-font-size-xs: #{$kendo-font-size-xs};
-    --kendo-font-size-sm: #{$kendo-font-size-sm};
-    --kendo-font-size-md: #{$kendo-font-size-md};
-    --kendo-font-size-lg: #{$kendo-font-size-lg};
-    --kendo-font-size-xl: #{$kendo-font-size-xl};
-
-    --kendo-line-height: #{$kendo-line-height};
-    --kendo-line-height-xs: #{$kendo-line-height-xs};
-    --kendo-line-height-sm: #{$kendo-line-height-sm};
-    --kendo-line-height-md: #{$kendo-line-height-md};
-    --kendo-line-height-lg: #{$kendo-line-height-lg};
-
-    --kendo-font-weight: #{$kendo-font-weight};
-    --kendo-font-weight-light: #{$kendo-font-weight-light};
-    --kendo-font-weight-bold: #{$kendo-font-weight-bold};
-
-    --kendo-letter-spacing: #{$kendo-letter-spacing};
-
-    --kendo-border-radius-sm: #{$kendo-border-radius-sm};
-    --kendo-border-radius-md: #{$kendo-border-radius-md};
-    --kendo-border-radius-lg: #{$kendo-border-radius-lg};
-
-    --kendo-transition: #{$kendo-transition};
+@mixin core-styles() {
+    :root {
+        --kendo-font-family: #{meta.inspect($kendo-font-family)};
+
+        --kendo-font-size: #{$kendo-font-size};
+        --kendo-font-size-xs: #{$kendo-font-size-xs};
+        --kendo-font-size-sm: #{$kendo-font-size-sm};
+        --kendo-font-size-md: #{$kendo-font-size-md};
+        --kendo-font-size-lg: #{$kendo-font-size-lg};
+        --kendo-font-size-xl: #{$kendo-font-size-xl};
+
+        --kendo-line-height: #{$kendo-line-height};
+        --kendo-line-height-xs: #{$kendo-line-height-xs};
+        --kendo-line-height-sm: #{$kendo-line-height-sm};
+        --kendo-line-height-md: #{$kendo-line-height-md};
+        --kendo-line-height-lg: #{$kendo-line-height-lg};
+
+        --kendo-font-weight: #{$kendo-font-weight};
+        --kendo-font-weight-light: #{$kendo-font-weight-light};
+        --kendo-font-weight-bold: #{$kendo-font-weight-bold};
+
+        --kendo-letter-spacing: #{$kendo-letter-spacing};
+
+        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
+        --kendo-border-radius-md: #{$kendo-border-radius-md};
+        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
+
+        --kendo-transition: #{$kendo-transition};
+    }
 }

package/scss/core/color-system/_palettes.scss

@@ -312,5 +312,4 @@ $kendo-fluent-palettes: (
         210: #001a0d,
         220: #000d07
     )
-
 ) !default;

package/scss/core/color-system/_variables.scss

@@ -123,47 +123,49 @@ $kendo-theme-colors: (
     }
 };
 
-:root {
-    @include css-vars( $kendo-fluent-palettes );
-    @include css-vars( $kendo-theme-colors );
+@mixin color-system-styles() {
+    :root {
+        @include css-vars( $kendo-fluent-palettes );
+        @include css-vars( $kendo-theme-colors );
 
-    --kendo-body-bg: #{$kendo-body-bg};
-    --kendo-body-text: #{$kendo-body-text};
+        --kendo-body-bg: #{$kendo-body-bg};
+        --kendo-body-text: #{$kendo-body-text};
 
-    --kendo-component-bg: #{$kendo-component-bg};
-    --kendo-component-text: #{$kendo-component-text};
-    --kendo-component-border: #{$kendo-component-border};
+        --kendo-component-bg: #{$kendo-component-bg};
+        --kendo-component-text: #{$kendo-component-text};
+        --kendo-component-border: #{$kendo-component-border};
 
-    --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
-    --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
-    --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
-    --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
 
-    --kendo-link-text: #{$kendo-link-text};
-    --kendo-link-hover-text: #{$kendo-link-hover-text};
+        --kendo-link-text: #{$kendo-link-text};
+        --kendo-link-hover-text: #{$kendo-link-hover-text};
 
-    --kendo-disabled-bg: #{$kendo-disabled-bg};
-    --kendo-disabled-text: #{$kendo-disabled-text};
-    --kendo-disabled-border: #{$kendo-disabled-border};
+        --kendo-disabled-bg: #{$kendo-disabled-bg};
+        --kendo-disabled-text: #{$kendo-disabled-text};
+        --kendo-disabled-border: #{$kendo-disabled-border};
 
-    --kendo-hover-bg: #{$kendo-hover-bg};
-    --kendo-hover-text: #{$kendo-hover-text};
-    --kendo-hover-border: #{$kendo-hover-border};
+        --kendo-hover-bg: #{$kendo-hover-bg};
+        --kendo-hover-text: #{$kendo-hover-text};
+        --kendo-hover-border: #{$kendo-hover-border};
 
-    --kendo-selected-bg: #{$kendo-selected-bg};
-    --kendo-selected-text: #{$kendo-selected-text};
-    --kendo-selected-border: #{$kendo-selected-border};
+        --kendo-selected-bg: #{$kendo-selected-bg};
+        --kendo-selected-text: #{$kendo-selected-text};
+        --kendo-selected-border: #{$kendo-selected-border};
 
-    --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
-    --kendo-selected-hover-text: #{$kendo-selected-hover-text};
-    --kendo-selected-hover-border: #{$kendo-selected-hover-border};
+        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
 
-    --kendo-focus-outline: #{$kendo-focus-outline};
+        --kendo-focus-outline: #{$kendo-focus-outline};
 
-    --kendo-subtle-text: #{$kendo-subtle-text};
+        --kendo-subtle-text: #{$kendo-subtle-text};
 
-    --kendo-invalid-bg: #{$kendo-invalid-bg};
-    --kendo-invalid-text: #{$kendo-invalid-text};
-    --kendo-invalid-border: #{$kendo-invalid-border};
-    --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+        --kendo-invalid-bg: #{$kendo-invalid-bg};
+        --kendo-invalid-text: #{$kendo-invalid-text};
+        --kendo-invalid-border: #{$kendo-invalid-border};
+        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+    }
 }

package/scss/dataviz/index.scss

@@ -19,7 +19,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dataviz-styles() {
     @include module.render( "dataviz" ) {
         @include kendo-dataviz--layout();
         @include kendo-dataviz--theme();

package/scss/dateinput/index.scss

@@ -16,7 +16,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dateinput-styles() {
     @include module.render( "dateinput" ) {
         @include kendo-dateinput--layout();
         @include kendo-dateinput--theme();

package/scss/datepicker/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin datepicker-styles() {
     @include module.render( "datepicker" ) {
         @include kendo-datepicker--layout();
         @include kendo-datepicker--theme();

package/scss/daterangepicker/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin daterangepicker-styles() {
     @include module.render( "daterangepicker" ) {
         @include kendo-daterangepicker--layout();
         @include kendo-daterangepicker--theme();

package/scss/datetimepicker/index.scss

@@ -22,7 +22,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin datetimepicker-styles() {
     @include module.render( "datetimepicker" ) {
         @include kendo-datetimepicker--layout();
         @include kendo-datetimepicker--theme();

package/scss/dialog/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dialog-styles() {
     @include module.render( "dialog" ) {
         @include kendo-dialog--layout();
         @include kendo-dialog--theme();

package/scss/draggable/index.scss

@@ -15,7 +15,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin draggable-styles() {
     @include module.render( "draggable" ) {
         @include kendo-dialog--layout();
         @include kendo-dialog--theme();

package/scss/drawer/index.scss

@@ -18,7 +18,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin drawer-styles() {
     @include module.render( "drawer" ) {
         @include kendo-drawer--layout();
         @include kendo-drawer--theme();

package/scss/dropdowngrid/index.scss

@@ -24,7 +24,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dropdowngrid-styles() {
     @include module.render( "dropdowngrid" ) {
         @include kendo-dropdowngrid--layout();
         @include kendo-dropdowngrid--theme();

package/scss/dropdownlist/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dropdownlist-styles() {
     @include module.render( "dropdownlist" ) {
         @include kendo-dropdownlist--layout();
         @include kendo-dropdownlist--theme();

package/scss/dropdowntree/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dropdowntree-styles() {
     @include module.render( "dropdowntree" ) {
         @include kendo-dropdowntree--layout();
         @include kendo-dropdowntree--theme();

package/scss/dropzone/index.scss

@@ -17,7 +17,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin dropzone-styles() {
     @include module.render( "dropzone" ) {
         @include kendo-dropzone--layout();
         @include kendo-dropzone--theme();

package/scss/editor/index.scss

@@ -24,7 +24,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin editor-styles() {
     @include module.render( "editor" ) {
         @include kendo-editor--layout();
         @include kendo-editor--theme();

package/scss/expansion-panel/index.scss

@@ -16,7 +16,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin expansion-panel-styles() {
     @include module.render( "expansion-panel" ) {
         @include kendo-expansion-panel--layout();
         @include kendo-expansion-panel--theme();

package/scss/fab/index.scss

@@ -20,7 +20,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin fab-styles() {
     @include module.render( "fab" ) {
         @include kendo-fab--layout();
         @include kendo-fab--theme();

package/scss/filemanager/index.scss

@@ -27,7 +27,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin filemanager-styles() {
     @include module.render( "filemanager" ) {
         @include kendo-filemanager--layout();
         @include kendo-filemanager--theme();

package/scss/filter/index.scss

@@ -23,7 +23,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin filter-styles() {
     @include module.render( "filter" ) {
         @include kendo-filter--layout();
         @include kendo-filter--theme();

package/scss/floating-label/index.scss

@@ -16,7 +16,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin floating-label-styles() {
     @include module.render( "floating-label" ) {
         @include kendo-floating-label--layout();
         @include kendo-floating-label--theme();

package/scss/forms/index.scss

@@ -22,7 +22,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin forms-styles() {
     @include module.render( "forms" ) {
         @include kendo-forms--layout();
         @include kendo-forms--theme();

package/scss/gantt/index.scss

@@ -27,7 +27,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin gantt-styles() {
     @include module.render( "gantt" ) {
         @include kendo-gantt--layout();
         @include kendo-gantt--theme();

package/scss/grid/index.scss

@@ -37,7 +37,7 @@ $_kendo-module-meta: (
 @include module.register( $_kendo-module-meta... );
 
 // Expose
-@mixin styles() {
+@mixin grid-styles() {
     @include module.render( "grid" ) {
         @include kendo-grid--layout();
         @include kendo-grid--theme();