Skip to content

Commit fa27caf

Browse files
benjaminleonardgithub-actions[bot]
benjaminleonard
and
github-actions[bot]
authored
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>
1 parent aad054c commit fa27caf

File tree

97 files changed

+244
-234
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+244
-234
lines changed

‎app/components/AccordionItem.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
3030
<Accordion.Item value={value}>
3131
<Accordion.Header className="max-w-lg">
3232
<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">
33-
<div className="text-secondary">{label}</div>
34-
<DirectionRightIcon className="transition-all text-secondary" />
33+
<div className="text-raise">{label}</div>
34+
<DirectionRightIcon className="transition-all text-default" />
3535
</Accordion.Trigger>
3636
</Accordion.Header>
3737
<Accordion.Content

‎app/components/AttachFloatingIpModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Slash } from '~/ui/lib/Slash'
1818

1919
function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
2020
return (
21-
<div className="text-tertiary selected:text-accent-secondary">
21+
<div className="text-secondary selected:text-accent-secondary">
2222
<div>{fip.name}</div>
2323
<div className="flex gap-0.5">
2424
<div>{fip.ip}</div>

‎app/components/CapacityBar.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
5454
<div>
5555
<div className="flex grow items-center">
5656
<span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
57-
<span className="!normal-case text-mono-sm text-secondary">{title}</span>
58-
<span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>
57+
<span className="!normal-case text-mono-sm text-default">{title}</span>
58+
<span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
5959
</div>
6060
</div>
6161
)
@@ -65,8 +65,8 @@ function PctCell({ pct }: { pct: number }) {
6565
// NaN happens when both top and bottom are 0
6666
if (Number.isNaN(pct)) {
6767
return (
68-
<div className="flex -translate-y-0.5 items-baseline text-quaternary">
69-
<div className="font-light text-sans-2xl">—</div>
68+
<div className="flex -translate-y-0.5 items-baseline text-tertiary">
69+
<div className="font-light text-sans-2xl text-raise">—</div>
7070
<div className="text-sans-xl">%</div>
7171
</div>
7272
)
@@ -75,8 +75,8 @@ function PctCell({ pct }: { pct: number }) {
7575
const [wholeNumber, decimal] = splitDecimal(pct)
7676
return (
7777
<div className="flex -translate-y-0.5 items-baseline">
78-
<div className="font-light text-sans-2xl">{wholeNumber}</div>
79-
<div className="text-sans-xl text-quaternary">{decimal}%</div>
78+
<div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
79+
<div className="text-sans-xl text-tertiary">{decimal}%</div>
8080
</div>
8181
)
8282
}
@@ -102,8 +102,8 @@ type ValueCellProps = {
102102
function ValueCell({ label, value, unit }: ValueCellProps) {
103103
return (
104104
<div className="p-3 text-mono-sm">
105-
<div className="mb-px text-quaternary">{label}</div>
106-
<div className="!normal-case text-secondary">
105+
<div className="mb-px text-tertiary">{label}</div>
106+
<div className="!normal-case text-default">
107107
<BigNum num={value} />
108108
{unit}
109109
</div>

‎app/components/DocsPopover.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
2626
rel="noreferrer"
2727
>
2828
<div className="mx-2 border-b py-1.5 border-secondary">
29-
<div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md !text-default group-hover:bg-tertiary">
29+
<div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
3030
<span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
31-
<OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-tertiary" />
31+
<OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
3232
</div>
3333
</div>
3434
</a>
@@ -49,18 +49,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
4949
</PopoverButton>
5050
<PopoverPanel
5151
// DocsPopoverPanel needed for enter animation
52-
className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
52+
className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
5353
anchor={{ to: 'bottom end', gap: 12 }}
5454
>
5555
<div className="px-4">
5656
<h2 className="mt-4 flex items-center gap-1 text-sans-md">
5757
<div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
5858
Learn about {heading}
5959
</h2>
60-
<p className="mb-3 mt-2 text-sans-md text-secondary">{summary}</p>
60+
<p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
6161
</div>
6262
<div className="border-t pb-1 border-secondary">
63-
<h3 className="mb-1 mt-3 px-4 text-mono-sm text-quaternary">Guides</h3>
63+
<h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
6464
{links.map((link) => (
6565
<DocsPopoverLink key={link.href} {...link} />
6666
))}

‎app/components/EquivalentCliCommand.tsx

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

‎app/components/ErrorBoundary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function ErrorFallback({ error }: Props) {
2424
return (
2525
<ErrorPage>
2626
<h1 className="text-sans-2xl">Something went wrong</h1>
27-
<p className="text-tertiary">
27+
<p className="text-secondary">
2828
Please try again. If the problem persists, contact your administrator.
2929
</p>
3030
</ErrorPage>

‎app/components/ErrorPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export function ErrorPage({ children }: Props) {
3434
<div className="relative flex w-full justify-between">
3535
<Link
3636
to="/"
37-
className="flex items-center p-6 text-mono-sm text-secondary hover:text-default"
37+
className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
3838
>
39-
<PrevArrow12Icon title="Select" className="mr-2 text-tertiary" />
39+
<PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
4040
Back to console
4141
</Link>
4242
<SignOutButton className="mr-6 mt-4" />
@@ -57,7 +57,7 @@ export function NotFound() {
5757
return (
5858
<ErrorPage>
5959
<h1 className="text-sans-2xl">Page not found</h1>
60-
<p className="text-tertiary">
60+
<p className="text-secondary">
6161
The page you are looking for doesn&apos;t exist or you may not have access to it.
6262
</p>
6363
</ErrorPage>

‎app/components/ExternalIps.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
2727
<div className="flex items-center gap-1">
2828
{intersperse(
2929
ips.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />),
30-
<span className="text-quinary"> / </span>
30+
<span className="text-quaternary"> / </span>
3131
)}
3232
</div>
3333
)

‎app/components/HL.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { classed } from '~/util/classed'
1010
// note parent with secondary text color must have 'group' on it for
1111
// this to work. see Toast for an example
1212
export const HL = classed.span`
13-
text-sans-md text-default
13+
text-sans-md text-raise
1414
group-[.text-accent-secondary]:text-accent
1515
group-[.text-error-secondary]:text-error
1616
group-[.text-info-secondary]:text-info

‎app/components/IpPoolUtilization.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { BigNum } from '~/ui/lib/BigNum'
1212

1313
const IpUtilFrac = (props: { allocated: number | bigint; capacity: number | bigint }) => (
1414
<>
15-
<BigNum className="text-default" num={props.allocated} /> /{' '}
16-
<BigNum className="text-tertiary" num={props.capacity} />
15+
<BigNum className="text-raise" num={props.allocated} /> /{' '}
16+
<BigNum className="text-secondary" num={props.capacity} />
1717
</>
1818
)
1919

‎app/components/ListPlusCell.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const ListPlusCell = ({
3737
const rest = array.slice(numInCell)
3838
const content = (
3939
<div>
40-
<div className="mb-2 text-sans-semi-md text-default">{tooltipTitle}</div>
40+
<div className="mb-2 text-sans-semi-md text-raise">{tooltipTitle}</div>
4141
<div className="flex flex-col items-start gap-2">{...rest}</div>
4242
</div>
4343
)

‎app/components/MoreActionsMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
2424
aria-label={label}
2525
className="flex h-8 w-8 items-center justify-center rounded border border-default hover:bg-tertiary"
2626
>
27-
<More12Icon className="text-tertiary" />
27+
<More12Icon />
2828
</DropdownMenu.Trigger>
2929
<DropdownMenu.Content className="mt-2">
3030
{actions.map((a) => (

‎app/components/RefetchIntervalPicker.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
5454
intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
5555
intervalPicker: (
5656
<div className="mb-12 flex items-center justify-between">
57-
<div className="hidden items-center gap-2 text-right text-mono-sm text-quaternary lg+:flex">
58-
<Time16Icon className="text-quinary" /> Refreshed{' '}
57+
<div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
58+
<Time16Icon className="text-quaternary" /> Refreshed{' '}
5959
{toLocaleTimeString(lastFetched)}
6060
</div>
6161
<div className="flex">
@@ -70,7 +70,7 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
7070
disabled={isLoading || !enabled}
7171
>
7272
<SpinnerLoader isLoading={isLoading}>
73-
<Refresh16Icon className="text-tertiary" />
73+
<Refresh16Icon className="text-secondary" />
7474
</SpinnerLoader>
7575
</button>
7676
<Listbox

‎app/components/Sidebar.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Button } from '~/ui/lib/Button'
1515
import { Truncate } from '~/ui/lib/Truncate'
1616

1717
const linkStyles =
18-
'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quinary text-secondary'
18+
'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quaternary text-default'
1919

2020
// TODO: this probably doesn't go to the docs root. maybe it even opens a
2121
// menu with links to several relevant docs for the page
@@ -44,10 +44,10 @@ const JumpToButton = () => {
4444
onClick={openQuickActions}
4545
className="w-full !px-2"
4646
// TODO: the more I use innerClassName the wronger it feels
47-
innerClassName="w-full justify-between text-quaternary"
47+
innerClassName="w-full justify-between text-tertiary"
4848
>
4949
<span className="flex items-center">
50-
<Action16Icon className="mr-2 text-quinary" /> Jump to
50+
<Action16Icon className="mr-2 text-quaternary" /> Jump to
5151
</span>
5252
<div className="text-mono-xs">{modKey}+K</div>
5353
</Button>
@@ -56,7 +56,7 @@ const JumpToButton = () => {
5656

5757
export function Sidebar({ children }: { children: React.ReactNode }) {
5858
return (
59-
<div className="flex flex-col border-r text-sans-md text-default border-secondary">
59+
<div className="flex flex-col border-r text-sans-md text-raise border-secondary">
6060
<div className="mx-3 mt-4">
6161
<JumpToButton />
6262
</div>
@@ -73,7 +73,7 @@ interface SidebarNav {
7373
Sidebar.Nav = ({ children, heading }: SidebarNav) => (
7474
<div className="mx-3 my-4 space-y-1">
7575
{heading && (
76-
<div className="mb-2 text-mono-sm text-quaternary">
76+
<div className="mb-2 text-mono-sm text-tertiary">
7777
<Truncate text={heading} maxLength={24} />
7878
</div>
7979
)}

‎app/components/SystemMetric.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ export function SiloMetric({
9494

9595
return (
9696
<div>
97-
<h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-secondary">
98-
{title} {unit && <span className="text-quaternary">({unit})</span>}{' '}
97+
<h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-default">
98+
{title} {unit && <span className="text-tertiary">({unit})</span>}{' '}
9999
{(inRange.isPending || beforeStart.isPending) && <Spinner />}
100100
</h2>
101101
{/* TODO: proper skeleton for empty chart */}
@@ -172,8 +172,8 @@ export function SystemMetric({
172172

173173
return (
174174
<div>
175-
<h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-secondary">
176-
{title} {unit && <span className="text-quaternary">({unit})</span>}{' '}
175+
<h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-default">
176+
{title} {unit && <span className="text-tertiary">({unit})</span>}{' '}
177177
{(inRange.isPending || beforeStart.isPending) && <Spinner />}
178178
</h2>
179179
{/* TODO: proper skeleton for empty chart */}

‎app/components/Terminal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default function Terminal({ ws }: TerminalProps) {
105105
return (
106106
<>
107107
<div className="h-full w-[calc(100%-3rem)] text-mono-code" ref={terminalRef} />
108-
<div className="absolute right-0 top-0 space-y-2 text-secondary">
108+
<div className="absolute right-0 top-0 space-y-2 text-default">
109109
<ScrollButton onClick={() => term?.scrollToTop()} aria-label="Scroll to top">
110110
<DirectionUpIcon aria-hidden />
111111
</ScrollButton>

‎app/components/TimeAgo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export const TimeAgo = ({
2121
}): JSX.Element => {
2222
const content = (
2323
<div className="flex flex-col">
24-
<span className="text-tertiary">{tooltipText}</span>
24+
<span className="text-secondary">{tooltipText}</span>
2525
<span>{toLocaleDateTimeString(datetime)}</span>
2626
</div>
2727
)
2828
return (
2929
<Tooltip content={content} placement={placement}>
30-
<span className="text-sans-sm text-tertiary">{timeAgoAbbr(datetime)}</span>
30+
<span className="text-sans-sm text-secondary">{timeAgoAbbr(datetime)}</span>
3131
</Tooltip>
3232
)
3333
}

‎app/components/TimeSeriesChart.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,15 +83,15 @@ function renderTooltip(props: TooltipProps<number, string>, unit?: string) {
8383
} = payload[0]
8484
if (!timestamp || typeof value !== 'number') return null
8585
return (
86-
<div className="rounded border outline-0 text-sans-md text-tertiary bg-raise border-secondary elevation-2">
86+
<div className="rounded border outline-0 text-sans-md text-secondary bg-raise border-secondary elevation-2">
8787
<div className="border-b px-3 py-2 pr-6 border-secondary">
8888
{longDateTime(timestamp)}
8989
</div>
9090
<div className="px-3 py-2">
91-
<div className="text-tertiary">{name}</div>
92-
<div className="text-default">
91+
<div className="text-secondary">{name}</div>
92+
<div className="text-raise">
9393
{value.toLocaleString()}
94-
{unit && <span className="ml-1 text-tertiary">{unit}</span>}
94+
{unit && <span className="ml-1 text-secondary">{unit}</span>}
9595
</div>
9696
{/* TODO: unit on value if relevant */}
9797
</div>

‎app/components/TopBar.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const BigIdenticon = ({ name }: { name: string }) => (
6060
)
6161

6262
const SystemIcon = () => (
63-
<div className={cn(bigIconBox, 'text-quinary bg-tertiary')}>
63+
<div className={cn(bigIconBox, 'text-quaternary bg-tertiary')}>
6464
<Servers16Icon />
6565
</div>
6666
)
@@ -88,8 +88,8 @@ function HomeButton({ level }: { level: 'system' | 'silo' }) {
8888
<div className="flex w-full items-center">
8989
<div className="mr-2">{config.icon}</div>
9090
<div className="min-w-0 flex-1">
91-
<div className="text-mono-xs text-quaternary">{config.heading}</div>
92-
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-sans-md text-secondary">
91+
<div className="text-mono-xs text-tertiary">{config.heading}</div>
92+
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-sans-md text-raise">
9393
{config.label}
9494
</div>
9595
</div>
@@ -110,8 +110,8 @@ function Breadcrumbs() {
110110
<Link
111111
to={path}
112112
className={cn(
113-
'whitespace-nowrap text-sans-md hover:text-secondary',
114-
i === crumbs.length - 1 ? 'text-secondary' : 'text-tertiary'
113+
'whitespace-nowrap text-sans-md',
114+
i === crumbs.length - 1 ? 'text-raise' : 'text-secondary hover:text-default'
115115
)}
116116
key={`${label}|${path}`}
117117
>
@@ -139,8 +139,8 @@ function UserMenu() {
139139
)}
140140
aria-label="User menu"
141141
>
142-
<Profile16Icon className="text-quaternary" />
143-
<span className="normal-case text-sans-md text-secondary">
142+
<Profile16Icon className="text-tertiary" />
143+
<span className="normal-case text-sans-md text-default">
144144
{me.displayName || 'User'}
145145
</span>
146146
</DropdownMenu.Trigger>
@@ -161,15 +161,15 @@ function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
161161
return (
162162
<DropdownMenu.Root>
163163
<DropdownMenu.Trigger
164-
className="flex items-center rounded border px-2 py-1.5 text-sans-md text-secondary border-secondary hover:bg-hover"
164+
className="flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
165165
aria-label="Switch between system and silo"
166166
>
167-
<div className="flex items-center text-quaternary">
167+
<div className="flex items-center text-tertiary">
168168
{level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
169169
</div>
170170
<div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
171171
{/* aria-hidden is a tip from the Reach docs */}
172-
<SelectArrows6Icon className="text-quinary" aria-hidden />
172+
<SelectArrows6Icon className="text-quaternary" aria-hidden />
173173
</DropdownMenu.Trigger>
174174
<DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
175175
<SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />

‎app/components/form/Form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,5 @@ export const Form = {
8383
</Button>
8484
),
8585

86-
Heading: classed.h2`text-content text-sans-2xl`,
86+
Heading: classed.h2`text-sans-2xl`,
8787
}

‎app/components/form/fields/ImageSelectField.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function toImageComboboxItem(
8282
label: (
8383
<div className="flex flex-col gap-1">
8484
<div>{name}</div>
85-
<div className="text-tertiary selected:text-accent-secondary">{itemMetadata}</div>
85+
<div className="text-secondary selected:text-accent-secondary">{itemMetadata}</div>
8686
</div>
8787
),
8888
}

‎app/components/form/fields/NumberField.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function NumberField<
3535
<div className="max-w-lg">
3636
<div className="mb-2">
3737
<FieldLabel htmlFor={id} id={`${id}-label`} optional={!required}>
38-
{label} {units && <span className="ml-1 text-secondary">({units})</span>}
38+
{label} {units && <span className="ml-1 text-default">({units})</span>}
3939
</FieldLabel>
4040
{description && (
4141
<TextInputHint id={`${id}-help-text`} className="mb-2">

0 commit comments

Comments
 (0)