oxidecomputer · david-crespo · Dec 3, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
diff --git a/app/components/AccordionItem.tsx b/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

diff --git a/app/components/AttachFloatingIpModal.tsx b/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>

diff --git a/app/components/CapacityBar.tsx b/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>

diff --git a/app/components/DocsPopover.tsx b/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} />
           ))}

diff --git a/app/components/EquivalentCliCommand.tsx b/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>

diff --git a/app/components/ErrorBoundary.tsx b/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>

diff --git a/app/components/ErrorPage.tsx b/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>

diff --git a/app/components/ExternalIps.tsx b/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>
   )

diff --git a/app/components/HL.tsx b/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

diff --git a/app/components/IpPoolUtilization.tsx b/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} />
   </>
 )
 

diff --git a/app/components/ListPlusCell.tsx b/app/components/ListPlusCell.tsx
@@ -37,7 +37,7 @@ export const ListPlusCell = ({
   const rest = array.slice(numInCell)
   const content = (
     <div>
-      <div className="mb-2 text-sans-semi-md text-default">{tooltipTitle}</div>
+      <div className="mb-2 text-sans-semi-md text-raise">{tooltipTitle}</div>
       <div className="flex flex-col items-start gap-2">{...rest}</div>
     </div>
   )

diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
@@ -24,7 +24,7 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
         aria-label={label}
         className="flex h-8 w-8 items-center justify-center rounded border border-default hover:bg-tertiary"
       >
-        <More12Icon className="text-tertiary" />
+        <More12Icon />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2">
         {actions.map((a) => (

diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
@@ -54,8 +54,8 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
     intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
     intervalPicker: (
       <div className="mb-12 flex items-center justify-between">
-        <div className="hidden items-center gap-2 text-right text-mono-sm text-quaternary lg+:flex">
-          <Time16Icon className="text-quinary" /> Refreshed{' '}
+        <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
+          <Time16Icon className="text-quaternary" /> Refreshed{' '}
           {toLocaleTimeString(lastFetched)}
         </div>
         <div className="flex">
@@ -70,7 +70,7 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
             disabled={isLoading || !enabled}
           >
             <SpinnerLoader isLoading={isLoading}>
-              <Refresh16Icon className="text-tertiary" />
+              <Refresh16Icon className="text-secondary" />
             </SpinnerLoader>
           </button>
           <Listbox

diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
@@ -15,7 +15,7 @@ import { Button } from '~/ui/lib/Button'
 import { Truncate } from '~/ui/lib/Truncate'
 
 const linkStyles =
-  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quinary text-secondary'
+  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quaternary text-default'
 
 // TODO: this probably doesn't go to the docs root. maybe it even opens a
 // menu with links to several relevant docs for the page
@@ -44,10 +44,10 @@ const JumpToButton = () => {
       onClick={openQuickActions}
       className="w-full !px-2"
       // TODO: the more I use innerClassName the wronger it feels
-      innerClassName="w-full justify-between text-quaternary"
+      innerClassName="w-full justify-between text-tertiary"
     >
       <span className="flex items-center">
-        <Action16Icon className="mr-2 text-quinary" /> Jump to
+        <Action16Icon className="mr-2 text-quaternary" /> Jump to
       </span>
       <div className="text-mono-xs">{modKey}+K</div>
     </Button>
@@ -56,7 +56,7 @@ const JumpToButton = () => {
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col border-r text-sans-md text-default border-secondary">
+    <div className="flex flex-col border-r text-sans-md text-raise border-secondary">
       <div className="mx-3 mt-4">
         <JumpToButton />
       </div>
@@ -73,7 +73,7 @@ interface SidebarNav {
 Sidebar.Nav = ({ children, heading }: SidebarNav) => (
   <div className="mx-3 my-4 space-y-1">
     {heading && (
-      <div className="mb-2 text-mono-sm text-quaternary">
+      <div className="mb-2 text-mono-sm text-tertiary">
         <Truncate text={heading} maxLength={24} />
       </div>
     )}

diff --git a/app/components/SystemMetric.tsx b/app/components/SystemMetric.tsx
@@ -94,8 +94,8 @@ export function SiloMetric({
 
   return (
     <div>
-      <h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-secondary">
-        {title} {unit && <span className="text-quaternary">({unit})</span>}{' '}
+      <h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-default">
+        {title} {unit && <span className="text-tertiary">({unit})</span>}{' '}
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}
@@ -172,8 +172,8 @@ export function SystemMetric({
 
   return (
     <div>
-      <h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-secondary">
-        {title} {unit && <span className="text-quaternary">({unit})</span>}{' '}
+      <h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-default">
+        {title} {unit && <span className="text-tertiary">({unit})</span>}{' '}
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}

diff --git a/app/components/Terminal.tsx b/app/components/Terminal.tsx
@@ -105,7 +105,7 @@ export default function Terminal({ ws }: TerminalProps) {
   return (
     <>
       <div className="h-full w-[calc(100%-3rem)] text-mono-code" ref={terminalRef} />
-      <div className="absolute right-0 top-0 space-y-2 text-secondary">
+      <div className="absolute right-0 top-0 space-y-2 text-default">
         <ScrollButton onClick={() => term?.scrollToTop()} aria-label="Scroll to top">
           <DirectionUpIcon aria-hidden />
         </ScrollButton>

diff --git a/app/components/TimeAgo.tsx b/app/components/TimeAgo.tsx
@@ -21,13 +21,13 @@ export const TimeAgo = ({
 }): JSX.Element => {
   const content = (
     <div className="flex flex-col">
-      <span className="text-tertiary">{tooltipText}</span>
+      <span className="text-secondary">{tooltipText}</span>
       <span>{toLocaleDateTimeString(datetime)}</span>
     </div>
   )
   return (
     <Tooltip content={content} placement={placement}>
-      <span className="text-sans-sm text-tertiary">{timeAgoAbbr(datetime)}</span>
+      <span className="text-sans-sm text-secondary">{timeAgoAbbr(datetime)}</span>
     </Tooltip>
   )
 }
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
@@ -84,15 +84,15 @@ function renderTooltip(props: TooltipProps<number, string>, unit?: string) {
   } = payload[0]
   if (!timestamp || typeof value !== 'number') return null
   return (
-    <div className="rounded border outline-0 text-sans-md text-tertiary bg-raise border-secondary elevation-2">
+    <div className="rounded border outline-0 text-sans-md text-secondary bg-raise border-secondary elevation-2">
       <div className="border-b px-3 py-2 pr-6 border-secondary">
         {longDateTime(timestamp)}
       </div>
       <div className="px-3 py-2">
-        <div className="text-tertiary">{name}</div>
-        <div className="text-default">
+        <div className="text-secondary">{name}</div>
+        <div className="text-raise">
           {value.toLocaleString()}
-          {unit && <span className="ml-1 text-tertiary">{unit}</span>}
+          {unit && <span className="ml-1 text-secondary">{unit}</span>}
         </div>
         {/* TODO: unit on value if relevant */}
       </div>

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
@@ -60,7 +60,7 @@ const BigIdenticon = ({ name }: { name: string }) => (
 )
 
 const SystemIcon = () => (
-  <div className={cn(bigIconBox, 'text-quinary bg-tertiary')}>
+  <div className={cn(bigIconBox, 'text-quaternary bg-tertiary')}>
     <Servers16Icon />
   </div>
 )
@@ -88,8 +88,8 @@ function HomeButton({ level }: { level: 'system' | 'silo' }) {
       <div className="flex w-full items-center">
         <div className="mr-2">{config.icon}</div>
         <div className="min-w-0 flex-1">
-          <div className="text-mono-xs text-quaternary">{config.heading}</div>
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sans-md text-secondary">
+          <div className="text-mono-xs text-tertiary">{config.heading}</div>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sans-md text-raise">
             {config.label}
           </div>
         </div>
@@ -110,8 +110,8 @@ function Breadcrumbs() {
           <Link
             to={path}
             className={cn(
-              'whitespace-nowrap text-sans-md hover:text-secondary',
-              i === crumbs.length - 1 ? 'text-secondary' : 'text-tertiary'
+              'whitespace-nowrap text-sans-md',
+              i === crumbs.length - 1 ? 'text-raise' : 'text-secondary hover:text-default'
             )}
             key={`${label}|${path}`}
           >
@@ -139,8 +139,8 @@ function UserMenu() {
         )}
         aria-label="User menu"
       >
-        <Profile16Icon className="text-quaternary" />
-        <span className="normal-case text-sans-md text-secondary">
+        <Profile16Icon className="text-tertiary" />
+        <span className="normal-case text-sans-md text-default">
           {me.displayName || 'User'}
         </span>
       </DropdownMenu.Trigger>
@@ -161,15 +161,15 @@ function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
-        className="flex items-center rounded border px-2 py-1.5 text-sans-md text-secondary border-secondary hover:bg-hover"
+        className="flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
         aria-label="Switch between system and silo"
       >
-        <div className="flex items-center text-quaternary">
+        <div className="flex items-center text-tertiary">
           {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
         </div>
         <div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
         {/* aria-hidden is a tip from the Reach docs */}
-        <SelectArrows6Icon className="text-quinary" aria-hidden />
+        <SelectArrows6Icon className="text-quaternary" aria-hidden />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
         <SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />

diff --git a/app/components/form/Form.tsx b/app/components/form/Form.tsx
@@ -83,5 +83,5 @@ export const Form = {
     </Button>
   ),
 
-  Heading: classed.h2`text-content text-sans-2xl`,
+  Heading: classed.h2`text-sans-2xl`,
 }
diff --git a/app/components/form/fields/ImageSelectField.tsx b/app/components/form/fields/ImageSelectField.tsx
@@ -82,7 +82,7 @@ export function toImageComboboxItem(
     label: (
       <div className="flex flex-col gap-1">
         <div>{name}</div>
-        <div className="text-tertiary selected:text-accent-secondary">{itemMetadata}</div>
+        <div className="text-secondary selected:text-accent-secondary">{itemMetadata}</div>
       </div>
     ),
   }

diff --git a/app/components/form/fields/NumberField.tsx b/app/components/form/fields/NumberField.tsx
@@ -35,7 +35,7 @@ export function NumberField<
     <div className="max-w-lg">
       <div className="mb-2">
         <FieldLabel htmlFor={id} id={`${id}-label`} optional={!required}>
-          {label} {units && <span className="ml-1 text-secondary">({units})</span>}
+          {label} {units && <span className="ml-1 text-default">({units})</span>}
         </FieldLabel>
         {description && (
           <TextInputHint id={`${id}-help-text`} className="mb-2">