[Light Mode] Force dark background for pylon icons

apps/remnant2toolkit/app/(builds)/_components/build-card.tsx

@@ -157,7 +157,7 @@ export function BuildCard({
               </div>
               {buildState.isPatchAffected && (
                 <div className="mb-2 flex flex-row items-center justify-start gap-x-2">
-                  <p className="border border-red-500 p-2 text-left text-xs font-bold text-red-500">
+                  <p className="border border-accent3-500 p-2 text-left text-xs font-bold text-accent3-500">
                     This build might have been affected by a past update.
                   </p>
                 </div>

apps/remnant2toolkit/app/(builds)/_components/import-loadouts-dialog.tsx

@@ -48,7 +48,7 @@ export function ImportLoadoutsDialog({
           from profile.sav files.
         </BaseDialogDescription>
         <BaseDialogDescription>
-          <span className="font-bold text-red-500 underline">
+          <span className="font-bold text-accent3-500 underline">
             This feature is in beta and may have bugs. Please report any issues
             you find in the Discord, or by clicking the Cog then Bug icon at the
             lower right of the site.

apps/remnant2toolkit/app/(builds)/_constants/all-build-tags.ts

@@ -18,9 +18,9 @@ export const ALL_BUILD_TAGS: BuildTag[] = [
     category: 'Type',
     // TODO
     colors: {
-      bg: 'bg-green-400/10',
-      hover: 'hover:bg-green-400/20',
-      text: 'text-green-700 dark:text-green-500',
+      bg: 'bg-accent2-400/10',
+      hover: 'hover:bg-accent2-400/20',
+      text: 'text-accent2-500',
     },
   },
   {
@@ -29,9 +29,9 @@ export const ALL_BUILD_TAGS: BuildTag[] = [
     category: 'Type',
     // TODO
     colors: {
-      bg: 'bg-red-400/10',
-      hover: 'hover:bg-red-400/20',
-      text: 'text-red-700 dark:text-red-500',
+      bg: 'bg-accent3-400/10',
+      hover: 'hover:bg-accent3-400/20',
+      text: 'text-accent3-500',
     },
   },
   {
@@ -51,9 +51,9 @@ export const ALL_BUILD_TAGS: BuildTag[] = [
     category: 'Tag',
     // TODO
     colors: {
-      bg: 'bg-green-400/10',
-      hover: 'hover:bg-green-400/20',
-      text: 'text-green-700 dark:text-green-500',
+      bg: 'bg-accent2-400/10',
+      hover: 'hover:bg-accent2-400/20',
+      text: 'text-accent2-500',
     },
   },
   {
@@ -81,9 +81,9 @@ export const ALL_BUILD_TAGS: BuildTag[] = [
     value: 'Ranged',
     category: 'Tag',
     colors: {
-      bg: 'bg-green-400/10',
-      hover: 'hover:bg-green-400/20',
-      text: 'text-green-700 dark:text-green-500',
+      bg: 'bg-accent2-400/10',
+      hover: 'hover:bg-accent2-400/20',
+      text: 'text-accent2-500',
     },
   },
   {
@@ -121,9 +121,9 @@ export const ALL_BUILD_TAGS: BuildTag[] = [
     value: 'Tank',
     category: 'Tag',
     colors: {
-      bg: 'bg-red-400/10',
-      hover: 'hover:bg-red-400/20',
-      text: 'text-red-700 dark:text-red-500',
+      bg: 'bg-accent3-400/10',
+      hover: 'hover:bg-accent3-400/20',
+      text: 'text-accent3-500',
     },
   },
 ];

apps/remnant2toolkit/app/(builds)/builder/_components/armor-suggestion-dialog.tsx

@@ -154,7 +154,7 @@ export function ArmorSuggestionDialog({
   if (allSlotsFull) {
     return (
       <ArmorInfoContainer {...armorInfoProps}>
-        <div className="text-md mt-4 text-center font-semibold text-red-500">
+        <div className="text-md mt-4 text-center font-semibold text-accent3-500">
           All armor slots are full. Clear at least one slot for suggestions.
         </div>
       </ArmorInfoContainer>
@@ -209,7 +209,7 @@ export function ArmorSuggestionDialog({
       </div>
       {armorSuggestions.length === 0 && (
         <div className="flex flex-col items-center justify-center">
-          <div className="text-md mt-4 text-center font-bold text-red-500">
+          <div className="text-md mt-4 text-center font-bold text-accent3-500">
             No armor suggestions found for the selected weight class.
           </div>
         </div>

apps/remnant2toolkit/app/(builds)/builder/_components/builder-help.tsx

@@ -66,7 +66,7 @@ const sections = [
           Item Tracker
         </BaseLink>
         , you can click the <strong>Toggle Collected</strong> button to add the{' '}
-        <OwnershipIcon className="h-4 w-4 text-green-500" /> icon to items you
+        <OwnershipIcon className="h-4 w-4 text-accent2-500" /> icon to items you
         own in the build.
       </>
     ),

apps/remnant2toolkit/app/(builds)/builder/_components/builder.tsx

@@ -507,7 +507,7 @@ export function Builder({
       />
 
       {buildState.isPublic === false && !isScreenshotMode && (
-        <div className="text-md mb-4 flex flex-col items-center justify-center gap-4 border-2 border-red-500 p-4 font-semibold text-red-500">
+        <div className="text-md mb-4 flex flex-col items-center justify-center gap-4 border-2 border-accent3-500 p-4 font-semibold text-accent3-500">
           This build is currently marked private. Other users will be unable to
           view it until you mark it public.
         </div>
@@ -667,7 +667,7 @@ export function Builder({
           ) : null}
           {buildState.isPatchAffected && (
             <div className="mb-2 flex items-center justify-center text-sm text-gray-400">
-              <p className="border border-red-500 p-2 text-left text-xs font-bold text-red-500">
+              <p className="border border-accent3-500 p-2 text-left text-xs font-bold text-accent3-500">
                 This build might have been affected by a past update. If you
                 created this build, please update it and untoggle the
                 patch-affected setting.
@@ -1221,7 +1221,7 @@ export function Builder({
             className="mb-4 flex w-full flex-col items-center justify-center"
           >
             {!hasBossRushBuildTag && !isScreenshotMode && isEditable && (
-              <span className="mb-1 text-sm text-red-500">
+              <span className="mb-1 text-sm text-accent3-500">
                 Add the Boss Rush tag to add pylons to this build.
               </span>
             )}

apps/remnant2toolkit/app/(builds)/builder/_components/traits-container.tsx

@@ -177,7 +177,7 @@ export function TraitsContainer({
             <span
               className={cn(
                 'text-lg font-bold',
-                totalTraitAmount > getTraitCount(buildState) && 'text-red-500',
+                totalTraitAmount > getTraitCount(buildState) && 'text-accent3-500',
               )}
             >
               {totalTraitAmount}
@@ -323,7 +323,7 @@ export function TraitsContainer({
                   <OwnershipIcon
                     className={cn(
                       'h-3 w-3',
-                      traitItem.isOwned ? 'text-green-500' : 'text-red-500',
+                      traitItem.isOwned ? 'text-accent2-500' : 'text-accent3-500',
                     )}
                   />
                 </button>
@@ -337,7 +337,7 @@ export function TraitsContainer({
                   aria-label="Remove Trait"
                 >
                   <CloseCircleIcon
-                    className="h-5 w-5 text-red-500"
+                    className="h-5 w-5 text-accent3-500"
                     aria-hidden="true"
                   />
                 </BaseButton>

apps/remnant2toolkit/app/(builds)/builder/create/page.tsx

@@ -68,7 +68,7 @@ export default async function Page() {
           />
           <div
             className={cn(
-              'absolute mb-2 flex h-full w-full flex-col items-center justify-start p-2 text-2xl font-bold text-red-500',
+              'absolute mb-2 flex h-full w-full flex-col items-center justify-start p-2 text-2xl font-bold text-accent3-500',
               ZINDEXES.BUILD_FEATURES_DISABLED,
             )}
           >

apps/remnant2toolkit/app/(builds)/builder/page.tsx

@@ -46,7 +46,7 @@ export default async function Page() {
       />
 
       {session?.user ? (
-        <div className="text-surface-solid my-4 max-w-lg rounded-md border border-red-500 px-2 py-1 text-left">
+        <div className="text-surface-solid my-4 max-w-lg rounded-md border border-accent3-500 px-2 py-1 text-left">
           <h3 className="text-center text-2xl font-bold">
             Features limited on this page!
           </h3>
@@ -77,7 +77,7 @@ export default async function Page() {
           </ul>
         </div>
       ) : (
-        <div className="text-surface-solid mb-2 rounded-md border border-red-500 px-2 py-1 text-left">
+        <div className="text-surface-solid mb-2 rounded-md border border-accent3-500 px-2 py-1 text-left">
           <h3 className="text-center text-lg font-bold">
             You are not signed in, so your features are limited.
           </h3>

apps/remnant2toolkit/app/(enemies)/world-save-archive/page.tsx

@@ -19,7 +19,7 @@ export default function Page() {
           own world saves, and how to install the world saves provided by the
           Remnant 2 Toolkit.{' '}
         </p>
-        <p className="text-md mb-2 text-red-500">
+        <p className="text-md mb-2 text-accent3-500">
           It is possible to lose your Cass inventory and other progress. While
           restoring a backup save should fix this, at least one user stated it
           did not.

apps/remnant2toolkit/app/(features)/_genesis-code/_components/genesis-code-display.tsx

@@ -53,7 +53,7 @@ export function GenesisCodeDisplay() {
             </div>
           </div>
         </div>
-        <p className="text-center text-sm text-red-500">
+        <p className="text-center text-sm text-accent3-500">
           Note: If your code doesn't match, restart the game
         </p>
       </div>

apps/remnant2toolkit/app/(items)/_components/import-items-dialog.tsx

@@ -37,7 +37,7 @@ export function ImportItemsDialog({
           <BaseCode>profile.sav</BaseCode>
         </BaseDialogDescription>
         <BaseDialogDescription>
-          <span className="text-red-500">
+          <span className="text-accent3-500">
             Note: This will overwrite any existing discovered items and then
             reimport.
           </span>

apps/remnant2toolkit/app/(items)/_components/item-button.tsx

@@ -17,6 +17,8 @@ import { ArchetypeItem } from '@/app/(items)/_types/archetype-item';
 import { type Item } from '@/app/(items)/_types/item';
 import { SKIPPED_ITEM_TRACKER_CATEGORIES } from '@/app/(items)/item-tracker/_constants/trackable-items';
 
+import { PylonItem } from '../_types/pylon-item';
+
 /**
  * Some words are too long to fit in the item label on the builder
  * and need to be manually broken up
@@ -262,7 +264,7 @@ export function ItemButton({
             <OwnershipIcon
               className={cn(
                 'h-3 w-3 ',
-                item.isOwned ? 'text-green-500' : 'text-red-500',
+                item.isOwned ? 'text-accent2-500' : 'text-accent3-500',
               )}
             />
           </button>
@@ -280,10 +282,10 @@ export function ItemButton({
             !isEnemy(item) &&
             item.optional &&
             'border-secondary-400 border-b-0 border-dashed',
-          // If the item is an archetype item, give it a black background
+          // If the item uses an all-white foreground, force a solid black background
           item &&
             !isEnemy(item) &&
-            ArchetypeItem.isArchetypeItem(item) &&
+            (ArchetypeItem.isArchetypeItem(item) || PylonItem.isPylonItem(item)) &&
             'bg-black',
           variant === 'default' && 'h-[66px] w-[66px] rounded-t-lg',
           variant === 'large' && 'h-[99px] w-[99px] rounded-t-lg',

apps/remnant2toolkit/app/(items)/_components/item-tag-suggestion-dialog.tsx

@@ -801,7 +801,7 @@ export function ItemTagSuggestionDialog({
           </div>
           {itemSuggestions.length === 0 && (
             <div className="flex flex-col items-center justify-center">
-              <div className="text-md mt-4 text-center font-bold text-red-500">
+              <div className="text-md mt-4 text-center font-bold text-accent3-500">
                 No item suggestions found.
               </div>
             </div>

apps/remnant2toolkit/app/(items)/item-lookup/_constants/inline-tokens.ts

@@ -131,7 +131,7 @@ export const INLINE_TOKENS = [
   {
     type: 'Elemental Damage',
     token: 'Elemental Damage',
-    color: 'text-[#0a7552] dark:text-green-500',
+    color: 'text-[#0a7552] dark:text-accent2-500',
     description: `Acid, Corrosive, Fire, Shock, certain skills and mods.`,
   },
   {

apps/remnant2toolkit/app/(items)/item-quiz/_components/stages/game-over-stage.tsx

@@ -31,7 +31,7 @@ export const GameOverStage = React.memo(
     onStartGame,
   }: Props) => (
     <div className="flex w-full flex-col items-center justify-center">
-      <h2 className="mb-2 text-2xl font-bold text-red-500">
+      <h2 className="mb-2 text-2xl font-bold text-accent3-500">
         {gameTimer <= 0 ? "Time's Up!" : 'Game Over!'}
       </h2>
       <div className="mb-8 flex flex-col items-center justify-center">

apps/remnant2toolkit/app/(items)/item-quiz/layout.tsx

@@ -44,7 +44,7 @@ export default async function Layout({
     >
       <PageHeader title="Item Quiz" subtitle={NAV_ITEMS.itemQuiz.description} />
       {/* {!session?.user?.id ? (
-        <p className="mb-12 w-full text-center text-red-500">
+        <p className="mb-12 w-full text-center text-accent3-500">
           If you are not signed in <span className="font-bold">BEFORE</span>{' '}
           starting the game, your results will not be saved!
         </p>

apps/remnant2toolkit/app/(user)/profile/[profileId]/favorited-builds/page.tsx

@@ -12,7 +12,7 @@ export default async function Page({
 
   if (session?.user?.id !== profileId) {
     return (
-      <p className="text-red-500">You are not authorized to view this page.</p>
+      <p className="text-accent3-500">You are not authorized to view this page.</p>
     );
   }
 

apps/remnant2toolkit/app/(user)/profile/[profileId]/layout.tsx

@@ -150,7 +150,7 @@ export default async function Layout({
     return (
       <>
         <PageHeader title="User Profile Not Found" />
-        <p className="text-lg text-red-500">
+        <p className="text-lg text-accent3-500">
           The user or user profile you are looking for could not be found.
         </p>
       </>

apps/remnant2toolkit/app/(user)/profile/[profileId]/loadouts/page.tsx

@@ -141,7 +141,7 @@ export default async function Page({
 
   if (session?.user?.id !== profileId && !isLoadoutPublic) {
     return (
-      <p className="text-red-500">You are not authorized to view this page.</p>
+      <p className="text-accent3-500">You are not authorized to view this page.</p>
     );
   }
 

apps/remnant2toolkit/app/(user)/profile/_components/profile-stats.tsx

@@ -70,7 +70,7 @@ export async function ProfileStats({ isEditable, profileId }: Props) {
           unit: `/ ${TOTAL_TRACKABLE_ITEM_COUNT}`,
         }}
         isEditable={isEditable}
-        icon={<CheckIcon className="h-[36px] w-[36px] text-green-500" />}
+        icon={<CheckIcon className="h-[36px] w-[36px] text-accent2-500" />}
       />
       <StatBox
         stat={{

packages/tailwind-config/tailwind.config.ts

@@ -75,6 +75,34 @@ const config: Omit<Config, 'content'> = {
           950: 'rgb(var(--color-accent1-950) / <alpha-value>)',
         },
 
+        // These accents are managed by an option separate from the base theme
+        accent2: {
+          50: 'rgb(var(--color-accent2-50) / <alpha-value>)',
+          100: 'rgb(var(--color-accent2-100) / <alpha-value>)',
+          200: 'rgb(var(--color-accent2-200) / <alpha-value>)',
+          300: 'rgb(var(--color-accent2-300) / <alpha-value>)',
+          400: 'rgb(var(--color-accent2-400) / <alpha-value>)',
+          500: 'rgb(var(--color-accent2-500) / <alpha-value>)',
+          600: 'rgb(var(--color-accent2-600) / <alpha-value>)',
+          700: 'rgb(var(--color-accent2-700) / <alpha-value>)',
+          800: 'rgb(var(--color-accent2-800) / <alpha-value>)',
+          900: 'rgb(var(--color-accent2-900) / <alpha-value>)',
+          950: 'rgb(var(--color-accent2-950) / <alpha-value>)',
+        },
+        accent3: {
+          50: 'rgb(var(--color-accent3-50) / <alpha-value>)',
+          100: 'rgb(var(--color-accent3-100) / <alpha-value>)',
+          200: 'rgb(var(--color-accent3-200) / <alpha-value>)',
+          300: 'rgb(var(--color-accent3-300) / <alpha-value>)',
+          400: 'rgb(var(--color-accent3-400) / <alpha-value>)',
+          500: 'rgb(var(--color-accent3-500) / <alpha-value>)',
+          600: 'rgb(var(--color-accent3-600) / <alpha-value>)',
+          700: 'rgb(var(--color-accent3-700) / <alpha-value>)',
+          800: 'rgb(var(--color-accent3-800) / <alpha-value>)',
+          900: 'rgb(var(--color-accent3-900) / <alpha-value>)',
+          950: 'rgb(var(--color-accent3-950) / <alpha-value>)',
+        },
+
         // These are aliases for existing tailwind colors
         // The CSS variable indirection allows them to adapt to the theme
         // If you are using a tailwind color that isn't here yet, it will NOT look great in light modes

packages/ui/src/base/badge/index.tsx

@@ -8,7 +8,7 @@ import { BaseLink } from '../link';
 import { cn } from '../../utils/classnames';
 
 const colors = {
-  red: 'ui-bg-red-500/15 ui-text-red-700 group-data-[hover]:ui-bg-red-500/25 dark:ui-bg-red-500/10 dark:ui-text-red-400 dark:group-data-[hover]:ui-bg-red-500/20',
+  red: 'ui-bg-accent3-500/15 ui-text-accent3-700 group-data-[hover]:ui-bg-accent3-500/25 dark:ui-bg-accent3-500/10 dark:ui-text-accent3-400 dark:group-data-[hover]:ui-bg-accent3-500/20',
   orange:
     'ui-bg-orange-500/15 ui-text-orange-700 group-data-[hover]:ui-bg-orange-500/25 dark:ui-bg-orange-500/10 dark:ui-text-orange-400 dark:group-data-[hover]:ui-bg-orange-500/20',
   amber:
@@ -17,7 +17,7 @@ const colors = {
     'ui-bg-accent1-400/20 ui-text-accent1-700 group-data-[hover]:ui-bg-accent1-400/30 dark:ui-bg-accent1-400/10 dark:ui-text-accent1-300 dark:group-data-[hover]:ui-bg-accent1-400/15',
   lime: 'ui-bg-lime-400/20 ui-text-lime-700 group-data-[hover]:ui-bg-lime-400/30 dark:ui-bg-lime-400/10 dark:ui-text-lime-300 dark:group-data-[hover]:ui-bg-lime-400/15',
   green:
-    'ui-bg-green-500/15 ui-text-green-700 group-data-[hover]:ui-bg-green-500/25 dark:ui-bg-green-500/10 dark:ui-text-green-400 dark:group-data-[hover]:ui-bg-green-500/20',
+    'ui-bg-accent2-500/15 ui-text-accent2-700 group-data-[hover]:ui-bg-accent2-500/25 dark:ui-bg-accent2-500/10 dark:ui-text-accent2-400 dark:group-data-[hover]:ui-bg-accent2-500/20',
   emerald:
     'ui-bg-emerald-500/15 ui-text-emerald-700 group-data-[hover]:ui-bg-emerald-500/25 dark:ui-bg-emerald-500/10 dark:ui-text-emerald-400 dark:group-data-[hover]:ui-bg-emerald-500/20',
   teal: 'ui-bg-teal-500/15 ui-text-teal-700 group-data-[hover]:ui-bg-teal-500/25 dark:ui-bg-teal-500/10 dark:ui-text-teal-300 dark:group-data-[hover]:ui-bg-teal-500/20',

packages/ui/src/base/fieldset/index.tsx

@@ -114,7 +114,7 @@ export function BaseErrorMessage({
       {...props}
       className={cn(
         className,
-        'ui-text-base/6 ui-text-red-500 data-[disabled]:ui-opacity-50 sm:ui-text-sm/6',
+        'ui-text-base/6 ui-text-accent3-500 data-[disabled]:ui-opacity-50 sm:ui-text-sm/6',
       )}
       data-slot="error"
     />