@progress/kendo-theme-fluent 10.6.0 → 11.0.0-dev.1

package/scss/upload/_variables.scss

@@ -19,13 +19,13 @@ $kendo-upload-max-height: 300px !default;
 
 /// The text color of the Upload.
 /// @group upload
-$kendo-upload-text: var( --kendo-component-text, initial ) !default;
+$kendo-upload-text: k-color(on-app-surface) !default;
 /// The background color of the Upload.
 /// @group upload
-$kendo-upload-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-upload-bg: k-color(surface-alt) !default;
 /// The border color of the Upload.
 /// @group upload
-$kendo-upload-border: var( --kendo-component-border, initial ) !default;
+$kendo-upload-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
@@ -35,20 +35,20 @@ $kendo-upload-dropzone-padding-x: k-spacing(2) !default;
 $kendo-upload-dropzone-padding-y: k-spacing(2) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-upload-dropzone-text: k-color(subtle) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-upload-dropzone-bg: k-color(surface) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-upload-dropzone-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-upload-dropzone-hover-bg: k-color(base-hover) !default;
 
 /// The text color of the Upload status message.
 /// @group upload
-$kendo-upload-status-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-upload-status-text: k-color(subtle) !default;
 /// The opacity of the Upload status message.
 /// @group upload
 $kendo-upload-status-text-opacity: null !default;
@@ -72,28 +72,28 @@ $kendo-upload-validation-font-size: var( --kendo-font-size-xs, inherit ) !defaul
 $kendo-upload-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
 /// The color of the uploaded items icon.
 /// @group upload
-$kendo-upload-icon-color: var( --kendo-subtle-text, inherit ) !default;
+$kendo-upload-icon-color: k-color(subtle) !default;
 
 /// The thickness of the Upload progress bar.
 /// @group upload
 $kendo-upload-progress-thickness: 2px !default;
 /// The background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-progress-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-upload-progress-bg: k-color(primary) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
+$kendo-upload-success-text: k-color(success-on-surface) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-success-bg: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
+$kendo-upload-success-bg: k-color(success-on-surface) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
+$kendo-upload-error-text: k-color(error-on-surface) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-error-bg: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
+$kendo-upload-error-bg: k-color(error-on-surface) !default;
 
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload

package/scss/window/_variables.scss

@@ -72,13 +72,13 @@ $kendo-window-buttongroup-spacing: k-spacing(3) !default;
 
 /// The background color of the Window.
 /// @group window
-$kendo-window-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-window-bg: k-color(surface-alt) !default;
 /// The text color of the Window.
 /// @group window
-$kendo-window-text: var( --kendo-component-text, initial ) !default;
+$kendo-window-text: k-color(on-app-surface) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-window-border: k-color(primary) !default;
 /// The box shadow of the Window.
 /// @group window
 $kendo-window-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
@@ -88,13 +88,13 @@ $kendo-window-focus-shadow: var( --kendo-box-shadow-depth-9, none ) !default;
 
 /// The background color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $kendo-component-header-bg
+$kendo-window-titlebar-bg: k-color(surface-alt) !default; // $kendo-component-header-bg
 /// The text color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default; // $kendo-component-header-text
+$kendo-window-titlebar-text: k-color(primary) !default; // $kendo-component-header-text
 /// The border color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-window-titlebar-border: k-color(primary) !default;
 
 /// The map of the width of the different Window sizes.
 /// @group window
@@ -112,15 +112,15 @@ $kendo-window-brand-colors: (
 
 // Matrix with window theme colors in the order: bg, color, border
 $_tc-window-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-window-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-window-light-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 /// The theme colors map for the Window.
@@ -139,13 +139,13 @@ $kendo-window-theme-colors: () !default;
 @each $ui-states in $_tc-window-dark-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-window-light-matrix {
     $kendo-window-theme-colors: map.deep-merge(
         $kendo-window-theme-colors,
-        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }

package/scss/wizard/_variables.scss

@@ -36,10 +36,10 @@ $kendo-wizard-content-padding-x: k-spacing(0) !default;
 $kendo-wizard-content-padding-y: k-spacing(0) !default;
 /// The text color of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-text: var( --kendo-component-text, initial ) !default;
+$kendo-wizard-content-text: k-color(on-app-surface) !default;
 /// The background color of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-wizard-content-bg: k-color(surface-alt) !default;
 
 /// The horizontal margin of the Wizard's Button container.
 /// @group wizard
@@ -50,4 +50,4 @@ $kendo-wizard-buttons-margin-y: k-spacing(6) !default;
 
 /// The outline of the focused Wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-wizard-step-focus-border: k-color(base-emphasis) !default;

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

@@ -1,165 +0,0 @@
-@use "sass:meta";
-@use "sass:map";
-@use "@progress/kendo-theme-core/scss/index.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: #{$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-hover-bg: #{$kendo-hover-bg};
-    --kendo-hover-text: #{$kendo-hover-text};
-    --kendo-hover-border: #{$kendo-hover-border};
-
-    --kendo-selected-bg: #{$kendo-selected-bg};
-    --kendo-selected-text: #{$kendo-selected-text};
-    --kendo-selected-border: #{$kendo-selected-border};
-
-    --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-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)};
-}
-
-@mixin color-system-styles() {
-    :root {
-        @include k-css-vars($kendo-palettes);
-        @include k-css-vars($kendo-theme-colors);
-
-        // Text colors
-        @each $theme-color, $color-props in $kendo-theme-colors {
-
-            $_color: if(meta.type-of($color-props) != 'map', map.get($kendo-theme-colors, $theme-color), map.get($color-props, 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
-            }
-
-            .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
-            }
-        }
-    }
-}