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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "13.1.1",
+  "version": "13.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "c476cef223e305c6f403a0d9610bf838041639fe"
+  "gitHead": "066b81148c99e956c2809af1a3ba5eebe649f407"
 }

package/scss/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: (
@@ -50,12 +53,13 @@ $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
 
 
 @function k-border-radius($key) {
-    $_border-radius: map.get($kendo-border-radii, $key);
-    @return var(--kendo-border-radius-#{$key}, $_border-radius);
+    @return var(--kendo-border-radius-#{$key});
 }
 
 @mixin kendo-border-radius--styles() {
     :root {
+        --kendo-border-radius-base: #{$kendo-border-radius-base};
+
         @each $key, $value in $kendo-border-radii {
             --kendo-border-radius-#{$key}: #{$value};
         }

package/scss/color-system/_functions.scss

@@ -1,93 +1,12 @@
 @use "sass:color";
 @use "sass:map";
 @use "sass:list";
-@use "sass:string";
-@use "sass:meta";
 @use "../functions/_string.scss" as *;
 @use "../functions/_map.scss" as *;
 @use "../functions/_color.scss" as *;
-@use "./_palettes.scss" as *;
 @use "./_swatch.scss" as *;
 @use "../_variables.scss" as *;
 
-@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
-    $result: ();
-
-    @each $ui-state, $indices in $matrix {
-        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
-        $indices-count: list.length( $indices );
-
-        $bg-prop: list.nth( $indices, 1 );
-        $text-prop: list.nth( $indices, 2 );
-        $border-prop: list.nth( $indices, 3 );
-        $gradient-prop: if( $indices-count > 3, list.nth( $indices, 4 ), null );
-        $shadow-prop: if( $indices-count > 4, list.nth( $indices, 5 ), null );
-        $outline-prop: if( $indices-count > 5, list.nth( $indices, 6 ), null );
-
-        // Take value from the palette only if it is a number
-        $bg: if( meta.type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
-        $text: if( meta.type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
-        $border: if( meta.type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
-        $gradient: $gradient-prop;
-        $shadow: $shadow-prop;
-        $outline: $outline-prop;
-
-        $result: map.merge($result, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border,
-            #{$prefix}gradient: $gradient,
-            #{$prefix}shadow: $shadow,
-            #{$prefix}outline: $outline
-        ));
-    }
-
-    $result: (
-        #{$variant}: $result
-    );
-
-    @return $result;
-
-};
-
-
-@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
-    $result: ();
-
-    // @debug $theme-matrix;
-    // @debug $palette-matrix;
-
-    @each $variant, $definition in $theme-matrix {
-        $tc-index: string.index( $variant, "THEME_COLOR" );
-        $src-palette-name: map.get( $definition, PALETTE );
-        $matrix: map.remove( $definition, PALETTE );
-
-        @if ($tc-index == null ) { // stylelint-disable-line
-            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
-            $result: map.merge( $result, $tmp-result);
-        } @else {
-            @each $color, $palette in $palette-matrix {
-                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
-                $palette-name: string.unquote($src-palette-name + "");
-
-                @if ($palette-name == THEME_COLOR) {
-                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
-                    $palette-name: map.get( $palette-matrix, $palette-name );
-                }
-
-                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: map.merge( $result, $tmp-result );
-            }
-        }
-    }
-
-    @return $result;
-}
-
-@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
-    @return var( --#{$prefix}#{$name}, #{$fallback} );
-}
-
 @function k-get-swatch-color( $name, $color ) {
     $map: (
         app-surface: k-color(app-surface),
@@ -165,18 +84,6 @@
     @return $result;
 }
 
-@function k-hex-to-rgb( $color ) {
-    @if($color) {
-        $r: k-color-red($color);
-        $g: k-color-green($color);
-        $b: k-color-blue($color);
-
-        @return $r, $g, $b;
-    } @else {
-        @return null;
-    }
-}
-
 /// Generates all color variations of a given main color
 /// @param {String} $name - The name of the main color
 /// @param {Color} $color - The color value to be assigned to the main color
@@ -307,12 +214,6 @@
 ///
 /// @group color-system
 @function k-color($key) {
-    $_color: map.get($kendo-colors, $key);
-
-    @if ($_color) {
-        @return var(--kendo-color-#{$key}, $_color);
-    } @else {
-        @error "Color Variable \`#{$key}\` does not exists in the color collection.";
-    }
+    @return var(--kendo-color-#{$key});
 }
 

package/scss/color-system/_swatch.scss

@@ -1,174 +1,193 @@
 @use "sass:map";
-@use "./_palettes.scss" as *;
 @use "../_variables.scss" as *;
 
 // Colors
 $default-colors: (
     // Misc
-    app-surface: map.get( $kendo-palette-gray, "white" ),
-    on-app-surface: map.get( $kendo-palette-gray, 12 ),
-    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, "black" ), .08),
-    border-alt: rgba( map.get( $kendo-palette-gray, "black" ), .16),
+    app-surface: oklch(100% 0 0deg),
+    on-app-surface: #{"oklch(from var(--kendo-color-app-surface) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
+    subtle: oklch(51.03% 0 0deg),
+    surface: oklch(98.51% 0 0deg),
+    surface-alt: #{"oklch(from var(--kendo-color-surface) calc(l + 0.02) c h)"},
+    border: oklch(0% 0 0deg / 0.08),
+    border-alt: oklch(0% 0 0deg / 0.16),
+
     // Base
-    base-subtle: map.get( $kendo-palette-gray, 3 ),
-    base-subtle-hover: map.get( $kendo-palette-gray, 4 ),
-    base-subtle-active: map.get( $kendo-palette-gray, 5 ),
-    base: map.get( $kendo-palette-gray, 2 ),
-    base-hover: map.get( $kendo-palette-gray, 3 ),
-    base-active: map.get( $kendo-palette-gray, 5 ),
-    base-emphasis: map.get( $kendo-palette-gray, 6 ),
-    base-on-subtle: map.get( $kendo-palette-gray, 12 ),
-    on-base: map.get( $kendo-palette-gray, 12 ),
-    base-on-surface: map.get( $kendo-palette-gray, 12 ),
+    base-subtle: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.03, (0.6 - l) * 99999, 0.03)) c h)"},
+    base-subtle-hover: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.064, (0.6 - l) * 99999, 0.064)) c h)"},
+    base-subtle-active: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.094, (0.6 - l) * 99999, 0.094)) c h)"},
+    base: oklch(97.02% 0 0deg),
+    base-hover: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.03, (0.6 - l) * 99999, 0.03)) c h)"},
+    base-active: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.094, (0.6 - l) * 99999, 0.094)) c h)"},
+    base-emphasis: #{"oklch(from var(--kendo-color-base) calc(l + clamp(-0.156, (0.6 - l) * 99999, 0.156)) c h)"},
+    base-on-subtle: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
+    on-base: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
+    base-on-surface: #{"oklch(from var(--kendo-color-base) clamp(0.36, (0.6 - l) * 99999, 0.95) 0 h)"},
+
     // Primary
