nits

Author: lexi-taylor

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -643,81 +643,77 @@
 
 :global(.webchat-fluent).theme :global(.webchat__feedback-form__button__submit) {
   background-color: var(--webchat-colorBrandForeground1);
-  border: 1px solid var(--webchat-colorBrandForeground1);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandForeground1);
   border-radius: var(--webchat-borderRadiusMedium);
   color: var(--webchat-colorNeutralBackground1);
   cursor: pointer;
   font-family: var(--webchat-fontFamilyBase);
   font-size: var(--webchat-fontSizeBase300);
-  height: 24px;
-  padding: 0 var(--webchat-spacingHorizontalS);
+  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
 
   &:hover {
     background-color: var(--webchat-colorBrandForeground2Hover);
-    border: 1px solid var(--webchat-colorBrandForeground2Hover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandForeground2Hover);
+  }
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
   }
 
   &:active {
     background-color: var(--webchat-colorBrandForeground2Pressed);
-    border: 1px solid var(--webchat-colorBrandForeground2Pressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandForeground2Pressed);
   }
 }
 
 :global(.webchat-fluent).theme :global(.webchat__feedback-form__button__cancel) {
   background-color: var(--webchat-colorNeutralBackground1);
-  border: 1px solid var(--webchat-colorNeutralStroke1);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
   border-radius: var(--webchat-borderRadiusMedium);
   color: var(--webchat-colorNeutralForeground3);
   cursor: pointer;
   font-family: var(--webchat-fontFamilyBase);
   font-size: var(--webchat-fontSizeBase300);
-  height: 24px;
-  padding: 0 var(--webchat-spacingHorizontalS);
+  padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
 
   &:hover {
     background-color: var(--webchat-colorNeutralBackground1Hover);
-    border: 1px solid var(--webchat-colorNeutralStroke1Hover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+  }
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
   }
 
   &:active {
     background-color: var(--webchat-colorNeutralBackground1Pressed);
-    border: 1px solid var(--webchat-colorNeutralStroke1Pressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
   }
 }
 
 :global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area) {
-  display: grid;
-  grid-template-areas: 'main';
-  max-height: 200px;
-  overflow: hidden;
   background-color: var(--webchat-colorNeutralBackground1);
   border-radius: var(--webchat-borderRadiusMedium);
-  border: 1px solid var(--webchat-colorNeutralStroke1);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
   font-family: var(--webchat-fontFamilyBase);
   font-size: var(--webchat-fontSizeBase300);
   line-height: var(--webchat-lineHeightBase300);
   gap: var(--webchat-spacingVerticalSNudge);
   padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
-  position: relative;
-  min-width: 280px;
   &::after {
     border-bottom-left-radius: var(--webchat-borderRadiusMedium);
     border-bottom-right-radius: var(--webchat-borderRadiusMedium);
-    border-bottom: 3px solid var(--webchat-colorBrandForeground1);
-    bottom: -1px;
-    clip-path: inset(calc(100% - 3px) 50% 0 50%);
-    content: '';
-    height: 4px;
-    left: -1px;
-    position: absolute;
-    right: -1px;
-    transition: clip-path 0 cubic-bezier(1, 0, 1, 1);
+    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   }
   &:focus-within {
-    border: 1px solid var(--webchat-colorNeutralStroke1);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
   }
   &:focus-within::after {
-    clip-path: inset(calc(100% - 3px) 0 0 0);
-    transition: clip-path var(--webchat-durationNormal) cubic-bezier(0, 0, 0, 1);
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   }
 }