@progress/kendo-theme-fluent 7.2.2-dev.0 → 7.3.0-dev.0

package/dist/all.css

@@ -16866,83 +16866,83 @@ kendo-sortable {
 }
 
 .k-text-inherit {
-  color: inherit;
+  color: var(--kendo-color-inherit, inherit);
 }
 
 .\!k-text-inherit {
-  color: inherit !important;
+  color: var(--kendo-color-inherit, inherit) !important;
 }
 
 .k-text-current {
-  color: currentColor;
+  color: var(--kendo-color-current, currentColor);
 }
 
 .\!k-text-current {
-  color: currentColor !important;
+  color: var(--kendo-color-current, currentColor) !important;
 }
 
 .k-text-transparent {
-  color: transparent;
+  color: var(--kendo-color-transparent, transparent);
 }
 
 .\!k-text-transparent {
-  color: transparent !important;
+  color: var(--kendo-color-transparent, transparent) !important;
 }
 
 .k-text-black {
-  color: black;
+  color: var(--kendo-color-black, black);
 }
 
 .\!k-text-black {
-  color: black !important;
+  color: var(--kendo-color-black, black) !important;
 }
 
 .k-text-white {
-  color: white;
+  color: var(--kendo-color-white, white);
 }
 
 .\!k-text-white {
-  color: white !important;
+  color: var(--kendo-color-white, white) !important;
 }
 
 .k-color-inherit {
-  color: inherit;
+  color: var(--kendo-color-inherit, inherit);
 }
 
 .\!k-color-inherit {
-  color: inherit !important;
+  color: var(--kendo-color-inherit, inherit) !important;
 }
 
 .k-color-current {
-  color: currentColor;
+  color: var(--kendo-color-current, currentColor);
 }
 
 .\!k-color-current {
-  color: currentColor !important;
+  color: var(--kendo-color-current, currentColor) !important;
 }
 
 .k-color-transparent {
-  color: transparent;
+  color: var(--kendo-color-transparent, transparent);
 }
 
 .\!k-color-transparent {
-  color: transparent !important;
+  color: var(--kendo-color-transparent, transparent) !important;
 }
 
 .k-color-black {
-  color: black;
+  color: var(--kendo-color-black, black);
 }
 
 .\!k-color-black {
-  color: black !important;
+  color: var(--kendo-color-black, black) !important;
 }
 
 .k-color-white {
-  color: white;
+  color: var(--kendo-color-white, white);
 }
 
 .\!k-color-white {
-  color: white !important;
+  color: var(--kendo-color-white, white) !important;
 }
 
 .k-text-underline {
@@ -17232,35 +17232,35 @@ kendo-sortable {
 }
 
 .k-bg-inherit {
-  background-color: inherit;
+  background-color: var(--kendo-color-inherit, inherit);
 }
 
 .\!k-bg-inherit {
-  background-color: inherit !important;
+  background-color: var(--kendo-color-inherit, inherit) !important;
 }
 
 .k-bg-transparent {
-  background-color: transparent;
+  background-color: var(--kendo-color-transparent, transparent);
 }
 
 .\!k-bg-transparent {
-  background-color: transparent !important;
+  background-color: var(--kendo-color-transparent, transparent) !important;
 }
 
 .k-bg-black {
-  background-color: black;
+  background-color: var(--kendo-color-black, black);
 }
 
 .\!k-bg-black {
-  background-color: black !important;
+  background-color: var(--kendo-color-black, black) !important;
 }
 
 .k-bg-white {
-  background-color: white;
+  background-color: var(--kendo-color-white, white);
 }
 
 .\!k-bg-white {
-  background-color: white !important;
+  background-color: var(--kendo-color-white, white) !important;
 }
 
 .k-bg-center {
@@ -17360,283 +17360,43 @@ kendo-sortable {
 }
 
 .k-border-inherit {
-  border-color: inherit;
+  border-color: var(--kendo-color-inherit, inherit);
 }
 
 .\!k-border-inherit {
-  border-color: inherit !important;
+  border-color: var(--kendo-color-inherit, inherit) !important;
 }
 
 .k-border-current {
-  border-color: currentColor;
+  border-color: var(--kendo-color-current, currentColor);
 }
 
 .\!k-border-current {
-  border-color: currentColor !important;
+  border-color: var(--kendo-color-current, currentColor) !important;
 }
 
 .k-border-transparent {
-  border-color: transparent;
+  border-color: var(--kendo-color-transparent, transparent);
 }
 
 .\!k-border-transparent {
-  border-color: transparent !important;
+  border-color: var(--kendo-color-transparent, transparent) !important;
 }
 
 .k-border-black {
-  border-color: black;
+  border-color: var(--kendo-color-black, black);
 }
 
 .\!k-border-black {
-  border-color: black !important;
+  border-color: var(--kendo-color-black, black) !important;
 }
 
 .k-border-white {
-  border-color: white;
+  border-color: var(--kendo-color-white, white);
 }
 
 .\!k-border-white {
-  border-color: white !important;
-}
-
-.k-border-t-inherit {
-  border-top-color: inherit;
-}
-
-.\!k-border-t-inherit {
-  border-top-color: inherit !important;
-}
-
-.k-border-t-current {
-  border-top-color: currentColor;
-}
-
-.\!k-border-t-current {
-  border-top-color: currentColor !important;
-}
-
-.k-border-t-transparent {
-  border-top-color: transparent;
-}
-
-.\!k-border-t-transparent {
-  border-top-color: transparent !important;
-}
-
-.k-border-t-black {
-  border-top-color: black;
-}
-
-.\!k-border-t-black {
-  border-top-color: black !important;
-}
-
-.k-border-t-white {
-  border-top-color: white;
-}
-
-.\!k-border-t-white {
-  border-top-color: white !important;
-}
-
-.k-border-r-inherit {
-  border-right-color: inherit;
-}
-
-.\!k-border-r-inherit {
-  border-right-color: inherit !important;
-}
-
-.k-border-r-current {
-  border-right-color: currentColor;
-}
-
-.\!k-border-r-current {
-  border-right-color: currentColor !important;
-}
-
-.k-border-r-transparent {
-  border-right-color: transparent;
-}
-
-.\!k-border-r-transparent {
-  border-right-color: transparent !important;
-}
-
-.k-border-r-black {
-  border-right-color: black;
-}
-
-.\!k-border-r-black {
-  border-right-color: black !important;
-}
-
-.k-border-r-white {
-  border-right-color: white;
-}
-
-.\!k-border-r-white {
-  border-right-color: white !important;
-}
-
-.k-border-b-inherit {
-  border-bottom-color: inherit;
-}
-
-.\!k-border-b-inherit {
-  border-bottom-color: inherit !important;
-}
-
-.k-border-b-current {
-  border-bottom-color: currentColor;
-}
-
-.\!k-border-b-current {
-  border-bottom-color: currentColor !important;
-}
-
-.k-border-b-transparent {
-  border-bottom-color: transparent;
-}
-
-.\!k-border-b-transparent {
-  border-bottom-color: transparent !important;
-}
-
-.k-border-b-black {
-  border-bottom-color: black;
-}
-
-.\!k-border-b-black {
-  border-bottom-color: black !important;
-}
-
-.k-border-b-white {
-  border-bottom-color: white;
-}
-
-.\!k-border-b-white {
-  border-bottom-color: white !important;
-}
-
-.k-border-l-inherit {
-  border-left-color: inherit;
-}
-
-.\!k-border-l-inherit {
-  border-left-color: inherit !important;
-}
-
-.k-border-l-current {
-  border-left-color: currentColor;
-}
-
-.\!k-border-l-current {
-  border-left-color: currentColor !important;
-}
-
-.k-border-l-transparent {
-  border-left-color: transparent;
-}
-
-.\!k-border-l-transparent {
-  border-left-color: transparent !important;
-}
-
-.k-border-l-black {
-  border-left-color: black;
-}
-
-.\!k-border-l-black {
-  border-left-color: black !important;
-}
-
-.k-border-l-white {
-  border-left-color: white;
-}
-
-.\!k-border-l-white {
-  border-left-color: white !important;
-}
-
-.k-border-x-inherit {
-  border-inline-color: inherit;
-}
-
-.\!k-border-x-inherit {
-  border-inline-color: inherit !important;
-}
-
-.k-border-x-current {
-  border-inline-color: currentColor;
-}
-
-.\!k-border-x-current {
-  border-inline-color: currentColor !important;
-}
-
-.k-border-x-transparent {
-  border-inline-color: transparent;
-}
-
-.\!k-border-x-transparent {
-  border-inline-color: transparent !important;
-}
-
-.k-border-x-black {
-  border-inline-color: black;
-}
-
-.\!k-border-x-black {
-  border-inline-color: black !important;
-}
-
-.k-border-x-white {
-  border-inline-color: white;
-}
-
-.\!k-border-x-white {
-  border-inline-color: white !important;
-}
-
-.k-border-y-inherit {
-  border-block-color: inherit;
-}
-
-.\!k-border-y-inherit {
-  border-block-color: inherit !important;
-}
-
-.k-border-y-current {
-  border-block-color: currentColor;
-}
-
-.\!k-border-y-current {
-  border-block-color: currentColor !important;
-}
-
-.k-border-y-transparent {
-  border-block-color: transparent;
-}
-
-.\!k-border-y-transparent {
-  border-block-color: transparent !important;
-}
-
-.k-border-y-black {
-  border-block-color: black;
-}
-
-.\!k-border-y-black {
-  border-block-color: black !important;
-}
-
-.k-border-y-white {
-  border-block-color: white;
-}
-
-.\!k-border-y-white {
-  border-block-color: white !important;
+  border-color: var(--kendo-color-white, white) !important;
 }
 
 .k-rounded {
@@ -19088,43 +18848,43 @@ kendo-sortable {
 }
 
 .k-outline-inherit {
-  outline-color: inherit;
+  outline-color: var(--kendo-color-inherit, inherit);
 }
 
 .\!k-outline-inherit {
-  outline-color: inherit !important;
+  outline-color: var(--kendo-color-inherit, inherit) !important;
 }
 
 .k-outline-current {
-  outline-color: currentColor;
+  outline-color: var(--kendo-color-current, currentColor);
 }
 
 .\!k-outline-current {
-  outline-color: currentColor !important;
+  outline-color: var(--kendo-color-current, currentColor) !important;
 }
 
 .k-outline-transparent {
-  outline-color: transparent;
+  outline-color: var(--kendo-color-transparent, transparent);
 }
 
 .\!k-outline-transparent {
-  outline-color: transparent !important;
+  outline-color: var(--kendo-color-transparent, transparent) !important;
 }
 
 .k-outline-black {
-  outline-color: black;
+  outline-color: var(--kendo-color-black, black);
 }
 
 .\!k-outline-black {
-  outline-color: black !important;
+  outline-color: var(--kendo-color-black, black) !important;
 }
 
 .k-outline-white {
-  outline-color: white;
+  outline-color: var(--kendo-color-white, white);
 }
 
 .\!k-outline-white {
-  outline-color: white !important;
+  outline-color: var(--kendo-color-white, white) !important;
 }
 
 .k-outline-offset-0 {
@@ -25604,75 +25364,75 @@ kendo-sortable {
 }
 
 .k-elevation-1 {
-  box-shadow: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13);
+  box-shadow: var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13));
 }
 
 .\!k-elevation-1 {
-  box-shadow: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13) !important;
+  box-shadow: var(--kendo-elevation-1, 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13)) !important;
 }
 
 .k-elevation-2 {
-  box-shadow: 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13);
+  box-shadow: var(--kendo-elevation-2, 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13));
 }
 
 .\!k-elevation-2 {
-  box-shadow: 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13) !important;
+  box-shadow: var(--kendo-elevation-2, 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13)) !important;
 }
 
 .k-elevation-3 {
-  box-shadow: 0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13);
+  box-shadow: var(--kendo-elevation-3, 0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13));
 }
 
 .\!k-elevation-3 {
-  box-shadow: 0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13) !important;
+  box-shadow: var(--kendo-elevation-3, 0 0.9px 2.7px rgba(0, 0, 0, 0.1), 0 4.8px 10.8px rgba(0, 0, 0, 0.13)) !important;
 }
 
 .k-elevation-4 {
-  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
+  box-shadow: var(--kendo-elevation-4, 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13));
 }
 
 .\!k-elevation-4 {
-  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13) !important;
+  box-shadow: var(--kendo-elevation-4, 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13)) !important;
 }
 
 .k-elevation-5 {
-  box-shadow: 0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13);
+  box-shadow: var(--kendo-elevation-5, 0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13));
 }
 
 .\!k-elevation-5 {
-  box-shadow: 0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13) !important;
+  box-shadow: var(--kendo-elevation-5, 0 1.8px 5.4px rgba(0, 0, 0, 0.1), 0 9.6px 21.6px rgba(0, 0, 0, 0.13)) !important;
 }
 
 .k-elevation-6 {
-  box-shadow: 0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--kendo-elevation-6, 0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22));
 }
 
 .\!k-elevation-6 {
-  box-shadow: 0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22) !important;
+  box-shadow: var(--kendo-elevation-6, 0 2.4px 7.2px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22)) !important;
 }
 
 .k-elevation-7 {
-  box-shadow: 0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--kendo-elevation-7, 0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22));
 }
 
 .\!k-elevation-7 {
-  box-shadow: 0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22) !important;
+  box-shadow: var(--kendo-elevation-7, 0 3.2px 10.8px rgba(0, 0, 0, 0.18), 0 19.2px 43.2px rgba(0, 0, 0, 0.22)) !important;
 }
 
 .k-elevation-8 {
-  box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--kendo-elevation-8, 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22));
 }
 
 .\!k-elevation-8 {
-  box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22) !important;
+  box-shadow: var(--kendo-elevation-8, 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22)) !important;
 }
 
 .k-elevation-9 {
-  box-shadow: 0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22);
+  box-shadow: var(--kendo-elevation-9, 0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22));
 }
 
 .\!k-elevation-9 {
-  box-shadow: 0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22) !important;
+  box-shadow: var(--kendo-elevation-9, 0 6.4px 18px rgba(0, 0, 0, 0.18), 0 32px 72px rgba(0, 0, 0, 0.22)) !important;
 }
 
 .k-svg-icon {

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "7.2.2-dev.0",
+    "version": "7.3.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": "7.2.2-dev.0",
+    "version": "7.3.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": "7.2.2-dev.0",
+  "version": "7.3.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "7.2.2-dev.0",
-    "@progress/kendo-theme-utils": "7.2.2-dev.0"
+    "@progress/kendo-theme-core": "7.3.0-dev.0",
+    "@progress/kendo-theme-utils": "7.3.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "14dd89a76f235649ba2cf9f260465cdcb486c135"
+  "gitHead": "01297a87bc94d867851e28577c04a0596e35e4f9"
 }

package/scss/utils/_layout.scss

@@ -4,7 +4,9 @@
     $kendo-spacing: $kendo-spacing,
     $kendo-font-sizes: $kendo-font-sizes,
     $kendo-border-radii: $kendo-border-radii,
-    $kendo-elevation: $kendo-elevation
+    $kendo-elevation: $kendo-elevation,
+    $kendo-colors: $kendo-colors,
+    $kendo-enable-color-system: $kendo-enable-color-system
 );
 
 @mixin kendo-utils--layout() {