botframework-webchat-fluent-theme 4.18.1-main.20241029.4a18bde → 4.18.1-main.20241104.06bf029

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20241029.4a18bde",
+  "version": "4.18.1-main.20241104.06bf029",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -68,15 +68,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.12.11",
     "@types/react": "^16.14.60",
-    "botframework-webchat-base": "4.18.1-main.20241029.4a18bde",
-    "botframework-webchat-styles": "4.18.1-main.20241029.4a18bde",
+    "botframework-webchat-base": "4.18.1-main.20241104.06bf029",
+    "botframework-webchat-styles": "4.18.1-main.20241104.06bf029",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20241029.4a18bde",
-    "botframework-webchat-component": "4.18.1-main.20241029.4a18bde",
-    "botframework-webchat-core": "4.18.1-main.20241029.4a18bde",
+    "botframework-webchat-api": "4.18.1-main.20241104.06bf029",
+    "botframework-webchat-component": "4.18.1-main.20241104.06bf029",
+    "botframework-webchat-core": "4.18.1-main.20241104.06bf029",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/theme/Theme.module.css

@@ -2,7 +2,7 @@
   /* biome-ignore format: do not print each class on the new line */
   .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .v, .w, .u, .x, .y, .z,
   .A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .V, .W, .U, .X, .Y, .Z {
-    /* biome-ignore lint: esbuild considers empty global classes as used and removes them due to lack of rules */
+    /* esbuild considers empty global classes as used and removes them due to lack of rules */
   }
 }
 
@@ -72,6 +72,10 @@
   --webchat-colorGray190: var(--colorGray190, #201f1e);
   --webchat-colorGray200: var(--colorGray200, #1b1a19);
 
+  /* New greys from the link above not exposed by Fluent */
+  --webchat-colorGrey8: #141414;
+  --webchat-colorGrey98: #fafafa;
+
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
   --webchat-shadow2: var(--shadow2, 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%));
   --webchat-shadow4: var(--shadow4, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14));
@@ -115,6 +119,7 @@
     'Helvetica Neue',
     sans-serif
   );
+  --webchat-fontFamilyMonospace: var(--fontFamilyMonospace, Consolas, 'Courier New', Courier, monospace);
   --webchat-fontFamilyNumeric: var(
     --fontFamilyNumeric,
     Bahnschrift,
@@ -161,7 +166,7 @@
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/strokeWidths.ts */
   --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
-  --webchat-strokeWidthThick: var(--strokeWidthThicker, 2px);
+  --webchat-strokeWidthThick: var(--strokeWidthThick, 2px);
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts */
@@ -217,8 +222,9 @@
   padding-inline-start: var(--webchat-spacingHorizontalMNudge);
 }
 
-/* Transcript scrollable */
-:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable) {
+/* Scrollbars */
+:global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -231,6 +237,10 @@
     visibility: hidden;
   }
 
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   &:hover::-webkit-scrollbar {
     width: var(--webchat-spacingVerticalMNudge);
   }
@@ -357,7 +367,7 @@
   }
 
   /* TODO: align with original fluent modal styles in WebChat as they don't match v9 anymore */
-  :global(.webchat__modal-dialog__close-button):focus:not(:active):hover {
+  :global(.webchat__modal-dialog__close-button):not(:active):hover {
     background-color: var(--webchat-colorNeutralBackground3);
   }
 
@@ -378,6 +388,125 @@
   }
 }
 
+/* View Code dialog */
+:global(.webchat-fluent).theme :global(.webchat__modal-dialog.webchat__view-code-dialog) {
+  :global(.webchat__modal-dialog__close-button-layout) {
+    display: flex;
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__modal-dialog__close-button) {
+    align-items: center;
+    aspect-ratio: 1;
+    display: flex;
+    height: var(--webchat-lineHeightBase300);
+    justify-content: center;
+    padding: 0;
+    width: unset;
+  }
+
+  :global(.webchat__view-code-dialog__copy-button) {
+    background: transparent;
+    border: none;
+    color: var(--webchat-colorNeutralForeground1);
+    height: 20px;
+    margin-block-start: var(--webchat-spacingVerticalS);
+    padding: 0;
+    position: absolute;
+    right: 32px;
+    top: 0;
+    transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+    width: 20px;
+
+    :global(.webchat__code-block-copy-button__icon) {
+      background-color: currentColor;
+    }
+
+    &:hover {
+      background: var(--webchat-colorNeutralBackground3);
+    }
+
+    &:active {
+      background: var(--webchat-colorNeutralBackground3);
+    }
+
+    &:focus {
+      outline-color: var(--webchat-colorStrokeFocus2);
+    }
+  }
+
+  :global(.webchat__modal-dialog__box) {
+    width: fit-content;
+  }
+
+  :global(.webchat__modal-dialog__body) {
+    margin: 0;
+    padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+  }
+
+  :global(.webchat__view-code-dialog__title) {
+    font-size: var(--webchat-fontSizeBase300);
+    font-weight: var(--webchat-fontWeightSemibold);
+    line-height: var(--webchat-lineHeightBase300);
+  }
+
+  :global(.webchat__view-code-dialog__body) {
+    display: contents;
+  }
+
+  :global(.webchat__view-code-dialog__code-body) {
+    background: var(--webchat__code-block--background);
+    font-family: var(--webchat-fontFamilyMonospace);
+    font-size: var(--webchat-fontSizeBase300);
+    line-height: var(--webchat-fontSizeBase300);
+    margin-inline: calc(var(--webchat-spacingHorizontalM) * -1);
+    padding-inline: var(--webchat-spacingHorizontalM);
+  }
+
+  :global(.webchat__view-code-dialog__code-body:has(.shiki:focus-visible)):focus-within {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
+
+    :global(.shiki) {
+      outline: none;
+    }
+  }
+
+  :global(.webchat__view-code-dialog__code-body:has(.shiki.github-light-default)) {
+    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey98));
+  }
+
+  :global(.webchat__view-code-dialog__code-body:has(.shiki.github-dark-default)) {
+    --webchat__code-block--background: var(--codeBlockBackground, var(--webchat-colorGrey8));
+  }
+
+  :global(.webchat__view-code-dialog__footer) {
+    color: var(--webchat-colorNeutralForeground4);
+    font-size: var(--webchat-fontSizeBase100);
+    line-height: var(--webchat-lineHeightBase100);
+  }
+
+  :global(.webchat__view-code-dialog__link) {
+    color: var(--webchat-colorBrandForegroundLink);
+    text-decoration-color: transparent;
+
+    &:target {
+      color: var(--webchat-colorBrandForegroundLinkSelected);
+    }
+    &:hover {
+      color: var(--webchat-colorBrandForegroundLinkHover);
+      text-decoration: underline 1px currentColor;
+    }
+    &:active {
+      color: var(--webchat-colorBrandForegroundLinkPressed);
+    }
+    &:focus-visible {
+      outline: none;
+      text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+    }
+  }
+}
+
 /* Activity button */
 :global(.webchat-fluent).theme :global(.webchat__activity-button) {
   background: var(--webchat-colorNeutralBackground1);