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

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-neutral-gray, 1 ),
-    on-app-surface: map.get( $kendo-palette-neutral-gray, 15 ),
-    subtle: map.get( $kendo-palette-neutral-gray, 11 ),
-    surface: map.get( $kendo-palette-neutral-gray, "white" ),
-    surface-alt: map.get( $kendo-palette-neutral-gray, "white" ),
-    border: rgba( map.get( $kendo-palette-neutral-gray, 15 ), .72),
-    border-alt: map.get( $kendo-palette-neutral-gray, "black" ),
+    app-surface: oklch(98.51% 0 0deg),
+    on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+    subtle: oklch(54.52% 0 0deg),
+    surface: oklch(100% 0 0deg),
+    surface-alt: #{"oklch(from var(--kendo-color-surface) l c h)"},
+    border: oklch(26.03% 0 0deg / 0.72),
+    border-alt: oklch(0% 0 0deg),
+
     // Base
-    base-subtle: map.get( $kendo-palette-neutral-gray, 2 ),
-    base-subtle-hover: map.get( $kendo-palette-neutral-gray, 4 ),
-    base-subtle-active: map.get( $kendo-palette-neutral-gray, 5 ),
-    base: map.get( $kendo-palette-neutral-gray, "white" ),
-    base-hover: map.get( $kendo-palette-neutral-gray, 2 ),
-    base-active: map.get( $kendo-palette-neutral-gray, 4 ),
-    base-emphasis: map.get( $kendo-palette-neutral-gray, 6 ),
-    base-on-subtle: map.get( $kendo-palette-neutral-gray, 15 ),
-    on-base: map.get( $kendo-palette-neutral-gray, 15 ),
-    base-on-surface: map.get( $kendo-palette-neutral-gray, 15 ),
+    base-subtle: #{"oklch(from var(--kendo-color-base) calc(l - 0.030) c h)"},
+    base-subtle-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.060) c h)"},
+    base-subtle-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.093) c h)"},
+    base: oklch(100% 0 0deg),
+    base-hover: #{"oklch(from var(--kendo-color-base) calc(l - 0.030) c h)"},
+    base-active: #{"oklch(from var(--kendo-color-base) calc(l - 0.060) c h)"},
+    base-emphasis: #{"oklch(from var(--kendo-color-base) calc(l - 0.139) c h)"},
+    base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+    on-base: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+    base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+
     // Primary
-    primary-subtle: map.get( $kendo-palette-blue, 1 ),
-    primary-subtle-hover: map.get( $kendo-palette-blue, 2 ),
-    primary-subtle-active: map.get( $kendo-palette-blue, 4 ),
-    primary: map.get( $kendo-palette-blue, 7 ),
-    primary-hover: map.get( $kendo-palette-blue, 8 ),
-    primary-active: map.get( $kendo-palette-blue, 9 ),
-    primary-emphasis: map.get( $kendo-palette-blue, 3 ),
-    primary-on-subtle: map.get( $kendo-palette-blue, 12 ),
-    on-primary: map.get( $kendo-palette-neutral-gray, "white" ),
-    primary-on-surface: map.get( $kendo-palette-blue, 7 ),
+    primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.961 calc(c * 0.100) h)"},
+    primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.910 calc(c * 0.252) h)"},
+    primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.812 calc(c * 0.601) h)"},
+    primary: oklch(52.63% 0.1494 251.63deg),
+    primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.050) calc(c - 0.0183) h)"},
+    primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.090) calc(c - 0.0371) h)"},
+    primary-emphasis: #{"oklch(from var(--kendo-color-primary) 0.847 calc(c * 0.456) h)"},
+    primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.555) calc(c * 0.434) h)"},
+    on-primary: #{"oklch(from var(--kendo-color-primary) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
+    primary-on-surface: #{"oklch(from var(--kendo-color-primary) l c h)"},
+
     // Secondary
