@progress/kendo-theme-fluent 12.0.0-dev.3 → 12.0.0-dev.4

package/dist/meta/variables.json

@@ -3771,7 +3771,7 @@
     },
     "kendo-input-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-input-focus-shadow": {
         "type": "Null",
@@ -3831,7 +3831,7 @@
     },
     "kendo-input-outline-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-input-outline-focus-shadow": {
         "type": "Null",
@@ -3871,7 +3871,7 @@
     },
     "kendo-input-flat-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-input-flat-focus-shadow": {
         "type": "Null",
@@ -3995,7 +3995,7 @@
     },
     "kendo-picker-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-picker-focus-gradient": {
         "type": "Null",
@@ -4059,7 +4059,7 @@
     },
     "kendo-picker-outline-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-picker-outline-focus-shadow": {
         "type": "Null",
@@ -4075,7 +4075,7 @@
     },
     "kendo-picker-outline-hover-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-picker-flat-bg": {
         "type": "String",
@@ -4111,7 +4111,7 @@
     },
     "kendo-picker-flat-focus-border": {
         "type": "String",
-        "value": "var(--kendo-color-primary, #0f6cbd)"
+        "value": "var(--kendo-color-primary-on-surface, #0f6cbd)"
     },
     "kendo-picker-flat-focus-shadow": {
         "type": "Null",
@@ -6643,7 +6643,7 @@
     },
     "kendo-calendar-cell-hover-bg": {
         "type": "String",
-        "value": "var(--kendo-calendar-cell-hover-bg, var(--kendo-color-primary-subtle, #ebf3fc))"
+        "value": "var(--kendo-calendar-cell-hover-bg, color-mix(in srgb, var(--kendo-color-primary-subtle, #ebf3fc) 75%, var(--kendo-color-on-primary, #ffffff)))"
     },
     "kendo-calendar-cell-hover-text": {
         "type": "String",
@@ -11771,7 +11771,7 @@
     },
     "kendo-panelbar-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa))"
+        "value": "var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5))"
     },
     "kendo-panelbar-text": {
         "type": "String",
@@ -11783,7 +11783,7 @@
     },
     "kendo-panelbar-header-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-header-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa)))"
+        "value": "var(--kendo-panelbar-header-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5)))"
     },
     "kendo-panelbar-header-text": {
         "type": "String",
@@ -11851,7 +11851,7 @@
     },
     "kendo-panelbar-header-selected-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-header-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa)))"
+        "value": "var(--kendo-panelbar-header-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5)))"
     },
     "kendo-panelbar-header-selected-text": {
         "type": "String",
@@ -11883,7 +11883,7 @@
     },
     "kendo-panelbar-header-selected-focus-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-header-selected-focus-bg, var(--kendo-panelbar-header-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa))))"
+        "value": "var(--kendo-panelbar-header-selected-focus-bg, var(--kendo-panelbar-header-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5))))"
     },
     "kendo-panelbar-header-selected-focus-text": {
         "type": "String",
@@ -11967,7 +11967,7 @@
     },
     "kendo-panelbar-item-selected-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-item-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa)))"
+        "value": "var(--kendo-panelbar-item-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5)))"
     },
     "kendo-panelbar-item-selected-text": {
         "type": "String",
@@ -11999,7 +11999,7 @@
     },
     "kendo-panelbar-item-selected-focus-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-item-selected-focus-bg, var(--kendo-panelbar-item-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa))))"
