@progress/kendo-theme-bootstrap 13.1.2-dev.0 → 13.2.0-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "13.1.2-dev.0",
+  "version": "13.2.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.8.0",
-    "@progress/kendo-theme-core": "13.1.2-dev.0",
-    "@progress/kendo-theme-utils": "13.1.2-dev.0"
+    "@progress/kendo-theme-core": "13.2.0-dev.1",
+    "@progress/kendo-theme-utils": "13.2.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "b471175dd67fd1bb357612d351c0d366a832dd0e"
+  "gitHead": "0898cb4c2955f92610c5766da2c849ab3e12b11c"
 }

package/scss/button/_variables.scss

@@ -29,6 +29,9 @@ $kendo-button-border-width: 1px !default;
 /// @group button
 $kendo-button-border-radius: null !default;
 
+/// The horizontal padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-x: k-spacing(0.5) !default;
 /// The horizontal padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-x: k-spacing(2) !default;
@@ -39,6 +42,9 @@ $kendo-button-md-padding-x: k-spacing(3) !default;
 /// @group button
 $kendo-button-lg-padding-x: k-spacing(4) !default;
 
+/// The vertical padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-y: k-spacing(1px) !default;
 /// The vertical padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-y: k-spacing(1) !default;
@@ -59,6 +65,9 @@ $kendo-button-font-weight: var(--kendo-font-weight-normal) !default;
 /// The font size of the Button.
 /// @group button
 $kendo-button-font-size: $kendo-font-size !default;
+/// The font size of the xsmall Button.
+/// @group button
+$kendo-button-xs-font-size: var(--kendo-font-size-sm) !default;
 /// The font size of the small Button.
 /// @group button
 $kendo-button-sm-font-size: var(--kendo-font-size-sm) !default;
@@ -72,6 +81,9 @@ $kendo-button-lg-font-size: var(--kendo-font-size-lg) !default;
 /// The line height used along with the $kendo-font-size variable.
 /// @group button
 $kendo-button-line-height: $kendo-line-height !default;
+/// The line height used along with the $kendo-font-size variable of the xsmall Button.
+/// @group button
+$kendo-button-xs-line-height: math.div( 20, 14 ) !default;
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
 $kendo-button-sm-line-height: math.div( 20, 14 ) !default;
@@ -82,11 +94,13 @@ $kendo-button-md-line-height: var(--kendo-line-height) !default;
 /// @group button
 $kendo-button-lg-line-height: var(--kendo-line-height) !default;
 
+$kendo-button-xs-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 $kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-xs-inner-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) ) !default;
 $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
 $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
 $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
@@ -252,26 +266,32 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
 @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
     $kendo-button-border-width: $kendo-button-border-width,
     $kendo-button-border-radius: $kendo-button-border-radius,
+    $kendo-button-xs-padding-x: $kendo-button-xs-padding-x,
     $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
     $kendo-button-md-padding-x: $kendo-button-md-padding-x,
     $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
+    $kendo-button-xs-padding-y: $kendo-button-xs-padding-y,
     $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
     $kendo-button-md-padding-y: $kendo-button-md-padding-y,
     $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
     $kendo-button-font-family: $kendo-button-font-family,
     $kendo-button-font-weight: $kendo-button-font-weight,
     $kendo-button-font-size: $kendo-button-font-size,
+    $kendo-button-xs-font-size: $kendo-button-xs-font-size,
     $kendo-button-sm-font-size: $kendo-button-sm-font-size,
     $kendo-button-md-font-size: $kendo-button-md-font-size,
     $kendo-button-lg-font-size: $kendo-button-lg-font-size,
     $kendo-button-line-height: $kendo-button-line-height,
+    $kendo-button-xs-line-height: $kendo-button-xs-line-height,
     $kendo-button-sm-line-height: $kendo-button-sm-line-height,
     $kendo-button-md-line-height: $kendo-button-md-line-height,
     $kendo-button-lg-line-height: $kendo-button-lg-line-height,
+    $kendo-button-xs-calc-size: $kendo-button-xs-calc-size,
     $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
     $kendo-button-md-calc-size: $kendo-button-md-calc-size,
     $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
     $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
+    $kendo-button-xs-inner-calc-size: $kendo-button-xs-inner-calc-size,
     $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
     $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
     $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,

