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

IgniteUI · Oct 9, 2024 · 1d8368f · 1d8368f
1 parent 45ed308
commit 1d8368f
Show file tree

Hide file tree

Showing 29 changed files with 194 additions and 105 deletions.
diff --git a/CHANGELOG.md b/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).

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",

diff --git a/projects/igniteui-angular/migrations/update-18_2_0/index.spec.ts b/projects/igniteui-angular/migrations/update-18_2_0/index.spec.ts
@@ -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`,

diff --git a/projects/igniteui-angular/migrations/update-18_2_0/index.ts b/projects/igniteui-angular/migrations/update-18_2_0/index.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();
 };
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -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": {

diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
@@ -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();

diff --git a/src/app/action-strip/action-strip.sample.scss b/src/app/action-strip/action-strip.sample.scss
@@ -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 {

diff --git a/src/app/autocomplete/autocomplete.sample.scss b/src/app/autocomplete/autocomplete.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;
 }
 

diff --git a/src/app/chips/chips.sample.scss b/src/app/chips/chips.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);
         }
     }
 }

diff --git a/src/app/combo/combo.sample.scss b/src/app/combo/combo.sample.scss
@@ -23,7 +23,7 @@
     &__section {
         flex-direction: column;
         padding: 16px;
-        border: 1px dashed hsla(var(--ig-gray-300));
+        border: 1px dashed var(--ig-gray-300);
     }
 
     &__form {
@@ -51,6 +51,6 @@
 .custom-combo-header {
     text-align: center;
     padding: 8px 16px;
-    background: hsla(var(--ig-gray-100));
+    background: var(--ig-gray-100);
 }
 
diff --git a/src/app/divider/divider.component.scss b/src/app/divider/divider.component.scss
@@ -28,7 +28,7 @@ $padding: 32px;
 .preview {
     display: flex;
     justify-content: space-between;
-    border: 1px solid hsla(var(--ig-gray-300));
+    border: 1px solid var(--ig-gray-300);
     gap: $padding;
     margin: 0 auto;
 }
@@ -58,8 +58,8 @@ $padding: 32px;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    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;
     min-width: 320px;
 }
@@ -71,15 +71,15 @@ $padding: 32px;
     text-decoration: none;
     outline: none;
     margin-top: 1rem;
-    color: hsla(var(--ig-primary-600));
+    color: var(--ig-primary-600);
 
     &:focus,
     &:hover {
-        color: hsla(var(--ig-primary-300));
+        color: var(--ig-primary-300);
     }
 }
 
 .preview__warning {
-    color: hsla(var(--ig-warn-600));
+    color: var(--ig-warn-600);
 }
 
diff --git a/src/app/grid/grid.sample.scss b/src/app/grid/grid.sample.scss
@@ -49,7 +49,7 @@
 }
 
 .toggle-group:nth-child(odd) {
-    background: hsl(var(--ig-surface-500));
+    background: var(--ig-surface-500);
 }
 
 .paging-config {

diff --git a/src/app/icon/icon.sample.scss b/src/app/icon/icon.sample.scss
@@ -9,5 +9,5 @@
 }
 
 .color {
-    color: hsl(var(--ig-primary-300));
+    color: var(--ig-primary-300);
 }
diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html
@@ -109,7 +109,7 @@
                 <span slot="suffix"><igx-icon>face</igx-icon></span>
                 <span slot="helper-text">
                     Web component
-                    <strong *ngIf="inputType === 'line'" style="color: hsla(var(--ig-error-500))">
+                    <strong *ngIf="inputType === 'line'" style="color: var(--ig-error-500)">
                         don't have {{inputType}} type!
                     </strong>
                 </span>

diff --git a/src/app/input-group/input-group.sample.scss b/src/app/input-group/input-group.sample.scss
@@ -6,16 +6,16 @@
         line-height: 20px;
         margin: 0;
         padding: 16px;
-        background: hsla(var(--ig-gray-50));
-        border-left: 4px solid hsla(var(--ig-warn-500));
+        background: var(--ig-gray-50);
+        border-left: 4px solid var(--ig-warn-500);
     }
 
     .no-bm {
         margin-bottom: 0 !important;
     }
 
     .attention {
-        color: hsla(var(--ig-warn-700));
+        color: var(--ig-warn-700);
     }
 
     &__column-buttons {
@@ -34,7 +34,7 @@
     display: flex;
     flex-direction: column;
     gap: 24px;
-    border: 2px dashed hsla(var(--ig-primary-500));
+    border: 2px dashed var(--ig-primary-500);
     padding: 16px;
 }
 
@@ -44,7 +44,7 @@
     max-width: 900px;
     margin: 0 auto;
     padding: 16px;
-    border: 1px dashed hsla(var(--ig-gray-300));
+    border: 1px dashed var(--ig-gray-300);
 }
 
 .form__fields {

diff --git a/src/app/layout/layout.sample.scss b/src/app/layout/layout.sample.scss
@@ -1,15 +1,15 @@
 .layout-box {
     width: 100%;
     height: 100%;
-    background: hsl(var(--ig-gray-200));
+    background: var(--ig-gray-200);
     padding: 8px;
 }
 
 .layout-box__el {
     height: 48px;
     padding: 8px;
     margin: 8px;
-    background: hsl(var(--ig-secondary-500));
+    background: var(--ig-secondary-500);
     color: white;
 }
 

diff --git a/src/app/navdrawer/navdrawer.sample.scss b/src/app/navdrawer/navdrawer.sample.scss
@@ -13,12 +13,12 @@
 
 .setting-title {
     margin-bottom: 0;
-    color: hsl(var(--ig-secondary-500));
+    color: var(--ig-secondary-500);
 }
 
 .setting-note {
     font-size: 14px;
-    color: hsl(var(--ig-gray-400));
+    color: var(--ig-gray-400);
     margin: 4px 0;
 }