More theme stuff

src-web/components/core/Editor/Editor.css

@@ -56,7 +56,7 @@
       }
     }
 
-    .placeholder-widget {
+    .placeholder {
       /* Colors */
       @apply bg-background text-fg-subtle border-background-highlight-secondary;
       @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
@@ -150,7 +150,7 @@
 
 .cm-editor .cm-foldPlaceholder {
   @apply px-2 border border-fg-subtler bg-background-highlight;
-  @apply hover:text-fg hover:border-fg-subtle;
+  @apply hover:text-fg hover:border-fg-subtle text-fg;
   @apply cursor-default !important;
 }
 

src-web/components/core/Editor/twig/placeholder.ts

@@ -11,10 +11,8 @@ class PlaceholderWidget extends WidgetType {
   }
   toDOM() {
     const elt = document.createElement('span');
-    elt.className = `x-theme-placeholder-widget placeholder-widget ${
-      this.isExistingVariable
-        ? 'x-theme-placeholder-widget--primary'
-        : 'x-theme-placeholder-widget--danger'
+    elt.className = `x-theme-placeholder placeholder ${
+      this.isExistingVariable ? 'x-theme-placeholder--primary' : 'x-theme-placeholder--danger'
     }`;
     elt.title = !this.isExistingVariable ? 'Variable not found in active environment' : '';
     elt.textContent = this.name;

src-web/components/core/Tabs/Tabs.tsx

@@ -74,6 +74,7 @@ export function Tabs({
         aria-label={label}
         className={classNames(
           tabListClassName,
+          addBorders && '!-ml-1 h-md mt-2',
           'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
           // Give space for button focus states within overflow boundary.
           '-ml-5 pl-3 pr-1 py-1',
@@ -109,7 +110,6 @@ export function Tabs({
                     {option && 'shortLabel' in option
                       ? option.shortLabel
                       : option?.label ?? 'Unknown'}
-                    <TabAccent enabled isActive={isActive} />
                     <Icon
                       size="sm"
                       icon="chevronDown"
@@ -127,7 +127,6 @@ export function Tabs({
                   className={btnClassName}
                 >
                   {t.label}
-                  <TabAccent enabled isActive={isActive} />
                 </button>
               );
             }
@@ -160,14 +159,3 @@ export const TabContent = memo(function TabContent({
     </div>
   );
 });
-
-function TabAccent({ isActive, enabled }: { isActive: boolean; enabled: boolean }) {
-  return (
-    <div
-      className={classNames(
-        'w-full opacity-40 border-b-2',
-        isActive && enabled ? 'border-b-background-highlight' : 'border-b-transparent',
-      )}
-    />
-  );
-}