package/scss/core/_index.scss

@@ -41,7 +41,14 @@
 
     $default-font-weights: $kendo-font-weights,
     $kendo-font-weights: $kendo-font-weights !default,
+    $kendo-font-weight: $kendo-font-weight !default,
+
+    $default-letter-spacings: $kendo-letter-spacings,
+    $kendo-letter-spacings: $kendo-letter-spacings !default,
+    $kendo-letter-spacing: $kendo-letter-spacing !default,
+
     // Border Radii
+    $kendo-border-radius-base: $kendo-border-radius-base !default,
     $default-border-radii: $kendo-border-radii,
     $kendo-border-radii: $kendo-border-radii !default,
     // Spacing

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

@@ -1,36 +1,35 @@
 @use "sass:map";
-@use "../spacing/index.scss" as *;
 
-/// The global border radius used across the Components.
+/// The base border radius used across the Components.
 /// @group radii
-$kendo-border-radius: map.get($kendo-spacing, 1.5) !default;
+$kendo-border-radius-base: .375rem !default;
 /// The none border radius used across the Components.
 /// @group radii
-$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+$kendo-border-radius-none: 0px !default;
 /// The extra small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xs: map.get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-xs: calc(var(--kendo-border-radius-base) / 3) !default;
 /// The small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-sm: map.get($kendo-spacing, 1) !default;
+$kendo-border-radius-sm: calc(var(--kendo-border-radius-base) * 2 / 3) !default;
 /// The medium border radius used across the Components.
 /// @group radii
-$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-md: var(--kendo-border-radius-base) !default;
 /// The large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-lg: calc(var(--kendo-border-radius-base) * 4 / 3) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xl: calc(var(--kendo-border-radius-base) * 8 / 3) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: map.get($kendo-spacing, 8) !default;
+$kendo-border-radius-xxl: calc(var(--kendo-border-radius-base) * 16 / 3) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: map.get($kendo-spacing, 12) !default;
+$kendo-border-radius-xxxl: calc(var(--kendo-border-radius-base) * 8) !default;
 /// The largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-full: 50rem !default;
+$kendo-border-radius-full: calc(var(--kendo-border-radius-base) * 9999) !default;
 
 /// The global radii Map.
 /// @group radii

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

@@ -1,173 +1,187 @@
 @use "sass:map";
-@use "./_palettes.scss" as *;
 
 // Colors
 $_default-colors: (
     // Misc
-    app-surface: map.get( $kendo-palette-gray, "white" ),
-    on-app-surface: map.get( $kendo-palette-gray, 14 ),
-    subtle: map.get( $kendo-palette-gray, 10 ),
-    surface: map.get( $kendo-palette-gray, 1 ),
-    surface-alt: map.get( $kendo-palette-gray, "white" ),
-    border: rgba( map.get( $kendo-palette-gray, 14 ), .13),
-    border-alt: rgba( map.get( $kendo-palette-gray, 14 ), .20),
+    app-surface: oklch(100% 0 0deg),
+    on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.2621, (0.6 - l) * 99999, 0.95) 0.0095 248.23deg)"},
+    subtle: oklch(47.71% 0.014 240.22deg),
+    surface: oklch(98.16% 0.0018 248.57deg),
+    surface-alt: #{"oklch(from var(--kendo-color-surface) calc(l + 0.02) c h)"},
+    border: oklch(26.21% 0.0095 248.23deg / 0.13),
+    border-alt: oklch(26.21% 0.0095 248.23deg / 0.20),
+
     // Base