-    primary-subtle: map.get( $kendo-palette-coral, 2 ),
-    primary-subtle-hover: map.get( $kendo-palette-coral, 3 ),
-    primary-subtle-active: map.get( $kendo-palette-coral, 4 ),
-    primary: map.get( $kendo-palette-coral, 9 ),
-    primary-hover: map.get( $kendo-palette-coral, 10 ),
-    primary-active: map.get( $kendo-palette-coral, 11 ),
-    primary-emphasis: map.get( $kendo-palette-coral, 6 ),
-    primary-on-subtle: map.get( $kendo-palette-coral, 15 ),
-    on-primary: map.get( $kendo-palette-gray, "white" ),
-    primary-on-surface: map.get( $kendo-palette-coral, 9 ),
+    primary-subtle: #{"oklch(from var(--kendo-color-primary) 0.958 calc(c * 0.11) h)"},
+    primary-subtle-hover: #{"oklch(from var(--kendo-color-primary) 0.927 calc(c * 0.19) h)"},
+    primary-subtle-active: #{"oklch(from var(--kendo-color-primary) 0.88 calc(c * 0.33) h)"},
+    primary: oklch(69.85% 0.1923 27.19deg),
+    primary-hover: #{"oklch(from var(--kendo-color-primary) calc(l - 0.044) calc(c - 0.012) h)"},
+    primary-active: #{"oklch(from var(--kendo-color-primary) calc(l - 0.088) calc(c - 0.027) h)"},
+    primary-emphasis: #{"oklch(from var(--kendo-color-primary) calc(l * 0.665 + 0.33) calc(c * 0.61) h)"},
+    primary-on-subtle: #{"oklch(from var(--kendo-color-primary) calc(l * 0.48) calc(c * 0.47) h)"},
+    on-primary: #{"oklch(from var(--kendo-color-primary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    primary-on-surface: #{"oklch(from var(--kendo-color-primary) l c h)"},
+
     // Secondary
