@progress/kendo-theme-fluent 8.0.2-dev.4 → 8.1.0-dev.1

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.0.2-dev.4",
+    "version": "8.1.0-dev.1",
     "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.0.2-dev.4",
+  "version": "8.1.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "8.0.2-dev.4",
-    "@progress/kendo-theme-utils": "8.0.2-dev.4"
+    "@progress/kendo-theme-core": "8.1.0-dev.1",
+    "@progress/kendo-theme-utils": "8.1.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "69324d7de3d7724d8484700a99f61efc52047622"
+  "gitHead": "4689911f0f7008e71ed496fa1e63f7d006270dca"
 }

package/scss/button/_theme.scss

@@ -153,4 +153,10 @@
         }
     }
 
+    .k-button-group:disabled,
+    .k-button-group.k-disabled,
+    .k-button-group[disabled] {
+        background-color: inherit;
+    }
+
 }

package/scss/coloreditor/_variables.scss

@@ -3,90 +3,90 @@
 @use "../core/" as *;
 
 /// The spacer of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-spacer: k-spacing(2) !default;
 
 /// The minimum width of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-min-width: 260px !default;
 /// The width of the border around the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-bg: var( --kendo-component-bg, initial ) !default;
 /// The border color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
 /// The box shadow of the focused ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The vertical padding of the ColorEditor header.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 /// The horizontal padding of the ColorEditor header.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-actions-spacing: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 
 /// The width of the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-preview-width: 34px !default;
 /// The height of the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-preview-height: 14px !default;
 /// The spacing between the colors in the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-preview-spacing: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
 /// The horizontal padding of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
 /// The spacing of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-spacing: $kendo-color-editor-spacer !default;
 
 /// The vertical padding of the ColorEditor footer.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-footer-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the ColorEditor footer.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-footer-padding-x: k-spacing(2) !default;
 
 /// The outline color of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
 /// The outline width of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;

package/scss/colorgradient/_variables.scss

@@ -3,156 +3,156 @@
 @use "../core/" as *;
 
 /// The spacer of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-spacer: k-spacing(4) !default;
 
 /// The width of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-width: 260px !default;
 /// The width of the border around the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
 /// The horizontal padding of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-padding-x: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 /// The spacing between the sections of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-spacing: $kendo-color-gradient-spacer !default;
 /// The font family of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-bg: var( --kendo-component-bg, initial ) !default;
 /// The border color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
 /// The box shadow of the focused ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The width of the border around the ColorGradient canvas.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-border-width: 0 !default;
 /// The border radius of the ColorGradient canvas.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-spacing: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 /// The height the ColorGradient canvas hsv rectangle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// The border color of the ColorGradient canvas hsv rectangle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The width of the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-track-size: 20px !default;
 /// The border radius of the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-border-radius: k-border-radius(md) !default;
 /// The width of the border around the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
 /// The color of the border around the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The height of the ColorGradient vertical slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-vertical-size: 180px !default;
 /// The width of the ColorGradient horizontal slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 
 /// The width of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-width: 20px !default;
 /// The height of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-height: 20px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-border-width: 2px !default;
 /// The width of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-focus-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-focus-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The hover color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-hover-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) ) !default;
 /// The horizontal offset of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) ) !default;
 
 /// The width of the ColorGradient input.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-width: 48px !default;
 /// The spacing between the ColorGradient inputs.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
 /// The font size of the ColorGradient input labels.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The spacing between the ColorGradient inputs and their labels.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-label-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
 /// The text color of the ColorGradient input labels.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;

package/scss/colorpalette/_variables.scss

@@ -2,48 +2,48 @@
 @use "../core/" as *;
 
 /// The font family of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-line-height: 0 !default;
 
 /// The outline width of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-outline-width: 1px !default;
 /// The outline style of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-outline-style: solid !default;
 /// The outline color of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-outline: transparent !default;
 /// The width of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The outline color of the ColorPalette focused tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The shadow of the ColorPalette focused tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The outline color of the ColorPalette hovered tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
 /// The shadow of the ColorPalette hovered tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The outline color of the ColorPalette selected tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;
 /// The shadow of the ColorPalette selected tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shadow !default;
 /// The outline color of the ColorPalette selected hover tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;