-    base-subtle: map.get( $kendo-palette-gray, 2 ),
-    base-subtle-hover: map.get( $kendo-palette-gray, 3 ),
-    base-subtle-active: map.get( $kendo-palette-gray, 4 ),
-    base: map.get( $kendo-palette-gray, 3 ),
-    base-hover: map.get( $kendo-palette-gray, 4 ),
-    base-active: map.get( $kendo-palette-gray, 5 ),
-    base-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .34),
-    base-on-subtle: map.get( $kendo-palette-gray, 14 ),
-    on-base: map.get( $kendo-palette-gray, 14 ),
-    base-on-surface: map.get( $kendo-palette-gray, 14 ),
+    base-subtle: #{"oklch(from var(--kendo-color-base) calc(l + 0.031) c h)"},
+    base-subtle-hover: #{"oklch(from var(--kendo-color-base) l c h)"},
+    base-subtle-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.044) c h)"},
+    base: oklch(91.09% 0.007 247.9deg),
+    base-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.044) c h)"},
+    base-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.094) c h)"},
+    base-emphasis: #{"oklch(from var(--kendo-color-on-app-surface) l c h / 0.34)"},
+    base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.2621, (0.6 - l) * 99999, 0.95) 0.0095 248.23deg)"},
+    on-base: #{"oklch(from var(--kendo-color-base) clamp(0.2621, (0.6 - l) * 99999, 0.95) 0.0095 248.23deg)"},
+    base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.2621, (0.6 - l) * 99999, 0.95) 0.0095 248.23deg)"},
+
     // Primary
-    primary-subtle: map.get( $kendo-palette-blue, 2 ),
-    primary-subtle-hover: map.get( $kendo-palette-blue, 3 ),
-    primary-subtle-active: map.get( $kendo-palette-blue, 4 ),
-    primary: map.get( $kendo-palette-blue, 8 ),
-    primary-hover: map.get( $kendo-palette-blue, 9 ),
-    primary-active: map.get( $kendo-palette-blue, 10 ),
-    primary-emphasis: rgba( map.get( $kendo-palette-blue, 8 ), .40),
-    primary-on-subtle: map.get( $kendo-palette-blue, 13 ),
-    on-primary: map.get( $kendo-palette-gray, "white" ),
-    primary-on-surface: map.get( $kendo-palette-blue, 8 ),
+    primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.908 calc(c * 0.196) h)"},
+    primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.868 calc(c * 0.280) h)"},
+    primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.816 calc(c * 0.400) h)"},
+    primary: oklch(57.82% 0.2283 260.03deg),
+    primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.0633) calc(c - 0.0285) h)"},
+    primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.0865) calc(c - 0.0379) h)"},
+    primary-emphasis: #{"oklch(from var(--kendo-color-primary) l c h / 0.40)"},
+    primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.530) calc(c * 0.478) h)"},
+    on-primary: #{"oklch(from var(--kendo-color-primary) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    primary-on-surface: #{"oklch(from var(--kendo-color-primary) l c h)"},
+
     // Secondary
-    secondary-subtle: map.get( $kendo-palette-greige, 3 ),
-    secondary-subtle-hover: map.get( $kendo-palette-greige, 4 ),
-    secondary-subtle-active: map.get( $kendo-palette-greige, 5 ),
-    secondary: map.get( $kendo-palette-gray, 8 ),
-    secondary-hover: map.get( $kendo-palette-gray, 9 ),
-    secondary-active: map.get( $kendo-palette-gray, 10 ),
-    secondary-emphasis: rgba( map.get( $kendo-palette-gray, 9 ), .40),
-    secondary-on-subtle: map.get( $kendo-palette-gray, 13 ),
-    on-secondary: map.get( $kendo-palette-gray, "white" ),
-    secondary-on-surface: map.get( $kendo-palette-gray, 9 ),
+    secondary-subtle: #{"oklch(from var(--kendo-color-secondary) 0.916 calc(c * 0.182) h)"},
+    secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) 0.870 calc(c * 0.109) h)"},
+    secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) 0.829 calc(c * 0.115) h)"},
+    secondary: oklch(55.75% 0.0165 244.95deg),
+    secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0615) c h)"},
+    secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0804) c h)"},
+    secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0615) calc(c - 0.0023) h / 0.40)"},
+    secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) clamp(0.3024, (0.55 - l) * 99999, 0.95) 0 h)"},
+    on-secondary: #{"oklch(from var(--kendo-color-secondary) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    secondary-on-surface: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0615) c h)"},
+
     // Tertiary