-    secondary-subtle: map.get( $kendo-palette-gray, 1 ),
-    secondary-subtle-hover: map.get( $kendo-palette-gray, 2 ),
-    secondary-subtle-active: map.get( $kendo-palette-gray, 3 ),
-    secondary: map.get( $kendo-palette-gray, 10 ),
-    secondary-hover: map.get( $kendo-palette-gray, 11 ),
-    secondary-active: map.get( $kendo-palette-gray, 12 ),
-    secondary-emphasis: map.get( $kendo-palette-gray, 4 ),
-    secondary-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-secondary: map.get( $kendo-palette-gray, "white" ),
-    secondary-on-surface: map.get( $kendo-palette-gray, 13 ),
+    secondary-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.03 + 0.97) calc(c * 0.12) h)"},
+    secondary-subtle-hover: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.06 + 0.94) calc(c * 0.18) h)"},
+    secondary-subtle-active: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.12 + 0.88) calc(c * 0.25) h)"},
+    secondary: oklch(51.03% 0 0deg),
+    secondary-hover: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.072) c h)"},
+    secondary-active: #{"oklch(from var(--kendo-color-secondary) calc(l - 0.15) c h)"},
+    secondary-emphasis: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.19 + 0.81) calc(c * 0.55) h)"},
+    secondary-on-subtle: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.375) c h)"},
+    on-secondary: #{"oklch(from var(--kendo-color-secondary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    secondary-on-surface: #{"oklch(from var(--kendo-color-secondary) calc(l * 0.55) c h)"},
+
     // Tertiary
-    tertiary-subtle: map.get( $kendo-palette-sky-blue, 2 ),
-    tertiary-subtle-hover: map.get( $kendo-palette-sky-blue, 3 ),
-    tertiary-subtle-active: map.get( $kendo-palette-sky-blue, 4 ),
-    tertiary: map.get( $kendo-palette-sky-blue, 9 ),
-    tertiary-hover: map.get( $kendo-palette-sky-blue, 10 ),
-    tertiary-active: map.get( $kendo-palette-sky-blue, 11 ),
-    tertiary-emphasis: map.get( $kendo-palette-sky-blue, 6 ),
-    tertiary-on-subtle: map.get( $kendo-palette-sky-blue, 15 ),
-    on-tertiary: map.get( $kendo-palette-gray, "white" ),
-    tertiary-on-surface: map.get( $kendo-palette-sky-blue, 11 ),
+    tertiary-subtle: #{"oklch(from var(--kendo-color-tertiary) 0.944 calc(c * 0.20) h)"},
+    tertiary-subtle-hover: #{"oklch(from var(--kendo-color-tertiary) 0.916 calc(c * 0.29) h)"},
+    tertiary-subtle-active: #{"oklch(from var(--kendo-color-tertiary) 0.872 calc(c * 0.46) h)"},
+    tertiary: oklch(69.91% 0.157 238.99deg),
+    tertiary-hover: #{"oklch(from var(--kendo-color-tertiary) calc(l + clamp(-0.046, (0.6 - l) * 99999, 0.046)) c h)"},
+    tertiary-active: #{"oklch(from var(--kendo-color-tertiary) calc(l + clamp(-0.09, (0.6 - l) * 99999, 0.09)) c h)"},
+    tertiary-emphasis: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.665 + 0.33) calc(c * 0.75) h)"},
+    tertiary-on-subtle: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.50) calc(c * 0.48) h)"},
+    on-tertiary: #{"oklch(from var(--kendo-color-tertiary) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    tertiary-on-surface: #{"oklch(from var(--kendo-color-tertiary) calc(l * 0.87) c h)"},
+
     // Info
