From 5c1fc56b5ce4211fdfd7d57898efdea1c504663a Mon Sep 17 00:00:00 2001 From: master <> Date: Sun, 29 Mar 2026 12:32:04 +0300 Subject: [PATCH] Fix remaining VEX and policy-gates theme: borders, button bg, rgba VEX hub (13 files): fixed 2px/3px/4px border variants using text color vars, border-color with text-secondary, background text-secondary. Policy gates (6 files): fixed all swapped theme patterns including backgrounds, text colors, borders, button backgrounds, and rgba colors. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../airgap-mode-switch.component.ts | 12 +++--- .../bundle-simulator.component.ts | 38 +++++++++---------- .../feed-freshness-badges.component.ts | 18 ++++----- .../gate-simulation-results.component.ts | 22 +++++------ .../policy-preview-panel.component.ts | 28 +++++++------- .../profile-selector.component.ts | 14 +++---- .../vex-hub/ai-consent-gate.component.ts | 2 +- .../vex-hub/ai-explain-panel.component.ts | 2 +- .../vex-hub/ai-justify-panel.component.ts | 4 +- .../vex-hub/ai-remediate-panel.component.ts | 4 +- .../vex-conflict-resolution.component.ts | 10 ++--- .../vex-hub/vex-consensus.component.ts | 2 +- .../vex-hub/vex-create-workflow.component.ts | 10 ++--- .../vex-hub/vex-hub-dashboard.component.ts | 2 +- .../vex-hub/vex-hub-stats.component.ts | 2 +- .../vex-statement-detail-panel.component.ts | 4 +- .../vex-hub/vex-statement-detail.component.ts | 2 +- .../vex-hub/vex-statement-search.component.ts | 2 +- 18 files changed, 89 insertions(+), 89 deletions(-) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts index 7eb081511..3b1514aea 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts @@ -118,8 +118,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .airgap-container { position: relative; padding: 1rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); transition: border-color 0.2s; @@ -196,7 +196,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; align-items: center; width: 44px; height: 24px; - background: var(--color-text-primary); + background: var(--color-surface-tertiary); border-radius: var(--radius-xl); transition: background 0.2s; } @@ -224,7 +224,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; - border-top: 1px solid var(--color-text-primary); + border-top: 1px solid var(--color-border-primary); } .status-row { @@ -235,7 +235,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; &--stale { padding: 0.375rem 0.5rem; - background: rgba(239, 68, 68, 0.1); + background: var(--color-status-error-bg); border-radius: var(--radius-sm); margin: 0 -0.5rem; } @@ -302,7 +302,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .spinner { width: 24px; height: 24px; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 0.6s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts index e2da28cda..e02daedd4 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts @@ -217,8 +217,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c flex-direction: column; gap: 1rem; padding: 1rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); } @@ -228,7 +228,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; - background: var(--color-status-info); + background: var(--color-btn-primary-bg); border: none; border-radius: var(--radius-md); color: var(--color-surface-primary); @@ -273,14 +273,14 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c .result-summary { padding: 1rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); &--pass { border-top: 3px solid var(--color-status-success); } &--fail { border-top: 3px solid var(--color-status-error); } &--warn { border-top: 3px solid var(--color-status-warning); } - &--error { border-top: 3px solid var(--color-text-secondary); } + &--error { border-top: 3px solid var(--color-border-secondary); } } .summary-header { @@ -341,8 +341,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c } .blocking-gates { - background: rgba(239, 68, 68, 0.1); - border: 1px solid rgba(239, 68, 68, 0.3); + background: var(--color-status-error-bg); + border: 1px solid var(--color-status-error-bg); } .warning-gates { @@ -374,7 +374,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c font-family: monospace; &--blocking { - background: rgba(239, 68, 68, 0.2); + background: var(--color-status-error-bg); color: var(--color-status-error-border); } @@ -405,7 +405,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c .expand-all-btn { padding: 0.25rem 0.5rem; background: transparent; - border: 1px solid var(--color-text-primary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.75rem; @@ -413,23 +413,23 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c &:hover { background: rgba(255, 255, 255, 0.05); - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } } .artifact-item { - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; &--pass { border-left: 3px solid var(--color-status-success); } &--fail { border-left: 3px solid var(--color-status-error); } &--warn { border-left: 3px solid var(--color-status-warning); } - &--error { border-left: 3px solid var(--color-text-secondary); } + &--error { border-left: 3px solid var(--color-border-secondary); } &--expanded { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } } @@ -474,14 +474,14 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c .artifact-details { padding: 0.75rem; - border-top: 1px solid var(--color-text-primary); + border-top: 1px solid var(--color-border-primary); background: rgba(0, 0, 0, 0.2); } .artifact-blocking { margin-bottom: 0.75rem; padding: 0.5rem; - background: rgba(239, 68, 68, 0.1); + background: var(--color-status-error-bg); border-radius: var(--radius-sm); font-size: 0.8125rem; } @@ -544,8 +544,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c justify-content: center; gap: 0.5rem; padding: 3rem; - background: var(--color-text-primary); - border: 1px dashed var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px dashed var(--color-border-primary); border-radius: var(--radius-lg); } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts index 3a0679334..ddb621503 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts @@ -105,8 +105,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; flex-direction: column; gap: 0.75rem; padding: 0.75rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); } @@ -133,7 +133,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .loading-dot { width: 8px; height: 8px; - background: var(--color-status-info); + background: var(--color-btn-primary-bg); border-radius: var(--radius-full); animation: pulse 1s ease-in-out infinite; } @@ -145,7 +145,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .freshness-summary { padding-bottom: 0.5rem; - border-bottom: 1px solid var(--color-text-primary); + border-bottom: 1px solid var(--color-border-primary); } .summary-counts { @@ -216,7 +216,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; } &--unknown { - .badge-indicator { background: var(--color-text-secondary); } + .badge-indicator { background: var(--color-surface-tertiary); } .badge-name { color: var(--color-text-muted); } } } @@ -239,7 +239,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .show-more-btn { padding: 0.25rem 0.5rem; background: transparent; - border: 1px dashed var(--color-text-secondary); + border: 1px dashed var(--color-border-secondary); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.75rem; @@ -248,7 +248,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; &:hover { background: rgba(255, 255, 255, 0.05); - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); color: rgba(212, 201, 168, 0.3); } } @@ -260,7 +260,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; gap: 0.375rem; padding: 0.5rem 0.75rem; background: transparent; - border: 1px solid var(--color-text-primary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.75rem; @@ -269,7 +269,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; &:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); color: rgba(212, 201, 168, 0.3); } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts index 6f67055fc..20d0c85d1 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts @@ -138,8 +138,8 @@ import { `, styles: [` .simulation-results { - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); overflow: hidden; @@ -156,7 +156,7 @@ import { } &--error { - border-top: 3px solid var(--color-text-secondary); + border-top: 3px solid var(--color-border-secondary); } } @@ -165,7 +165,7 @@ import { align-items: center; justify-content: space-between; padding: 1rem; - border-bottom: 1px solid var(--color-text-primary); + border-bottom: 1px solid var(--color-border-primary); } .header-status { @@ -214,8 +214,8 @@ import { } &--hard { - background: rgba(239, 68, 68, 0.1); - border: 1px solid rgba(239, 68, 68, 0.3); + background: var(--color-status-error-bg); + border: 1px solid var(--color-status-error-bg); } &--soft { @@ -284,7 +284,7 @@ import { .gate-item { background: rgba(255, 255, 255, 0.03); - border: 1px solid var(--color-text-primary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.15s; @@ -298,7 +298,7 @@ import { } &--expanded { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } } @@ -335,7 +335,7 @@ import { } .icon-fail { - background: rgba(239, 68, 68, 0.2); + background: var(--color-status-error-bg); color: var(--color-status-error); } @@ -365,7 +365,7 @@ import { .gate-details { padding: 0.75rem; - border-top: 1px solid var(--color-text-primary); + border-top: 1px solid var(--color-border-primary); background: rgba(0, 0, 0, 0.2); } @@ -387,7 +387,7 @@ import { gap: 1rem; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.2); - border-top: 1px solid var(--color-text-primary); + border-top: 1px solid var(--color-border-primary); } .footer-item { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts index 5f5801071..6a48280d0 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts @@ -232,13 +232,13 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- display: flex; flex-direction: column; height: 100%; - background: var(--color-text-heading); + background: var(--color-surface-elevated); color: rgba(212, 201, 168, 0.3); } .panel-header { padding: 1.5rem; - border-bottom: 1px solid var(--color-text-primary); + border-bottom: 1px solid var(--color-border-primary); } .panel-title { @@ -265,8 +265,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- flex-direction: column; gap: 1rem; padding: 1rem; - background: var(--color-text-heading); - border-right: 1px solid var(--color-text-primary); + background: var(--color-surface-elevated); + border-right: 1px solid var(--color-border-primary); overflow-y: auto; } @@ -308,7 +308,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .default-indicator { padding: 0.125rem 0.5rem; - background: rgba(34, 197, 94, 0.2); + background: var(--color-status-success-bg); color: var(--color-status-success); border-radius: var(--radius-sm); font-size: 0.6875rem; @@ -331,8 +331,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .requirement-card { padding: 1rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); } @@ -355,7 +355,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- align-items: center; gap: 0.5rem; padding: 0.5rem 0; - border-bottom: 1px solid var(--color-text-primary); + border-bottom: 1px solid var(--color-border-primary); font-size: 0.8125rem; &:last-child { @@ -381,7 +381,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- text-transform: uppercase; &--required { - background: rgba(239, 68, 68, 0.2); + background: var(--color-status-error-bg); color: var(--color-status-error); } @@ -443,7 +443,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- font-family: monospace; &--hard { - background: rgba(239, 68, 68, 0.2); + background: var(--color-status-error-bg); color: var(--color-status-error-border); } @@ -461,15 +461,15 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .simulation-section { padding-top: 1.5rem; - border-top: 1px solid var(--color-text-primary); + border-top: 1px solid var(--color-border-primary); } .simulation-error { margin-bottom: 1rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); - border: 1px solid rgba(239, 68, 68, 0.45); - background: rgba(239, 68, 68, 0.12); + border: 1px solid var(--color-status-error-bg); + background: var(--color-status-error-bg); color: var(--color-status-error-border); font-size: 0.8125rem; font-weight: var(--font-weight-medium); @@ -514,7 +514,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; - background: var(--color-status-info); + background: var(--color-btn-primary-bg); border: none; border-radius: var(--radius-md); color: var(--color-surface-primary); diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts index 9ad0a6ebf..ae401533e 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts @@ -127,8 +127,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .selector-select { width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.75rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; @@ -140,7 +140,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; background-size: 1rem; &:hover:not(:disabled) { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } &:focus { @@ -165,7 +165,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .spinner { width: 1rem; height: 1rem; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 0.6s linear infinite; @@ -178,8 +178,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .profile-preview { margin-top: 0.5rem; padding: 0.75rem; - background: var(--color-text-primary); - border: 1px solid var(--color-text-primary); + background: var(--color-surface-tertiary); + border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); } @@ -201,7 +201,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .default-badge { padding: 0.125rem 0.375rem; - background: rgba(34, 197, 94, 0.2); + background: var(--color-status-success-bg); color: var(--color-status-success); border-radius: var(--radius-sm); font-size: 0.625rem; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts index 26564b6a2..00000dc9b 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts @@ -377,7 +377,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode .checkbox-custom { width: 20px; height: 20px; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-sm); display: flex; align-items: center; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts index ead09b974..dd9773590 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts @@ -211,7 +211,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai. max-width: 560px; height: 100%; background: var(--color-surface-elevated); - border-left: 1px solid var(--color-text-primary); + border-left: 1px solid var(--color-border-primary); display: flex; flex-direction: column; animation: slideIn 0.3s ease; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts index 2d7670fc9..3db1ec75a 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts @@ -322,7 +322,7 @@ type JustificationType = max-width: 560px; height: 100%; background: var(--color-surface-elevated); - border-left: 1px solid var(--color-text-primary); + border-left: 1px solid var(--color-border-primary); display: flex; flex-direction: column; animation: slideIn 0.3s ease; @@ -736,7 +736,7 @@ type JustificationType = .checklist-item .checkbox-custom { width: 20px; height: 20px; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-sm); display: flex; align-items: center; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts index a9b637c02..c7aa49ee3 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts @@ -310,7 +310,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = { max-width: 560px; height: 100%; background: var(--color-surface-elevated); - border-left: 1px solid var(--color-text-primary); + border-left: 1px solid var(--color-border-primary); display: flex; flex-direction: column; animation: slideIn 0.3s ease; @@ -931,7 +931,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = { .pr-spinner { width: 20px; height: 20px; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-top-color: var(--color-status-info-border); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts index 3d444528e..2f3efaf7b 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts @@ -370,7 +370,7 @@ interface ConflictingStatement { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; @@ -518,7 +518,7 @@ interface ConflictingStatement { .statement-card { background: var(--color-surface-tertiary); - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-xl); cursor: pointer; transition: all 0.2s ease; @@ -526,7 +526,7 @@ interface ConflictingStatement { } .statement-card:hover { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } .statement-card--selected { @@ -701,7 +701,7 @@ interface ConflictingStatement { } .option-item:hover { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } .option-item input { @@ -711,7 +711,7 @@ interface ConflictingStatement { .option-radio { width: 20px; height: 20px; - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-full); display: flex; align-items: center; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts index 04e14c0bd..a3ac03f78 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts @@ -461,7 +461,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts index 328cb04ff..10912f098 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts @@ -550,7 +550,7 @@ interface EvidenceItem { height: 32px; border-radius: var(--radius-full); background: var(--color-surface-tertiary); - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); display: flex; align-items: center; justify-content: center; @@ -653,7 +653,7 @@ interface EvidenceItem { gap: 1rem; padding: 1rem; background: var(--color-surface-tertiary); - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-xl); cursor: pointer; text-align: left; @@ -661,7 +661,7 @@ interface EvidenceItem { } .status-option:hover { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } .status-option--selected { @@ -746,7 +746,7 @@ interface EvidenceItem { display: block; padding: 0.875rem 1rem; background: var(--color-surface-tertiary); - border: 2px solid var(--color-text-primary); + border: 2px solid var(--color-border-primary); border-radius: var(--radius-xl); text-align: left; cursor: pointer; @@ -754,7 +754,7 @@ interface EvidenceItem { } .justification-type-btn:hover { - border-color: var(--color-text-secondary); + border-color: var(--color-border-secondary); } .justification-type-btn--selected { diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts index 60556497a..be27112b1 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts @@ -519,7 +519,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts index 9382a48df..4235b61e2 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts @@ -283,7 +283,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts index 216c96734..5b822b1d3 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts @@ -318,7 +318,7 @@ import { max-width: 560px; height: 100%; background: var(--color-surface-elevated); - border-left: 1px solid var(--color-text-primary); + border-left: 1px solid var(--color-border-primary); display: flex; flex-direction: column; animation: slideIn 0.3s ease; @@ -419,7 +419,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts index 0c802257f..de0c2eed6 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts @@ -259,7 +259,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts index 3c8efced4..63c4b8653 100644 --- a/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts @@ -593,7 +593,7 @@ import { .loading-spinner { width: 40px; height: 40px; - border: 3px solid var(--color-text-primary); + border: 3px solid var(--color-border-primary); border-top-color: var(--color-status-info); border-radius: var(--radius-full); animation: spin 1s linear infinite;