💄 Add styles for external widgets on workspace (#6509)

* 💄 Add styles for Inkeep Chat at workspace

* 📎 Styles review

CHANGES.md

@@ -79,6 +79,7 @@ A non exhaustive list of changes:
 - Create `input*` wrapper component, and `label*`, `input-field*` and `hint-message*` components [Taiga #10713](https://tree.taiga.io/project/penpot/us/10713)
 - Deselect layers (and path nodes) with Ctrl+Shift+Drag [Github #2509](https://github.com/penpot/penpot/issues/2509)
 - Copy to SVG from contextual menu [Github #838](https://github.com/penpot/penpot/issues/838)
+- Add styles for Inkeep Chat at workspace [Taiga #10708](https://tree.taiga.io/project/penpot/us/10708)
 
 ### :bug: Bugs fixed
 

frontend/src/app/main/ui/workspace/palette.cljs

@@ -147,6 +147,7 @@
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
+           :id "palette-wrapper"
            :style  (calculate-palette-padding rulers?)
            :data-testid "palette"}
      (when-not workspace-read-only?

frontend/src/app/main/ui/workspace/palette.scss

@@ -4,6 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "../ds/spacing.scss" as *;
+@use "../ds/z-index.scss" as *;
+@use "../ds/_sizes.scss" as *;
+
 @import "refactor/common-refactor.scss";
 
 .palette-wrapper {
@@ -12,6 +16,12 @@
   left: 0;
   bottom: 0;
   padding-bottom: $s-4;
+
+  /** Aligns AI Chat button **/
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-s);
 }
 
 .palettes {
@@ -164,3 +174,27 @@
     padding-bottom: $s-8;
   }
 }
+
+/** AI Chat button styles **/
+.help-btn {
+  z-index: var(--z-index-panels);
+  flex-shrink: 0;
+  @extend .button-secondary;
+  inline-size: $sz-40;
+  block-size: $sz-40;
+  border-radius: $br-circle;
+  border: none;
+  &.selected {
+    @extend .button-icon-selected;
+  }
+  &:hover {
+    border: none;
+  }
+}
+
+.icon-help {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+  inline-size: var(--sp-xxl);
+  block-size: var(--sp-xxl);
+}