refactor(themes): relative color syntax (#13769)

Author: SisIvanova

CHANGELOG.md

@@ -13,6 +13,32 @@ All notable changes for each version of this project will be documented in this
     - Added support for vertical alignment. Can be configured via the `vertical` property. Defaults to `false`.
     - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
 
+### Themes
+- `Palettes`
+    - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function. 
+
+    Example: 
+    ```css
+    /* 18.1.x and before: */
+    background: hsl(var(--igx-primary-600));
+
+    /* 18.2.0+: */
+    background: var(--igx-primary-600);
+    ```
+
+    This change also opens up the door for declaring the base (500) variants of each color in CSS from any color, including other CSS variables, whereas before the Sass `palette` function was needed to generate color shades from a base color.
+
+    Example: 
+    ```scss
+    /* 18.1.x and before: */
+    $my-palette: palette($primary: #09f, ...);
+
+    /* 18.2.0+: */
+    --ig-primary-500: #09f;
+    ```
+
+    This change adds to our continuous effort to make theming configurable in CSS as much as it is in Sass.
+
 #### Scrollbar: New CSS variables
 
 We have introduced new CSS variables to allow for more customizable scrollbars. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.0.0",
+    "igniteui-theming": "^14.1.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -88,6 +88,38 @@ describe(`Update to ${version}`, () => {
         );
     });
 
+    it('should remove hsla and hsl functions', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `.custom-body {
+            	color: hsla(var(--ig-primary-A100));
+            	background: hsla(var(--ig-gray-100));
+            }
+
+            .custom-header {
+            	color: hsl(var(--ig-secondary-100));
+            	background: hsl(var(--ig-gray-900));
+            }`
+        );
+
+        const tree = await schematicRunner
+            .runSchematic(migrationName, {}, appTree);
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.scss')
+        ).toEqual(
+            `.custom-body {
+            	color: var(--ig-primary-A100);
+            	background: var(--ig-gray-100);
+            }
+
+            .custom-header {
+            	color: var(--ig-secondary-100);
+            	background: var(--ig-gray-900);
+            }`
+        );
+    });
+
     it('should remove the $border-width property from the badge-theme', async () => {
         appTree.create(
             `/testSrc/appPrefix/component/test.component.scss`,

projects/igniteui-angular/migrations/update-18_2_0/index.spec.ts

@@ -9,6 +9,43 @@ const version = '18.2.0';
 
 export default (): Rule => async (host: Tree, context: SchematicContext) => {
     context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
     const update = new UpdateChanges(__dirname, host, context);
+
+    const IG_COLORS = [
+        'primary-',
+        'primary-A',
+        'secondary-',
+        'secondary-A',
+        'gray-',
+        'surface-',
+        'surface-A',
+        'info-',
+        'info-A',
+        'success-',
+        'success-A',
+        'warn-',
+        'warn-A',
+        'error-',
+        'error-A'
+    ];
+
+    const hslaColor = 'hsla?\\(var\\(--ig-attr(\\d)00\\)\\)';
+
+    for (const entryPath of update.sassFiles) {
+        let content = host.read(entryPath).toString();
+        IG_COLORS.forEach(color => {
+            let prop = hslaColor.replace('attr', color);
+            const regex = new RegExp(prop, 'g');
+            if (regex.test(content)) {
+                let newColor = prop.replace(/hsla\?\\\(var\\\(--ig-/g, 'var\(--ig-');
+                newColor = newColor.replace('(\\d)', '$1');
+                newColor = newColor.replace('\\)\\)', ')');
+                content = content.replace(regex, newColor);
+                host.overwrite(entryPath, content);
+            }
+        });
+    }
+
     update.applyChanges();
 };

projects/igniteui-angular/migrations/update-18_2_0/index.ts

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^14.0.0",
+        "igniteui-theming": "^14.1.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -3239,7 +3239,7 @@ describe('igxOverlay', () => {
             expect(wrapperElement).toBeDefined();
             const styles = css(wrapperElement);
             expect(styles.findIndex(
-                (e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--ig-gray-500), 0.54));')))
+                (e) => e.includes('--background-color: var(--igx-overlay-background-color, hsl(from var(--ig-gray-500) h s l/0.54));')))
                 .toBeGreaterThan(-1);
             expect(styles.findIndex(
                 (e) => e.includes('background: var(--background-color);')))
@@ -3265,7 +3265,7 @@ describe('igxOverlay', () => {
                 .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
             expect(wrapperElement).toBeDefined();
             const styles = css(wrapperElement);
-            expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--ig-gray-500), 0.54));'))).toBeGreaterThan(-1);
+            expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsl(from var(--ig-gray-500) h s l/0.54));'))).toBeGreaterThan(-1);
             expect(styles.findIndex((e) => e.includes('background: var(--background-color);'))).toBeGreaterThan(-1);
 
             fixture.componentInstance.overlay.detachAll();

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -19,7 +19,7 @@
     width: 400px;
     height: 200px;
     position: relative;
-    background-color: hsl(var(--ig-gray-200));
+    background-color: var(--ig-gray-200);
 }
 
 .my-action-strip {

src/app/action-strip/action-strip.sample.scss

@@ -6,7 +6,7 @@
     max-width: 400px;
     margin: 0 auto;
     padding: 16px;
-    background: hsl(var(--ig-gray-50));
+    background: var(--ig-gray-50);
     border-radius: 4px;
 }
 

src/app/autocomplete/autocomplete.sample.scss

@@ -17,7 +17,7 @@ $padding: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border: 1px solid hsla(var(--ig-gray-300));
+    border: 1px solid var(--ig-gray-300);
     gap: $padding;
     margin: 0 auto;
 
@@ -35,8 +35,8 @@ $padding: 32px;
         display: flex;
         flex-direction: column;
         gap: 8px;
-        background: hsla(var(--ig-gray-50));
-        border-left: 1px solid hsla(var(--ig-gray-300));
+        background: var(--ig-gray-50);
+        border-left: 1px solid var(--ig-gray-300);
         padding: $padding;
     }
 
@@ -58,12 +58,12 @@ $padding: 32px;
         justify-content: center;
         gap: 4px;
         text-decoration: none;
-        color: hsla(var(--ig-secondary-600));
+        color: var(--ig-secondary-600);
         outline: none;
 
         &:focus,
         &:hover {
-            color: hsla(var(--ig-secondary-300));
+            color: var(--ig-secondary-300);
         }
     }
 }