stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 3 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 {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
width: 100%;
max-width: 540px;
@@ -185,7 +185,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.consent-icon {
@@ -210,7 +210,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
flex: 1;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.btn-close {
@@ -228,7 +228,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -260,7 +260,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
align-items: flex-start;
gap: 0.875rem;
padding: 0.875rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -285,18 +285,18 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
}
.feature-icon--remediate {
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.feature-icon--justify {
background: rgba(168, 85, 247, 0.2);
background: var(--color-brand-primary-20);
color: var(--color-status-excepted-border);
}
.feature-content strong {
display: block;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
@@ -308,8 +308,8 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
}
.data-notice {
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-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -352,7 +352,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.notice-emphasis {
margin: 0;
padding: 0.75rem;
background: rgba(34, 197, 94, 0.1);
background: var(--color-status-success-bg);
border-radius: var(--radius-md);
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 {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border-color: var(--color-status-info);
}
@@ -421,10 +421,10 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.scope-selector select {
padding: 0.625rem 0.875rem;
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: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 0.875rem;
}
@@ -438,7 +438,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.btn {
@@ -471,12 +471,12 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.btn--ghost {
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--ghost:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.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%;
max-width: 560px;
height: 100%;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
display: flex;
flex-direction: column;
@@ -231,7 +231,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -261,7 +261,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
margin: 0;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.panel-subtitle {
@@ -285,7 +285,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -372,7 +372,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
}
.explanation-section {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1.25rem;
}
@@ -432,7 +432,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
font-family: ui-monospace, monospace;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.impact-value {
@@ -445,7 +445,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
flex-direction: column;
gap: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.impact-tags {
@@ -456,7 +456,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
.impact-tag {
padding: 0.25rem 0.625rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
font-size: 0.75rem;
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-size: 0.875rem;
color: rgba(212, 201, 168, 0.3);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
@@ -531,7 +531,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
}
@@ -573,7 +573,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
.error-state h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -584,7 +584,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
/* Footer */
.panel-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -623,13 +623,13 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
}
.btn--secondary {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--secondary:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.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%;
max-width: 560px;
height: 100%;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
display: flex;
flex-direction: column;
@@ -338,7 +338,7 @@ type JustificationType =
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -352,7 +352,7 @@ type JustificationType =
width: 44px;
height: 44px;
border-radius: var(--radius-xl);
background: rgba(168, 85, 247, 0.2);
background: var(--color-brand-primary-20);
display: flex;
align-items: center;
justify-content: center;
@@ -368,7 +368,7 @@ type JustificationType =
margin: 0;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.panel-subtitle {
@@ -392,7 +392,7 @@ type JustificationType =
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -412,7 +412,7 @@ type JustificationType =
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.form-description {
@@ -428,7 +428,7 @@ type JustificationType =
.context-section {
margin-top: 1.5rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -509,7 +509,7 @@ type JustificationType =
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -548,7 +548,7 @@ type JustificationType =
justify-content: center;
font-size: 1rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.confidence-info {
@@ -589,12 +589,12 @@ type JustificationType =
.suggestion-value {
font-size: 0.9375rem;
font-weight: var(--font-weight-medium);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
/* Draft Section */
.draft-section {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
overflow: hidden;
}
@@ -619,7 +619,7 @@ type JustificationType =
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border: none;
border-radius: var(--radius-md);
color: var(--color-text-muted);
@@ -629,7 +629,7 @@ type JustificationType =
}
.btn-copy:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -653,7 +653,7 @@ type JustificationType =
/* Evidence Section */
.evidence-section {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -679,7 +679,7 @@ type JustificationType =
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
font-size: 0.8125rem;
color: rgba(212, 201, 168, 0.3);
@@ -695,7 +695,7 @@ type JustificationType =
/* Checklist Section */
.checklist-section {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -770,7 +770,7 @@ type JustificationType =
flex-wrap: wrap;
gap: 1rem;
padding: 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
}
@@ -807,7 +807,7 @@ type JustificationType =
.error-state h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -818,7 +818,7 @@ type JustificationType =
/* Footer */
.panel-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
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%;
max-width: 560px;
height: 100%;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
display: flex;
flex-direction: column;
@@ -326,7 +326,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -340,7 +340,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
width: 44px;
height: 44px;
border-radius: var(--radius-xl);
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -356,7 +356,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
margin: 0;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.panel-subtitle {
@@ -380,7 +380,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -443,7 +443,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex;
gap: 1.5rem;
padding: 0.875rem 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
margin-bottom: 1.5rem;
}
@@ -474,7 +474,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
}
.recommendation-card {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all 0.2s ease;
@@ -501,7 +501,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
display: flex;
align-items: 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-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-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-size: 0.875rem;
color: var(--color-status-success-border);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
@@ -609,7 +609,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
padding: 0.75rem;
overflow-x: auto;
@@ -629,7 +629,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: none;
border-radius: var(--radius-md);
color: var(--color-text-secondary);
@@ -639,7 +639,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
}
.btn-copy:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -671,7 +671,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.notes-section {
margin-top: 1.5rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -732,7 +732,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
margin-top: 1.5rem;
}
@@ -770,7 +770,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.error-state h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -781,7 +781,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
/* Footer */
.panel-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -815,13 +815,13 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
}
.btn--secondary {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--secondary:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.btn--ghost {
@@ -837,7 +837,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.pr-section {
margin-top: 1.5rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -853,7 +853,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
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--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--changes_requested { background: var(--color-status-warning-text); color: #fff; }
.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--success { background: var(--color-status-success-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 {
width: 32px;
@@ -917,7 +917,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
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; }
.pr-creating-state {
@@ -946,8 +946,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
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);
border-radius: var(--radius-md);
}
@@ -956,7 +956,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.btn-retry {
padding: 0.375rem 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: none;
border-radius: var(--radius-sm);
color: rgba(212, 201, 168, 0.3);
@@ -964,7 +964,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
cursor: pointer;
}
.btn-retry:hover { background: var(--color-text-secondary); }
.btn-retry:hover { background: var(--color-surface-tertiary); }
.scm-selector {
display: flex;
@@ -981,8 +981,8 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.scm-select {
flex: 1;
padding: 0.5rem 0.75rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
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 {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
width: 100%;
max-width: 800px;
@@ -305,7 +305,7 @@ interface ConflictingStatement {
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.header-content {
@@ -318,7 +318,7 @@ interface ConflictingStatement {
margin: 0;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.header-cve {
@@ -342,7 +342,7 @@ interface ConflictingStatement {
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -429,7 +429,7 @@ interface ConflictingStatement {
/* Conflict Breakdown */
.conflict-breakdown {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1.25rem;
margin-bottom: 1.5rem;
@@ -468,7 +468,7 @@ interface ConflictingStatement {
.bar-container {
flex: 1;
height: 8px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -481,7 +481,7 @@ interface ConflictingStatement {
.bar-fill--affected { background: var(--color-status-error); }
.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); }
.status-count {
@@ -517,7 +517,7 @@ interface ConflictingStatement {
}
.statement-card {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl);
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--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
.issuer-badge--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
.issuer-badge--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-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--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;
}
.status-badge--affected { background: rgba(239, 68, 68, 0.2); 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--affected { background: var(--color-status-error-bg); color: var(--color-status-error-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--under_investigation { background: rgba(251, 191, 36, 0.2); color: var(--color-status-warning-border); }
@@ -623,7 +623,7 @@ interface ConflictingStatement {
.justification-type {
font-size: 0.75rem;
color: var(--color-status-excepted-border);
background: rgba(168, 85, 247, 0.15);
background: var(--color-brand-primary-20);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
@@ -633,7 +633,7 @@ interface ConflictingStatement {
justify-content: space-between;
padding: 0.75rem 1.25rem;
background: rgba(0, 0, 0, 0.1);
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.timestamp {
@@ -654,7 +654,7 @@ interface ConflictingStatement {
padding: 0.625rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
}
.statement-card--selected .selection-indicator {
@@ -669,7 +669,7 @@ interface ConflictingStatement {
/* Resolution Options */
.resolution-options {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1.25rem;
}
@@ -693,8 +693,8 @@ interface ConflictingStatement {
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.15s ease;
@@ -728,7 +728,7 @@ interface ConflictingStatement {
content: '';
width: 10px;
height: 10px;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border-radius: var(--radius-full);
}
@@ -780,7 +780,7 @@ interface ConflictingStatement {
.error-state h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -794,7 +794,7 @@ interface ConflictingStatement {
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.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 {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-status-info-border);
}
@@ -342,7 +342,7 @@ import {
margin: 0;
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.consensus-header__subtitle {
@@ -353,8 +353,8 @@ import {
/* Search Panel */
.search-panel {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.25rem;
margin-bottom: 1.5rem;
@@ -385,10 +385,10 @@ import {
.search-field input {
padding: 0.625rem 0.875rem;
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: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 0.875rem;
}
@@ -423,12 +423,12 @@ import {
.btn--ghost {
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--ghost:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.btn--text {
@@ -474,8 +474,8 @@ import {
/* Consensus Summary */
.consensus-summary {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -533,7 +533,7 @@ import {
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-md);
font-size: 0.875rem;
color: var(--color-status-success-border);
@@ -550,7 +550,7 @@ import {
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
margin-bottom: 1.25rem;
border-left: 4px solid;
@@ -583,7 +583,7 @@ import {
.conflict-alert__content strong {
display: block;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 0.875rem;
}
@@ -607,7 +607,7 @@ import {
.stat-value {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.stat-label {
@@ -618,8 +618,8 @@ import {
/* Voting Section */
.voting-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -643,7 +643,7 @@ import {
.vote-group {
position: relative;
padding: 0.75rem 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
overflow: hidden;
}
@@ -659,7 +659,7 @@ import {
.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--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__label {
@@ -687,7 +687,7 @@ import {
}
.vote-card {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all 0.2s ease;
@@ -736,7 +736,7 @@ import {
.issuer-name {
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.issuer-type {
@@ -782,7 +782,7 @@ import {
.metric-bar {
height: 6px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -805,7 +805,7 @@ import {
.vote-justification {
padding: 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
@@ -835,8 +835,8 @@ import {
/* Hints Section */
.hints-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -863,7 +863,7 @@ import {
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3);
font-size: 0.875rem;
@@ -879,7 +879,7 @@ import {
/* Conflicts Section */
.conflicts-section {
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-status-error-text);
border-radius: var(--radius-xl);
padding: 1.5rem;
@@ -901,7 +901,7 @@ import {
}
.conflict-card {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: 1rem;
@@ -963,7 +963,7 @@ import {
flex-direction: column;
gap: 0.375rem;
padding: 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
margin-bottom: 0.5rem;
}
@@ -990,7 +990,7 @@ import {
.conflict-suggestion {
padding: 1rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.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 {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
width: 100%;
max-width: 700px;
@@ -493,14 +493,14 @@ interface EvidenceItem {
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.workflow-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.btn-close {
@@ -518,7 +518,7 @@ interface EvidenceItem {
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -532,7 +532,7 @@ interface EvidenceItem {
display: flex;
justify-content: space-between;
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);
}
@@ -549,7 +549,7 @@ interface EvidenceItem {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
display: flex;
align-items: center;
@@ -604,7 +604,7 @@ interface EvidenceItem {
margin: 0 0 0.5rem;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.step-description {
@@ -652,7 +652,7 @@ interface EvidenceItem {
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl);
cursor: pointer;
@@ -670,12 +670,12 @@ interface EvidenceItem {
.status-option--selected.status-option--affected {
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 {
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 {
@@ -704,12 +704,12 @@ interface EvidenceItem {
}
.status-option--affected .status-icon {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
.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);
}
@@ -745,7 +745,7 @@ interface EvidenceItem {
.justification-type-btn {
display: block;
padding: 0.875rem 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border-radius: var(--radius-xl);
text-align: left;
@@ -792,7 +792,7 @@ interface EvidenceItem {
align-items: center;
gap: 1rem;
padding: 0.875rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
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--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--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 {
flex: 1;
@@ -860,7 +860,7 @@ interface EvidenceItem {
.add-evidence-form {
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -873,7 +873,7 @@ interface EvidenceItem {
/* Review */
.review-card {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
overflow: hidden;
}
@@ -885,8 +885,8 @@ interface EvidenceItem {
padding: 1rem 1.25rem;
}
.review-header--affected { background: rgba(239, 68, 68, 0.15); }
.review-header--not_affected { background: rgba(34, 197, 94, 0.15); }
.review-header--affected { background: var(--color-status-error-bg); }
.review-header--not_affected { background: var(--color-status-success-bg); }
.review-header--fixed { background: rgba(59, 130, 246, 0.15); }
.review-header--under_investigation { background: rgba(245, 158, 11, 0.15); }
@@ -917,7 +917,7 @@ interface EvidenceItem {
align-items: flex-start;
gap: 1rem;
padding: 0.625rem 0;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.review-row:last-child {
@@ -944,7 +944,7 @@ interface EvidenceItem {
code.review-value {
font-family: ui-monospace, monospace;
font-size: 0.8125rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
word-break: break-all;
@@ -965,7 +965,7 @@ interface EvidenceItem {
.evidence-chip {
padding: 0.25rem 0.625rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--color-text-muted);
@@ -996,7 +996,7 @@ interface EvidenceItem {
display: flex;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.footer-left,
@@ -1039,8 +1039,8 @@ interface EvidenceItem {
}
.btn--secondary {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
@@ -1050,7 +1050,7 @@ interface EvidenceItem {
}
.btn--secondary:hover:not(:disabled) {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.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;
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.dashboard__subtitle {
@@ -318,8 +318,8 @@ import {
}
.stat-card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.25rem;
display: flex;
@@ -357,7 +357,7 @@ import {
.stat-card__value {
font-size: 2rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
line-height: 1;
}
@@ -370,7 +370,7 @@ import {
font-size: 0.75rem;
color: var(--color-text-secondary);
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); }
@@ -378,8 +378,8 @@ import {
/* Dashboard Sections */
.dashboard__section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -415,7 +415,7 @@ import {
.source-card__bar {
height: 8px;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -453,13 +453,13 @@ import {
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
transition: background 0.15s ease;
}
.activity-item:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.activity-item__icon {
@@ -478,7 +478,7 @@ import {
.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--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 {
flex: 1;
@@ -490,7 +490,7 @@ import {
.activity-item__cve {
font-family: ui-monospace, monospace;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
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 {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-status-info-border);
}
@@ -262,7 +262,7 @@ import {
margin: 0;
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.stats-header__subtitle {
@@ -304,8 +304,8 @@ import {
align-items: center;
gap: 1.25rem;
padding: 1.5rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
}
@@ -338,7 +338,7 @@ import {
.summary-value {
font-size: 2.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
line-height: 1;
}
@@ -351,8 +351,8 @@ import {
/* Distribution Section */
.distribution-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -383,7 +383,7 @@ import {
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
text-align: center;
}
@@ -391,7 +391,7 @@ import {
.status-visual {
width: 60px;
height: 80px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
@@ -421,7 +421,7 @@ import {
.status-count {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.status-label {
@@ -440,7 +440,7 @@ import {
flex-wrap: wrap;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.legend-item {
@@ -459,13 +459,13 @@ import {
.legend-item--affected .legend-color { background: var(--color-status-error); }
.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); }
/* Sources Section */
.sources-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
padding: 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--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
.source-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
.source-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-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--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
@@ -523,7 +523,7 @@ import {
.source-bar-container {
flex: 1;
height: 8px;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -550,7 +550,7 @@ import {
.source-count {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.source-percent {
@@ -560,8 +560,8 @@ import {
/* Activity Section */
.activity-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -585,7 +585,7 @@ import {
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
}
@@ -604,7 +604,7 @@ import {
}
.activity-indicator--created {
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -650,8 +650,8 @@ import {
/* Trends Section */
.trends-section {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-2xl);
padding: 1.5rem;
}
@@ -693,7 +693,7 @@ import {
.trend-bar--affected { background: var(--color-status-error); }
.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 {
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%;
max-width: 560px;
height: 100%;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
display: flex;
flex-direction: column;
@@ -334,7 +334,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -358,17 +358,17 @@ import {
height: 22px;
}
.panel-icon--affected { background: rgba(239, 68, 68, 0.2); 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--affected { background: var(--color-status-error-bg); color: var(--color-status-error-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--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 {
margin: 0;
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.panel-subtitle {
@@ -392,7 +392,7 @@ import {
}
.btn-close:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -450,12 +450,12 @@ import {
}
.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);
}
.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);
}
@@ -480,7 +480,7 @@ import {
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
background: rgba(168, 85, 247, 0.2);
background: var(--color-brand-primary-20);
border-radius: var(--radius-md);
font-size: 0.6875rem;
color: var(--color-status-excepted-border);
@@ -493,7 +493,7 @@ import {
}
.detail-section {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
padding: 1.25rem;
}
@@ -543,7 +543,7 @@ import {
.info-value--code {
font-family: ui-monospace, monospace;
font-size: 0.8125rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
padding: 0.5rem;
border-radius: var(--radius-md);
word-break: break-all;
@@ -556,7 +556,7 @@ import {
.type-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(168, 85, 247, 0.2);
background: var(--color-brand-primary-20);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
@@ -574,7 +574,7 @@ import {
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
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--cert { background: rgba(168, 85, 247, 0.2); color: var(--color-status-excepted-border); }
.issuer-icon--oss { background: rgba(34, 197, 94, 0.2); color: var(--color-status-success-border); }
.issuer-icon--cert { background: var(--color-brand-primary-20); color: var(--color-status-excepted-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--ai_generated { background: rgba(244, 114, 182, 0.2); color: var(--color-status-excepted-border); }
@@ -695,7 +695,7 @@ import {
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
font-size: 0.75rem;
color: var(--color-text-muted);
@@ -721,8 +721,8 @@ import {
align-items: center;
gap: 1rem;
padding: 0.875rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
text-decoration: none;
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--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--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 {
flex: 1;
@@ -778,7 +778,7 @@ import {
.detail-section--meta {
background: transparent;
border: 1px dashed var(--color-text-primary);
border: 1px dashed var(--color-border-primary);
padding: 1rem;
}
@@ -787,7 +787,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.meta-row:last-child {
@@ -807,7 +807,7 @@ import {
code.meta-value {
font-family: ui-monospace, monospace;
font-size: 0.6875rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
}
@@ -839,7 +839,7 @@ import {
.error-state h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -849,7 +849,7 @@ import {
.panel-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
@@ -888,13 +888,13 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--secondary:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.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 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.error-state p {
@@ -320,7 +320,7 @@ import {
}
.btn-back:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-status-info-border);
}
@@ -340,7 +340,7 @@ import {
margin: 0;
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-family: ui-monospace, monospace;
}
@@ -391,8 +391,8 @@ import {
/* Detail Cards */
.detail-card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -429,7 +429,7 @@ import {
font-family: ui-monospace, monospace;
font-size: 0.875rem;
color: rgba(212, 201, 168, 0.3);
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-md);
word-break: break-all;
@@ -467,7 +467,7 @@ import {
.justification-section {
margin-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 {
@@ -481,7 +481,7 @@ import {
}
.justification-text {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
padding: 1rem;
border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3);
@@ -501,7 +501,7 @@ import {
align-items: center;
gap: 1rem;
padding: 0.875rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-lg);
}
@@ -554,14 +554,14 @@ import {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
color: var(--color-status-info-border);
transition: all 0.15s ease;
}
.evidence-item__link:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-status-info-border);
}
@@ -601,13 +601,13 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
color: rgba(212, 201, 168, 0.3);
}
.btn--secondary:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.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 {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-status-info-border);
}
@@ -275,7 +275,7 @@ import {
margin: 0;
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.search-header__subtitle {
@@ -286,8 +286,8 @@ import {
/* Filters */
.filters-panel {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.25rem;
margin-bottom: 1.5rem;
@@ -357,8 +357,8 @@ import {
/* Results */
.results-panel {
background: var(--color-text-heading);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
overflow: hidden;
}
@@ -368,7 +368,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.results-count {
@@ -384,8 +384,8 @@ import {
.btn-pagination {
padding: 0.375rem 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-sm);
color: rgba(212, 201, 168, 0.3);
font-size: 0.75rem;
@@ -394,7 +394,7 @@ import {
}
.btn-pagination:hover:not(:disabled) {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.btn-pagination:disabled {
@@ -415,7 +415,7 @@ import {
.statements-table th {
padding: 0.75rem 1rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
@@ -426,7 +426,7 @@ import {
.statements-table td {
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
font-size: 0.875rem;
color: rgba(212, 201, 168, 0.3);
}
@@ -437,7 +437,7 @@ import {
}
.statements-table tr:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.statements-table tr.selected {
@@ -514,8 +514,8 @@ import {
display: flex;
align-items: center;
justify-content: center;
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: var(--color-text-muted);
cursor: pointer;
@@ -523,7 +523,7 @@ import {
}
.btn-action:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -555,7 +555,7 @@ import {
width: 64px;
height: 64px;
border-radius: var(--radius-2xl);
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
display: flex;
align-items: center;
justify-content: center;