Merge branch 'master' into dmdimitrov/query-builder-improvements

CHANGELOG.md

@@ -32,6 +32,32 @@ All notable changes for each version of this project will be documented in this
  - A new optional property called `conditionName` has been introduced. This would generally be equal to the existing `condition.name`.
 
 
+### 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).

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`,

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

@@ -9,12 +9,48 @@ 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);
 
  update.addValueTransform('fields_to_entities', (args: BoundPropertyObject): void => {
  args.bindingType = InputPropertyType.EVAL;
  args.value = `[{ name: '', fields: ${args.value}}]`;
  });
 
+ 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/package.json

@@ -74,7 +74,7 @@
  "igniteui-trial-watermark": "^3.0.2",
  "lodash-es": "^4.17.21",
  "uuid": "^9.0.0",
- "igniteui-theming": "^14.2.0-beta.2",
+ "igniteui-theming": "^14.2.0-beta.3",
  "@igniteui/material-icons-extended": "^3.0.0"
  },
  "peerDependencies": {

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();

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 {

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;
 }
 

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);
  }
  }
 }

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);
 }
 

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);
 }
 

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 {

src/app/icon/icon.sample.scss

@@ -9,5 +9,5 @@
 }
 
 .color {
- color: hsl(var(--ig-primary-300));
+ color: var(--ig-primary-300);
 }

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>

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 {

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;
 }
 

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;
 }
 

src/app/pageHeading/pageHeading.styles.scss

@@ -10,8 +10,11 @@
 }
 
 :host ::ng-deep {
+ --ph-background: var(--ig-primary-800);
+ --ph-foreground: var(--ig-primary-800-contrast);
+
  .hamburger {
- color: var(--ig-surface-500-contrast);
+ color: var(--ph-foreground);
  margin-right: rem(16px);
 
  [dir='rtl'] & {
@@ -26,11 +29,11 @@
  align-items: center;
  height: rem(90px);
  padding: 0 rem(16px);
- background: hsla(var(--ig-primary-500));
+ background: var(--ph-background);
  overflow: hidden;
 
  .title {
- color: hsla(var(--ig-primary-500-contrast));
+ color: var(--ph-foreground);
  margin: 0;
  text-transform: capitalize;
  white-space: nowrap;

src/app/pagination/pagination.styles.scss

@@ -25,7 +25,7 @@
  align-items: center;
  height: rem(90px);
  padding: 0 rem(16px);
- background: hsl(var(--ig-primary-500));
+ background: var(--ig-primary-500);
  overflow: hidden;
 
  .title {

src/app/pivot-grid-state/pivot-grid-state.sample.scss

@@ -42,7 +42,7 @@ igx-pivot-grid {
  }
 
  igx-pivot-data-selector {
- border: 1px solid hsl(var(--ig-gray-200));
+ border: 1px solid var(--ig-gray-200);
  margin: 0 8px;
  }
 }