Fix pack detail tab edge-case colors: surface-primary as text, inverse bg

Editor: color surface-primary (cream text on buttons) → text-inverse
Simulation: color surface-inverse (dark text) → text-inverse
Approvals: hardcoded rgba ghost button text → text-secondary
YAML: status-info-text button bg → btn-primary-bg
Explain: surface-inverse button bg → surface-elevated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-29 15:44:06 +03:00
parent 5dfd14bd55
commit d7efb2a6a4
5 changed files with 13 additions and 13 deletions

View File

@@ -243,7 +243,7 @@ import { PolicyApiService } from '../services/policy-api.service';
.approvals__lede { .approvals__lede {
margin: 0.2rem 0 0; margin: 0.2rem 0 0;
color: rgba(212, 201, 168, 0.5); color: var(--color-text-secondary);
} }
.approvals__meta { .approvals__meta {
@@ -307,7 +307,7 @@ import { PolicyApiService } from '../services/policy-api.service';
.field span { .field span {
display: block; display: block;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
color: rgba(212, 201, 168, 0.5); color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold); 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: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 { .approvals__badge {
padding: 0.3rem 0.6rem; 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); } .comments__body { margin: 0.15rem 0 0; color: var(--color-text-primary); }
.muted { color: var(--color-text-muted); font-size: 0.9rem; } .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; } } @media (max-width: 960px) { .approvals__header { flex-direction: column; } }
`, `,

View File

@@ -214,7 +214,7 @@ interface ChecklistItem {
margin: 0.1rem 0; margin: 0.1rem 0;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--color-surface-primary); color: var(--color-text-inverse);
} }
.policy-editor__eyebrow { .policy-editor__eyebrow {
@@ -396,7 +396,7 @@ interface ChecklistItem {
.diagnostics__header h3 { .diagnostics__header h3 {
margin: 0; margin: 0;
color: var(--color-surface-primary); color: var(--color-text-inverse);
} }
.diagnostics__header p { .diagnostics__header p {
@@ -472,7 +472,7 @@ interface ChecklistItem {
.sidebar-card__header h3 { .sidebar-card__header h3 {
margin: 0; margin: 0;
color: var(--color-surface-primary); color: var(--color-text-inverse);
} }
.sidebar-card__header p { .sidebar-card__header p {

View File

@@ -73,19 +73,19 @@ import jsPDF from './jspdf.stub';
`, `,
styles: [ 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 { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.expl__header { display: flex; justify-content: space-between; align-items: center; } .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__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__lede { margin: 0.2rem 0 0; color: var(--color-text-muted); }
.expl__meta { display: flex; gap: 0.5rem; align-items: center; } .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__btn:hover { border-color: var(--color-status-info); }
.expl__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; } .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; } .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; } ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
li { margin-bottom: 0.6rem; } 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; } } @media (max-width: 1024px) { .expl__grid { grid-template-columns: 1fr; } }
`, `,
] ]

View File

@@ -328,7 +328,7 @@ import { PolicyApiService } from '../services/policy-api.service';
justify-self: start; justify-self: start;
background: linear-gradient(120deg, var(--color-status-info-text), var(--color-status-info)); background: linear-gradient(120deg, var(--color-status-info-text), var(--color-status-info));
border: 1px solid var(--color-status-info-text); border: 1px solid var(--color-status-info-text);
color: var(--color-surface-inverse); color: var(--color-text-inverse);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
border-radius: var(--radius-xl); border-radius: var(--radius-xl);

View File

@@ -88,7 +88,7 @@ interface YamlDiagnostic {
label { color: rgba(212, 201, 168, 0.5); font-weight: var(--font-weight-semibold); } 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; } 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; } .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; } 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 { 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); } .pill--ok { border-color: var(--color-status-success); color: var(--color-status-success); }