-    info-subtle: map.get( $kendo-palette-blue, 2 ),
-    info-subtle-hover: map.get( $kendo-palette-blue, 3 ),
-    info-subtle-active: map.get( $kendo-palette-blue, 5 ),
-    info: map.get( $kendo-palette-blue, 9 ),
-    info-hover: map.get( $kendo-palette-blue, 10 ),
-    info-active: map.get( $kendo-palette-blue, 11 ),
-    info-emphasis: map.get( $kendo-palette-blue, 6 ),
-    info-on-subtle: map.get( $kendo-palette-blue, 15 ),
-    on-info: map.get( $kendo-palette-gray, "white" ),
-    info-on-surface: map.get( $kendo-palette-blue, 11 ),
+    info-subtle: #{"oklch(from var(--kendo-color-info) 0.9086 calc(c * 0.17) h)"},
+    info-subtle-hover: #{"oklch(from var(--kendo-color-info) 0.8646 calc(c * 0.24) h)"},
+    info-subtle-active: #{"oklch(from var(--kendo-color-info) 0.7417 calc(c * 0.50) h)"},
+    info: oklch(51.78% 0.2301 261.43deg),
+    info-hover: #{"oklch(from var(--kendo-color-info) calc(l - 0.0286) calc(c - 0.0164) h)"},
+    info-active: #{"oklch(from var(--kendo-color-info) calc(l - 0.0624) calc(c - 0.032) h)"},
+    info-emphasis: #{"oklch(from var(--kendo-color-info) calc(l * 0.68 + 0.33) calc(c * 0.64) h)"},
+    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l * 0.52) calc(c * 0.46) h)"},
+    on-info: #{"oklch(from var(--kendo-color-info) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    info-on-surface: #{"oklch(from var(--kendo-color-info) calc(l * 0.88) calc(c * 0.86) 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, 9 ),
-    success-hover: map.get( $kendo-palette-green, 10 ),
-    success-active: map.get( $kendo-palette-green, 11 ),
-    success-emphasis: map.get( $kendo-palette-green, 6 ),
-    success-on-subtle: map.get( $kendo-palette-green, 15 ),
-    on-success: map.get( $kendo-palette-gray, "white" ),
-    success-on-surface: map.get( $kendo-palette-green, 11 ),
+    success-subtle: #{"oklch(from var(--kendo-color-success) 0.9326 calc(c * 0.20) h)"},
+    success-subtle-hover: #{"oklch(from var(--kendo-color-success) 0.9012 calc(c * 0.30) h)"},
+    success-subtle-active: #{"oklch(from var(--kendo-color-success) 0.8647 calc(c * 0.42) h)"},
+    success: oklch(67.45% 0.2171 139.99deg),
+    success-hover: #{"oklch(from var(--kendo-color-success) calc(l - 0.042) calc(c - 0.0137) h)"},
+    success-active: #{"oklch(from var(--kendo-color-success) calc(l - 0.0847) calc(c - 0.0275) h)"},
+    success-emphasis: #{"oklch(from var(--kendo-color-success) calc(l * 0.675 + 0.33) calc(c * 0.78) h)"},
+    success-on-subtle: #{"oklch(from var(--kendo-color-success) calc(l * 0.61) calc(c * 0.60) h)"},
+    on-success: #{"oklch(from var(--kendo-color-success) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    success-on-surface: #{"oklch(from var(--kendo-color-success) calc(l * 0.875) calc(c * 0.875) h)"},
+
     // 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, 9 ),
