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

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

Hide file tree

Showing 12 changed files with 27 additions and 52 deletions.
diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -38,7 +38,7 @@ 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

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>
       )}

diff --git a/packages/profile/src/components/inventory/collection/collectible.tsx b/packages/profile/src/components/inventory/collection/collectible.tsx
@@ -155,7 +155,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 +174,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 +223,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,7 +65,7 @@ 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

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,20 +16,14 @@
     --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 */
 
     --accent: 132 4% 23%; /* bg.accent */
     --accent-foreground: 0 0% 61%; /* text.secondary-accent */
 
-    --destructive: 7 72% 65%; /* text.error */
-    --destructive-foreground: 7 72% 65%; /* text.error */
-
     --border: 135 8% 9%; /* bg.background */
     --input: 120 7.5% 15.69%; /* bg.secondary */
     --ring: 0 0% 100%; /* text.primary */

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%;