chore: cleanup all text colors (#2872)

dailydotdev · Mar 28, 2024 · f4a4090 · f4a4090
1 parent 992fc63
commit f4a4090
Show file tree

Hide file tree

Showing 233 changed files with 448 additions and 547 deletions.
diff --git a/packages/extension/src/companion/CompanionEngagements.tsx b/packages/extension/src/companion/CompanionEngagements.tsx
@@ -36,7 +36,7 @@ export function CompanionEngagements({
 
   return (
     <div
-      className="flex items-center gap-x-4 py-1 text-theme-label-tertiary typo-callout"
+      className="flex items-center gap-x-4 py-1 text-text-tertiary typo-callout"
       data-testid="statsBar"
     >
       {post.numUpvotes <= 0 && <span>Be the first to upvote</span>}

diff --git a/packages/extension/src/companion/CompanionPermission.tsx b/packages/extension/src/companion/CompanionPermission.tsx
@@ -31,7 +31,7 @@ const CompanionPermissionComponent = (
           {title}
         </p>
         <p
-          className="my-2 text-theme-label-tertiary"
+          className="my-2 text-text-tertiary"
           data-testid="companion_permission_description"
         >
           {description}

diff --git a/packages/extension/src/companion/CompanionPopupButton.tsx b/packages/extension/src/companion/CompanionPopupButton.tsx
@@ -55,7 +55,7 @@ export const CompanionPopupButton = (): ReactElement => {
       container={{
         paddingClassName: 'px-6 py-4',
         bgClassName: 'bg-background-default',
-        textClassName: 'text-theme-label-primary typo-callout',
+        textClassName: 'text-text-primary typo-callout',
         className:
           'border border-accent-cabbage-default w-[30.75rem] whitespace-pre-wrap shadow-2',
       }}
@@ -76,7 +76,7 @@ export const CompanionPopupButton = (): ReactElement => {
             secondary={showCompanionPermission}
             className={
               showCompanionPermission
-                ? 'h-7 w-7 text-theme-label-primary'
+                ? 'h-7 w-7 text-text-primary'
                 : 'h-6 w-6 text-accent-cabbage-default'
             }
           />

diff --git a/packages/extension/src/newtab/CardSelection.tsx b/packages/extension/src/newtab/CardSelection.tsx
@@ -29,13 +29,11 @@ export function CardSelection({
       type="button"
     >
       {isActive && (
-        <VIcon className="absolute -right-3 -top-3 h-6 w-6 rounded-8 bg-theme-label-primary text-background-default" />
+        <VIcon className="absolute -right-3 -top-3 h-6 w-6 rounded-8 bg-text-primary text-background-default" />
       )}
       {icon}
       <span className="font-bold typo-callout">{title}</span>
-      <span className="text-theme-label-tertiary typo-footnote">
-        {description}
-      </span>
+      <span className="text-text-tertiary typo-footnote">{description}</span>
     </button>
   );
 }
diff --git a/packages/extension/src/newtab/DndModal.tsx b/packages/extension/src/newtab/DndModal.tsx
@@ -61,9 +61,7 @@ export default function DndModal({
     >
       <Modal.Header title="Pause new tab" />
       <Modal.Body>
-        <p className="text-theme-label-secondary typo-callout">
-          {getDescription()}
-        </p>
+        <p className="text-text-secondary typo-callout">{getDescription()}</p>
         {!isActive && (
           <div className="mt-6">
             <TextField

diff --git a/packages/extension/src/newtab/ShortcutLinksModal.tsx b/packages/extension/src/newtab/ShortcutLinksModal.tsx
@@ -74,7 +74,7 @@ export default function CustomLinksModal({
             />
           </nav>
           {!isManual && (
-            <p className="mb-6 text-theme-label-tertiary typo-callout">
+            <p className="mb-6 text-text-tertiary typo-callout">
               To edit links, please switch to &quot;My shortcuts&quot; mode
             </p>
           )}

diff --git a/packages/shared/src/components/BookmarkEmptyScreen.tsx b/packages/shared/src/components/BookmarkEmptyScreen.tsx
@@ -6,13 +6,13 @@ import { EmptyScreenIcon } from './EmptyScreen';
 
 export default function BookmarkEmptyScreen(): ReactElement {
   return (
-    <main className="withNavBar inset-0 mx-auto mt-12 flex max-w-full flex-col items-center justify-center px-6 text-theme-label-secondary">
+    <main className="withNavBar inset-0 mx-auto mt-12 flex max-w-full flex-col items-center justify-center px-6 text-text-secondary">
       <BookmarkIcon
-        className="icon m-0 text-theme-label-tertiary"
+        className="icon m-0 text-text-tertiary"
         style={EmptyScreenIcon.style}
       />
       <h1
-        className="my-4 text-center text-theme-label-primary typo-title1"
+        className="my-4 text-center text-text-primary typo-title1"
         style={{ maxWidth: '32.5rem' }}
       >
         Your bookmark list is empty.

diff --git a/packages/shared/src/components/CalendarHeatmap.tsx b/packages/shared/src/components/CalendarHeatmap.tsx
@@ -26,7 +26,7 @@ const DAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
 
 const weekdayLabelSize = 50;
 const labelStyle: CSSProperties = {
-  fill: 'var(--theme-label-primary)',
+  fill: 'var(--theme-text-primary)',
   fontSize: '13',
   lineHeight: '18',
 };
@@ -36,13 +36,13 @@ const binsAttributes: React.SVGProps<SVGRectElement>[] = [
     fill: 'var(--theme-divider-quaternary)',
   },
   {
-    fill: 'var(--theme-label-disabled)',
+    fill: 'var(--theme-text-disabled)',
   },
   {
-    fill: 'var(--theme-label-quaternary)',
+    fill: 'var(--theme-text-quaternary)',
   },
   {
-    fill: 'var(--theme-label-primary)',
+    fill: 'var(--theme-text-primary)',
   },
 ];
 

diff --git a/packages/shared/src/components/Custom404.tsx b/packages/shared/src/components/Custom404.tsx
@@ -20,7 +20,7 @@ export default function Custom404({ children }: Custom404Props): ReactElement {
       <div className="flex w-full max-w-[26.25rem] flex-col items-center gap-6 text-center">
         <img src={notFound} alt="404 - Page not found" />
         <h1 className="font-bold typo-large-title">Why are you here?</h1>
-        <p className="text-theme-label-tertiary typo-callout">
+        <p className="text-text-tertiary typo-callout">
           You’re not supposed to be here.
         </p>
         <Link href="/" passHref>

diff --git a/packages/shared/src/components/EmptyScreen.tsx b/packages/shared/src/components/EmptyScreen.tsx
@@ -13,7 +13,7 @@ export const EmptyScreenTitle = classed('h2', 'my-4 text-center typo-title1');
 
 export const EmptyScreenDescription = classed(
   'p',
-  'p-0 m-0 text-center text-theme-label-secondary typo-body',
+  'p-0 m-0 text-center text-text-secondary typo-body',
 );
 
 export const EmptyScreenButton = ({
@@ -32,6 +32,6 @@ export const EmptyScreenButton = ({
 );
 
 export const EmptyScreenIcon = {
-  className: 'text-theme-label-disabled',
+  className: 'text-text-disabled',
   style: { fontSize: '5rem', width: 'auto', height: 'auto' },
 };
diff --git a/packages/shared/src/components/KeyboardShortcutLabel.tsx b/packages/shared/src/components/KeyboardShortcutLabel.tsx
@@ -28,11 +28,11 @@ export const KeyboadShortcutLabel = ({
       {keys.map((item, index) => {
         return (
           <Fragment key={item}>
-            <kbd className="flex min-w-5 justify-center rounded-8 border border-theme-divider-tertiary bg-background-subtle px-2 py-0.5 font-sans text-theme-label-tertiary typo-footnote">
+            <kbd className="flex min-w-5 justify-center rounded-8 border border-theme-divider-tertiary bg-background-subtle px-2 py-0.5 font-sans text-text-tertiary typo-footnote">
               {item}
             </kbd>
             {index !== keys.length - 1 && (
-              <span className="mx-1 py-0.5 text-theme-label-tertiary typo-footnote">
+              <span className="mx-1 py-0.5 text-text-tertiary typo-footnote">
                 +
               </span>
             )}

diff --git a/packages/shared/src/components/Loader.module.css b/packages/shared/src/components/Loader.module.css
@@ -29,11 +29,11 @@
 
 .inner.invert {
   &:before {
-    border-top-color: var(--theme-label-invert);
+    border-top-color: var(--theme-surface-invert);
   }
 
   &:after {
-    border-color: var(--theme-label-invert);
+    border-color: var(--theme-surface-invert);
   }
 }
 

diff --git a/packages/shared/src/components/PromotionalBanner.tsx b/packages/shared/src/components/PromotionalBanner.tsx
@@ -19,7 +19,7 @@ const classNamesByTheme: Record<BannerTheme, string[]> = {
   ],
   [BannerCustomTheme.WhitePepper]: [
     'bg-surface-primary',
-    'text-theme-label-invert',
+    'text-surface-invert',
   ],
   [Theme.Avocado]: ['bg-theme-color-avocado', 'text-raw-pepper-90'],
   [Theme.Bacon]: ['bg-theme-color-bacon', 'text-white'],

diff --git a/packages/shared/src/components/RadialProgress.module.css b/packages/shared/src/components/RadialProgress.module.css
@@ -18,7 +18,7 @@
       var(--radial-progress-transition-delay);
 
     &:global(.primary) {
-      stroke: var(--theme-label-primary);
+      stroke: var(--theme-text-primary);
     }
   }
 }
diff --git a/packages/shared/src/components/Rank.tsx b/packages/shared/src/components/Rank.tsx
diff --git a/packages/shared/src/components/RankProgress.module.css b/packages/shared/src/components/RankProgress.module.css
@@ -51,18 +51,18 @@
 .radialProgress {
   transform: rotate(180deg);
   font-size: inherit;
-  --radial-progress-step: var(--theme-label-disabled);
-  --radial-progress-completed-step: var(--theme-label-disabled);
+  --radial-progress-step: var(--theme-text-disabled);
+  --radial-progress-completed-step: var(--theme-text-disabled);
   --radial-progress-transition-delay: 0.3s;
 }
 
 .rank {
-  --stop-color1: var(--theme-label-disabled);
-  --stop-color2: var(--theme-label-disabled);
+  --stop-color1: var(--theme-text-disabled);
+  --stop-color2: var(--theme-text-disabled);
 
   &.hasRank {
-    --stop-color1: var(--theme-label-tertiary);
-    --stop-color2: var(--theme-label-tertiary);
+    --stop-color1: var(--theme-text-tertiary);
+    --stop-color2: var(--theme-text-tertiary);
   }
 
   & stop {

diff --git a/packages/shared/src/components/RankProgress.tsx b/packages/shared/src/components/RankProgress.tsx
@@ -356,7 +356,7 @@ export function RankProgress({
               <span className="font-bold text-theme-rank typo-callout">
                 {animatingProgress ? getLevelText : getRankName(shownRank)}
               </span>
-              <span className="text-theme-label-tertiary typo-footnote">
+              <span className="text-text-tertiary typo-footnote">
                 {getNextRankText({
                   nextRank,
                   rank,

diff --git a/packages/shared/src/components/RecommendedMention.tsx b/packages/shared/src/components/RecommendedMention.tsx
@@ -27,7 +27,7 @@ export function RecommendedMention({
 
   return (
     <ul
-      className="flex w-70 flex-col overflow-hidden rounded-16 border border-theme-divider-secondary text-theme-label-primary"
+      className="flex w-70 flex-col overflow-hidden rounded-16 border border-theme-divider-secondary text-text-primary"
       role="listbox"
     >
       {users.map((user, index) => (

diff --git a/packages/shared/src/components/RenderMarkdown.tsx b/packages/shared/src/components/RenderMarkdown.tsx
@@ -150,7 +150,7 @@ const RenderMarkdown = ({
             <>
               {!inline && (
                 <div className="flex items-center justify-between bg-theme-float px-5 py-2">
-                  <span className="inline leading-8 text-theme-label-tertiary">
+                  <span className="inline leading-8 text-text-tertiary">
                     {language || 'code'}
                   </span>
 

diff --git a/packages/shared/src/components/ReputationUserBadge.tsx b/packages/shared/src/components/ReputationUserBadge.tsx
@@ -35,7 +35,7 @@ export const ReputationUserBadge = ({
       <div>
         <UserBadge
           {...rest}
-          className={classNames(className, 'text-theme-label-primary')}
+          className={classNames(className, 'text-text-primary')}
           content={largeNumberFormat(user.reputation)}
           Icon={ReputationIcon}
           iconProps={{

diff --git a/packages/shared/src/components/SearchEmptyScreen.tsx b/packages/shared/src/components/SearchEmptyScreen.tsx
@@ -5,12 +5,9 @@ import { IconSize } from './Icon';
 export default function SearchEmptyScreen(): ReactElement {
   return (
     <div className="flex w-full max-w-[32rem] flex-col items-center gap-4 self-center px-6">
-      <MagnifyingIcon
-        className="text-theme-label-disabled"
-        size={IconSize.XXXLarge}
-      />
+      <MagnifyingIcon className="text-text-disabled" size={IconSize.XXXLarge} />
       <h2 className="text-center typo-title2">No results found</h2>
-      <p className="text-center text-theme-label-secondary typo-callout">
+      <p className="text-center text-text-secondary typo-callout">
         We cannot find the posts you are searching for. 🤷‍♀️
       </p>
     </div>

diff --git a/packages/shared/src/components/Settings.tsx b/packages/shared/src/components/Settings.tsx
@@ -28,7 +28,7 @@ const densities = [
 const Section = classed('section', 'flex flex-col font-bold mt-6');
 const SectionTitle = classed(
   'h3',
-  'text-theme-label-tertiary mb-4 font-bold typo-footnote',
+  'text-text-tertiary mb-4 font-bold typo-footnote',
 );
 const SectionContent = classed(
   'div',

diff --git a/packages/shared/src/components/ShareBar.tsx b/packages/shared/src/components/ShareBar.tsx
@@ -68,7 +68,7 @@ export default function ShareBar({ post }: ShareBarProps): ReactElement {
 
   return (
     <WidgetContainer className="hidden flex-col p-3 laptop:flex">
-      <p className="mb-4 text-theme-label-tertiary typo-callout">
+      <p className="mb-4 text-text-tertiary typo-callout">
         Would you recommend this post?
       </p>
       <div className="grid grid-cols-4 gap-2 gap-y-4">

diff --git a/packages/shared/src/components/ShareNewCommentPopup.tsx b/packages/shared/src/components/ShareNewCommentPopup.tsx
@@ -27,7 +27,7 @@ import { getCommentHash } from '../graphql/comments';
 import { IconSize } from './Icon';
 import { ModalClose } from './modals/common/ModalClose';
 
-const ShareButton = classed(Button, 'text-theme-label-primary');
+const ShareButton = classed(Button, 'text-text-primary');
 interface ShareNewCommentPopupProps {
   onRequestClose: () => void;
   commentId: string;
@@ -57,7 +57,7 @@ export default function ShareNewCommentPopup({
       <h2 className="mt-2 typo-title3">
         That&apos;s a great comment, {user.name?.split(' ')[0]}!
       </h2>
-      <div className="mb-6 mt-4 text-theme-label-tertiary typo-callout">
+      <div className="mb-6 mt-4 text-text-tertiary typo-callout">
         Discussions are super fun when shared with friends and team members.
         Give it a try!
       </div>

diff --git a/packages/shared/src/components/TrustedCompanies.tsx b/packages/shared/src/components/TrustedCompanies.tsx
@@ -71,15 +71,15 @@ const TrustedCompanies = ({
         className,
       )}
     >
-      <p className="relative z-3 max-w-[15rem] text-center text-theme-label-quaternary typo-callout tablet:max-w-full tablet:flex-1">
+      <p className="relative z-3 max-w-[15rem] text-center text-text-quaternary typo-callout tablet:max-w-full tablet:flex-1">
         Trusted by 350K+ developers from the world&apos;s leading companies
       </p>
 
       <div className="talet:flex-1 relative z-3 flex flex-wrap items-start justify-center gap-2 laptop:gap-6">
         {Object.values(TRUSTES_COMPANIES_MAP).map(({ Icon, label }) => (
           <Icon
             key={`trusted-company-${label}`}
-            className={classNames('flex-1 text-theme-label-disabled')}
+            className={classNames('flex-1 text-text-disabled')}
             size={iconSize}
           />
         ))}

diff --git a/packages/shared/src/components/auth/AuthDefault.tsx b/packages/shared/src/components/auth/AuthDefault.tsx
@@ -142,7 +142,7 @@ const AuthDefault = ({
     <>
       <AuthHeader simplified={simplified} title={title} />
       {simplified && !shouldLogin && (
-        <p className="mt-3 whitespace-pre-line px-6 text-center text-theme-label-secondary typo-body">
+        <p className="mt-3 whitespace-pre-line px-6 text-center text-text-secondary typo-body">
           Once you sign up, your personal feed will be ready to explore.
         </p>
       )}

diff --git a/packages/shared/src/components/auth/AuthModalFooter.tsx b/packages/shared/src/components/auth/AuthModalFooter.tsx
@@ -35,10 +35,7 @@ function AuthModalFooter({
         <Modal.Text className={className?.body}>{text.body}</Modal.Text>
       )}
       <ClickableText
-        className={classNames(
-          className?.button,
-          'ml-1 !text-theme-label-primary',
-        )}
+        className={classNames(className?.button, 'ml-1 !text-text-primary')}
         inverseUnderline
         onClick={onClick}
       >

diff --git a/packages/shared/src/components/auth/AuthSignBack.tsx b/packages/shared/src/components/auth/AuthSignBack.tsx
@@ -56,7 +56,7 @@ export const AuthSignBack = ({
     <span className="flex flex-1 flex-col">
       <AuthHeader simplified={simplified} title="Welcome back!" />
       <AuthContainer className="items-center">
-        <p className="mb-2 text-center text-theme-label-secondary typo-callout">
+        <p className="mb-2 text-center text-text-secondary typo-callout">
           Log in to access your account
           {isConnectedAccount ? (
             <>
@@ -75,7 +75,7 @@ export const AuthSignBack = ({
           wrapper={(component) => (
             <div className="relative">
               {component}
-              <span className="absolute bottom-0 right-0 rounded-8 bg-white p-1 text-theme-label-invert">
+              <span className="absolute bottom-0 right-0 rounded-8 bg-white p-1 text-surface-invert">
                 {providerItem.icon}
               </span>
             </div>

diff --git a/packages/shared/src/components/auth/AuthenticationBanner.tsx b/packages/shared/src/components/auth/AuthenticationBanner.tsx
@@ -48,7 +48,7 @@ export function AuthenticationBanner(): ReactElement {
             })
           }
           className={{
-            container: 'justify-center text-theme-label-secondary typo-callout',
+            container: 'justify-center text-text-secondary typo-callout',
             login: 'font-bold',
           }}
         />

diff --git a/packages/shared/src/components/auth/EmailVerificationSent.tsx b/packages/shared/src/components/auth/EmailVerificationSent.tsx
@@ -58,7 +58,7 @@ function EmailVerificationSent({
       <SecondaryCenteredBodyText>
         We just sent an email to:
       </SecondaryCenteredBodyText>
-      <SecondaryCenteredBodyText className="mt-4 font-bold text-theme-label-primary">
+      <SecondaryCenteredBodyText className="mt-4 font-bold text-text-primary">
         {email}
       </SecondaryCenteredBodyText>
       <SecondaryCenteredBodyText className="mt-5">

diff --git a/packages/shared/src/components/auth/EmailVerified.tsx b/packages/shared/src/components/auth/EmailVerified.tsx
@@ -26,7 +26,7 @@ function EmailVerified({
           children ? 'h-44' : 'mt-12 h-60',
         )}
       />
-      <p className="px-8 text-center text-theme-label-secondary typo-body tablet:px-12">
+      <p className="px-8 text-center text-text-secondary typo-body tablet:px-12">
         Your email address is now verified.
       </p>
       {children}

diff --git a/packages/shared/src/components/auth/OrDivider.tsx b/packages/shared/src/components/auth/OrDivider.tsx
@@ -10,7 +10,7 @@ function OrDivider({ className, label = 'or' }: OrDividerProps): ReactElement {
   return (
     <div
       className={classNames(
-        'flex items-center justify-center text-theme-label-quaternary typo-callout',
+        'flex items-center justify-center text-text-quaternary typo-callout',
         className,
       )}
     >