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

package/scss/colorpalette/_variables.scss

@@ -9,10 +9,10 @@ $kendo-color-palette-default-size: "md" !default;
 
 /// The font family of the ColorPalette.
 /// @group color-palette
-$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-palette-font-family: var(--kendo-font-family) !default;
 /// The font size of the ColorPalette.
 /// @group color-palette
-$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-palette-font-size: var(--kendo-font-size) !default;
 /// The line height of the ColorPalette.
 /// @group color-palette
 $kendo-color-palette-line-height: 0 !default;

package/scss/column-menu/_variables.scss

@@ -28,33 +28,33 @@ $kendo-column-menu-item-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-column-menu-font-size: var(--kendo-font-size) !default;
 /// The font size of the small ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-column-menu-sm-font-size: var(--kendo-font-size) !default;
 /// The font size of the medium ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-column-menu-md-font-size: var(--kendo-font-size) !default;
 /// The font size of the large ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-column-menu-lg-font-size: var(--kendo-font-size-lg) !default;
 
 /// The line height of the ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-column-menu-line-height: var(--kendo-line-height) !default;
 /// The line height of the small ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-column-menu-sm-line-height: var(--kendo-line-height) !default;
 /// The line height of the medium ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-column-menu-md-line-height: var(--kendo-line-height) !default;
 /// The line height of the large ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-column-menu-lg-line-height: var(--kendo-line-height-lg) !default;
 
 /// The font family of the ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-column-menu-font-family: var(--kendo-font-family) !default;
 
 // Group Menu
 /// The background color of the hovered GroupMenu item action.

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]

package/scss/core/spacing/index.scss

@@ -1,46 +1,44 @@
 @use "sass:map";
 
+/// The base spacing step used to generate the Spacing map.
+/// @group spacing
+$kendo-spacing-base: 0.25rem !default;
+
 $_default-spacing: (
     0: 0px,
     1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem,
-    25: 7rem,
-    26: 8rem,
-    27: 9rem,
-    28: 10rem,
-    29: 11rem,
-    30: 12rem
+    0.5: calc(0.5 * var(--kendo-spacing-base)),
+    1: calc(1 * var(--kendo-spacing-base)),
+    1.5: calc(1.5 * var(--kendo-spacing-base)),
+    2: calc(2 * var(--kendo-spacing-base)),
+    2.5: calc(2.5 * var(--kendo-spacing-base)),
+    3: calc(3 * var(--kendo-spacing-base)),
+    3.5: calc(3.5 * var(--kendo-spacing-base)),
+    4: calc(4 * var(--kendo-spacing-base)),
+    4.5: calc(4.5 * var(--kendo-spacing-base)),
+    5: calc(5 * var(--kendo-spacing-base)),
+    5.5: calc(5.5 * var(--kendo-spacing-base)),
+    6: calc(6 * var(--kendo-spacing-base)),
+    6.5: calc(6.5 * var(--kendo-spacing-base)),
+    7: calc(7 * var(--kendo-spacing-base)),
+    7.5: calc(7.5 * var(--kendo-spacing-base)),
+    8: calc(8 * var(--kendo-spacing-base)),
+    9: calc(9 * var(--kendo-spacing-base)),
+    10: calc(10 * var(--kendo-spacing-base)),
+    11: calc(11 * var(--kendo-spacing-base)),
+    12: calc(12 * var(--kendo-spacing-base)),
+    13: calc(13 * var(--kendo-spacing-base)),
+    14: calc(14 * var(--kendo-spacing-base)),
+    15: calc(15 * var(--kendo-spacing-base)),
+    16: calc(16 * var(--kendo-spacing-base)),
+    17: calc(17 * var(--kendo-spacing-base)),
+    18: calc(18 * var(--kendo-spacing-base)),
+    19: calc(19 * var(--kendo-spacing-base)),
+    20: calc(20 * var(--kendo-spacing-base)),
+    21: calc(21 * var(--kendo-spacing-base)),
+    22: calc(22 * var(--kendo-spacing-base)),
+    23: calc(23 * var(--kendo-spacing-base)),
+    24: calc(24 * var(--kendo-spacing-base)),
 ) !default;
 
 /// The global default Spacing map.