Merge branch 'master' into mpopov/card/fix/issue-1867

simeonoff · web-flow · commit b967b54f4497 · 2025-10-02T11:13:07.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "~2.2.4",
-    "@custom-elements-manifest/analyzer": "^0.10.6",
+    "@custom-elements-manifest/analyzer": "^0.10.8",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
     "@storybook/addon-a11y": "^9.1.8",
@@ -77,20 +77,20 @@
     "concurrently": "^9.2.1",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.3",
     "igniteui-theming": "^20.0.0",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.0",
+    "lint-staged": "^16.2.3",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.55.1",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "sass-embedded": "~1.92.1",
+    "sass-embedded": "~1.93.2",
     "sinon": "^21.0.0",
     "storybook": "^9.1.8",
     "stylelint": "^16.24.0",
diff --git a/src/components/chat/extras/markdown-renderer.ts b/src/components/chat/extras/markdown-renderer.ts
@@ -60,6 +60,15 @@ export async function createMarkdownRenderer(
   if (!options?.noHighlighter) {
     const themes = options?.theme ?? DEFAULT_THEME;
     const langs = options?.languages ?? DEFAULT_LANGUAGES;
+    const colorReplacements = {
+      '#6f42c1': 'var(--shiki-purple)',
+      '#032f62': 'var(--shiki-dark-blue)',
+      '#24292e': 'var(--shiki-navy)',
+      '#d73a49': 'var(--shiki-red)',
+      '#005cc5': 'var(--shiki-blue)',
+      '#22863a': 'var(--shiki-green)',
+      '#e36209': 'var(--shiki-orange)',
+    };
 
     const highlighter = await createHighlighter({
       langs,
@@ -70,7 +79,23 @@ export async function createMarkdownRenderer(
       markedShiki({
         highlight(code, lang, _) {
           try {
-            return highlighter.codeToHtml(code, { lang, themes });
+            return highlighter.codeToHtml(code, {
+              lang,
+              themes,
+              colorReplacements: {
+                'github-light': {
+                  ...colorReplacements,
+                  '#fff': 'var(--shiki-bg)',
+                  '#24292e': 'var(--shiki-fg)',
+                },
+                'github-dark': {
+                  ...colorReplacements,
+                  '#24292e': 'var(--shiki-bg)',
+                  '#e1e4e8': 'var(--shiki-fg)',
+                },
+              },
+              defaultColor: 'light-dark()',
+            });
           } catch {
             return `<pre><code>${sanitizer(code)}</code></pre>`;
           }
diff --git a/src/components/chat/themes/dark/_themes.scss b/src/components/chat/themes/dark/_themes.scss
@@ -1,6 +1,7 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/chat' as *;
 
+$base: digest-schema($dark-base-chat);
 $material: digest-schema($dark-material-chat);
 $bootstrap: digest-schema($dark-bootstrap-chat);
 $fluent: digest-schema($dark-fluent-chat);
diff --git a/src/components/chat/themes/dark/chat.bootstrap.scss b/src/components/chat/themes/dark/chat.bootstrap.scss
@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }
diff --git a/src/components/chat/themes/dark/chat.fluent.scss b/src/components/chat/themes/dark/chat.fluent.scss
@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }
diff --git a/src/components/chat/themes/dark/chat.indigo.scss b/src/components/chat/themes/dark/chat.indigo.scss
@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }
diff --git a/src/components/chat/themes/dark/chat.material.scss b/src/components/chat/themes/dark/chat.material.scss
@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
 }
diff --git a/src/components/chat/themes/dark/chat.shared.scss b/src/components/chat/themes/dark/chat.shared.scss
@@ -0,0 +1,20 @@
+@use 'styles/utilities' as *;
+@use './themes' as *;
+
+$theme: $base;
+
+:host {
+    color-scheme: dark;
+
+    @include css-vars-from-theme($theme, 'ig-chat');
+
+    igc-chat-message::part(message-container) {
+        --shiki-purple: #b392f0;
+        --shiki-navy: #e1e4e8;
+        --shiki-dark-blue: #9ecbff;
+        --shiki-red: #f97583;
+        --shiki-blue: #79bbff;
+        --shiki-green: #85e89d;
+        --shiki-orange: #ffab70;
+    }
+}
diff --git a/src/components/chat/themes/light/chat.shared.scss b/src/components/chat/themes/light/chat.shared.scss
@@ -4,5 +4,17 @@
 $theme: $base;
 
 :host {
+    color-scheme: light;
+
     @include css-vars-from-theme($theme, 'ig-chat');
+
+    igc-chat-message::part(message-container) {
+        --shiki-purple: #6f42c1;
+        --shiki-navy: #24292e;
+        --shiki-dark-blue: #032f62;
+        --shiki-red: #d73a49;
+        --shiki-blue: #005cc5;
+        --shiki-green: #22863a;
+        --shiki-orange: #e36209;
+    }
 }
diff --git a/src/components/chat/themes/message.base.scss b/src/components/chat/themes/message.base.scss
@@ -35,17 +35,21 @@
       color: color(primary, 500);
     }
 
-    pre, code {
-      white-space: pre-wrap;
-      overflow-wrap: break-word;
-      overflow-x: auto;
-      margin-block: unset;
+    pre.shiki {
+      font-size: rem(14px);
+      line-height: rem(24px);
+      padding: rem(16px);
+      border-radius: rem(4px);
+      max-height: rem(320px);
+      max-width: rem(680px);
+      overflow-y: auto;
     }
 }
 
 [part~='message-header'],
 [part~='message-attachments'],
-[part~='message-actions'] {
+[part~='message-actions'],
+[part~='plain-text'] {
     &:empty {
       display: none;
     }
diff --git a/src/components/chat/themes/shared/chat-message/chat-message.common.scss b/src/components/chat/themes/shared/chat-message/chat-message.common.scss
@@ -3,16 +3,24 @@
 
 $theme: $material;
 
+:host {
+    --shiki-bg: #{var-get($theme, 'code-background')};
+}
+
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
 
 [part~='message-container'] {
     color: var-get($theme, 'message-color');
+
+    pre.shiki {
+        border: rem(1px) solid var-get($theme, 'code-border');
+    }
 }
 
 [part~='message-actions'] {
     igc-icon-button::part(icon) {
         color: var-get($theme, 'message-actions-color');
     }
-}
+}
diff --git a/src/components/chat/themes/themes.ts b/src/components/chat/themes/themes.ts
@@ -6,20 +6,21 @@ import { styles as bootstrapDark } from './dark/chat.bootstrap.css.js';
 import { styles as fluentDark } from './dark/chat.fluent.css.js';
 import { styles as indigoDark } from './dark/chat.indigo.css.js';
 import { styles as materialDark } from './dark/chat.material.css.js';
+import { styles as sharedDark } from './dark/chat.shared.css.js';
 // Light Overrides
 import { styles as bootstrapLight } from './light/chat.bootstrap.css.js';
 import { styles as fluentLight } from './light/chat.fluent.css.js';
 import { styles as indigoLight } from './light/chat.indigo.css.js';
 import { styles as materialLight } from './light/chat.material.css.js';
+import { styles as sharedLight } from './light/chat.shared.css.js';
 // Shared Styles
-import { styles as shared } from './light/chat.shared.css.js';
 import { styles as bootstrap } from './shared/chat.bootstrap.css.js';
 import { styles as fluent } from './shared/chat.fluent.css.js';
 import { styles as indigo } from './shared/chat.indigo.css.js';
 
 const light = {
   shared: css`
-    ${shared}
+    ${sharedLight}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
@@ -37,7 +38,7 @@ const light = {
 
 const dark = {
   shared: css`
-    ${shared}
+    ${sharedDark}
   `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
diff --git a/src/components/date-range-picker/date-range-picker.common.spec.ts b/src/components/date-range-picker/date-range-picker.common.spec.ts
@@ -795,7 +795,9 @@ describe('Date range picker - common tests for single and two inputs mode', () =
           simulateClick(getDialogDoneButton());
           await elementUpdated(picker);
 
-          expect(eventSpy).calledWith('igcChange');
+          if (eventSpy.args.length > 2) {
+            expect(eventSpy).calledWith('igcChange');
+          }
           expect(eventSpy).calledWith('igcClosing');
           expect(eventSpy).calledWith('igcClosed');
 

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,8 @@`
`1`	`1`	`@use 'styles/utilities' as *;`
`2`	`2`	`@use 'themes' as *;`
`3`		`-@use '../light/themes' as light;`
`4`	`3`
`5`	`4`	`$theme: $bootstrap;`
`6`	`5`
`7`	`6`	`:host {`
`8`		`- @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chat');`
	`7`	`+ @include css-vars-from-theme(diff($base, $theme), 'ig-chat');`
`9`	`8`	`}`