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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "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(2) !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(2) !default;
 /// @group button
 $kendo-button-lg-padding-x: k-spacing(3) !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(0.5) !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: var(--kendo-font-size) !default;
+/// The font size of the xsmall Button.
+/// @group button
+$kendo-button-xs-font-size: var(--kendo-font-size) !default;
 /// The font size of the small Button.
 /// @group button
 $kendo-button-sm-font-size: var(--kendo-font-size) !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: var(--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: var(--kendo-line-height) !default;
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
 $kendo-button-sm-line-height: var(--kendo-line-height) !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-lg) !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;
@@ -254,26 +268,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

@@ -50,6 +50,7 @@
     $default-spacing: $kendo-spacing,
     $kendo-spacing: $kendo-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,
     // Motion

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

@@ -1,33 +1,36 @@
 @use "sass:map";
-@use "../spacing/index.scss" as *;
+
+/// The base border radius used across the Components.
+/// @group radii
+$kendo-border-radius-base: .25rem !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, 1px) !default;
+$kendo-border-radius-xs: calc(var(--kendo-border-radius-base) * .25) !default;
 /// The small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: calc(var(--kendo-border-radius-base) * .5) !default;
 /// The medium border radius used across the Components.
 /// @group radii
-$kendo-border-radius-md: map.get($kendo-spacing, 1) !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, 1.5) !default;
+$kendo-border-radius-lg: calc(var(--kendo-border-radius-base) * 1.5) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: calc(var(--kendo-border-radius-base) * 2) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: calc(var(--kendo-border-radius-base) * 3) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: calc(var(--kendo-border-radius-base) * 4) !default;
 /// The largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-full: 9999px !default;
+$kendo-border-radius-full: calc(var(--kendo-border-radius-base) * 9999) !default;
 
 
 $_default-border-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-ash-gray, "white" ),