-    warning-hover: map.get( $kendo-palette-yellow, 10 ),
-    warning-active: map.get( $kendo-palette-yellow, 11 ),
-    warning-emphasis: map.get( $kendo-palette-yellow, 6 ),
-    warning-on-subtle: map.get( $kendo-palette-yellow, 15 ),
-    on-warning: map.get( $kendo-palette-gray, 12 ),
-    warning-on-surface: map.get( $kendo-palette-yellow, 9 ),
+    warning-subtle: #{"oklch(from var(--kendo-color-warning) 0.9674 calc(c * 0.26) h)"},
+    warning-subtle-hover: #{"oklch(from var(--kendo-color-warning) 0.9508 calc(c * 0.38) h)"},
+    warning-subtle-active: #{"oklch(from var(--kendo-color-warning) 0.9312 calc(c * 0.55) h)"},
+    warning: oklch(84.22% 0.1727 84.58deg),
+    warning-hover: #{"oklch(from var(--kendo-color-warning) calc(l - 0.055) calc(c - 0.011) h)"},
+    warning-active: #{"oklch(from var(--kendo-color-warning) calc(l - 0.11) calc(c - 0.0225) h)"},
+    warning-emphasis: #{"oklch(from var(--kendo-color-warning) calc(l * 0.665 + 0.33) calc(c * 0.83) h)"},
+    warning-on-subtle: #{"oklch(from var(--kendo-color-warning) calc(l * 0.49) calc(c * 0.49) h)"},
+    on-warning: #{"oklch(from var(--kendo-color-warning) clamp(0.36, (0.6 - 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, 5 ),
-    error: map.get( $kendo-palette-red, 9 ),
-    error-hover: map.get( $kendo-palette-red, 10 ),
-    error-active: map.get( $kendo-palette-red, 11 ),
-    error-emphasis: map.get( $kendo-palette-red, 6 ),
-    error-on-subtle: map.get( $kendo-palette-red, 15 ),
-    on-error: map.get( $kendo-palette-gray, "white" ),
-    error-on-surface: map.get( $kendo-palette-red, 11 ),
+    error-subtle: #{"oklch(from var(--kendo-color-error) 0.9223 calc(c * 0.14) h)"},
+    error-subtle-hover: #{"oklch(from var(--kendo-color-error) 0.8762 calc(c * 0.24) h)"},
+    error-subtle-active: #{"oklch(from var(--kendo-color-error) 0.7533 calc(c * 0.56) h)"},
+    error: oklch(61.07% 0.2435 30.2deg),
+    error-hover: #{"oklch(from var(--kendo-color-error) calc(l - 0.0377) calc(c - 0.0159) h)"},
+    error-active: #{"oklch(from var(--kendo-color-error) calc(l - 0.0782) calc(c - 0.0326) h)"},
+    error-emphasis: #{"oklch(from var(--kendo-color-error) calc(l * 0.61 + 0.33) calc(c * 0.70) h)"},
+    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l * 0.61) calc(c * 0.59) h)"},
+    on-error: #{"oklch(from var(--kendo-color-error) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    error-on-surface: #{"oklch(from var(--kendo-color-error) calc(l * 0.872) calc(c * 0.866) h)"},
+
     // Light
-    light-subtle: map.get( $kendo-palette-gray, 1 ),
-    light-subtle-hover: map.get( $kendo-palette-gray, 2 ),
-    light-subtle-active: map.get( $kendo-palette-gray, 3 ),
-    light: map.get( $kendo-palette-gray, 3 ),
-    light-hover: map.get( $kendo-palette-gray, 4 ),
-    light-active: map.get( $kendo-palette-gray, 5 ),
-    light-emphasis: map.get( $kendo-palette-gray, 5 ),
-    light-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-light: map.get( $kendo-palette-gray, "black" ),
-    light-on-surface: map.get( $kendo-palette-gray, 4 ),
+    light-subtle: oklch(98.51% 0 0deg),
+    light-subtle-hover: oklch(97.02% 0 0deg),
+    light-subtle-active: oklch(94.01% 0 0deg),
+    light: oklch(94.01% 0 0deg),
+    light-hover: oklch(90.67% 0 0deg),
+    light-active: oklch(87.61% 0 0deg),
+    light-emphasis: oklch(87.61% 0 0deg),
+    light-on-subtle: oklch(19.13% 0 0deg),
+    on-light: oklch(0% 0 0deg),
+    light-on-surface: oklch(90.67% 0 0deg),
+
     // Dark