-    secondary-subtle: map.get( $kendo-palette-neutral-gray, 3 ),
-    secondary-subtle-hover: map.get( $kendo-palette-neutral-gray, 1 ),
-    secondary-subtle-active: map.get( $kendo-palette-neutral-gray, "white" ),
-    secondary: map.get( $kendo-palette-neutral-gray, 4 ),
-    secondary-hover: map.get( $kendo-palette-neutral-gray, 2 ),
-    secondary-active: map.get( $kendo-palette-neutral-gray, 1 ),
-    secondary-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
-    secondary-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
-    on-secondary: map.get( $kendo-palette-neutral-gray, 12 ),
-    secondary-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
+    secondary-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.015) c h)"},
+    secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.045) c h)"},
+    secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.060) c h)"},
+    secondary: oklch(94.01% 0 0deg),
+    secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.030) c h)"},
+    secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l + 0.045) c h)"},
+    secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.033) c h)"},
+    secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
+    on-secondary: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
+    secondary-on-surface: #{"oklch(from var(--kendo-color-secondary) clamp(0.4926, (0.6 - l) * 99999, 0.95) 0 h)"},
+
     // Tertiary
-    tertiary-subtle: map.get( $kendo-palette-berry, 1 ),
-    tertiary-subtle-hover: map.get( $kendo-palette-berry, 2 ),
-    tertiary-subtle-active: map.get( $kendo-palette-berry, 3 ),
-    tertiary: map.get( $kendo-palette-berry, 9 ),
-    tertiary-hover: map.get( $kendo-palette-berry, 10 ),
-    tertiary-active: map.get( $kendo-palette-berry, 11 ),
-    tertiary-emphasis: map.get( $kendo-palette-berry, 3 ),
-    tertiary-on-subtle: map.get( $kendo-palette-berry, 10 ),
-    on-tertiary: map.get( $kendo-palette-neutral-gray, "white" ),
-    tertiary-on-surface: map.get( $kendo-palette-berry, 9 ),
-    // Info
-    info-subtle: map.get( $kendo-palette-steel-blue, 1 ),
-    info-subtle-hover: map.get( $kendo-palette-steel-blue, 2 ),
-    info-subtle-active: map.get( $kendo-palette-steel-blue, 3 ),
-    info: map.get( $kendo-palette-steel-blue, 8 ),
-    info-hover: map.get( $kendo-palette-steel-blue, 9 ),
-    info-active: map.get( $kendo-palette-steel-blue, 7 ),
-    info-emphasis: map.get( $kendo-palette-steel-blue, 3 ),
-    info-on-subtle: map.get( $kendo-palette-steel-blue, 12 ),
-    on-info: map.get( $kendo-palette-neutral-gray, 15 ),
-    info-on-surface: map.get( $kendo-palette-steel-blue, 10 ),
+    tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.978 calc(c * 0.058) h)"},
+    tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.918 calc(c * 0.200) h)"},
+    tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.850 calc(c * 0.375) h)"},
+    tertiary: oklch(58.95% 0.2164 332.76deg),
+    tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0433) calc(c - 0.0168) h)"},
+    tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.1003) calc(c - 0.0401) h)"},
+    tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) 0.850 calc(c * 0.375) h)"},
+    tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l - 0.0433) calc(c - 0.0168) h)"},
+    on-tertiary: #{"oklch(from var(--kendo-color-tertiary) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
+    tertiary-on-surface: #{"oklch(from var(--kendo-color-tertiary) l c h)"},
+
+    // Info (active lightens)
+    info-subtle: #{"oklch(from var(--kendo-color-info) 0.983 calc(c * 0.050) h)"},
+    info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.937 calc(c * 0.185) h)"},
+    info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.883 calc(c * 0.337) h)"},
+    info: oklch(65.12% 0.1366 245.64deg),
+    info-hover: #{"oklch(from var(--kendo-color-info) calc(l - 0.016) calc(c - 0.0047) h)"},
+    info-active: #{"oklch(from var(--kendo-color-info) calc(l + 0.034) calc(c - 0.0125) h)"},
+    info-emphasis: #{"oklch(from var(--kendo-color-info) 0.883 calc(c * 0.337) h)"},
+    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.662) calc(c * 0.631) h)"},
+    on-info: #{"oklch(from var(--kendo-color-info) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+    info-on-surface: #{"oklch(from var(--kendo-color-info) calc(l - 0.048) calc(c - 0.0109) h)"},
+
     // Success
