Deprecated quaternary-foreground and quinary-foreground by muted-fore…

…ground
cartridge-gg · Jan 13, 2025 · 406472d · 406472d
1 parent 168bd74
commit 406472d
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 65 deletions.
diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -38,20 +38,20 @@ export function StatusTray({ username, validation, error }: StatusTrayProps) {
           "text-xs px-4 py-2 pt-3",
           isError
             ? "text-[#2A2F2A]  border-b border-[#161A17] border-opacity-10"
-            : "text-quaternary-foreground",
+            : "text-muted-foreground",
         )}
       >
         {isError
           ? errorMessage
           : !username
-          ? "Enter a username"
-          : validation.status === "validating"
-          ? "Checking username..."
-          : validation.status === "valid"
-          ? validation.exists
-            ? "Welcome back! Select Login to play"
-            : "Welcome! Let's create a new controller!"
-          : validation.error?.message || "Enter a username"}
+            ? "Enter a username"
+            : validation.status === "validating"
+              ? "Checking username..."
+              : validation.status === "valid"
+                ? validation.exists
+                  ? "Welcome back! Select Login to play"
+                  : "Welcome! Let's create a new controller!"
+                : validation.error?.message || "Enter a username"}
       </div>
       {isTimeoutError && (
         <div className="w-full flex items-center justify-between text-xs font-semibold px-4 py-2 text-secondary">

diff --git a/packages/keychain/src/components/funding/AmountSelection.tsx b/packages/keychain/src/components/funding/AmountSelection.tsx
@@ -30,7 +30,7 @@ export function AmountSelection({
 
   return (
     <div className="flex items-center justify-between">
-      <div className="text-xs font-semibold uppercase text-quaternary-foreground">
+      <div className="text-xs font-semibold uppercase text-muted-foreground">
         Amount
       </div>
       <div className="flex flex-col gap-2">

diff --git a/packages/keychain/src/components/funding/DepositEth.tsx b/packages/keychain/src/components/funding/DepositEth.tsx
@@ -207,7 +207,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                   </div>
 
                   {connectors.length !== 0 && (
-                    <div className="text-xs text-quaternary-foreground font-bold">
+                    <div className="text-xs text-muted-foreground font-bold">
                       OR
                     </div>
                   )}
@@ -219,7 +219,7 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
                     <CopyIcon size="sm" /> copy address
                   </Button>
                   <div className="flex items-center gap-2">
-                    <div className="text-sm text-quaternary-foreground">
+                    <div className="text-sm text-muted-foreground">
                       and send funds to it on
                     </div>
                     <div className="flex items-center gap-2 border border-secondary rounded-md p-1">

diff --git a/packages/profile/src/components/achievements/trophies.tsx b/packages/profile/src/components/achievements/trophies.tsx
@@ -51,7 +51,7 @@ export function Trophies({
   return (
     <div className="flex flex-col gap-4">
       <div className="h-8 bg-secondary py-2 px-3 flex items-center justify-between gap-4 rounded-md overflow-hidden">
-        <p className="uppercase text-xs text-quaternary-foreground font-semibold tracking-wider">
+        <p className="uppercase text-xs text-muted-foreground font-semibold tracking-wider">
           Total
         </p>
         <div className="h-4 grow flex flex-col justify-center items-start bg-quaternary rounded-xl p-1">
@@ -60,7 +60,7 @@ export function Trophies({
             className={cn("grow bg-primary rounded-xl")}
           />
         </div>
-        <p className="text-xs text-quaternary-foreground">
+        <p className="text-xs text-muted-foreground">
           {`${completed} of ${total}`}
         </p>
       </div>
@@ -204,7 +204,7 @@ function Header({
   return (
     <div className="flex gap-x-px items-center h-8">
       <div className="grow h-full p-3 bg-secondary flex items-center">
-        <p className="uppercase text-xs text-quaternary-foreground font-bold tracking-wider">
+        <p className="uppercase text-xs text-muted-foreground font-bold tracking-wider">
           {group}
         </p>
       </div>
@@ -262,7 +262,7 @@ function Pagination({
     >
       <Icon
         className={cn(
-          "text-quaternary-foreground h-4 w-4",
+          "text-muted-foreground h-4 w-4",
           disabled && "opacity-50",
         )}
         variant="solid"

diff --git a/packages/profile/src/components/achievements/trophy.tsx b/packages/profile/src/components/achievements/trophy.tsx
@@ -61,7 +61,7 @@ export function Trophy({
                 {completed && <Timestamp timestamp={timestamp} />}
                 {completed && (
                   <Separator
-                    className="text-quaternary-foreground h-2"
+                    className="text-muted-foreground h-2"
                     orientation="vertical"
                   />
                 )}
@@ -104,13 +104,13 @@ function Task({ task, completed }: { task: Task; completed: boolean }) {
     <div className="flex flex-col gap-2">
       <div className="flex items-center gap-x-2">
         <TaskIcon
-          className="text-quaternary-foreground"
+          className="text-muted-foreground"
           size="xs"
           variant={"default"}
         />
         <p
           className={cn(
-            "text-xs text-quaternary-foreground",
+            "text-xs text-muted-foreground",
             task.count >= task.total && "line-through opacity-50",
           )}
         >
@@ -127,7 +127,7 @@ function Icon({ icon, completed }: { icon: string; completed: boolean }) {
     <div
       className={cn(
         "w-8 h-8 flex items-center justify-center",
-        completed ? "text-primary" : "text-quaternary-foreground",
+        completed ? "text-primary" : "text-muted-foreground",
       )}
     >
       <div className={cn("w-6 h-6", icon, "fa-solid")} />
@@ -173,7 +173,7 @@ function Description({ description }: { description: string }) {
       {visible && (
         <span
           className={cn(
-            "text-quaternary-foreground cursor-pointer",
+            "text-muted-foreground cursor-pointer",
             full && "block",
             bright ? "brightness-150" : "brightness-100",
           )}
@@ -190,7 +190,7 @@ function Description({ description }: { description: string }) {
 
 function Details({ percentage }: { percentage: string }) {
   return (
-    <p className="text-[0.65rem] text-quaternary-foreground">{`${percentage}% of players earned`}</p>
+    <p className="text-[0.65rem] text-muted-foreground">{`${percentage}% of players earned`}</p>
   );
 }
 
@@ -204,7 +204,7 @@ function Earning({
   return (
     <div
       className={cn(
-        "flex items-center gap-1 text-quaternary-foreground font-medium",
+        "flex items-center gap-1 text-muted-foreground font-medium",
         completed && "opacity-50",
       )}
     >
@@ -232,7 +232,7 @@ function Timestamp({ timestamp }: { timestamp: number }) {
   }, [timestamp]);
 
   return (
-    <div className="flex items-center gap-1 text-quaternary-foreground">
+    <div className="flex items-center gap-1 text-muted-foreground">
       <CalendarIcon size="xs" variant="line" />
       <p className="text-xs">{date}</p>
     </div>
@@ -257,19 +257,19 @@ function Progress({
           }}
           className={cn(
             "grow bg-accent-foreground rounded-xl",
-            completed ? "bg-primary" : "text-quaternary-foreground",
+            completed ? "bg-primary" : "text-muted-foreground",
           )}
         />
       </div>
       {count >= total ? (
         <div className="flex items-center gap-x-2">
-          <div className="fa-solid fa-check text-xs text-quaternary-foreground" />
-          <p className="text-xs text-quaternary-foreground font-medium">
+          <div className="fa-solid fa-check text-xs text-muted-foreground" />
+          <p className="text-xs text-muted-foreground font-medium">
             {total > 1 ? `${count.toLocaleString()}` : "Completed"}
           </p>
         </div>
       ) : (
-        <p className="text-xs text-quaternary-foreground font-medium">
+        <p className="text-xs text-muted-foreground font-medium">
           {`${count.toLocaleString()} of ${total.toLocaleString()}`}
         </p>
       )}
@@ -301,8 +301,8 @@ function Track({
         "bg-quaternary h-full p-2 flex items-center transition-all duration-200",
         pinned ? "bg-quaternary" : "bg-secondary",
         hovered &&
-          (enabled || pinned) &&
-          "opacity-90 bg-secondary/50 cursor-pointer",
+        (enabled || pinned) &&
+        "opacity-90 bg-secondary/50 cursor-pointer",
         !enabled && !pinned && "cursor-not-allowed",
       )}
       onClick={onClick}

diff --git a/packages/profile/src/components/inventory/collection/collectible.tsx b/packages/profile/src/components/inventory/collection/collectible.tsx
@@ -132,9 +132,8 @@ export const Image = ({ imageUrl }: { imageUrl: string | undefined }) => {
       <div
         className="w-[60%] aspect-square rounded-lg bg-cover bg-center flex py-4 place-content-center overflow-hidden p-4"
         style={{
-          backgroundImage: `linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${
-            imageUrl ?? "/public/placeholder.svg"
-          })`,
+          backgroundImage: `linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${imageUrl ?? "/public/placeholder.svg"
+            })`,
         }}
       >
         <img
@@ -155,7 +154,7 @@ export const Description = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="uppercase text-[11px] text-quaternary-foreground font-bold tracking-wider">
+        <CardTitle className="uppercase text-[11px] text-muted-foreground font-bold tracking-wider">
           Description
         </CardTitle>
       </CardHeader>
@@ -174,7 +173,7 @@ export const Properties = ({
   return (
     <Card>
       <CardHeader className="h-10 flex flex-row items-center justify-between">
-        <CardTitle className="uppercase text-[11px] text-quaternary-foreground font-bold tracking-wider">
+        <CardTitle className="uppercase text-[11px] text-muted-foreground font-bold tracking-wider">
           Properties
         </CardTitle>
       </CardHeader>
@@ -223,7 +222,7 @@ export const Details = ({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="uppercase text-[11px] text-quaternary-foreground font-bold tracking-wider">
+        <CardTitle className="uppercase text-[11px] text-muted-foreground font-bold tracking-wider">
           details
         </CardTitle>
       </CardHeader>

diff --git a/packages/profile/src/components/inventory/token/send/amount.tsx b/packages/profile/src/components/inventory/token/send/amount.tsx
@@ -65,16 +65,15 @@ export function Amount({
       <div className="flex items-center justify-between">
         <Label className="py-3 text-[11px]/3 uppercase font-bold">Amount</Label>
         <div className="flex items-center gap-2">
-          <p className="text-[11px]/3 uppercase font-bold text-quaternary-foreground">
+          <p className="text-[11px]/3 uppercase font-bold text-muted-foreground">
             Balance:
           </p>
           <div
             className="text-[11px]/3 uppercase font-bold cursor-pointer hover:opacity-90"
             onClick={(e: React.MouseEvent<HTMLDivElement>) => handleMax(e)}
           >
-            {`${formatBalance(token.balance.formatted, ["~"])} ${
-              token.meta.symbol
-            }`}
+            {`${formatBalance(token.balance.formatted, ["~"])} ${token.meta.symbol
+              }`}
           </div>
         </div>
       </div>

diff --git a/packages/profile/src/components/modules/recipient.tsx b/packages/profile/src/components/modules/recipient.tsx
@@ -160,9 +160,9 @@ export const Recipient = ({
         >
           <div className="h-9 w-9 p-1.5 flex items-center justify-center">
             {isFetching || isLoading ? (
-              <SpinnerIcon className="text-quaternary-foreground animate-spin" />
+              <SpinnerIcon className="text-muted-foreground animate-spin" />
             ) : (
-              <TimesCircleIcon className="text-quaternary-foreground" />
+              <TimesCircleIcon className="text-muted-foreground" />
             )}
           </div>
         </div>
@@ -183,7 +183,7 @@ export const Recipient = ({
               {name ? (
                 <div className="flex flex-col items-start gap-x-2">
                   <p className="font-medium text-sm">{name}</p>
-                  <p className="font-normal text-xs text-quaternary-foreground">
+                  <p className="font-normal text-xs text-muted-foreground">
                     {formatAddress(address, { size: "xs", padding: true })}
                   </p>
                 </div>

diff --git a/packages/ui-next/src/preset.ts b/packages/ui-next/src/preset.ts
@@ -34,11 +34,6 @@ export const cartridgeTWPreset: Partial<Config> = {
       },
       quaternary: {
         DEFAULT: "hsl(var(--quaternary))",
-        foreground: "hsl(var(--quaternary-foreground))",
-      },
-      quinary: {
-        DEFAULT: "hsl(var(--quinary))",
-        foreground: "hsl(var(--quinary-foreground))",
       },
       destructive: {
         DEFAULT: "hsl(var(--destructive))",

diff --git a/packages/ui-next/src/stories/colors.stories.tsx b/packages/ui-next/src/stories/colors.stories.tsx
@@ -23,17 +23,6 @@ export const Default: Story = {
   },
 };
 
-export const Card: Story = {
-  args: {
-    children: (
-      <>
-        <Sample color="bg-card border" legacyName="bg" />
-        <Sample color="bg-card-foreground" legacyName="text.primary" />
-      </>
-    ),
-  },
-};
-
 export const Popover: Story = {
   args: {
     children: (

diff --git a/packages/ui-next/src/themes/dark.css b/packages/ui-next/src/themes/dark.css
@@ -16,10 +16,7 @@
     --tertiary-foreground: 0 0% 0%;
 
     --quaternary: 120 7.5% 15.69%; /* bg.secondary */
-    --quaternary-foreground: 0 0% 50%; /* text.secondary */
-
     --quinary: 120 11% 18%; /* bg.tertiary */
-    --quinary-foreground: 0 0% 0%; /* TBD */
 
     --muted: 132 8% 24%; /* bg.muted */
     --muted-foreground: 0 0% 50%; /* text.secondary */

diff --git a/packages/ui-next/src/themes/default.css b/packages/ui-next/src/themes/default.css
@@ -16,10 +16,7 @@
     --tertiary-foreground: 220 60% 99%;
 
     --quaternary: 210 2.48% 94.9%; /* bg.secondary */
-    --quaternary-foreground: 0 0% 50%; /* text.secondary */
-
     --quinary: 214 3% 91%; /* bg.tertiary */
-    --quinary-foreground: 0 0% 0%; /* TBD */
 
     --muted: 207 15% 85%;
     --muted-foreground: 0 0% 50%;