Theme system refactor (#31)

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

@@ -5,7 +5,9 @@
     @apply w-full block text-base;
 
     .cm-cursor {
-      @apply border-gray-800 !important;
+      @apply border-fg !important;
+      /* Widen the cursor */
+      @apply border-l-2;
     }
 
     &.cm-focused {
@@ -17,7 +19,7 @@
     }
 
     .cm-line {
-      @apply text-gray-800 pl-1 pr-1.5;
+      @apply text-fg pl-1 pr-1.5;
     }
 
     .cm-placeholder {
@@ -47,7 +49,7 @@
     /* Style gutters */
 
     .cm-gutters {
-      @apply border-0 text-gray-500/50;
+      @apply border-0 text-fg-subtler bg-transparent;
 
       .cm-gutterElement {
         @apply cursor-default;
@@ -55,19 +57,13 @@
     }
 
     .placeholder-widget {
-      @apply text-xs text-violet-700 dark:text-violet-700 px-1 mx-[0.5px] rounded cursor-default dark:shadow;
+      /* Colors */
+      @apply bg-background text-fg-subtle border-background-highlight-secondary;
+      @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
 
-      /* NOTE: Background and border are translucent so we can see text selection through it */
-      @apply bg-violet-500/20 border border-violet-500/20 border-opacity-40;
-
-      /* Bring above on hover */
-      @apply hover:z-10 relative;
+      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;
 
       -webkit-text-security: none;
-
-      &.placeholder-widget-error {
-        @apply text-red-700 dark:text-red-800 bg-red-300/30 border-red-300/80 border-opacity-40 hover:border-red-300 hover:bg-red-300/40;
-      }
     }
 
     .hyperlink-widget {
@@ -137,7 +133,7 @@
 
 .cm-editor .fold-gutter-icon::after {
   @apply block w-1.5 h-1.5 border-transparent -rotate-45
-    border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
+  border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
 }
 
 .cm-editor .fold-gutter-icon[data-open] {
@@ -149,12 +145,12 @@
 }
 
 .cm-editor .fold-gutter-icon:hover {
-  @apply text-gray-900 bg-gray-300/50;
+  @apply text-fg bg-background-highlight;
 }
 
 .cm-editor .cm-foldPlaceholder {
-  @apply px-2 border border-gray-400/50 bg-gray-300/50;
-  @apply hover:text-gray-800 hover:border-gray-400;
+  @apply px-2 border border-fg-subtler bg-background-highlight;
+  @apply hover:text-fg hover:border-fg-subtle;
   @apply cursor-default !important;
 }
 
@@ -164,11 +160,13 @@
 
 .cm-wrapper:not(.cm-readonly) .cm-editor {
   &.cm-focused .cm-activeLineGutter {
-    @apply text-gray-600;
+    @apply text-fg-subtle;
   }
+}
 
+.cm-wrapper.cm-readonly .cm-editor {
   .cm-cursor {
-    @apply border-l-2 border-gray-800;
+    @apply border-fg-danger !important;
   }
 }
 
@@ -187,18 +185,18 @@
 }
 
 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
+  @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-xs;
   @apply px-2 py-1;
 
   a {
-    @apply text-gray-800;
+    @apply text-fg;
 
     &:hover {
       @apply underline;
     }
 
     &::after {
-      @apply text-gray-800 bg-gray-800 h-3 w-3 ml-1;
+      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
       content: '';
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
       -webkit-mask-size: contain;
@@ -210,7 +208,7 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
+  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-xs;
 
   .cm-completionIcon {
     @apply italic font-mono;
@@ -286,11 +284,11 @@
     }
 
     & > ul > li {
-      @apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
+      @apply cursor-default px-2 rounded-sm text-fg-subtle h-7 flex items-center;
     }
 
     & > ul > li[aria-selected] {
-      @apply bg-highlight text-gray-900;
+      @apply bg-background-highlight-secondary text-fg;
     }
 
     .cm-completionIcon {
@@ -298,7 +296,7 @@
     }
 
     .cm-completionLabel {
-      @apply text-gray-700;
+      @apply text-fg-subtle;
     }
 
     .cm-completionDetail {
@@ -308,7 +306,7 @@
 }
 
 .cm-editor .cm-panels {
-  @apply bg-gray-100 backdrop-blur-sm p-1 mb-1 text-gray-800 z-20 rounded-md;
+  @apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;
 
   input,
   button {
@@ -316,19 +314,21 @@
   }
 
   button {
-    @apply appearance-none bg-none bg-gray-200 hocus:bg-gray-300 hocus:text-gray-950 border-0 text-gray-800 cursor-default;
+    @apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
+    @apply appearance-none bg-none cursor-default;
   }
 
   button[name='close'] {
-    @apply text-gray-600 hocus:text-gray-900 px-2 -mr-1.5 !important;
+    @apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
   }
 
   input {
-    @apply bg-gray-50 border border-gray-500/50 focus:border-focus outline-none;
+    @apply bg-background border-background-highlight focus:border-border-focus;
+    @apply border outline-none cursor-text;
   }
 
   label {
-    @apply focus-within:text-gray-950;
+    @apply focus-within:text-fg;
   }
 
   /* Hide the "All" button */

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

@@ -206,7 +206,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
 
         view = new EditorView({ state, parent: container });
         cm.current = { view, languageCompartment };
-        syncGutterBg({ parent: container, bgClassList });
         if (autoFocus) {
           view.focus();
         }
@@ -270,7 +269,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       ref={initEditorRef}
       className={classNames(
         className,
-        'cm-wrapper text-base bg-gray-50',
+        'cm-wrapper text-base',
         type === 'password' && 'cm-obscure-text',
         heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
         singleLine ? 'cm-singleline' : 'cm-multiline',
@@ -361,19 +360,6 @@ function getExtensions({
   ];
 }
 
-const syncGutterBg = ({
-  parent,
-  bgClassList,
-}: {
-  parent: HTMLDivElement;
-  bgClassList: string[];
-}) => {
-  const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
-  if (gutterEl) {
-    gutterEl?.classList.add(...bgClassList);
-  }
-};
-
 const placeholderElFromText = (text: string) => {
   const el = document.createElement('div');
   el.innerHTML = text.replace('\n', '<br/>');

src-web/components/core/Editor/extensions.ts

@@ -42,23 +42,23 @@ import { url } from './url/extension';
 export const myHighlightStyle = HighlightStyle.define([
   {
     tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: 'hsl(var(--color-gray-600))',
+    color: 'var(--fg-subtler)',
     fontStyle: 'italic',
   },
   {
     tag: [t.paren],
-    color: 'hsl(var(--color-gray-900))',
+    color: 'var(--fg)',
   },
   {
     tag: [t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: 'hsl(var(--color-blue-600))',
+    color: 'var(--fg-info)',
   },
-  { tag: [t.variableName], color: 'hsl(var(--color-green-600))' },
-  { tag: [t.bool], color: 'hsl(var(--color-pink-600))' },
-  { tag: [t.attributeName, t.propertyName], color: 'hsl(var(--color-violet-600))' },
-  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-600))' },
-  { tag: [t.string], color: 'hsl(var(--color-yellow-600))' },
-  { tag: [t.keyword, t.meta, t.operator], color: 'hsl(var(--color-red-600))' },
+  { tag: [t.variableName], color: 'var(--fg-success)' },
+  { tag: [t.bool], color: 'var(--fg-info)' }, // TODO: Should be pink
+  { tag: [t.attributeName, t.propertyName], color: 'var(--fg-primary)' },
+  { tag: [t.attributeValue], color: 'var(--fg-warning)' },
+  { tag: [t.string], color: 'var(--fg-warning)' }, // TODO: Should be yellow
+  { tag: [t.keyword, t.meta, t.operator], color: 'var(--fg-danger)' },
 ]);
 
 const myTheme = EditorView.theme({}, { dark: true });
@@ -123,6 +123,7 @@ export const baseExtensions = [
   dropCursor(),
   drawSelection(),
   autocompletion({
+    tooltipClass: () => 'x-theme-dialog',
     closeOnBlur: true, // Set to `false` for debugging in devtools without closing it
     compareCompletions: (a, b) => {
       // Don't sort completions at all, only on boost

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

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