Fix button, tag, and code block colors to use theme tokens

- Replace btn backgrounds from --color-status-info to --color-btn-primary-bg
  across all governance and simulation components (30+ instances)
- Fix code block backgrounds to use --color-terminal-bg instead of
  --color-surface-inverse for proper syntax display contrast
- Fix JSON code text from --color-text-muted to --color-terminal-text
  for readable code on dark backgrounds

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-28 12:27:18 +02:00
parent 3160fe5a09
commit b7fc87893c
27 changed files with 79 additions and 79 deletions

View File

@@ -472,7 +472,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.wizard-step--active .wizard-step__number {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-text-heading);
}
@@ -908,8 +908,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

View File

@@ -223,8 +223,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border-primary); }

View File

@@ -271,8 +271,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

View File

@@ -264,8 +264,8 @@ import {
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

View File

@@ -260,12 +260,12 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.btn--primary {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-btn-primary-text);
}
.btn--primary:hover:not(:disabled) {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
}
.btn--primary:disabled {

View File

@@ -234,13 +234,13 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
.btn--small {
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-text-heading);
border: none;
}
.btn--small:hover {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
}
/* Progress Bar */

View File

@@ -293,8 +293,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
@@ -508,7 +508,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.toggle-small input:checked + .toggle-small__slider {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
}
.toggle-small input:checked + .toggle-small__slider:before {

View File

@@ -195,8 +195,8 @@ import { StellaFilterChipComponent } from '../../shared/components/stella-filter
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover { background: var(--color-btn-primary-bg-hover); }
.btn--ghost { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover { background: var(--color-surface-tertiary); color: var(--color-text-primary); }

View File

@@ -333,8 +333,8 @@ interface SchemaSection {
text-decoration: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover { background: var(--color-btn-primary-bg-hover); }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
.btn--secondary:hover { background: var(--color-surface-tertiary); }
@@ -498,7 +498,7 @@ interface SchemaSection {
/* Field Details (expanded) */
.field-details td {
padding: 0;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
}
.details-content {
@@ -618,13 +618,13 @@ interface SchemaSection {
}
.example-tab--active {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-text-heading);
}
.example-code {
position: relative;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-md);
overflow: hidden;
}
@@ -639,7 +639,7 @@ interface SchemaSection {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-text-muted);
color: var(--color-terminal-text);
}
.copy-btn {

View File

@@ -295,8 +295,8 @@ import {
gap: 0.5rem;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }
@@ -374,7 +374,7 @@ import {
.line-numbers {
padding: 1rem 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
text-align: right;
user-select: none;
overflow: hidden;
@@ -417,7 +417,7 @@ import {
gap: 0.35rem;
align-items: center;
padding: 0.5rem 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-top: 1px solid var(--color-border-primary);
overflow-x: auto;
}

View File

@@ -403,8 +403,8 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--secondary { background: var(--color-surface-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); }

View File

@@ -298,8 +298,8 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
border: none;
}
.btn--primary { background: var(--color-status-info); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary { background: var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--color-text-muted); }
@@ -335,7 +335,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.filter-tab--active {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-text-heading);
}

View File

@@ -381,7 +381,7 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.toggle input:checked + .toggle__slider {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
}
.toggle input:checked + .toggle__slider:before {
@@ -561,11 +561,11 @@ import { injectPolicyGovernanceScopeResolver } from './policy-governance-scope';
}
.btn--primary {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-btn-primary-text);
}
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
`]

View File

@@ -272,11 +272,11 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
.btn--secondary:hover { background: var(--color-surface-tertiary); }
.btn--primary {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: var(--color-btn-primary-text);
}
.btn--primary:hover:not(:disabled) { background: var(--color-status-info); }
.btn--primary:hover:not(:disabled) { background: var(--color-btn-primary-bg-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--ghost {
@@ -388,7 +388,7 @@ import { ModalComponent } from '../../shared/components/modal/modal.component';
.weight-gauge__fill {
height: 100%;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border-radius: var(--radius-sm);
transition: width 0.2s ease;
}

View File

@@ -545,7 +545,7 @@ import {
.form-field select,
.form-field input[type='number'] {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -596,7 +596,7 @@ import {
}
.available-artifacts {
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
overflow: hidden;
@@ -613,7 +613,7 @@ import {
.search-input {
flex: 1;
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -732,7 +732,7 @@ import {
.tags-input input {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -880,7 +880,7 @@ import {
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
}
@@ -914,7 +914,7 @@ import {
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
border-left: 3px solid transparent;
}

View File

@@ -448,7 +448,7 @@ import {
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
cursor: pointer;
@@ -602,7 +602,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
}
.header-left {
@@ -728,7 +728,7 @@ import {
.conflict-details {
padding: 1rem;
border-top: 1px solid var(--color-border-primary);
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
}
.values-comparison {
@@ -871,7 +871,7 @@ import {
.suggested-value code {
font-family: 'Monaco', 'Consolas', monospace;
color: var(--color-status-success-border);
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
}

View File

@@ -391,7 +391,7 @@ import {
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
}
@@ -497,7 +497,7 @@ import {
.rule-card {
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
border-left-width: 4px;
@@ -626,7 +626,7 @@ import {
}
th {
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
font-size: 0.75rem;

View File

@@ -322,7 +322,7 @@ import {
display: flex;
gap: 0.75rem;
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
border-left: 3px solid var(--color-status-info);
}
@@ -431,7 +431,7 @@ import {
font-size: 0.8rem;
color: var(--color-text-muted);
padding: 0.25rem 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-sm);
}

View File

@@ -288,7 +288,7 @@ import {
width: 12px;
height: 12px;
border-radius: var(--radius-full);
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
flex-shrink: 0;
}
@@ -298,7 +298,7 @@ import {
.audit-entry--updated .indicator-dot,
.audit-entry--approved .indicator-dot {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
}
.audit-entry--activated .indicator-dot,
@@ -423,7 +423,7 @@ import {
.audit-entry__comment {
margin: 0.75rem 0;
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-left: 3px solid var(--color-text-secondary);
border-radius: 0 8px 8px 0;
color: rgba(212, 201, 168, 0.5);
@@ -433,7 +433,7 @@ import {
.audit-entry__changes {
margin: 0.75rem 0;
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
}

View File

@@ -294,7 +294,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
cursor: pointer;
transition: background 150ms ease;
}

View File

@@ -360,7 +360,7 @@ import {
.field select,
.field textarea {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -569,7 +569,7 @@ import {
.exception-card__justification {
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
margin-bottom: 0.75rem;
}

View File

@@ -414,7 +414,7 @@ import {
}
.filter-btn--active {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border-color: var(--color-status-info);
color: white;
}
@@ -530,7 +530,7 @@ import {
.issue-card__fix {
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
margin-bottom: 0.5rem;
}

View File

@@ -263,7 +263,7 @@ import {
.field select {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -369,7 +369,7 @@ import {
.conflict-card {
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-status-warning);
border-radius: var(--radius-lg);
}
@@ -484,7 +484,7 @@ import {
.rule-card {
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
border-left: 3px solid var(--color-status-success);
}
@@ -582,7 +582,7 @@ import {
font-size: 0.85rem;
color: var(--color-text-muted);
padding: 0.25rem 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-sm);
}

View File

@@ -422,7 +422,7 @@ import {
display: flex;
gap: 0.75rem;
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
border-left: 3px solid var(--color-text-secondary);
}
@@ -583,7 +583,7 @@ import {
.field textarea {
padding: 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
color: rgba(212, 201, 168, 0.3);

View File

@@ -418,7 +418,7 @@ import { ShadowModeStateService } from './shadow-mode-state.service';
}
th {
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
font-size: 0.75rem;

View File

@@ -461,7 +461,7 @@ import {
select,
textarea {
padding: 0.5rem 0.75rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
@@ -649,7 +649,7 @@ import {
flex-direction: column;
gap: 0.125rem;
padding: 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-md);
font-size: 0.8rem;
}
@@ -692,7 +692,7 @@ import {
}
th {
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
font-size: 0.75rem;
@@ -773,7 +773,7 @@ import {
gap: 1rem;
align-items: center;
padding: 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-md);
font-size: 0.85rem;
}
@@ -806,7 +806,7 @@ import {
}
.explain-decisive {
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
color: white;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);

View File

@@ -654,7 +654,7 @@ import {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
}
@@ -786,7 +786,7 @@ import {
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}
@@ -852,7 +852,7 @@ import {
display: flex;
gap: 1rem;
padding: 0.5rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-md);
font-size: 0.85rem;
border-left: 3px solid transparent;
@@ -932,7 +932,7 @@ import {
.hash-comparison {
padding: 1rem;
background: var(--color-surface-inverse);
background: var(--color-terminal-bg);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
}