TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(colors): Replace hardcoded black with background color token (#5815)

Browse Source 
* Update all black to background

* remove --canvas token, keep intentional bg-black

* Move bg-black from grid container to individual viewport panes

---------

Co-authored-by: Alireza <ar.sedghi@gmail.com>
This commit is contained in:
Dan RukasandAlireza authored and GitHub committed 2026-02-12 13:12:36 -05:00
1 parent cfe7efd3ef
commit dbc31a5d4e
39 files changed
+61 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/docs/src/pages/colors-and-type.tsx
+3 -3
View File
@@ -131,7 +131,7 @@ export default function ComponentShowcase() {
title="Colors and Typography"
description="Colors and Typography"
>
<div className="text-foreground min-h-screen bg-black">
<div className="text-foreground min-h-screen bg-background">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@@ -396,7 +396,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
</div>
</div>
{showCode && (
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
<code>{code}</code>
</pre>
)}
@@ -425,7 +425,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
// </div>
// <div className="showcase-content mb-4">{children}</div>
// {showCode && (
// <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
// <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
// <code>{code}</code>
// </pre>
// )}
platform/docs/src/pages/components-list.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export default function ComponentsList() {
return (
<TooltipProvider>
<div className="text-foreground min-h-screen bg-black">
<div className="text-foreground min-h-screen bg-background">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
platform/docs/src/pages/components.tsx
+3 -3
View File
@@ -131,7 +131,7 @@ export default function ComponentShowcase() {
title="OHIF Viewer Design System"
description="OHIF Viewer Design System"
>
<div className="text-foreground min-h-screen bg-black">
<div className="text-foreground min-h-screen bg-background">
<div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
<a
@@ -227,7 +227,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
{/* Code Section */}
{showCode && (
<pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
<pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
<code>{code}</code>
</pre>
)}
@@ -256,7 +256,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
// </div>
// <div className="showcase-content mb-4">{children}</div>
// {showCode && (
// <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
// <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
// <code>{code}</code>
// </pre>
// )}
platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function AllinOneMenuShowcase() {
description="A structured menu that consolidates controls and actions."
code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>…</IconMenu>`}
>
<div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
<div className="border-input/70 relative flex h-12 items-center rounded border bg-background px-4">
<IconMenu
icon="viewport-window-level"
iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
platform/docs/src/pages/components/ShowcaseRow.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function ShowcaseRow({ title, description, children, code }: Show
</div>
</div>
{showCode && (
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
<code>{code}</code>
</pre>
)}
platform/docs/src/pages/patterns.tsx
+3 -3
View File
@@ -26,7 +26,7 @@ export default function ComponentShowcase() {
title="Patterns"
description="Patterns and example layouts"
>
<div className="text-foreground min-h-screen bg-black">
<div className="text-foreground min-h-screen bg-background">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
@@ -172,7 +172,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
</div>
</div>
{showCode && (
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-black p-4 text-sm">
<pre className="border-input mt-4 overflow-x-auto rounded-md border bg-background p-4 text-sm">
<code>{code}</code>
</pre>
)}
@@ -201,7 +201,7 @@ function ShowcaseRow({ title, description, children, code }: ShowcaseRowProps) {
// </div>
// <div className="showcase-content mb-4">{children}</div>
// {showCode && (
// <pre className="mt-4 overflow-x-auto rounded-md bg-black p-4 text-sm">
// <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-sm">
// <code>{code}</code>
// </pre>
// )}
platform/docs/src/pages/patterns/patterns-measurements.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export default function Measurements() {
return (
<BrowserOnly>
{() => (
<div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
<div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
<TooltipProvider>
{/* Simulated Panel List for "Segmentation" */}
<div className="w-64 space-y-0">
platform/docs/src/pages/patterns/patterns-segmentation.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ export default function SegmentationPanel() {
};
return (
<div className="px-auto flex min-h-screen w-full justify-center bg-black py-12">
<div className="px-auto flex min-h-screen w-full justify-center bg-background py-12">
<div className="w-64 space-y-0">
<TooltipProvider>
<Accordion
platform/docs/src/pages/patterns/patterns-tmtv.tsx
+1 -1
View File
@@ -76,7 +76,7 @@ export default function TMTVPatterns() {
return (
<BrowserOnly>
{() => (
<div className="px-auto my-4 flex min-h-screen w-full justify-center bg-black py-12">
<div className="px-auto my-4 flex min-h-screen w-full justify-center bg-background py-12">
<div className="w-64 space-y-0">
<Accordion
type="multiple"