botframework-webchat-fluent-theme 4.17.0-main.20240416.4ff01ae → 4.17.0-main.20240416.e3f5401

package/src/components/sendbox/index.module.css

@@ -1,58 +0,0 @@
-:global(.webchat-fluent) .sendbox {
-  color: var(--webchat-colorNeutralForeground1);
-  font-family: var(--webchat-fontFamilyBase);
-  padding: 0 10px 10px;
-  text-rendering: optimizeLegibility;
-}
-
-:global(.webchat-fluent) .sendbox__sendbox {
-  background-color: var(--webchat-colorNeutralBackground1);
-  border-radius: var(--webchat-borderRadiusLarge);
-  border: 1px solid var(--webchat-colorNeutralStroke1);
-  display: grid;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: 14px;
-  gap: 6px;
-  line-height: 20px;
-  padding: 8px;
-  position: relative;
-
-  &:focus-within {
-    border-color: var(--webchat-colorNeutralStroke1Selected);
-    /* TODO clarify with design the color:
-      - Teams is using colorCompoundBrandForeground1
-      - Fluent is using colorCompoundBrandStroke
-      - we are using colorCompoundBrandForeground1Hover */
-    box-shadow: inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover);
-  }
-}
-
-:global(.webchat-fluent) .sendbox__sendbox-text {
-  background-color: transparent;
-  border: none;
-  flex: auto;
-  font-family: var(--webchat-fontFamilyBase);
-  font-size: 14px;
-  line-height: 20px;
-  outline: none;
-  padding: 4px 4px 0;
-  resize: none;
-}
-
-:global(.webchat-fluent) .sendbox__sendbox-controls {
-  align-items: center;
-  display: flex;
-  padding-inline-start: 4px;
-}
-
-:global(.webchat-fluent) .sendbox__text-counter {
-  color: var(--webchat-colorNeutralForeground4);
-  cursor: default;
-  font-family: var(--webchat-fontFamilyNumeric);
-  font-size: 10px;
-  line-height: 14px;
-}
-
-:global(.webchat-fluent) .sendbox__text-counter--error {
-  color: var(--webchat-colorStatusDangerForeground1);
-}

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -1,34 +0,0 @@
-:global(.webchat-fluent) .suggested-action {
-  align-items: center;
-  background: transparent;
-  border-radius: 8px;
-  border: 1px solid var(--webchat-colorBrandStroke2);
-  cursor: pointer;
-  display: flex;
-  font-size: 12px;
-  gap: 4px;
-  padding: 4px 8px 4px;
-  text-align: start;
-  transition: all .15s ease-out;
-
-  @media (hover: hover) {
-    &:not([aria-disabled="true"]):hover {
-      background-color: var(--webchat-colorBrandBackground2Hover);
-      color: var(--webchat-colorBrandForeground2Hover)
-    }
-  }
-  &:not([aria-disabled="true"]):active {
-    background-color: var(--webchat-colorBrandBackground2Pressed);
-    color: var(--webchat-colorBrandForeground2Pressed)
-  }
-  &[aria-disabled="true"] {
-    color: var(--webchat-colorNeutralForegroundDisabled);
-    cursor: not-allowed
-  }
-}
-
-:global(.webchat-fluent) .suggested-action__image {
-  font-size: 12px;
-  height: 1em;
-  width: 1em;
-}

package/src/components/suggestedActions/index.module.css

@@ -1,23 +0,0 @@
-
-:global(.webchat-fluent) .suggested-actions {
-  align-items: flex-end;
-  align-self: flex-end;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  &:not(:empty) {
-    padding-block-end: 8px;
-    padding-inline-start: 4px
-  }
-
-  &.suggested-actions--flow {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  &.suggested-actions--stacked {
-    flex-direction: column
-  }
-}

package/src/components/telephoneKeypad/private/Button.module.css

@@ -1,62 +0,0 @@
-
-:global(.webchat-fluent) .telephone-keypad__button {
-  -webkit-user-select: none;
-  align-items: center;
-  appearance: none;
-  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */
-  background-color: White;
-  border-radius: 100%;
-
-  /* Whitelabel styles */
-  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */
-  /* color: inherit; */
-
-  border: solid 1px var(--webchat-colorNeutralStroke1);
-  color: var(--webchat-colorGray200);
-  font-weight: var(--webchat-fontWeightSemibold);
-
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 60px;
-  opacity: 0.7;
-  padding: 0;
-  position: relative;
-  touch-action: none;
-  user-select: none;
-  width: 60px;
-
-  &:hover {
-    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
-    background-color: var(--webchat-colorGray30)
-  }
-}
-
-:global(.webchat-fluent) .telephone-keypad__button__ruby {
-  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */
-  color: var(--webchat-colorGray190);
-  font-size: 10px;
-}
-
-:global(.webchat-fluent) .telephone-keypad__button__text {
-  font-size: 24px;
-  margin-top: 8px;
-}
-
-:global(.webchat-fluent) .telephone-keypad--horizontal {
-  & .telephone-keypad__button {
-    height: 32px;
-    justify-content: center;
-    margin: 8px 4px;
-    width: 32px;
-  };
-
-  .telephone-keypad__button__ruby {
-    display: none;
-  }
-
-  & .telephone-keypad__button__text {
-    font-size: 20px;
-    margin-top: 0;
-  }
-}

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -1,30 +0,0 @@
-
-:global(.webchat-fluent) .telephone-keypad {
-  /* Commented out whitelabel styles for now. */
-  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */
-  /* borderRadius: '8px 8px 0px 0px; */
-  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */
-
-  align-items: center;
-  background: var(--webchat-colorNeutralBackground1);
-  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */
-  border: none;
-  border-radius: var(--webchat-borderRadiusXLarge);
-  /* boxShadow: var(--shadow16); */
-  display: flex;
-  flex-direction: column;
-  font-family: var(--webchat-fontFamilyBase);
-  justify-content: center;
-  /* margin: var(--spacingHorizontalMNudge)' */
-}
-
-:global(.webchat-fluent) .telephone-keypad__box {
-  box-sizing: border-box;
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(4, 1fr);
-  justify-items: center;
-  padding: 16px;
-  width: 100%;
-}

package/src/env.d.ts

@@ -1,7 +0,0 @@
-// CSS modules
-type CSSModuleClasses = { readonly [key: string]: any };
-
-declare module '*.module.css' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}

package/src/styles/injectStyle.ts

@@ -1,9 +0,0 @@
-export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';
-
-export default function injectStyles() {
-  if (globalThis.document) {
-    const style = document.createElement('style');
-    style.append(document.createTextNode(injectedStyles));
-    document.head.appendChild(style);
-  }
-}

package/src/styles/useStyles.ts

@@ -1,19 +0,0 @@
-import { useMemo } from 'react';
-
-function useStyles<T extends CSSModuleClasses>(styles: T): T {
-  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
-  return useMemo(
-    () =>
-      Object.freeze(
-        Object.fromEntries(
-          Object.entries(styles).map(([baseClassName, resultClassName]) => [
-            baseClassName,
-            `${baseClassName} ${resultClassName}`
-          ])
-        )
-      ),
-    [styles]
-  );
-}
-
-export default useStyles;

package/src/styles.ts

@@ -1,4 +0,0 @@
-import injectStyle from './styles/injectStyle';
-import useStyles from './styles/useStyles';
-
-export { injectStyle, useStyles };