-    success-subtle: map.get( $kendo-palette-green, 1 ),
-    success-subtle-hover: map.get( $kendo-palette-green, 2 ),
-    success-subtle-active: map.get( $kendo-palette-green, 3 ),
-    success: map.get( $kendo-palette-green, 11 ),
-    success-hover: map.get( $kendo-palette-green, 12 ),
-    success-active: map.get( $kendo-palette-green, 13 ),
-    success-emphasis: map.get( $kendo-palette-green, 3 ),
-    success-on-subtle: map.get( $kendo-palette-green, 12 ),
-    on-success: map.get( $kendo-palette-neutral-gray, "white" ),
-    success-on-surface: map.get( $kendo-palette-green, 11 ),
+    success-subtle: #{"oklch(from var(--kendo-color-success) 0.976 calc(c * 0.091) h)"},
+    success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.904 calc(c * 0.340) h)"},
+    success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.828 calc(c * 0.593) h)"},
+    success: oklch(51.03% 0.1654 142.68deg),
+    success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.0357) calc(c - 0.012) h)"},
+    success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.0903) calc(c - 0.0311) h)"},
+    success-emphasis: #{"oklch(from var(--kendo-color-success) 0.828 calc(c * 0.593) h)"},
+    success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l - 0.0357) calc(c - 0.012) h)"},
+    on-success: #{"oklch(from var(--kendo-color-success) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
+    success-on-surface: #{"oklch(from var(--kendo-color-success) l c h)"},
+
     // Warning
-    warning-subtle: map.get( $kendo-palette-orange, 1 ),
-    warning-subtle-hover: map.get( $kendo-palette-orange, 2 ),
-    warning-subtle-active: map.get( $kendo-palette-orange, 3 ),
-    warning: map.get( $kendo-palette-orange, 8 ),
-    warning-hover: map.get( $kendo-palette-orange, 9 ),
-    warning-active: map.get( $kendo-palette-orange, 10 ),
-    warning-emphasis: map.get( $kendo-palette-orange, 3 ),
-    warning-on-subtle: map.get( $kendo-palette-orange, 12 ),
-    on-warning: map.get( $kendo-palette-neutral-gray, 15 ),
-    warning-on-surface: map.get( $kendo-palette-orange, 12 ),
+    warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.986 calc(c * 0.042) h)"},
+    warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.939 calc(c * 0.168) h)"},
+    warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.888 calc(c * 0.320) h)"},
+    warning: oklch(68.00% 0.1980 42.95deg),
+    warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l - 0.0515) calc(c - 0.0161) h)"},
+    warning-active: #{"oklch(from var(--kendo-color-warning) calc(l - 0.1238) calc(c - 0.0382) h)"},
+    warning-emphasis: #{"oklch(from var(--kendo-color-warning) 0.888 calc(c * 0.320) h)"},
+    warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.656) calc(c * 0.632) h)"},
+    on-warning: #{"oklch(from var(--kendo-color-warning) clamp(0.2603, (0.6 - l) * 99999, 1) 0 h)"},
+    warning-on-surface: #{"oklch(from var(--kendo-color-warning) calc(l * 0.656) calc(c * 0.632) h)"},
+
     // Error
