Fix remaining VEX and policy-gates theme: borders, button bg, rgba

VEX hub (13 files): fixed 2px/3px/4px border variants using text
color vars, border-color with text-secondary, background text-secondary.

Policy gates (6 files): fixed all swapped theme patterns including
backgrounds, text colors, borders, button backgrounds, and rgba colors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
master
2026-03-29 12:32:04 +03:00
parent f4efa5195f
commit 5c1fc56b5c
18 changed files with 89 additions and 89 deletions

View File

@@ -118,8 +118,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.airgap-container {
position: relative;
padding: 1rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
transition: border-color 0.2s;
@@ -196,7 +196,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
align-items: center;
width: 44px;
height: 24px;
background: var(--color-text-primary);
background: var(--color-surface-tertiary);
border-radius: var(--radius-xl);
transition: background 0.2s;
}
@@ -224,7 +224,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.status-row {
@@ -235,7 +235,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
&--stale {
padding: 0.375rem 0.5rem;
background: rgba(239, 68, 68, 0.1);
background: var(--color-status-error-bg);
border-radius: var(--radius-sm);
margin: 0 -0.5rem;
}
@@ -302,7 +302,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.spinner {
width: 24px;
height: 24px;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 0.6s linear infinite;

View File

@@ -217,8 +217,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
@@ -228,7 +228,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border: none;
border-radius: var(--radius-md);
color: var(--color-surface-primary);
@@ -273,14 +273,14 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
.result-summary {
padding: 1rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
&--pass { border-top: 3px solid var(--color-status-success); }
&--fail { border-top: 3px solid var(--color-status-error); }
&--warn { border-top: 3px solid var(--color-status-warning); }
&--error { border-top: 3px solid var(--color-text-secondary); }
&--error { border-top: 3px solid var(--color-border-secondary); }
}
.summary-header {
@@ -341,8 +341,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
}
.blocking-gates {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
background: var(--color-status-error-bg);
border: 1px solid var(--color-status-error-bg);
}
.warning-gates {
@@ -374,7 +374,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
font-family: monospace;
&--blocking {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -405,7 +405,7 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
.expand-all-btn {
padding: 0.25rem 0.5rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.75rem;
@@ -413,23 +413,23 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
&:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
}
.artifact-item {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
overflow: hidden;
&--pass { border-left: 3px solid var(--color-status-success); }
&--fail { border-left: 3px solid var(--color-status-error); }
&--warn { border-left: 3px solid var(--color-status-warning); }
&--error { border-left: 3px solid var(--color-text-secondary); }
&--error { border-left: 3px solid var(--color-border-secondary); }
&--expanded {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
}
@@ -474,14 +474,14 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
.artifact-details {
padding: 0.75rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
background: rgba(0, 0, 0, 0.2);
}
.artifact-blocking {
margin-bottom: 0.75rem;
padding: 0.5rem;
background: rgba(239, 68, 68, 0.1);
background: var(--color-status-error-bg);
border-radius: var(--radius-sm);
font-size: 0.8125rem;
}
@@ -544,8 +544,8 @@ import { ProfileSelectorComponent } from '../profile-selector/profile-selector.c
justify-content: center;
gap: 0.5rem;
padding: 3rem;
background: var(--color-text-primary);
border: 1px dashed var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px dashed var(--color-border-primary);
border-radius: var(--radius-lg);
}

View File

@@ -105,8 +105,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
flex-direction: column;
gap: 0.75rem;
padding: 0.75rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
}
@@ -133,7 +133,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.loading-dot {
width: 8px;
height: 8px;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border-radius: var(--radius-full);
animation: pulse 1s ease-in-out infinite;
}
@@ -145,7 +145,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.freshness-summary {
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.summary-counts {
@@ -216,7 +216,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
}
&--unknown {
.badge-indicator { background: var(--color-text-secondary); }
.badge-indicator { background: var(--color-surface-tertiary); }
.badge-name { color: var(--color-text-muted); }
}
}
@@ -239,7 +239,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.show-more-btn {
padding: 0.25rem 0.5rem;
background: transparent;
border: 1px dashed var(--color-text-secondary);
border: 1px dashed var(--color-border-secondary);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.75rem;
@@ -248,7 +248,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
&:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
color: rgba(212, 201, 168, 0.3);
}
}
@@ -260,7 +260,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
gap: 0.375rem;
padding: 0.5rem 0.75rem;
background: transparent;
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: 0.75rem;
@@ -269,7 +269,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
&:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
color: rgba(212, 201, 168, 0.3);
}

View File

@@ -138,8 +138,8 @@ import {
`,
styles: [`
.simulation-results {
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
overflow: hidden;
@@ -156,7 +156,7 @@ import {
}
&--error {
border-top: 3px solid var(--color-text-secondary);
border-top: 3px solid var(--color-border-secondary);
}
}
@@ -165,7 +165,7 @@ import {
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.header-status {
@@ -214,8 +214,8 @@ import {
}
&--hard {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
background: var(--color-status-error-bg);
border: 1px solid var(--color-status-error-bg);
}
&--soft {
@@ -284,7 +284,7 @@ import {
.gate-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.15s;
@@ -298,7 +298,7 @@ import {
}
&--expanded {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
}
@@ -335,7 +335,7 @@ import {
}
.icon-fail {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error);
}
@@ -365,7 +365,7 @@ import {
.gate-details {
padding: 0.75rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
background: rgba(0, 0, 0, 0.2);
}
@@ -387,7 +387,7 @@ import {
gap: 1rem;
padding: 0.75rem 1rem;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.footer-item {

View File

@@ -232,13 +232,13 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
display: flex;
flex-direction: column;
height: 100%;
background: var(--color-text-heading);
background: var(--color-surface-elevated);
color: rgba(212, 201, 168, 0.3);
}
.panel-header {
padding: 1.5rem;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.panel-title {
@@ -265,8 +265,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: var(--color-text-heading);
border-right: 1px solid var(--color-text-primary);
background: var(--color-surface-elevated);
border-right: 1px solid var(--color-border-primary);
overflow-y: auto;
}
@@ -308,7 +308,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
.default-indicator {
padding: 0.125rem 0.5rem;
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
color: var(--color-status-success);
border-radius: var(--radius-sm);
font-size: 0.6875rem;
@@ -331,8 +331,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
.requirement-card {
padding: 1rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-lg);
}
@@ -355,7 +355,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
font-size: 0.8125rem;
&:last-child {
@@ -381,7 +381,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
text-transform: uppercase;
&--required {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error);
}
@@ -443,7 +443,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
font-family: monospace;
&--hard {
background: rgba(239, 68, 68, 0.2);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
}
@@ -461,15 +461,15 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
.simulation-section {
padding-top: 1.5rem;
border-top: 1px solid var(--color-text-primary);
border-top: 1px solid var(--color-border-primary);
}
.simulation-error {
margin-bottom: 1rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius-md);
border: 1px solid rgba(239, 68, 68, 0.45);
background: rgba(239, 68, 68, 0.12);
border: 1px solid var(--color-status-error-bg);
background: var(--color-status-error-bg);
color: var(--color-status-error-border);
font-size: 0.8125rem;
font-weight: var(--font-weight-medium);
@@ -514,7 +514,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate-
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--color-status-info);
background: var(--color-btn-primary-bg);
border: none;
border-radius: var(--radius-md);
color: var(--color-surface-primary);

View File

@@ -127,8 +127,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.selector-select {
width: 100%;
padding: 0.625rem 2.5rem 0.625rem 0.75rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
color: rgba(212, 201, 168, 0.3);
font-size: 0.875rem;
@@ -140,7 +140,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
background-size: 1rem;
&:hover:not(:disabled) {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
&:focus {
@@ -165,7 +165,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.spinner {
width: 1rem;
height: 1rem;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 0.6s linear infinite;
@@ -178,8 +178,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.profile-preview {
margin-top: 0.5rem;
padding: 0.75rem;
background: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
background: var(--color-surface-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
}
@@ -201,7 +201,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client';
.default-badge {
padding: 0.125rem 0.375rem;
background: rgba(34, 197, 94, 0.2);
background: var(--color-status-success-bg);
color: var(--color-status-success);
border-radius: var(--radius-sm);
font-size: 0.625rem;

View File

@@ -377,7 +377,7 @@ import { AiConsentScope, AiConsentStatus } from '../../core/api/advisory-ai.mode
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;

View File

@@ -211,7 +211,7 @@ import { AiExplainRequest, AiExplainResponse } from '../../core/api/advisory-ai.
max-width: 560px;
height: 100%;
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
border-left: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease;

View File

@@ -322,7 +322,7 @@ type JustificationType =
max-width: 560px;
height: 100%;
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
border-left: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease;
@@ -736,7 +736,7 @@ type JustificationType =
.checklist-item .checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-sm);
display: flex;
align-items: center;

View File

@@ -310,7 +310,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
max-width: 560px;
height: 100%;
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
border-left: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease;
@@ -931,7 +931,7 @@ const DEFAULT_REMEDIATION_PR_PREFS = {
.pr-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-top-color: var(--color-status-info-border);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;

View File

@@ -370,7 +370,7 @@ interface ConflictingStatement {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;
@@ -518,7 +518,7 @@ interface ConflictingStatement {
.statement-card {
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-xl);
cursor: pointer;
transition: all 0.2s ease;
@@ -526,7 +526,7 @@ interface ConflictingStatement {
}
.statement-card:hover {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
.statement-card--selected {
@@ -701,7 +701,7 @@ interface ConflictingStatement {
}
.option-item:hover {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
.option-item input {
@@ -711,7 +711,7 @@ interface ConflictingStatement {
.option-radio {
width: 20px;
height: 20px;
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;

View File

@@ -461,7 +461,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

View File

@@ -550,7 +550,7 @@ interface EvidenceItem {
height: 32px;
border-radius: var(--radius-full);
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
display: flex;
align-items: center;
justify-content: center;
@@ -653,7 +653,7 @@ interface EvidenceItem {
gap: 1rem;
padding: 1rem;
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-xl);
cursor: pointer;
text-align: left;
@@ -661,7 +661,7 @@ interface EvidenceItem {
}
.status-option:hover {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
.status-option--selected {
@@ -746,7 +746,7 @@ interface EvidenceItem {
display: block;
padding: 0.875rem 1rem;
background: var(--color-surface-tertiary);
border: 2px solid var(--color-text-primary);
border: 2px solid var(--color-border-primary);
border-radius: var(--radius-xl);
text-align: left;
cursor: pointer;
@@ -754,7 +754,7 @@ interface EvidenceItem {
}
.justification-type-btn:hover {
border-color: var(--color-text-secondary);
border-color: var(--color-border-secondary);
}
.justification-type-btn--selected {

View File

@@ -519,7 +519,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

View File

@@ -283,7 +283,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

View File

@@ -318,7 +318,7 @@ import {
max-width: 560px;
height: 100%;
background: var(--color-surface-elevated);
border-left: 1px solid var(--color-text-primary);
border-left: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease;
@@ -419,7 +419,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

View File

@@ -259,7 +259,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;

View File

@@ -593,7 +593,7 @@ import {
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-text-primary);
border: 3px solid var(--color-border-primary);
border-top-color: var(--color-status-info);
border-radius: var(--radius-full);
animation: spin 1s linear infinite;