diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts index 22144a46b..23ed31930 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/approvals/policy-approvals.component.ts @@ -243,7 +243,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .approvals__lede { margin: 0.2rem 0 0; - color: rgba(212, 201, 168, 0.5); + color: var(--color-text-secondary); } .approvals__meta { @@ -307,7 +307,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .field span { display: block; margin-bottom: 0.2rem; - color: rgba(212, 201, 168, 0.5); + color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); } @@ -348,9 +348,9 @@ import { PolicyApiService } from '../services/policy-api.service'; .btn:disabled { opacity: 0.6; cursor: not-allowed; } - .btn--warn { background: var(--color-severity-high); border-color: var(--color-severity-high); color: var(--color-surface-inverse); } + .btn--warn { background: var(--color-severity-high); border-color: var(--color-severity-high); color: var(--color-text-inverse); } - .btn--ghost { background: transparent; border-color: var(--color-border-primary); color: rgba(212, 201, 168, 0.5); } + .btn--ghost { background: transparent; border-color: var(--color-border-primary); color: var(--color-text-secondary); } .approvals__badge { padding: 0.3rem 0.6rem; @@ -468,7 +468,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .comments__body { margin: 0.15rem 0 0; color: var(--color-text-primary); } .muted { color: var(--color-text-muted); font-size: 0.9rem; } - .schedule__summary { display: flex; flex-direction: column; gap: 0.15rem; color: rgba(212, 201, 168, 0.5); } + .schedule__summary { display: flex; flex-direction: column; gap: 0.15rem; color: var(--color-text-secondary); } @media (max-width: 960px) { .approvals__header { flex-direction: column; } } `, diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts index 47a34438d..28d061164 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/editor/policy-editor.component.ts @@ -214,7 +214,7 @@ interface ChecklistItem { margin: 0.1rem 0; font-size: 1.8rem; font-weight: var(--font-weight-bold); - color: var(--color-surface-primary); + color: var(--color-text-inverse); } .policy-editor__eyebrow { @@ -396,7 +396,7 @@ interface ChecklistItem { .diagnostics__header h3 { margin: 0; - color: var(--color-surface-primary); + color: var(--color-text-inverse); } .diagnostics__header p { @@ -472,7 +472,7 @@ interface ChecklistItem { .sidebar-card__header h3 { margin: 0; - color: var(--color-surface-primary); + color: var(--color-text-inverse); } .sidebar-card__header p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts index bed6f96b7..bd788969e 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/explain/policy-explain.component.ts @@ -73,19 +73,19 @@ import jsPDF from './jspdf.stub'; `, styles: [ ` - :host { display: block; background: var(--color-surface-inverse); color: var(--color-text-primary); min-height: 100vh; } + :host { display: block; background: var(--color-surface-elevated); color: var(--color-text-primary); min-height: 100vh; } .expl { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .expl__header { display: flex; justify-content: space-between; align-items: center; } .expl__eyebrow { margin: 0; color: var(--color-status-info); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } .expl__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); } .expl__meta { display: flex; gap: 0.5rem; align-items: center; } - .expl__btn { display: inline-flex; align-items: center; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.35rem 0.65rem; color: var(--color-text-primary); text-decoration: none; background: var(--color-surface-inverse); } + .expl__btn { display: inline-flex; align-items: center; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.35rem 0.65rem; color: var(--color-text-primary); text-decoration: none; background: var(--color-surface-elevated); } .expl__btn:hover { border-color: var(--color-status-info); } .expl__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; } .card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; } ol { margin: 0.5rem 0 0; padding-left: 1.25rem; } li { margin-bottom: 0.6rem; } - .expl__json pre { margin: 0.35rem 0 0; background: var(--color-surface-inverse); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.6rem; max-height: 240px; overflow: auto; } + .expl__json pre { margin: 0.35rem 0 0; background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.6rem; max-height: 240px; overflow: auto; } @media (max-width: 1024px) { .expl__grid { grid-template-columns: 1fr; } } `, ] diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts index f59911ba4..f84213a0f 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/simulation/policy-simulation.component.ts @@ -328,7 +328,7 @@ import { PolicyApiService } from '../services/policy-api.service'; justify-self: start; background: linear-gradient(120deg, var(--color-status-info-text), var(--color-status-info)); border: 1px solid var(--color-status-info-text); - color: var(--color-surface-inverse); + color: var(--color-text-inverse); font-weight: var(--font-weight-bold); padding: 0.6rem 1rem; border-radius: var(--radius-xl); diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts index 0b9115ca7..4ef4b9445 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/yaml/policy-yaml-editor.component.ts @@ -88,7 +88,7 @@ interface YamlDiagnostic { label { color: rgba(212, 201, 168, 0.5); font-weight: var(--font-weight-semibold); } textarea { width: 100%; background: var(--color-surface-inverse); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; } .toolbar { display: flex; gap: 0.5rem; align-items: center; } - button { background: var(--color-status-info-text); border: 1px solid var(--color-status-info-text); color: var(--color-text-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; } + button { background: var(--color-btn-primary-bg); border: 1px solid var(--color-btn-primary-bg); color: var(--color-text-primary); border-radius: var(--radius-lg); padding: 0.4rem 0.8rem; cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } .pill { border: 1px solid var(--color-border-primary); padding: 0.3rem 0.6rem; border-radius: var(--radius-full); } .pill--ok { border-color: var(--color-status-success); color: var(--color-status-success); }