-    dark-subtle: map.get( $kendo-palette-gray, 6 ),
-    dark-subtle-hover: map.get( $kendo-palette-gray, 7 ),
-    dark-subtle-active: map.get( $kendo-palette-gray, 8 ),
-    dark: map.get( $kendo-palette-gray, 12 ),
-    dark-hover: map.get( $kendo-palette-gray, 13 ),
-    dark-active: map.get( $kendo-palette-gray, 14 ),
-    dark-emphasis: map.get( $kendo-palette-gray, 10 ),
-    dark-on-subtle: map.get( $kendo-palette-gray, 14 ),
-    on-dark: map.get( $kendo-palette-gray, "white" ),
-    dark-on-surface: map.get( $kendo-palette-gray, 15 ),
+    dark-subtle: oklch(81.41% 0 0deg),
+    dark-subtle-hover: oklch(74.76% 0 0deg),
+    dark-subtle-active: oklch(68.3% 0 0deg),
+    dark: oklch(36% 0 0deg),
+    dark-hover: oklch(28.09% 0 0deg),
+    dark-active: oklch(23.93% 0 0deg),
+    dark-emphasis: oklch(51.03% 0 0deg),
+    dark-on-subtle: oklch(23.93% 0 0deg),
+    on-dark: oklch(100% 0 0deg),
+    dark-on-surface: oklch(19.13% 0 0deg),
+
     // Inverse
-    inverse-subtle: map.get( $kendo-palette-gray, 10 ),
-    inverse-subtle-hover: map.get( $kendo-palette-gray, 11 ),
-    inverse-subtle-active: map.get( $kendo-palette-gray, 12 ),
-    inverse: map.get( $kendo-palette-gray, 12 ),
-    inverse-hover: map.get( $kendo-palette-gray, 13 ),
-    inverse-active: map.get( $kendo-palette-gray, 14 ),
-    inverse-emphasis: map.get( $kendo-palette-gray, 8 ),
-    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, 15 ),
+    inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.15) c h)"},
+    inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.079) c h)"},
+    inverse-subtle-active: #{"oklch(from var(--kendo-color-inverse) l c h)"},
+    inverse: oklch(36% 0 0deg),
+    inverse-hover: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.079) c h)"},
+    inverse-active: #{"oklch(from var(--kendo-color-inverse) calc(l - 0.121) c h)"},
+    inverse-emphasis: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.323) c h)"},
+    inverse-on-subtle: #{"oklch(from var(--kendo-color-inverse) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    on-inverse: #{"oklch(from var(--kendo-color-inverse) clamp(0.10, (0.75 - l) * 99999, 1) 0 h)"},
+    inverse-on-surface: #{"oklch(from var(--kendo-color-inverse) calc(l * 0.53) c h)"},
+
+    // Series
+    series: oklch(69.85% 0.1923 27.19deg),
+
     // 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-a: var(--kendo-color-series),
+    series-a-bold: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-a-bolder: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-a-subtle: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-a-subtler: #{"oklch(from var(--kendo-color-series-a) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
+
     // Series B
