Use new theme vars (#63)

This PR swaps the theme to use the new stuff from the Theme Studio
2026-03-27 03:41:11 +01:00 · 2024-08-13 07:44:28 -07:00
parent ecc7192bde
commit c9b4e6181c
79 changed files with 1113 additions and 1004 deletions
--- a/src-web/components/core/Banner.tsx
+++ b/src-web/components/core/Banner.tsx
@@ -15,7 +15,7 @@ export function Banner({ children, className, color = 'secondary' }: Props) {
          className,
          `x-theme-banner--${color}`,
          'border border-dashed italic px-3 py-2 rounded select-auto cursor-text',
-          'border-background-highlight bg-background-highlight-secondary text-fg',
+          'border-border-subtle bg-surface-highlight text',
        )}
      >
        {children}
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -60,7 +60,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
    'x-theme-button',
    `x-theme-button--${variant}`,
    `x-theme-button--${variant}--${color}`,
-    'text-fg',
+    'text-text',
    'border', // They all have borders to ensure the same width
    'max-w-full min-w-0', // Help with truncation
    'hocus:opacity-100', // Force opacity for certain hover effects
@@ -77,24 +77,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button

    // Solids
    variant === 'solid' && 'border-transparent',
-    variant === 'solid' && color === 'custom' && 'ring-blue-400',
+    variant === 'solid' && color === 'custom' && 'ring-border-focus',
    variant === 'solid' &&
      color !== 'custom' &&
-      color !== 'default' &&
-      'bg-background enabled:hocus:bg-background-highlight ring-background-highlight-secondary',
-    variant === 'solid' &&
-      color === 'default' &&
-      'enabled:hocus:bg-background-highlight ring-fg-info',
+      'enabled:hocus:text-text enabled:hocus:bg-surface-highlight ring-border-subtle',
+    variant === 'solid' && color !== 'custom' && color !== 'default' && 'bg-surface',

    // Borders
    variant === 'border' && 'border',
    variant === 'border' &&
      color !== 'custom' &&