-    error-subtle: map.get( $kendo-palette-cranberry, 1 ),
-    error-subtle-hover: map.get( $kendo-palette-cranberry, 2 ),
-    error-subtle-active: map.get( $kendo-palette-cranberry, 4 ),
-    error: map.get( $kendo-palette-cranberry, 8 ),
-    error-hover: map.get( $kendo-palette-cranberry, 9 ),
-    error-active: map.get( $kendo-palette-cranberry, 10 ),
-    error-emphasis: map.get( $kendo-palette-cranberry, 4 ),
-    error-on-subtle: map.get( $kendo-palette-cranberry, 9 ),
-    on-error: map.get( $kendo-palette-neutral-gray, "white" ),
-    error-on-surface: map.get( $kendo-palette-cranberry, 8 ),
+    error-subtle: #{"oklch(from var(--kendo-color-error) 0.972 calc(c * 0.052) h)"},
+    error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.893 calc(c * 0.203) h)"},
+    error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.808 calc(c * 0.378) h)"},
+    error: oklch(52.27% 0.2063 25.84deg),
+    error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0393) calc(c - 0.0165) h)"},
+    error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0942) calc(c - 0.0388) h)"},
+    error-emphasis: #{"oklch(from var(--kendo-color-error) 0.808 calc(c * 0.378) h)"},
+    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l - 0.0393) calc(c - 0.0165) h)"},
+    on-error: #{"oklch(from var(--kendo-color-error) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
+    error-on-surface: #{"oklch(from var(--kendo-color-error) l c h)"},
+
     // Light
-    light-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
-    light-subtle-hover: map.get( $kendo-palette-neutral-gray, 2 ),
-    light-subtle-active: map.get( $kendo-palette-neutral-gray, 4 ),
-    light: map.get( $kendo-palette-neutral-gray, 4 ),
-    light-hover: map.get( $kendo-palette-neutral-gray, 2 ),
-    light-active: map.get( $kendo-palette-neutral-gray, 3 ),
-    light-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
-    light-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
-    on-light: map.get( $kendo-palette-neutral-gray, 15 ),
-    light-on-surface: map.get( $kendo-palette-neutral-gray, "white" ),
+    light-subtle: #{"oklch(from var(--kendo-color-light) calc(l + 0.060) c h)"},
+    light-subtle-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
+    light-subtle-active: #{"oklch(from var(--kendo-color-light) l c h)"},
+    light: oklch(94.01% 0 0deg),
+    light-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
+    light-active: #{"oklch(from var(--kendo-color-light) calc(l + 0.015) c h)"},
+    light-emphasis: #{"oklch(from var(--kendo-color-light) calc(l - 0.033) c h)"},
+    light-on-subtle: oklch(49.26% 0 0deg),
+    on-light: oklch(26.03% 0 0deg),
+    light-on-surface: oklch(100% 0 0deg),
+
     // Dark
-    dark-subtle: map.get( $kendo-palette-neutral-gray, "black" ),
-    dark-subtle-hover: map.get( $kendo-palette-neutral-gray, 15 ),
-    dark-subtle-active: map.get( $kendo-palette-neutral-gray, 14 ),
-    dark: map.get( $kendo-palette-neutral-gray, 15 ),
-    dark-hover: map.get( $kendo-palette-neutral-gray, 13 ),
-    dark-active: map.get( $kendo-palette-neutral-gray, 14 ),
-    dark-emphasis: map.get( $kendo-palette-neutral-gray, 12 ),
-    dark-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
-    on-dark: map.get( $kendo-palette-neutral-gray, "white" ),
-    dark-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
+    dark-subtle: oklch(0% 0 0deg),
+    dark-subtle-hover: #{"oklch(from var(--kendo-color-dark) l c h)"},
+    dark-subtle-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
+    dark: oklch(26.03% 0 0deg),
+    dark-hover: #{"oklch(from var(--kendo-color-dark) calc(l + 0.119) c h)"},
+    dark-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
+    dark-emphasis: #{"oklch(from var(--kendo-color-dark) calc(l + 0.232) c h)"},
+    dark-on-subtle: oklch(100% 0 0deg),
+    on-dark: oklch(100% 0 0deg),
+    dark-on-surface: oklch(49.26% 0 0deg),
+
     // Inverse