-    tertiary-subtle: map.get( $kendo-palette-indigo, 2 ),
-    tertiary-subtle-hover: map.get( $kendo-palette-indigo, 3 ),
-    tertiary-subtle-active: map.get( $kendo-palette-indigo, 4 ),
-    tertiary: map.get( $kendo-palette-indigo, 9 ),
-    tertiary-hover: map.get( $kendo-palette-indigo, 10 ),
-    tertiary-active: map.get( $kendo-palette-indigo, 11 ),
-    tertiary-emphasis: rgba( map.get( $kendo-palette-indigo, 8 ), .40),
-    tertiary-on-subtle: map.get( $kendo-palette-indigo, 13 ),
-    on-tertiary: map.get( $kendo-palette-gray, "white" ),
-    tertiary-on-surface: map.get( $kendo-palette-indigo, 8 ),
-    // Info
-    info-subtle: map.get( $kendo-palette-cyan, 2 ),
-    info-subtle-hover: map.get( $kendo-palette-cyan, 3 ),
-    info-subtle-active: map.get( $kendo-palette-cyan, 4 ),
-    info: map.get( $kendo-palette-cyan, 8 ),
-    info-hover: map.get( $kendo-palette-cyan, 7 ),
-    info-active: map.get( $kendo-palette-cyan, 6 ),
-    info-emphasis: rgba( map.get( $kendo-palette-cyan, 8 ), .40),
-    info-on-subtle: map.get( $kendo-palette-cyan, 13 ),
-    on-info: map.get( $kendo-palette-gray, "black" ),
-    info-on-surface: map.get( $kendo-palette-cyan, 8 ),
+    tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.900 calc(c * 0.194) h)"},
+    tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.847 calc(c * 0.295) h)"},
+    tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.799 calc(c * 0.391) h)"},
+    tertiary: oklch(50.15% 0.1884 294.99deg),
+    tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0724) calc(c - 0.0317) h)"},
+    tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.147) calc(c - 0.0638) h)"},
+    tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) calc(l + 0.0522) calc(c - 0.0232) h / 0.40)"},
+    tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.542) calc(c * 0.479) h)"},
+    on-tertiary: #{"oklch(from var(--kendo-color-tertiary) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    tertiary-on-surface: #{"oklch(from var(--kendo-color-tertiary) calc(l + 0.0522) calc(c - 0.0232) h)"},
+
+    // Info (hover/active lighten)
+    info-subtle: #{"oklch(from var(--kendo-color-info) 0.943 calc(c * 0.288) h)"},
+    info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.915 calc(c * 0.422) h)"},
+    info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.893 calc(c * 0.562) h)"},
+    info: oklch(77.49% 0.138 218.08deg),
+    info-hover: #{"oklch(from var(--kendo-color-info) calc(l + 0.0235) calc(c - 0.0061) h)"},
+    info-active: #{"oklch(from var(--kendo-color-info) calc(l + 0.033) calc(c - 0.0093) h)"},
+    info-emphasis: #{"oklch(from var(--kendo-color-info) l c h / 0.40)"},
+    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.518) calc(c * 0.504) h)"},
+    on-info: #{"oklch(from var(--kendo-color-info) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    info-on-surface: #{"oklch(from var(--kendo-color-info) l c h)"},
+
     // Success
