🧹 refactor: Clear the Raw-Color and Unknown-Class Design Suppressions (#16825)

* refactor: Clear the Raw-Color and Unknown-Class Design Suppressions

* fix: Keep the Prose Classes style.css Still Reads

* fix: Keep the split-parent Marker the Screenshot Spec Waits On

* chore: Prune the Recorded Suppressions the Rebase Cleared

Author: berry-13

client/src/components/Chat/Input/AddedConvo.tsx

@@ -44,7 +44,7 @@ export default function AddedConvo({
             conversation={addedConvo}
             endpointsConfig={endpointsConfig}
             agentsMap={agentsMap}
-            containerClassName="shadow-stroke overflow-hidden rounded-full"
+            containerClassName="avatar-stroke overflow-hidden rounded-full"
             context="menu-item"
             size={20}
           />

client/src/components/Endpoints/ConvoIconURL.tsx

@@ -51,7 +51,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
   }
 
   return (
-    <div className="shadow-stroke bg-surface-primary text-text-primary relative flex h-full items-center justify-center rounded-full">
+    <div className="avatar-stroke bg-surface-primary text-text-primary relative flex h-full items-center justify-center rounded-full">
       <ProviderIcon provider={provider} size={41} className="h-2/3 w-2/3" />
     </div>
   );

client/src/components/Endpoints/MessageEndpointIcon.tsx

@@ -31,7 +31,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
           className={cn('overflow-hidden rounded-full', props.className ?? '')}
         >
           <img
-            className="shadow-stroke h-full w-full object-cover"
+            className="avatar-stroke h-full w-full object-cover"
             src={iconURL}
             alt={assistantName}
             style={{ height: '80', width: '80' }}
@@ -40,7 +40,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
       </div>
     ) : (
       <div className="h-6 w-6">
-        <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+        <div className="avatar-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
           <AssistantIcon className="text-text-tertiary h-2/3 w-2/3" />
         </div>
       </div>
@@ -60,7 +60,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
           className={cn('overflow-hidden rounded-full', props.className ?? '')}
         >
           <img
-            className="shadow-stroke h-full w-full object-cover"
+            className="avatar-stroke h-full w-full object-cover"
             src={iconURL}
             alt={agentName}
             style={{ height: '80', width: '80' }}
@@ -69,7 +69,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
       </div>
     ) : (
       <div className="h-6 w-6">
-        <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+        <div className="avatar-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
           <Feather className="text-text-tertiary h-2/3 w-2/3" aria-hidden="true" />
         </div>
       </div>

client/src/components/SidePanel/Agents/AgentConfig.tsx

@@ -124,7 +124,7 @@ export default function AgentConfig({
           >
             <div className="flex w-full min-w-0 items-center gap-2">
               {providerValue !== undefined && (
-                <div className="shadow-stroke bg-surface-primary text-text-primary relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                <div className="avatar-stroke bg-surface-primary text-text-primary relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                   <ResolvedProviderIcon
                     provider={providerId}
                     imageURL={imageURL}

client/src/components/ui/TermsAndConditionsModal.tsx

@@ -76,7 +76,7 @@ const TermsAndConditionsModal = ({
             className="max-h-[60vh] overflow-y-auto p-4"
             aria-label={localize('com_ui_terms_and_conditions')}
           >
-            <div className="prose dark:prose-invert w-full max-w-none !text-text-primary">
+            <div className="prose dark:prose-invert !text-text-primary w-full max-w-none">
               {content !== '' ? (
                 <MarkdownLite content={content} />
               ) : (

client/src/hooks/Input/useMentions.ts

@@ -45,7 +45,7 @@ const assistantMapFn =
     description: description ?? '',
     icon: EndpointIcon({
       conversation: { assistant_id: id, endpoint },
-      containerClassName: 'shadow-stroke overflow-hidden rounded-full',
+      containerClassName: 'avatar-stroke overflow-hidden rounded-full',
       endpointsConfig: endpointsConfig,
       context: 'menu-item',
       assistantMap,
@@ -119,7 +119,7 @@ export default function useMentions({
               endpoint: EModelEndpoint.agents,
               iconURL: avatar?.filepath,
             },
-            containerClassName: 'shadow-stroke overflow-hidden rounded-full',
+            containerClassName: 'avatar-stroke overflow-hidden rounded-full',
             endpointsConfig: endpointsConfig,
             context: 'menu-item',
             size: 20,
@@ -247,7 +247,7 @@ export default function useMentions({
         description: getPresetTitle(preset, true),
         icon: EndpointIcon({
           conversation: preset,
-          containerClassName: 'shadow-stroke overflow-hidden rounded-full',
+          containerClassName: 'avatar-stroke overflow-hidden rounded-full',
           endpointsConfig: endpointsConfig,
           context: 'menu-item',
           assistantMap,

client/src/style.css

@@ -1560,9 +1560,11 @@ html {
   }
 }
 
+.avatar-stroke,
 .shadow-stroke {
   position: relative;
 }
+.avatar-stroke:after,
 .shadow-stroke:after {
   --tw-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
@@ -1574,7 +1576,9 @@ html {
   right: 0;
   top: 0;
 }
+.dark .avatar-stroke:after,
 .dark .shadow-stroke:after,
+.avatar-stroke:after,
 .shadow-stroke:after {
   box-shadow:
     0 0 transparent,
@@ -1584,6 +1588,7 @@ html {
     var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent),
     var(--tw-shadow);
 }
+.dark .avatar-stroke:after,
 .dark .shadow-stroke:after {
   --tw-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.3);
   --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);

eslint-suppressions.json

@@ -146,11 +146,6 @@
       "count": 1
     }
   },
-  "client/src/components/Chat/Input/AddedConvo.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 1
-    }
-  },
   "client/src/components/Chat/Input/AskUserQuestionPopover.tsx": {
     "shadcn/no-restyle": {
       "count": 7
@@ -882,18 +877,10 @@
       "count": 2
     }
   },
-  "client/src/components/Endpoints/ConvoIconURL.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 1
-    }
-  },
   "client/src/components/Endpoints/MessageEndpointIcon.tsx": {
     "shadcn/no-arbitrary-values": {
       "count": 1
     },
-    "shadcn/no-raw-colors": {
-      "count": 4
-    },
     "shadcn/no-restyle": {
       "count": 3
     }
@@ -1454,9 +1441,6 @@
     "shadcn/no-arbitrary-values": {
       "count": 3
     },
-    "shadcn/no-raw-colors": {
-      "count": 1
-    },
     "shadcn/no-restyle": {
       "count": 9
     }
@@ -2016,21 +2000,11 @@
       "count": 2
     }
   },
-  "packages/client/src/components/AnimatedSearchInput.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 1
-    }
-  },
   "packages/client/src/components/Avatar.tsx": {
     "shadcn/no-inline-styles": {
       "count": 1
     }
   },
-  "packages/client/src/components/Badge.tsx": {
-    "shadcn/no-unknown-classes": {
-      "count": 6
-    }
-  },
   "packages/client/src/components/Combobox.tsx": {
     "shadcn/no-inline-styles": {
       "count": 2
@@ -2079,9 +2053,6 @@
   "packages/client/src/components/SplitText.tsx": {
     "shadcn/no-inline-styles": {
       "count": 7
-    },
-    "shadcn/no-unknown-classes": {
-      "count": 1
     }
   },
   "packages/client/src/components/Toast.tsx": {
@@ -2094,36 +2065,6 @@
       "count": 2
     }
   },
-  "packages/client/src/svgs/BirthdayIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 10
-    }
-  },
-  "packages/client/src/svgs/DiscordIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 2
-    }
-  },
-  "packages/client/src/svgs/FacebookIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 3
-    }
-  },
-  "packages/client/src/svgs/GeminiIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 2
-    }
-  },
-  "packages/client/src/svgs/GoogleIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 4
-    }
-  },
-  "packages/client/src/svgs/PaLMIcon.tsx": {
-    "shadcn/no-raw-colors": {
-      "count": 7
-    }
-  },
   "packages/client/src/svgs/SendMessageIcon.tsx": {
     "shadcn/no-inline-styles": {
       "count": 1

eslint.config.mjs

@@ -307,6 +307,7 @@ export default [
             'scroll-animation',
             'hover-button-active',
             'open',
+            'split-parent',
           ],
         },
       ],
