Drop the per-class colours

src/articles/ArticlePreview.js

@@ -6,7 +6,6 @@ import "react-toastify/dist/ReactToastify.css";
 import { isMobile } from "../utils/misc/browserDetection";
 import * as s from "./ArticlePreview.sc";
 import { MetaStrip, MetaItem, MetaLink, MetaTag } from "../components/MetaStrip.sc";
-import { classColor } from "../utils/misc/classColor";
 import RedirectionNotificationModal from "../components/redirect_notification/RedirectionNotificationModal";
 import Feature from "../features/Feature";
 import strings from "../i18n/definitions";
@@ -296,14 +295,9 @@ export default function ArticlePreview({
   // Which class a text came from. Only for a student in more than one class:
   // with a single class it is the same answer on every row, and the tab itself
   // already says it. Computed here because both layouts below render a strip.
-  // The class's own colour, matching its chip in the filter bar above -- the
-  // pair is what lets you skim the list for one class instead of reading every
-  // label. Colour supplements the name, never replaces it.
   const classTags = showClassNames
     ? (article.from_classes || []).map((each) => (
-        <MetaItem key={`class-${each.id}`} style={{ color: classColor(each.id) }}>
-          {each.name}
-        </MetaItem>
+        <MetaTag key={`class-${each.id}`}>{each.name}</MetaTag>
       ))
     : null;
 

src/articles/ClassroomArticles.js

@@ -14,7 +14,6 @@ import ClassroomOtherLanguages, {
   otherLanguageOptions,
 } from "./ClassroomOtherLanguages";
 import { ALL, buildClassFilters, filterTexts } from "../utils/misc/classFilters";
-import { classColorTint } from "../utils/misc/classColor";
 import * as f from "../teacher/styledComponents/TextFilterBar.sc";
 
 export default function ClassroomArticles() {
@@ -110,23 +109,18 @@ export default function ClassroomArticles() {
       <br />
       {inMoreThanOneClass && (
         <f.FilterBar>
-          {classFilters.map((filter) => {
-            const tint = filter.id === ALL ? {} : classColorTint(filter.id);
-            return (
+          {classFilters.map((filter) => (
             <f.Chip
               key={filter.id}
               type="button"
               $on={activeClass === filter.id}
-              $hue={tint.hue}
-              $wash={tint.wash}
               aria-pressed={activeClass === filter.id}
               onClick={() => setActiveClass(filter.id)}
             >
               {filter.name}
               <f.ChipCount>{filter.count}</f.ChipCount>
             </f.Chip>
-            );
-          })}
+          ))}
         </f.FilterBar>
       )}
       <SortingButtons articleList={articleList} originalList={originalList} setArticleList={setArticleList} />

src/teacher/styledComponents/TextFilterBar.sc.js

@@ -25,23 +25,6 @@ export const Chip = styled(Tag).attrs({ className: "tiny" })`
   white-space: nowrap;
   border-style: ${({ $dashed }) => ($dashed ? "dashed" : "solid")};
 
-  /* $hue/$wash give a class its own colour, so a chip and the tags on the rows
-     below it read as the same thing. Selected fills with the hue; unselected
-     is a wash of it, which is alpha over the ground and so works in both
-     themes. Chips without a hue (All, Not shared) keep the neutral look. */
-  ${({ $hue, $wash, $on }) =>
-    $hue &&
-    ($on
-      ? `border-color: ${$hue}; background-color: ${$hue}; color: white;`
-      : `border-color: ${$hue}; background-color: ${$wash}; color: ${$hue};`)}
-
-  &,
-  &.small {
-    ${({ $on }) =>
-      $on
-        ? `border-color: ${darkBlue}; background-color: ${darkBlue}; color: white; font-weight: 600;`
-        : `color: var(--text-secondary); font-weight: 500;`}
-  }
 `;
 
 export const ChipCount = styled.span`