feat(utils): generate utility classes with css variables

telerik · Mar 13, 2024 · 94d993b · 94d993b
1 parent 8be6f9a
commit 94d993b
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 21 deletions.
diff --git a/packages/fluent/scss/utils/_layout.scss b/packages/fluent/scss/utils/_layout.scss
@@ -4,7 +4,9 @@
     $kendo-spacing: $kendo-spacing,
     $kendo-font-sizes: $kendo-font-sizes,
     $kendo-border-radii: $kendo-border-radii,
-    $kendo-elevation: $kendo-elevation
+    $kendo-elevation: $kendo-elevation,
+    $kendo-colors: $kendo-colors,
+    $kendo-enable-color-system: $kendo-enable-color-system
 );
 
 @mixin kendo-utils--layout() {

diff --git a/packages/utils/scss/_mixins.scss b/packages/utils/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
+@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important, $css-var: null ) {
     @if $values {
         $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
         $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );
@@ -8,21 +8,30 @@
             $_val: if( k-meta-type-of($values) == list, $key, $val );
             $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
+            $_custom-prop: if( $_key == DEFAULT, var( --kendo-#{$css-var}, #{$_val} ), var( --kendo-#{$css-var}-#{$_key}, #{$_val} ) );
 
             @if $important != only {
                 .#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_custom-prop), $_custom-prop );
+                        } @else {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        }
                     }
                 }
             }
             @if $important {
                 .\!#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $-custom-prop), $-custom-prop ) !important; // stylelint-disable-line declaration-no-important
+                        } @else {
+                            #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        }
                     }
                 }
             }
         }
     }
-}
+}
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
@@ -1,10 +1,52 @@
+@import "@progress/kendo-theme-core/scss/color-system/index.import.scss";
+
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
+$kendo-enable-color-system: false !default;
 
 $kendo-theme-colors: () !default;
 
 $kendo-font-sizes: () !default;
 
+$kendo-util-colors-list: (
+    primary-subtle,
+    primary,
+    primary-emphasis,
+    secondary-subtle,
+    secondary,
+    secondary-emphasis,
+    tertiary-subtle,
+    tertiary,
+    tertiary-emphasis,
+    info-subtle,
+    info,
+    info-emphasis,
+    success-subtle,
+    success,
+    success-emphasis,
+    warning-subtle,
+    warning,
+    warning-emphasis,
+    error-subtle,
+    error,
+    error-emphasis,
+    light-subtle,
+    light,
+    light-emphasis,
+    dark-subtle,
+    dark,
+    dark-emphasis,
+) !default;
+
+$kendo-util-colors: () !default;
+@each $name, $color in $kendo-colors {
+    @each $util-color in $kendo-util-colors-list {
+        @if ( $name == $util-color ) {
+            $kendo-util-colors: k-map-merge( $kendo-util-colors, ( $name: $color) );
+        }
+    }
+}
+
 $kendo-spacing: (
     0: 0,
     1px: 1px,
@@ -692,7 +734,7 @@ $kendo-utils: (
         start,
         end
     ),
-    "text-color": k-map-merge( $kendo-theme-colors, (
+    "text-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -747,7 +789,7 @@ $kendo-utils: (
         content: content-box,
         text: text
     ),
-    "background-color": k-map-merge( $kendo-theme-colors, (
+    "background-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "transparent": transparent,
         "black": black,
@@ -790,7 +832,7 @@ $kendo-utils: (
         hidden,
         none
     ),
-    "border-color": k-map-merge( $kendo-theme-colors, (
+    "border-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -816,7 +858,7 @@ $kendo-utils: (
         outset,
         none
     ),
-    "outline-color": k-map-merge( $kendo-theme-colors, (
+    "outline-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,

diff --git a/packages/utils/scss/background/_background-color.scss b/packages/utils/scss/background/_background-color.scss
@@ -26,6 +26,6 @@
 
     // Background color utility classes
     $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
-    @include generate-utils( bg, background-color, $kendo-utils-background-color );
+    @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
 
 }
diff --git a/packages/utils/scss/border/_border-color.scss b/packages/utils/scss/border/_border-color.scss
@@ -33,12 +33,6 @@
 
     // Border color utility classes
     $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
-    @include generate-utils( border, border-color, $kendo-utils-border-color );
-    @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
-    @include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
-    @include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
-    @include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
-    @include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
-    @include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+    @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
 
 }
diff --git a/packages/utils/scss/border/_outline-color.scss b/packages/utils/scss/border/_outline-color.scss
@@ -32,6 +32,6 @@
 
     // Outline color utility classes
     $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
-    @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+    @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
 
 }
diff --git a/packages/utils/scss/elevation/index.import.scss b/packages/utils/scss/elevation/index.import.scss
@@ -1,5 +1,5 @@
 @import "@progress/kendo-theme-core/scss/elevation/index.import.scss";
 
 @mixin kendo-utils--elevation {
-    @include generate-utils(elevation, box-shadow, $kendo-elevation);
+    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: 'elevation');
 }
diff --git a/packages/utils/scss/typography/_text-color.scss b/packages/utils/scss/typography/_text-color.scss
@@ -4,10 +4,10 @@
 
     // Text color utility classes
     $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
-    @include generate-utils( text, color, $kendo-utils-text-color );
+    @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
 
 
     // Legacy aliases
-    @include generate-utils( color, color, $kendo-utils-text-color );
+    @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );
 
 }