@progress/kendo-theme-fluent 9.1.1-dev.2 → 10.0.0-dev.0

package/scss/colorgradient/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-gradient--styles() {
+    @include import-once( "color-gradient" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-slider--styles();
+        @include kendo-textbox--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-color-gradient--layout();
+        @include kendo-color-gradient--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--align-self();
+        @include kendo-utils--typography--text-color();
+    }
+}

package/scss/colorpalette/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-palette--styles() {
+    @include import-once( "color-palette" ) {
+        @include core-styles();
+        @include kendo-color-palette--layout();
+        @include kendo-color-palette--theme();
+    }
+}

package/scss/colorpicker/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../coloreditor/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-picker--styles() {
+    @include import-once( "color-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-color-editor--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
+        @include kendo-color-picker--layout();
+        @include kendo-color-picker--theme();
+    }
+}

package/scss/combobox/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-combobox--styles() {
+    @include import-once( "combobox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-combobox--layout();
+        @include kendo-combobox--theme();
+    }
+}

package/scss/core/_index.scss

@@ -21,65 +21,33 @@
 
 @forward "@progress/kendo-theme-core/scss/index.import.scss" with (
     $kendo-enable-color-system: $kendo-enable-color-system !default,
+    $kendo-nested-disabled: false !default,
     // Color System
+    $_default-colors: $kendo-colors,
     $kendo-colors: $kendo-colors !default,
-    // Legacy
-    $kendo-theme-colors: $kendo-theme-colors !default,
+    // Legacy Color System
     $kendo-palettes: $kendo-palettes !default,
-    $kendo-body-bg: $kendo-body-bg !default,
-    $kendo-body-text: $kendo-body-text !default,
-    $kendo-component-bg: $kendo-component-bg !default,
-    $kendo-component-text: $kendo-component-text !default,
-    $kendo-component-border: $kendo-component-border !default,
-    $kendo-hover-bg: $kendo-hover-bg !default,
-    $kendo-hover-text: $kendo-hover-text !default,
-    $kendo-hover-border: $kendo-hover-border !default,
-    $kendo-selected-bg: $kendo-selected-bg !default,
-    $kendo-selected-text: $kendo-selected-text !default,
-    $kendo-selected-border: $kendo-selected-border !default,
-    $kendo-selected-hover-bg: $kendo-selected-hover-bg !default,
-    $kendo-selected-hover-text: $kendo-selected-hover-text !default,
-    $kendo-selected-hover-border: $kendo-selected-hover-border !default,
-    $kendo-focus-outline: $kendo-focus-outline !default,
-    $kendo-subtle-text: $kendo-subtle-text !default,
-    $kendo-link-text: $kendo-link-text !default,
-    $kendo-link-hover-text: $kendo-link-hover-text !default,
-    $kendo-invalid-bg: $kendo-invalid-bg !default,
-    $kendo-invalid-text: $kendo-invalid-text !default,
-    $kendo-invalid-border: $kendo-invalid-border !default,
-    $kendo-invalid-shadow: $kendo-invalid-shadow !default,
-    $kendo-disabled-bg: $kendo-disabled-bg !default,
-    $kendo-disabled-text: $kendo-disabled-text !default,
-    $kendo-disabled-border: $kendo-disabled-border !default,
-    $kendo-disabled-opacity: $kendo-disabled-opacity !default,
-    $kendo-disabled-filter: $kendo-disabled-filter !default,
-    $kendo-disabled-styling: $kendo-disabled-styling !default,
     // Elevation
     $_default-elevation: $kendo-elevation,
     $kendo-elevation: $kendo-elevation !default,
     // Typography
-    $kendo-letter-spacing: $kendo-letter-spacing !default,
-    $kendo-font-family: $kendo-font-family !default,
+    $_default-font-sizes: $kendo-font-sizes,
     $kendo-font-sizes: $kendo-font-sizes !default,
+    $kendo-font-size: $kendo-font-size !default,
+
+    $_default-line-heights: $kendo-line-heights,
     $kendo-line-heights: $kendo-line-heights !default,
+    $kendo-line-height: $kendo-line-height !default,
+
+    $kendo-letter-spacing: $kendo-letter-spacing !default,
+    
+    $kendo-font-family: $kendo-font-family !default,
+    // Spacing
+    $_default-spacing: $kendo-spacing,
+    $kendo-spacing: $kendo-spacing !default,
     // Radii
     $_default-border-radii: $kendo-border-radii,
     $kendo-border-radii: $kendo-border-radii !default
 );
 
 @forward "./color-system/_swatch-legacy.scss";
-
-// Module System
-@use "./module-system/index.scss" as module;
-
-$components: null !default;
-
-@mixin core-configure($config: null) {
-    @if $config {
-        $_components: map.get($config, "components");
-
-        @if ($_components) {
-            module.$components: $_components;
-        }
-    }
-}

package/scss/core/_variables.scss

@@ -1,7 +1,3 @@
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-
 // Options
 $kendo-enable-typography: false !default;
 
@@ -9,12 +5,10 @@ $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
-// $kendo-scrollbar-width: 17px !default;
-
 // Default transition
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
 
-@mixin core-styles() {
+@mixin kendo-transition--styles() {
     :root {
         --kendo-transition: #{$kendo-transition};
     }

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

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
+@use "../spacing/index.scss" as *;
 
 /// The none border radius used across the Components.
 /// @group radii

package/scss/core/color-system/_palettes.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+
 // Palettes
 $_default-palette-gray: (
-    white: #ffffff,
+    "white": #ffffff,
     1: #faf9f8,
     2: #f3f2f1,
     3: #edebe9,
@@ -16,7 +18,7 @@ $_default-palette-gray: (
     13: #3b3a39,
     14: #323130,
     15: #201f1e,
-    black: #000000,
+    "black": #000000,
 );
 
 $_default-palette-ocean-blue: (
@@ -239,67 +241,67 @@ $_default-palette-lime-green: (
 /// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
 /// @group palette
 $kendo-palette-gray: $_default-palette-gray !default;
-$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
+$kendo-palette-gray: map.merge($_default-palette-gray, $kendo-palette-gray);
 
 /// The Ocean Blue Palette provides colors to the Primary variable group.
 /// @group palette
 $kendo-palette-ocean-blue: $_default-palette-ocean-blue !default;
-$kendo-palette-ocean-blue: map-merge($_default-palette-ocean-blue, $kendo-palette-ocean-blue);
+$kendo-palette-ocean-blue: map.merge($_default-palette-ocean-blue, $kendo-palette-ocean-blue);
 
 /// The Crimson Red Palette provides colors to the Error variable group.
 /// @group palette
 $kendo-palette-crimson-red: $_default-palette-crimson-red !default;
-$kendo-palette-crimson-red: map-merge($_default-palette-crimson-red, $kendo-palette-crimson-red);
+$kendo-palette-crimson-red: map.merge($_default-palette-crimson-red, $kendo-palette-crimson-red);
 
 /// The Dandelion Yellow Palette provides colors to the Warning variable group.
 /// @group palette
 $kendo-palette-dandelion-yellow: $_default-palette-dandelion-yellow !default;
-$kendo-palette-dandelion-yellow: map-merge($_default-palette-dandelion-yellow, $kendo-palette-dandelion-yellow);
+$kendo-palette-dandelion-yellow: map.merge($_default-palette-dandelion-yellow, $kendo-palette-dandelion-yellow);
 
 /// The Forest Green Palette provides colors to the Success variable group.
 /// @group palette
 $kendo-palette-forest-green: $_default-palette-forest-green !default;
-$kendo-palette-forest-green: map-merge($_default-palette-forest-green, $kendo-palette-forest-green);
+$kendo-palette-forest-green: map.merge($_default-palette-forest-green, $kendo-palette-forest-green);
 
 /// The Cobalt Blue Palette provides colors to the Info variable group.
 /// @group palette
 $kendo-palette-cobalt-blue: $_default-palette-cobalt-blue !default;
-$kendo-palette-cobalt-blue: map-merge($_default-palette-cobalt-blue, $kendo-palette-cobalt-blue);
+$kendo-palette-cobalt-blue: map.merge($_default-palette-cobalt-blue, $kendo-palette-cobalt-blue);
 
 /// The Azure Blue Palette provides colors to the Tertiary variable group.
 /// @group palette
 $kendo-palette-azure-blue: $_default-palette-azure-blue !default;
-$kendo-palette-azure-blue: map-merge($_default-palette-azure-blue, $kendo-palette-azure-blue);
+$kendo-palette-azure-blue: map.merge($_default-palette-azure-blue, $kendo-palette-azure-blue);
 
 /// The Sapphire Blue Palette provides colors to the Series A variable group.
 /// @group palette
 $kendo-palette-sapphire-blue: $_default-palette-sapphire-blue !default;
-$kendo-palette-sapphire-blue: map-merge($_default-palette-sapphire-blue, $kendo-palette-sapphire-blue);
+$kendo-palette-sapphire-blue: map.merge($_default-palette-sapphire-blue, $kendo-palette-sapphire-blue);
 
 /// The Cardinal Red Palette provides colors to the Series B variable group.
 /// @group palette
 $kendo-palette-cardinal-red: $_default-palette-cardinal-red !default;
-$kendo-palette-cardinal-red: map-merge($_default-palette-cardinal-red, $kendo-palette-cardinal-red);
+$kendo-palette-cardinal-red: map.merge($_default-palette-cardinal-red, $kendo-palette-cardinal-red);
 
 /// The Cyber Yellow Palette provides colors to the Series C variable group.
 /// @group palette
 $kendo-palette-cyber-yellow: $_default-palette-cyber-yellow !default;
-$kendo-palette-cyber-yellow: map-merge($_default-palette-cyber-yellow, $kendo-palette-cyber-yellow);
+$kendo-palette-cyber-yellow: map.merge($_default-palette-cyber-yellow, $kendo-palette-cyber-yellow);
 
 /// The Denim Blue Palette provides colors to the Series D variable group.
 /// @group palette
 $kendo-palette-denim-blue: $_default-palette-denim-blue !default;
-$kendo-palette-denim-blue: map-merge($_default-palette-denim-blue, $kendo-palette-denim-blue);
+$kendo-palette-denim-blue: map.merge($_default-palette-denim-blue, $kendo-palette-denim-blue);
 
 /// The Iris Purple Palette provides colors to the Series E variable group.
 /// @group palette
 $kendo-palette-iris-purple: $_default-palette-iris-purple !default;
-$kendo-palette-iris-purple: map-merge($_default-palette-iris-purple, $kendo-palette-iris-purple);
+$kendo-palette-iris-purple: map.merge($_default-palette-iris-purple, $kendo-palette-iris-purple);
 
 /// The Lime Green Palette provides colors to the Series F variable group.
 /// @group palette
 $kendo-palette-lime-green: $_default-palette-lime-green !default;
-$kendo-palette-lime-green: map-merge($_default-palette-lime-green, $kendo-palette-lime-green);
+$kendo-palette-lime-green: map.merge($_default-palette-lime-green, $kendo-palette-lime-green);
 // stylelint-enable scss/no-global-function-names
 
 

package/scss/core/color-system/_swatch-legacy.scss

@@ -1,104 +1,165 @@
-@use "@progress/kendo-theme-core/scss/index.import.scss" as core;
-
-@if(core.$kendo-enable-color-system) {
-    core.$kendo-body-bg: core.k-color( app-surface );
-    core.$kendo-body-text: core.k-color( on-app-surface );
-    core.$kendo-component-bg: core.k-color( surface-alt );
-    core.$kendo-component-text: core.$kendo-body-text;
-    core.$kendo-component-border: color-mix(in srgb, core.k-color( border ) 16%, transparent);
-    core.$kendo-hover-bg: core.k-color( base-hover );
-    core.$kendo-hover-text: core.k-color( on-base );
-    core.$kendo-hover-border: color-mix(in srgb, core.k-color( border ) 10%, transparent);
-    core.$kendo-selected-bg: core.k-color( base-active );
-    core.$kendo-selected-text: core.k-color( on-base );
-    core.$kendo-selected-border: color-mix(in srgb, core.k-color( border-alt ) 76%, transparent);
-    core.$kendo-selected-hover-bg: core.k-color( base-subtle-active );
-    core.$kendo-selected-hover-text: core.k-color( on-base );
-    core.$kendo-selected-hover-border: core.$kendo-selected-border;
-    core.$kendo-focus-outline: core.k-color( base-emphasis );
-    core.$kendo-subtle-text: core.k-color( subtle );
-    core.$kendo-link-text: core.k-color( primary );
-    core.$kendo-link-hover-text: core.k-color( primary-hover );
-    core.$kendo-invalid-bg: initial;
-    core.$kendo-invalid-text: core.k-color( error-on-surface );
-    core.$kendo-invalid-border: core.k-color( error-emphasis );
-    core.$kendo-invalid-shadow: null;
-    core.$kendo-disabled-bg: core.k-color( base-subtle );
-    core.$kendo-disabled-text: color-mix(in srgb, core.k-color( on-app-surface ) 46%, transparent);
-    core.$kendo-disabled-border: transparent;
-
-    core.$kendo-theme-colors: (
-        primary: (
-            text: core.k-color( primary-emphasis ),
-            bg: core.k-color( primary-subtle ),
-            border: core.k-color( primary-subtle ),
-        ),
-        info: (
-            text: core.k-color( info-on-surface ),
-            bg: core.k-color( info-subtle ),
-            border: core.k-color( info-subtle ),
-        ),
-        success: (
-            text: core.k-color( success-on-surface ),
-            bg: core.k-color( success-subtle ),
-            border: core.k-color( success-subtle ),
-        ),
-        warning: (
-            text: core.k-color( warning-on-surface ),
-            bg: core.k-color( warning-subtle ),
-            border: core.k-color( warning-subtle ),
-        ),
-        error: (
-            text: core.k-color( error-on-surface ),
-            bg: core.k-color( error-subtle ),
-            border: core.k-color( error-subtle ),
-        ),
-    );
-
-    core.$kendo-disabled-styling: (
-        bg: core.$kendo-disabled-bg,
-        color: core.$kendo-disabled-text,
-        border: core.$kendo-disabled-border,
-        opacity: core.$kendo-disabled-opacity,
-        filter: core.$kendo-disabled-filter,
-    );
-}
+@use "sass:meta";
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+
+// Legacy
+
+// Root styles
+$kendo-body-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white ) !default;
+$kendo-body-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var(neutral-160)) !default;
+
+// Component styles
+$kendo-component-bg: if($kendo-enable-color-system, k-color( surface-alt ), $kendo-body-bg) !default;
+$kendo-component-text: $kendo-body-text !default;
+$kendo-component-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var(neutral-30)) !default;
+
+// States styles
+$kendo-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var(neutral-20)) !default;
+$kendo-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-get-theme-color-var(neutral-190)) !default;
+$kendo-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var(neutral-20)) !default;
+
+$kendo-selected-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var(neutral-30)) !default;
+$kendo-selected-text: if($kendo-enable-color-system, k-color( on-base ), k-get-theme-color-var(neutral-160)) !default;
+$kendo-selected-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border-alt ) 76%, transparent), k-get-theme-color-var(neutral-130)) !default;
+
+$kendo-selected-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-active ), k-get-theme-color-var(neutral-40)) !default;
+$kendo-selected-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-get-theme-color-var(neutral-190)) !default;
+$kendo-selected-hover-border: if($kendo-enable-color-system, $kendo-selected-border, k-get-theme-color-var(neutral-130)) !default;
+
+$kendo-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var(neutral-130)) !default;
+
+$kendo-subtle-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var(neutral-130)) !default;
+
+// Link
+$kendo-link-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var(primary-100)) !default;
+$kendo-link-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var(primary-120)) !default;
+
+// Validator
+$kendo-invalid-bg: initial !default;
+$kendo-invalid-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var(error-190)) !default;
+$kendo-invalid-border: if($kendo-enable-color-system, k-color( error-emphasis ), k-get-theme-color-var(error-190)) !default;
+$kendo-invalid-shadow: null !default;
+
+$kendo-valid-bg: if($kendo-enable-color-system, null, initial) !default;
+$kendo-valid-text: if($kendo-enable-color-system, null, k-get-theme-color-var( success-190 )) !default;
+$kendo-valid-border: if($kendo-enable-color-system, null,  k-get-theme-color-var( success-190 )) !default;
+$kendo-valid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var(neutral-20)) !default;
+$kendo-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var(neutral-90)) !default;
+$kendo-disabled-border: transparent !default;
+$kendo-disabled-opacity: null !default;
+$kendo-disabled-filter: null !default;
+
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter,
+) !default;
+
+$kendo-theme-colors: (
+    primary: (
+        text: if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var(primary-130)),
+        bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var(primary-20)),
+        border: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var(primary-20)),
+    ),
+    info: (
+        text: if($kendo-enable-color-system, k-color( info-on-surface ), k-get-theme-color-var(info-190)),
+        bg: if($kendo-enable-color-system, k-color( info-subtle ), k-get-theme-color-var(info-20)),
+        border: if($kendo-enable-color-system, k-color( info-subtle ), k-get-theme-color-var(info-20)),
+    ),
+    success: (
+        text: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var(success-190)),
+        bg: if($kendo-enable-color-system, k-color( success-subtle ), k-get-theme-color-var(success-20)),
+        border: if($kendo-enable-color-system, k-color( success-subtle ), k-get-theme-color-var(success-20)),
+    ),
+    warning: (
+        text: if($kendo-enable-color-system, k-color( warning-on-surface ), k-get-theme-color-var(neutral-160)),
+        bg: if($kendo-enable-color-system, k-color( warning-subtle ), k-get-theme-color-var(warning-20)),
+        border: if($kendo-enable-color-system, k-color( warning-subtle ), k-get-theme-color-var(warning-20)),
+    ),
+    error: (
+        text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var(error-190)),
+        bg: if($kendo-enable-color-system, k-color( error-subtle ), k-get-theme-color-var(error-20)),
+        border: if($kendo-enable-color-system, k-color( error-subtle ), k-get-theme-color-var(error-20)),
+    ),
+) !default;
 
 :root {
-    --kendo-body-bg: #{core.$kendo-body-bg};
-    --kendo-body-text: #{core.$kendo-body-text};
+    --kendo-body-bg: #{$kendo-body-bg};
+    --kendo-body-text: #{$kendo-body-text};
+
+    --kendo-component-bg: #{$kendo-component-bg};
+    --kendo-component-text: #{$kendo-component-text};
+    --kendo-component-border: #{$kendo-component-border};
+
+    --kendo-link-text: #{$kendo-link-text};
+    --kendo-link-hover-text: #{$kendo-link-hover-text};
+
+    --kendo-disabled-bg: #{$kendo-disabled-bg};
+    --kendo-disabled-text: #{$kendo-disabled-text};
+    --kendo-disabled-border: #{$kendo-disabled-border};
+    --kendo-disabled-opacity: #{$kendo-disabled-opacity};
+    --kendo-disabled-filter: #{$kendo-disabled-filter};
 
-    --kendo-component-bg: #{core.$kendo-component-bg};
-    --kendo-component-text: #{core.$kendo-component-text};
-    --kendo-component-border: #{core.$kendo-component-border};
+    --kendo-hover-bg: #{$kendo-hover-bg};
+    --kendo-hover-text: #{$kendo-hover-text};
+    --kendo-hover-border: #{$kendo-hover-border};
 
-    --kendo-link-text: #{core.$kendo-link-text};
-    --kendo-link-hover-text: #{core.$kendo-link-hover-text};
+    --kendo-selected-bg: #{$kendo-selected-bg};
+    --kendo-selected-text: #{$kendo-selected-text};
+    --kendo-selected-border: #{$kendo-selected-border};
 
-    --kendo-disabled-bg: #{core.$kendo-disabled-bg};
-    --kendo-disabled-text: #{core.$kendo-disabled-text};
-    --kendo-disabled-border: #{core.$kendo-disabled-border};
-    --kendo-disabled-opacity: #{core.$kendo-disabled-opacity};
-    --kendo-disabled-filter: #{core.$kendo-disabled-filter};
+    --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+    --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+    --kendo-selected-hover-border: #{$kendo-selected-hover-border};
 
-    --kendo-hover-bg: #{core.$kendo-hover-bg};
-    --kendo-hover-text: #{core.$kendo-hover-text};
-    --kendo-hover-border: #{core.$kendo-hover-border};
+    --kendo-focus-outline: #{$kendo-focus-outline};
+
+    --kendo-subtle-text: #{$kendo-subtle-text};
+
+    --kendo-invalid-bg: #{$kendo-invalid-bg};
+    --kendo-invalid-text: #{$kendo-invalid-text};
+    --kendo-invalid-border: #{$kendo-invalid-border};
+    --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+
+    --kendo-hr-border: #{$kendo-component-border};
+
+    --kendo-marquee-text: #{k-get-theme-color-var(neutral-160)};
+    --kendo-marquee-bg: #{k-get-theme-color-var(primary-60)};
+    --kendo-marquee-border: #{k-get-theme-color-var(primary-100)};
+
+    --kendo-text-selection-bg: #{k-get-theme-color-var(primary-100)};
+}
 