-    inverse-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
-    inverse-subtle-hover: map.get( $kendo-palette-neutral-gray, 10 ),
-    inverse-subtle-active: map.get( $kendo-palette-neutral-gray, 11 ),
-    inverse: map.get( $kendo-palette-neutral-gray, 15 ),
-    inverse-hover: map.get( $kendo-palette-neutral-gray, 13 ),
-    inverse-active: map.get( $kendo-palette-neutral-gray, 14 ),
-    inverse-emphasis: map.get( $kendo-palette-neutral-gray, 11 ),
-    inverse-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
-    on-inverse: map.get( $kendo-palette-neutral-gray, "white" ),
-    inverse-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
-    // Series A
-    series-a: map.get( $kendo-palette-techno-teal, 9 ),
-    series-a-bold: map.get( $kendo-palette-techno-teal, 11 ),
-    series-a-bolder: map.get( $kendo-palette-techno-teal, 13 ),
-    series-a-subtle: map.get( $kendo-palette-techno-teal, 7 ),
-    series-a-subtler: map.get( $kendo-palette-techno-teal, 5 ),
-    // Series B
-    series-b: map.get( $kendo-palette-saffron-forge, 9 ),
-    series-b-bold: map.get( $kendo-palette-saffron-forge, 11 ),
-    series-b-bolder: map.get( $kendo-palette-saffron-forge, 13 ),
-    series-b-subtle: map.get( $kendo-palette-saffron-forge, 7 ),
-    series-b-subtler: map.get( $kendo-palette-saffron-forge, 5 ),
-    // Series C
-    series-c: map.get( $kendo-palette-electric-fuchsia, 9 ),
-    series-c-bold: map.get( $kendo-palette-electric-fuchsia, 11 ),
-    series-c-bolder: map.get( $kendo-palette-electric-fuchsia, 13 ),
-    series-c-subtle: map.get( $kendo-palette-electric-fuchsia, 7 ),
-    series-c-subtler: map.get( $kendo-palette-electric-fuchsia, 5 ),
-    // Series D
-    series-d: map.get( $kendo-palette-bright-basil, 10 ),
-    series-d-bold: map.get( $kendo-palette-bright-basil, 12 ),
-    series-d-bolder: map.get( $kendo-palette-bright-basil, 14 ),
-    series-d-subtle: map.get( $kendo-palette-bright-basil, 8 ),
-    series-d-subtler: map.get( $kendo-palette-bright-basil, 6 ),
-    // Series Е
-    series-e: map.get( $kendo-palette-iris-purple, 9 ),
-    series-e-bold: map.get( $kendo-palette-iris-purple, 11 ),
-    series-e-bolder: map.get( $kendo-palette-iris-purple, 13 ),
-    series-e-subtle: map.get( $kendo-palette-iris-purple, 5 ),
-    series-e-subtler: map.get( $kendo-palette-iris-purple, 7 ),
-    // Series F
-    series-f: map.get( $kendo-palette-terracotta-heat, 9 ),
-    series-f-bold: map.get( $kendo-palette-terracotta-heat, 11 ),
-    series-f-bolder: map.get( $kendo-palette-terracotta-heat, 13 ),
-    series-f-subtle: map.get( $kendo-palette-terracotta-heat, 7 ),
-    series-f-subtler: map.get( $kendo-palette-terracotta-heat, 5 ),
+    inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.232) c h)"},
+    inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.373) c h)"},
+    inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.285) c h)"},
+    inverse: oklch(26.03% 0 0deg),
+    inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.119) c h)"},
+    inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.061) c h)"},
+    inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.285) c h)"},
+    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) calc(l * 1.892) c h)"},
+
+    // Series
+    series: oklch(64.54% 0.0997 198.44deg),
+
+    // Series A (techno-teal)
+    series-a: var(--kendo-color-series),
+    series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.812) calc(c * 0.799) h)"},
+    series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.613) calc(c * 0.588) h)"},
+    series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.129) calc(c * 0.858) h)"},
+    series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 1.263) calc(c * 0.606) h)"},
+    // Series B (saffron-forge)
+    series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.0077) calc(c + 0.0338) calc(h - 106.96))"},
+    series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.811) calc(c * 0.812) h)"},
+    series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.613) calc(c * 0.614) h)"},
+    series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.129) calc(c * 0.942) h)"},
+    series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 1.260) calc(c * 0.679) h)"},
+    // Series C (electric-fuchsia)
+    series-c: #{"oklch(from var(--kendo-color-series) calc(l - 0.0454) calc(c + 0.1479) calc(h + 154.83))"},
+    series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.807) calc(c * 0.808) h)"},
+    series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.604) calc(c * 0.607) h)"},
+    series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.086) calc(c * 0.916) h)"},
+    series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 1.244) calc(c * 0.644) h)"},
+    // Series D (bright-basil)
+    series-d: #{"oklch(from var(--kendo-color-series) calc(l - 0.0293) calc(c + 0.1043) calc(h - 56.02))"},
+    series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.813) calc(c * 0.806) h)"},
+    series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.615) calc(c * 0.598) h)"},
+    series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.135) calc(c * 0.882) h)"},
+    series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 1.286) calc(c * 0.613) h)"},
+    // Series E (iris-purple — subtle/subtler have hue shift, kept static)
+    series-e: #{"oklch(from var(--kendo-color-series) calc(l - 0.0209) calc(c + 0.0743) calc(h + 72.89))"},
+    series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.813) calc(c * 0.789) h)"},
+    series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.616) calc(c * 0.570) h)"},
+    series-e-subtle: oklch(78.93% 0.0618 304.45deg),
+    series-e-subtler: oklch(68.36% 0.0950 302.88deg),
+    // Series F (terracotta-heat)
+    series-f: #{"oklch(from var(--kendo-color-series) calc(l - 0.06) calc(c + 0.0692) calc(h - 156.11))"},
+    series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.812) calc(c * 0.792) h)"},
+    series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.615) calc(c * 0.575) h)"},
+    series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.156) calc(c * 0.767) h)"},
+    series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 1.331) calc(c * 0.507) 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.

