Add green accent color for templates and update Ask template group to use it

Author: robertpiosik

apps/editor/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -270,7 +270,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
                     key: 'templatesForAskAboutFiles',
                     label: 'Ask',
                     icon: 'chat-sparkle',
-                    accent_color: 'orange',
+                    accent_color: 'green',
                     items: props.templates.templatesForAskAboutFiles || []
                   }
                 ]}

packages/ui/src/components/editor/settings/Templates/Templates.module.scss

@@ -46,6 +46,20 @@
     }
   }
 
+  &--accent-green {
+    border-color: var(--cwc-bg-green);
+    .group__header {
+      background-color: var(--cwc-bg-green);
+      .group__icon,
+      .group__label {
+        color: var(--cwc-text-color-green);
+      }
+      &:hover {
+        background-color: var(--cwc-bg-green);
+      }
+    }
+  }
+
   &--accent-red {
     border-color: var(--cwc-bg-red);
     .group__header {

packages/ui/src/components/editor/settings/Templates/Templates.tsx

@@ -15,7 +15,7 @@ export namespace Templates {
       key: string
       label: string
       icon?: string
-      accent_color?: 'blue' | 'orange' | 'red'
+      accent_color?: 'blue' | 'orange' | 'red' | 'green'
       items: Template[]
     }[]
     on_reorder: (key: string, templates: Template[]) => void

packages/ui/src/styles/foundation/_colors.scss

@@ -23,7 +23,7 @@
   );
   --cwc-bg-tertiary: color-mix(
     in srgb,
-    var(--vscode-foreground) 8%,
+    var(--vscode-foreground) 7%,
     transparent
   );
   --cwc-border-color: color-mix(