-    series-b: map.get( $kendo-palette-lemon-yellow, 9 ),
-    series-b-bold: map.get( $kendo-palette-lemon-yellow, 12 ),
-    series-b-bolder: map.get( $kendo-palette-lemon-yellow, 14 ),
-    series-b-subtle: map.get( $kendo-palette-lemon-yellow, 5 ),
-    series-b-subtler: map.get( $kendo-palette-lemon-yellow, 7 ),
+    series-b: #{"oklch(from var(--kendo-color-series) calc(l + 0.2128) calc(c - 0.0444) calc(h + 68.82))"},
+    series-b-bold: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-b-bolder: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-b-subtle: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-b-subtler: #{"oklch(from var(--kendo-color-series-b) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
+
     // Series C
-    series-c: map.get( $kendo-palette-spring-green, 9 ),
-    series-c-bold: map.get( $kendo-palette-spring-green, 12 ),
-    series-c-bolder: map.get( $kendo-palette-spring-green, 14 ),
-    series-c-subtle: map.get( $kendo-palette-spring-green, 5 ),
-    series-c-subtler: map.get( $kendo-palette-spring-green, 7 ),
+    series-c: #{"oklch(from var(--kendo-color-series) calc(l + 0.0697) calc(c - 0.0281) calc(h + 125.93))"},
+    series-c-bold: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-c-bolder: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-c-subtle: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-c-subtler: #{"oklch(from var(--kendo-color-series-c) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
+
     // Series D
-    series-d: map.get( $kendo-palette-royal-blue, 9 ),
-    series-d-bold: map.get( $kendo-palette-royal-blue, 12 ),
-    series-d-bolder: map.get( $kendo-palette-royal-blue, 14 ),
-    series-d-subtle: map.get( $kendo-palette-royal-blue, 5 ),
-    series-d-subtler: map.get( $kendo-palette-royal-blue, 7 ),
-    // Series Е
-    series-e: map.get( $kendo-palette-lavender-purple, 9 ),
-    series-e-bold: map.get( $kendo-palette-lavender-purple, 12 ),
-    series-e-bolder: map.get( $kendo-palette-lavender-purple, 14 ),
-    series-e-subtle: map.get( $kendo-palette-lavender-purple, 5 ),
-    series-e-subtler: map.get( $kendo-palette-lavender-purple, 7 ),
+    series-d: #{"oklch(from var(--kendo-color-series) calc(l - 0.1323) calc(c + 0.0372) calc(h + 244.06))"},
+    series-d-bold: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-d-bolder: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-d-subtle: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-d-subtler: #{"oklch(from var(--kendo-color-series-d) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
+
+    // Series E
+    series-e: #{"oklch(from var(--kendo-color-series) calc(l - 0.0581) calc(c + 0.0456) calc(h + 276.18))"},
+    series-e-bold: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-e-bolder: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-e-subtle: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-e-subtler: #{"oklch(from var(--kendo-color-series-e) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
+
     // Series F
-    series-f: map.get( $kendo-palette-flamingo-pink, 9 ),
-    series-f-bold: map.get( $kendo-palette-flamingo-pink, 12 ),
-    series-f-bolder: map.get( $kendo-palette-flamingo-pink, 14 ),
-    series-f-subtle: map.get( $kendo-palette-flamingo-pink, 5 ),
-    series-f-subtler: map.get( $kendo-palette-flamingo-pink, 7 ),
+    series-f: #{"oklch(from var(--kendo-color-series) l calc(c + 0.0143) calc(h - 24.38))"},
+    series-f-bold: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.81) calc(c * 0.79) h)"},
+    series-f-bolder: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.61) calc(c * 0.57) h)"},
+    series-f-subtle: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.55 + 0.45) calc(c * 0.50) h)"},
+    series-f-subtler: #{"oklch(from var(--kendo-color-series-f) calc(l * 0.79 + 0.21) calc(c * 0.77) h)"},
 ) !default;
 
 /// The global default Colors map.
@@ -362,6 +381,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]
@@ -433,3 +457,4 @@ $kendo-colors: map.merge($default-colors, $kendo-colors);
         }
     }
 }
+

package/scss/color-system/index.scss

@@ -1,4 +1,3 @@
-@forward "./_palettes.scss";
 @forward "./_swatch.scss";
 @forward "./_functions.scss";
 @forward "./_constants.scss";