-    success-subtle: map.get( $kendo-palette-green, 2 ),
-    success-subtle-hover: map.get( $kendo-palette-green, 3 ),
-    success-subtle-active: map.get( $kendo-palette-green, 4 ),
-    success: map.get( $kendo-palette-green, 10 ),
-    success-hover: map.get( $kendo-palette-green, 11 ),
-    success-active: map.get( $kendo-palette-green, 12 ),
-    success-emphasis: rgba( map.get( $kendo-palette-green, 10 ), .40),
-    success-on-subtle: map.get( $kendo-palette-green, 14 ),
-    on-success: map.get( $kendo-palette-gray, "white" ),
-    success-on-surface: map.get( $kendo-palette-green, 10 ),
-    // Warning
-    warning-subtle: map.get( $kendo-palette-yellow, 2 ),
-    warning-subtle-hover: map.get( $kendo-palette-yellow, 3 ),
-    warning-subtle-active: map.get( $kendo-palette-yellow, 4 ),
-    warning: map.get( $kendo-palette-yellow, 8 ),
-    warning-hover: map.get( $kendo-palette-yellow, 7 ),
-    warning-active: map.get( $kendo-palette-yellow, 6 ),
-    warning-emphasis: rgba( map.get( $kendo-palette-yellow, 8 ), .40),
-    warning-on-subtle: map.get( $kendo-palette-yellow, 13 ),
-    on-warning: map.get( $kendo-palette-gray, "black" ),
-    warning-on-surface: map.get( $kendo-palette-yellow, 8 ),
+    success-subtle: #{"oklch(from var(--kendo-color-success) 0.909 calc(c * 0.218) h)"},
+    success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.863 calc(c * 0.328) h)"},
+    success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.818 calc(c * 0.439) h)"},
+    success: oklch(55.20% 0.1234 157.04deg),
+    success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.0598) calc(c - 0.0139) h)"},
+    success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.081) calc(c - 0.0196) h)"},
+    success-emphasis: #{"oklch(from var(--kendo-color-success) l c h / 0.40)"},
+    success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l * 0.538) calc(c * 0.485) h)"},
+    on-success: #{"oklch(from var(--kendo-color-success) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    success-on-surface: #{"oklch(from var(--kendo-color-success) l c h)"},
+
+    // Warning (hover/active lighten)
+    warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.964 calc(c * 0.296) h)"},
+    warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.945 calc(c * 0.425) h)"},
+    warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.929 calc(c * 0.560) h)"},
+    warning: oklch(84.42% 0.1721 84.94deg),
+    warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l + 0.0182) calc(c - 0.0055) h)"},
+    warning-active: #{"oklch(from var(--kendo-color-warning) calc(l + 0.0246) calc(c - 0.0098) h)"},
+    warning-emphasis: #{"oklch(from var(--kendo-color-warning) l c h / 0.40)"},
+    warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.515) calc(c * 0.508) h)"},
+    on-warning: #{"oklch(from var(--kendo-color-warning) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    warning-on-surface: #{"oklch(from var(--kendo-color-warning) l c h)"},
+
     // Error
-    error-subtle: map.get( $kendo-palette-red, 2 ),
-    error-subtle-hover: map.get( $kendo-palette-red, 3 ),
-    error-subtle-active: map.get( $kendo-palette-red, 4 ),
-    error: map.get( $kendo-palette-red, 8 ),
-    error-hover: map.get( $kendo-palette-red, 9 ),
-    error-active: map.get( $kendo-palette-red, 10 ),
-    error-emphasis: rgba( map.get( $kendo-palette-red, 8 ), .40),
-    error-on-subtle: map.get( $kendo-palette-red, 13 ),
-    on-error: map.get( $kendo-palette-gray, "white" ),
-    error-on-surface: map.get( $kendo-palette-red, 8 ),
-    // Light
-    light-subtle: map.get( $kendo-palette-greige, 1 ),
-    light-subtle-hover: map.get( $kendo-palette-greige, 2 ),
-    light-subtle-active: map.get( $kendo-palette-gray, 2 ),
-    light: map.get( $kendo-palette-gray, 1 ),
-    light-hover: map.get( $kendo-palette-greige, 4 ),
-    light-active: map.get( $kendo-palette-greige, 5 ),
-    light-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .10),
-    light-on-subtle: map.get( $kendo-palette-gray, 11 ),
-    on-light: map.get( $kendo-palette-gray, "black" ),
-    light-on-surface: map.get( $kendo-palette-gray, 1 ),
-    // Dark
-    dark-subtle: map.get( $kendo-palette-gray, 4 ),
-    dark-subtle-hover: map.get( $kendo-palette-gray, 5 ),
-    dark-subtle-active: map.get( $kendo-palette-gray, 6 ),
-    dark: map.get( $kendo-palette-gray, 14 ),
-    dark-hover: map.get( $kendo-palette-greige, 12 ),
-    dark-active: map.get( $kendo-palette-greige, 11 ),
-    dark-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .40),
-    dark-on-subtle: map.get( $kendo-palette-gray, 11 ),
-    on-dark: map.get( $kendo-palette-gray, "white" ),
-    dark-on-surface: map.get( $kendo-palette-gray, 14 ),
+    error-subtle: #{"oklch(from var(--kendo-color-error) 0.908 calc(c * 0.183) h)"},
+    error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.861 calc(c * 0.291) h)"},
+    error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.816 calc(c * 0.391) h)"},
+    error: oklch(59.16% 0.202 21.23deg),
+    error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0662) calc(c - 0.0245) h)"},
+    error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0892) calc(c - 0.0325) h)"},
+    error-emphasis: #{"oklch(from var(--kendo-color-error) l c h / 0.40)"},
+    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l * 0.527) calc(c * 0.483) h)"},
+    on-error: #{"oklch(from var(--kendo-color-error) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    error-on-surface: #{"oklch(from var(--kendo-color-error) l c h)"},
+
+    // Light (mixed greige + gray palettes — static)
+    light-subtle: oklch(99.13% 0.0014 285deg),
+    light-subtle-hover: oklch(94.31% 0.0001 263.28deg),
+    light-subtle-active: oklch(94.17% 0.0053 248.12deg),
+    light: oklch(98.16% 0.0018 248.57deg),
+    light-hover: oklch(86.95% 0.0018 248.47deg),
+    light-active: oklch(82.92% 0.0019 248.44deg),
+    light-emphasis: oklch(26.21% 0.0095 248.23deg / 0.10),
+    light-on-subtle: oklch(42.76% 0.0147 248.21deg),
+    on-light: oklch(0% 0 0deg),
+    light-on-surface: oklch(98.16% 0.0018 248.57deg),
+
+    // Dark (mixed gray + greige palettes — static)
+    dark-subtle: oklch(86.71% 0.0106 248.06deg),
+    dark-subtle-hover: oklch(81.70% 0.0126 248.07deg),
+    dark-subtle-active: oklch(76.92% 0.0146 248.09deg),
+    dark: oklch(26.21% 0.0095 248.23deg),
+    dark-hover: oklch(39.15% 0.0074 240.11deg),
+    dark-active: oklch(43.24% 0.0072 240.09deg),
+    dark-emphasis: oklch(26.21% 0.0095 248.23deg / 0.40),
+    dark-on-subtle: oklch(42.76% 0.0147 248.21deg),
+    on-dark: oklch(100% 0 0deg),
+    dark-on-surface: oklch(26.21% 0.0095 248.23deg),
+
     // Inverse