package/scss/core/typography/_index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "sass:math";
 
 /// The base font size across all components.
@@ -5,6 +6,9 @@
 $kendo-font-size: 0.875rem !default;
 /// The extra extra small font size across all components.
 /// @group typography
+$kendo-font-size-xxs: 0.5rem !default;
+/// The extra extra small font size across all components.
+/// @group typography
 $kendo-font-size-xs: 0.625rem !default;
 /// The small font size across all components.
 /// @group typography
@@ -38,12 +42,21 @@ $kendo-line-height-lg: 1.33 !default;
 /// @group typography
 $kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
 
+/// The base font weight across all components.
+/// @group typography
+$kendo-font-weight: 400 !default;
+/// The thin font weight across all components.
+/// @group typography
+$kendo-font-weight-thin: 100 !default;
+/// The extra light font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-light: 200 !default;
 /// The light font weight across all components.
 /// @group typography
 $kendo-font-weight-light: 300 !default;
-/// The base font weight across all components.
+/// The normal font weight across all components.
 /// @group typography
-$kendo-font-weight-normal: 400 !default;
+$kendo-font-weight-normal: $kendo-font-weight !default;
 /// The medium font weight across all components.
 /// @group typography
 $kendo-font-weight-medium: 500 !default;
@@ -53,16 +66,57 @@ $kendo-font-weight-semibold: 600 !default;
 /// The bold font weight across all components.
 /// @group typography
 $kendo-font-weight-bold: 700 !default;
