feat: add lint to block non-semantic & neutral text/background classes

eslint-plugin-rill/index.js

@@ -0,0 +1,7 @@
+import noDisallowedTailwindTextColors from "./no-disallowed-tailwind-colors.js";
+
+export default {
+  rules: {
+    "no-disallowed-tailwind-text-colors": noDisallowedTailwindTextColors,
+  },
+};

eslint-plugin-rill/no-disallowed-tailwind-colors.js

@@ -0,0 +1,91 @@
+/**
+ * ESLint rule to disallow certain Tailwind text color classes.
+ * Disallows: text-gray-*, text-neutral-*, text-slate-*, text-stone-*, text-zinc-*
+ */
+
+const DISALLOWED_TEXT_PATTERN =
+  /\btext-(gray|neutral|slate|stone|zinc)-\d{1,3}\b/g;
+const TEXT_ERROR_MESSAGE =
+  'Disallowed Tailwind text color class: "{{ className }}". Use semantic color classes instead.';
+
+const DISALLOWED_BACKGROUND_PATTERN =
+  /\bbg-(gray|neutral|slate|stone|zinc)-\d{1,3}\b/g;
+const DISALLOWED_BACKGROUND_CLASSES = /\bbg-(white|black)\b/g;
+const BACKGROUND_ERROR_MESSAGE =
+  'Disallowed Tailwind background color class: "{{ className }}". Use semantic color classes instead.';
+
+const DISALLOWED_CLASSES_PATTERNS = [
+  [DISALLOWED_TEXT_PATTERN, TEXT_ERROR_MESSAGE],
+
+  [DISALLOWED_BACKGROUND_PATTERN, BACKGROUND_ERROR_MESSAGE],
+  [DISALLOWED_BACKGROUND_CLASSES, BACKGROUND_ERROR_MESSAGE],
+];
+
+function reportAllMatches(value, context, node) {
+  if (typeof value !== "string") return;
+
+  for (const [pattern, errorMessage] of DISALLOWED_CLASSES_PATTERNS) {
+    for (const match of value.matchAll(pattern)) {
+      context.report({
+        node,
+        message: errorMessage,
+        data: { className: match[0] },
+      });
+    }
+  }
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow non-semantic Tailwind text/background color classes (gray, neutral, slate, stone, zinc)",
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    return {
+      // Check Svelte HTML attributes (class="..." and className="...")
+      SvelteAttribute(node) {
+        if (node.key?.name === "class" || node.key?.name === "className") {
+          for (const valueNode of node.value) {
+            if (valueNode.type === "SvelteLiteral") {
+              reportAllMatches(valueNode.value, context, valueNode);
+            }
+          }
+        }
+      },
+      // Check Svelte shorthand class directives (class:text-gray-500)
+      SvelteDirective(node) {
+        if (node.kind === "Class" && node.key?.name) {
+          const className = node.key.name.name || node.key.name;
+          reportAllMatches(className, context, node);
+        }
+      },
+      // Check Svelte <style> blocks
+      SvelteStyleElement(node) {
+        const styleText = sourceCode.getText(node);
+        const nodeStart = node.range[0];
+
+        for (const [pattern, errorMessage] of DISALLOWED_CLASSES_PATTERNS) {
+          for (const match of styleText.matchAll(pattern)) {
+            const matchStart = nodeStart + match.index;
+            const matchEnd = matchStart + match[0].length;
+
+            context.report({
+              loc: {
+                start: sourceCode.getLocFromIndex(matchStart),
+                end: sourceCode.getLocFromIndex(matchEnd),
+              },
+              message: errorMessage,
+              data: { className: match[0] },
+            });
+          }
+        }
+      },
+    };
+  },
+};

eslint.config.js

@@ -7,6 +7,7 @@ import eslintPluginSvelte from "eslint-plugin-svelte";
 import globals from "globals";
 import tsEslint from "typescript-eslint";
 import { globalIgnores } from "eslint/config";