-    inverse-subtle: map.get( $kendo-palette-gray, 11 ),
-    inverse-subtle-hover: map.get( $kendo-palette-gray, 10 ),
-    inverse-subtle-active: map.get( $kendo-palette-gray, 9 ),
-    inverse: map.get( $kendo-palette-gray, 14 ),
-    inverse-hover: map.get( $kendo-palette-gray, 12 ),
-    inverse-active: map.get( $kendo-palette-gray, 11 ),
-    inverse-emphasis: rgba( map.get( $kendo-palette-gray, 14 ), .40),
-    inverse-on-subtle: map.get( $kendo-palette-gray, "white" ),
-    on-inverse: map.get( $kendo-palette-gray, "white" ),
-    inverse-on-surface: map.get( $kendo-palette-gray, 14 ),
-    // Series A
-    series-a: map.get( $kendo-palette-blue, 9 ),
-    series-a-bold: map.get( $kendo-palette-blue, 12 ),
-    series-a-bolder: map.get( $kendo-palette-blue, 13 ),
-    series-a-subtle: map.get( $kendo-palette-blue, 7 ),
-    series-a-subtler: map.get( $kendo-palette-blue, 5 ),
-    // Series B
-    series-b: map.get( $kendo-palette-indigo, 8 ),
-    series-b-bold: map.get( $kendo-palette-indigo, 10 ),
-    series-b-bolder: map.get( $kendo-palette-indigo, 12 ),
-    series-b-subtle: map.get( $kendo-palette-indigo, 7 ),
-    series-b-subtler: map.get( $kendo-palette-indigo, 5 ),
-    // Series C
-    series-c: map.get( $kendo-palette-teal, 8 ),
-    series-c-bold: map.get( $kendo-palette-teal, 11 ),
-    series-c-bolder: map.get( $kendo-palette-teal, 13 ),
-    series-c-subtle: map.get( $kendo-palette-teal, 6 ),
-    series-c-subtler: map.get( $kendo-palette-teal, 4 ),
-    // Series D
-    series-d: map.get( $kendo-palette-green, 10 ),
-    series-d-bold: map.get( $kendo-palette-green, 12 ),
-    series-d-bolder: map.get( $kendo-palette-green, 14 ),
-    series-d-subtle: map.get( $kendo-palette-green, 8 ),
-    series-d-subtler: map.get( $kendo-palette-green, 5 ),
-    // Series Е
-    series-e: map.get( $kendo-palette-red, 8 ),
-    series-e-bold: map.get( $kendo-palette-red, 10 ),
-    series-e-bolder: map.get( $kendo-palette-red, 12 ),
-    series-e-subtle: map.get( $kendo-palette-red, 7 ),
-    series-e-subtler: map.get( $kendo-palette-red, 4 ),
-    // Series F
-    series-f: map.get( $kendo-palette-yellow, 8 ),
-    series-f-bold: map.get( $kendo-palette-yellow, 10 ),
-    series-f-bolder: map.get( $kendo-palette-yellow, 12 ),
-    series-f-subtle: map.get( $kendo-palette-yellow, 7 ),
-    series-f-subtler: map.get( $kendo-palette-yellow, 5 ),
+    inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.1655) c h)"},
+    inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.215) c h)"},
+    inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.2339) c h)"},
+    inverse: oklch(26.21% 0.0095 248.23deg),
+    inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.083) c h)"},
+    inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.1655) c h)"},
+    inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) l c h / 0.40)"},
+    inverse-on-subtle: #{"oklch(from var(--kendo-color-inverse) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    on-inverse: #{"oklch(from var(--kendo-color-inverse) clamp(0, (0.7 - l) * 99999, 1) 0 h)"},
+    inverse-on-surface: #{"oklch(from var(--kendo-color-inverse) l c h)"},
+
+    // Series
+    series: oklch(51.49% 0.1998 259.81deg),
+
+    // Series A (blue)
+    series-a: var(--kendo-color-series),
+    series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.781) calc(c * 0.760) h)"},
+    series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.595) calc(c * 0.547) h)"},
+    series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.257) calc(c * 0.933) h)"},
+    series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.497) calc(c * 0.581) h)"},
+    // Series B (indigo)
+    series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.0388) calc(c - 0.0346) calc(h + 36.75))"},
+    series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.775) calc(c * 0.949) h)"},
+    series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.561) calc(c * 0.639) h)"},
+    series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.081) calc(c * 0.917) h)"},
+    series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.366) calc(c * 0.548) h)"},
+    // Series C (teal)
+    series-c: #{"oklch(from var(--kendo-color-series) calc(l + 0.2292) calc(c - 0.0518) calc(h - 93.42))"},
+    series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.690) calc(c * 0.675) h)"},
+    series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.518) calc(c * 0.491) h)"},
+    series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.120) calc(c * 0.715) h)"},
+    series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.234) calc(c * 0.351) h)"},
+    // Series D (green)
+    series-d: #{"oklch(from var(--kendo-color-series) calc(l + 0.0371) calc(c - 0.0764) calc(h - 102.77))"},
+    series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.853) calc(c * 0.841) h)"},
+    series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.538) calc(c * 0.485) h)"},
+    series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.154) calc(c * 0.858) h)"},
+    series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.398) calc(c * 0.549) h)"},
+    // Series E (red)
+    series-e: #{"oklch(from var(--kendo-color-series) calc(l + 0.0767) calc(c + 0.0022) calc(h + 121.42))"},
+    series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.849) calc(c * 0.839) h)"},
+    series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.613) calc(c * 0.573) h)"},
+    series-e-subtle: #{"oklch(from var(--kendo-color-series-e) calc(l * 1.103) calc(c * 0.826) h)"},
+    series-e-subtler: #{"oklch(from var(--kendo-color-series-e) calc(l * 1.378) calc(c * 0.391) h)"},
+    // Series F (yellow)
+    series-f: #{"oklch(from var(--kendo-color-series) calc(l + 0.3293) calc(c - 0.0277) calc(h - 174.87))"},
+    series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.768) calc(c * 0.765) h)"},
+    series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.604) calc(c * 0.598) h)"},
+    series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.022) calc(c * 0.968) h)"},
+    series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.064) calc(c * 0.793) h)"},
 ) !default;
 
 /// The global default Colors map.
@@ -361,6 +375,11 @@ $_default-colors: (
 /// @prop {Color} on-inverse - The text color variable for content on inverse.
 /// @prop {Color} inverse-on-surface - The text color variable for content on surface.
 ///
+/// @subgroup {series}
+/// [series]
+/// The Series base variable group.
+/// @prop {Color} series - The base series color variable.
+///
 /// @subgroup {series-a}
 /// [series-a, series-a-bold, series-a-bolder,
 /// series-a-subtle, series-a-subtler]