+/// The extra bold font weight across all components.
+/// @group typography
+$kendo-font-weight-extra-bold: 800 !default;
+/// The most pronounced font weight across all components.
+/// @group typography
+$kendo-font-weight-black: 900 !default;
 
 /// The base letter spacing across all components.
 /// @group typography
 $kendo-letter-spacing: normal !default;
+/// The tightest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tightest: -.15px !default;
+/// Slightly looser than the tighter letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tighter: -.10px !default;
+/// Moderately tight letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-tight: -.5px !default;
+/// The normal letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-normal: 0px !default;
+/// Wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wide: .5px !default;
+/// Slightly wider than the wide letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-wider: .10px !default;
+/// The widest letter spacing across all components.
+/// @group typography
+$kendo-letter-spacing-widest: .15px !default;
 
-/// The font family across all components.
+/// The sans font family across all components.
+/// @group typography
+$kendo-font-family-sans: Arial, Verdana, Tahoma, "Trebuchet MS", Helvetica, Impact, Gill Sans !default;
+/// The serif font family across all components.
+/// @group typography
+$kendo-font-family-serif: "Times New Roman", Georgia, Garamond, Palatino, Baskerville !default;
+/// The sans-serif font family across all components.
+/// @group typography
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+/// The monospace font family across all components.
+/// @group typography
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// The base font family across all components.
 /// @group typography
 $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !default;
 
 $_default-font-sizes: (
+    xxs: $kendo-font-size-xxs,
     xs: $kendo-font-size-xs,
     sm: $kendo-font-size-sm,
     md: $kendo-font-size-md,
@@ -78,17 +132,55 @@ $_default-line-heights: (
 ) !default;
 
 $_default-font-weights: (
+    thin: $kendo-font-weight-thin,
+    extra-light: $kendo-font-weight-extra-light,
     light: $kendo-font-weight-light,
     normal: $kendo-font-weight-normal,
     medium: $kendo-font-weight-medium,
     semibold: $kendo-font-weight-semibold,
-    bold: $kendo-font-weight-bold
+    bold: $kendo-font-weight-bold,
+    extra-bold: $kendo-font-weight-extra-bold,
+    "black": $kendo-font-weight-black
+) !default;
+
+$_default-letter-spacings: (
+    tightest: $kendo-letter-spacing-tightest,
+    tighter: $kendo-letter-spacing-tighter,
+    tight: $kendo-letter-spacing-tight,
+    normal: $kendo-letter-spacing-normal,
+    wide: $kendo-letter-spacing-wide,
+    wider: $kendo-letter-spacing-wider,
+    widest: $kendo-letter-spacing-widest
+) !default;
+
+$_default-font-families: (
+    sans: $kendo-font-family-sans,
+    serif: $kendo-font-family-serif,
+    sans-serif: $kendo-font-family-sans-serif,
+    monospace: $kendo-font-family-monospace
 ) !default;
 
 /// The font sizes map
 /// @group typography
 $kendo-font-sizes: $_default-font-sizes !default;
+$kendo-font-sizes: map.merge( $_default-font-sizes, $kendo-font-sizes );
 
 /// The line heights map
 /// @group typography
 $kendo-line-heights: $_default-line-heights !default;
+$kendo-line-heights: map.merge( $_default-line-heights, $kendo-line-heights );
+
+/// The font weights map
+/// @group typography
+$kendo-font-weights: $_default-font-weights !default;
+$kendo-font-weights: map.merge( $_default-font-weights, $kendo-font-weights );
+
+/// The letter spacings map
+/// @group typography
+$kendo-letter-spacings: $_default-letter-spacings !default;
+$kendo-letter-spacings: map.merge( $_default-letter-spacings, $kendo-letter-spacings );
+
+/// The font families map
+/// @group typography
+$kendo-font-families: $_default-font-families !default;
+$kendo-font-families: map.merge( $_default-font-families, $kendo-font-families );