+import rillPlugin from "./eslint-plugin-rill/index.js";
 
 export default [
   js.configs.recommended,
@@ -31,6 +32,9 @@ export default [
   },
   ...eslintPluginSvelte.configs["flat/prettier"],
   {
+    plugins: {
+      rill: rillPlugin,
+    },
     languageOptions: {
       ecmaVersion: "latest",
       sourceType: "module",
@@ -68,16 +72,18 @@ export default [
       "@typescript-eslint/no-base-to-string": "warn",
       "@typescript-eslint/no-unused-expressions": "warn",
       "@typescript-eslint/no-require-imports": "warn",
+      "rill/no-disallowed-tailwind-text-colors": "error",
     },
   },
   {
     ignores: [
-      "**/.svelte-kit/",
+      "**/.svelte-kit/**",
       "**/gen/*",
-      "**/node_modules",
+      "**/node_modules/**",
       "**/playwright.config.js",
       "**/postcss.config.cjs",
       "**/svelte.config.js",
+      "eslint-plugin-rill/*",
       "web-admin/build/*",
       "web-admin/playwright-report/*",
       "web-admin/playwright/*",

web-admin/src/features/alerts/history/NoAlertRunsYet.svelte

@@ -8,7 +8,7 @@
 >
   <div class="flex flex-col justify-center items-center">
     <div class="relative">
-      <AlertCircleOutline className="text-gray-300 w-12 h-12" />
+      <AlertCircleOutline className="text-icon-muted w-12 h-12" />
     </div>
   </div>
   <div

web-admin/src/features/billing/plans/EnterprisePlan.svelte

@@ -30,7 +30,7 @@
 
 <style lang="postcss">
   .contact-us-btn {
-    @apply text-sm font-medium text-primary-600 border border-primary-500 px-4 py-2 cursor-pointer bg-white rounded-none;
+    @apply text-sm font-medium text-primary-600 border border-primary-500 px-4 py-2 cursor-pointer rounded-none;
     height: 36px;
   }
 

web-admin/src/features/dashboards/DashboardErrored.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="flex flex-col justify-center items-center h-3/5 space-y-6 m-auto">
-  <CancelCircleInverse size="7em" className="text-gray-200" />
+  <CancelCircleInverse size="7em" className="text-icon-muted" />
   <div class="flex flex-col items-center space-y-2">
     <h1 class="text-lg font-semibold">
       {m.dashboard_errored_title()}

web-admin/src/features/organizations/settings/LogoSettings.svelte

@@ -141,7 +141,7 @@
           {#if organizationLogoDarkUrl}
             {m.settings_dark_logo_label()}
           {:else}
-            <span class="text-slate-500">{m.settings_dark_logo_label()}</span>
+            <span class="text-icon-default">{m.settings_dark_logo_label()}</span>
           {/if}
         </div>
         <UploadImagePopover

web-admin/src/features/organizations/user-management/table/groups/GroupCompositeCell.svelte

@@ -94,7 +94,7 @@
       getRandomBgColor(name),
     )}
   >
-    <span class="text-sm text-white font-semibold">{getInitials(name)}</span>
+    <span class="text-sm text-fg-primary font-semibold">{getInitials(name)}</span>
   </div>
   <div class="flex flex-col text-left">
     <span class="text-sm font-medium text-fg-primary flex flex-row gap-x-1">
@@ -115,7 +115,7 @@
       </div>
       <TooltipContent slot="tooltip-content">
         {#if (usersCount ?? 0) === 0}
-          <div class="text-xs text-gray-300 px-1 py-0.5">
+          <div class="text-xs text-fg-muted px-1 py-0.5">
             {m.users_no_users()}
           </div>
         {:else if $listUsergroupMemberUsers.isLoading}

web-admin/src/features/projects/RedeployProjectCTA.svelte

@@ -70,15 +70,15 @@
           >
             <MoonCircleOutline
               size="104px"
-              className="text-gray-300"
+              className="text-icon-muted"
               gradientStopColor="slate-200"
             />
           </div>
           <div
             class="absolute inset-0 transition-opacity duration-200"
             class:opacity-0={!isWaking}
           >
-            <LoadingCircleOutline size="104px" className="text-gray-300" />
+            <LoadingCircleOutline size="104px" className="text-icon-muted" />
           </div>
         </div>
         <CtaHeader variant="bold">
@@ -99,7 +99,7 @@
       <svelte:fragment slot="read-project">
         <MoonCircleOutline
           size="104px"
-          className="text-gray-300"
+          className="text-icon-muted"
           gradientStopColor="slate-200"
         />
         <CtaHeader variant="bold">{m.project_this_is_hibernating()}</CtaHeader>

web-admin/src/features/projects/environment-variables/ActivityCell.svelte

@@ -19,7 +19,7 @@
       <TimeAgo datetime={updatedOn} />
     </div>
     <TooltipContent slot="tooltip-content">
-      <span class="text-xs text-gray-50 font-medium">
+      <span class="text-xs font-medium">
         {fullDate}
       </span>
     </TooltipContent>

web-admin/src/features/projects/status/resource-table/NameCell.svelte

@@ -10,6 +10,6 @@
     {name}
   </div>
   <TooltipContent slot="tooltip-content">
-    <span class="text-xs text-gray-50 font-medium">{name}</span>
+    <span class="text-xs font-medium">{name}</span>
   </TooltipContent>
 </Tooltip>

web-admin/src/features/projects/status/resource-table/RefreshCell.svelte

@@ -24,7 +24,7 @@
       {formattedDate}
     </div>
     <TooltipContent slot="tooltip-content">
-      <span class="text-xs text-gray-50 font-medium">
+      <span class="text-xs font-medium">
         {full}
       </span>
     </TooltipContent>

web-admin/src/features/projects/user-management/GeneralAccessSelectorDropdown.svelte

@@ -145,7 +145,7 @@
               getRandomBgColor(m.users_everyone_at_org({ organization })),
             )}
           >
-            <span class="text-sm text-white font-semibold"
+            <span class="text-sm text-fg-primary font-semibold"
               >{getInitials(m.users_everyone_at_org({ organization }))}</span
             >
           </div>
@@ -221,7 +221,7 @@
         <div
           class="h-5 w-5 flex items-center justify-center bg-primary-600 rounded-sm"
         >
-          <span class="text-xs text-white font-semibold"
+          <span class="text-xs text-fg-primary font-semibold"
             >{organization[0].toUpperCase()}</span
           >
         </div>

web-admin/src/features/scheduled-reports/history/NoRunsYet.svelte

@@ -8,7 +8,7 @@
 >
   <div class="flex flex-col justify-center items-center">
     <div class="relative">
-      <ReportIcon className="text-gray-300 w-12 h-12" />
+      <ReportIcon className="text-icon-muted w-12 h-12" />
     </div>
   </div>
   <div

web-common/src/components/CellInspector.svelte

@@ -179,9 +179,9 @@
         class:items-center={!isJson}
       >
         {#if value === null}
-          <span class="text-sm text-gray-500 italic">null</span>
+          <span class="text-sm text-fg-muted italic">null</span>
         {:else if value === ""}
-          <span class="text-sm text-gray-500 italic">(empty string)</span>
+          <span class="text-sm text-fg-muted italic">(empty string)</span>
         {:else}
           <span
             class="whitespace-pre-wrap break-words text-sm text-fg-primary w-full"

web-common/src/components/avatar/Avatar.svelte

@@ -43,12 +43,12 @@
       <Avatar.Image {src} {alt} />
       {#if alt}
         <!-- Show a fallback if the image fails to load -->
-        <Avatar.Fallback class={cn(fontSize, "text-white")}>
+        <Avatar.Fallback class={cn(fontSize, "text-fg-primary")}>
           {getInitials(alt ?? "")}
         </Avatar.Fallback>
       {/if}
     {:else if alt}
-      <Avatar.Fallback class={cn(fontSize, "text-white")}>
+      <Avatar.Fallback class={cn(fontSize, "text-fg-primary")}>
         {getInitials(alt)}
       </Avatar.Fallback>
     {:else}

web-common/src/components/avatar/AvatarListItem.svelte

@@ -50,7 +50,7 @@
         getRandomBgColor(email ?? name),
       )}
     >
-      <span class="text-sm text-white font-semibold">{getInitials(name)}</span>
+      <span class="text-sm text-fg-primary font-semibold">{getInitials(name)}</span>
     </div>
   {/if}
   <div class="flex flex-col text-left">

web-common/src/components/button/Button.svelte

@@ -304,6 +304,10 @@
     @apply text-fg-muted p-0;
   }
 
+  .text:focus {
+    @apply shadow-none;
+  }
+
   .text:hover {
     @apply text-primary-700;
   }
@@ -338,13 +342,17 @@
     @apply gap-x-1.5;
   }
 