-      color !== 'default' &&
-      'border-fg-subtler text-fg-subtle enabled:hocus:border-fg-subtle enabled:hocus:bg-background-highlight enabled:hocus:text-fg ring-fg-subtler',
-    variant === 'border' &&
-      color === 'default' &&
-      'border-background-highlight enabled:hocus:border-fg-subtler enabled:hocus:bg-background-highlight-secondary',
+      'border-border-subtle text-text-subtle enabled:hocus:border-border ' +
+        'enabled:hocus:bg-surface-highlight enabled:hocus:text-text ring-border-subtler',
  );

  const buttonRef = useRef<HTMLButtonElement>(null);
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -27,13 +27,13 @@ export function Checkbox({
    <HStack
      as="label"
      space={2}
-      className={classNames(className, 'text-fg', disabled && 'opacity-disabled')}
+      className={classNames(className, 'text-text mr-auto', disabled && 'opacity-disabled')}
    >
      <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
        <input
          aria-hidden
          className={classNames(
-            'appearance-none w-4 h-4 flex-shrink-0 border border-background-highlight',
+            'appearance-none w-4 h-4 flex-shrink-0 border border-border',
            'rounded hocus:border-border-focus hocus:bg-focus/[5%] outline-none ring-0',
          )}
          type="checkbox"
--- a/src-web/components/core/CountBadge.tsx
+++ b/src-web/components/core/CountBadge.tsx
@@ -12,7 +12,7 @@ export function CountBadge({ count, className }: Props) {
      aria-hidden
      className={classNames(
        className,
-        'opacity-70 border border-background-highlight-secondary text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        'opacity-70 border border-border-subtle text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
      )}
    >
      {count}
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -67,9 +67,9 @@ export function Dialog({
              className,
              'grid grid-rows-[auto_auto_minmax(0,1fr)]',
              'grid-cols-1', // must be here for inline code blocks to correctly break words
-              'relative bg-background pointer-events-auto',
+              'relative bg-surface pointer-events-auto',
              'rounded-lg',
-              'border border-background-highlight-secondary shadow-lg shadow-[rgba(0,0,0,0.1)]',
+              'border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]',
              'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-4rem)]',
              size === 'sm' && 'w-[28rem] max-h-[80vh]',
              size === 'md' && 'w-[45rem] max-h-[80vh]',
@@ -87,7 +87,7 @@ export function Dialog({
            )}

            {description ? (
-              <p className="px-6 text-fg-subtle" id={descriptionId}>
+              <p className="px-6 text-text-subtle" id={descriptionId}>
                {description}
              </p>
            ) : (
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -433,7 +433,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                <span
                  aria-hidden
                  style={triangleStyles}
-                  className="bg-background absolute rotate-45 border-background-highlight-secondary border-t border-l"
+                  className="bg-surface absolute rotate-45 border-border-subtle border-t border-l"
                />
              )}
              {containerStyles && (
@@ -442,21 +442,21 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                  style={menuStyles}
                  className={classNames(
                    className,
-                    'h-auto bg-background rounded-md shadow-lg py-1.5 border',
-                    'border-background-highlight-secondary overflow-auto mb-1 mx-0.5',
+                    'h-auto bg-surface rounded-md shadow-lg py-1.5 border',
+                    'border-border-subtle overflow-auto mb-1 mx-0.5',
                  )}
                >
                  {filter && (
                    <HStack
                      space={2}
-                      className="pb-0.5 px-1.5 mb-2 text-sm border border-background-highlight-secondary mx-2 rounded font-mono h-xs"
+                      className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded font-mono h-xs"
                    >
-                      <Icon icon="search" size="xs" className="text-fg-subtle" />
-                      <div className="text-fg">{filter}</div>
+                      <Icon icon="search" size="xs" className="text-text-subtle" />
+                      <div className="text">{filter}</div>
                    </HStack>
                  )}
                  {filteredItems.length === 0 && (
-                    <span className="text-fg-subtler text-center px-2 py-1">No matches</span>
+                    <span className="text-text-subtlest text-center px-2 py-1">No matches</span>
                  )}
                  {filteredItems.map((item, i) => {
                    if (item.hidden) {
@@ -540,9 +540,9 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
        className,
        'h-xs', // More compact
        'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
-        'focus:bg-background-highlight focus:text-fg rounded',
-        item.variant === 'danger' && '!text-fg-danger',
-        item.variant === 'notify' && '!text-fg-primary',
+        'focus:bg-surface-highlight focus:text rounded',
+        item.variant === 'danger' && '!text-danger',
+        item.variant === 'notify' && '!text-primary',
      )}
      {...props}
    >
--- a/src-web/components/core/Editor/Editor.css
+++ b/src-web/components/core/Editor/Editor.css
@@ -5,7 +5,7 @@
    @apply w-full block text-base;

    .cm-cursor {
-      @apply border-fg !important;
+      @apply border-text !important;
      /* Widen the cursor */
      @apply border-l-[2px];
    }
@@ -20,11 +20,11 @@

    .cm-line {
      @apply w-full; /* Important! Ensure it spans the entire width */
-      @apply w-full text-fg pl-1 pr-1.5;
+      @apply w-full text-text pl-1 pr-1.5;
    }

    .cm-placeholder {
-      @apply text-placeholder;
+      @apply text-text-subtlest;
    }

    .cm-scroller {
@@ -50,7 +50,10 @@
    /* Style gutters */

    .cm-gutters {
-      @apply border-0 text-fg-subtler bg-transparent;
+      @apply border-0 text-text-subtlest bg-surface;
+      /* Not sure why, but there's a tiny gap left of the gutter that you can see text
+         through. Move left slightly to fix that. */
+      @apply -left-[1px];

      .cm-gutterElement {
        @apply cursor-default;
@@ -59,8 +62,8 @@

    .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;
+      @apply bg-surface text-text-subtle border-border-subtle;
+      @apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;

      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;

@@ -147,12 +150,12 @@
 }

 .cm-editor .fold-gutter-icon:hover {
-  @apply text-fg bg-background-highlight;
+  @apply text-text bg-surface-highlight;
 }

 .cm-editor .cm-foldPlaceholder {
-  @apply px-2 border border-fg-subtler bg-background-highlight;
-  @apply hover:text-fg hover:border-fg-subtle text-fg;
+  @apply px-2 border border-border-subtle bg-surface-highlight;
+  @apply hover:text-text hover:border-border-subtle text-text;
  @apply cursor-default !important;
 }

@@ -162,13 +165,13 @@

 .cm-wrapper:not(.cm-readonly) .cm-editor {
  &.cm-focused .cm-activeLineGutter {
-    @apply text-fg-subtle;
+    @apply text-text-subtle;
  }
 }

 .cm-wrapper.cm-readonly .cm-editor {
  .cm-cursor {
-    @apply border-fg-danger !important;
+    @apply border-danger !important;
  }
 }

@@ -187,18 +190,18 @@
 }

 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-background rounded text-fg-subtle border border-fg-subtler z-50 pointer-events-auto text-sm;
+  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
  @apply px-2 py-1;

  a {
-    @apply text-fg;
+    @apply text-text;

    &:hover {
      @apply underline;
    }

    &::after {
-      @apply text-fg bg-fg-secondary h-3 w-3 ml-1;
+      @apply text-text bg-surface-highlight 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 +213,7 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-background rounded text-fg-subtle border border-background-highlight z-50 pointer-events-auto text-editor;
+  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-editor;

  .cm-completionIcon {
    @apply italic font-mono;
@@ -288,11 +291,11 @@
    }

    & > ul > li {
-      @apply cursor-default px-2 h-[2em] rounded-sm text-fg flex items-center;
+      @apply cursor-default px-2 h-[2em] rounded-sm text-text flex items-center;
    }

    & > ul > li[aria-selected] {
-      @apply bg-background-highlight-secondary text-fg;
+      @apply bg-surface-highlight text-text;
    }

    .cm-completionIcon {
@@ -300,17 +303,17 @@
    }

    .cm-completionLabel {
-      @apply text-fg;
+      @apply text-text;
    }

    .cm-completionDetail {
-      @apply ml-auto pl-6 text-fg-subtle;
+      @apply ml-auto pl-6 text-text-subtle;
    }
  }
 }

 .cm-editor .cm-panels {
-  @apply bg-background-highlight-secondary backdrop-blur-sm p-1 mb-1 text-fg z-20 rounded-md;
+  @apply bg-surface-highlight backdrop-blur-sm p-1 mb-1 text-text z-20 rounded-md;

  input,
  button {
@@ -318,21 +321,21 @@
  }

  button {
-    @apply border-fg-subtler bg-background-highlight text-fg hover:border-fg-info;
+    @apply border-border-subtle bg-surface-highlight text-text hover:border-info;
    @apply appearance-none bg-none cursor-default;
  }

  button[name='close'] {
-    @apply text-fg-subtle hocus:text-fg px-2 -mr-1.5 !important;
+    @apply text-text-subtle hocus:text-text px-2 -mr-1.5 !important;
  }

  input {
-    @apply bg-background border-background-highlight focus:border-border-focus;
+    @apply bg-surface border-border-subtle focus:border-border-focus;
    @apply border outline-none cursor-text;
  }

  label {
-    @apply focus-within:text-fg;
+    @apply focus-within:text-text;
  }

  /* Hide the "All" button */
--- a/src-web/components/core/Editor/Editor.tsx
+++ b/src-web/components/core/Editor/Editor.tsx
@@ -162,12 +162,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
    view.dispatch({ effects: languageCompartment.reconfigure(ext) });
  }, [contentType, autocomplete, useTemplating, environment, workspace]);

-  const classList = className?.split(/\s+/) ?? [];
-  const bgClassList = classList
-    .filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
-    .map((c) => c.replace(/^bg-/, '!bg-')) // !important
-    .map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
-
  // Initialize the editor when ref mounts
  const initEditorRef = useCallback(
    (container: HTMLDivElement | null) => {
@@ -230,8 +224,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
  const decoratedActions = useMemo(() => {
    const results = [];
    const actionClassName = classNames(
-      'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
-      bgClassList,
+      'bg-surface transition-opacity opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow',
    );

    if (format) {
@@ -269,7 +262,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
      }),
    );
    return results;
-  }, [actions, bgClassList, format, onChange]);
+  }, [actions, format, onChange]);

  const cmContainer = (
    <div
@@ -290,7 +283,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
  }

  return (
-    <div className="group relative h-full w-full x-theme-editor bg-background">
+    <div className="group relative h-full w-full x-theme-editor bg-surface">
      {cmContainer}
      {decoratedActions && (
        <HStack
--- a/src-web/components/core/Editor/extensions.ts
+++ b/src-web/components/core/Editor/extensions.ts
@@ -43,23 +43,23 @@ import { url } from './url/extension';
 export const syntaxHighlightStyle = HighlightStyle.define([
  {
    tag: [t.documentMeta, t.blockComment, t.lineComment, t.docComment, t.comment],
-    color: 'var(--fg-subtler)',
+    color: 'var(--textSubtlest)',
    fontStyle: 'italic',
  },
  {
    tag: [t.paren, t.bracket, t.brace],
-    color: 'var(--fg)',
+    color: 'var(--textSubtle)',
  },
  {
    tag: [t.link, t.name, t.tagName, t.angleBracket, t.docString, t.number],
-    color: 'var(--fg-info)',
+    color: 'var(--info)',
  },
-  { tag: [t.variableName], color: 'var(--fg-success)' },
-  { tag: [t.bool], color: 'var(--fg-warning)' },
-  { tag: [t.attributeName, t.propertyName], color: 'var(--fg-primary)' },
-  { tag: [t.attributeValue], color: 'var(--fg-warning)' },
-  { tag: [t.string], color: 'var(--fg-notice)' },
-  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--fg-danger)' },
+  { tag: [t.variableName], color: 'var(--success)' },
+  { tag: [t.bool], color: 'var(--warning)' },
+  { tag: [t.attributeName, t.propertyName], color: 'var(--primary)' },
+  { tag: [t.attributeValue], color: 'var(--warning)' },
+  { tag: [t.string], color: 'var(--notice)' },
+  { tag: [t.atom, t.meta, t.operator, t.bool, t.null, t.keyword], color: 'var(--danger)' },
 ]);

 const syntaxTheme = EditorView.theme({}, { dark: true });
--- a/src-web/components/core/FormattedError.tsx
+++ b/src-web/components/core/FormattedError.tsx
@@ -9,8 +9,8 @@ export function FormattedError({ children }: Props) {
  return (
    <pre
      className={classNames(
-        'font-mono text-sm w-full select-auto cursor-text bg-background-highlight-secondary p-3 rounded',
-        'whitespace-pre-wrap border border-fg-danger border-dashed overflow-x-auto',
+        'font-mono text-sm w-full select-auto cursor-text bg-surface-highlight-secondary p-3 rounded',
+        'whitespace-pre-wrap border border-danger border-dashed overflow-x-auto',
      )}
    >
      {children}
--- a/src-web/components/core/Heading.tsx
+++ b/src-web/components/core/Heading.tsx
@@ -11,7 +11,7 @@ export function Heading({ className, size = 1, ...props }: Props) {
    <Component
      className={classNames(
        className,
-        'font-semibold text-fg',
+        'font-semibold text',
        size === 1 && 'text-2xl',
        size === 2 && 'text-xl',
        size === 3 && 'text-lg',
--- a/src-web/components/core/HotKey.tsx
+++ b/src-web/components/core/HotKey.tsx
@@ -22,7 +22,7 @@ export function HotKey({ action, className, variant }: Props) {
      className={classNames(
        className,
        variant === 'with-bg' && 'rounded border',
-        'text-fg-subtler',
+        'text-text-subtlest',
      )}
    >
      {labelParts.map((char, index) => (
--- a/src-web/components/core/HotKeyLabel.tsx
+++ b/src-web/components/core/HotKeyLabel.tsx
@@ -9,5 +9,7 @@ interface Props {

 export function HotKeyLabel({ action, className }: Props) {
  const label = useHotKeyLabel(action);
-  return <span className={classNames(className, 'text-fg-subtle whitespace-nowrap')}>{label}</span>;
+  return (
+    <span className={classNames(className, 'text-text-subtle whitespace-nowrap')}>{label}</span>
+  );
 }
--- a/src-web/components/core/HttpMethodTag.tsx
+++ b/src-web/components/core/HttpMethodTag.tsx
@@ -43,7 +43,7 @@ export function HttpMethodTag({ shortNames, request, className }: Props) {
    <span
      className={classNames(
        className,
-        'text-xs font-mono text-fg-subtle',
+        'text-xs font-mono text-text-subtle',
        'pt-[0.25em]', // Fix for monospace font not vertically centering
        shortNames && 'w-[2.5em]',
      )}
--- a/src-web/components/core/IconButton.tsx
+++ b/src-web/components/core/IconButton.tsx
@@ -20,6 +20,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
  {
    showConfirm,
    icon,
+    color = 'default',
    spin,
    onClick,
    className,
@@ -50,10 +51,13 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
      onClick={handleClick}
      innerClassName="flex items-center justify-center"
      size={size}
+      color={color}
      className={classNames(
        className,
-        'group/button relative flex-shrink-0 text-fg-subtle',
+        'group/button relative flex-shrink-0',
        '!px-0',
+        color === 'custom' && 'text-text-subtle',
+        color === 'default' && 'text-text-subtle',
        size === 'md' && 'w-9',
        size === 'sm' && 'w-8',
        size === 'xs' && 'w-6',
@@ -72,7 +76,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
        spin={spin}
        className={classNames(
          iconClassName,
-          'group-hover/button:text-fg',
+          'group-hover/button:text',
          props.disabled && 'opacity-70',
          confirmed && 'text-green-600',
        )}
--- a/src-web/components/core/InlineCode.tsx
+++ b/src-web/components/core/InlineCode.tsx
@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
    <code
      className={classNames(
        className,
-        'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight-secondary',
-        'px-1.5 py-0.5 rounded text-fg shadow-inner break-words',
+        'font-mono text-shrink bg-surface-highlight-secondary border border-border-subtle',
+        'px-1.5 py-0.5 rounded text shadow-inner break-words',
      )}
      {...props}
    />
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -136,7 +136,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -147,10 +147,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
        className={classNames(
          containerClassName,
          'x-theme-input',
-          'relative w-full rounded-md text-fg',
+          'relative w-full rounded-md text',
          'border',
-          focused ? 'border-border-focus' : 'border-background-highlight',
-          !isValid && '!border-fg-danger',
+          focused ? 'border-border-focus' : 'border-border',
+          !isValid && '!border-danger',
          size === 'md' && 'min-h-md',
          size === 'sm' && 'min-h-sm',
          size === 'xs' && 'min-h-xs',
@@ -187,7 +187,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
            title={obscured ? `Show ${label}` : `Obscure ${label}`}
            size="xs"
            className="mr-0.5 group/obscure !h-auto my-0.5"
-            iconClassName="text-fg-subtle group-hover/obscure:text-fg"
+            iconClassName="text-text-subtle group-hover/obscure:text"
            iconSize="sm"
            icon={obscured ? 'eye' : 'eyeClosed'}
            onClick={() => setObscured((o) => !o)}
--- a/src-web/components/core/JsonAttributeTree.tsx
+++ b/src-web/components/core/JsonAttributeTree.tsx
@@ -48,7 +48,7 @@ export const JsonAttributeTree = ({
          : null,
        isExpandable: Object.keys(attrValue).length > 0,
        label: isExpanded ? `{${Object.keys(attrValue).length || ' '}}` : `{⋯}`,
-        labelClassName: 'text-fg-subtler',
+        labelClassName: 'text-text-subtlest',
      };
    } else if (jsonType === '[object Array]') {
      return {
@@ -66,7 +66,7 @@ export const JsonAttributeTree = ({
          : null,
        isExpandable: attrValue.length > 0,
        label: isExpanded ? `[${attrValue.length || ' '}]` : `[⋯]`,
-        labelClassName: 'text-fg-subtler',
+        labelClassName: 'text-text-subtlest',
      };
    } else {
      return {
@@ -74,17 +74,17 @@ export const JsonAttributeTree = ({
        isExpandable: false,
        label: jsonType === '[object String]' ? `"${attrValue}"` : `${attrValue}`,
        labelClassName: classNames(
-          jsonType === '[object Boolean]' && 'text-fg-primary',
-          jsonType === '[object Number]' && 'text-fg-info',
-          jsonType === '[object String]' && 'text-fg-notice',
-          jsonType === '[object Null]' && 'text-fg-danger',
+          jsonType === '[object Boolean]' && 'text-primary',
+          jsonType === '[object Number]' && 'text-info',
+          jsonType === '[object String]' && 'text-notice',
+          jsonType === '[object Null]' && 'text-danger',
        ),
      };
    }
  }, [attrValue, attrKeyJsonPath, isExpanded, depth]);

  const labelEl = (
-    <span className={classNames(labelClassName, 'select-text group-hover:text-fg-subtle')}>
+    <span className={classNames(labelClassName, 'select-text group-hover:text-text-subtle')}>
      {label}
    </span>
  );
@@ -104,18 +104,18 @@ export const JsonAttributeTree = ({
              icon="chevronRight"
              className={classNames(
                'left-0 absolute transition-transform flex items-center',
-                'text-fg-subtler group-hover:text-fg-subtle',
+                'text-text-subtlest group-hover:text-text-subtle',
                isExpanded ? 'rotate-90' : '',
              )}
            />
-            <span className="text-fg-primary group-hover:text-fg-primary mr-1.5 whitespace-nowrap">
+            <span className="text-primary group-hover:text-primary mr-1.5 whitespace-nowrap">
              {attrKey === undefined ? '$' : attrKey}:
            </span>
            {labelEl}
          </button>
        ) : (
          <>
-            <span className="text-fg-primary mr-1.5 pl-4 whitespace-nowrap select-text">
+            <span className="text-primary mr-1.5 pl-4 whitespace-nowrap select-text">
              {attrKey}:
            </span>
            {labelEl}
--- a/src-web/components/core/KeyValueRow.tsx
+++ b/src-web/components/core/KeyValueRow.tsx
@@ -34,9 +34,9 @@ export function KeyValueRow({ label, value, labelColor = 'secondary', labelClass
        className={classNames(
          'py-0.5 pr-2 select-text cursor-text',
          labelClassName,
-          labelColor === 'primary' && 'text-fg-primary',
-          labelColor === 'secondary' && 'text-fg-subtle',
-          labelColor === 'info' && 'text-fg-info',
+          labelColor === 'primary' && 'text-primary',
+          labelColor === 'secondary' && 'text-text-subtle',
+          labelColor === 'info' && 'text-info',
        )}
      >
        {label}
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -360,7 +360,7 @@ function PairEditorRow({
        title={pairContainer.pair.enabled ? 'Disable item' : 'Enable item'}
        disabled={isLast}
        checked={isLast ? false : !!pairContainer.pair.enabled}
-        className={classNames('mr-2', isLast && '!opacity-disabled')}
+        className={classNames('pr-2', isLast && '!opacity-disabled')}
        onChange={handleChangeEnabled}
      />
      <div
--- a/src-web/components/core/PairOrBulkEditor.tsx
+++ b/src-web/components/core/PairOrBulkEditor.tsx
@@ -26,7 +26,7 @@ export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
          title={useBulk ? 'Enable form edit' : 'Enable bulk edit'}
          className={classNames(
            'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
-            'bg-background text-fg-subtle hover:text-fg group-hover/wrapper:opacity-100',
+            'bg-surface text-text-subtle hover:text group-hover/wrapper:opacity-100',
          )}
          onClick={() => setUseBulk((b) => !b)}
          icon={useBulk ? 'table' : 'fileCode'}
--- a/src-web/components/core/PlainInput.tsx
+++ b/src-web/components/core/PlainInput.tsx
@@ -88,7 +88,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -99,10 +99,10 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
        className={classNames(
          containerClassName,
          'x-theme-input',
-          'relative w-full rounded-md text-fg',
+          'relative w-full rounded-md text',
          'border',
-          focused ? 'border-border-focus' : 'border-background-highlight',
-          !isValid && '!border-fg-danger',
+          focused ? 'border-border-focus' : 'border-border-subtle',
+          !isValid && '!border-danger',
          size === 'md' && 'min-h-md',
          size === 'sm' && 'min-h-sm',
          size === 'xs' && 'min-h-xs',
@@ -136,7 +136,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
            title={obscured ? `Show ${label}` : `Obscure ${label}`}
            size="xs"
            className="mr-0.5 group/obscure !h-auto my-0.5"
-            iconClassName="text-fg-subtle group-hover/obscure:text-fg"
+            iconClassName="text-text-subtle group-hover/obscure:text"
            iconSize="sm"
            icon={obscured ? 'eye' : 'eyeClosed'}
            onClick={() => setObscured((o) => !o)}
--- a/src-web/components/core/Select.tsx
+++ b/src-web/components/core/Select.tsx
@@ -53,7 +53,7 @@ export function Select<T extends string>({
        htmlFor={id}
        className={classNames(
          labelClassName,
-          'text-fg-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap',
          hideLabel && 'sr-only',
        )}
      >
@@ -63,10 +63,10 @@ export function Select<T extends string>({
        <HStack
          space={2}
          className={classNames(
-            'w-full rounded-md text-fg text-sm font-mono',
+            'w-full rounded-md text text-sm font-mono',
            'pl-2',
            'border',
-            focused ? 'border-border-focus' : 'border-background-highlight',
+            focused ? 'border-border-focus' : 'border-border',
            size === 'xs' && 'h-xs',
            size === 'sm' && 'h-sm',
            size === 'md' && 'h-md',
--- a/src-web/components/core/Separator.tsx
+++ b/src-web/components/core/Separator.tsx
@@ -11,10 +11,12 @@ interface Props {
 export function Separator({ className, dashed, orientation = 'horizontal', children }: Props) {
  return (
    <div role="separator" className={classNames(className, 'flex items-center')}>
-      {children && <div className="text-sm text-fg-subtler mr-2 whitespace-nowrap">{children}</div>}
+      {children && (
+        <div className="text-sm text-text-subtlest mr-2 whitespace-nowrap">{children}</div>
+      )}
      <div
        className={classNames(
-          'h-0 border-t border-t-background-highlight',
+          'h-0 border-t border-t-border-subtle',
          dashed && 'border-dashed',
          orientation === 'horizontal' && 'w-full h-[1px]',
          orientation === 'vertical' && 'h-full w-[1px]',
--- a/src-web/components/core/StatusTag.tsx
+++ b/src-web/components/core/StatusTag.tsx
@@ -16,12 +16,12 @@ export function StatusTag({ response, className, showReason }: Props) {
      className={classNames(
        className,
        'font-mono',
-        category === '0' && 'text-fg-danger',
-        category === '1' && 'text-fg-info',
-        category === '2' && 'text-fg-success',
-        category === '3' && 'text-fg-primary',
-        category === '4' && 'text-fg-warning',
-        category === '5' && 'text-fg-danger',
+        category === '0' && 'text-danger',
+        category === '1' && 'text-info',
+        category === '2' && 'text-success',
+        category === '3' && 'text-primary',
+        category === '4' && 'text-warning',
+        category === '5' && 'text-danger',
      )}
    >
      {label} {showReason && response.statusReason && response.statusReason}
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -87,8 +87,8 @@ export function Tabs({
              'h-full flex items-center rounded',
              '!px-2 ml-[1px]',
              addBorders && 'border',
-              isActive ? 'text-fg' : 'text-fg-subtle hover:text-fg',
-              isActive && addBorders ? 'border-background-highlight' : 'border-transparent',
+              isActive ? 'text-text' : 'text-text-subtle hover:text-text',
+              isActive && addBorders ? 'border-border-subtle' : 'border-transparent',
            );

            if ('options' in t) {
@@ -103,7 +103,6 @@ export function Tabs({
                  onChange={t.options.onChange}
                >
                  <button
-                    color="custom"
                    onClick={isActive ? undefined : () => handleTabChange(t.value)}
                    className={btnClassName}
                  >
@@ -113,7 +112,7 @@ export function Tabs({
                    <Icon
                      size="sm"
                      icon="chevronDown"
-                      className={classNames('ml-1', isActive ? 'text-fg-subtle' : 'opacity-50')}
+                      className={classNames('ml-1', isActive ? 'text-text-subtle' : 'opacity-50')}
                    />
                  </button>
                </RadioDropdown>
@@ -122,7 +121,6 @@ export function Tabs({
              return (
                <button
                  key={t.value}
-                  color="custom"
                  onClick={() => handleTabChange(t.value)}
                  className={btnClassName}
                >
--- a/src-web/components/core/Toast.tsx
+++ b/src-web/components/core/Toast.tsx
@@ -58,13 +58,13 @@ export function Toast({
        className,
        'x-theme-toast',
        'pointer-events-auto',
-        'relative bg-background pointer-events-auto',
+        'relative bg-surface pointer-events-auto',
        'rounded-lg',
-        'border border-background-highlight shadow-lg',
+        'border border-border-subtle shadow-lg',
        'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
        'w-[22rem] max-h-[80vh]',
        'm-2 grid grid-cols-[1fr_auto]',
-        'text-fg',
+        'text',
      )}
    >
      <div className="px-3 py-3 flex items-center gap-2">
@@ -72,10 +72,10 @@ export function Toast({
          <Icon
            icon={icon}
            className={classNames(
-              variant === 'success' && 'text-fg-success',
-              variant === 'warning' && 'text-fg-warning',
-              variant === 'error' && 'text-fg-danger',
-              variant === 'copied' && 'text-fg-primary',
+              variant === 'success' && 'text-success',
+              variant === 'warning' && 'text-warning',
+              variant === 'error' && 'text-danger',
+              variant === 'copied' && 'text-primary',
            )}
          />
        )}
@@ -96,7 +96,7 @@ export function Toast({
      {timeout != null && (
        <div className="w-full absolute bottom-0 left-0 right-0">
          <motion.div
-            className="bg-background-highlight h-0.5"
+            className="bg-surface-highlight h-0.5"
            initial={{ width: '100%' }}
            animate={{ width: '0%', opacity: 0.2 }}
            transition={{ duration: timeout / 1000, ease: 'linear' }}