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

Fix Simulation, VEX, and Audit shell theming and Material compliance

Browse Source 
Simulation (16 files):
- Replace swapped CSS variables across all 16 simulation components
  (text-heading as background, surface-secondary as text color, etc.)
- Replace 50+ hardcoded rgba() colors with CSS variable references
- Fix simulation-dashboard dark background (surface-inverse → surface-primary)
- Remove redundant header (eyebrow + title + subtitle)
- Remove urlParam="tab" to fix double-navigation conflict

VEX & Audit shells:
- Remove redundant headers from vex-shell and audit-shell components
- Remove urlParam="tab" from both shells

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-28 11:42:19 +02:00
parent 17a01df611
commit 7be4e855d6
17 changed files with 267 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-audit-shell.component.ts
View File

@@ -33,21 +33,9 @@ const PAGE_TABS: readonly StellaPageTab[] = [
imports: [CommonModule, RouterOutlet, StellaPageTabsComponent],
template: `
<section class="policy-audit-shell" data-testid="policy-audit-shell">
<header class="section-header">
<div>
<p class="section-header__eyebrow">Audit</p>
<h2>Policy and VEX audit now share the same owner shell</h2>
<p>
Review mutable policy and VEX actions after the cutover without routing operators back
into retired sibling products.
</p>
</div>
</header>
<stella-page-tabs
[tabs]="pageTabs"
[activeTab]="activeSubview()"
urlParam="tab"
ariaLabel="Audit tabs"
(tabChange)="onTabChange($event)"
>
@@ -61,31 +49,6 @@ const PAGE_TABS: readonly StellaPageTab[] = [
gap: 0.85rem;
}
.section-header {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
background: var(--color-surface-primary);
padding: 1rem;
}
.section-header__eyebrow {
margin: 0 0 0.25rem;
color: var(--color-status-info);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section-header h2 {
margin: 0;
color: var(--color-text-heading);
}
.section-header p {
margin: 0.35rem 0 0;
color: var(--color-text-secondary);
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,
})

37
src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-decisioning-vex-shell.component.ts
View File

@@ -46,21 +46,9 @@ const PAGE_TABS: readonly StellaPageTab[] = [
imports: [CommonModule, RouterOutlet, StellaPageTabsComponent],
template: `
<section class="policy-vex-shell" data-testid="policy-vex-shell">
<header class="section-header">
<div>
<p class="section-header__eyebrow">VEX & Exceptions</p>
<h2>Mutable VEX actions now live in Decisioning Studio</h2>
<p>
Search statements, resolve consensus, open exception queues, and keep release-context
deep links inside the same policy shell.
</p>
</div>
</header>
<stella-page-tabs
[tabs]="pageTabs"
[activeTab]="activeSubview()"
urlParam="tab"
ariaLabel="VEX tabs"
(tabChange)="onTabChange($event)"
>
@@ -74,31 +62,6 @@ const PAGE_TABS: readonly StellaPageTab[] = [
gap: 0.85rem;
}
.section-header {
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
background: var(--color-surface-primary);
padding: 1rem;
}
.section-header__eyebrow {
margin: 0 0 0.25rem;
color: var(--color-status-warning);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section-header h2 {
margin: 0;
color: var(--color-text-heading);
}
.section-header p {
margin: 0.35rem 0 0;
color: var(--color-text-secondary);
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,
})

66
src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts
View File

@@ -448,7 +448,7 @@ import {
.batch-evaluation__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -465,7 +465,7 @@ import {
.tab-btn {
padding: 0.6rem 1.25rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
@@ -474,14 +474,14 @@ import {
}
.tab-btn:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
.tab-btn--active {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent);
border-color: var(--color-status-success);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.tab-content {
@@ -494,8 +494,8 @@ import {
}
.evaluation-form {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -511,7 +511,7 @@ import {
.form-section h3 {
margin: 0 0 0.75rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -546,7 +546,7 @@ import {
.form-field input[type='number'] {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
}
@@ -576,7 +576,7 @@ import {
.source-tab {
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: 0.85rem;
@@ -585,7 +585,7 @@ import {
}
.source-tab:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -597,7 +597,7 @@ import {
.available-artifacts {
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
overflow: hidden;
}
@@ -606,15 +606,15 @@ import {
display: flex;
gap: 0.75rem;
padding: 0.75rem;
background: var(--color-text-heading);
border-bottom: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border-bottom: 1px solid var(--color-border-primary);
}
.search-input {
flex: 1;
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
}
@@ -637,7 +637,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -649,7 +649,7 @@ import {
.btn--ghost {
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.btn--sm {
@@ -688,7 +688,7 @@ import {
}
.artifact-option:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.artifact-option--selected {
@@ -733,7 +733,7 @@ import {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
margin-bottom: 0.5rem;
@@ -750,7 +750,7 @@ import {
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.5rem;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-text-muted);
border-radius: var(--radius-sm);
font-size: 0.8rem;
@@ -773,13 +773,13 @@ import {
display: flex;
justify-content: flex-end;
padding-top: 1rem;
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
margin-top: 1.5rem;
}
.live-results {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
}
@@ -793,7 +793,7 @@ import {
.results-header h3 {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.progress-info {
@@ -821,12 +821,12 @@ import {
}
.status-badge[data-status='completed'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.status-badge[data-status='failed'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -836,7 +836,7 @@ import {
}
.status-badge[data-status='pending'] {
background: rgba(148, 163, 184, 0.15);
background: var(--color-surface-tertiary);
color: var(--color-text-muted);
}
@@ -850,7 +850,7 @@ import {
.progress-bar {
flex: 1;
height: 8px;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -979,7 +979,7 @@ import {
}
.finding-count--critical {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -1009,7 +1009,7 @@ import {
justify-content: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
}
.batch-complete p {
@@ -1030,8 +1030,8 @@ import {
.history-filters select {
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);
}
@@ -1044,8 +1044,8 @@ import {
.history-card {
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 150ms ease;

58
src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts
View File

@@ -361,7 +361,7 @@ import {
.conflict-detection__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -393,7 +393,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -405,7 +405,7 @@ import {
.btn--ghost {
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.btn:hover:not(:disabled) {
@@ -419,15 +419,15 @@ import {
.policy-selection {
padding: 1.5rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
margin-bottom: 1.5rem;
}
.policy-selection h3 {
margin: 0 0 0.25rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -449,7 +449,7 @@ import {
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 150ms ease;
@@ -497,7 +497,7 @@ import {
.results-summary h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.summary-stats {
@@ -511,15 +511,15 @@ import {
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
.stat-value {
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.stat-label {
@@ -546,8 +546,8 @@ import {
.conflict-filters {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
@@ -571,8 +571,8 @@ import {
}
.conflict-card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
overflow: hidden;
}
@@ -619,7 +619,7 @@ import {
}
.severity-badge[data-severity='critical'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -645,7 +645,7 @@ import {
.resolved-badge {
padding: 0.2rem 0.5rem;
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
border-radius: var(--radius-sm);
font-size: 0.7rem;
@@ -727,7 +727,7 @@ import {
.conflict-details {
padding: 1rem;
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
background: var(--color-surface-inverse);
}
@@ -740,8 +740,8 @@ import {
.value-panel {
padding: 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-lg);
}
@@ -772,7 +772,7 @@ import {
.suggestions-section h4 {
margin: 0 0 0.75rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 0.9rem;
}
@@ -784,8 +784,8 @@ import {
.suggestion-card {
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-lg);
cursor: pointer;
transition: all 150ms ease;
@@ -825,12 +825,12 @@ import {
}
.action-badge[data-action='merge'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.action-badge[data-action='remove'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -884,7 +884,7 @@ import {
.resolution-info {
padding: 0.75rem;
background: rgba(34, 197, 94, 0.1);
background: var(--color-status-success-bg);
border-radius: var(--radius-lg);
}
@@ -908,8 +908,8 @@ import {
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
background: var(--color-status-success-bg);
border: 1px solid var(--color-status-success-border);
border-radius: var(--radius-xl);
margin-bottom: 1.5rem;
}
@@ -953,7 +953,7 @@ import {
.spinner {
width: 48px;
height: 48px;
border: 4px solid var(--color-text-primary);
border: 4px solid var(--color-border-primary);
border-top-color: var(--color-status-warning);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

44
src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts
View File

@@ -278,7 +278,7 @@ import {
.coverage__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -307,7 +307,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -326,8 +326,8 @@ import {
gap: 2rem;
align-items: center;
padding: 1.5rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
margin-bottom: 1.5rem;
}
@@ -398,7 +398,7 @@ import {
.summary-card__value {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.summary-card--success .summary-card__value {
@@ -443,8 +443,8 @@ import {
}
.coverage__rules {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -459,7 +459,7 @@ import {
.rules-header h3 {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -471,7 +471,7 @@ import {
.filter-btn {
padding: 0.35rem 0.75rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: 0.8rem;
@@ -498,7 +498,7 @@ import {
.rule-card {
padding: 1rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-heading);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
border-left-width: 4px;
}
@@ -523,7 +523,7 @@ import {
}
.rule-name {
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-weight: var(--font-weight-semibold);
}
@@ -543,14 +543,14 @@ import {
.coverage-bar {
flex: 1;
height: 8px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
overflow: hidden;
}
.coverage-bar__fill {
height: 100%;
background: var(--color-text-secondary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-sm);
transition: width 300ms ease;
}
@@ -595,21 +595,21 @@ import {
}
.coverage__tests {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
.coverage__tests h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
.tests-table {
overflow-x: auto;
border: 1px solid var(--color-text-heading);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
@@ -622,7 +622,7 @@ import {
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
th {
@@ -639,11 +639,11 @@ import {
}
.row--passed {
background: rgba(34, 197, 94, 0.05);
background: var(--color-status-success-bg);
}
.row--failed {
background: rgba(239, 68, 68, 0.05);
background: var(--color-status-error-bg);
}
.test-status {
@@ -655,12 +655,12 @@ import {
}
.test-status[data-status='passed'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.test-status[data-status='failed'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}

26
src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts
View File

@@ -184,7 +184,7 @@ import {
.effective-policy__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -220,8 +220,8 @@ import {
.effective-policy__filters {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
@@ -244,8 +244,8 @@ import {
}
.resource-card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -256,7 +256,7 @@ import {
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
.resource-info {
@@ -271,7 +271,7 @@ import {
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: var(--font-weight-bold);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: var(--color-text-muted);
}
@@ -286,7 +286,7 @@ import {
}
.resource-type[data-type='tenant'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -344,7 +344,7 @@ import {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
@@ -363,7 +363,7 @@ import {
}
.policy-name {
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-weight: var(--font-weight-medium);
}
@@ -376,12 +376,12 @@ import {
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
font-size: 0.7rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: var(--color-text-muted);
}
.policy-scope[data-scope='tenant'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -418,7 +418,7 @@ import {
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
}
.merged-label {

18
src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts
View File

@@ -210,7 +210,7 @@ import {
.audit-log__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -234,7 +234,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -250,8 +250,8 @@ import {
.audit-log__filters {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
@@ -320,7 +320,7 @@ import {
width: 2px;
flex: 1;
min-height: 20px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
}
.audit-entry:last-child .indicator-line {
@@ -330,8 +330,8 @@ import {
.audit-entry__content {
flex: 1;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
margin-bottom: 1rem;
}
@@ -352,7 +352,7 @@ import {
}
.audit-action[data-action='created'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -376,7 +376,7 @@ import {
.audit-action[data-action='deleted'],
.audit-action[data-action='rejected'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}

36
src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts
View File

@@ -192,7 +192,7 @@ import {
.diff-viewer__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -215,12 +215,12 @@ import {
}
.version-badge--from {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
.version-badge--to {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -240,15 +240,15 @@ import {
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
.stat-value {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.stat-card--add .stat-value {
@@ -271,8 +271,8 @@ import {
}
.file-diff {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
overflow: hidden;
}
@@ -300,7 +300,7 @@ import {
}
.file-diff__header:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.file-info {
@@ -321,12 +321,12 @@ import {
}
.file-change-type[data-type='added'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.file-change-type[data-type='removed'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -362,7 +362,7 @@ import {
}
.file-diff__content {
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
}
.binary-notice {
@@ -373,7 +373,7 @@ import {
}
.diff-hunk {
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
.diff-hunk:last-child {
@@ -399,11 +399,11 @@ import {
}
.diff-line--added {
background: rgba(34, 197, 94, 0.1);
background: var(--color-status-success-bg);
}
.diff-line--removed {
background: rgba(239, 68, 68, 0.1);
background: var(--color-status-error-bg);
}
.line-number {
@@ -413,15 +413,15 @@ import {
text-align: right;
color: var(--color-text-secondary);
user-select: none;
border-right: 1px solid var(--color-text-heading);
border-right: 1px solid var(--color-border-primary);
}
.line-number--old {
background: rgba(239, 68, 68, 0.05);
background: var(--color-status-error-bg);
}
.line-number--new {
background: rgba(34, 197, 94, 0.05);
background: var(--color-status-success-bg);
}
.line-indicator {

40
src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts
View File

@@ -271,7 +271,7 @@ import {
.policy-exception__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -295,7 +295,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -314,8 +314,8 @@ import {
}
.policy-exception__form {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -323,7 +323,7 @@ import {
.policy-exception__form h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.form-row {
@@ -335,7 +335,7 @@ import {
.form-section {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-heading);
border-top: 1px solid var(--color-border-primary);
}
.form-section h4 {
@@ -361,7 +361,7 @@ import {
.field textarea {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
font-family: inherit;
@@ -394,7 +394,7 @@ import {
.filter-btn {
padding: 0.4rem 0.85rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: 0.85rem;
@@ -419,8 +419,8 @@ import {
}
.exception-card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
border-left-width: 4px;
@@ -470,7 +470,7 @@ import {
}
.exception-status[data-status='approved'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -480,7 +480,7 @@ import {
}
.exception-status[data-status='rejected'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -495,12 +495,12 @@ import {
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: var(--color-text-muted);
}
.exception-severity[data-severity='critical'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -516,7 +516,7 @@ import {
.exception-name {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -536,7 +536,7 @@ import {
}
.action-btn--revoke:hover {
background: rgba(239, 68, 68, 0.1);
background: var(--color-status-error-bg);
}
.exception-description {
@@ -604,7 +604,7 @@ import {
.tag {
padding: 0.2rem 0.5rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.75rem;
@@ -633,8 +633,8 @@ import {
.revoke-dialog__content {
position: relative;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
max-width: 500px;
@@ -643,7 +643,7 @@ import {
.revoke-dialog__content h3 {
margin: 0 0 0.5rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.revoke-dialog__content > p {

38
src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts
View File

@@ -249,7 +249,7 @@ import {
.policy-lint__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -290,19 +290,19 @@ import {
display: flex;
gap: 1rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
.status-card--success {
border-color: var(--color-status-success);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
background: linear-gradient(135deg, var(--color-status-success-bg), transparent);
}
.status-card--error {
border-color: var(--color-status-error);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
background: linear-gradient(135deg, var(--color-status-error-bg), transparent);
}
.status-card__icon {
@@ -312,22 +312,22 @@ import {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
}
.status-card--success .status-card__icon {
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
color: var(--color-status-success);
}
.status-card--error .status-card__icon {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error);
}
.status-card__content h3 {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.1rem;
}
@@ -352,15 +352,15 @@ import {
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
.summary-card__value {
font-size: 2rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.summary-card--error .summary-card__value {
@@ -386,8 +386,8 @@ import {
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
@@ -400,7 +400,7 @@ import {
.filter-btn {
padding: 0.35rem 0.75rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: 0.8rem;
@@ -427,8 +427,8 @@ import {
.issue-card {
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
border-left-width: 4px;
}
@@ -464,7 +464,7 @@ import {
}
.issue-severity[data-severity='error'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -497,7 +497,7 @@ import {
.issue-fixable {
margin-left: auto;
padding: 0.15rem 0.5rem;
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
border-radius: var(--radius-sm);
font-size: 0.7rem;

40
src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts
View File

@@ -226,7 +226,7 @@ import {
.merge-preview__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -236,8 +236,8 @@ import {
}
.merge-preview__sources {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
margin-bottom: 1.5rem;
@@ -264,7 +264,7 @@ import {
.field select {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
}
@@ -316,15 +316,15 @@ import {
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
.summary-card__value {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.summary-card--success .summary-card__value {
@@ -346,8 +346,8 @@ import {
.merge-preview__conflicts,
.merge-preview__rules {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -356,7 +356,7 @@ import {
.merge-preview__conflicts h3,
.merge-preview__rules h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -400,7 +400,7 @@ import {
}
.conflict-type[data-type='incompatible'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -413,7 +413,7 @@ import {
.conflict-resolution {
margin-left: auto;
padding: 0.2rem 0.5rem;
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
border-radius: var(--radius-sm);
font-size: 0.75rem;
@@ -430,7 +430,7 @@ import {
.comparison-side {
padding: 0.75rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
}
@@ -463,9 +463,9 @@ import {
.conflict-card__resolved {
padding: 0.75rem;
background: rgba(34, 197, 94, 0.1);
background: var(--color-status-success-bg);
border-radius: var(--radius-md);
border: 1px solid rgba(34, 197, 94, 0.3);
border: 1px solid var(--color-status-success-border);
}
.resolved-label {
@@ -502,7 +502,7 @@ import {
.rule-name {
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.rule-id {
@@ -535,7 +535,7 @@ import {
.source-tag {
padding: 0.15rem 0.4rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--color-text-muted);
@@ -543,7 +543,7 @@ import {
.rule-card__value {
padding: 0.5rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-md);
}
@@ -567,8 +567,8 @@ import {
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}

38
src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts
View File

@@ -256,7 +256,7 @@ import {
.promotion-gate__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -310,19 +310,19 @@ import {
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
.info-card--ready {
border-color: var(--color-status-success);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
background: linear-gradient(135deg, var(--color-status-success-bg), transparent);
}
.info-card--blocked {
border-color: var(--color-status-error);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
background: linear-gradient(135deg, var(--color-status-error-bg), transparent);
}
.info-label {
@@ -335,7 +335,7 @@ import {
.info-value {
font-size: 1rem;
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.info-card--ready .info-value {
@@ -351,8 +351,8 @@ import {
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
margin-bottom: 1.5rem;
}
@@ -389,7 +389,7 @@ import {
}
.stat--blocking {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -399,8 +399,8 @@ import {
}
.promotion-gate__checklist {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -408,7 +408,7 @@ import {
.promotion-gate__checklist h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -477,12 +477,12 @@ import {
.check-name {
font-weight: var(--font-weight-semibold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.check-required {
padding: 0.15rem 0.4rem;
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
border-radius: var(--radius-sm);
font-size: 0.7rem;
@@ -531,8 +531,8 @@ import {
}
.promotion-gate__override {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -542,8 +542,8 @@ import {
display: flex;
gap: 1rem;
padding: 1rem;
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-border);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}
@@ -584,7 +584,7 @@ import {
.field textarea {
padding: 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3);
resize: vertical;

40
src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts
View File

@@ -231,7 +231,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.shadow-dashboard__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -248,8 +248,8 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.card {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -263,7 +263,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.card__value {
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.card__label {
@@ -322,12 +322,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
}
.shadow-dashboard__breakdown {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
@@ -335,7 +335,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.shadow-dashboard__breakdown h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -358,7 +358,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.breakdown-item__bar {
height: 8px;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
overflow: hidden;
}
@@ -377,8 +377,8 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.shadow-dashboard__table {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -389,7 +389,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.table-header h3 {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -401,7 +401,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
.table-scroll {
overflow-x: auto;
border: 1px solid var(--color-text-heading);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
@@ -414,7 +414,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
th {
@@ -433,7 +433,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.row--diverged {
background: rgba(239, 68, 68, 0.05);
background: var(--color-status-error-bg);
}
.cell--mono {
@@ -451,12 +451,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.status-badge--match {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success);
}
.status-badge--diverged {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error);
}
@@ -466,12 +466,12 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: rgba(212, 201, 168, 0.3);
}
.decision-chip[data-decision='deny'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -481,7 +481,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
.decision-chip[data-decision='allow'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}

4
src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts
View File

@@ -103,8 +103,8 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models';
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-lg);
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
font-size: 0.875rem;
}

40
src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts
View File

@@ -349,7 +349,7 @@ import {
.sim-console__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -370,7 +370,7 @@ import {
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: var(--font-weight-semibold);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.status-pill--completed {
@@ -407,8 +407,8 @@ import {
}
.sim-console__form {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -416,7 +416,7 @@ import {
.form-section {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
.form-section:last-of-type {
@@ -462,7 +462,7 @@ import {
textarea {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
font-family: inherit;
@@ -506,7 +506,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -525,8 +525,8 @@ import {
.results-diff,
.results-findings,
.results-explain {
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1rem;
}
@@ -536,7 +536,7 @@ import {
.results-findings h3,
.results-explain h3 {
margin: 0 0 1rem;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1rem;
}
@@ -556,7 +556,7 @@ import {
.summary-item__value {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.summary-item--success .summary-item__value {
@@ -592,12 +592,12 @@ import {
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: rgba(212, 201, 168, 0.3);
}
.decision-chip[data-decision='deny'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -607,7 +607,7 @@ import {
}
.decision-chip[data-decision='allow'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
@@ -675,7 +675,7 @@ import {
.table-scroll {
overflow-x: auto;
border: 1px solid var(--color-text-heading);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
@@ -688,7 +688,7 @@ import {
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-text-heading);
border-bottom: 1px solid var(--color-border-primary);
}
th {
@@ -719,7 +719,7 @@ import {
}
.decision-badge[data-decision='deny'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -729,12 +729,12 @@ import {
}
.decision-badge[data-decision='allow'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.severity-badge[data-severity='critical'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -749,7 +749,7 @@ import {
}
.severity-badge[data-severity='low'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}

47
src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts
View File

@@ -33,14 +33,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<section class="simulation">
<header class="simulation__header">
<div class="simulation__title-group">
<p class="simulation__eyebrow">Admin / Policy</p>
<h1 class="simulation__title">Policy Simulation Studio</h1>
<p class="simulation__subtitle">Test, validate, and promote policy changes safely with shadow mode and simulation tools.</p>
</div>
</header>
<!-- MANDATORY: Shadow Mode Indicator - Visible on all policy views -->
<div class="simulation__shadow-banner">
<app-shadow-mode-indicator
@@ -168,7 +160,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
<stella-page-tabs
[tabs]="SIMULATION_TABS"
[activeTab]="activeTab()"
urlParam="tab"
(tabChange)="onTabChange($any($event))"
ariaLabel="Policy simulation sections"
>
@@ -179,8 +170,8 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
styles: [`
:host {
display: block;
background: var(--color-surface-inverse);
color: var(--color-border-primary);
background: var(--color-surface-primary);
color: var(--color-text-primary);
min-height: 100vh;
}
@@ -190,32 +181,6 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
padding: 1.5rem;
}
.simulation__header {
margin-bottom: 1rem;
}
.simulation__eyebrow {
margin: 0;
color: var(--color-status-excepted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
}
.simulation__title {
margin: 0.25rem 0 0;
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-surface-secondary);
}
.simulation__subtitle {
margin: 0.25rem 0 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.simulation__shadow-banner {
margin-bottom: 1rem;
}
@@ -223,7 +188,7 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
.simulation__promotion-status {
margin-bottom: 1rem;
padding: 1rem;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.05));
background: linear-gradient(135deg, var(--color-brand-primary-10), transparent);
border: 1px solid var(--color-status-excepted);
border-radius: var(--radius-xl);
}
@@ -282,7 +247,7 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
background: linear-gradient(135deg, var(--color-status-success), var(--color-status-success));
border: none;
border-radius: var(--radius-lg);
color: white;
color: var(--color-text-inverse);
font-weight: var(--font-weight-semibold);
font-size: 0.85rem;
cursor: pointer;
@@ -291,11 +256,11 @@ const SIMULATION_TABS: readonly StellaPageTab[] = [
.btn--promote:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
box-shadow: 0 8px 20px var(--color-status-success-bg);
}
.btn--promote:disabled {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: var(--color-text-secondary);
cursor: not-allowed;
}

34
src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts
View File

@@ -401,7 +401,7 @@ import {
.sim-history__header h1 {
margin: 0.25rem 0 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
font-size: 1.5rem;
}
@@ -430,7 +430,7 @@ import {
}
.btn--secondary {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -446,8 +446,8 @@ import {
.sim-history__filters {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
}
@@ -486,8 +486,8 @@ import {
display: flex;
gap: 1rem;
padding: 1rem;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
transition: all 150ms ease;
}
@@ -545,12 +545,12 @@ import {
}
.status-badge[data-status='completed'] {
background: rgba(34, 197, 94, 0.15);
background: var(--color-status-success-bg);
color: var(--color-status-success-border);
}
.status-badge[data-status='failed'] {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -614,7 +614,7 @@ import {
}
.finding-count--critical {
background: rgba(239, 68, 68, 0.15);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -668,7 +668,7 @@ import {
.tag {
padding: 0.15rem 0.4rem;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: var(--color-text-muted);
border-radius: var(--radius-sm);
font-size: 0.7rem;
@@ -694,7 +694,7 @@ import {
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: var(--color-text-muted);
cursor: pointer;
@@ -702,7 +702,7 @@ import {
}
.action-btn:hover {
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
color: rgba(212, 201, 168, 0.3);
}
@@ -745,8 +745,8 @@ import {
.comparison-modal__content,
.reproducibility-modal__content {
position: relative;
background: var(--color-text-heading);
border: 1px solid var(--color-text-heading);
background: var(--color-surface-elevated);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xl);
padding: 1.5rem;
max-width: 700px;
@@ -766,7 +766,7 @@ import {
.comparison-header h3,
.reproducibility-header h3 {
margin: 0;
color: var(--color-surface-secondary);
color: var(--color-text-heading);
}
.close-btn {
@@ -902,7 +902,7 @@ import {
}
.reproducibility-status--pass {
background: rgba(34, 197, 94, 0.1);
background: var(--color-status-success-bg);
}
.reproducibility-status--pass svg {
@@ -914,7 +914,7 @@ import {
}
.reproducibility-status--fail {
background: rgba(239, 68, 68, 0.1);
background: var(--color-status-error-bg);
}
.reproducibility-status--fail svg {