feat(fluent): implement color system

Introduces a standardised Color Systems across all themes. The Color System is implemented behind a backwards compatibility switch, the `$kendo-enable-color-system` variable, and it is disabled by default. The execution timeline is as follows: - 2024 Q1: The Color System is available and turned off by default. - 2024 Q2: The Color System is enabled by default, but can be turned off. - 2025 Q2: Remove the backwards compatibility switch and the old system.
telerik · Jan 10, 2024 · 5a8bbc8 · 5a8bbc8
1 parent bfc5c60
commit 5a8bbc8
Show file tree

Hide file tree

Showing 85 changed files with 1,502 additions and 1,159 deletions.
diff --git a/packages/core/scss/color-system/_functions.import.scss b/packages/core/scss/color-system/_functions.import.scss
@@ -91,6 +91,31 @@
     @return var( --#{$prefix}#{$name}, #{$fallback} );
 }
 
+@function k-get-swatch-color( $name, $color ) {
+    $map: (
+        app-surface: k-color( app-surface ),
+        on-app-surface: k-color( on-app-surface ),
+        subtle: k-color( subtle ),
+        surface: k-color( surface ),
+        surface-alt: k-color( surface-alt ),
+        border: k-color( border ),
+        border-alt: k-color( border-alt ),
+        color-subtle: k-color( #{$color}-subtle ),
+        color-subtle-hover: k-color( #{$color}-subtle-hover ),
+        color-subtle-active: k-color( #{$color}-subtle-active ),
+        color: k-color( #{$color} ),
+        color-hover: k-color( #{$color}-hover ),
+        color-active: k-color( #{$color}-active ),
+        color-emphasis: k-color( #{$color}-emphasis ),
+        color-on-subtle: k-color( #{$color}-on-subtle ),
+        on-color: k-color( on-#{$color} ),
+        color-on-surface: k-color( #{$color}-on-surface ),
+        on-color-disabled: rgba( k-color( on-#{$color}, true ), .46)
+    );
+
+    @return if( k-map-has-key( $map, $name ), k-map-get( $map, $name ), $name );
+};
+
 @function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
     $temp: ( );
 
@@ -102,9 +127,9 @@
         $border-prop: k-list-nth($indices, 3);
 
         // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
-        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
-        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+        $bg: if($kendo-enable-color-system, k-get-swatch-color( $bg-prop, $source-palette-name ), if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop ));
+        $text: if($kendo-enable-color-system, k-get-swatch-color( $text-prop, $source-palette-name ), if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop ));
+        $border: if($kendo-enable-color-system, k-get-swatch-color( $border-prop, $source-palette-name ), if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop ));
 
 
         $temp: k-map-deep-merge( $temp, (
@@ -116,7 +141,7 @@
         // Add outline if provided in the map
         @if ( k-list-length($indices) > 3 ) {
             $outline-prop: k-list-nth($indices, 4);
-            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+            $outline: if($kendo-enable-color-system, k-get-swatch-color( $outline-prop, $source-palette-name ), if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop ));
 
             $temp: k-map-deep-merge( $temp, (
                 #{$prefix}outline: $outline

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -158,12 +158,6 @@
                         $color,
                         $color
                     );
-                } @else if $name == "inverse" {
-                    @include fill(
-                        if($kendo-new-colors, k-color( on-dark ), k-contrast-legacy( $color )),
-                        $color,
-                        $color
-                    );
                 } @else {
                     @include fill(
                         if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
@@ -194,12 +188,6 @@
                         $color,
                         $color
                     );
-                } @else if $name == "inverse" {
-                    @include fill(
-                        if($kendo-new-colors, k-color( on-dark ), k-contrast-legacy( $color )),
-                        $color,
-                        $color
-                    );
                 } @else {
                     @include fill(
                         if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
@@ -217,12 +205,6 @@
                         $color,
                         $color
                     );
-                } @else if $name == "inverse" {
-                    @include fill(
-                        if($kendo-new-colors, k-color( on-dark ), k-contrast-legacy( $color )),
-                        $color,
-                        $color
-                    );
                 } @else {
                     @include fill(
                         if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),

diff --git a/packages/fluent/scss/action-sheet/_variables.scss b/packages/fluent/scss/action-sheet/_variables.scss
@@ -114,7 +114,7 @@ $kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
-$kendo-actionsheet-item-icon-color: k-get-theme-color-var( primary-110 ) !default;
+$kendo-actionsheet-item-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet

diff --git a/packages/fluent/scss/adaptive/_variables.scss b/packages/fluent/scss/adaptive/_variables.scss
@@ -9,10 +9,10 @@ $kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
 
-$kendo-adaptive-menu-bg: k-get-theme-color-var( primary-100 ) !default;
-$kendo-adaptive-menu-text: $kendo-color-white !default;
+$kendo-adaptive-menu-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
-$kendo-adaptive-menu-clear-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-clear-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 $kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
@@ -24,10 +24,10 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-grid-sort-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-scheduler-current-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;
diff --git a/packages/fluent/scss/all.scss b/packages/fluent/scss/all.scss
@@ -1,6 +1,4 @@
-@use "./index.scss" as kendo-theme with (
-    $kendo-enable-color-system: false,
-);
+@use "./index.scss" as kendo-theme;
 
 @include kendo-theme.config();
 @include kendo-theme.styles();
diff --git a/packages/fluent/scss/appbar/_variables.scss b/packages/fluent/scss/appbar/_variables.scss
@@ -38,7 +38,7 @@ $kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
 $kendo-appbar-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-appbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the AppBar.
 /// @group appbar
 $kendo-appbar-border: var( --kendo-component-border, initial ) !default;
@@ -50,25 +50,25 @@ $kendo-appbar-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrix with appbar theme colors in the order: bg, color, border
 $_tc-appbar-matrix: (
-    (normal: (100, $kendo-color-white, 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
 ) !default;
 
 $_tc-appbar-warning-matrix: (
-    (normal: (100, k-get-theme-color-var( neutral-160 ), 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))),
 ) !default;
 
 $_tc-appbar-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-appbar-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// The theme colors map for the AppBar variations.
@@ -94,13 +94,13 @@ $kendo-appbar-theme-colors: () !default;
 @each $ui-states in $_tc-appbar-dark-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-light-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }
diff --git a/packages/fluent/scss/avatar/_variables.scss b/packages/fluent/scss/avatar/_variables.scss
@@ -30,44 +30,44 @@ $kendo-avatar-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrices with Avatar theme colors in the order: bg, color, border
 $_tc-avatar-matrix: (
     solid: (
-        normal: (100, $kendo-color-white, 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-avatar-warning-matrix: (
     solid: (
-        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-avatar-dark-matrix: (
     solid: (
-        normal: (160, $kendo-color-white, 160)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
     ),
     outline: (
-        normal: ($kendo-color-white, 160, 160)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 160, 160))
     )
 ) !default;
 
 $_tc-avatar-light-matrix: (
     solid: (
-        normal: (50, $kendo-color-white, 50)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50))
     ),
     outline: (
-        normal: ($kendo-color-white, 50, 50)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 50, 50))
     )
 ) !default;
 
@@ -94,13 +94,13 @@ $kendo-avatar-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }
diff --git a/packages/fluent/scss/badge/_variables.scss b/packages/fluent/scss/badge/_variables.scss
@@ -104,44 +104,44 @@ $kendo-badge-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrices with Badge theme colors in the order: bg, color, border
 $_tc-badge-matrix: (
     solid: (
-        normal: (100, $kendo-color-white, 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-badge-warning-matrix: (
     solid: (
-        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-badge-dark-matrix: (
     solid: (
-        normal: (160, $kendo-color-white, 160)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
     ),
     outline: (
-        normal: ($kendo-color-white, 160, 160)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 160, 160))
     )
 ) !default;
 
 $_tc-badge-light-matrix: (
     solid: (
-        normal: (50, 160, 50)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))
     ),
     outline: (
-        normal: ($kendo-color-white, 50, 50)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 50, 50))
     )
 ) !default;
 
@@ -168,13 +168,13 @@ $kendo-badge-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-badge-dark-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-light-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }