Content token shuffle (#2588)

* Content token shuffle

* Bot commit: format with prettier

* Upgrade to merged `@oxide/design-system`

* Upgrade `@oxide/design-system` to non-canary

* Brighter icons

* Unrelated spacing fix

* Fix missing badge colour

* Boost side modal heading colour

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: benjaminleonard

app/components/AccordionItem.tsx

@@ -30,8 +30,8 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
     <Accordion.Item value={value}>
       <Accordion.Header className="max-w-lg">
         <Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
-          <div className="text-secondary">{label}</div>
-          <DirectionRightIcon className="transition-all text-secondary" />
+          <div className="text-raise">{label}</div>
+          <DirectionRightIcon className="transition-all text-default" />
         </Accordion.Trigger>
       </Accordion.Header>
       <Accordion.Content

app/components/AttachFloatingIpModal.tsx

@@ -18,7 +18,7 @@ import { Slash } from '~/ui/lib/Slash'
 
 function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
   return (
-    <div className="text-tertiary selected:text-accent-secondary">
+    <div className="text-secondary selected:text-accent-secondary">
       <div>{fip.name}</div>
       <div className="flex gap-0.5">
         <div>{fip.ip}</div>

app/components/CapacityBar.tsx

@@ -54,8 +54,8 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
     <div>
       <div className="flex grow items-center">
         <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
-        <span className="!normal-case text-mono-sm text-secondary">{title}</span>
-        <span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>
+        <span className="!normal-case text-mono-sm text-default">{title}</span>
+        <span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
       </div>
     </div>
   )
@@ -65,8 +65,8 @@ function PctCell({ pct }: { pct: number }) {
   // NaN happens when both top and bottom are 0
   if (Number.isNaN(pct)) {
     return (
-      <div className="flex -translate-y-0.5 items-baseline text-quaternary">
-        <div className="font-light text-sans-2xl">—</div>
+      <div className="flex -translate-y-0.5 items-baseline text-tertiary">
+        <div className="font-light text-sans-2xl text-raise">—</div>
         <div className="text-sans-xl">%</div>
       </div>
     )
@@ -75,8 +75,8 @@ function PctCell({ pct }: { pct: number }) {
   const [wholeNumber, decimal] = splitDecimal(pct)
   return (
     <div className="flex -translate-y-0.5 items-baseline">
-      <div className="font-light text-sans-2xl">{wholeNumber}</div>
-      <div className="text-sans-xl text-quaternary">{decimal}%</div>
+      <div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
+      <div className="text-sans-xl text-tertiary">{decimal}%</div>
     </div>
   )
 }
@@ -102,8 +102,8 @@ type ValueCellProps = {
 function ValueCell({ label, value, unit }: ValueCellProps) {
   return (
     <div className="p-3 text-mono-sm">
-      <div className="mb-px text-quaternary">{label}</div>
-      <div className="!normal-case text-secondary">
+      <div className="mb-px text-tertiary">{label}</div>
+      <div className="!normal-case text-default">
         <BigNum num={value} />
         {unit}
       </div>

app/components/DocsPopover.tsx

@@ -26,9 +26,9 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
     rel="noreferrer"
   >
     <div className="mx-2 border-b py-1.5 border-secondary">
-      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md !text-default group-hover:bg-tertiary">
+      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
         <span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-tertiary" />
+        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
       </div>
     </div>
   </a>
@@ -49,18 +49,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </PopoverButton>
       <PopoverPanel
         // DocsPopoverPanel needed for enter animation
-        className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
+        className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
           <h2 className="mt-4 flex items-center gap-1 text-sans-md">
             <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
             Learn about {heading}
           </h2>
-          <p className="mb-3 mt-2 text-sans-md text-secondary">{summary}</p>
+          <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
         </div>
         <div className="border-t pb-1 border-secondary">
-          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-quaternary">Guides</h3>
+          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
           {links.map((link) => (
             <DocsPopoverLink key={link.href} {...link} />
           ))}

app/components/EquivalentCliCommand.tsx

@@ -37,7 +37,7 @@ export function EquivalentCliCommand({ command }: { command: string }) {
       <Modal isOpen={isOpen} onDismiss={handleDismiss} title="CLI command">
         <Modal.Section>
           <pre className="flex w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
-            <div className="mr-2 select-none text-quaternary">$</div>
+            <div className="mr-2 select-none text-tertiary">$</div>
             {command}
           </pre>
         </Modal.Section>

app/components/ErrorBoundary.tsx

@@ -24,7 +24,7 @@ function ErrorFallback({ error }: Props) {
   return (
     <ErrorPage>
       <h1 className="text-sans-2xl">Something went wrong</h1>
-      <p className="text-tertiary">
+      <p className="text-secondary">
         Please try again. If the problem persists, contact your administrator.
       </p>
     </ErrorPage>

app/components/ErrorPage.tsx

@@ -34,9 +34,9 @@ export function ErrorPage({ children }: Props) {
       <div className="relative flex w-full justify-between">
         <Link
           to="/"
-          className="flex items-center p-6 text-mono-sm text-secondary hover:text-default"
+          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
         >
-          <PrevArrow12Icon title="Select" className="mr-2 text-tertiary" />
+          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
           Back to console
         </Link>
         <SignOutButton className="mr-6 mt-4" />
@@ -57,7 +57,7 @@ export function NotFound() {
   return (
     <ErrorPage>
       <h1 className="text-sans-2xl">Page not found</h1>
-      <p className="text-tertiary">
+      <p className="text-secondary">
         The page you are looking for doesn&apos;t exist or you may not have access to it.
       </p>
     </ErrorPage>

app/components/ExternalIps.tsx

@@ -27,7 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
     <div className="flex items-center gap-1">
       {intersperse(
         ips.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />),
-        <span className="text-quinary"> / </span>
+        <span className="text-quaternary"> / </span>
       )}
     </div>
   )

app/components/HL.tsx

@@ -10,7 +10,7 @@ import { classed } from '~/util/classed'
 // note parent with secondary text color must have 'group' on it for
 // this to work. see Toast for an example
 export const HL = classed.span`
-  text-sans-md text-default 
+  text-sans-md text-raise
   group-[.text-accent-secondary]:text-accent
   group-[.text-error-secondary]:text-error
   group-[.text-info-secondary]:text-info

app/components/IpPoolUtilization.tsx

@@ -12,8 +12,8 @@ import { BigNum } from '~/ui/lib/BigNum'
 
 const IpUtilFrac = (props: { allocated: number | bigint; capacity: number | bigint }) => (
   <>
-    <BigNum className="text-default" num={props.allocated} /> /{' '}
-    <BigNum className="text-tertiary" num={props.capacity} />
+    <BigNum className="text-raise" num={props.allocated} /> /{' '}
+    <BigNum className="text-secondary" num={props.capacity} />
   </>
 )