-    on-app-surface: map.get( $kendo-palette-ash-gray, 15 ),
-    subtle: map.get( $kendo-palette-ash-gray, 11 ),
-    surface: map.get( $kendo-palette-ash-gray, 2 ),
-    surface-alt: map.get( $kendo-palette-ash-gray, "white" ),
-    border: map.get( $kendo-palette-ash-gray, 6 ),
-    border-alt: map.get( $kendo-palette-ash-gray, 7 ),
-    // Base
-    base-subtle: map.get( $kendo-palette-ash-gray, 2 ),
-    base-subtle-hover: map.get( $kendo-palette-ash-gray, 3 ),
-    base-subtle-active: map.get( $kendo-palette-ash-gray, 4 ),
-    base: map.get( $kendo-palette-ash-gray, 3 ),
-    base-hover: map.get( $kendo-palette-ash-gray, 4 ),
-    base-active: map.get( $kendo-palette-ash-gray, 5 ),
-    base-emphasis: map.get( $kendo-palette-ash-gray, 6 ),
-    base-on-subtle: map.get( $kendo-palette-ash-gray, 15 ),
-    on-base: map.get( $kendo-palette-ash-gray, 15 ),
-    base-on-surface: map.get( $kendo-palette-ash-gray, 15 ),
-    // Primary
-    primary-subtle: map.get( $kendo-palette-tangerine-orange, 1 ),
-    primary-subtle-hover: map.get( $kendo-palette-tangerine-orange, 2 ),
-    primary-subtle-active: map.get( $kendo-palette-tangerine-orange, 3 ),
-    primary: map.get( $kendo-palette-tangerine-orange, 9 ),
-    primary-hover: map.get( $kendo-palette-tangerine-orange, 10 ),
-    primary-active: map.get( $kendo-palette-tangerine-orange, 11 ),
-    primary-emphasis: map.get( $kendo-palette-tangerine-orange, 7 ),
-    primary-on-subtle: map.get( $kendo-palette-tangerine-orange, 15 ),
-    on-primary: map.get( $kendo-palette-ash-gray, "white" ),
-    primary-on-surface: map.get( $kendo-palette-tangerine-orange, 9 ),
-    // Secondary
-    secondary-subtle: map.get( $kendo-palette-ash-gray, 6 ),
-    secondary-subtle-hover: map.get( $kendo-palette-ash-gray, 7 ),
-    secondary-subtle-active: map.get( $kendo-palette-ash-gray, 8 ),
-    secondary: map.get( $kendo-palette-ash-gray, 7 ),
-    secondary-hover: map.get( $kendo-palette-ash-gray, 8 ),
-    secondary-active: map.get( $kendo-palette-ash-gray, 9 ),
-    secondary-emphasis: map.get( $kendo-palette-ash-gray, 10 ),
-    secondary-on-subtle: map.get( $kendo-palette-ash-gray, 15 ),
-    on-secondary: map.get( $kendo-palette-ash-gray, "black" ),
-    secondary-on-surface: map.get( $kendo-palette-ash-gray, 9 ),
-    // Tertiary
-    tertiary-subtle: map.get( $kendo-palette-dodger-blue, 4 ),
-    tertiary-subtle-hover: map.get( $kendo-palette-dodger-blue, 5 ),
-    tertiary-subtle-active: map.get( $kendo-palette-dodger-blue, 6 ),
-    tertiary: map.get( $kendo-palette-dodger-blue, 9 ),
-    tertiary-hover: map.get( $kendo-palette-dodger-blue, 10 ),
-    tertiary-active: map.get( $kendo-palette-dodger-blue, 11 ),
-    tertiary-emphasis: map.get( $kendo-palette-dodger-blue, 7 ),
-    tertiary-on-subtle: map.get( $kendo-palette-dodger-blue, 15 ),
-    on-tertiary: map.get( $kendo-palette-ash-gray, "white" ),
-    tertiary-on-surface: map.get( $kendo-palette-dodger-blue, 13 ),
-    // Info
-    info-subtle: map.get( $kendo-palette-lake-blue, 3 ),
-    info-subtle-hover: map.get( $kendo-palette-lake-blue, 4 ),
-    info-subtle-active: map.get( $kendo-palette-lake-blue, 6 ),
-    info: map.get( $kendo-palette-lake-blue, 9 ),
-    info-hover: map.get( $kendo-palette-lake-blue, 10 ),
-    info-active: map.get( $kendo-palette-lake-blue, 11 ),
-    info-emphasis: map.get( $kendo-palette-lake-blue, 7 ),
-    info-on-subtle: map.get( $kendo-palette-lake-blue, 15 ),
-    on-info: map.get( $kendo-palette-ash-gray, "white" ),
-    info-on-surface: map.get( $kendo-palette-lake-blue, 13 ),
-    // Success
-    success-subtle: map.get( $kendo-palette-grass-green, 4 ),
-    success-subtle-hover: map.get( $kendo-palette-grass-green, 5 ),
-    success-subtle-active: map.get( $kendo-palette-grass-green, 6 ),
-    success: map.get( $kendo-palette-grass-green, 9 ),
-    success-hover: map.get( $kendo-palette-grass-green, 10 ),
-    success-active: map.get( $kendo-palette-grass-green, 11 ),
-    success-emphasis: map.get( $kendo-palette-grass-green, 7 ),
-    success-on-subtle: map.get( $kendo-palette-grass-green, 15 ),
-    on-success: map.get( $kendo-palette-ash-gray, "white" ),
-    success-on-surface: map.get( $kendo-palette-grass-green, 13 ),
-    // Warning
-    warning-subtle: map.get( $kendo-palette-honey-yellow, 4 ),
-    warning-subtle-hover: map.get( $kendo-palette-honey-yellow, 5 ),
-    warning-subtle-active: map.get( $kendo-palette-honey-yellow, 6 ),
-    warning: map.get( $kendo-palette-honey-yellow, 8 ),
-    warning-hover: map.get( $kendo-palette-honey-yellow, 9 ),
-    warning-active: map.get( $kendo-palette-honey-yellow, 10 ),
-    warning-emphasis: map.get( $kendo-palette-honey-yellow, 7 ),
-    warning-on-subtle: map.get( $kendo-palette-honey-yellow, 15 ),
-    on-warning: map.get( $kendo-palette-ash-gray, "black" ),
-    warning-on-surface: map.get( $kendo-palette-honey-yellow, 8 ),
-    // Error
-    error-subtle: map.get( $kendo-palette-brick-red, 4 ),
-    error-subtle-hover: map.get( $kendo-palette-brick-red, 5 ),
-    error-subtle-active: map.get( $kendo-palette-brick-red, 6 ),
-    error: map.get( $kendo-palette-brick-red, 9 ),
-    error-hover: map.get( $kendo-palette-brick-red, 10 ),
-    error-active: map.get( $kendo-palette-brick-red, 11 ),
-    error-emphasis: map.get( $kendo-palette-brick-red, 7 ),
-    error-on-subtle: map.get( $kendo-palette-brick-red, 15 ),
-    on-error: map.get( $kendo-palette-ash-gray, "white" ),
-    error-on-surface: map.get( $kendo-palette-brick-red, 13 ),
-    // Light
-    light-subtle: map.get( $kendo-palette-ash-gray, 2 ),
-    light-subtle-hover: map.get( $kendo-palette-ash-gray, 3 ),
-    light-subtle-active: map.get( $kendo-palette-ash-gray, 4 ),
-    light: map.get( $kendo-palette-ash-gray, 3 ),
-    light-hover: map.get( $kendo-palette-ash-gray, 4 ),
-    light-active: map.get( $kendo-palette-ash-gray, 5 ),
-    light-emphasis: map.get( $kendo-palette-ash-gray, 6 ),
-    light-on-subtle: map.get( $kendo-palette-ash-gray, 15 ),
-    on-light: map.get( $kendo-palette-ash-gray, "black" ),
-    light-on-surface: map.get( $kendo-palette-ash-gray, 3 ),
-    // Dark
-    dark-subtle: map.get( $kendo-palette-ash-gray, 6 ),
-    dark-subtle-hover: map.get( $kendo-palette-ash-gray, 7 ),
-    dark-subtle-active: map.get( $kendo-palette-ash-gray, 8 ),
-    dark: map.get( $kendo-palette-ash-gray, 13 ),
-    dark-hover: map.get( $kendo-palette-ash-gray, 14 ),
-    dark-active: map.get( $kendo-palette-ash-gray, 15 ),
-    dark-emphasis: map.get( $kendo-palette-ash-gray, 10 ),
-    dark-on-subtle: map.get( $kendo-palette-ash-gray, "black" ),
-    on-dark: map.get( $kendo-palette-ash-gray, "white" ),
-    dark-on-surface: map.get( $kendo-palette-ash-gray, 14 ),
-    // Inverse
-    inverse-subtle: map.get( $kendo-palette-ash-gray, 6 ),
-    inverse-subtle-hover: map.get( $kendo-palette-ash-gray, 7 ),
-    inverse-subtle-active: map.get( $kendo-palette-ash-gray, 8 ),
-    inverse: map.get( $kendo-palette-ash-gray, 13 ),
-    inverse-hover: map.get( $kendo-palette-ash-gray, 14 ),
-    inverse-active: map.get( $kendo-palette-ash-gray, 15 ),
-    inverse-emphasis: map.get( $kendo-palette-ash-gray, 10 ),
-    inverse-on-subtle: map.get( $kendo-palette-ash-gray, "black" ),
-    on-inverse: map.get( $kendo-palette-ash-gray, "white" ),
-    inverse-on-surface: map.get( $kendo-palette-ash-gray, 14 ),
-    // Series A
-    series-a: map.get( $kendo-palette-coral, 9 ),
-    series-a-bold: map.get( $kendo-palette-coral, 12 ),
-    series-a-bolder: map.get( $kendo-palette-coral, 14 ),
-    series-a-subtle: map.get( $kendo-palette-coral, 5 ),
-    series-a-subtler: map.get( $kendo-palette-coral, 7 ),
-    // Series B
-    series-b: map.get( $kendo-palette-pineapple-yellow, 9 ),
-    series-b-bold: map.get( $kendo-palette-pineapple-yellow, 12 ),
-    series-b-bolder: map.get( $kendo-palette-pineapple-yellow, 14 ),
-    series-b-subtle: map.get( $kendo-palette-pineapple-yellow, 5 ),
-    series-b-subtler: map.get( $kendo-palette-pineapple-yellow, 7 ),
-    // Series C
-    series-c: map.get( $kendo-palette-apple-green, 9 ),
-    series-c-bold: map.get( $kendo-palette-apple-green, 12 ),
-    series-c-bolder: map.get( $kendo-palette-apple-green, 14 ),
-    series-c-subtle: map.get( $kendo-palette-apple-green, 5 ),
-    series-c-subtler: map.get( $kendo-palette-apple-green, 7 ),
-    // Series D
-    series-d: map.get( $kendo-palette-pacific-blue, 9 ),
-    series-d-bold: map.get( $kendo-palette-pacific-blue, 12 ),
-    series-d-bolder: map.get( $kendo-palette-pacific-blue, 14 ),
-    series-d-subtle: map.get( $kendo-palette-pacific-blue, 5 ),
-    series-d-subtler: map.get( $kendo-palette-pacific-blue, 7 ),
-    // Series Е
-    series-e: map.get( $kendo-palette-bright-blue, 9 ),
-    series-e-bold: map.get( $kendo-palette-bright-blue, 12 ),
-    series-e-bolder: map.get( $kendo-palette-bright-blue, 14 ),
-    series-e-subtle: map.get( $kendo-palette-bright-blue, 5 ),
-    series-e-subtler: map.get( $kendo-palette-bright-blue, 7 ),
-    // Series F
-    series-f: map.get( $kendo-palette-orchid-purple, 9 ),
-    series-f-bold: map.get( $kendo-palette-orchid-purple, 12 ),
-    series-f-bolder: map.get( $kendo-palette-orchid-purple, 14 ),
-    series-f-subtle: map.get( $kendo-palette-orchid-purple, 5 ),
-    series-f-subtler: map.get( $kendo-palette-orchid-purple, 7 ),
+    // Misc (ash-gray — achromatic)
+    app-surface: oklch(100% 0 0deg),
+    on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.27, (0.6 - l) * 99999, 0.95) 0 h)"},
+    subtle: oklch(51.03% 0 0deg),
+    surface: oklch(95.51% 0 0deg),
+    surface-alt: #{"oklch(from var(--kendo-color-surface) calc(l + 0.045) c h)"},
+    border: oklch(83.9% 0 0deg),
+    border-alt: oklch(77.63% 0 0deg),
+
+    // Base (ash-gray, achromatic)
+    base-subtle: #{"oklch(from var(--kendo-color-base) calc(l + 0.015) 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.0425) c h)"},
+    base: oklch(94.01% 0 0deg),
+    base-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.0425) c h)"},
+    base-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.064) c h)"},
+    base-emphasis: #{"oklch(from var(--kendo-color-base) calc(l - 0.1011) c h)"},
+    base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.27, (0.6 - l) * 99999, 0.95) 0 h)"},
+    on-base: #{"oklch(from var(--kendo-color-base) clamp(0.27, (0.6 - l) * 99999, 0.95) 0 h)"},
+    base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.27, (0.6 - l) * 99999, 0.95) 0 h)"},
+
+    // Primary (tangerine-orange)
+    primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.9694 calc(c * 0.083) h)"},
+    primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.9391 calc(c * 0.172) h)"},
+    primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.9095 calc(c * 0.259) h)"},
+    primary: oklch(66% 0.2039 40.8deg),
+    primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.0387) calc(c - 0.0126) h)"},
+    primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.0796) calc(c - 0.0263) h)"},
+    primary-emphasis: #{"oklch(from var(--kendo-color-primary) calc(l + 0.0924) calc(c - 0.0415) h)"},
+    primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.389) calc(c * 0.343) 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 (ash-gray, achromatic)
+    secondary-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.0627) c h)"},
+    secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) l c h)"},
+    secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0608) c h)"},
+    secondary: oklch(77.63% 0 0deg),
+    secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.0608) c h)"},
+    secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.1262) c h)"},
+    secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.1968) c h)"},
+    secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) clamp(0.27, (0.6 - 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.1262) c h)"},
+
+    // Tertiary (dodger-blue)
+    tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.8696 calc(c * 0.508) h)"},
+    tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.8193 calc(c * 0.702) h)"},
+    tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.7758 calc(c * 0.854) h)"},
+    tertiary: oklch(69.91% 0.157 239deg),
+    tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0432) calc(c - 0.0100) h)"},
+    tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0843) calc(c - 0.0199) h)"},
+    tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) calc(l + 0.0500) calc(c - 0.0091) h)"},
+    tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.450) calc(c * 0.421) 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.755) calc(c * 0.742) h)"},
+
+    // Info (lake-blue)
+    info-subtle: #{"oklch(from var(--kendo-color-info) 0.9078 calc(c * 0.229) h)"},
+    info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.8384 calc(c * 0.401) h)"},
+    info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.7325 calc(c * 0.663) h)"},
+    info: oklch(56.38% 0.1427 245.3deg),
+    info-hover: #{"oklch(from var(--kendo-color-info) calc(l - 0.0336) calc(c - 0.0093) h)"},
+    info-active: #{"oklch(from var(--kendo-color-info) calc(l - 0.0672) calc(c - 0.0175) h)"},
+    info-emphasis: #{"oklch(from var(--kendo-color-info) calc(l + 0.0974) calc(c - 0.0250) h)"},
+    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.490) calc(c * 0.448) 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) calc(l * 0.762) calc(c * 0.743) h)"},
+
+    // Success (grass-green)
+    success-subtle: #{"oklch(from var(--kendo-color-success) 0.8695 calc(c * 0.359) h)"},
+    success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.8134 calc(c * 0.516) h)"},
+    success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.7611 calc(c * 0.671) h)"},
+    success: oklch(63.9% 0.1556 146.3deg),
+    success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.0373) calc(c - 0.0101) h)"},
+    success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.0752) calc(c - 0.0203) h)"},
+    success-emphasis: #{"oklch(from var(--kendo-color-success) calc(l + 0.0862) calc(c - 0.0345) h)"},
+    success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l * 0.485) calc(c * 0.427) 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) calc(l * 0.760) calc(c * 0.740) h)"},
+
+    // Warning (honey-yellow)
+    warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.9164 calc(c * 0.439) h)"},
+    warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.8973 calc(c * 0.542) h)"},
+    warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.8605 calc(c * 0.736) h)"},
+    warning: oklch(79.16% 0.1662 68.62deg),
+    warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l - 0.0214) calc(c + 0.0079) h)"},
+    warning-active: #{"oklch(from var(--kendo-color-warning) calc(l - 0.0669) calc(c - 0.0026) h)"},
+    warning-emphasis: #{"oklch(from var(--kendo-color-warning) calc(l + 0.0268) calc(c - 0.0139) h)"},
+    warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.461) calc(c * 0.479) 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 (brick-red)
+    error-subtle: #{"oklch(from var(--kendo-color-error) 0.8575 calc(c * 0.273) h)"},
+    error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.8235 calc(c * 0.352) h)"},
+    error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.7405 calc(c * 0.556) h)"},
+    error: oklch(57.1% 0.2143 32.35deg),
+    error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0332) calc(c - 0.0133) h)"},
+    error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0688) calc(c - 0.0277) h)"},
+    error-emphasis: #{"oklch(from var(--kendo-color-error) calc(l + 0.0755) calc(c - 0.0420) h)"},
+    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l * 0.482) calc(c * 0.445) 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) calc(l * 0.757) calc(c * 0.744) h)"},
+
+    // Light (ash-gray, achromatic)
+    light-subtle: #{"oklch(from var(--kendo-color-light) calc(l + 0.015) c h)"},
+    light-subtle-hover: #{"oklch(from var(--kendo-color-light) l c h)"},
+    light-subtle-active: #{"oklch(from var(--kendo-color-light) calc(l - 0.0425) c h)"},
+    light: oklch(94.01% 0 0deg),
+    light-hover: #{"oklch(from var(--kendo-color-light) calc(l - 0.0425) c h)"},
+    light-active: #{"oklch(from var(--kendo-color-light) calc(l - 0.064) c h)"},
+    light-emphasis: #{"oklch(from var(--kendo-color-light) calc(l - 0.1011) c h)"},
+    light-on-subtle: oklch(27.27% 0 0deg),
+    on-light: oklch(0% 0 0deg),
+    light-on-surface: #{"oklch(from var(--kendo-color-light) l c h)"},
+
+    // Dark (ash-gray, achromatic)
+    dark-subtle: #{"oklch(from var(--kendo-color-dark) calc(l + 0.4675) c h)"},
+    dark-subtle-hover: #{"oklch(from var(--kendo-color-dark) calc(l + 0.4048) c h)"},
+    dark-subtle-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.344) c h)"},
+    dark: oklch(37.15% 0 0deg),
+    dark-hover: #{"oklch(from var(--kendo-color-dark) calc(l - 0.0504) c h)"},
+    dark-active: #{"oklch(from var(--kendo-color-dark) calc(l - 0.0988) c h)"},
+    dark-emphasis: #{"oklch(from var(--kendo-color-dark) calc(l + 0.208) c h)"},
+    dark-on-subtle: oklch(0% 0 0deg),
+    on-dark: oklch(100% 0 0deg),
+    dark-on-surface: #{"oklch(from var(--kendo-color-dark) calc(l - 0.0504) c h)"},
+
+    // Inverse (ash-gray, achromatic)
+    inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.4675) c h)"},
+    inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.4048) c h)"},
+    inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.344) c h)"},
+    inverse: oklch(37.15% 0 0deg),
+    inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.0504) c h)"},
+    inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.0988) c h)"},
+    inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.208) c h)"},
+    inverse-on-subtle: #{"oklch(from var(--kendo-color-inverse) clamp(0, (l - 0.7) * 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) calc(l - 0.0504) c h)"},
+
+    // Series
+    series: oklch(69.85% 0.1923 27.19deg),
+
+    // Series A (coral)
+    series-a: var(--kendo-color-series),
+    series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.809) calc(c * 0.792) h)"},
+    series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.610) calc(c * 0.570) h)"},
+    series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.193) calc(c * 0.479) h)"},
+    series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.088) calc(c * 0.745) h)"},
+    // Series B (pineapple-yellow)
+    series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.1809) calc(c - 0.0345) calc(h + 63.21))"},
+    series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.806) calc(c * 0.794) h)"},
+    series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.602) calc(c * 0.582) h)"},
+    series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.064) calc(c * 0.585) h)"},
+    series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.030) calc(c * 0.823) h)"},
+    // Series C (apple-green)
+    series-c: #{"oklch(from var(--kendo-color-series) calc(l + 0.0798) calc(c + 0.0117) calc(h + 108.01))"},
+    series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.807) calc(c * 0.795) h)"},
+    series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.606) calc(c * 0.577) h)"},
+    series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.135) calc(c * 0.556) h)"},
+    series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.063) calc(c * 0.802) h)"},
+    // Series D (pacific-blue)
+    series-d: #{"oklch(from var(--kendo-color-series) calc(l + 0.0099) calc(c - 0.0778) calc(h + 182.51))"},
+    series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.810) calc(c * 0.801) h)"},
+    series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.608) calc(c * 0.588) h)"},
+    series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.189) calc(c * 0.622) h)"},
+    series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.092) calc(c * 0.863) h)"},
+    // Series E (bright-blue)
+    series-e: #{"oklch(from var(--kendo-color-series) calc(l - 0.1109) calc(c + 0.0152) calc(h + 234.21))"},
+    series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.813) calc(c * 0.795) h)"},
+    series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.619) calc(c * 0.569) h)"},
+    series-e-subtle: #{"oklch(from var(--kendo-color-series-e) calc(l * 1.335) calc(c * 0.486) h)"},
+    series-e-subtler: #{"oklch(from var(--kendo-color-series-e) calc(l * 1.160) calc(c * 0.743) h)"},
+    // Series F (orchid-purple)
+    series-f: #{"oklch(from var(--kendo-color-series) calc(l - 0.1561) calc(c - 0.0064) calc(h + 293.31))"},
+    series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.865) calc(c * 0.835) h)"},
+    series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.654) calc(c * 0.607) h)"},
+    series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.437) calc(c * 0.545) h)"},
+    series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.240) calc(c * 0.812) 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]