chore: add correct styling

This commit is contained in:
pedrooot
2026-07-22 16:42:50 +02:00
parent 239eb453a3
commit 9665b38bb8
5 changed files with 13 additions and 4 deletions
@@ -49,7 +49,7 @@ export const AggregatedComplianceDetail = ({
alt={`${compliancetitle} logo`}
fill
sizes="48px"
className="border-border-neutral-secondary bg-bg-neutral-primary rounded-lg border object-contain"
className="border-border-neutral-tertiary bg-bg-logo-surface rounded-lg border object-contain"
/>
</div>
)}
@@ -54,7 +54,7 @@ export const AggregatedFrameworkCard = ({
<div className="flex w-full flex-col gap-3">
<div className="flex items-center gap-3">
{logo && (
<div className="border-border-neutral-secondary bg-bg-neutral-primary flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
<div className="border-border-neutral-tertiary bg-bg-logo-surface flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
<Image
src={logo}
alt={`${frameworkTitle} logo`}
+1 -1
View File
@@ -119,7 +119,7 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
<div className="flex w-full flex-col gap-3">
<div className="flex items-center gap-3 pr-9">
{getComplianceIcon(title) && (
<div className="flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white">
<div className="border-border-neutral-tertiary bg-bg-logo-surface flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
<Image
src={getComplianceIcon(title)}
alt={`${title} logo`}
@@ -86,7 +86,7 @@ export const ComplianceHeader = ({
src={logoPath}
alt={`${complianceTitle} logo`}
fill
className="rounded-lg border border-gray-300 bg-white object-contain p-0"
className="border-border-neutral-tertiary bg-bg-logo-surface rounded-lg border object-contain p-0"
/>
</div>
)}
+9
View File
@@ -135,6 +135,11 @@
--bg-fail-primary: var(--color-rose-500);
--bg-fail-secondary: var(--color-rose-50);
/* Surface for third-party brand logos. Intentionally light in both themes:
vendor artwork is drawn for a light background and is unreadable on a
dark one. Do not swap this for a theme-dependent neutral token. */
--bg-logo-surface: var(--color-white);
/* Data Background Colors */
--bg-data-azure: var(--color-sky-400);
--bg-data-kubernetes: var(--color-indigo-600);
@@ -244,6 +249,9 @@
--bg-fail-primary: var(--color-rose-500);
--bg-fail-secondary: #432232;
/* Same value as light on purpose — see the light-theme declaration. */
--bg-logo-surface: var(--color-white);
/* Data Background Colors */
--bg-data-azure: var(--color-sky-400);
--bg-data-kubernetes: var(--color-indigo-600);
@@ -354,6 +362,7 @@
--color-bg-warning-secondary: var(--bg-warning-secondary);
--color-bg-fail: var(--bg-fail-primary);
--color-bg-fail-secondary: var(--bg-fail-secondary);
--color-bg-logo-surface: var(--bg-logo-surface);
--color-bg-feature-new: var(--bg-feature-new);
--color-text-feature-new: var(--text-feature-new);