+  .toolbar:focus {
+    @apply shadow-none;
+  }
+
   .toolbar:hover:not(:disabled) {
     @apply bg-gray-600/15;
   }
 
   .toolbar:active,
   .toolbar.selected {
     @apply bg-gray-600/15;
   }
 
   .toolbar:disabled {

web-common/src/components/button/classes.ts

@@ -2,7 +2,7 @@ export const disabledClasses = `disabled:cursor-not-allowed disabled:text-fg-pri
 
 export const levels = {
   info: {
-    primary: `bg-gray-800 text-white border rounded-sm border-gray-800 hover:bg-gray-700 hover:border-gray-700 focus:ring-primary-300`,
+    primary: `bg-gray-800 text-fg-primary border rounded-sm border-gray-800 hover:bg-gray-700 hover:border-gray-700 focus:ring-primary-300`,
     secondary:
       "text-fg-primary border rounded-sm border-gray-300 shadow-sm hover:bg-surface-hover hover:text-fg-primary hover:border-gray-300 focus:ring-primary-300",
     highlighted:

web-common/src/components/data-graphic/compositions/timestamp-profile/TimestampTooltipContent.svelte

@@ -46,7 +46,7 @@
           {#if zooming}<span>Zoomed</span>{:else}<span>Zooming</span>{/if}
           to {formatInteger(zoomedRows)} row{#if zoomedRows !== 1}s{/if}
         </div>
-        <div class="text-right text-gray-300 font-normal not-italic">
+        <div class="text-right text-fg-inverse font-normal not-italic">
           {formatBigNumberPercentage(zoomedRows / totalRows)}
         </div>
       </div>

web-common/src/components/dialog/tabs/NumberedCircle.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class="w-[18px] h-[18px] text-white rounded-full inline-flex items-center justify-center {bgColor}"
+  class="w-[18px] h-[18px] text-fg-primary rounded-full inline-flex items-center justify-center {bgColor}"
 >
   {number}
 </div>

web-common/src/components/icons/SendIcon.svelte

@@ -5,7 +5,7 @@
   export let disabled = false;
 
   $: backgroundClass = disabled ? "fill-gray-300" : "fill-primary-400";
-  $: arrowClass = "text-gray-100";
+  $: arrowClass = "text-fg-primary";
 </script>
 
 <svg

web-common/src/components/menu/DashboardMetricsDraggableList.svelte

@@ -44,7 +44,7 @@
   let tagsColMeasured: number = TAG_COLUMN.explore.MIN;
 
   const toggleButtonBaseClass =
-    "flex h-[26px] w-[42px] items-center justify-center rounded-sm text-icon-muted transition-colors hover:bg-surface-hover hover:text-fg-primary active:bg-gray-300 disabled:text-gray-300 disabled:cursor-not-allowed";
+    "flex h-[26px] w-[42px] items-center justify-center rounded-sm text-icon-muted transition-colors hover:bg-surface-hover hover:text-fg-primary active:bg-surface-active disabled:ttext-fg-disabled disabled:cursor-not-allowed";
 
   $: allItemsMap = new Map(allItems.map((item) => [item.name, item]));
   $: numAvailable = allItems?.length ?? 0;

web-common/src/components/table-toolbar/TableToolbarFilterDropdown.svelte

@@ -34,7 +34,7 @@
     <DropdownMenu.Trigger
       class="flex flex-row items-center gap-x-2 h-9 px-4 border rounded-[2px] shadow-xs text-sm font-medium cursor-pointer {hasActiveFilters
         ? 'bg-surface-hover border-border text-fg-accent'
-        : 'bg-white border-border text-fg-primary hover:bg-surface-hover'}"
+        : 'border-border text-fg-primary hover:bg-surface-hover'}"
       aria-label="Filter options"
     >
       <FilterOutlined size="16" />

web-common/src/components/tooltip/LongDescription.svelte

@@ -9,7 +9,7 @@
   /** we are setting the tooltip content code block styling here, since this is sometimes 
 programmatically returned by the runtime **/
   :global(.long-tooltip-description code) {
-    @apply px-2 py-1 bg-gray-900 text-gray-100 rounded break-words w-max;
+    @apply px-2 py-1 bg-gray-900 text-fg-primary rounded break-words w-max;
     transform: translateX(-0.5rem);
     display: block;
   }

web-common/src/components/tooltip/Shortcut.svelte

@@ -1,3 +1,3 @@
-<div class="text-right dark:text-fg-secondary text-gray-400">
+<div class="text-right dark:text-fg-inverse/30">
   <slot />
 </div>