@@ -326,6 +327,23 @@ export default [
       'shadcn/require-static-classes': 'off',
     },
   },
+  {
+    // Entries 2 and 4 of packages/client/src/theme/allowlist.md: the third-party brand marks and
+    // the opt-in multicolour illustration carry fixed `fill` literals that must not follow the
+    // theme. The scope is these six files by name, so a new SVG or any other file still reports
+    // its colours; the allowlist stays the record of why each one is here.
+    files: [
+      'packages/client/src/svgs/GoogleIcon.tsx',
+      'packages/client/src/svgs/FacebookIcon.tsx',
+      'packages/client/src/svgs/DiscordIcon.tsx',
+      'packages/client/src/svgs/GeminiIcon.tsx',
+      'packages/client/src/svgs/PaLMIcon.tsx',
+      'packages/client/src/svgs/BirthdayIcon.tsx',
+    ],
+    rules: {
+      'shadcn/no-raw-colors': 'off',
+    },
+  },
   {
     files: ['**/.eslintrc.js', '**/jest.config.js', 'client/vite.config.ts'],
     languageOptions: {

packages/client/src/components/AnimatedSearchInput.tsx

@@ -66,7 +66,7 @@ const AnimatedSearchInput = ({
       >
         <div className="absolute inset-0">
           <div
-            className={`bg-gradient-radial from-accent-primary/10 absolute inset-0 to-transparent transition-opacity duration-700 ease-in-out ${isSearching && hasValue ? 'animate-pulse-slow opacity-100' : 'opacity-0'} `}
+            className={`absolute inset-0 transition-opacity duration-700 ease-in-out ${isSearching && hasValue ? 'animate-pulse-slow opacity-100' : 'opacity-0'} `}
           />
           <div
             className={`from-accent-primary/5 via-accent-primary/10 to-accent-primary/5 absolute inset-0 bg-gradient-to-r blur-xl transition-all duration-700 ease-in-out ${isSearching && hasValue ? 'animate-gradient-x opacity-100' : 'opacity-0'} `}