deps(theming): bump to latest beta

SisIvanova · SisIvanova · commit 37a26efde125 · 2025-02-24T15:14:25.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^14.4.0-beta.2",
+    "igniteui-theming": "^15.1.0-beta.1",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/resize-container/resize-container.ts b/src/components/resize-container/resize-container.ts
@@ -2,6 +2,7 @@ import { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 
+import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -10,6 +11,7 @@ import IgcIconComponent from '../icon/icon.js';
 import { addResizeController } from './resize-controller.js';
 import { styles } from './themes/resize-container.base.css.js';
 import { styles as shared } from './themes/shared/resize-container.common.css.js';
+import { all } from './themes/themes.js';
 import type {
   ResizeCallbackParams,
   ResizeGhostFactory,
@@ -31,6 +33,7 @@ export interface IgcResizeContainerComponentEventMap {
  *
  * @slot - renders the element(s) that should be resized
  */
+@themes(all)
 export default class IgcResizeContainerComponent extends EventEmitterMixin<
   IgcResizeContainerComponentEventMap,
   Constructor<LitElement>
diff --git a/src/components/resize-container/themes/dark/_themes.scss b/src/components/resize-container/themes/dark/_themes.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/resize-indicator' as *;
+
+$base: digest-schema($dark-base-resize-indicator);
+$material: digest-schema($dark-material-resize-indicator);
+$bootstrap: digest-schema($dark-bootstrap-resize-indicator);
+$fluent: digest-schema($dark-fluent-resize-indicator);
+$indigo: digest-schema($dark-indigo-resize-indicator);
diff --git a/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/dark/resize-indicator.fluent.scss b/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/dark/resize-indicator.indigo.scss b/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/dark/resize-indicator.material.scss b/src/components/resize-container/themes/dark/resize-indicator.material.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/dark/resize-indicator.shared.scss b/src/components/resize-container/themes/dark/resize-indicator.shared.scss
@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/light/_themes.scss b/src/components/resize-container/themes/light/_themes.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/resize-indicator' as *;
+
+$base: digest-schema($light-resize-indicator);
+$material: digest-schema($material-resize-indicator);
+$bootstrap: digest-schema($bootstrap-resize-indicator);
+$fluent: digest-schema($fluent-resize-indicator);
+$indigo: digest-schema($indigo-resize-indicator);
diff --git a/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/light/resize-indicator.fluent.scss b/src/components/resize-container/themes/light/resize-indicator.fluent.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/light/resize-indicator.indigo.scss b/src/components/resize-container/themes/light/resize-indicator.indigo.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/light/resize-indicator.material.scss b/src/components/resize-container/themes/light/resize-indicator.material.scss
@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/light/resize-indicator.shared.scss b/src/components/resize-container/themes/light/resize-indicator.shared.scss
@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-resize-indicator');
+}
diff --git a/src/components/resize-container/themes/shared/resize-container.common.scss b/src/components/resize-container/themes/shared/resize-container.common.scss
@@ -1,5 +1,6 @@
 @use 'styles/utilities' as *;
-@use '../../../tile-manager/themes/light/themes' as *;
+@use '../../../tile-manager/themes/light/themes' as tile;
+@use '../light/themes' as *;
 
 $theme: $material;
 
@@ -11,8 +12,8 @@ $theme: $material;
         inset: 0;
         width: 100%;
         height: 100%;
-        border-radius: var-get($theme, 'border-radius');
-        border: rem(1px) solid var-get($theme, 'hover-border-color');
+        border-radius: var-get(tile.$base, 'border-radius');
+        border: rem(1px) solid var-get($theme, 'resize-indicator');
     }
 }
 
diff --git a/src/components/resize-container/themes/themes.ts b/src/components/resize-container/themes/themes.ts
@@ -0,0 +1,53 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../../theming/types.js';
+// Dark Overrides
+import { styles as bootstrapDark } from './dark/resize-indicator.bootstrap.css.js';
+import { styles as fluentDark } from './dark/resize-indicator.fluent.css.js';
+import { styles as indigoDark } from './dark/resize-indicator.indigo.css.js';
+import { styles as materialDark } from './dark/resize-indicator.material.css.js';
+import { styles as sharedDark } from './dark/resize-indicator.shared.css.js';
+// Light Overrides
+import { styles as bootstrapLight } from './light/resize-indicator.bootstrap.css.js';
+import { styles as fluentLight } from './light/resize-indicator.fluent.css.js';
+import { styles as indigoLight } from './light/resize-indicator.indigo.css.js';
+import { styles as materialLight } from './light/resize-indicator.material.css.js';
+import { styles as sharedLight } from './light/resize-indicator.shared.css.js';
+
+const light = {
+  shared: css`
+    ${sharedLight}
+  `,
+  bootstrap: css`
+    ${bootstrapLight}
+  `,
+  material: css`
+    ${materialLight}
+  `,
+  fluent: css`
+    ${fluentLight}
+  `,
+  indigo: css`
+    ${indigoLight}
+  `,
+};
+
+const dark = {
+  shared: css`
+    ${sharedDark}
+  `,
+  bootstrap: css`
+    ${bootstrapDark}
+  `,
+  material: css`
+    ${materialDark}
+  `,
+  fluent: css`
+    ${fluentDark}
+  `,
+  indigo: css`
+    ${indigoDark}
+  `,
+};
+
+export const all: Themes = { light, dark };
diff --git a/src/components/tile-manager/themes/shared/tile/tile.common.scss b/src/components/tile-manager/themes/shared/tile/tile.common.scss
@@ -3,6 +3,16 @@
 
 $theme: $material;
 
+%after-element {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+}
+
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
@@ -14,15 +24,14 @@ $theme: $material;
 }
 
 [part~='base']:not([part~='resizable']) {
+    &::after {
+        @extend %after-element;
+
+        border: rem(1px) solid var-get($theme, 'border-color');
+    }
+
     &:hover {
         &::after {
-            content: '';
-            position: absolute;
-            pointer-events: none;
-            border-radius: inherit;
-            inset: 0;
-            width: 100%;
-            height: 100%;
             border: rem(1px) solid var-get($theme, 'hover-border-color');
         }
     }
@@ -51,21 +60,16 @@ $theme: $material;
 
 [part~='drag-over'] {
     &::after {
-        content: '';
-        position: absolute;
-        pointer-events: none;
-        border-radius: inherit;
-        inset: 0;
-        width: 100%;
-        height: 100%;
+        @extend %after-element;
+
         z-index: 1000;
         border: rem(1px) solid var-get($theme, 'ghost-border');
         background: var-get($theme, 'overlay-background');
     }
 }
 
 [part='header'] {
-    background: var-get($theme, 'tile-background');
+    background: var-get($theme, 'header-background');
     border-top-left-radius: var-get($theme, 'border-radius');
     border-top-right-radius: var-get($theme, 'border-radius');
 }
@@ -75,5 +79,5 @@ $theme: $material;
 }
 
 igc-divider {
-    --color: var-get($theme, 'divider-color');
+    --color: #{var-get($theme, 'divider-color')};
 }
