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

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]

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.