@syncfusion/ej2-fabric-dark-theme 33.2.13 → 34.1.29

package/styles/ai-assistview/_bigger.scss

@@ -0,0 +1,312 @@
+@use 'variables' as *;
+@include export-module('aiassistview-bigger') {
+  .e-bigger.e-aiassistview,
+  .e-bigger .e-aiassistview {
+    .e-view-header {
+      height: $aiassist-bigger-header-height;
+      .e-toolbar {
+        .e-toolbar-items {
+          .e-toolbar-left {
+            height: $toolbar-left-bigger-height;
+          }
+          .e-toolbar-item {
+            &.e-assist-view-header,
+            &.e-custom-view-header {
+              @if ($skin-name == 'highcontrast') {
+                // To apply box-shadow styling during keyboard navigation
+                padding: $bigger-view-header-padding;
+              }
+              @else {
+                padding: $bigger-view-header-padding;
+              }
+              .e-tbar-btn {
+                padding: $bigger-tbar-btn-padding;
+                .e-btn-icon {
+                  padding: $bigger-btn-icon-padding;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .e-view-content {
+      height: $view-content-bigger-height;
+    }
+    .e-prompt-icon {
+      min-height: $aiassist-bigger-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-bigger-icon-height;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      min-width: $aiassist-bigger-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: $bigger-loading-footer-padding;
+    }
+    .e-prompt-text {
+      padding: $prompt-text-bigger-padding;
+      line-height: $bigger-prompt-text-line-height;
+      min-height: 40px;
+      box-sizing: border-box;
+    }
+    .e-content-container {
+      font-size: $bigger-content-container-font-size;
+    }
+    .e-suggestion-header {
+      font-size: $bigger-suggestion-header-font-size;
+      font-weight: $suggesstions-header-bigger-font-weight;
+      margin-bottom: $bigger-suggestion-header-margin-bottom;
+    }
+    .e-suggestions {
+      &.e-suggestion-item-template ul li {
+        padding: $bigger-suggestion-item-padding;
+      }
+      li {
+        line-height: $bigger-suggestion-li-line-height;
+        font-weight: $suggesstions-bigger-font-weight;
+        padding: $suggesstions-bigger-list-padding;
+        margin: $suggesstions-bigger-list-margin;
+        height: $bigger-suggestion-li-height;
+        box-sizing: border-box;
+      }
+    }
+    .e-footer {
+      .e-assist-stop {
+        height: $response-stopper-bigger-height;
+        width: $response-stopper-bigger-width;
+        min-height: $response-stopper-bigger-height;
+        padding: $assist-stop-padding-bigger;
+        box-sizing: border-box;
+        line-height: $response-stopper-bigger-line-height;
+        font-weight: $response-stopper-bigger-font-weight;
+        font-size: $response-stopper-bigger-font-size;
+      }
+      &:not(.e-footer-template) {
+        .e-assist-send {
+          font-size: $send-icon-size-bigger;
+        }
+        .e-assist-clear-icon:not(.e-assist-clear-icon-hide) {
+          font-size: $clear-icon-size-bigger;
+        }
+        &.e-toolbar-bottom .e-textarea-icons-wrapper {
+          .e-footer-icons-wrapper {
+            padding: $assist-multirow-footer-icons-padding-bigger;
+          }
+        }
+      }
+      .e-footer-icons-wrapper {
+        gap: $assist-footer-icons-gap-bigger;
+        padding: $assist-footer-icons-padding-bigger;
+        .e-toolbar {
+          height: $assist-footer-tbar-min-height-bigger;
+          min-height: $assist-footer-tbar-min-height-bigger;
+          background: $assist-view-bg-color;
+          border: none;
+          box-shadow: none;
+          .e-tbar-btn {
+            min-height: $assist-footer-tbar-min-height-bigger;
+            min-width: $assist-footer-tbar-min-height-bigger;
+            max-width: $assist-footer-tbar-min-height-bigger;
+          }
+          .e-tbar-btn:has(.e-assist-stop) {
+            max-width: $assist-footer-tbar-min-height-bigger;
+            .e-btn-icon {
+              min-width: $assist-footer-tbar-min-height-bigger;
+            }
+          }
+          .e-toolbar-item {
+            min-height: unset;
+            min-width: unset;
+            max-height: $assist-footer-tbar-min-height-bigger;
+            .e-assistview-speech-to-text.e-tbar-btn.e-speech-to-text{
+              border: none;
+              box-shadow: none;
+              width: auto;
+              height: auto;
+            }
+            .e-assistview-speech-to-text.e-btn.e-speech-to-text {
+              min-height: $assist-footer-tbar-min-height-bigger;
+              min-width: $assist-footer-tbar-min-height-bigger;
+            }
+          }
+          .e-toolbar-right .e-toolbar-item:last-child {
+            margin-right: 0;
+          }
+        }
+        .e-toolbar-items {
+          background: $assist-view-bg-color;
+          border: none;
+          box-shadow: none;
+        }
+        .e-assist-attachment-icon {
+          font-size: $assist-attachment-icon-font-size-bigger;
+        }
+      }
+      .e-assist-textarea {
+        min-height: $assist-textarea-min-height-bigger;
+        line-height: $assist-textarea-line-height-bigger;
+        padding: $assist-textarea-padding-bigger;
+        font-size: $bigger-assist-textarea-font-size;
+      }
+    }
+    
+    &.e-rtl {
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: $bigger-rtl-btn-icon-padding;
+          }
+        }
+      }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-bigger-list-margin-rtl;
+        }
+      }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: $bigger-rtl-loading-footer-padding;
+      }
+      .e-footer {
+        .e-footer-icons-wrapper {
+          padding: $assist-footer-icons-rtl-padding-bigger;
+          padding-right: $bigger-footer-icons-wrapper-right;
+        }
+      }
+    }
+
+    // Attachment support related styles
+    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
+      border-radius: $bigger-prompt-uploded-file-border-radius;
+      padding: $bigger-prompt-uploded-file-padding;
+      gap: $prompt-uploaded-files-gap-bigger;
+    }
+
+    .e-footer .e-assist-drop-area:has(.e-assist-uploaded-file-item) {
+      margin: $bigger-prompt-files-container-margin;
+    }
+
+    .e-footer .e-assist-drop-area {
+      .e-assist-uploaded-file-item {
+        margin: $bigger-prompt-files-margin;
+      }
+    }
+
+    .e-footer .e-assist-drop-area,
+    .e-prompt-content .e-prompt-uploaded-files {
+      .e-assist-uploaded-file-item {
+        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
+          padding-right: $bigger-assist-file-details-right;
+        }
+      }
+
+      .e-assist-file-details {
+        padding: $bigger-attached-file-details-padding;
+      }
+
+      .e-assist-clear-icon {
+        padding: $bigger-attached-file-clear-icon-padding;
+      }
+    }
+
+    .e-view-content {
+      .e-upload-failure-alert {
+        padding: $bigger-file-failure-padding;
+        border-radius: $bigger-file-failure-border-radius;
+        .e-assist-clear-icon {
+          font-size: $bigger-file-failure-close-icon-font-size;
+          line-height: $bigger-file-failure-close-icon-line-height;
+        }
+        .e-failure-message {
+          font-size: $bigger-file-failure-msg-font-size;
+          line-height: $bigger-file-failure-msg-line-height;
+        }
+        .e-assist-circle-close {
+          font-size: $bigger-file-failure-circle-close-icon-font-size;
+          margin-right: $bigger-file-failure-circle-close-icon-margin;
+        }
+      }
+    }
+    .e-response-navigation-container {
+      .e-assist-next,
+      .e-assist-previous {
+        width: $assist-footer-tbar-min-height-bigger;
+        height: $assist-footer-tbar-min-height-bigger;
+        padding: 0;
+        line-height: 0;
+      }
+    }
+    //thinking styles
+    .e-aiassist-thinking-toggle {
+      font-size: 14px;
+      line-height: 20px;
+      .e-toggle-icon {
+        line-height: 20px;
+        font-size: 14px;
+      }
+    }
+
+    .e-aiassist-thinking-toggle .e-active-spinner,
+    .e-aiassist-thinking-timeline .e-thinking-timeline-item-container .indicator.e-stage-spinner {
+      svg {
+        padding: 2px;
+        width: 20px !important; /* stylelint-disable-line declaration-no-important */
+        height: 20px !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
+    .e-thinking-title {
+      font-size: 16px;
+    }
+
+    .e-thinking-description {
+      font-size: 14px;
+    }
+
+    .e-inline-context-item {
+      .e-context-icon {
+        font-size: $aiassist-thinking-context-icon-font-size-bigger;
+        line-height: $aiassist-thinking-context-icon-line-height-bigger;
+      }
+
+      .e-context-badge {
+        font-size: $aiassist-thinking-context-badge-font-size-bigger;
+        line-height: $aiassist-thinking-context-badge-line-height-bigger;
+      }
+    }
+
+    .e-single-stage-container {
+      font-size: 14px;
+      .e-stage-icon {
+        font-size: $aiassist-thinking-stage-icon-font-size-bigger;
+        line-height: $aiassist-thinking-stage-icon-line-height-bigger;
+      }
+
+      &.e-timeline-expanded {
+        margin-top: 8px;
+      }
+    }
+
+    .e-aiassist-thinking-timeline {
+      .e-thinking-timeline-item-container {
+        .indicator {
+          min-width: $thinking-timeline-progress-indicator-min-width-bigger;
+          min-height: $thinking-timeline-progress-indicator-min-height-bigger;
+          font-size: $thinking-timeline-progress-indicator-font-size-bigger;
+        }
+        .progress-line::after {
+          top: $thinking-timeline-progress-indicator-min-height-bigger;
+          height: $aiassist-thinking-progress-line-height-bigger;
+        }
+      }
+    }
+  }
+}

package/styles/ai-assistview/_fabric-dark-definition.scss

@@ -0,0 +1,311 @@
+@use '../base/common/base-variables' as *;
+
+$ai-assist-scrollbar-width: 6px !default;
+$suggesstions-list-border-radius: 0 !default;
+$suggesstions-font-weight: 400 !default;
+$suggesstions-list-padding: 8px 12px !default;
+$suggesstions-list-margin: 0 0 12px 12px !default;
+$suggesstions-list-margin-rtl: 0 12px 12px 0 !default;
+$suggesstions-header-font-weight: 600 !default;
+$prompt-text-padding: 6px 8px !default;
+$prompt-text-min-height: 34px !default;
+$response-stopper-font-weight: 600 !default;
+$response-stopper-font-size: 14px !default;
+$response-stopper-line-height: 18px !default;
+$response-stopper-height: 32px !default;
+$aiassist-header-height: 46px !default;
+$aiassist-icon-height: 30px !default;
+$aiassist-icon-width: 30px !default;
+$send-icon-size: 14px !default;
+$clear-icon-size: 12px !default;
+$aiassist-bigger-header-height: 50px !default;
+$aiassist-bigger-icon-height: 40px !default;
+$aiassist-bigger-icon-width: 40px !default;
+$send-icon-size-bigger: 16px !default;
+$clear-icon-size-bigger: 12px !default;
+$response-stopper-bigger-height: 52px !default;
+$response-stopper-bigger-line-height: 24px !default;
+$response-stopper-bigger-font-weight: 600 !default;
+$response-stopper-bigger-font-size: 16px !default;
+$prompt-text-bigger-padding: 8px 12px !default;
+$suggesstions-header-bigger-font-weight: 600 !default;
+$suggesstions-bigger-list-padding: 8px 16px !default;
+$suggesstions-bigger-list-margin: 0 0 16px 16px !default;
+$suggesstions-bigger-list-margin-rtl: 0 16px 16px 0 !default;
+$suggesstions-bigger-font-weight: 400 !default;
+$prompt-text-border-radius: 0 !default;
+$assist-footer-icons-gap: 8px !default;
+$assist-footer-icons-padding: 4px 8px 4px 0 !default;
+$assist-footer-icons-rtl-padding: 4px 0 4px 8px !default;
+$assist-textarea-min-height: 40px !default;
+$assist-textarea-line-height: 22px !default;
+$assist-textarea-padding: 9px 10px !default;
+$assist-footer-border-radius: 0 !default;
+$assist-footer-icons-gap-bigger: 8px !default;
+$assist-footer-icons-padding-bigger: 4px 8px 4px 0 !default;
+$assist-footer-icons-rtl-padding-bigger: 4px 0 4px 8px !default;
+$assist-textarea-min-height-bigger: 48px !default;
+$assist-textarea-line-height-bigger: 24px !default;
+$assist-textarea-padding-bigger: 12px !default;
+$assist-focused-border-width: 1px !default;
+
+$assist-footer-border-color: $neutral-tertiary !default;
+$assist-footer-border-btm-color: $neutral-tertiary !default;
+$assist-footer-wave-color: unset !default;
+$assist-placeholder-color: $neutral-tertiary !default;
+$assist-footer-focus-bdr-color: $theme-primary !default;
+$assist-footer-border-shadow: unset !default;
+$header-text-color: $neutral-light-font !default;
+$header-active-text-color: $neutral-light-font !default;
+$response-text-color: $neutral-light-font !default;
+$scrollbar-color: $neutral-tertiary-alt !default;
+$suggested-content-bg-color: $neutral-lighter-alt !default;
+$suggested-content-text-color: $neutral-light-font !default;
+$suggesstions-header-color: $neutral-light-font !default;
+$icon-border-color: $neutral-white !default;
+$user-logo-color: $theme-dark-font !default;
+$user-logo-bg-color: $neutral-quintenary !default;
+$assist-header-border-bottom-color: $theme-primary !default;
+$assist-view-bg-color: $neutral-white !default;
+$assist-view-border-color: $neutral-quintenaryalt !default;
+$response-stopper-border-color: $theme-lighter !default;
+$response-stopper-item-color: $theme-primary !default;
+$response-stopper-bg-color: $theme-lighter !default;
+$suggestion-li-border-color: $neutral-secondary !default;
+$response-stopper-box-shadow: 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 4px -1px rgba(0, 0, 0, .2) !default;
+$suggestion-li-box-shadow: unset !default;
+$rating-selected-bg-color: $neutral-primary !default;
+$send-icon-color: $neutral-light-font !default;
+$send-icon-disabled-color: $neutral-tertiary !default;
+$prompt-text-border-color: $neutral-white !default;
+$tbar-header-btn-focus-box-shadow: none !default;
+$tbar-header-hover-bg-color: $neutral-light !default;
+
+// Attachment support related styles
+$assist-attachment-icon-font-size: $send-icon-size !default;
+$assist-attachment-icon-font-size-bigger: $send-icon-size-bigger !default;
+
+$file-progress-bar-success-color: $theme-primary !default;
+$file-progress-bar-failure-color: $error-font !default;
+$file-progress-bar-bg-color: $neutral-secondary-alt !default;
+
+$file-failure-font-color: $msg-danger-color-alt1 !default;
+$file-failure-bg-color: rgba(255, 255, 255, 0) !default;
+$file-failure-border: 1px solid $msg-danger-border-color-alt1 !default;
+$file-failure-padding: 7px 12px !default;
+$file-failure-border-radius: 4px !default;
+$file-failure-msg-font-size: 12px !default;
+$file-failure-msg-line-height: 18px !default;
+$file-failure-close-icon-font-size: 12px !default;
+$file-failure-close-icon-line-height: 100% !default;
+$file-failure-circle-close-icon-color: $msg-danger-icon-color-alt1 !default;
+$file-failure-circle-close-icon-font-size: 14px !default;
+$file-failure-circle-close-icon-margin: 8px !default;
+
+$prompt-uploded-file-padding: 6px 8px !default;
+$prompt-uploded-file-border-radius: unset !default;
+$prompt-uploded-file-bg-color: $neutral-lighter-alt !default;
+$attached-file-border-color: $neutral-quintenaryalt !default;
+$attached-file-bg-color: rgba(255, 255, 255, 0) !default;
+$attached-file-details-padding: 3px 0 2px 2px !default;
+$attached-file-text-font-size: 10px !default;
+$attached-file-text-line-height: 15px !default;
+$attached-file-size-color: $neutral-tertiary !default;
+$attached-file-text-font-weight: 400 !default;
+$attached-file-clear-icon-padding: 11px 12px 11px 2px !default;
+$prompt-files-container-margin: 4px 6px !default;
+$prompt-files-margin: 1px 4px 0 !default;
+
+$bigger-prompt-uploded-file-border-radius: unset !default;
+$bigger-prompt-uploded-file-padding: 8px 12px !default;
+$bigger-prompt-files-container-margin: 8px !default;
+$bigger-prompt-files-margin: 0 4px !default;
+$bigger-attached-file-details-padding: 3px 0 2px 2px !default;
+$bigger-attached-file-clear-icon-padding: 11px 12px 11px 2px !default;
+$bigger-file-failure-padding: 8px 16px !default;
+$bigger-file-failure-border-radius: 4px !default;
+$bigger-file-failure-close-icon-font-size: 14px !default;
+$bigger-file-failure-close-icon-line-height: 100% !default;
+$bigger-file-failure-msg-font-size: 16px !default;
+$bigger-file-failure-msg-line-height: 24px !default;
+$bigger-file-failure-circle-close-icon-font-size: 16px !default;
+$bigger-file-failure-circle-close-icon-margin: 12px !default;
+
+$ai-assist-border: 1px !default;
+$view-header-border-bottom: 1px !default;
+$toolbar-item-border-radius: 4px !default;
+$custom-view-header-padding: 0 !default;
+$tbar-btn-padding: 0 !default;
+$assist-btn-icon-padding: 4px 4px 4px 2px !default;
+$upload-failure-alert-bottom: 8px !default;
+$prompt-toolbar-margin-left: 0 !default;
+$custom-view-header-margin-left: 12px !default;
+$custom-view-header-margin-right: 12px !default;
+$assist-view-header-margin-left: 0 !default;
+$toolbar-rtl-margin-left: 8px !default;
+$toolbar-rtl-margin-right: 0 !default;
+$toolbar-items-last-child-margin-left: 8px !default;
+$tbar-btn-text-padding: 6px 2px !default;
+$output-container-margin: 5px 0 !default;
+$prompt-icon-margin: 0 0 0 8px !default;
+$output-icon-margin: 0 4px 0 8px !default;
+$loading-footer-padding: 2px 0 0 6px !default;
+$content-container-margin-top: 16px !default;
+$content-container-font-size: 14px !default;
+$prompt-text-line-height: 20px !default;
+$prompt-container-gap: 2px !default;
+$prompt-container-margin-bottom: 5px !default;
+$suggestion-header-font-size: 14px !default;
+$suggestion-header-margin: 0 2px 8px 8px !default;
+$suggestion-item-template-padding: 0 !default;
+$suggestion-item-ul-padding: 0 !default;
+$suggestion-item-ul-margin: 0 !default;
+$suggestion-li-line-height: 20px !default;
+$content-body-line-height: 25px !default;
+$content-body-border-radius: 4px !default;
+$content-body-font-weight: 600 !default;
+$h4-h5-line-height: 28px !default;
+$h1-font-size: 32px !default;
+$h1-line-height: 40px !default;
+$h2-font-size: 28px !default;
+$h2-line-height: 36px !default;
+$h3-font-size: 24px !default;
+$h3-line-height: 32px !default;
+$h4-font-size: 22px !default;
+$h5-font-size: 20px !default;
+$h6-font-size: 16px !default;
+$h6-line-height: 20px !default;
+$content-body-li-line-height: 24.5px !default;
+$content-body-pre-padding: 12px 0 12px 12px !default;
+$content-body-tr-padding: 6px !default;
+$content-body-blockquote-padding-left: 7px !default;
+$content-body-svg-img-padding: 12px !default;
+$content-body-svg-img-border-radius: 4px !default;
+$content-body-code-border-radius: 4px !default;
+$content-body-code-padding: 0 4px !default;
+$webkit-scrollbar-border-radius: 10px !default;
+$footer-margin: 0 auto 24px !default;
+$assist-textarea-border-radius: 10px !default;
+$assist-textarea-font-size: 14px !default;
+$banner-view-margin-left: 10px !default;
+$stop-response-border-radius: 100px !default;
+$stop-response-border: 1px solid !default;
+$stop-response-margin-bottom: 16px !default;
+$custom-view-header-btn-icon-padding: 4px 2px 4px 4px !default;
+$rtl-suggestion-header-margin: 0 8px 8px 2px !default;
+$content-body-padding-left: unset !default;
+$content-body-border-left: unset !default;
+$content-body-padding-right: 7px !default;
+$rtl-loading-footer-padding: 2px 6px 0 0 !default;
+$rtl-prompt-icon-margin: 0 8px 0 0 !default;
+$rtl-output-icon-margin: 0 8px 0 4px !default;
+$rtl-footer-icons-wrapper-padding: unset !default;
+$uploaded-file-item-bottom: 4px !default;
+$uploaded-file-item-border-radius: 4px !default;
+$file-details-padding-right: 12px !default;
+$assist-clear-icon-border-radius: 6px !default;
+$assist-progress-bar-border-radius: 4px !default;
+$prompt-content-padding-right: 8px !default;
+$rtl-prompt-content-padding: 0 0 0 8px !default;
+$view-container-margin: 0 auto 10px auto !default;
+$prompt-output-icon-border-radius: 50% !default;
+
+$bigger-view-header-padding: 0 !default;
+$bigger-tbar-btn-padding: 0 !default;
+$bigger-btn-icon-padding: 4px 4px 4px 2px !default;
+$bigger-loading-footer-padding: 6px 0 0 6px !default;
+$bigger-prompt-text-line-height: 22px !default;
+$bigger-content-container-font-size: 16px !default;
+$bigger-suggestion-header-font-size: 16px !default;
+$bigger-suggestion-header-margin-bottom: 15px !default;
+$bigger-suggestion-item-padding: 0 !default;
+$bigger-suggestion-li-line-height: 22px !default;
+$bigger-assist-textarea-font-size: 16px !default;
+$bigger-stop-response-margin-bottom: 20px !default;
+$bigger-rtl-btn-icon-padding: 4px 2px 4px 4px !default;
+$bigger-rtl-loading-footer-padding: 6px 6px 0 0 !default;
+$bigger-footer-icons-wrapper-right: unset !default;
+$bigger-assist-file-details-right: 15px !default;
+
+$suggestion-li-border: 1px !default;
+$prompt-text-border: 1px !default;
+$assist-view-border: 1px !default;
+$assist-blockquote-border: 4px !default;
+$assist-footer-border: 1px !default;
+$suggested-content-border: 4px !default;
+$attached-file-border: 1px !default;
+$assist-view-toolbar-border: unset !default;
+$prompt-output-icon-border: 1px !default;
+
+$toolbar-item-height: 3px !default;
+$prompt-text-height: fit-content !default;
+$content-body-svg-img-height: inherit !default;
+$assistview-content-section-height: 100% !default;
+$assist-textarea-height: 100% !default;
+$assist-progress-fill-height: 3px !default;
+$toolbar-left-height: calc($aiassist-header-height - 1px) !default;
+$view-content-height: calc(100% - $aiassist-header-height) !default;
+$toolbar-left-bigger-height: calc($aiassist-bigger-header-height - 1px) !default;
+$view-content-bigger-height: calc(100% - $aiassist-bigger-header-height) !default;
+$ai-assist-scrollbar-height: 6px !default;
+$bigger-suggestion-li-height: 40px !default;
+$suggestion-li-height: 36px !default;
+$prompt-uploaded-files-gap: 8px 6px !default;
+$assist-drop-area-gap: 6px !default;
+$assist-multirow-footer-icons-padding: 4px 8px !default;
+$assist-multirow-footer-icons-padding-bigger: 4px !default;
+$prompt-uploaded-files-gap-bigger: 8px 6px !default;
+$response-stopper-width: 32px !default;
+$response-stopper-bigger-width: 40px !default;
+$assist-stop-padding: 6px !default;
+$assist-stop-padding-bigger: 11px !default;
+$assist-footer-tbar-min-height: 32px !default;
+$assist-footer-tbar-min-height-bigger: 40px !default;
+$assist-footer-stt-btn-border-radius: 0 !default;
+
+// Thinking support related styles
+
+$thinking-single-stage-container-border-color: $neutral-secondary-alt !default;
+$thinking-content-color: $neutral-secondary !default;
+$thinking-inline-context-color: $neutral-secondary !default;
+$thinking-timeline-progressline-color: $neutral-tertiary-alt !default;
+$thinking-timeline-progress-indicator-min-width: 24px !default;
+$thinking-timeline-progress-indicator-min-height: 24px !default;
+$thinking-timeline-progress-indicator-font-size: 12px !default;
+$thinking-timeline-progress-indicator-min-width-bigger: 36px !default;
+$thinking-timeline-progress-indicator-min-height-bigger: 36px !default;
+$thinking-timeline-progress-indicator-font-size-bigger: 16px !default;
+$aiassist-thinking-progress-line-height: 20.5px !default;
+$aiassist-thinking-progress-line-height-bigger: 16px !default;
+
+$aiassist-thinking-toggle-font-size: 12px !default;
+$aiassist-thinking-toggle-line-height: 18px !default;
+$aiassist-thinking-toggle-icon-font-size: 10px !default;
+$aiassist-thinking-toggle-icon-line-height: 100% !default;
+$aiassist-thinking-context-icon-font-size: 14px !default;
+$aiassist-thinking-context-icon-line-height: 100% !default;
+$aiassist-thinking-context-badge-font-size: 14px !default;
+$aiassist-thinking-context-badge-line-height: 100% !default;
+$aiassist-thinking-stage-icon-font-size: 16px !default;
+$aiassist-thinking-stage-icon-line-height: 100% !default;
+$aiassist-thinking-toggle-font-size-bigger: 14px !default;
+$aiassist-thinking-toggle-line-height-bigger: 22px !default;
+$aiassist-thinking-toggle-icon-font-size-bigger: 16px !default;
+$aiassist-thinking-toggle-icon-line-height-bigger: 100% !default;
+$aiassist-thinking-context-icon-font-size-bigger: 16px !default;
+$aiassist-thinking-context-icon-line-height-bigger: 100% !default;
+$aiassist-thinking-context-badge-font-size-bigger: 16px !default;
+$aiassist-thinking-context-badge-line-height-bigger: 100% !default;
+$aiassist-thinking-stage-icon-font-size-bigger: 16px !default;
+$aiassist-thinking-stage-icon-line-height-bigger: 100% !default;
+$aiassist-thinking-toggle-color: $neutral-secondary !default;
+
+$aiassist-regenerate-tbar-focus-bg: $neutral-light !default;
+$aiassist-regenerate-tbar-btn-border-radius: 0 !default;
+$aiassist-regenerate-tbar-btn-focus-border-color: $hover-border-color !default;
+$aiassist-regenerate-tbar-border-nav-type: solid !default;
+$aiassist-regenerate-tbar-btn-hover-border-size: 0 !default;
+$aiassist-regenerate-tbar-ext-btn-focus-box-shadow: none !default;
+$aiassist-regenerate-tbar-btn-icons-focus-color: $neutral-light-font !default;
+$aiassist-regenerate-tbar-hover-bg: $neutral-light !default;
+$aiassist-regenerate-tbar-hover-border-color: $neutral-light !default;