+        "value": "var(--kendo-panelbar-item-selected-focus-bg, var(--kendo-panelbar-item-selected-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5))))"
     },
     "kendo-panelbar-item-selected-focus-text": {
         "type": "String",
@@ -12031,7 +12031,7 @@
     },
     "kendo-panelbar-header-expanded-bg": {
         "type": "String",
-        "value": "var(--kendo-panelbar-header-expanded-bg, var(--kendo-panelbar-bg, var(--kendo-color-app-surface, #fafafa)))"
+        "value": "var(--kendo-panelbar-header-expanded-bg, var(--kendo-panelbar-bg, var(--kendo-color-base-subtle, #f5f5f5)))"
     },
     "kendo-panelbar-header-expanded-text": {
         "type": "String",
@@ -12815,7 +12815,7 @@
     },
     "kendo-grid-sticky-hover-bg": {
         "type": "String",
-        "value": "var(--kendo-grid-sticky-hover-bg, var(--kendo-grid-hover-bg, var(--kendo-table-hover-bg, color-mix(in srgb, var(--kendo-color-on-app-surface, #242424) 5%, transparent))))"
+        "value": "var(--kendo-grid-sticky-hover-bg, var(--kendo-color-base-hover, #f5f5f5))"
     },
     "kendo-grid-sticky-text": {
         "type": "Null",
@@ -13383,7 +13383,7 @@
     },
     "kendo-spreadsheet-selection-border": {
         "type": "String",
-        "value": "var(--kendo-spreadsheet-selection-border, var(--kendo-color-primary, #0f6cbd))"
+        "value": "var(--kendo-spreadsheet-selection-border, var(--kendo-color-primary-on-surface, #0f6cbd))"
     },
     "kendo-spreadsheet-selection-shadow": {
         "type": "String",
@@ -13391,7 +13391,7 @@
     },
     "kendo-spreadsheet-single-selection-bg": {
         "type": "String",
-        "value": "var(--kendo-spreadsheet-single-selection-bg, var(--kendo-color-primary, #0f6cbd))"
+        "value": "var(--kendo-spreadsheet-single-selection-bg, var(--kendo-color-primary-on-surface, #0f6cbd))"
     },
     "kendo-spreadsheet-single-selection-text": {
         "type": "String",

package/lib/swatches/all.json

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

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

@@ -3,7 +3,7 @@
     "name": "Fluent 1 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.3",
+    "version": "12.0.0-dev.4",
     "previewColors": [
         "#1b1a19",
         "#21201f",

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.3",
+    "version": "12.0.0-dev.4",
     "previewColors": [
         "#ffffff",
         "#faf9f8",

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

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.3",
+    "version": "12.0.0-dev.4",
     "previewColors": [
         "#1F1F1F",
         "#292929",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.3",
+    "version": "12.0.0-dev.4",
     "previewColors": [
         "#fafafa",
         "#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": "12.0.0-dev.3",
+  "version": "12.0.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "12.0.0-dev.3",
-    "@progress/kendo-theme-utils": "12.0.0-dev.3"
+    "@progress/kendo-theme-core": "12.0.0-dev.4",
+    "@progress/kendo-theme-utils": "12.0.0-dev.4"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "e8490bcd2120186030a02c459cb027ae415d281c"
+  "gitHead": "40ed04da0bc564e727c8bffc99c00df652e70c12"
 }

package/scss/button/_theme.scss

@@ -78,18 +78,18 @@
             .k-button-outline-#{$theme-color} {
                 color: k-color(#{$theme-color}-on-surface);
 
+                &:hover,
+                &.k-hover {
+                    color: k-color(#{$theme-color}-on-surface);
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
                 &:active,
                 &.k-active,
                 &.k-selected {
                     color: k-color(#{$theme-color}-on-surface);
                     background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
                 }
-
-                &:hover,
-                &.k-hover {
-                    color: k-color(#{$theme-color}-on-surface);
-                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
-                }
             }
         }
 

package/scss/calendar/_variables.scss

@@ -179,7 +179,7 @@ $kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, k-colo
 
 /// The background color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(primary-subtle) ) !default;
+$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, color-mix(in srgb, k-color(primary-subtle) 75%, k-color(on-primary)) ) !default;
 /// The text color of the calendar cells when hovered.
 /// @group calendar
 $kendo-calendar-cell-hover-text: var( --kendo-calendar-cell-hover-text, k-color(on-base) ) !default;

package/scss/grid/_variables.scss

@@ -352,7 +352,7 @@ $kendo-grid-sticky-border: var( --kendo-grid-sticky-border, color-mix(in srgb, #
 $kendo-grid-sticky-alt-bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-bg} ) !default;
 /// The background color of the Grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-hover-bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-hover-bg} ) !default;
+$kendo-grid-sticky-hover-bg: var( --kendo-grid-sticky-hover-bg, k-color(base-hover) ) !default;
 
 /// The background color of the Grid sticky header.
 /// @group grid

package/scss/input/_variables.scss

@@ -123,7 +123,7 @@ $kendo-input-focus-bg: $kendo-input-bg !default;
 
 /// The border color of the focused solid Input components.
 /// @group input
-$kendo-input-focus-border: k-color(primary) !default;
+$kendo-input-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled solid Input components.
 /// @group input
@@ -171,7 +171,7 @@ $kendo-input-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-border: k-color(primary) !default;
+$kendo-input-outline-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled outline Input components.
 /// @group input
@@ -219,7 +219,7 @@ $kendo-input-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-border: k-color(primary) !default;
+$kendo-input-flat-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled flat Input components.
 /// @group input
@@ -267,7 +267,7 @@ $kendo-picker-focus-bg: k-color(surface-alt) !default;
 
 /// The border color of the focused solid Picker components.
 /// @group input
-$kendo-picker-focus-border: k-color(primary)  !default;
+$kendo-picker-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled solid Picker components.
 /// @group input
@@ -315,7 +315,7 @@ $kendo-picker-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-border: k-color(primary) !default;
+$kendo-picker-outline-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused outline Picker components.
 /// @group input
@@ -327,7 +327,7 @@ $kendo-picker-outline-hover-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-border: k-color(primary) !default;
+$kendo-picker-outline-hover-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled outline Picker components.
 /// @group input
@@ -375,7 +375,7 @@ $kendo-picker-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-border: k-color(primary) !default;
+$kendo-picker-flat-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused flat Picker components.
 /// @group input

package/scss/panelbar/_variables.scss

@@ -57,7 +57,7 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(app-surface)} ) !default;
+$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(base-subtle)} ) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-text: var( --kendo-panelbar-text, #{k-color(on-app-surface)} ) !default;

package/scss/spreadsheet/_variables.scss

@@ -106,14 +106,14 @@ $kendo-spreadsheet-selection-bg: var( --kendo-spreadsheet-selection-bg, transpar
 $kendo-spreadsheet-selection-text: var( --kendo-spreadsheet-selection-text, null ) !default;
 /// The border color of the Spreadsheet selection.
 /// @group spreadsheet
-$kendo-spreadsheet-selection-border: var( --kendo-spreadsheet-selection-border, k-color(primary) ) !default;
+$kendo-spreadsheet-selection-border: var( --kendo-spreadsheet-selection-border, k-color(primary-on-surface) ) !default;
 /// The shadow of the Spreadsheet selection.
 /// @group spreadsheet
 $kendo-spreadsheet-selection-shadow: var( --kendo-spreadsheet-selection-shadow, none ) !default;
 
 /// The background color of the Spreadsheet single selection.
 /// @group spreadsheet
-$kendo-spreadsheet-single-selection-bg: var( --kendo-spreadsheet-single-selection-bg, k-color(primary) ) !default;
+$kendo-spreadsheet-single-selection-bg: var( --kendo-spreadsheet-single-selection-bg, k-color(primary-on-surface) ) !default;
 /// The text color of the Spreadsheet single selection.
 /// @group spreadsheet
 $kendo-spreadsheet-single-selection-text: var( --kendo-spreadsheet-single-selection-text, null ) !default;