package/scss/core/_index.scss

@@ -51,8 +51,9 @@
     $kendo-disabled-bg: $kendo-disabled-bg !default,
     $kendo-disabled-text: $kendo-disabled-text !default,
     $kendo-disabled-border: $kendo-disabled-border !default,
-    $kendo-loading-bg: $kendo-loading-bg !default,
-    $kendo-loading-text: $kendo-loading-text !default,
+    $kendo-disabled-opacity: $kendo-disabled-opacity !default,
+    $kendo-disabled-filter: $kendo-disabled-filter !default,
+    $kendo-disabled-styling: $kendo-disabled-styling !default,
     // Elevation
     $_default-elevation: $kendo-elevation,
     $kendo-elevation: $kendo-elevation !default,
@@ -68,9 +69,6 @@
 
 @forward "./color-system/swatch-legacy";
 
-// Helpers
-@use "./helpers";
-
 // Module System
 @use "./module-system/" as module;
 

package/scss/core/border-radii/_index.scss

@@ -25,6 +25,9 @@ $kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
 $kendo-border-radius-xxxl: map.get($kendo-spacing, 5) !default;
+/// The largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-full: 9999px !default;
 
 $_default-border-radii: (
     none: $kendo-border-radius-none,
@@ -34,7 +37,8 @@ $_default-border-radii: (
     lg: $kendo-border-radius-lg,
     xl: $kendo-border-radius-xl,
     xxl: $kendo-border-radius-xxl,
-    xxxl: $kendo-border-radius-xxxl
+    xxxl: $kendo-border-radius-xxxl,
+    full: $kendo-border-radius-full
 ) !default;
 
 /// The global radii Map.

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

@@ -181,7 +181,7 @@ $_default-palette-cyber-yellow: (
     15: #1f1600,
 );
 
-$_default-palette-demin-blue: (
+$_default-palette-denim-blue: (
     1: #ebf4fc,
     2: #e0effa,
     3: #d6e9f9,
@@ -236,42 +236,68 @@ $_default-palette-lime-green: (
 );
 
 // stylelint-disable scss/no-global-function-names
+/// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+/// @group palette
 $kendo-palette-gray: $_default-palette-gray !default;
 $kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
 
+/// The Ocean Blue Palette provides colors to the Primary variable group.
+/// @group palette
 $kendo-palette-ocean-blue: $_default-palette-ocean-blue !default;
 $kendo-palette-ocean-blue: map-merge($_default-palette-ocean-blue, $kendo-palette-ocean-blue);
 
+/// The Crimson Red Palette provides colors to the Error variable group.
+/// @group palette
 $kendo-palette-crimson-red: $_default-palette-crimson-red !default;
 $kendo-palette-crimson-red: map-merge($_default-palette-crimson-red, $kendo-palette-crimson-red);
 
+/// The Dandelion Yellow Palette provides colors to the Warning variable group.
+/// @group palette
 $kendo-palette-dandelion-yellow: $_default-palette-dandelion-yellow !default;
 $kendo-palette-dandelion-yellow: map-merge($_default-palette-dandelion-yellow, $kendo-palette-dandelion-yellow);
 
+/// The Forest Green Palette provides colors to the Success variable group.
+/// @group palette
 $kendo-palette-forest-green: $_default-palette-forest-green !default;
 $kendo-palette-forest-green: map-merge($_default-palette-forest-green, $kendo-palette-forest-green);
 
+/// The Cobalt Blue Palette provides colors to the Info variable group.
+/// @group palette
 $kendo-palette-cobalt-blue: $_default-palette-cobalt-blue !default;
 $kendo-palette-cobalt-blue: map-merge($_default-palette-cobalt-blue, $kendo-palette-cobalt-blue);
 
+/// The Azure Blue Palette provides colors to the Tertiary variable group.
+/// @group palette
 $kendo-palette-azure-blue: $_default-palette-azure-blue !default;
 $kendo-palette-azure-blue: map-merge($_default-palette-azure-blue, $kendo-palette-azure-blue);
 
+/// The Sapphire Blue Palette provides colors to the Series A variable group.
+/// @group palette
 $kendo-palette-sapphire-blue: $_default-palette-sapphire-blue !default;
 $kendo-palette-sapphire-blue: map-merge($_default-palette-sapphire-blue, $kendo-palette-sapphire-blue);
 
+/// The Cardinal Red Palette provides colors to the Series B variable group.
+/// @group palette
 $kendo-palette-cardinal-red: $_default-palette-cardinal-red !default;
 $kendo-palette-cardinal-red: map-merge($_default-palette-cardinal-red, $kendo-palette-cardinal-red);
 
+/// The Cyber Yellow Palette provides colors to the Series C variable group.
+/// @group palette
 $kendo-palette-cyber-yellow: $_default-palette-cyber-yellow !default;
 $kendo-palette-cyber-yellow: map-merge($_default-palette-cyber-yellow, $kendo-palette-cyber-yellow);
 
-$kendo-palette-demin-blue: $_default-palette-demin-blue !default;
-$kendo-palette-demin-blue: map-merge($_default-palette-demin-blue, $kendo-palette-demin-blue);
+/// The Denim Blue Palette provides colors to the Series D variable group.
+/// @group palette
+$kendo-palette-denim-blue: $_default-palette-denim-blue !default;
+$kendo-palette-denim-blue: map-merge($_default-palette-denim-blue, $kendo-palette-denim-blue);
 
+/// The Iris Purple Palette provides colors to the Series E variable group.
+/// @group palette
 $kendo-palette-iris-purple: $_default-palette-iris-purple !default;
 $kendo-palette-iris-purple: map-merge($_default-palette-iris-purple, $kendo-palette-iris-purple);
 
+/// The Lime Green Palette provides colors to the Series F variable group.
+/// @group palette
 $kendo-palette-lime-green: $_default-palette-lime-green !default;
 $kendo-palette-lime-green: map-merge($_default-palette-lime-green, $kendo-palette-lime-green);
 // stylelint-enable scss/no-global-function-names

package/scss/core/color-system/_swatch-legacy.scss

@@ -26,8 +26,6 @@
     core.$kendo-disabled-bg: core.k-color( base-subtle );
     core.$kendo-disabled-text: color-mix(in srgb, core.k-color( on-app-surface ) 46%, transparent);
     core.$kendo-disabled-border: transparent;
-    core.$kendo-loading-bg: core.$kendo-component-bg;
-    core.$kendo-loading-text: currentColor;
 
     core.$kendo-theme-colors: (
         primary: (
@@ -56,6 +54,14 @@
             border: core.k-color( error-subtle ),
         ),
     );
+
+    core.$kendo-disabled-styling: (
+        bg: core.$kendo-disabled-bg,
+        color: core.$kendo-disabled-text,
+        border: core.$kendo-disabled-border,
+        opacity: core.$kendo-disabled-opacity,
+        filter: core.$kendo-disabled-filter,
+    );
 }
 
 :root {
@@ -72,6 +78,8 @@
     --kendo-disabled-bg: #{core.$kendo-disabled-bg};
     --kendo-disabled-text: #{core.$kendo-disabled-text};
     --kendo-disabled-border: #{core.$kendo-disabled-border};
+    --kendo-disabled-opacity: #{core.$kendo-disabled-opacity};
+    --kendo-disabled-filter: #{core.$kendo-disabled-filter};
 
     --kendo-hover-bg: #{core.$kendo-hover-bg};
     --kendo-hover-text: #{core.$kendo-hover-text};