-    --kendo-selected-bg: #{core.$kendo-selected-bg};
-    --kendo-selected-text: #{core.$kendo-selected-text};
-    --kendo-selected-border: #{core.$kendo-selected-border};
+@mixin color-system-styles() {
+    :root {
+        @include k-css-vars($kendo-palettes);
+        @include k-css-vars($kendo-theme-colors);
 
-    --kendo-selected-hover-bg: #{core.$kendo-selected-hover-bg};
-    --kendo-selected-hover-text: #{core.$kendo-selected-hover-text};
-    --kendo-selected-hover-border: #{core.$kendo-selected-hover-border};
+        // Text colors
+        @each $theme-color, $color-props in $kendo-theme-colors {
 
-    --kendo-focus-outline: #{core.$kendo-focus-outline};
+            $_color: if(meta.type-of($color-props) != 'map', map.get($kendo-theme-colors, $theme-color), map.get($color-props, text));
 
-    --kendo-subtle-text: #{core.$kendo-subtle-text};
+            .k-text-#{$theme-color},
+            .k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color});
+            }
+            .\!k-text-#{$theme-color},
+            .\!k-color-#{$theme-color} {
+                color: var(--kendo-text-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
 
-    --kendo-invalid-bg: #{core.$kendo-invalid-bg};
-    --kendo-invalid-text: #{core.$kendo-invalid-text};
-    --kendo-invalid-border: #{core.$kendo-invalid-border};
-    --kendo-invalid-shadow: #{core.$kendo-invalid-shadow};
+            .k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color});
+            }
+            .\!k-bg-#{$theme-color} {
+                background-color: var(--kendo-bg-#{$theme-color}, #{$_color}) !important; // stylelint-disable-line declaration-no-important
+            }
+        }
+    }
 }