stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity

Fix VEX hub theming: replace swapped CSS vars, rgba colors, button colors

Browse Source 
All 13 VEX hub components had the same swapped theme pattern:
- text-heading used as backgrounds → surface-elevated
- surface-secondary used as text color → text-heading
- border-primary used as text color → text-primary
- text-primary used as backgrounds → surface-tertiary
- status-info used as button bg → btn-primary-bg
- Hardcoded rgba() colors → CSS variable references
- text/border color swaps in border declarations

168 occurrences fixed across: vex-hub-dashboard, vex-statement-search,
vex-statement-detail, vex-statement-detail-panel, vex-create-workflow,
vex-hub-stats, vex-consensus, vex-conflict-resolution, vex-hub,
ai-explain-panel, ai-justify-panel, ai-remediate-panel, ai-consent-gate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-29 12:18:50 +03:00
parent ba33790d36
commit f4efa5195f
12 changed files with 261 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Web/StellaOps.Web/src/app/features/vex-hub/ai-consent-gate.component.ts
View File

@@ -170,8 +170,8 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
} }
.consent-dialog { .consent-dialog {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
width: 100%; width: 100%;
max-width: 540px; max-width: 540px;
@@ -185,7 +185,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.consent-icon { .consent-icon {
@@ -210,7 +210,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
flex: 1; flex: 1;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.btn-close { .btn-close {
@@ -228,7 +228,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -260,7 +260,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
align-items: flex-start; align-items: flex-start;
gap: 0.875rem; gap: 0.875rem;
padding: 0.875rem; padding: 0.875rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -285,18 +285,18 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
} }
.feature-icon--remediate { .feature-icon--remediate {
background: rgba(34, 197, 94, 0.2); background: var(--color-status-success-bg);
color: var(--color-status-success-border); color: var(--color-status-success-border);
} }
.feature-icon--justify { .feature-icon--justify {
background: rgba(168, 85, 247, 0.2); background: var(--color-brand-primary-20);
color: var(--color-status-excepted-border); color: var(--color-status-excepted-border);
} }
.feature-content strong { .feature-content strong {
display: block; display: block;
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@@ -308,8 +308,8 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
} }
.data-notice { .data-notice {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1rem; padding: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -352,7 +352,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.notice-emphasis { .notice-emphasis {
margin: 0; margin: 0;
padding: 0.75rem; padding: 0.75rem;
background: rgba(34, 197, 94, 0.1); background: var(--color-status-success-bg);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-status-success-border); color: var(--color-status-success-border);
} }
@@ -387,7 +387,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
} }
.consent-checkbox input:checked + .checkbox-custom { .consent-checkbox input:checked + .checkbox-custom {
background: var(--color-status-info); background: var(--color-btn-primary-bg);
border-color: var(--color-status-info); border-color: var(--color-status-info);
} }
@@ -421,10 +421,10 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.scope-selector select { .scope-selector select {
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -438,7 +438,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.75rem;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.btn { .btn {
@@ -471,12 +471,12 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.btn--ghost { .btn--ghost {
background: transparent; background: transparent;
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--ghost:hover { .btn--ghost:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn-spinner { .btn-spinner {

30
src/Web/StellaOps.Web/src/app/features/vex-hub/ai-explain-panel.component.ts
View File

@@ -210,7 +210,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
height: 100%; height: 100%;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary); border-left: 1px solid var(--color-text-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -231,7 +231,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -261,7 +261,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.panel-subtitle { .panel-subtitle {
@@ -285,7 +285,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -372,7 +372,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
} }
.explanation-section { .explanation-section {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
} }
@@ -432,7 +432,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.impact-value { .impact-value {
@@ -445,7 +445,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.impact-tags { .impact-tags {
@@ -456,7 +456,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
.impact-tag { .impact-tag {
padding: 0.25rem 0.625rem; padding: 0.25rem 0.625rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.75rem; font-size: 0.75rem;
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
@@ -486,7 +486,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
background: var(--color-text-heading); background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@@ -531,7 +531,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@@ -573,7 +573,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -584,7 +584,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
/* Footer */ /* Footer */
.panel-footer { .panel-footer {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -623,13 +623,13 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
} }
.btn--secondary { .btn--secondary {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--secondary:hover { .btn--secondary:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--ghost { .btn--ghost {

38
src/Web/StellaOps.Web/src/app/features/vex-hub/ai-justify-panel.component.ts
View File

@@ -321,7 +321,7 @@ type JustificationType =
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
height: 100%; height: 100%;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary); border-left: 1px solid var(--color-text-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -338,7 +338,7 @@ type JustificationType =
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -352,7 +352,7 @@ type JustificationType =
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
background: rgba(168, 85, 247, 0.2); background: var(--color-brand-primary-20);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -368,7 +368,7 @@ type JustificationType =
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.panel-subtitle { .panel-subtitle {
@@ -392,7 +392,7 @@ type JustificationType =
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -412,7 +412,7 @@ type JustificationType =
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.form-description { .form-description {
@@ -428,7 +428,7 @@ type JustificationType =
.context-section { .context-section {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -509,7 +509,7 @@ type JustificationType =
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -548,7 +548,7 @@ type JustificationType =
justify-content: center; justify-content: center;
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.confidence-info { .confidence-info {
@@ -589,12 +589,12 @@ type JustificationType =
.suggestion-value { .suggestion-value {
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
/* Draft Section */ /* Draft Section */
.draft-section { .draft-section {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
} }
@@ -619,7 +619,7 @@ type JustificationType =
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-text-muted); color: var(--color-text-muted);
@@ -629,7 +629,7 @@ type JustificationType =
} }
.btn-copy:hover { .btn-copy:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -653,7 +653,7 @@ type JustificationType =
/* Evidence Section */ /* Evidence Section */
.evidence-section { .evidence-section {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1rem; padding: 1rem;
} }
@@ -679,7 +679,7 @@ type JustificationType =
align-items: flex-start; align-items: flex-start;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.8125rem; font-size: 0.8125rem;
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
@@ -695,7 +695,7 @@ type JustificationType =
/* Checklist Section */ /* Checklist Section */
.checklist-section { .checklist-section {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1rem; padding: 1rem;
} }
@@ -770,7 +770,7 @@ type JustificationType =
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@@ -807,7 +807,7 @@ type JustificationType =
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -818,7 +818,7 @@ type JustificationType =
/* Footer */ /* Footer */
.panel-footer { .panel-footer {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }

62
src/Web/StellaOps.Web/src/app/features/vex-hub/ai-remediate-panel.component.ts
View File

@@ -309,7 +309,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
height: 100%; height: 100%;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary); border-left: 1px solid var(--color-text-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -326,7 +326,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -340,7 +340,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
background: rgba(34, 197, 94, 0.2); background: var(--color-status-success-bg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -356,7 +356,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.panel-subtitle { .panel-subtitle {
@@ -380,7 +380,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -443,7 +443,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -474,7 +474,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.recommendation-card { .recommendation-card {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -501,7 +501,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--color-text-heading); background: var(--color-surface-elevated);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -526,7 +526,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.action-upgrade { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .action-upgrade { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.action-patch { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .action-patch { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.action-mitigate { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .action-mitigate { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.action-workaround { background: rgba(249, 115, 22, 0.2); color: var(--color-severity-high-border); } .action-workaround { background: rgba(249, 115, 22, 0.2); color: var(--color-severity-high-border); }
@@ -600,7 +600,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-status-success-border); color: var(--color-status-success-border);
background: var(--color-text-heading); background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@@ -609,7 +609,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.75rem; padding: 0.75rem;
overflow-x: auto; overflow-x: auto;
@@ -629,7 +629,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -639,7 +639,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.btn-copy:hover { .btn-copy:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -671,7 +671,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.notes-section { .notes-section {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -732,7 +732,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@@ -770,7 +770,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -781,7 +781,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
/* Footer */ /* Footer */
.panel-footer { .panel-footer {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -815,13 +815,13 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.btn--secondary { .btn--secondary {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--secondary:hover { .btn--secondary:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--ghost { .btn--ghost {
@@ -837,7 +837,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.pr-section { .pr-section {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -853,7 +853,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@@ -866,7 +866,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
} }
.pr-status--open, .pr-status--review_requested { background: var(--color-status-success-text); color: #fff; } .pr-status--open, .pr-status--review_requested { background: var(--color-status-success-text); color: #fff; }
.pr-status--draft { background: var(--color-text-primary); color: var(--color-text-muted); } .pr-status--draft { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.pr-status--approved { background: var(--color-status-info-text); color: #fff; } .pr-status--approved { background: var(--color-status-info-text); color: #fff; }
.pr-status--changes_requested { background: var(--color-status-warning-text); color: #fff; } .pr-status--changes_requested { background: var(--color-status-warning-text); color: #fff; }
.pr-status--merged { background: var(--color-status-excepted); color: var(--color-status-excepted-border); } .pr-status--merged { background: var(--color-status-excepted); color: var(--color-status-excepted-border); }
@@ -902,7 +902,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.ci-status--pending, .ci-status--running { background: var(--color-status-warning-text); color: #fff; } .ci-status--pending, .ci-status--running { background: var(--color-status-warning-text); color: #fff; }
.ci-status--success { background: var(--color-status-success-text); color: #fff; } .ci-status--success { background: var(--color-status-success-text); color: #fff; }
.ci-status--failure { background: var(--color-status-error-text); color: #fff; } .ci-status--failure { background: var(--color-status-error-text); color: #fff; }
.ci-status--skipped { background: var(--color-text-primary); color: var(--color-text-muted); } .ci-status--skipped { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.btn-copy-link { .btn-copy-link {
width: 32px; width: 32px;
@@ -917,7 +917,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
cursor: pointer; cursor: pointer;
} }
.btn-copy-link:hover { background: var(--color-text-primary); color: rgba(212, 201, 168, 0.3); } .btn-copy-link:hover { background: var(--color-surface-tertiary); color: rgba(212, 201, 168, 0.3); }
.btn-copy-link svg { width: 16px; height: 16px; } .btn-copy-link svg { width: 16px; height: 16px; }
.pr-creating-state { .pr-creating-state {
@@ -946,8 +946,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
background: rgba(239, 68, 68, 0.1); background: var(--color-status-error-bg);
border: 1px solid rgba(239, 68, 68, 0.3); border: 1px solid var(--color-status-error-bg);
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
@@ -956,7 +956,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.btn-retry { .btn-retry {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
@@ -964,7 +964,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
cursor: pointer; cursor: pointer;
} }
.btn-retry:hover { background: var(--color-text-secondary); } .btn-retry:hover { background: var(--color-surface-tertiary); }
.scm-selector { .scm-selector {
display: flex; display: flex;
@@ -981,8 +981,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.scm-select { .scm-select {
flex: 1; flex: 1;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
font-size: 0.8125rem; font-size: 0.8125rem;

44
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-conflict-resolution.component.ts
View File

@@ -289,8 +289,8 @@ interface ConflictingStatement {
} }
.resolution-container { .resolution-container {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
@@ -305,7 +305,7 @@ interface ConflictingStatement {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.header-content { .header-content {
@@ -318,7 +318,7 @@ interface ConflictingStatement {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.header-cve { .header-cve {
@@ -342,7 +342,7 @@ interface ConflictingStatement {
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -429,7 +429,7 @@ interface ConflictingStatement {
/* Conflict Breakdown */ /* Conflict Breakdown */
.conflict-breakdown { .conflict-breakdown {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -468,7 +468,7 @@ interface ConflictingStatement {
.bar-container { .bar-container {
flex: 1; flex: 1;
height: 8px; height: 8px;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@@ -481,7 +481,7 @@ interface ConflictingStatement {
.bar-fill--affected { background: var(--color-status-error); } .bar-fill--affected { background: var(--color-status-error); }
.bar-fill--not_affected { background: var(--color-status-success); } .bar-fill--not_affected { background: var(--color-status-success); }
.bar-fill--fixed { background: var(--color-status-info); } .bar-fill--fixed { background: var(--color-btn-primary-bg); }
.bar-fill--under_investigation { background: var(--color-status-warning); } .bar-fill--under_investigation { background: var(--color-status-warning); }
.status-count { .status-count {
@@ -517,7 +517,7 @@ interface ConflictingStatement {
} }
.statement-card { .statement-card {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary); border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
cursor: pointer; cursor: pointer;
@@ -554,8 +554,8 @@ interface ConflictingStatement {
} }
.issuer-badge--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .issuer-badge--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.issuer-badge--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .issuer-badge--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.issuer-badge--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); } .issuer-badge--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
.issuer-badge--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .issuer-badge--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.issuer-badge--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); } .issuer-badge--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
@@ -604,8 +604,8 @@ interface ConflictingStatement {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.status-badge--affected { background: rgba(239, 68, 68, 0.2); color: var(--color-status-error-border); } .status-badge--affected { background: var(--color-status-error-bg); color: var(--color-status-error-border); }
.status-badge--not_affected { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); } .status-badge--not_affected { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
.status-badge--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .status-badge--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.status-badge--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .status-badge--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
@@ -623,7 +623,7 @@ interface ConflictingStatement {
.justification-type { .justification-type {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-status-excepted-border); color: var(--color-status-excepted-border);
background: rgba(168, 85, 247, 0.15); background: var(--color-brand-primary-20);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@@ -633,7 +633,7 @@ interface ConflictingStatement {
justify-content: space-between; justify-content: space-between;
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.timestamp { .timestamp {
@@ -654,7 +654,7 @@ interface ConflictingStatement {
padding: 0.625rem; padding: 0.625rem;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-text-heading); background: var(--color-surface-elevated);
} }
.statement-card--selected .selection-indicator { .statement-card--selected .selection-indicator {
@@ -669,7 +669,7 @@ interface ConflictingStatement {
/* Resolution Options */ /* Resolution Options */
.resolution-options { .resolution-options {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
} }
@@ -693,8 +693,8 @@ interface ConflictingStatement {
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
@@ -728,7 +728,7 @@ interface ConflictingStatement {
content: ''; content: '';
width: 10px; width: 10px;
height: 10px; height: 10px;
background: var(--color-status-info); background: var(--color-btn-primary-bg);
border-radius: var(--radius-full); border-radius: var(--radius-full);
} }
@@ -780,7 +780,7 @@ interface ConflictingStatement {
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -794,7 +794,7 @@ interface ConflictingStatement {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.selection-status { .selection-status {

60
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-consensus.component.ts
View File

@@ -329,7 +329,7 @@ import {
} }
.btn-back:hover { .btn-back:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: var(--color-status-info-border); color: var(--color-status-info-border);
} }
@@ -342,7 +342,7 @@ import {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.consensus-header__subtitle { .consensus-header__subtitle {
@@ -353,8 +353,8 @@ import {
/* Search Panel */ /* Search Panel */
.search-panel { .search-panel {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -385,10 +385,10 @@ import {
.search-field input { .search-field input {
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -423,12 +423,12 @@ import {
.btn--ghost { .btn--ghost {
background: transparent; background: transparent;
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--ghost:hover { .btn--ghost:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--text { .btn--text {
@@ -474,8 +474,8 @@ import {
/* Consensus Summary */ /* Consensus Summary */
.consensus-summary { .consensus-summary {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -533,7 +533,7 @@ import {
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-status-success-border); color: var(--color-status-success-border);
@@ -550,7 +550,7 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
border-left: 4px solid; border-left: 4px solid;
@@ -583,7 +583,7 @@ import {
.conflict-alert__content strong { .conflict-alert__content strong {
display: block; display: block;
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -607,7 +607,7 @@ import {
.stat-value { .stat-value {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.stat-label { .stat-label {
@@ -618,8 +618,8 @@ import {
/* Voting Section */ /* Voting Section */
.voting-section { .voting-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -643,7 +643,7 @@ import {
.vote-group { .vote-group {
position: relative; position: relative;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
} }
@@ -659,7 +659,7 @@ import {
.vote-group--affected .vote-group__bar { background: var(--color-status-error); } .vote-group--affected .vote-group__bar { background: var(--color-status-error); }
.vote-group--not_affected .vote-group__bar { background: var(--color-status-success); } .vote-group--not_affected .vote-group__bar { background: var(--color-status-success); }
.vote-group--fixed .vote-group__bar { background: var(--color-status-info); } .vote-group--fixed .vote-group__bar { background: var(--color-btn-primary-bg); }
.vote-group--under_investigation .vote-group__bar { background: var(--color-status-warning); } .vote-group--under_investigation .vote-group__bar { background: var(--color-status-warning); }
.vote-group__label { .vote-group__label {
@@ -687,7 +687,7 @@ import {
} }
.vote-card { .vote-card {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -736,7 +736,7 @@ import {
.issuer-name { .issuer-name {
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.issuer-type { .issuer-type {
@@ -782,7 +782,7 @@ import {
.metric-bar { .metric-bar {
height: 6px; height: 6px;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@@ -805,7 +805,7 @@ import {
.vote-justification { .vote-justification {
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -835,8 +835,8 @@ import {
/* Hints Section */ /* Hints Section */
.hints-section { .hints-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -863,7 +863,7 @@ import {
align-items: flex-start; align-items: flex-start;
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
font-size: 0.875rem; font-size: 0.875rem;
@@ -879,7 +879,7 @@ import {
/* Conflicts Section */ /* Conflicts Section */
.conflicts-section { .conflicts-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-status-error-text); border: 1px solid var(--color-status-error-text);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
@@ -901,7 +901,7 @@ import {
} }
.conflict-card { .conflict-card {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -963,7 +963,7 @@ import {
flex-direction: column; flex-direction: column;
gap: 0.375rem; gap: 0.375rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -990,7 +990,7 @@ import {
.conflict-suggestion { .conflict-suggestion {
padding: 1rem; padding: 1rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.conflict-suggestion strong { .conflict-suggestion strong {

56
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-create-workflow.component.ts
View File

@@ -477,8 +477,8 @@ interface EvidenceItem {
} }
.workflow-container { .workflow-container {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;
@@ -493,14 +493,14 @@ interface EvidenceItem {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.workflow-header h2 { .workflow-header h2 {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.btn-close { .btn-close {
@@ -518,7 +518,7 @@ interface EvidenceItem {
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -532,7 +532,7 @@ interface EvidenceItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
background: rgba(30, 41, 59, 0.5); background: rgba(30, 41, 59, 0.5);
} }
@@ -549,7 +549,7 @@ interface EvidenceItem {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary); border: 2px solid var(--color-text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -604,7 +604,7 @@ interface EvidenceItem {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.step-description { .step-description {
@@ -652,7 +652,7 @@ interface EvidenceItem {
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary); border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
cursor: pointer; cursor: pointer;
@@ -670,12 +670,12 @@ interface EvidenceItem {
.status-option--selected.status-option--affected { .status-option--selected.status-option--affected {
border-color: var(--color-status-error); border-color: var(--color-status-error);
background: rgba(239, 68, 68, 0.1); background: var(--color-status-error-bg);
} }
.status-option--selected.status-option--not_affected { .status-option--selected.status-option--not_affected {
border-color: var(--color-status-success); border-color: var(--color-status-success);
background: rgba(34, 197, 94, 0.1); background: var(--color-status-success-bg);
} }
.status-option--selected.status-option--fixed { .status-option--selected.status-option--fixed {
@@ -704,12 +704,12 @@ interface EvidenceItem {
} }
.status-option--affected .status-icon { .status-option--affected .status-icon {
background: rgba(239, 68, 68, 0.2); background: var(--color-status-error-bg);
color: var(--color-status-error-border); color: var(--color-status-error-border);
} }
.status-option--not_affected .status-icon { .status-option--not_affected .status-icon {
background: rgba(34, 197, 94, 0.2); background: var(--color-status-success-bg);
color: var(--color-status-success-border); color: var(--color-status-success-border);
} }
@@ -745,7 +745,7 @@ interface EvidenceItem {
.justification-type-btn { .justification-type-btn {
display: block; display: block;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary); border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
text-align: left; text-align: left;
@@ -792,7 +792,7 @@ interface EvidenceItem {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.875rem; padding: 0.875rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -808,10 +808,10 @@ interface EvidenceItem {
} }
.evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.evidence-icon--attestation { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .evidence-icon--attestation { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.evidence-icon--advisory { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); } .evidence-icon--advisory { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
.evidence-icon--other { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); } .evidence-icon--other { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.evidence-info { .evidence-info {
flex: 1; flex: 1;
@@ -860,7 +860,7 @@ interface EvidenceItem {
.add-evidence-form { .add-evidence-form {
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -873,7 +873,7 @@ interface EvidenceItem {
/* Review */ /* Review */
.review-card { .review-card {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
} }
@@ -885,8 +885,8 @@ interface EvidenceItem {
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
} }
.review-header--affected { background: rgba(239, 68, 68, 0.15); } .review-header--affected { background: var(--color-status-error-bg); }
.review-header--not_affected { background: rgba(34, 197, 94, 0.15); } .review-header--not_affected { background: var(--color-status-success-bg); }
.review-header--fixed { background: rgba(59, 130, 246, 0.15); } .review-header--fixed { background: rgba(59, 130, 246, 0.15); }
.review-header--under_investigation { background: rgba(245, 158, 11, 0.15); } .review-header--under_investigation { background: rgba(245, 158, 11, 0.15); }
@@ -917,7 +917,7 @@ interface EvidenceItem {
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 1rem;
padding: 0.625rem 0; padding: 0.625rem 0;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.review-row:last-child { .review-row:last-child {
@@ -944,7 +944,7 @@ interface EvidenceItem {
code.review-value { code.review-value {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.8125rem; font-size: 0.8125rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
word-break: break-all; word-break: break-all;
@@ -965,7 +965,7 @@ interface EvidenceItem {
.evidence-chip { .evidence-chip {
padding: 0.25rem 0.625rem; padding: 0.25rem 0.625rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);
@@ -996,7 +996,7 @@ interface EvidenceItem {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.footer-left, .footer-left,
@@ -1039,8 +1039,8 @@ interface EvidenceItem {
} }
.btn--secondary { .btn--secondary {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -1050,7 +1050,7 @@ interface EvidenceItem {
} }
.btn--secondary:hover:not(:disabled) { .btn--secondary:hover:not(:disabled) {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--ghost { .btn--ghost {

24
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-dashboard.component.ts
View File

@@ -262,7 +262,7 @@ import {
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
font-size: 1.75rem; font-size: 1.75rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.dashboard__subtitle { .dashboard__subtitle {
@@ -318,8 +318,8 @@ import {
} }
.stat-card { .stat-card {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
display: flex; display: flex;
@@ -357,7 +357,7 @@ import {
.stat-card__value { .stat-card__value {
font-size: 2rem; font-size: 2rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
line-height: 1; line-height: 1;
} }
@@ -370,7 +370,7 @@ import {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
padding-top: 0.5rem; padding-top: 0.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.stat-card__trend--up { color: var(--color-status-success-border); } .stat-card__trend--up { color: var(--color-status-success-border); }
@@ -378,8 +378,8 @@ import {
/* Dashboard Sections */ /* Dashboard Sections */
.dashboard__section { .dashboard__section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -415,7 +415,7 @@ import {
.source-card__bar { .source-card__bar {
height: 8px; height: 8px;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@@ -453,13 +453,13 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transition: background 0.15s ease; transition: background 0.15s ease;
} }
.activity-item:hover { .activity-item:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.activity-item__icon { .activity-item__icon {
@@ -478,7 +478,7 @@ import {
.activity-item__icon--created { background: var(--color-status-success-text); color: #fff; } .activity-item__icon--created { background: var(--color-status-success-text); color: #fff; }
.activity-item__icon--updated { background: var(--color-status-info-text); color: #fff; } .activity-item__icon--updated { background: var(--color-status-info-text); color: #fff; }
.activity-item__icon--superseded { background: var(--color-text-primary); color: var(--color-text-muted); } .activity-item__icon--superseded { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.activity-item__content { .activity-item__content {
flex: 1; flex: 1;
@@ -490,7 +490,7 @@ import {
.activity-item__cve { .activity-item__cve {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-size: 0.875rem; font-size: 0.875rem;
} }

50
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-hub-stats.component.ts
View File

@@ -249,7 +249,7 @@ import {
} }
.btn-back:hover { .btn-back:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: var(--color-status-info-border); color: var(--color-status-info-border);
} }
@@ -262,7 +262,7 @@ import {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.stats-header__subtitle { .stats-header__subtitle {
@@ -304,8 +304,8 @@ import {
align-items: center; align-items: center;
gap: 1.25rem; gap: 1.25rem;
padding: 1.5rem; padding: 1.5rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
} }
@@ -338,7 +338,7 @@ import {
.summary-value { .summary-value {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
line-height: 1; line-height: 1;
} }
@@ -351,8 +351,8 @@ import {
/* Distribution Section */ /* Distribution Section */
.distribution-section { .distribution-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -383,7 +383,7 @@ import {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
text-align: center; text-align: center;
} }
@@ -391,7 +391,7 @@ import {
.status-visual { .status-visual {
width: 60px; width: 60px;
height: 80px; height: 80px;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -421,7 +421,7 @@ import {
.status-count { .status-count {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.status-label { .status-label {
@@ -440,7 +440,7 @@ import {
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.legend-item { .legend-item {
@@ -459,13 +459,13 @@ import {
.legend-item--affected .legend-color { background: var(--color-status-error); } .legend-item--affected .legend-color { background: var(--color-status-error); }
.legend-item--not_affected .legend-color { background: var(--color-status-success); } .legend-item--not_affected .legend-color { background: var(--color-status-success); }
.legend-item--fixed .legend-color { background: var(--color-status-info); } .legend-item--fixed .legend-color { background: var(--color-btn-primary-bg); }
.legend-item--under_investigation .legend-color { background: var(--color-status-warning); } .legend-item--under_investigation .legend-color { background: var(--color-status-warning); }
/* Sources Section */ /* Sources Section */
.sources-section { .sources-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -509,8 +509,8 @@ import {
} }
.source-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .source-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.source-icon--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .source-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.source-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); } .source-icon--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
.source-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .source-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.source-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); } .source-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
@@ -523,7 +523,7 @@ import {
.source-bar-container { .source-bar-container {
flex: 1; flex: 1;
height: 8px; height: 8px;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@@ -550,7 +550,7 @@ import {
.source-count { .source-count {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.source-percent { .source-percent {
@@ -560,8 +560,8 @@ import {
/* Activity Section */ /* Activity Section */
.activity-section { .activity-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -585,7 +585,7 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -604,7 +604,7 @@ import {
} }
.activity-indicator--created { .activity-indicator--created {
background: rgba(34, 197, 94, 0.2); background: var(--color-status-success-bg);
color: var(--color-status-success-border); color: var(--color-status-success-border);
} }
@@ -650,8 +650,8 @@ import {
/* Trends Section */ /* Trends Section */
.trends-section { .trends-section {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
padding: 1.5rem; padding: 1.5rem;
} }
@@ -693,7 +693,7 @@ import {
.trend-bar--affected { background: var(--color-status-error); } .trend-bar--affected { background: var(--color-status-error); }
.trend-bar--not_affected { background: var(--color-status-success); } .trend-bar--not_affected { background: var(--color-status-success); }
.trend-bar--fixed { background: var(--color-status-info); } .trend-bar--fixed { background: var(--color-btn-primary-bg); }
.trend-date { .trend-date {
font-size: 0.6875rem; font-size: 0.6875rem;

58
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail-panel.component.ts
View File

@@ -317,7 +317,7 @@ import {
width: 100%; width: 100%;
max-width: 560px; max-width: 560px;
height: 100%; height: 100%;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary); border-left: 1px solid var(--color-text-primary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -334,7 +334,7 @@ import {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -358,17 +358,17 @@ import {
height: 22px; height: 22px;
} }
.panel-icon--affected { background: rgba(239, 68, 68, 0.2); color: var(--color-status-error-border); } .panel-icon--affected { background: var(--color-status-error-bg); color: var(--color-status-error-border); }
.panel-icon--not_affected { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); } .panel-icon--not_affected { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
.panel-icon--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .panel-icon--fixed { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.panel-icon--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .panel-icon--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.panel-icon--default { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); } .panel-icon--default { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.panel-title h2 { .panel-title h2 {
margin: 0; margin: 0;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.panel-subtitle { .panel-subtitle {
@@ -392,7 +392,7 @@ import {
} }
.btn-close:hover { .btn-close:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -450,12 +450,12 @@ import {
} }
.status-banner--affected { .status-banner--affected {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.2)); background: linear-gradient(135deg, var(--color-status-error-bg), rgba(185, 28, 28, 0.2));
color: var(--color-status-error-border); color: var(--color-status-error-border);
} }
.status-banner--not_affected { .status-banner--not_affected {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.2)); background: linear-gradient(135deg, var(--color-status-success-bg), rgba(21, 128, 61, 0.2));
color: var(--color-status-success-border); color: var(--color-status-success-border);
} }
@@ -480,7 +480,7 @@ import {
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.25rem 0.625rem; padding: 0.25rem 0.625rem;
background: rgba(168, 85, 247, 0.2); background: var(--color-brand-primary-20);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.6875rem; font-size: 0.6875rem;
color: var(--color-status-excepted-border); color: var(--color-status-excepted-border);
@@ -493,7 +493,7 @@ import {
} }
.detail-section { .detail-section {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
} }
@@ -543,7 +543,7 @@ import {
.info-value--code { .info-value--code {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.8125rem; font-size: 0.8125rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
padding: 0.5rem; padding: 0.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
word-break: break-all; word-break: break-all;
@@ -556,7 +556,7 @@ import {
.type-badge { .type-badge {
display: inline-block; display: inline-block;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
background: rgba(168, 85, 247, 0.2); background: var(--color-brand-primary-20);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
@@ -574,7 +574,7 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@@ -590,8 +590,8 @@ import {
} }
.issuer-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .issuer-icon--vendor { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.issuer-icon--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .issuer-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.issuer-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); } .issuer-icon--oss { background: var(--color-status-success-bg); color: var(--color-status-success-border); }
.issuer-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .issuer-icon--researcher { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.issuer-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); } .issuer-icon--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
@@ -695,7 +695,7 @@ import {
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);
@@ -721,8 +721,8 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.875rem; padding: 0.875rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
text-decoration: none; text-decoration: none;
transition: all 0.15s ease; transition: all 0.15s ease;
@@ -748,9 +748,9 @@ import {
} }
.evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); } .evidence-icon--sbom { background: rgba(59, 130, 246, 0.2); color: var(--color-status-info-border); }
.evidence-icon--attestation { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); } .evidence-icon--attestation { background: var(--color-brand-primary-20); color: var(--color-status-excepted-border); }
.evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); } .evidence-icon--reachability { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
.evidence-icon--other { background: rgba(148, 163, 184, 0.2); color: var(--color-text-muted); } .evidence-icon--other { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
.evidence-content { .evidence-content {
flex: 1; flex: 1;
@@ -778,7 +778,7 @@ import {
.detail-section--meta { .detail-section--meta {
background: transparent; background: transparent;
border: 1px dashed var(--color-text-primary); border: 1px dashed var(--color-border-primary);
padding: 1rem; padding: 1rem;
} }
@@ -787,7 +787,7 @@ import {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.5rem 0; padding: 0.5rem 0;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.meta-row:last-child { .meta-row:last-child {
@@ -807,7 +807,7 @@ import {
code.meta-value { code.meta-value {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.6875rem; font-size: 0.6875rem;
background: var(--color-text-heading); background: var(--color-surface-elevated);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
@@ -839,7 +839,7 @@ import {
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -849,7 +849,7 @@ import {
.panel-footer { .panel-footer {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -888,13 +888,13 @@ import {
} }
.btn--secondary { .btn--secondary {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--secondary:hover { .btn--secondary:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--ghost { .btn--ghost {

28
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-detail.component.ts
View File

@@ -288,7 +288,7 @@ import {
.error-state h3 { .error-state h3 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.error-state p { .error-state p {
@@ -320,7 +320,7 @@ import {
} }
.btn-back:hover { .btn-back:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: var(--color-status-info-border); color: var(--color-status-info-border);
} }
@@ -340,7 +340,7 @@ import {
margin: 0; margin: 0;
font-size: 1.75rem; font-size: 1.75rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
} }
@@ -391,8 +391,8 @@ import {
/* Detail Cards */ /* Detail Cards */
.detail-card { .detail-card {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -429,7 +429,7 @@ import {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
background: var(--color-text-primary); background: var(--color-surface-tertiary);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
word-break: break-all; word-break: break-all;
@@ -467,7 +467,7 @@ import {
.justification-section { .justification-section {
margin-top: 1.5rem; margin-top: 1.5rem;
padding-top: 1.5rem; padding-top: 1.5rem;
border-top: 1px solid var(--color-text-primary); border-top: 1px solid var(--color-border-primary);
} }
.justification-section label { .justification-section label {
@@ -481,7 +481,7 @@ import {
} }
.justification-text { .justification-text {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
padding: 1rem; padding: 1rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
@@ -501,7 +501,7 @@ import {
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 0.875rem; padding: 0.875rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@@ -554,14 +554,14 @@ import {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--color-text-heading); background: var(--color-surface-elevated);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-status-info-border); color: var(--color-status-info-border);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.evidence-item__link:hover { .evidence-item__link:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: var(--color-status-info-border); color: var(--color-status-info-border);
} }
@@ -601,13 +601,13 @@ import {
} }
.btn--secondary { .btn--secondary {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
.btn--secondary:hover { .btn--secondary:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn--ai { .btn--ai {

34
src/Web/StellaOps.Web/src/app/features/vex-hub/vex-statement-search.component.ts
View File

@@ -262,7 +262,7 @@ import {
} }
.btn-back:hover { .btn-back:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: var(--color-status-info-border); color: var(--color-status-info-border);
} }
@@ -275,7 +275,7 @@ import {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary); color: var(--color-text-heading);
} }
.search-header__subtitle { .search-header__subtitle {
@@ -286,8 +286,8 @@ import {
/* Filters */ /* Filters */
.filters-panel { .filters-panel {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@@ -357,8 +357,8 @@ import {
/* Results */ /* Results */
.results-panel { .results-panel {
background: var(--color-text-heading); background: var(--color-surface-elevated);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
overflow: hidden; overflow: hidden;
} }
@@ -368,7 +368,7 @@ import {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
} }
.results-count { .results-count {
@@ -384,8 +384,8 @@ import {
.btn-pagination { .btn-pagination {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
font-size: 0.75rem; font-size: 0.75rem;
@@ -394,7 +394,7 @@ import {
} }
.btn-pagination:hover:not(:disabled) { .btn-pagination:hover:not(:disabled) {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.btn-pagination:disabled { .btn-pagination:disabled {
@@ -415,7 +415,7 @@ import {
.statements-table th { .statements-table th {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-text-muted); color: var(--color-text-muted);
@@ -426,7 +426,7 @@ import {
.statements-table td { .statements-table td {
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
border-bottom: 1px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -437,7 +437,7 @@ import {
} }
.statements-table tr:hover { .statements-table tr:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
} }
.statements-table tr.selected { .statements-table tr.selected {
@@ -514,8 +514,8 @@ import {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--color-text-primary); background: var(--color-surface-tertiary);
border: 1px solid var(--color-text-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-text-muted); color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
@@ -523,7 +523,7 @@ import {
} }
.btn-action:hover { .btn-action:hover {
background: var(--color-text-primary); background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3); color: rgba(212, 201, 168, 0.3);
} }
@@ -555,7 +555,7 @@ import {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
background: var(--color-text-primary); background: var(--color-surface-tertiary);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;